/* DharmaCon static site — shared styles */

:root {
  /* DharmaCon Brand Kit — Primary */
  --teal: #0B3F53;       /* Indigo Night */
  --cream: #F5EDD8;      /* Parchment */
  --rust: #C8391A;       /* Vermillion */

  /* DharmaCon Brand Kit — Secondary Accent */
  --saffron: #D4762A;
  --peacock: #2C6E6A;
  --midnight: #0D1F3C;
  --temple: #C4A35A;

  /* Derived working tones (not brand-kit colors, used for depth/contrast) */
  --teal-dark: var(--midnight);
  --rust-dark: #a12c14;
  --cream-light: #faf5e8;
  --ink: #21252b;
  --max-width: 1320px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 18px;
}

/* Scale the whole site up on desktop/laptop screens so 100% browser zoom
   reads at the same size as ~150% zoom did before. Left off on phones/small
   tablets, where the responsive layout is already sized appropriately. */
@media (min-width: 900px) and (max-width: 1439px) {
  html {
    zoom: 1.15;
  }
  /* Cancel the zoom on the header specifically so its own responsive
     breakpoints can be written against the real screen width, not the
     zoomed effective width. */
  header.site-header {
    zoom: calc(1 / 1.15);
  }
}
@media (min-width: 1440px) {
  html {
    zoom: 1.4;
  }
  header.site-header {
    zoom: calc(1 / 1.4);
  }
}

body {
  margin: 0;
  font-family: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
}

/* Brand Kit typography rule: Anton for headlines/wordmark/display (all caps, 24pt+),
   Familjen Grotesk for everything else (body, labels, captions, lowercase preferred).
   Two fonts only. */
h1, h2, h3, .display, .brand, .section-title, .hero h1 {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 400;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header / Nav */

header.site-header {
  background: var(--teal);
  color: var(--cream);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--cream);
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.brand img {
  height: 32px;
  width: auto;
  animation: brand-wiggle 5s ease-in-out infinite;
  transform-origin: 60% 85%;
}

@keyframes brand-wiggle {
  0%, 55%, 100% { transform: rotate(0deg) scale(1); }
  60% { transform: rotate(-10deg) scale(1.05); }
  65% { transform: rotate(9deg) scale(1.05); }
  70% { transform: rotate(-7deg) scale(1.03); }
  75% { transform: rotate(5deg) scale(1.02); }
  80% { transform: rotate(0deg) scale(1); }
}

.brand-text {
  background: linear-gradient(
    100deg,
    var(--cream) 40%,
    var(--saffron) 50%,
    var(--cream) 60%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--cream);
  animation: brand-shine 5s ease-in-out infinite;
}

@keyframes brand-shine {
  0%, 45% { background-position: 130% 0; }
  75%, 100% { background-position: -30% 0; }
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

nav.main-nav a {
  text-decoration: none;
  color: var(--cream);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.15s;
  white-space: nowrap;
}

nav.main-nav a:hover,
nav.main-nav a.active {
  opacity: 1;
  color: var(--rust);
}

nav.main-nav a.nav-cta {
  background: var(--rust);
  color: #fff;
  opacity: 1;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

nav.main-nav a.nav-cta:hover,
nav.main-nav a.nav-cta.active {
  background: var(--rust-dark);
  color: #fff;
}

/* Desktop / laptop: logo left, full menu right, all in one line —
   matches the original site layout. Needs real horizontal room for
   8 nav links + the Register button, so it only kicks in once there's
   space; narrower screens keep the centered/stacked layout above,
   which stays legible instead of squeezing text unreadably small. */
@media (min-width: 1150px) {
  .nav-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    gap: 20px;
  }
  .brand { justify-content: flex-start; font-size: 1.3rem; gap: 8px; }
  .brand img { height: 28px; }
  nav.main-nav ul { justify-content: flex-end; flex-wrap: nowrap; gap: 12px; }
  nav.main-nav a { font-size: 0.72rem; }
}

/* Hamburger toggle — hidden on desktop, shown below the row breakpoint. */
.nav-toggle {
  display: none;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 70;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile / tablet: brand centred, hamburger on the right, nav becomes a
   full-screen slide-in panel. */
@media (max-width: 1149px) {
  .nav-inner { position: relative; padding: 14px 64px 14px 20px; gap: 0; }
  .brand { font-size: 1.25rem; gap: 8px; }
  .brand img { height: 28px; }
  .nav-toggle { display: flex; }

  nav.main-nav {
    position: fixed;
    inset: 0;
    background: var(--teal);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }
  body.nav-open nav.main-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
  }
  body.nav-open { overflow: hidden; }

  nav.main-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 360px;
  }
  nav.main-nav li { width: 100%; text-align: center; }
  nav.main-nav a {
    display: block;
    font-family: 'Anton', 'Arial Narrow', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    opacity: 1;
    border-radius: 10px;
  }
  nav.main-nav a:active { background: rgba(245, 237, 216, 0.08); }
  nav.main-nav a.nav-cta {
    display: inline-block;
    margin-top: 14px;
    font-family: 'Familjen Grotesk', sans-serif;
    font-size: 0.95rem;
    padding: 14px 32px;
  }
  /* Stagger the links in as the panel opens. */
  nav.main-nav li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  body.nav-open nav.main-nav li { opacity: 1; transform: none; }
  body.nav-open nav.main-nav li:nth-child(1) { transition-delay: 0.05s; }
  body.nav-open nav.main-nav li:nth-child(2) { transition-delay: 0.09s; }
  body.nav-open nav.main-nav li:nth-child(3) { transition-delay: 0.13s; }
  body.nav-open nav.main-nav li:nth-child(4) { transition-delay: 0.17s; }
  body.nav-open nav.main-nav li:nth-child(5) { transition-delay: 0.21s; }
  body.nav-open nav.main-nav li:nth-child(6) { transition-delay: 0.25s; }
  body.nav-open nav.main-nav li:nth-child(7) { transition-delay: 0.29s; }
  body.nav-open nav.main-nav li:nth-child(8) { transition-delay: 0.33s; }
  body.nav-open nav.main-nav li:nth-child(9) { transition-delay: 0.37s; }
}

/* Sticky "Get Tickets" bar — phones only. */
.mobile-cta {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 55;
  background: var(--rust);
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 15px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(13, 31, 60, 0.28);
}
@media (max-width: 767px) {
  .mobile-cta { display: block; }
  body.nav-open .mobile-cta { display: none; }
  body { padding-bottom: 76px; }
}

/* Hero */

.hero {
  background: var(--cream);
  text-align: center;
  padding: 28px 24px 40px;
}

.hero-frame {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}

.hero-img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 12px;
}

