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

   Design language: formal corporate / editorial poster.
   Deep navy + warm ivory + brushed gold. Butler (serif display) for
   headlines, Montserrat (sans) for body, labels and data.

   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:        #0d1f3c;   /* deep navy   */
  --ink-2:      #16325c;   /* soft navy   */
  --ink-3:      #24406e;
  --paper:      #f5f1e8;   /* warm ivory  */
  --paper-2:    #ece5d6;
  --card:       #fffdf7;
  --gold:       #b08d4f;   /* brushed gold */
  --gold-2:     #c9a76b;
  --gold-ink:   #8a6a34;
  --line:       rgba(13, 31, 60, .14);
  --line-soft:  rgba(13, 31, 60, .08);
  --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:   14px;
  --radius-sm: 9px;
  --shadow:   0 18px 40px -22px rgba(13, 31, 60, .35);
  --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, 17px)/1.65 var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[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;
}

/* ── Top bar ────────────────────────────────────────────────────────── */
.shell-topbar {
  flex: 0 0 auto;
  height: var(--topbar-h);
  background: var(--ink);
  color: #f3ecdd;
  border-bottom: 1px solid rgba(201, 167, 107, .45);
  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: .03em;
  text-transform: uppercase;
  color: #f3ecdd;
}
.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(243, 236, 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(201, 167, 107, .5);
  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(28px, 5.5vh, 72px) clamp(20px, 6vw, 72px) clamp(40px, 6vh, 84px);
  min-height: 100%;
}
.panel-inner::after { content: ""; display: block; height: calc(var(--navbar-h) * 0.5); } /* room for the nav bar */

/* cover is full-bleed navy; centre its content vertically when it fits */
.panel-cover {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(201, 167, 107, .16), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(36, 64, 110, .55), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, #0a1730 55%, var(--ink-2) 100%);
  color: #f3ecdd;
}
.cover-inner {
  display: flex;
  flex-direction: column;
}
.cover-inner > :first-child { margin-top: auto; }
.cover-inner > :last-child  { margin-bottom: auto; }
.cover-inner > * { flex-shrink: 0; }

/* ── Cover content ──────────────────────────────────────────────────── */
.cover-kicker {
  font-size: clamp(10.5px, 1.4vw, 13px);
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: clamp(14px, 2.4vh, 26px);
}
.cover-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 9.5vw, 108px);
  line-height: .98;
  letter-spacing: -.01em;
  color: #f7f2e6;
  max-width: 11ch;
  margin-bottom: clamp(18px, 3vh, 34px);
}
.cover-subtitle {
  max-width: 58ch;
  font-size: clamp(15px, 1.9vw, 19px);
  font-weight: 300;
  color: rgba(243, 236, 221, .86);
  margin-bottom: clamp(24px, 4vh, 44px);
}
.cover-greeting {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.2vw, 22px);
  color: #e9ddc3;
  margin-bottom: clamp(18px, 3vh, 30px);
}

.cover-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid rgba(201, 167, 107, .35);
  margin-bottom: clamp(24px, 4vh, 40px);
  max-width: 860px;
}
.meta-item {
  padding: 14px 22px 14px 0;
  border-bottom: 1px solid rgba(201, 167, 107, .18);
  margin-right: 22px;
}
.meta-item .meta-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin: 0 0 5px;
}
.meta-item .meta-value {
  font-size: clamp(13.5px, 1.7vw, 16px);
  color: #f3ecdd;
  margin: 0;
}
/* Cover meta row whose value is empty (engine removes the .meta-value
   element) collapses to a bare label — drop the whole row instead. */
.meta-item:not(:has(.meta-value)) { display: none; }

.cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(28px, 4.5vh, 48px);
}

.cover-speakers {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: clamp(22px, 3.5vh, 34px);
}
.avatar-row { display: flex; }
.avatar-row .avatar { margin-left: -8px; }
.avatar-row .avatar:first-child { margin-left: 0; }
.cover-speakers-note {
  font-size: 12.5px;
  color: rgba(243, 236, 221, .72);
  letter-spacing: .02em;
  max-width: 46ch;
}

.cover-footnote {
  font-size: 13px;
  color: rgba(243, 236, 221, .62);
  letter-spacing: .02em;
}
.cover-footnote strong { color: var(--gold-2); font-weight: 700; }

