/* ==========================================================================
   Rescuing Our Children — shared stylesheet
   Static CSS, no build step, no image files required (the background is
   generated entirely in CSS).
   1 Tokens · 2 Reset · 3 Ambience · 4 Card · 5 Masthead
   6 Date & venue · 7 Countdown · 8 Buttons · 9 Notify · 10 Footer
   11 Motion · 12 Print
   ── homepage (index.html) adds: ──
   13 Layout · 14 Site header · 15 Hero · 16 Sections · 17 Speaker
   18 Tiles · 19 Carousel · 20 Sponsors · 21 Site footer
   22 Reveal · 23 Homepage motion & print
   ── interior pages (speakers, schedule, registration, resources, sponsors,
      location, contact) add: ──
   24 Page head · 25 Speaker roster · 26 Schedule agenda · 27 Link groups
   28 Callouts · 29 Steps · 30 Facts · 31 Contact
   32 Interior-page print · 33 Registration types
   ── theming (every page) ──
   34 Theme toggle · 35 Light theme
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
/* Structural tokens — identical in both themes. */
:root {
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.1rem, 4vw, 2rem);
  --card-max: 46rem;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 1a. The dark palette (the default) ----------
   Every colour on the site is mixed from the channel triplets below, which is
   what lets the light theme be a token swap rather than a second stylesheet:
   a rule writes rgb(var(--accent-rgb) / .16) and gets the right hairline in
   either theme without knowing which one is on.

   The selector list is deliberate. Besides :root, this same dark set is
   re-applied under the light theme to the three surfaces that stay
   photographic there — the hero, the interior page heads, and the header
   while it is still transparent over them. See section 34. */
:root,
html[data-theme="light"] .hero,
html[data-theme="light"] .pagehead,
html[data-theme="light"] .siteheader:not(.is-stuck) {
  color-scheme: dark;

  /* Palette lifted from v1 (the main site): dark navy family for the
     invitation background, brand blues standing in for the former gold. */
  --ink-rgb:        16 22 32;    /* v1 --ink */
  --ink-2-rgb:      34 51 74;    /* v1 --brand-darker */
  --ink-3-rgb:      51 74 107;   /* v1 --brand-dark */

  --brand-rgb:      69 98 138;   /* v1 --brand — decorative use only below */
  --brand-soft-rgb: 93 123 163;  /* v1 --brand-soft */

  --accent-rgb:     217 222 236; /* v1 --brand-pale — 13.5:1 on --ink */
  --accent-lt-rgb:  255 255 255;

  --ivory-rgb:      255 255 255;
  --ivory-dim-rgb:  198 208 224; /* v1's own dark-section body color — 11.9:1 on --ink */

  /* The "lift": the channel every translucent fill, hairline and inset
     highlight is mixed from. White over a dark page, ink over a light one. */
  --tint-rgb:       255 255 255;
  --shadow-rgb:     0 0 0;

  --dim-a:  .28;  /* --accent-dim  — hairline borders around raised surfaces */
  --mute-a: .62;  /* --ivory-mute  — the quietest body colour that still passes */

  --vignette: rgba(4, 7, 12, .8);

  /* The logo lockup is dark navy artwork on transparency, so on a dark page it
     needs an ivory plate behind it. On a light one it does not. */
  --plate: rgb(var(--ivory-rgb));
  --shadow-plate: 0 1px 16px rgb(var(--shadow-rgb) / .4);
  --shadow-plate-hover: 0 1px 20px rgb(var(--accent-rgb) / .34);
  --shadow-card: 0 1px 0 rgb(var(--tint-rgb) / .05) inset, 0 30px 90px rgb(var(--shadow-rgb) / .5);
  --shadow-panel: 0 18px 40px rgb(var(--shadow-rgb) / .55);

  /* Named colours, mixed once here so rules can stay readable. */
  --ink:    rgb(var(--ink-rgb));
  --ink-2:  rgb(var(--ink-2-rgb));
  --ink-3:  rgb(var(--ink-3-rgb));

  --brand:      rgb(var(--brand-rgb));
  --brand-soft: rgb(var(--brand-soft-rgb));

  --accent:     rgb(var(--accent-rgb));
  --accent-lt:  rgb(var(--accent-lt-rgb));
  --accent-dim: rgb(var(--accent-rgb) / var(--dim-a));

  --ivory:      rgb(var(--ivory-rgb));
  --ivory-dim:  rgb(var(--ivory-dim-rgb));
  --ivory-mute: rgb(var(--ivory-dim-rgb) / var(--mute-a));
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* 112.5% = an 18px rem. Every size on the site is set in rem, so this one
   value scales all of it; media queries are unaffected (they resolve rem
   against the browser default, not this). */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--ivory-dim);
  font-family: var(--font-sans);
  font-size: clamp(.95rem, .92rem + .15vw, 1rem);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent-lt); }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 50;
  padding: .7rem 1.2rem;
  background: var(--accent); color: var(--ink);
  font-size: .8rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--ink); }

/* ---------- 3. Ambience ---------- */
.ambience {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambience__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.ambience__glow--1 {
  top: -22vh; left: -12vw;
  width: 78vw; height: 78vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgb(var(--brand-rgb) / .24), transparent 68%);
  animation: drift-a 26s var(--ease) infinite alternate;
}
.ambience__glow--2 {
  right: -18vw; bottom: -26vh;
  width: 82vw; height: 82vw;
  max-width: 950px; max-height: 950px;
  background: radial-gradient(circle, rgb(var(--ink-2-rgb) / .92), transparent 66%);
  animation: drift-b 32s var(--ease) infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vw, 5vh, 0) scale(1.09); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-5vw, -4vh, 0) scale(1); }
}

/* Starfield — three offset dot grids, no image needed */
.ambience__stars {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgb(var(--tint-rgb) / .55), transparent 60%),
    radial-gradient(1.2px 1.2px at 74% 14%, rgb(var(--tint-rgb) / .42), transparent 60%),
    radial-gradient(1.6px 1.6px at 41% 68%, rgb(var(--accent-rgb) / .50), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 54%, rgb(var(--tint-rgb) / .38), transparent 60%),
    radial-gradient(1.3px 1.3px at 9% 76%, rgb(var(--tint-rgb) / .34), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 88%, rgb(var(--accent-rgb) / .36), transparent 60%),
    radial-gradient(1.1px 1.1px at 30% 40%, rgb(var(--tint-rgb) / .30), transparent 60%),
    radial-gradient(1.2px 1.2px at 95% 30%, rgb(var(--tint-rgb) / .28), transparent 60%);
  background-repeat: repeat;
  background-size: 44% 42%, 38% 47%, 51% 39%, 41% 44%, 47% 41%, 36% 49%, 43% 45%, 39% 43%;
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle {
  from { opacity: .5; }
  to   { opacity: .95; }
}

/* Fine grain so the large flat areas don't band */
.ambience__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--tint-rgb) / .045) .5px, transparent .5px);
  background-size: 3px 3px;
  opacity: .55;
}