.hero-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(88%, 640px);
  background: rgba(13, 31, 60, 0.6);
  border-radius: 16px;
  padding: 28px 32px;
  text-align: center;
}

.hero-overlay h1 {
  color: var(--cream);
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  line-height: 1;
  margin: 0 0 14px;
}

.hero-overlay p {
  color: var(--cream);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 22px;
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
}

.hero-cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-hero-outline {
  background: transparent;
  border: 1px solid var(--cream);
  color: var(--cream);
}
.btn-hero-outline::after { background: rgba(245, 237, 216, 0.2); }
.btn-hero-outline:hover { background: var(--cream); color: var(--teal-dark); }

/* Mobile: the image's natural aspect ratio is too short to hold the
   title + tagline + two buttons without overflowing, since most
   visitors open the site on a phone. Give the frame a fixed height on
   small screens and let the photo fill it with object-fit: cover
   instead of scaling by width alone. */
@media (max-width: 899px) {
  .hero-frame { position: relative; height: 480px; }
  .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
  }
}

@media (max-width: 520px) {
  .hero-frame { height: 420px; }
  .hero-overlay { width: 92%; padding: 20px 18px; }
  .hero-overlay h1 { font-size: 1.9rem; margin-bottom: 10px; }
  .hero-overlay p { font-size: 0.78rem; margin-bottom: 16px; }
  .hero-cta-row { flex-direction: column; }
  .btn { padding: 12px 16px 12px 22px; font-size: 0.78rem; }
}

@media (max-width: 360px) {
  .hero-frame { height: 400px; }
  .hero-overlay h1 { font-size: 1.6rem; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.15s, background 0.15s;
}

.btn::after {
  content: "\2192";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.btn-primary {
  background: var(--rust);
  color: #fff;
}
.btn-primary::after { background: rgba(255, 255, 255, 0.25); }
.btn-primary:hover { background: var(--rust-dark); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--teal);
  color: var(--teal);
}
.btn-outline::after { background: color-mix(in srgb, var(--teal) 15%, transparent); }
.btn-outline:hover { background: var(--teal); color: #fff; }

/* Stats */

.stats {
  background: color-mix(in srgb, var(--saffron) 22%, var(--cream));
  padding: 32px 24px;
}

.stats-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.stat-card {
  background: var(--cream-light);
  border: 1px solid var(--rust);
  border-radius: 8px;
  padding: 28px 16px;
}

.stat-card img { width: 34px; height: 34px; margin: 0 auto 10px; }

.stat-card .num {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--rust);
  margin: 0 0 4px;
}

.stat-card .label { font-size: 0.8rem; color: var(--teal-dark); }

@media (max-width: 720px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Section blocks */

.section {
  padding: 70px 24px;
}

.section.alt { background: var(--cream-light); }

.section-eyebrow {
  color: var(--rust);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  text-align: center;
  margin: 0 0 8px;
}

.section-title {
  color: var(--teal);
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.section-lead {
  text-align: center;
  max-width: 68ch;
  margin: 0 auto 40px;
  color: var(--ink);
  opacity: 0.85;
}

/* What DharmaCon Is / Why DharmaCon 2026 */

.split {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}

.split-text h2 {
  color: var(--rust);
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  margin: 0 0 16px;
  text-align: left;
}

.split-text p { opacity: 0.85; margin: 0; }

.split-img {
  height: 100%;
}

.split-img img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

@media (max-width: 800px) {
  .split-img img { min-height: 220px; }
}

.why-block {
  max-width: var(--max-width);
  margin: 72px auto 0;
  padding-top: 56px;
  border-top: 1px solid color-mix(in srgb, var(--temple) 45%, transparent);
}

.why-eyebrow {
  color: var(--rust);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 6px;
}

.why-heading {
  color: var(--rust);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  margin: 0 0 28px;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.why-card {
  background: var(--cream-light);
  border: 1px solid color-mix(in srgb, var(--temple) 35%, transparent);
  border-radius: 10px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.why-num {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 0.9rem;
  color: var(--cream);
  background: var(--rust);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.why-card h4 {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--teal);
  font-size: 1rem;
  margin: 0 0 10px;
}

.why-grid p { opacity: 0.85; margin: 0; flex-grow: 1; }
.why-card .btn { margin-top: 20px; align-self: flex-start; }

.why-photo {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 10px;
  margin: 32px 0 0;
}

@media (max-width: 800px) {
  .split, .why-grid { grid-template-columns: 1fr; }
}

/* Card grids (speakers / sponsors / gallery) */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.card-grid.team-grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.team-grid .person-card { text-align: center; }
.team-grid .name, .team-grid .team-role { text-align: center; }

.team-grid .person-card img.avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  margin: 0 auto 14px;
  border: 3px solid var(--rust);
}

.team-grid .person-card .avatar-placeholder {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--cream);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  border: 3px solid var(--rust);
}

.team-subheading {
  color: var(--rust);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.1rem;
  margin: 48px 0 24px;
}

.person-card, .sponsor-card, .gallery-card {
  background: var(--cream-light);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--temple) 45%, transparent);
  text-align: center;
  padding: 24px 16px;
}

.person-card img.avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 14px;
  border: 3px solid var(--rust);
}

.person-card .name { font-weight: 600; color: var(--teal); margin: 0 0 2px; }
.person-card .role { font-size: 0.78rem; opacity: 0.75; margin: 0 0 10px; }
.person-card .profile-link { font-size: 0.75rem; color: var(--rust); text-decoration: none; }

.sponsor-card {
  display: block;
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s;
}
.sponsor-card:hover {
  transform: translateY(-3px);
  border-color: var(--rust);
}
.sponsor-card img { height: 90px; width: 90px; object-fit: contain; margin: 0 auto 16px; }
.sponsor-card .name { font-weight: 600; color: var(--teal); }
.sponsor-card .since { font-size: 0.78rem; opacity: 0.7; }

.gallery-card img { width: 100%; height: 200px; object-fit: cover; }
.gallery-card .caption { padding: 14px; font-size: 0.85rem; color: var(--teal-dark); }