/* ── Shared avatars ─────────────────────────────────────────────────── */
.avatar {
  position: relative; /* crop the headshot to the ring */
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink-2);
  color: #f3ecdd;
  border: 2px solid rgba(201, 167, 107, .7);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}
.avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 19px;
  border-width: 2px;
  background: var(--ink);
  color: #f3ecdd;
  box-shadow: 0 0 0 4px var(--card), 0 0 0 5px rgba(176, 141, 79, .3);
}

/* Speaker headshots: a photo fills the avatar ring; the monogram initials
   fall back automatically if the image is missing or fails to load.
   Headshots are buttons — clicking opens the portrait in the lightbox. */
button.avatar { padding: 0; cursor: zoom-in; }
button.avatar:hover { border-color: var(--gold-2); }
.avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.avatar:has(.avatar-photo) .avatar-initials { display: none; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  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-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-2); color: #fff; }
.btn-outline { border-color: rgba(243, 236, 221, .55); color: #f3ecdd; }
.btn-outline:hover { border-color: var(--gold-2); color: var(--gold-2); }
.btn-block { width: 100%; }

/* ── Panel heads ────────────────────────────────────────────────────── */
.panel-head {
  margin-bottom: clamp(22px, 3.6vh, 38px);
  padding-bottom: clamp(16px, 2.4vh, 26px);
  border-bottom: 1px solid var(--line);
}
.panel-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 10px;
}
.panel-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
}
.panel-desc {
  max-width: 62ch;
  margin-top: 12px;
  color: var(--muted);
  font-size: clamp(14px, 1.7vw, 16px);
}
.panel-note {
  margin-top: clamp(20px, 3vh, 30px);
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--muted);
  max-width: 68ch;
}

/* ── Agenda ─────────────────────────────────────────────────────────── */
.agenda { margin-top: clamp(6px, 1vh, 12px); }
.agenda-row {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr auto;
  gap: clamp(12px, 2vw, 22px);
  align-items: baseline;
  padding: clamp(13px, 2vh, 19px) 0;
  border-bottom: 1px solid var(--line-soft);
}
.agenda-row:last-child { border-bottom: 0; }
.agenda-time {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .04em;
  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(16.5px, 2.2vw, 21px);
  color: var(--ink);
  line-height: 1.25;
}
.agenda-detail { font-size: 13px; color: var(--muted); margin-top: 3px; }
.agenda-tag {
  align-self: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(13, 31, 60, .06);
  color: var(--muted);
  border: 1px solid var(--line-soft);
}
.tag-keynote   { background: rgba(176, 141, 79, .16); color: var(--gold-ink); border-color: rgba(176, 141, 79, .35); }
.tag-panel     { background: rgba(36, 64, 110, .10);  color: var(--ink-2);     border-color: rgba(36, 64, 110, .22); }
.tag-networking{ background: rgba(46, 107, 79, .10);  color: var(--ok);        border-color: rgba(46, 107, 79, .25); }
.tag-arrival, .tag-opening, .tag-closing { background: rgba(13, 31, 60, .05); color: var(--muted); }
.tag-breakout  { background: rgba(163, 48, 42, .08);  color: var(--danger);    border-color: rgba(163, 48, 42, .2); }