/* Vignette */
.ambience::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, transparent 42%, var(--vignette) 100%);
}

/* ---------- 4. Card ---------- */
.card {
  width: 100%;
  max-width: var(--card-max);
  padding: clamp(1.9rem, 5vw, 3.75rem) clamp(1.25rem, 5vw, 3.5rem);
  background: linear-gradient(170deg, rgb(var(--ink-2-rgb) / .74), rgb(var(--ink-rgb) / .58));
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  text-align: center;
}

/* Entry animation only when JS is running (it strips .no-js). Gating it this
   way means a JS-less browser never gets stuck on the animation's opacity:0
   start frame — the card is simply visible. */
html:not(.no-js) .card { animation: rise .9s var(--ease) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Inner hairline frame — the letterpress detail */
.card {
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  inset: clamp(.5rem, 1.4vw, .85rem);
  border: 1px solid rgb(var(--accent-rgb) / .18);
  border-radius: 2px;
  pointer-events: none;
}

/* ---------- 5. Masthead ---------- */
.crest__ring { stroke-width: 1; opacity: .42; }
.crest__heart { fill: rgb(var(--brand-soft-rgb) / .22); }
.crest__flourish { opacity: .55; }

.kicker {
  color: var(--accent);
  font-size: clamp(.66rem, .6rem + .22vw, .78rem);
  font-weight: 400;
  letter-spacing: .44em;
  text-transform: uppercase;
  text-indent: .44em; /* balances the trailing letter-space */
}

/* Rule with centre diamond */
.rule {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: min(20rem, 82%);
  margin: clamp(1.5rem, 4vw, 2.25rem) auto;
}
.rule__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
}
.rule__diamond {
  flex: none;
  width: .42rem; height: .42rem;
  background: var(--accent);
  transform: rotate(45deg);
  opacity: .85;
}
.rule--soft { width: min(14rem, 62%); }
.rule--soft .rule__diamond { opacity: .5; }

/* ---------- 6. Date & venue ---------- */
.datebox__day {
  color: var(--accent);
  font-size: clamp(.68rem, .62rem + .22vw, .8rem);
  font-weight: 400;
  letter-spacing: .36em;
  text-transform: uppercase;
  text-indent: .36em;
}

.datebox__main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 clamp(.7rem, 2vw, 1.4rem);
  margin-top: .5rem;
  color: var(--ivory);
}
.datebox__month, .datebox__year {
  font-size: clamp(.82rem, .74rem + .3vw, 1rem);
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-indent: .28em;
  color: var(--ivory-dim);
}
.datebox__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.6rem, 1.5rem + 11vw, 7rem);
  line-height: .9;
  color: var(--ivory);
}

.datebox__time {
  margin-top: .55rem;
  color: var(--ivory-mute);
  font-size: clamp(.78rem, .74rem + .2vw, .9rem);
  letter-spacing: .1em;
}

.venue {
  margin-top: clamp(1.35rem, 3.5vw, 1.9rem);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
}
.venue span {
  display: block;
  margin-top: .4rem;
  color: var(--ivory-mute);
  font-family: var(--font-sans);
  font-size: clamp(.74rem, .7rem + .2vw, .85rem);
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- 7. Countdown ---------- */
.countdown { margin-top: clamp(1.75rem, 4.5vw, 2.6rem); }

.countdown__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.3rem, 1.5vw, 1rem);
  max-width: 26rem;
  margin-inline: auto;
}
.countdown__list li {
  position: relative;
  display: grid;
  gap: .25rem;
  padding-block: .25rem;
}
/* hairline separators between units */
.countdown__list li + li::before {
  content: "";
  position: absolute;
  left: calc(clamp(.3rem, 1.5vw, 1rem) / -2);
  top: 18%;
  height: 64%;
  border-left: 1px solid rgb(var(--accent-rgb) / .22);
}