/* Promo badge */

.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--rust);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--rust) 45%, transparent);
}

.promo-badge strong { font-weight: 700; letter-spacing: 0.03em; }

/* Price tiers */

.price-tiers {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 24px;
}

.price-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border: 2px solid var(--rust);
  color: var(--teal-dark);
  background: var(--cream-light);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

.price-pill strong {
  color: var(--rust);
  font-size: 1.05rem;
  font-weight: 700;
}

/* Schedule / The Experience */

.schedule-card {
  max-width: 820px;
  margin: 32px auto 0;
  background: var(--cream-light);
  border: 3px solid var(--rust);
  border-radius: 16px;
  padding: 26px 26px 12px;
}

.schedule-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.schedule-date-pill {
  background: var(--rust);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 10px 20px;
  border-radius: 999px;
  white-space: nowrap;
}

.schedule-time-pill {
  border: 2px solid var(--rust);
  color: var(--rust);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 18px;
  border-radius: 999px;
  white-space: nowrap;
}

.schedule-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--teal) 20%, transparent);
}

.schedule-row:last-child { border-bottom: none; }

.schedule-row-time {
  flex: 0 0 auto;
  border: 2px solid var(--rust);
  color: var(--rust);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  margin-top: 2px;
}

.schedule-row-body h4 {
  margin: 0 0 4px;
  color: var(--rust);
  font-size: 1rem;
  font-weight: 700;
}

.schedule-row-body p {
  margin: 0;
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.75;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .schedule-row { flex-direction: column; gap: 6px; }
  .schedule-card { padding: 20px 18px 8px; }
}

/* Pull quote */

.pull-quote {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 30px;
  border-left: 4px solid var(--rust);
  background: var(--cream-light);
  border-radius: 0 10px 10px 0;
}

.pull-quote p {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  text-transform: none;
  letter-spacing: 0.005em;
  color: var(--teal);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.4;
  margin: 0 0 16px;
}

.pull-quote cite {
  display: block;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--rust);
  letter-spacing: 0.02em;
}

/* Sanskrit sloka + translation override (Anton has no Devanagari glyphs and is
   too heavy for a full translation sentence, so scope these away from the
   default .pull-quote p headline styling) */
.pull-quote .sloka-sa {
  font-family: 'Noto Sans Devanagari', 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 600;
  font-size: 1.2rem !important;
  line-height: 1.6 !important;
  margin: 0 0 12px !important;
  color: var(--teal);
  background: linear-gradient(100deg, var(--teal) 30%, var(--temple) 45%, #fff 50%, var(--temple) 55%, var(--teal) 70%);
  background-size: 300% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sloka-shine 4.5s ease-in-out infinite;
}

@keyframes sloka-shine {
  0% { background-position: 220% 0; }
  50% { background-position: -20% 0; }
  100% { background-position: -220% 0; }
}
.pull-quote .sloka-en {
  font-family: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  color: var(--teal);
  opacity: 0.8;
  margin: 0 0 10px !important;
}

/* Wordmark list */

.wordmark-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 36px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0;
}

.wordmark-list li {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--teal);
  font-size: 1.1rem;
  opacity: 0.85;
}

.represented-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px 48px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.represented-grid img {
  height: 46px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.15s;
}

.represented-grid img:hover { opacity: 1; }

@media (max-width: 640px) {
  .represented-grid { gap: 22px 32px; }
  .represented-grid img { height: 36px; max-width: 120px; }
}

.closing-line {
  max-width: 680px;
  margin: 48px auto 0;
  text-align: center;
  color: var(--rust);
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.4;
}

/* Gallery + lightbox */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.gallery-thumb {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s;
}

.gallery-thumb:hover img { transform: scale(1.05); }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(13, 31, 60, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
  padding: 24px;
}

.lightbox.open { opacity: 1; visibility: visible; }

.lightbox-img {
  max-width: min(90vw, 1100px);
  max-height: 82vh;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 28px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2rem;
  cursor: pointer;
  line-height: 1;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
}

.lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.85rem;
  opacity: 0.8;
}

@media (max-width: 640px) {
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 16px; }
}

/* Registration embed */

.embed-wrap {
  max-width: 600px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--temple) 45%, transparent);
}

.embed-wrap iframe { width: 100%; height: 1050px; border: none; display: block; }

/* Registration on top, schedule stacked below. Plain block flow on purpose —
   a flex column here would hand the Luma iframe a stretch-computed width
   instead of its normal auto-centered block width, which was nudging Luma's
   own internal responsive layout just enough to overflow the price text. */
.registration-columns .embed-wrap { margin: 0 auto; }
.registration-columns .schedule-card { margin: 32px auto 0; }

/* Compensate for the desktop zoom above so the Luma embed keeps the exact
   pixel height that was tuned to avoid inner/outer scroll. Raised from 830 to
   1050 because Luma's own event page now shows two ticket tiers instead of
   one, and the shorter height was forcing an internal scrollbar that ate into
   the widget's usable width — which is what was clipping the price text. */
@media (min-width: 900px) and (max-width: 1439px) {
  .embed-wrap iframe { height: calc(1050px / 1.15); }
}
@media (min-width: 1440px) {
  .embed-wrap iframe { height: calc(1050px / 1.4); }
}

.video-embed-wrap {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding-top: 50.625%; /* 16:9 */
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--temple) 45%, transparent);
  background: #000;
}

.video-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.placeholder-note {
  max-width: 720px;
  margin: 24px auto 0;
  background: color-mix(in srgb, var(--temple) 22%, var(--cream));
  border: 1px dashed var(--rust);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 0.85rem;
  color: var(--rust-dark);
}

/* About page body */

.about-body {
  max-width: 68ch;
  margin: 0 auto;
}

.about-body h3 {
  color: var(--rust);
  font-size: 1.1rem;
  margin: 36px 0 10px;
}

.about-body h3:first-child { margin-top: 0; }

.about-body p { opacity: 0.85; margin: 0 0 4px; }

.about-photo {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 10px;
  margin: 24px 0;
}

.about-actions {
  max-width: 760px;
  margin: 40px auto 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Contact form */

.contact-form {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.contact-form label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-bottom: 6px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--cream-light);
  border: 1px solid color-mix(in srgb, var(--temple) 55%, transparent);
  border-radius: 6px;
  padding: 12px 14px;
}