/* ── Speakers ───────────────────────────────────────────────────────── */
.speaker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.speaker-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.6vw, 28px);
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease;
}
/* letterpressed double plate — inner gold hairline, replaces the gradient bar */
.speaker-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(176, 141, 79, .38);
  border-radius: calc(var(--radius) - 6px);
  pointer-events: none;
}
/* jewel pin on the top edge, like a sealed monogram card */
.speaker-card::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--card);
  border: 1px solid rgba(176, 141, 79, .6);
  pointer-events: none;
}
.speaker-card:hover { transform: translateY(-3px); border-color: rgba(176, 141, 79, .4); }
.speaker-card .avatar-lg { margin-bottom: 16px; }
.speaker-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  line-height: 1.15;
}
.speaker-role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 6px;
}
.speaker-bio { font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.speaker-tag {
  display: inline-block;
  margin-top: 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: rgba(36, 64, 110, .08);
  border-radius: 999px;
  padding: 5px 10px;
}

/* ── Official flyer / banner on the cover (optional — delete .flyer-banner
   to hide, or set CONFIG.showFlyer=false in main.js). The summit already
   has its own flyer or banner: show it so guests recognise the event and
   confirm they are on the right page with the correct link. ─────────── */
.flyer-banner { margin: 0 0 clamp(24px, 4vh, 40px); }
.flyer-banner__card { position: relative; max-width: 340px; }
.flyer-banner__open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(201, 167, 107, .5);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  cursor: zoom-in;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .65);
  transition: transform .2s ease, border-color .2s ease;
}
.flyer-banner__open:hover { transform: translateY(-2px); border-color: var(--gold-2); }
.flyer-banner__open img { display: block; width: 100%; height: auto; }
.flyer-banner__chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-2);
  background: rgba(10, 23, 48, .8);
  border: 1px solid rgba(201, 167, 107, .45);
  padding: 7px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Gallery (optional photography — delete .panel-gallery to hide) ─── */
.gallery-grid {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-item {
  position: relative;
  margin: 0;
  border: 1px solid rgba(201, 167, 107, .35);
  border-radius: var(--radius);
  overflow: hidden;
  /* navy ground so a slot without an image still reads as a designed card */
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(201, 167, 107, .18), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, #0a1730 55%, var(--ink-2) 100%);
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow);
}
@media (min-width: 620px) { .gallery-item--wide { grid-column: span 2; } }
.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
/* each photo is a full-bleed button → opens the lightbox (zoom, ‹ ›) */
.gallery-open {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.gallery-open img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item:hover img { transform: scale(1.04); }
/* scrim so captions stay legible over any photo */
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(10, 23, 48, .82));
  pointer-events: none;
}
.gallery-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px 16px;
  pointer-events: none; /* whole card is the tap target for the lightbox */
}
.g-cap-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.g-cap-text {
  font-size: 14px;
  color: #f3ecdd;
  line-height: 1.4;
}

/* ── Video (optional — delete .video-section to hide, or set
   CONFIG.showVideo=false in main.js). Lives inside the Gallery panel. ── */
.video-section { margin-top: clamp(26px, 3.8vh, 38px); }
.video-card { position: relative; max-width: 720px; }
.video-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(201, 167, 107, .4);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow);
  transition: border-color .2s ease;
}
.video-open:hover { border-color: var(--gold-2); }
.video-open::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 23, 48, .6));
  pointer-events: none;
}
.video-open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 6px; /* optical centering of the glyph */
  border-radius: 50%;
  background: rgba(13, 31, 60, .55);
  border: 2px solid rgba(201, 167, 107, .9);
  color: #f7f2e6;
  font-size: 26px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform .2s ease, background .2s ease;
}
.video-open:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: var(--gold); }
.video-chip {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-2);
  background: rgba(10, 23, 48, .8);
  border: 1px solid rgba(201, 167, 107, .45);
  padding: 7px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.video-card__label {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .02em;
}

/* ── Free page (optional — delete the .panel-free section to hide, or
   set CONFIG.showFreePage=false in main.js). A page of the host's own:
   repeatable "free blocks", each with a free title, free text and an
   OPTIONAL photo (the block works fine without it). The nav tab and page
   counter follow the panels' DOM order, so moving the section moves the
   tab too. ─────────────────────────────────────────────────────────── */
.free-blocks {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  max-width: 760px;
}
.free-block {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.6vw, 28px);
  box-shadow: var(--shadow);
}
/* gold hairline across the top of each block, like the speaker cards */
.free-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
  opacity: .6;
  pointer-events: none;
}
.free-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 10px;
}
.free-content {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 62ch;
}
.free-content p { margin: 0; }
.free-figure { margin: 18px 0 0; }
/* the whole photo is a button → opens the lightbox (zoom, single mode) */
.free-img-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(201, 167, 107, .35);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  cursor: zoom-in;
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease;
}
.free-img-open:hover { transform: translateY(-2px); border-color: var(--gold-2); }
.free-img-open img { display: block; width: 100%; height: auto; }
.free-cap {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .02em;
}