.countdown__num {
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 4vw, 2.9rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__unit {
  color: var(--accent);
  font-size: clamp(.55rem, .5rem + .2vw, .68rem);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-indent: .22em;
}

/* ---------- 8. Buttons ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: clamp(1.6rem, 4vw, 2.25rem);
}

.btn {
  --bg: transparent;
  --fg: var(--accent);
  --bd: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { transform: translateY(-1px); }

/* Every button is white, in both themes. The literals are deliberate: these do
   not follow the palette. On a light page the hairline is what separates a
   white button from a white card. */
.btn--solid,
.btn--ghost { --bg: #fff; --fg: #101620; --bd: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .18); }
.btn--solid:hover,
.btn--ghost:hover { --bg: #e3e8f1; --bd: #e3e8f1; color: #101620; }
html[data-theme="light"] .btn--solid,
html[data-theme="light"] .btn--ghost { --bd: rgb(16 22 32 / .28); }

/* The one exception: the header's register button keeps the accent. */
.sitenav .btn--solid { --bg: var(--accent); --fg: var(--ink); --bd: var(--accent); box-shadow: none; }
.sitenav .btn--solid:hover { --bg: var(--accent-lt); --bd: var(--accent-lt); color: var(--ink); }

.btn__icon {
  width: 1.05em; height: 1.05em;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- 9. Notify ---------- */
.notify__title {
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  line-height: 1.2;
}
.notify__blurb {
  max-width: 40ch;
  margin: .65rem auto 0;
  color: var(--ivory-mute);
  font-size: clamp(.85rem, .82rem + .15vw, .94rem);
}

/* ---------- 10. Footer ---------- */
.foot__legal {
  margin-top: 1.1rem;
  color: rgb(var(--tint-rgb) / .5); /* .4 measured ~3.8:1 on --ink once blended; .5 clears 4.5:1 */
  font-size: .7rem;
  letter-spacing: .04em;
}
.foot__legal a { color: rgb(var(--accent-rgb) / .85); text-decoration: none; }
.foot__legal a:hover { color: var(--accent-lt); text-decoration: underline; }

/* ---------- 11. Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}

/* ---------- 12. Print ---------- */
@media print {
  .ambience, .skip-link, .actions { display: none !important; }
  body { background: #fff; color: #1a1a1a; }
  .card {
    max-width: none; border-color: #4a6a99; box-shadow: none;
    background: #fff; backdrop-filter: none; animation: none;
  }
  .datebox__num, .venue, .notify__title,
  .datebox__month, .datebox__year, .countdown__num { color: #1a1a1a !important; }
  .kicker, .datebox__day, .countdown__unit, .venue span { color: #35507a !important; }
  .foot__legal { color: #1a1a1a !important; }
  .datebox__time { color: #4a4a4a !important; }
}


/* ==========================================================================
   HOMEPAGE (index.html)
   Sections 13–23. Everything above this line is shared base styling.
   ========================================================================== */

/* ---------- 13. Layout ---------- */
:root {
  --wrap: 72rem;
  --wrap-narrow: 46rem;
  --section-y: clamp(3.5rem, 9vw, 7rem);
  --header-h: 4.5rem;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--mid { max-width: 56rem; }

/* Stop the sticky header from covering the heading of a jumped-to section. */
:target, section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.center { text-align: center; }

main { position: relative; z-index: 1; }

/* ---------- 14. Site header ---------- */
.siteheader {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              backdrop-filter .3s var(--ease);
}
/* JS adds .is-stuck once the page has scrolled past the hero's first fold. */
.siteheader.is-stuck {
  background: rgb(var(--ink-rgb) / .88);
  border-bottom-color: rgb(var(--accent-rgb) / .16);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* The bar gets more room than the page's reading width: ten links need it. */
.siteheader__inner {
  max-width: 88rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  color: var(--ivory);
  text-decoration: none;
}
.brand__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .015em;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.brand:hover .brand__name { color: var(--accent-lt); }

/* Still used by the footer lockup. */
.brand__crest {
  flex: none;
  width: 2.1rem; height: 2.1rem;
  fill: none; stroke: var(--accent);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

.sitenav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}
.sitenav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 1.8rem);
}
.sitenav__list a,
.sitenav__trigger {
  position: relative;
  color: var(--ivory-dim);
  font: inherit;
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.sitenav__list > li > a::after,
.sitenav__trigger::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.4rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.sitenav__list a:hover,
.sitenav__trigger:hover { color: var(--accent-lt); }
.sitenav__list > li > a:hover::after,
.sitenav__trigger:hover::after { transform: scaleX(1); }

/* The page you are on, and the group that holds it. */
.sitenav__list a[aria-current="page"],
.sitenav__group:has(a[aria-current="page"]) > .sitenav__trigger { color: var(--accent-lt); }

/* ── Dropdown groups ──
   Each group is a disclosure: the button toggles aria-expanded (js/main.js)
   and the menu follows it. On a wide screen with a mouse, hover and keyboard
   focus open it too, which also keeps the menus usable without JS. */
.sitenav__group { position: relative; }
.sitenav__trigger {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.sitenav__chev {
  width: 1.1em; height: 1.1em;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.sitenav__trigger[aria-expanded="true"] .sitenav__chev { transform: rotate(180deg); }

.sitenav__menu {
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  z-index: 5;
  min-width: 12rem;
  padding: .45rem 0;
  background: var(--ink);
  border: 1px solid rgb(var(--accent-rgb) / .16);
  border-radius: 3px;
  box-shadow: var(--shadow-panel);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -.35rem);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
/* Bridges the gap between the trigger and the panel so the pointer can cross
   it without the hover menu closing. */
.sitenav__menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 1rem;
}
.sitenav__trigger[aria-expanded="true"] + .sitenav__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.sitenav__menu a {
  display: block;
  padding: .7rem 1.2rem;
  font-size: .64rem;
}
.sitenav__menu a:hover { background: rgb(var(--accent-rgb) / .08); }

.btn--sm { padding: .6rem 1.1rem; font-size: .68rem; }

/* Hamburger — only rendered below the nav breakpoint */
.navtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid rgb(var(--accent-rgb) / .28);
  border-radius: 2px;
  cursor: pointer;
}
.navtoggle__bars { display: grid; gap: 4px; width: 1.1rem; }
.navtoggle__bars i {
  display: block;
  height: 1px;
  background: var(--accent);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Four top-level items, the register button, and the theme toggle fit beside
   the name down to 64rem (1024px: media-query rems ignore the 18px root).
   Below that the nav folds into the hamburger panel. js/main.js has the
   matching matchMedia — keep the two in sync. */
@media (min-width: 64rem) {
  @media (hover: hover) {
    .sitenav__group:hover > .sitenav__menu,
    .sitenav__group:focus-within > .sitenav__menu {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, 0);
      transition-delay: 0s;
    }
  }
  .no-js .sitenav__group:focus-within > .sitenav__menu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
  }
}

@media (max-width: 63.9375rem) {
  .navtoggle { display: inline-flex; }

  .sitenav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: .5rem var(--gutter) 1.4rem;
    /* Fully opaque: this panel covers page content, and a translucent one
       leaves the hero type ghosting through behind the links. */
    background: var(--ink);
    border-bottom: 1px solid rgb(var(--accent-rgb) / .16);
    box-shadow: var(--shadow-panel);
    /* Collapsed by default on small screens; JS toggles [data-open]. */
    display: none;
  }
  .sitenav[data-open] { display: flex; }

  /* At scroll-top the header is transparent, which now means the hero photo
     shows through the strip above an opaque menu panel. Match the panel while
     it is open so the two read as one surface. */
  .siteheader:has(.sitenav[data-open]) {
    background: var(--ink);
    border-bottom-color: transparent;
  }

  .sitenav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .sitenav__list a,
  .sitenav__trigger {
    display: flex;
    width: 100%;
    padding: .95rem .2rem;
    border-bottom: 1px solid rgb(var(--accent-rgb) / .1);
    font-size: .8rem;
  }
  .sitenav__trigger { justify-content: space-between; text-align: left; }
  .sitenav__list > li > a::after,
  .sitenav__trigger::after { display: none; }

  /* In the panel each group is an accordion: the menu sits in the flow and
     simply shows or hides. */
  .sitenav__menu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 0 1rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .sitenav__menu::before { display: none; }
  .sitenav__trigger[aria-expanded="true"] + .sitenav__menu { display: block; transform: none; }
  .sitenav__menu a { font-size: .74rem; }
  .sitenav__menu a:hover { background: none; }
  .sitenav .btn { margin-top: 1.1rem; }

  /* Without JS the toggles can't work, so show every link inline instead of
     hiding them behind dead buttons. */
  .no-js .navtoggle { display: none; }
  .no-js .sitenav { position: static; display: flex; padding: 0 0 1rem; background: none; border: 0; }
  .no-js .sitenav__menu { display: block; }
  .no-js .sitenav__chev { display: none; }
}

/* ---------- 15. Hero ---------- */
.hero {
  position: relative;
  /* Contain the backdrop's negative z-index so it stays behind the hero copy
     but never falls behind main's own stacking context. */
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--header-h));
  padding: clamp(2.5rem, 7vh, 5rem) 0 clamp(3rem, 8vh, 5.5rem);
  text-align: center;
}

/* Photographic backdrop. The scrim gradient is doing real work: it holds the
   hero copy above 7:1 on the photo's brightest band (the sunset sky) and
   lands on solid --ink at the bottom so the hero dissolves into the page. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--ink);
  background-image:
    linear-gradient(to bottom,
      rgb(var(--ink-rgb) / .72) 0%,
      rgb(var(--ink-rgb) / .42) 30%,
      rgb(var(--ink-rgb) / .38) 55%,
      rgb(var(--ink-rgb) / .72) 86%,
      var(--ink) 100%),
    url("../images/Hero-bg.jpg");
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: cover, cover;
}
html:not(.no-js) .hero__inner { animation: rise .9s var(--ease) both; }
/* The scrim is light enough now for the photo to show; the shadow is what
   keeps the type off the brightest band of the sunset. */
.hero__inner { text-shadow: 0 1px 14px rgb(0 0 0 / .75), 0 0 2px rgb(0 0 0 / .5); }
.hero__inner .btn { text-shadow: none; }

/* The logo lockup stands in for the hero title. It is dark navy artwork, so
   it sits on the ivory plate; the hero keeps the dark tokens in both themes,
   so the plate is always there. */
.herologo {
  display: inline-block;
  width: min(34rem, 100%);
  padding: clamp(.6rem, .4rem + 1vw, 1rem) clamp(.8rem, .5rem + 1.4vw, 1.4rem);
  background: var(--plate);
  border-radius: 4px;
  box-shadow: var(--shadow-plate);
}
.herologo__img { display: block; width: 100%; height: auto; }

.hero__lead {
  max-width: 46ch;
  margin: 1.5rem auto 0;
  color: var(--ivory-dim);
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  line-height: 1.65;
}

.hero__when .venue { margin-top: clamp(1.1rem, 3vw, 1.6rem); }

/* The date is the hero's headline fact, so it gets a frame and the biggest
   numeral on the page. */
.hero__when {
  display: inline-block;
  margin-top: clamp(1rem, 3vw, 1.6rem);
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.4rem, 5vw, 3rem);
  background: rgb(var(--ink-rgb) / .45);
  border: 1px solid rgb(var(--accent-rgb) / .45);
  border-radius: 3px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.hero__when .datebox__day { font-size: clamp(.85rem, .75rem + .4vw, 1.05rem); color: var(--ivory); }
.hero__when .datebox__month,
.hero__when .datebox__year { font-size: clamp(1.1rem, .9rem + .8vw, 1.55rem); color: var(--ivory); font-weight: 400; }
.hero__when .datebox__num { font-size: clamp(4.2rem, 2rem + 10vw, 7.5rem); font-weight: 400; }
.hero__when .datebox__time { font-size: clamp(.95rem, .85rem + .4vw, 1.15rem); color: var(--ivory-dim); }

/* Age requirement — hero, registration, and the video page. */
.agenote {
  max-width: 44ch;
  margin: clamp(1.1rem, 3vw, 1.5rem) auto 0;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.6;
  text-transform: uppercase;
}

.hero__ics {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  margin-top: clamp(1.4rem, 3.5vw, 2rem);
}

.linkbtn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .2rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.linkbtn:hover { color: var(--accent-lt); border-bottom-color: var(--accent-lt); }
.no-js .linkbtn { display: none; }

.hero__icsnote {
  min-height: 1.2rem;
  color: var(--accent);
  font-size: .78rem;
  letter-spacing: .05em;
}

@media print {
  .hero::before { display: none; }
}

/* ---------- 16. Sections ---------- */
.section { padding-block: var(--section-y); }

/* Alternating band: a slightly lifted panel so long scrolls keep rhythm. */
.section--band {
  position: relative;
  background: linear-gradient(180deg, rgb(var(--ink-2-rgb) / .5), rgb(var(--ink-2-rgb) / .26));
  border-block: 1px solid rgb(var(--accent-rgb) / .12);
}

.section__title {
  margin-top: .6rem;
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: .005em;
  text-wrap: balance;
}

.section__lead {
  max-width: 62ch;
  margin: 1.15rem 0 0;
  color: var(--ivory-dim);
  font-size: clamp(.95rem, .92rem + .2vw, 1.06rem);
  line-height: 1.75;
}
.center .section__lead { margin-inline: auto; }

.actions--start { justify-content: flex-start; }

/* Mission statement — set as a display pull, not body copy. */
.statement {
  max-width: 52ch;
  margin: clamp(1.5rem, 4vw, 2.25rem) auto 0;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.65rem);
  font-weight: 300;
  line-height: 1.45;
}
.statement__label {
  display: block;
  margin-bottom: .85rem;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  text-indent: .34em;
}

/* Fiscal-sponsorship disclosure: legally required, visually quiet. */
.notebox {
  max-width: 60ch;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: clamp(1.1rem, 3vw, 1.6rem);
  border: 1px solid rgb(var(--accent-rgb) / .16);
  border-radius: 2px;
  background: rgb(var(--ink-rgb) / .4);
  color: var(--ivory-mute);
  font-size: .82rem;
  line-height: 1.7;
  text-align: left;
}
.notebox p + p { margin-top: .8rem; }

/* ---------- 17. Featured speaker ---------- */
.section--speaker .kicker,
.section--speaker .section__title { text-align: center; }

.speaker {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 46rem) {
  .speaker { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; }
}

.speaker__photo {
  display: block;
  width: 100%;
  /* height:auto is load-bearing: the img carries width/height attributes, and
     those map to a presentational hint that pins the height unless CSS says
     otherwise — which would leave aspect-ratio with nothing to do. */
  height: auto;
  /* Square frame, 3:4 source — see the note on .person__photo for why the
     crop is anchored to the top. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  /* Below the two-column breakpoint the grid cell is full width; without this
     the portrait would balloon to the width of the wrap. */
  max-width: 15rem;
  margin-inline: auto;
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
}

.speaker__bio {
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(1.08rem, .98rem + .6vw, 1.35rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
}

.pullquote {
  margin: clamp(1.4rem, 3.5vw, 2rem) 0 0;
  padding-left: clamp(1rem, 3vw, 1.6rem);
  border-left: 1px solid var(--accent-dim);
  color: var(--ivory-dim);
  font-size: clamp(.94rem, .9rem + .22vw, 1.03rem);
  line-height: 1.8;
}
.pullquote p::before { content: "\201C"; }
.pullquote p::after { content: "\201D"; }

.pullquote__by {
  margin-top: 1rem;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pullquote__by cite { font-style: italic; text-transform: none; letter-spacing: .04em; }

.section--speaker .actions { margin-top: clamp(1.6rem, 4vw, 2.2rem); }

/* ---------- 18. Tiles ---------- */
.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}
@media (min-width: 44rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  background: linear-gradient(170deg, rgb(var(--ink-2-rgb) / .62), rgb(var(--ink-rgb) / .5));
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  text-align: left;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.tile:hover { border-color: rgb(var(--accent-rgb) / .45); transform: translateY(-2px); }

.tile__icon {
  width: 1.9rem; height: 1.9rem;
  fill: none; stroke: var(--accent);
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.tile__title {
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
  line-height: 1.2;
}
.tile__text {
  color: var(--ivory-dim);
  font-size: .93rem;
  line-height: 1.75;
}
/* Push every tile's button to the same baseline regardless of copy length. */
.tile__text { margin-bottom: .35rem; }
.tile .btn { margin-top: auto; align-self: flex-start; }

/* ---------- 19. Quote carousel ---------- */
.carousel {
  position: relative;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

.carousel__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  padding: clamp(.5rem, 2vw, 1.25rem) clamp(.5rem, 3vw, 2.5rem);
}

.quote {
  max-width: 34ch;
  margin: 0;
  text-align: center;
}
.quote p {
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.15rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  text-wrap: balance;
}
.quote p::before { content: "\201C"; }
.quote p::after { content: "\201D"; }

.quote__by {
  margin-top: 1.2rem;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-indent: .26em;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.75rem, 2.5vw, 1.5rem);
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem; height: 2.6rem;
  padding: 0;
  background: none;
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  color: var(--accent);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.carousel__arrow svg {
  width: 1.05rem; height: 1.05rem;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.carousel__arrow:hover {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / .1);
  color: var(--accent-lt);
}

.carousel__dots { display: flex; align-items: center; gap: .5rem; }
.carousel__dot {
  width: .45rem; height: .45rem;
  padding: 0;
  background: rgb(var(--accent-rgb) / .3);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.carousel__dot:hover { background: rgb(var(--accent-rgb) / .6); }
.carousel__dot[aria-current="true"] {
  background: var(--accent);
  transform: rotate(45deg) scale(1.15);
  border-radius: 1px;
}
/* Keep the hit area finger-sized without growing the visible dot. */
.carousel__dot::before {
  content: "";
  position: absolute;
  inset: -.55rem;
}
.carousel__dot { position: relative; }

/* ---------- 20. Sponsors ---------- */
.sponsors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  gap: clamp(.75rem, 2vw, 1.25rem);
  margin-top: clamp(2.25rem, 5vw, 3rem);
}
.sponsors__item {
  display: grid;
  place-items: center;
  min-height: 6rem;
  padding: 1rem;
  border: 1px solid rgb(var(--accent-rgb) / .16);
  border-radius: 2px;
  background: rgb(var(--ink-rgb) / .35);
}
.sponsors__item img { max-height: 3.25rem; width: auto; }
.sponsors__item--logo { background: #fff; border-color: rgb(var(--accent-rgb) / .3); }
.sponsors__item--logo img { max-width: 100%; height: auto; max-height: 3.5rem; }
.sponsors__item--name a {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--ivory);
  text-decoration: none;
}
.sponsors__item--name a:hover { color: var(--accent); }
.sponsors__item.is-empty span {
  color: var(--ivory-mute);
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-indent: .24em;
}

/* ---------- 21. Tickets card & site footer ---------- */
.section--tickets .card { text-align: center; }
.card--flat { animation: none !important; }

.sitefoot {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.75rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgb(var(--accent-rgb) / .16);
  background: rgb(var(--ink-rgb) / .72);
}

.sitefoot__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 44rem) {
  .sitefoot__inner { grid-template-columns: 1.5fr 1.3fr 1.2fr; }
}

/* Nine links in one column made the footer taller than the brand block it sits
   beside; two columns keeps the three footer columns roughly level. */
@media (min-width: 30rem) {
  .sitefoot__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sitefoot__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.25rem;
}

.sitefoot__brand .brand__crest { width: 2.4rem; height: 2.4rem; }
.sitefoot__tag {
  max-width: 34ch;
  margin-top: .9rem;
  color: var(--ivory-mute);
  font-size: .85rem;
  line-height: 1.7;
}

.sitefoot__head {
  color: var(--accent);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-indent: .3em;
}
.sitefoot__nav ul, .sitefoot__contact ul {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
  font-size: .88rem;
}
.sitefoot__nav a, .sitefoot__contact a {
  color: var(--ivory-dim);
  text-decoration: none;
}
.sitefoot__nav a:hover, .sitefoot__contact a:hover {
  color: var(--accent-lt);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.sitefoot__where {
  margin-top: .3rem;
  color: var(--ivory-mute);
  font-size: .82rem;
  line-height: 1.6;
}

.sitefoot .foot__legal {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgb(var(--accent-rgb) / .12);
  text-align: center;
}

/* ---------- 22. Scroll reveal ---------- */
/* Gated behind JS the same way the card animation is: without JS these
   elements are simply visible, never stuck at opacity 0. */
html:not(.no-js) [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
html:not(.no-js) [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- 23. Homepage motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
  .tile:hover { transform: none; }
  html:not(.no-js) [data-reveal] { opacity: 1; transform: none; transition: none; }
  html:not(.no-js) .hero__inner { animation: none; }
}

@media print {
  .siteheader, .carousel__controls, .hero__ics, .sponsors, .navtoggle { display: none !important; }
  .section, .hero { padding-block: 1.25rem; min-height: auto; }
  .section--band { background: none; border-color: #c9d2e0; }
  .section__title, .tile__title, .statement, .speaker__bio, .quote p,
  .brand__name, .hero__lead { color: #1a1a1a !important; }
  .kicker, .quote__by, .pullquote__by, .statement__label, .sitefoot__head { color: #35507a !important; }
  .section__lead, .tile__text, .pullquote, .notebox, .sitefoot__tag { color: #333 !important; }
  .tile, .notebox { background: none; border-color: #c9d2e0; }
  .sitefoot { background: none; }
  .carousel__track { display: block; overflow: visible; }
  .carousel__slide { break-inside: avoid; }
}


/* ==========================================================================
   INTERIOR PAGES (speakers, schedule, registration, resources, sponsors,
   location, contact). Sections 24–32. Nothing below changes index.html
   except the shared header/footer rules already above.
   ========================================================================== */

/* ---------- 24. Page head ---------- */
/* The compact cousin of the hero: same photographic backdrop, heavier scrim,
   sized to introduce a page rather than to fill a screen. */
.pagehead {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.75rem, 7vw, 5rem) clamp(2.25rem, 6vw, 4rem);
  text-align: center;
}
.pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--ink);
  background-image:
    linear-gradient(to bottom,
      rgb(var(--ink-rgb) / .86) 0%,
      rgb(var(--ink-rgb) / .7) 45%,
      var(--ink) 100%),
    url("../images/Hero-bg.jpg");
  background-repeat: no-repeat;
  background-position: center, center 35%;
  background-size: cover, cover;
}
/* Branson's page leads with the Landing itself rather than the silhouettes.
   Lighter scrim than the other page heads: the photo is the hook here. */
.pagehead--branson { padding-block: clamp(4rem, 12vw, 8rem) clamp(3rem, 8vw, 5rem); }
.pagehead--branson::before {
  background-image:
    linear-gradient(to bottom,
      rgb(var(--ink-rgb) / .62) 0%,
      rgb(var(--ink-rgb) / .5) 50%,
      var(--ink) 100%),
    url("../images/branson-landing.jpg");
  background-position: center, center 60%;
}
.pagehead--branson .wrap { text-shadow: 0 1px 14px rgb(0 0 0 / .8), 0 0 2px rgb(0 0 0 / .6); }
.pagehead--branson .btn { text-shadow: none; }

.pagehead__title {
  margin-top: .55rem;
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: .005em;
  text-wrap: balance;
}
.pagehead__lead {
  max-width: 64ch;
  margin: clamp(1.1rem, 3vw, 1.5rem) auto 0;
  color: var(--ivory-dim);
  font-size: clamp(.98rem, .94rem + .28vw, 1.12rem);
  line-height: 1.75;
}
.pagehead .actions { margin-top: clamp(1.5rem, 4vw, 2rem); }

/* Breadcrumb — small, quiet, above the title */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .25rem .55rem;
  color: var(--ivory-mute);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.crumbs a { color: var(--ivory-mute); text-decoration: none; }
.crumbs a:hover { color: var(--accent-lt); text-decoration: underline; text-underline-offset: .25em; }
.crumbs li { display: flex; align-items: center; gap: .55rem; }
.crumbs li + li::before { content: "\203A"; color: rgb(var(--ivory-dim-rgb) / .45); }
.crumbs [aria-current="page"] { color: var(--accent); }

/* ---------- 25. Speaker roster ---------- */
.roster {
  display: grid;
  gap: clamp(2.25rem, 5.5vw, 3.5rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}
.person {
  display: grid;
  gap: clamp(1.25rem, 3.5vw, 2.25rem);
  padding-top: clamp(2.25rem, 5.5vw, 3.5rem);
  border-top: 1px solid rgb(var(--accent-rgb) / .14);
}
.roster > .person:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 42rem) {
  .person { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: start; }
}

.person__photo {
  display: block;
  width: 100%;
  max-width: 13rem;
  /* Load-bearing, as on .speaker__photo: without it the height attribute on
     the img wins and aspect-ratio never applies. */
  height: auto;
  /* The frames are square and every portrait we have is 3:4, so cover drops a
     quarter of the height. Anchoring to the top is what drops it all off the
     bottom, where the spare torso is: two of the six sitters (Vought, Moon)
     are framed tight enough that taking even 6% off the top clips their hair.
     A replacement shot with more headroom will want its own value — check the
     crop rather than assuming, the frame is unforgiving of a high subject. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  margin-inline: auto;
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
}

.person__name {
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  line-height: 1.15;
}
.person__role {
  margin-top: .45rem;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.person__bio { margin-top: 1.1rem; color: var(--ivory-dim); line-height: 1.8; }
.person__bio p + p { margin-top: .9rem; }
.person__bio em, .person__bio cite { font-style: italic; }

/* The featured speaker's long-form bio, set narrower than the roster copy. */
.longbio { margin-top: clamp(1.4rem, 3.5vw, 2rem); }
.longbio p + p { margin-top: .95rem; }

/* ---------- 26. Schedule agenda ---------- */
.agenda { margin-top: clamp(2.25rem, 5vw, 3.25rem); }

.slot {
  display: grid;
  gap: .85rem;
  padding-block: clamp(1.4rem, 3.5vw, 2rem);
  border-top: 1px solid rgb(var(--accent-rgb) / .14);
}
.agenda > .slot:last-child { border-bottom: 1px solid rgb(var(--accent-rgb) / .14); }
@media (min-width: 44rem) {
  .slot {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: start;
  }
}

.slot__time {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.slot__items { display: grid; gap: .85rem; }
@media (min-width: 62rem) {
  .slot__items--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.event {
  padding: clamp(.9rem, 2.2vw, 1.2rem) clamp(1rem, 2.4vw, 1.4rem);
  background: rgb(var(--ink-2-rgb) / .38);
  border: 1px solid rgb(var(--accent-rgb) / .14);
  border-radius: 2px;
}
/* The headline item of a time slot — keynote, lunch, banquet. */
.event--feature {
  background: linear-gradient(170deg, rgb(var(--ink-2-rgb) / .78), rgb(var(--ink-rgb) / .6));
  border-color: var(--accent-dim);
}

.event__room {
  color: var(--accent);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-indent: .24em;
}
.event__what {
  margin-top: .4rem;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem);
  font-weight: 400;
  line-height: 1.3;
}
.event__who {
  margin-top: .3rem;
  color: var(--ivory-dim);
  font-size: .86rem;
  line-height: 1.6;
}
.event__who a { color: var(--ivory-dim); text-underline-offset: .22em; }
.event__who a:hover { color: var(--accent-lt); }

/* Room legend above the agenda */
.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: clamp(.75rem, 2vw, 1.25rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.room {
  padding: 1rem 1.1rem;
  border: 1px solid rgb(var(--accent-rgb) / .16);
  border-radius: 2px;
  background: rgb(var(--ink-rgb) / .35);
}
.room__name { color: var(--ivory); font-size: .92rem; }
.room__cap { margin-top: .2rem; color: var(--ivory-mute); font-size: .76rem; letter-spacing: .1em; }

/* ---------- 27. Link groups (resources, Branson) ---------- */
.linkgroup { margin-top: clamp(2rem, 5vw, 3rem); }
.linkgroup__title {
  padding-bottom: .7rem;
  border-bottom: 1px solid rgb(var(--accent-rgb) / .16);
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.15rem + .7vw, 1.7rem);
  line-height: 1.2;
}
.linkgroup__note {
  margin-top: .75rem;
  color: var(--ivory-mute);
  font-size: .88rem;
  line-height: 1.7;
}

.linkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
  gap: clamp(.75rem, 2vw, 1.1rem);
  margin-top: clamp(1.1rem, 3vw, 1.6rem);
}

.linkcard {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(1rem, 2.5vw, 1.3rem);
  background: rgb(var(--ink-2-rgb) / .34);
  border: 1px solid rgb(var(--accent-rgb) / .14);
  border-radius: 2px;
  color: inherit;
  text-decoration: none;
  transition: border-color .22s var(--ease), background-color .22s var(--ease), transform .22s var(--ease);
}
.linkcard:hover {
  border-color: rgb(var(--accent-rgb) / .42);
  background: rgb(var(--ink-2-rgb) / .55);
  transform: translateY(-2px);
  color: inherit;
}
.linkcard__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 400;
  line-height: 1.3;
}
/* The arrow is decoration; the whole card is already the link. Outbound cards
   get ↗, cards that stay on this site get →. */
.linkcard__name::after { content: "\2197"; flex: none; color: var(--accent); font-size: .85rem; }
.linkcard--in .linkcard__name::after { content: "\2192"; }
.linkcard__desc { color: var(--ivory-mute); font-size: .85rem; line-height: 1.6; }

/* ---------- 28. Callouts ---------- */
.callout {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.25rem, 3.2vw, 2rem);
  background: linear-gradient(170deg, rgb(var(--ink-2-rgb) / .68), rgb(var(--ink-rgb) / .55));
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  text-align: left;
}
.callout__title {
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  line-height: 1.25;
}
.callout__text { margin-top: .7rem; color: var(--ivory-dim); font-size: .93rem; line-height: 1.75; }

/* Emergency numbers: a definition list, not prose, so they can be scanned. */
.hotlines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.hotline__label {
  color: var(--accent);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-indent: .24em;
}
.hotline__value {
  margin-top: .35rem;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  line-height: 1.25;
}
.hotline__value a { color: var(--ivory); text-decoration: none; }
.hotline__value a:hover { color: var(--accent-lt); text-decoration: underline; text-underline-offset: .22em; }
.hotline__note { margin-top: .3rem; color: var(--ivory-mute); font-size: .82rem; line-height: 1.6; }

/* ---------- 29. Numbered steps ---------- */
.steps {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  counter-reset: step;
}
@media (min-width: 50rem) {
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.step {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: rgb(var(--ink-2-rgb) / .34);
  border: 1px solid rgb(var(--accent-rgb) / .14);
  border-radius: 2px;
  text-align: left;
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  opacity: .8;
}
.step__title {
  margin-top: .6rem;
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
}
.step__text { margin-top: .5rem; color: var(--ivory-dim); font-size: .9rem; line-height: 1.75; }

/* ---------- 30. Facts list (venue, registration details) ---------- */
.facts {
  display: grid;
  gap: 0;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  text-align: left;
}
.facts > div {
  display: grid;
  gap: .2rem;
  padding-block: .9rem;
  border-top: 1px solid rgb(var(--accent-rgb) / .14);
}
.facts > div:last-child { border-bottom: 1px solid rgb(var(--accent-rgb) / .14); }
@media (min-width: 40rem) {
  .facts > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; }
}
.facts dt {
  color: var(--accent);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-indent: .22em;
}
.facts dd { margin: 0; color: var(--ivory-dim); font-size: .95rem; line-height: 1.7; }
.facts dd strong { color: var(--ivory); font-weight: 400; }

/* ---------- 31. Contact ---------- */
.split { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); }
@media (min-width: 54rem) {
  .split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.contacts {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.4rem);
  margin-top: clamp(1.5rem, 3.5vw, 2rem);
}
.contacts__county {
  padding: clamp(1rem, 2.5vw, 1.3rem);
  background: rgb(var(--ink-2-rgb) / .34);
  border: 1px solid rgb(var(--accent-rgb) / .14);
  border-radius: 2px;
}
.contacts__name {
  color: var(--accent);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-indent: .24em;
}
.contacts__people { display: grid; gap: .55rem; margin-top: .8rem; }
.contacts__people li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.contacts__person { color: var(--ivory); font-family: var(--font-display); font-size: 1.1rem; }
.contacts__people a { color: var(--ivory-dim); font-size: .9rem; text-decoration: none; letter-spacing: .04em; }
.contacts__people a:hover { color: var(--accent-lt); text-decoration: underline; text-underline-offset: .22em; }

.address {
  margin-top: clamp(1.5rem, 3.5vw, 2rem);
  color: var(--ivory-dim);
  font-size: .92rem;
  font-style: normal;
  line-height: 1.8;
}
.address strong { display: block; color: var(--ivory); font-weight: 400; }

/* ---------- 32. Interior-page print ---------- */
@media print {
  .pagehead::before, .crumbs { display: none !important; }
  .pagehead { padding-block: 0 1rem; }
  .pagehead__title, .person__name, .event__what, .callout__title, .step__title,
  .linkgroup__title, .linkcard__name, .hotline__value, .contacts__person { color: #1a1a1a !important; }
  .pagehead__lead, .person__bio, .callout__text, .step__text, .event__who,
  .facts dd, .address { color: #333 !important; }
  .person__role, .event__room, .hotline__label, .facts dt, .contacts__name,
  .slot__time, .step::before { color: #35507a !important; }
  .event, .room, .callout, .step, .linkcard, .contacts__county {
    background: none !important; border-color: #c9d2e0 !important;
  }
  .slot, .person { break-inside: avoid; }
}


/* ---------- 33. Registration types ---------- */
/* Two things are on sale here and they are not the same thing: the conference
   day, which is free, and the evening banquet, which is ticketed. The whole
   point of this component is that nobody can confuse the two, so each card
   states its own price, its own time, and carries its own button. */
.regtypes {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}
@media (min-width: 48rem) {
  .regtypes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}

.regcard {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  background: linear-gradient(170deg, rgb(var(--ink-2-rgb) / .62), rgb(var(--ink-rgb) / .5));
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  text-align: left;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.regcard:hover { border-color: rgb(var(--accent-rgb) / .45); transform: translateY(-2px); }

/* The free day is the one we want people to take first, so it reads louder. */
.regcard--primary {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / .18);
}

.regcard__tag {
  align-self: flex-start;
  padding: .3rem .7rem;
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  color: var(--accent);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-indent: .24em;
}
.regcard--primary .regcard__tag { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.regcard__name {
  margin-top: 1rem;
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
  line-height: 1.2;
}

.regcard__price {
  margin-top: .5rem;
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  line-height: 1;
}
.regcard__price small {
  display: block;
  margin-top: .45rem;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.regcard__when {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(var(--accent-rgb) / .14);
  color: var(--ivory-dim);
  font-size: .9rem;
  line-height: 1.6;
}
.regcard__when strong { color: var(--ivory); font-weight: 400; }

.regcard__list { display: grid; gap: .55rem; margin-top: 1rem; }
.regcard__list li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: .6rem;
  color: var(--ivory-dim);
  font-size: .92rem;
  line-height: 1.6;
}
.regcard__list li::before {
  content: "";
  width: .42rem; height: .42rem;
  margin-top: .55em;
  margin-left: .3rem;
  background: var(--accent);
  transform: rotate(45deg);
  opacity: .8;
}

.regcard__note {
  margin-top: 1rem;
  color: var(--ivory-mute);
  font-size: .82rem;
  line-height: 1.65;
}

/* Buttons sit on one baseline no matter how uneven the two lists are. The gap
   above the button lives on the preceding element, because a margin-top here
   would override the `auto` that does the pushing. */
.regcard .btn { margin-top: auto; align-self: flex-start; }
.regcard__list:has(+ .btn), .regcard__note:has(+ .btn) { margin-bottom: 1.5rem; }

@media print {
  .regcard { background: none !important; border-color: #c9d2e0 !important; break-inside: avoid; }
  .regcard__name, .regcard__price, .regcard__when strong { color: #1a1a1a !important; }
  .regcard__tag, .regcard__price small { color: #35507a !important; background: none !important; }
  .regcard__list li, .regcard__when, .regcard__note { color: #333 !important; }
}


/* ==========================================================================
   THEMING (sections 34–35). The toggle in the header, and the light palette
   it switches to. Nothing above this line knows which theme is on: every rule
   there mixes its colour from the channel tokens in section 1a, so the light
   theme is a token swap and not a second stylesheet.
   ========================================================================== */

/* ---------- 34. Theme toggle ---------- */
.themetoggle {
  /* Ordered rather than placed: on the wide layout the nav is still in flow,
     so order puts the button after it; below the nav breakpoint the nav is
     absolutely positioned and the button lands beside the hamburger. */
  order: 2;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  background: none;
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
  color: var(--accent);
  cursor: pointer;
  transition: border-color .22s var(--ease), background-color .22s var(--ease),
              color .22s var(--ease);
}
/* Section 14 leaves the hamburger at its default order; it belongs after the
   theme button in both layouts. */
.navtoggle { order: 3; }

.themetoggle:hover {
  border-color: var(--accent);
  background: rgb(var(--accent-rgb) / .1);
  color: var(--accent-lt);
}

.themetoggle svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* The icon shows the destination, not the current state: a sun means "switch
   to light". The button's accessible name (set in main.js) says the same. */
.themetoggle__moon { display: none; }
html[data-theme="light"] .themetoggle__sun { display: none; }
html[data-theme="light"] .themetoggle__moon { display: block; }

/* Without JS the button cannot switch anything, so it is never shown. */
.no-js .themetoggle { display: none; }
@media print { .themetoggle { display: none !important; } }

/* ---------- 35. Light theme ---------- */
/* Set by main.js on <html> from the stored preference, and by the inline
   script in each <head> before first paint so the page never flashes. */
html[data-theme="light"] {
  color-scheme: light;

  --ink-rgb:        240 243 248;  /* page ground */
  --ink-2-rgb:      255 255 255;  /* raised surfaces — cards, tiles, bands */
  --ink-3-rgb:      226 232 242;  /* the foot of a card gradient */

  --brand-rgb:      69 98 138;
  --brand-soft-rgb: 93 123 163;

  --accent-rgb:     53 80 122;    /* #35507a — 7.6:1 on the page ground */
  --accent-lt-rgb:  31 51 87;     /* hover goes darker here, not brighter */

  --ivory-rgb:      16 22 32;     /* headings — 17:1 */
  --ivory-dim-rgb:  68 83 107;    /* body copy — 7.3:1 */

  --tint-rgb:       16 22 32;     /* the lift flips: ink over a light page */
  --shadow-rgb:     31 45 70;     /* a blue-grey shadow, never a black one */

  --dim-a:  .22;
  --mute-a: .9;   /* .62 of an ink on white is too faint to carry text */

  --vignette: rgb(var(--ink-3-rgb) / .3);

  --plate: transparent;           /* a light page needs no plate behind the logo */
  --shadow-plate: none;
  --shadow-plate-hover: none;
  --shadow-card: 0 1px 2px rgb(var(--shadow-rgb) / .05),
                 0 12px 32px rgb(var(--shadow-rgb) / .08);
  --shadow-panel: 0 18px 40px rgb(var(--shadow-rgb) / .14);

}

/* The rest of the light theme is the handful of places a swap cannot reach,
   kept out of print so the print sheet keeps its own treatment. */
@media screen {
  /* Ambience: the starfield is white dots, which a light page has nowhere to
     put. What is left is two soft washes and the grain. */
  html[data-theme="light"] .ambience__stars { display: none; }
  html[data-theme="light"] .ambience__grain { opacity: .35; }
  html[data-theme="light"] .ambience__glow--1 {
    background: radial-gradient(circle, rgb(var(--brand-rgb) / .1), transparent 68%);
  }
  html[data-theme="light"] .ambience__glow--2 {
    background: radial-gradient(circle, rgb(var(--ink-3-rgb) / .55), transparent 66%);
  }

  /* Raised surfaces read as white paper lifted off the ground, rather than the
     dark theme's translucent navy. */
  html[data-theme="light"] .card,
  html[data-theme="light"] .tile,
  html[data-theme="light"] .regcard,
  html[data-theme="light"] .callout,
  html[data-theme="light"] .event--feature {
    background: linear-gradient(170deg, #fff, rgb(var(--ink-3-rgb) / .55));
  }
  html[data-theme="light"] .tile,
  html[data-theme="light"] .regcard,
  html[data-theme="light"] .callout {
    box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .05),
                0 10px 24px rgb(var(--shadow-rgb) / .06);
  }

  /* Tuned as white-at-alpha on the dark ground; it does not survive the flip
     to ink-at-alpha on a light one. */
  html[data-theme="light"] .foot__legal { color: var(--ivory-mute); }
}


/* ---------- 36. Venue photo (Branson page) ---------- */
.venuephoto {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  overflow: hidden;
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  box-shadow: var(--shadow-panel);
}
.venuephoto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.venuephoto + .facts { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* ---------- 37. Sponsorship levels ---------- */
/* Reuses the registration card (section 33); only the grid is new. Diamond
   carries .regcard--primary so the top level reads loudest. */
.tiers {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}
@media (min-width: 40rem) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tiers .regcard__price { margin-top: .6rem; }
.tiers .regcard__list { margin-bottom: 1.5rem; }
.tiers .regcard .btn { align-self: stretch; }

/* ---------- 38. Video library ---------- */
.videos {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}
@media (min-width: 40rem) { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgb(var(--ink-2-rgb) / .6);
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
}
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video.is-empty .video__frame {
  display: grid;
  place-items: center;
  border-style: dashed;
  color: var(--ivory-mute);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.video__title {
  margin-top: .9rem;
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
}
.video__meta { margin-top: .3rem; color: var(--ivory-mute); font-size: .82rem; }

/* ---------- 39. Embedded GHL forms (contact, sponsors) ---------- */
.ghlform { margin-top: clamp(1.5rem, 4vw, 2rem); }
.ghlform:first-child { margin-top: 0; }
.ghlform + .linkgroup__note { margin-top: 1.25rem; }
.ghlform iframe { display: block; max-width: 100%; }

/* ---------- 40. Ad and vendor rates (advertise page) ---------- */
/* A price list rather than a set of tiers: each card is a group from the
   program-book sales sheet, one row per option. The two ad groups sit side by
   side; the vendor packages have long names, so they take the full width. */
.rates {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}
@media (min-width: 48rem) {
  .rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ratecard--wide { grid-column: 1 / -1; }
}

.ratecard {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: linear-gradient(170deg, rgb(var(--ink-2-rgb) / .62), rgb(var(--ink-rgb) / .5));
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  text-align: left;
}
.ratecard__title {
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem);
  line-height: 1.2;
}
.ratecard__lead {
  margin-top: .35rem;
  color: var(--ivory-mute);
  font-size: .86rem;
  line-height: 1.6;
}

.ratecard__list { margin-top: 1rem; }
.ratecard__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: .8rem;
  border-top: 1px solid rgb(var(--accent-rgb) / .14);
}
.ratecard__item { color: var(--ivory-dim); font-size: .95rem; line-height: 1.5; }
.ratecard__detail {
  display: block;
  margin-top: .1rem;
  color: var(--ivory-mute);
  font-size: .8rem;
}
.ratecard__price {
  flex: none;
  color: var(--ivory);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.rates + .actions { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

@media print {
  .ratecard { background: none !important; border-color: #c9d2e0 !important; break-inside: avoid; }
  .ratecard__title, .ratecard__price { color: #1a1a1a !important; }
  .ratecard__item { color: #333 !important; }
}