.contact-form select { cursor: pointer; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--rust);
  outline-offset: 1px;
}

.contact-form textarea { resize: vertical; min-height: 140px; }

.contact-form .btn-primary {
  border: none;
  cursor: pointer;
  justify-self: start;
}

.form-note {
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.7;
  margin: 18px 0 0;
}

/* Sponsorship packages */

.sponsor-intro {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.sponsor-intro h3 {
  color: var(--rust);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin: 0 0 6px;
}

.sponsor-intro .tagline {
  color: var(--teal);
  font-size: 1rem;
  margin: 0 0 16px;
}

.sponsor-intro p { opacity: 0.85; margin: 0 0 12px; }
.sponsor-intro a { color: var(--rust); text-decoration: underline; }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  align-items: start;
}

.tier-card {
  --tier-color: var(--rust);
  background: var(--cream-light);
  border: 1px solid color-mix(in srgb, var(--temple) 45%, transparent);
  border-top: 4px solid var(--tier-color);
  border-radius: 10px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
}

.tier-card.tier-temple { --tier-color: var(--temple); }
.tier-card.tier-peacock { --tier-color: var(--peacock); }
.tier-card.tier-saffron { --tier-color: var(--saffron); }
.tier-card.tier-midnight { --tier-color: var(--midnight); }
.tier-card.tier-rust { --tier-color: var(--rust); }

.tier-card.featured {
  border-left: 2px solid var(--rust);
  border-right: 2px solid var(--rust);
  border-bottom: 2px solid var(--rust);
  position: relative;
}

.tier-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tier-color) 16%, var(--cream-light));
  color: var(--tier-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.tier-card .tier-price {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  color: var(--tier-color);
  font-size: 1.9rem;
  margin: 0;
  line-height: 1.1;
}

.tier-card .tier-name {
  color: var(--teal);
  font-weight: 600;
  font-size: 1rem;
  margin: 4px 0 2px;
}

.tier-card .tier-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-dark);
  opacity: 0.65;
  margin: 0 0 16px;
}

.tier-card .tier-includes {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--teal-dark);
  opacity: 0.7;
  margin: 0 0 10px;
}

.tier-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0.9;
}

.tier-card li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 22px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.tier-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tier-color) 20%, var(--cream-light));
  border: 1px solid var(--tier-color);
}

.tier-card li::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 0.55em;
  width: 5px;
  height: 3px;
  border-left: 1.5px solid var(--tier-color);
  border-bottom: 1.5px solid var(--tier-color);
  transform: rotate(-45deg);
}

.sponsor-closing {
  max-width: 720px;
  margin: 48px auto 0;
  text-align: center;
  opacity: 0.85;
}

.sponsor-closing a { color: var(--rust); text-decoration: underline; }

@media (max-width: 640px) {
  .contact-form .btn-primary { justify-self: stretch; text-align: center; }
}

/* Footer */

footer.site-footer {
  background: var(--teal);
  color: var(--cream);
  padding: 32px 24px 20px;
}

.footer-inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  text-align: left;
}

.footer-logo { flex-shrink: 0; }
.footer-logo img { width: 48px; margin-bottom: 0; }

.footer-about {
  max-width: 480px;
  color: var(--cream);
  font-size: 0.82rem;
  opacity: 0.9;
}

.footer-about h4 { color: var(--saffron); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; margin-bottom: 6px; }

.footer-learn-more {
  display: inline-block;
  margin-top: 10px;
  color: var(--saffron);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.social-links {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.social-links a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cream) 55%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--cream);
  opacity: 0.85;
  transition: opacity 0.15s, border-color 0.15s;
}

.social-links a:hover {
  opacity: 1;
  border-color: var(--saffron);
  color: var(--saffron);
}

.copyright {
  text-align: center;
  font-size: 0.72rem;
  color: var(--cream);
  opacity: 0.55;
  margin-top: 20px;
}

/* ==========================================================================
   Motion + interaction layer (progressive enhancement; see assets/site.js)
   ========================================================================== */

/* Countdown (home hero) */

.countdown {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 22px;
}

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 62px;
  padding: 8px 6px 6px;
  background: rgba(245, 237, 216, 0.1);
  border: 1px solid rgba(245, 237, 216, 0.25);
  border-radius: 10px;
}

.cd-num {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.cd-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.75;
  margin-top: 4px;
}

.countdown-live {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--saffron);
}

@media (max-width: 520px) {
  .countdown { gap: 6px; margin-bottom: 16px; }
  .cd-unit { min-width: 54px; padding: 6px 4px 5px; }
  .cd-num { font-size: 1.3rem; }
  .cd-label { font-size: 0.56rem; }
}

/* Ticker strip (home, below hero) */

.ticker {
  background: var(--rust);
  color: var(--cream);
  overflow: hidden;
  white-space: nowrap;
  padding: 12px 0;
  border-top: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding-left: 28px;
  animation: ticker-scroll 38s linear infinite;
  will-change: transform;
}

.ticker-track span {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}

.ticker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cream);
  opacity: 0.8;
  flex-shrink: 0;
}

.ticker:hover .ticker-track { animation-play-state: paused; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Logo marquee (2025 recap — Represented By) */

.marquee {
  overflow: hidden;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track.represented-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  max-width: none;
  gap: 0 64px;
  padding-left: 64px;
  animation: ticker-scroll 46s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

@media (max-width: 640px) {
  .marquee-track.represented-grid { gap: 0 40px; padding-left: 40px; animation-duration: 34s; }
}

/* Scroll reveal — only takes effect once JS has tagged elements, so a
   page with scripts blocked still renders everything. */

html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--d, 0ms);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hover / tap lift on cards */

.person-card,
.stat-card,
.why-card,
.tier-card,
.sponsor-card,
.gallery-thumb {
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.6s ease;
}

@media (hover: hover) {
  .person-card:hover,
  .stat-card:hover,
  .why-card:hover,
  .tier-card:hover,
  .sponsor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(13, 31, 60, 0.12);
  }
  .gallery-thumb:hover { transform: scale(1.025); }
}

/* Button press feedback */

.btn:active, .nav-cta:active, .mobile-cta:active { transform: scale(0.97); }