/* ── Registration / RSVP ────────────────────────────────────────────── */
.reg-includes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 22px;
  margin-bottom: clamp(20px, 3vh, 30px);
  padding: clamp(16px, 2vw, 20px);
  background: rgba(176, 141, 79, .08);
  border: 1px solid rgba(176, 141, 79, .28);
  border-radius: var(--radius);
}
.reg-includes li {
  position: relative;
  padding-left: 26px;
  font-size: 13.5px;
  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(22px, 3.4vh, 34px);
  padding: 18px 20px;
  background: var(--ink);
  color: #f3ecdd;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.rsvp-countdown-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 12px;
}
.rsvp-countdown-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.count-box {
  min-width: 72px;
  text-align: center;
  background: rgba(243, 236, 221, .07);
  border: 1px solid rgba(201, 167, 107, .35);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
}
.count-box span {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: #f7f2e6;
  font-variant-numeric: tabular-nums;
}
.count-box small {
  display: block;
  margin-top: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(243, 236, 221, .6);
}

/* ── RSVP form ──────────────────────────────────────────────────────── */
.rsvp-form { max-width: 640px; }
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.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: 12px 14px;
  font: 400 15px/1.4 var(--font-sans);
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid rgba(13, 31, 60, .22);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 79, .25);
}
.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='%230d1f3c' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
textarea.form-control { resize: vertical; min-height: 64px; }
.form-control-narrow { max-width: 140px; }

.form-helper {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: .01em;
}

.error {
  display: block;
  min-height: 1.1em;
  margin-top: 5px;
  font-size: 12.5px;
  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: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  letter-spacing: .04em;
}

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

/* ── Guest book (platform-injected markup) ──────────────────────────── */
.guestbook-section .panel-inner { max-width: 760px; }
.guestbook-section .form-control { 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: 12px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--ink);
  color: #f3ecdd;
  font-size: 12px;
  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: 18px; }
.guestbook-entry {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.guestbook-entry h5 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.5px;
  color: var(--ink);
}
.guestbook-entry p { font-size: 14px; color: var(--ink-2); margin: 4px 0 6px; }
.guestbook-entry small { font-size: 11.5px; color: var(--muted); }

.more-guestbook-wrap { text-align: center; padding: 8px 0 4px; }
#load-more {
  padding: 11px 26px;
  border-radius: 999px;
  border: 1.5px solid rgba(13, 31, 60, .3);
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  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); }

/* ── Practical details ──────────────────────────────────────────────── */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.detail-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(18px, 2.4vw, 24px);
}
.detail-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.detail-card p { font-size: 13.5px; color: var(--ink-2); }
.detail-card p + p { margin-top: 10px; }

.shell-footer {
  margin-top: clamp(28px, 4.5vh, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.footer-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold-2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .02em;
}
.shell-footer .back-to-top { margin-left: auto; font-weight: 700; text-decoration: none; }
.footer-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink-2);
}
.footer-org, .footer-year { font-size: 13px; color: var(--muted); }