/* Respect reduced-motion preferences across the whole layer. */

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .ticker-track, .marquee-track.represented-grid { animation: none; }
  .brand img, .brand-text, .pull-quote .sloka-sa { animation: none; }
  .person-card, .stat-card, .why-card, .tier-card, .sponsor-card, .gallery-thumb,
  nav.main-nav, nav.main-nav li, .nav-toggle span { transition: none; }
}

/* ==========================================================================
   People tiles — full-bleed photo cards with hover / tap bio reveal
   (team.html Advisor's Circle, Patron's Council, Exec & Ops teams;
    recap-2025.html "Who Was in the Room")
   ========================================================================== */

.team-group-desc {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
  opacity: 0.85;
}

.card-grid.team-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.card-grid .person-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  padding: 18px 18px 16px;
  background: var(--teal);
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  text-align: left;
  isolation: isolate;
}
.card-grid .person-card.has-bio { cursor: pointer; }

.card-grid .person-card img.avatar,
.card-grid .person-card .avatar-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 0;
}
.card-grid .person-card .avatar-placeholder { font-size: 3rem; }

/* Gradient scrim so the name always reads over the photo. */
.card-grid .person-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(13, 31, 60, 0) 40%,
    rgba(13, 31, 60, 0.55) 70%,
    rgba(13, 31, 60, 0.95) 100%
  );
}

.card-grid .person-card .name,
.card-grid .person-card .role,
.card-grid .person-card .team-role {
  position: relative;
  z-index: 3;
  text-align: left;
}
.card-grid .person-card .name {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.1rem;
  line-height: 1.1;
  color: var(--cream);
  margin: 0 0 5px;
}
.card-grid .person-card .role,
.card-grid .person-card .team-role {
  font-size: 0.72rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--saffron);
  opacity: 1;
  margin: 0;
}
.card-grid .person-card .profile-link {
  position: relative;
  z-index: 3;
  margin-top: 8px;
  color: var(--cream);
  opacity: 0.85;
}

/* Bio panel — slides up over the photo on hover (desktop) / .is-open (JS). */
.card-grid .person-card .team-bio {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 56px 18px 0;
  overflow: auto;
  background: rgba(11, 63, 83, 0.95);
  color: var(--cream);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 237, 216, 0.35) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.card-grid .person-card .team-bio::after {
  content: "";
  display: block;
  height: 110px;
}
.card-grid .person-card.is-open .team-bio {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.card-grid .person-card.is-open img.avatar { transform: scale(1.06); }

/* "+" toggle in the corner of cards that have a bio. */
.card-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 237, 216, 0.92);
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease, background 0.2s ease;
}
.card-toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.card-toggle span:nth-child(2) { transform: translate(-50%, -50%) rotate(90deg); }
.person-card.is-open .card-toggle { transform: rotate(45deg); background: var(--rust); }
.person-card.is-open .card-toggle span { background: #fff; }

@media (hover: hover) {
  .card-grid .person-card.has-bio:hover .team-bio {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .card-grid .person-card:hover img.avatar { transform: scale(1.06); }
  .card-grid .person-card.has-bio:hover .card-toggle { transform: rotate(45deg); background: var(--rust); }
  .card-grid .person-card.has-bio:hover .card-toggle span { background: #fff; }
}

@media (max-width: 640px) {
  .card-grid.team-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card-grid .person-card { padding: 12px 12px 12px; border-radius: 14px; }
  .card-grid .person-card .name { font-size: 0.92rem; }
  .card-grid .person-card .role,
  .card-grid .person-card .team-role { font-size: 0.62rem; }
  .card-toggle { width: 30px; height: 30px; top: 8px; right: 8px; }
  /* On phones the bio opens in the bottom sheet instead of in-card. */
  .card-grid .person-card .team-bio { display: none; }
}

/* Bottom sheet (phones) */

.bio-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.bio-sheet.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease, visibility 0s;
}
.bio-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 31, 60, 0.6);
}
.bio-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 84vh;
  overflow: auto;
  background: var(--cream);
  border-radius: 22px 22px 0 0;
  padding: 12px 22px calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bio-sheet.is-open .bio-sheet-panel { transform: none; }
.bio-sheet-handle {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: rgba(13, 31, 60, 0.22);
  margin: 0 auto 16px;
}
.bio-sheet-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.bio-sheet-head img {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid var(--rust);
}
.bio-sheet .bs-name {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--teal);
  margin: 0;
}
.bio-sheet .bs-role {
  color: var(--rust);
  font-size: 0.78rem;
  font-weight: 600;
  margin: 4px 0 0;
}
.bio-sheet .bs-bio {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.bio-sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 31, 60, 0.08);
  color: var(--teal);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
body.sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .card-grid .person-card img.avatar,
  .card-grid .person-card .team-bio,
  .card-toggle,
  .bio-sheet,
  .bio-sheet-panel { transition: none; }
}

/* ==========================================================================
   Sponsors page — CTAs, logo row, tier ladder, closing card
   ========================================================================== */

.cta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 36px;
}

.sponsor-logo-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-width: 1120px;
}
.sponsor-logo-grid .sponsor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sponsor-logo-grid .sponsor-card img {
  height: 110px;
  width: 100%;
  max-width: 170px;
  object-fit: contain;
  margin: 0 auto 16px;
}
.sponsor-logo-grid .sponsor-card .name { font-size: 0.85rem; line-height: 1.3; }
@media (hover: hover) {
  .sponsor-logo-grid .sponsor-card:hover { border-color: var(--rust); }
}

.sponsor-intro .tier-hint {
  color: var(--teal);
  font-weight: 600;
  opacity: 1;
  margin-top: 4px;
}

.tier-swipe-hint {
  display: none;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
  margin: -16px 0 14px;
}

/* Ladder: 5 equal-height columns on wide screens, 3 on laptops/tablets,
   swipeable carousel on phones. */
.tier-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: stretch;
  gap: 18px;
  counter-reset: tier;
}
@media (min-width: 1100px) {
  .tier-grid { grid-template-columns: repeat(4, 1fr); }
}

.tier-card {
  position: relative;
  border-radius: 16px;
  padding: 24px 20px 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tier-card::before {
  counter-increment: tier;
  content: "Tier " counter(tier);
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tier-color);
  opacity: 0.75;
}

.tier-card.featured {
  border: 2px solid var(--rust);
  border-top-width: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rust) 7%, var(--cream-light)) 0%, var(--cream-light) 45%);
}

.tier-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rust);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(200, 57, 26, 0.35);
}

.tier-card .tier-includes {
  display: inline-block;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tier-color);
  background: color-mix(in srgb, var(--tier-color) 12%, var(--cream-light));
  border-radius: 999px;
  padding: 4px 10px;
  opacity: 1;
  margin: 0 0 12px;
}

.tier-card ul { flex: 1; }
.tier-card li { font-size: 0.85rem; }

.tier-cta {
  display: block;
  margin-top: 18px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tier-color);
  border: 2px solid var(--tier-color);
  border-radius: 999px;
  padding: 11px 14px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.tier-cta:hover { background: var(--tier-color); color: #fff; }
.tier-cta:active { transform: scale(0.97); }
.tier-card.featured .tier-cta { background: var(--rust); color: #fff; }
.tier-card.featured .tier-cta:hover { background: var(--rust-dark); }

@media (max-width: 767px) {
  .tier-swipe-hint { display: block; }
  .tier-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 16px 24px 20px;
    margin: 0 -24px;
    scrollbar-width: none;
  }
  .tier-grid::-webkit-scrollbar { display: none; }
  .tier-card {
    flex: 0 0 82%;
    max-width: 340px;
    scroll-snap-align: center;
  }
}

/* Closing CTA card */

.sponsor-closing { max-width: 1000px; opacity: 1; }

.closing-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: center;
  text-align: left;
  background: var(--teal);
  color: var(--cream);
  border-radius: 18px;
  padding: 32px 36px;
}
.closing-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--saffron);
  font-weight: 700;
  margin: 0 0 6px;
}
.closing-card h3 {
  color: var(--cream);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.15;
  margin: 0 0 10px;
}
.closing-card p { margin: 0; opacity: 0.85; font-size: 0.92rem; }
.closing-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.sponsor-closing .closing-card a.btn-primary {
  color: #fff;
  text-decoration: none;
}
.sponsor-closing .closing-card a.btn-primary:hover { color: #fff; }
.sponsor-closing .closing-card a.closing-email {
  color: var(--cream);
  font-size: 0.82rem;
  opacity: 0.8;
  text-decoration: underline;
  word-break: break-all;
}

@media (max-width: 720px) {
  .closing-card { grid-template-columns: 1fr; padding: 26px 22px; }
  .closing-actions { align-items: stretch; }
  .closing-actions .btn { justify-content: center; }
}

/* ==========================================================================
   About page — chapter nav, split chapters, stats, timeline, organizer card
   ========================================================================== */

.chapter-nav {
  position: sticky;
  top: 66px;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 28px auto 0;
  padding: 6px;
  width: max-content;
  max-width: 100%;
  background: rgba(250, 245, 232, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--temple) 45%, transparent);
  border-radius: 999px;
}
.chapter-nav a {
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  padding: 9px 16px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.chapter-nav a:hover { background: color-mix(in srgb, var(--teal) 8%, transparent); }
.chapter-nav a.is-active { background: var(--rust); color: #fff; }

.about-chapter { scroll-margin-top: 140px; }
.about-chapter.section { padding-top: 56px; padding-bottom: 56px; }

.about-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
.about-split-reverse .about-text { order: 2; }
.about-split-reverse .about-figure { order: 1; }

.chapter-num {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--temple);
  opacity: 0.55;
  margin: 0 0 6px;
}
.about-text h3 {
  color: var(--rust);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.1;
  margin: 0 0 16px;
}
.about-text p { opacity: 0.88; margin: 0 0 14px; }

.about-figure {
  margin: 0;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 18px 40px rgba(13, 31, 60, 0.16);
}
.about-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) { .about-figure:hover img { transform: scale(1.04); } }
.about-figure figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(13, 31, 60, 0.75);
  color: var(--cream);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

/* Stat callouts */
.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0;
}
.about-stat {
  background: var(--cream-light);
  border: 1px solid color-mix(in srgb, var(--temple) 45%, transparent);
  border-left: 4px solid var(--rust);
  border-radius: 0 12px 12px 0;
  padding: 14px 16px;
}
.about-stat .num {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--rust);
  margin: 0 0 6px;
  opacity: 1;
}
.about-stat .label { font-size: 0.78rem; line-height: 1.35; color: var(--teal-dark); margin: 0; opacity: 0.85; }

.about-quote {
  margin: 18px 0 0;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--temple);
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--teal);
}

/* Timeline */
.about-timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 6px 0 20px;
  position: relative;
}
.about-timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 11px;
  height: 2px;
  background: linear-gradient(90deg, var(--temple), var(--rust));
}
.tl-step { position: relative; padding: 32px 12px 0 0; }
.tl-step::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--temple);
}
.tl-step.is-now::before {
  border-color: var(--rust);
  background: var(--rust);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--rust) 18%, transparent);
}
.tl-year {
  display: block;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--teal);
}
.tl-step.is-now .tl-year { color: var(--rust); }
.tl-text { display: block; font-size: 0.82rem; opacity: 0.85; margin-top: 4px; }

.track-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 16px;
}
.track-chips li {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1.5px solid var(--teal);
  border-radius: 999px;
  padding: 6px 14px;
}

/* Organizer card */
.org-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--cream-light);
  border: 1px solid color-mix(in srgb, var(--temple) 45%, transparent);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 18px;
}
.org-logo { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.org-name { font-weight: 700; color: var(--teal); margin: 0 0 6px; }
.org-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.78rem;
  opacity: 0.85;
}
.org-facts strong { color: var(--rust); font-weight: 700; }

.about-actions { max-width: none; margin: 8px 0 0; }

/* CTA band */
.about-cta-band {
  background: var(--teal);
  color: var(--cream);
  padding: 44px 24px;
}
.about-cta-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.about-cta-inner h3 {
  color: var(--cream);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.05;
  margin: 0;
}

@media (max-width: 899px) {
  .about-split { grid-template-columns: 1fr; gap: 26px; }
  .about-split-reverse .about-text { order: 1; }
  .about-split-reverse .about-figure { order: 2; }
  .chapter-nav { top: 58px; }
  .about-chapter { scroll-margin-top: 120px; }
}
@media (max-width: 520px) {
  .about-stats { grid-template-columns: 1fr; }
  .chapter-nav a { padding: 8px 12px; font-size: 0.66rem; }
  .about-cta-inner { justify-content: center; text-align: center; }
  .about-cta-inner .cta-row { width: 100%; }
}