/* ── Shell navigation bar ───────────────────────────────────────────── */
.shell-nav {
  flex: 0 0 auto;
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  padding: 0 clamp(8px, 2vw, 24px);
  background: rgba(13, 31, 60, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(201, 167, 107, .3);
  padding-bottom: 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(201, 167, 107, .5);
  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; }

/* Labeled section tabs — clear, concise, readable text (scrolls
   horizontally on small screens; the active tab is scrolled into view). */
.nav-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
  scroll-snap-type: x proximity;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(201, 167, 107, .45);
  background: transparent;
  color: rgba(243, 236, 221, .82);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-tab:hover { border-color: var(--gold-2); color: #fff; }
.nav-tab.is-active { background: var(--gold-2); border-color: var(--gold-2); color: #fff; }

/* ── Full-width powered-by brand strip ────────────────────────────────
   A slim, full-width "Powered by Kundangi" line. Pinned above the nav
   bar in the JS shell (flex child of .shell), and at the end of the
   stacked document when JS is off. The engine swaps the literal Kundangi
   token inside .link-footer for the platform name at render; the cockpit's
   Free Powered By field can override the whole line. */
.powered-by {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  padding: 9px 14px 11px;
  border-top: 1px solid rgba(201, 167, 107, .3);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}
html.shell-on .powered-by {
  padding: 6px 14px;
  background: rgba(10, 23, 48, .92);
  color: rgba(243, 236, 221, .55);
}
.powered-by .link-footer { color: var(--gold-2); }

/* ── Lightbox (photo & video viewer) ────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
}
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 14, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox-stage {
  position: relative;
  z-index: 1;
  max-width: min(1080px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-figure {
  overflow: auto; /* lets a zoomed photo pan via scroll/drag */
  max-width: 100%;
  max-height: 74vh;
  border-radius: var(--radius);
  overscroll-behavior: contain;
}
.lightbox-img {
  display: block;
  max-width: min(1080px, 94vw);
  max-height: 74vh;
  width: auto;
  height: auto;
  border: 1px solid rgba(201, 167, 107, .45);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);
  cursor: zoom-in;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: width .3s ease;
}
.lightbox-img.is-zoomed {
  max-width: none;
  max-height: none;
  width: 160%;
  cursor: zoom-out;
}
.lightbox-cap {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(15px, 2vw, 18px);
  color: #f3ecdd;
  text-align: center;
  max-width: 60ch;
}
.lightbox-count {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gold-2);
  font-variant-numeric: tabular-nums;
}
.lightbox-zoom-hint {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(243, 236, 221, .55);
}
.lightbox-video {
  width: min(960px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(201, 167, 107, .45);
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);
}
.lightbox-close, .lightbox-nav {
  position: fixed;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(201, 167, 107, .55);
  background: rgba(13, 31, 60, .75);
  color: var(--gold-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .2s ease, color .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.lightbox-nav:disabled { opacity: .3; cursor: default; pointer-events: none; }
.lightbox-close { top: calc(env(safe-area-inset-top) + 14px); right: 14px; }
.lightbox-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 12px; top: 50%; transform: translateY(-50%); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cover-actions .btn { width: 100%; }
  .meta-item { margin-right: 0; }
  .agenda-row { grid-template-columns: minmax(64px, auto) 1fr; row-gap: 4px; }
  .agenda-tag { grid-column: 2; align-self: start; }
  .topbar-cta { display: none; }
  .nav-btn { width: 38px; height: 38px; }
  .nav-tab { font-size: 10px; padding: 7px 12px; min-height: 36px; }
  .lightbox-close { width: 42px; height: 42px; }
  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; font-size: 19px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
  .video-play { width: 62px; height: 62px; font-size: 22px; }
}

/* Very 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;
  }
  .agenda-tag {
    grid-column: 1;
  }
}

/* ── 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; 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; max-width: none; }
  .panel-inner::after { content: none; }

  .panel-cover { background: #fff !important; color: #111 !important; }
  .cover-title, .cover-greeting { color: #0d1f3c !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cover-kicker, .cover-meta .meta-label, .cover-footnote strong { color: #8a6a34 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cover-subtitle, .cover-meta .meta-value, .cover-footnote { color: #333 !important; }
  .cover-meta { border-color: #999; }
  .meta-item { border-bottom: 1px solid #ccc; }
  .cover-speakers-note { color: #444 !important; }

  .lightbox { display: none !important; }
  .flyer-banner__chip, .video-chip, .video-play { display: none !important; }

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

  .speaker-card, .detail-card, .reg-includes, .guestbook-entry, .gallery-item, .free-block {
    box-shadow: none;
    border-color: #bbb;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .agenda-row { break-inside: avoid; page-break-inside: avoid; }
  .agenda-tag, .speaker-tag { border: 1px solid #999; background: #fff; color: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rsvp-countdown { background: #f4f1ea; color: #111; border: 1px solid #999; box-shadow: none; }
  .rsvp-countdown .count-box { background: #fff; border-color: #bbb; }
  .count-box span { color: #111; }
  .rsvp-countdown-label { color: #8a6a34; }
  .form-control, select.form-control { border-color: #999; background: #fff !important; }
  .form-group label, .panel-title, .agenda-name, .speaker-name, .guestbook-entry h5 { color: #0d1f3c !important; }
  .panel-desc, .agenda-detail, .form-helper, .panel-note, .detail-card p, .speaker-bio { color: #333 !important; }
  a { color: #0d1f3c !important; }
}