/* Buy A Table — standalone group offer above the sponsorship tiers */

.table-offer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  max-width: var(--max-width);
  margin: 0 auto 44px;
  padding: 24px 28px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--temple) 22%, var(--cream-light)) 0%, var(--cream-light) 60%);
  border: 1px solid color-mix(in srgb, var(--temple) 60%, transparent);
  border-left: 6px solid var(--temple);
  border-radius: 16px;
}
.table-offer-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--temple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.table-offer-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--temple);
  margin: 0 0 4px;
}
.table-offer-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--teal);
  font-size: 1.5rem;
  line-height: 1;
  margin: 0 0 10px;
}
.table-offer-price {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  color: var(--temple);
  font-size: 1.6rem;
}
.table-offer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
.table-offer-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.85rem;
  line-height: 1.35;
  opacity: 0.9;
}
.table-offer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--temple);
}
.table-offer-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.table-offer-note { font-size: 0.7rem; opacity: 0.7; max-width: 180px; }

.tier-group-heading {
  text-align: center;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  color: var(--teal);
  margin: 0 0 22px;
}

@media (max-width: 900px) {
  .table-offer { grid-template-columns: auto 1fr; }
  .table-offer-action { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; text-align: left; flex-wrap: wrap; }
  .table-offer-note { max-width: none; }
}
@media (max-width: 767px) {
  .tier-swipe-hint { margin-top: -10px; }
}
@media (max-width: 520px) {
  .table-offer { grid-template-columns: 1fr; padding: 20px 18px; }
  .table-offer-icon { width: 46px; height: 46px; }
  .table-offer-list { flex-direction: column; }
  .table-offer-action .btn { width: 100%; justify-content: center; }
}

/* Speakers & Mentors page — panel sections */

.panel-section.section { padding-top: 56px; padding-bottom: 56px; }
.panel-head {
  max-width: 820px;
  margin: 0 auto 30px;
  text-align: center;
}
.panel-head .chapter-num { margin-bottom: 4px; }
.panel-head h3 {
  color: var(--rust);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.1;
  margin: 0 0 14px;
}
.panel-head .track-chips { justify-content: center; margin-bottom: 16px; }
.panel-desc { opacity: 0.88; margin: 0; }

.speakers-grid { max-width: 1120px; }

/* Placeholder tiles for unannounced speakers */
.card-grid .person-card.tba {
  background: transparent;
  border: 2px dashed color-mix(in srgb, var(--teal) 35%, transparent);
}
.card-grid .person-card.tba::before { background: none; }
.card-grid .person-card.tba .avatar-placeholder {
  background: color-mix(in srgb, var(--teal) 6%, transparent);
  color: color-mix(in srgb, var(--teal) 40%, transparent);
  font-size: 2.2rem;
  letter-spacing: 0.12em;
  align-items: flex-start;
  padding-top: 26%;
}
.card-grid .person-card.tba .name { color: var(--teal); }
.card-grid .person-card.tba .team-role { color: var(--rust); }

/* ==========================================================================
   Profile dialog v2 - replaces the in-tile bio overlay.
   Tiles: photo + name + title + "+" hint. Click opens a split profile card
   (desktop) or bottom sheet (phones). Rules below override the earlier
   people-tile block.
   ========================================================================== */

.card-grid .person-card .team-bio { display: none !important; }
.card-grid .person-card.has-bio { cursor: pointer; }
.card-grid .person-card:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }

/* "+" becomes a "View bio" pill on hover */
.card-toggle { display: flex; align-items: center; justify-content: center; }
@media (hover: hover) {
  .card-grid .person-card.has-bio:hover .card-toggle { transform: none; background: var(--rust); }
  .card-grid .person-card.has-bio:hover .card-toggle span { background: #fff; }
  .card-grid .person-card.has-bio:hover .card-toggle::after {
    content: "View bio";
    position: absolute;
    right: 42px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: var(--rust);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 999px;
  }
}

/* Dialog layout */
.bio-sheet-panel {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
  overflow: hidden;
}
.bs-photo {
  position: relative;
  background: var(--teal);
  height: 220px;
}
.bs-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.bs-body {
  position: relative;
  padding: 14px 22px calc(28px + env(safe-area-inset-bottom, 0px));
  overflow: auto;
}
.bs-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--saffron);
  margin: 0 0 6px;
}
.bio-sheet .bs-name { font-size: 1.5rem; }
.bio-sheet .bs-role { margin: 6px 0 14px; }
.bio-sheet .bs-bio { font-size: 0.92rem; line-height: 1.6; }
.bio-sheet-close { top: 12px; right: 12px; background: var(--cream-light); box-shadow: 0 2px 8px rgba(13,31,60,0.15); }

@media (min-width: 641px) {
  .bio-sheet-panel {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(880px, 92vw);
    max-height: 86vh;
    border-radius: 22px;
    grid-template-columns: 320px 1fr;
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
    box-shadow: 0 30px 80px rgba(13, 31, 60, 0.35);
  }
  .bio-sheet.is-open .bio-sheet-panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .bs-photo { height: auto; min-height: 380px; }
  .bs-body { padding: 34px 36px 36px; max-height: 86vh; }
  .bio-sheet-handle { display: none; }
  .bio-sheet .bs-name { font-size: 1.9rem; }
  .bio-sheet .bs-role { font-size: 0.85rem; }
  .bio-sheet .bs-bio { font-size: 0.95rem; }
}

/* ==========================================================================
   Speakers & Mentors v2 - lineup meter, day rail, panel bands, badges
   ========================================================================== */

.speakers-intro.section { padding-bottom: 28px; }

/* Lineup meter */
.lineup-meter {
  max-width: 720px;
  margin: 26px auto 30px;
  background: var(--cream-light);
  border: 1px solid color-mix(in srgb, var(--temple) 45%, transparent);
  border-radius: 16px;
  padding: 18px 22px 16px;
}
.lineup-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.lineup-count { font-size: 0.9rem; color: var(--teal); }
.lineup-count strong {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--rust);
  margin-right: 6px;
}
.lineup-target { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-dark); opacity: 0.7; }
.lineup-bar {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  overflow: hidden;
}
.lineup-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--saffron), var(--rust));
  transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lineup-note { margin: 10px 0 0; font-size: 0.78rem; opacity: 0.8; text-align: center; }
.lineup-note a { color: var(--rust); font-weight: 600; }

/* Day rail (run of show) */
.day-rail {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--max-width);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  position: relative;
}
.day-rail::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 13px;
  height: 2px;
  background: linear-gradient(90deg, var(--temple), var(--rust), var(--teal));
}
.day-rail li { position: relative; text-align: center; }
.day-rail a {
  display: block;
  text-decoration: none;
  padding: 34px 6px 0;
  position: relative;
  color: var(--teal);
}
.day-rail a::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--rust);
  transition: transform 0.2s ease, background 0.2s ease;
}
.day-rail a:hover::before { background: var(--rust); transform: translateX(-50%) scale(1.2); }
.rail-time {
  display: block;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--rust);
}
.rail-label { display: block; font-size: 0.72rem; line-height: 1.25; margin-top: 4px; opacity: 0.85; }

@media (max-width: 899px) {
  .day-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: 0;
    padding: 0 12px 10px;
    scrollbar-width: none;
  }
  .day-rail::-webkit-scrollbar { display: none; }
  .day-rail::before { left: 40px; right: 40px; }
  .day-rail li { flex: 0 0 120px; scroll-snap-align: start; }
}

/* Panel bands */
.panel-section.section { padding-top: 0; }
.panel-band {
  position: relative;
  overflow: hidden;
  margin: 0 -24px 34px;
  padding: 44px 24px 38px;
  color: var(--cream);
  background: var(--band, var(--teal));
  background-image:
    radial-gradient(circle at 12% 50%, rgba(255,255,255,0.08) 0 60px, transparent 61px),
    radial-gradient(circle at 12% 50%, rgba(255,255,255,0.06) 0 110px, transparent 111px),
    radial-gradient(circle at 12% 50%, rgba(255,255,255,0.04) 0 170px, transparent 171px);
}
.panel-teal    { --band: var(--teal); }
.panel-rust    { --band: var(--rust); }
.panel-midnight{ --band: var(--midnight); }
.panel-saffron { --band: var(--saffron); }
.panel-peacock { --band: var(--peacock); }

.panel-watermark {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: clamp(7rem, 18vw, 15rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  user-select: none;
}
.panel-band-inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
}
.panel-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 18px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.panel-icon svg { width: 30px; height: 30px; }
.panel-kicker { margin: 0 0 8px; }
.panel-time {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 5px 12px;
  border-radius: 999px;
}
.panel-band h3 {
  color: var(--cream);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1;
  margin: 0;
}
.panel-section .panel-head h3 { display: none; }
.panel-section .panel-head .chapter-num { display: none; }

/* Highlight badge on tiles */
.fact-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  max-width: calc(100% - 64px);
  background: rgba(245, 237, 216, 0.95);
  color: var(--teal);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shimmer on TBA tiles */
.card-grid .person-card.tba .avatar-placeholder {
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--teal) 6%, transparent) 30%,
    color-mix(in srgb, var(--teal) 14%, transparent) 50%,
    color-mix(in srgb, var(--teal) 6%, transparent) 70%);
  background-size: 250% 100%;
  animation: tba-shimmer 2.8s ease-in-out infinite;
}
@keyframes tba-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* Mentor how-it-works */
.how-steps {
  list-style: none;
  padding: 0;
  max-width: 1120px;
  margin: 0 auto 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: step;
}
.how-steps li {
  position: relative;
  background: var(--cream-light);
  border: 1px solid color-mix(in srgb, var(--temple) 45%, transparent);
  border-radius: 16px;
  padding: 22px 20px 20px 20px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--peacock);
  color: #fff;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: 1.2rem;
  margin-bottom: 12px;
}
.how-steps h4 { margin: 0 0 6px; color: var(--teal); font-size: 1rem; }
.how-steps p { margin: 0; font-size: 0.85rem; opacity: 0.85; line-height: 1.5; }

.mentor-cta {
  max-width: 1120px;
  margin: 30px auto 0;
  background: var(--teal);
  color: var(--cream);
  border-radius: 18px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.mentor-cta h3 { color: var(--cream); font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.1; margin: 0; }

@media (max-width: 767px) {
  .how-steps { grid-template-columns: 1fr; }
  .panel-band { padding: 34px 20px 30px; }
  .panel-icon { width: 50px; height: 50px; border-radius: 14px; }
  .panel-icon svg { width: 24px; height: 24px; }
  .mentor-cta { padding: 22px 20px; }
  .fact-badge { font-size: 0.56rem; padding: 5px 8px; top: 8px; left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-grid .person-card.tba .avatar-placeholder { animation: none; }
  .lineup-fill { transition: none; }
}

/* Hover popover for people tiles (desktop) */
.bio-pop {
  --accent: var(--rust);
  position: fixed;
  z-index: 85;
  background: var(--cream-light);
  border: 1px solid color-mix(in srgb, var(--temple) 45%, transparent);
  border-top: 5px solid var(--accent);
  border-radius: 16px;
  padding: 16px 20px 18px;
  box-shadow: 0 24px 60px rgba(13, 31, 60, 0.28);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.bio-pop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.bp-arrow {
  position: absolute;
  top: var(--arrow-top, 34px);
  width: 14px;
  height: 14px;
  background: var(--cream-light);
  border: 1px solid color-mix(in srgb, var(--temple) 45%, transparent);
  transform: rotate(45deg);
}
.bio-pop.is-right .bp-arrow { left: -8px; border-right: 0; border-top: 0; }
.bio-pop.is-left  .bp-arrow { right: -8px; border-left: 0; border-bottom: 0; }
.bp-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 4px;
}
.bp-name {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.25rem;
  line-height: 1.05;
  color: var(--teal);
  margin: 0;
}
.bp-role { font-size: 0.74rem; font-weight: 600; color: var(--rust); margin: 4px 0 10px; }
.bp-bio {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bp-more {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.bp-more:hover { text-decoration: underline; }

/* Retire the "View bio" pill; keep a quiet "+" */
@media (hover: hover) {
  .card-grid .person-card.has-bio:hover .card-toggle::after { content: none; }
  .card-grid .person-card.has-bio:hover .card-toggle { background: var(--rust); }
}
@media (prefers-reduced-motion: reduce) { .bio-pop { transition: none; } }