/* ============================================================
   OVERSUBSCRIBED — shared stylesheet
   Brand: Parchment / Ink / Sepia / Hairline / Allocation Gold
   ============================================================ */

:root {
  --parchment: #F1EEE3;
  --ink: #17130E;
  --sepia: #4A4238;
  --hairline: #D8D2C0;
  --gold: #C2A25E;
  --gold-hover: #9c7f45;
  --muted-gold: #8a7f68;
  --card: #E7E0CF;
  --placeholder: #b9ae98;

  --container: 1160px;
  --gutter: 24px;
  --header-h: 84px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); overflow-x: hidden; }
body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-h);
  overflow-x: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hover); }
h1, h2, h3, p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--parchment);
  border-bottom: 1px solid var(--hairline);
}
.site-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.brand-mark { display: inline-flex; opacity: .92; transition: opacity .2s; }
.brand-mark:hover { opacity: 1; }
.brand-mark img { height: 30px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 32px; }
.nav-link-sm {
  color: var(--sepia);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .14em;
  display: inline-block;
  border-bottom: 1px solid rgba(194,162,94,.5);
  padding-bottom: 5px;
  transition: color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.nav-link-sm:hover,
.nav-link-sm.is-active { color: var(--ink); border-bottom-color: var(--gold); }

.header-actions { display: flex; align-items: center; gap: 16px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle svg { stroke: var(--ink); }

.nav-cta {
  color: var(--ink);
  border: 1px solid var(--gold);
  background: transparent;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  padding: 12px 24px;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
}
.nav-cta:hover { background: rgba(194,162,94,.1); border-color: var(--gold-hover); }

/* Desktop: nav links float centered in the header, independent of
   whatever widths sit on either side (logo left, actions right). */
@media (min-width: 861px) {
  .site-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Homepage only: the nav links live inline in the hero first. The
     header's copy stays invisible until that inline row scrolls out of
     view above the fold, then fades in "docked" in the same spot. */
  .site-header[data-nav-reveal] .site-nav {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-6px);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
  }
  .site-header[data-nav-reveal].nav-visible .site-nav {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }
}

@media (max-width: 860px) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform: none;
    background: var(--parchment);
    border-bottom: 1px solid var(--hairline);
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px var(--gutter) 28px;
    display: none;
    z-index: 40;
  }
  .site-nav.is-open { display: flex; }
  .nav-toggle { display: flex; }
  .nav-cta { padding: 10px 16px; font-size: 10px; }
}

@media (max-width: 400px) {
  .nav-cta { padding: 9px 11px; font-size: 8.5px; letter-spacing: .09em; }
}

/* ---------- Eyebrow / headline system ---------- */
.eyebrow {
  display: block;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--gold);
  text-align: center;
}
.headline {
  margin: 18px 0 0;
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
}
.headline .accent { color: var(--gold); }
.rule {
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: 26px auto 0;
}
.lede {
  margin: 26px auto 0;
  max-width: 640px;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  line-height: 1.7;
  color: var(--sepia);
  text-align: center;
}

/* ---------- Sections & box motif ---------- */
.section { position: relative; padding: 96px var(--gutter); }
.section-inner { max-width: var(--container); margin: 0 auto; }

/* The first/last section on a page sits right against the header or footer —
   the bordered frame already reads as the section's edge, so it doesn't need
   the full 96px of outer air on that side too. */
.section--flush-top { padding-top: 32px; }
.section--flush-bottom { padding-bottom: 32px; }
@media (max-width: 640px) {
  .section--flush-top { padding-top: 24px; }
  .section--flush-bottom { padding-bottom: 24px; }
}

/* A page's opening section (frame + its scroll-cue arrow): when the
   content is short enough to fit in one screen, center the pair inside
   the visible viewport so the arrow is never pushed just out of view. */
.section--hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
}
/* Flex's "stretch" default doesn't fill the cross axis when the item also
   has auto side-margins (used here for the frame's max-width centering),
   so it falls back to content width and stops the text from wrapping.
   Force it back to filling the section instead. */
.section--hero > .frame { width: 100%; }

.frame {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 64px;
}
.frame--open   { border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.frame--close  { border-left: 1px solid var(--gold); border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.frame--invert { background: var(--ink); }

@media (max-width: 640px) {
  .section { padding: 56px 18px; }
  .frame { padding: 40px 24px; }
}

/* ---------- Scroll cue ---------- */
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 7px); }
}
.scroll-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  animation: bob 2.4s ease-in-out infinite;
}
.scroll-cue svg { transition: transform .2s ease, stroke .2s ease; }
.scroll-cue:hover svg { transform: scale(1.25); stroke: var(--gold-hover); }

/* ---------- Buttons / links ---------- */
.btn {
  display: inline-block;
  color: var(--ink);
  border: 1px solid var(--gold);
  background: transparent;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  padding: 15px 42px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.btn:hover { background: rgba(194,162,94,.1); border-color: var(--gold-hover); color: var(--ink); }

/* ---------- Forms ---------- */
.field-label { display: block; font-weight: 500; font-size: 11px; letter-spacing: .14em; color: var(--muted-gold); margin-bottom: 8px; }
.field-input {
  border: none;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  padding: 8px 2px;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease;
  width: 100%;
}
.field-input::placeholder { color: var(--placeholder); }
.field-input:focus { border-bottom-color: var(--gold); }
.field-row { display: flex; gap: 24px; }
.field-row > * { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .field-row { flex-direction: column; gap: 20px; }
}
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
textarea.field-input { resize: none; padding-top: 8px; line-height: 1.5; }

.toggle-btn {
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--sepia);
  font-family: 'Karla', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .1em;
  padding: 10px 26px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.toggle-btn:hover { border-color: var(--gold); }
.toggle-btn.is-active { border-color: var(--gold); color: var(--ink); background: rgba(194,162,94,.14); }

.form-note { display: block; text-align: center; margin-top: 20px; font-weight: 400; font-size: 12px; color: var(--muted-gold); }
.form-status { display: none; text-align: center; margin-top: 20px; font-weight: 500; font-size: 13px; letter-spacing: .04em; }
.form-status.is-visible { display: block; }
.form-status.is-error { color: #a5443a; }
.form-status.is-success { color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px var(--gutter) 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
}
.site-footer .brand-mark img { height: 22px; }
.footer-note { font-size: 11px; letter-spacing: .06em; color: var(--muted-gold); }
.footer-note a { color: var(--muted-gold); border-bottom: 1px solid rgba(194,162,94,.4); }
.footer-note a:hover { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   Page-specific components
   ============================================================ */

/* ---------- Speakers grid ---------- */
.speaker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}
@media (max-width: 860px) { .speaker-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .speaker-grid { grid-template-columns: 1fr; gap: 18px; } }

.speaker-card {
  background: var(--card);
  padding: 14px 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border: none;
  width: 100%;
  font-family: inherit;
  transition: transform .2s ease;
}
.speaker-card:hover { transform: scale(1.03); }
.speaker-card:hover h3 { font-weight: 800; }
.speaker-photo-block { width: 100%; aspect-ratio: 1; background: var(--hairline); overflow: hidden; position: relative; }
.speaker-photo-block img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.speaker-name { margin: 16px 0 2px; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 18px; color: var(--ink); }
.speaker-title { font-weight: 500; font-size: 10.5px; letter-spacing: .08em; color: var(--sepia); text-align: center; }

.placeholder-card {
  background: transparent;
  border: 1px dashed var(--hairline);
  padding: 14px 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  transition: border-color .2s ease;
}
.placeholder-card:hover { border-color: var(--gold); }
.placeholder-card:hover .placeholder-photo svg { stroke: var(--gold); }
.placeholder-photo { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.placeholder-photo svg { transition: stroke .2s ease; }
.placeholder-name { margin: 16px 0 2px; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 18px; color: var(--placeholder); }
.placeholder-tag { font-weight: 500; font-size: 10.5px; letter-spacing: .08em; color: var(--placeholder); }

/* ---------- Stat rows ---------- */
.stat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--hairline); }
.stat-row.on-ink { border-top-color: rgba(194,162,94,.4); }
.stat-mini { text-align: center; }
.stat-mini .num { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 32px; color: var(--ink); }
.stat-mini .lbl { display: block; margin-top: 8px; font-weight: 500; font-size: 10.5px; letter-spacing: .1em; color: var(--muted-gold); }
.on-ink .stat-mini .num { color: var(--parchment); }
.on-ink .stat-mini .lbl { color: #a99d86; }

/* ---------- Sponsors feature grid ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 56px; row-gap: 28px; max-width: 680px; margin: 44px auto 0; padding-top: 34px; border-top: 1px solid var(--hairline); }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
.feature { text-align: left; }
.feature .head { font-weight: 500; font-size: 12px; letter-spacing: .1em; color: var(--ink); }
.feature .body { display: block; margin-top: 8px; font-family: 'Playfair Display', serif; font-weight: 400; font-size: 14.5px; line-height: 1.55; color: var(--sepia); }

/* ---------- Network grid (Who We Are) ---------- */
.network-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 40px; row-gap: 30px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 860px) { .network-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .network-grid { grid-template-columns: 1fr; } }
.person { text-align: center; }
.person .who-name {
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--parchment);
  transition: color .2s ease;
}
.person a.who-name:hover { color: var(--gold); font-weight: 800; }
.person .who-role { display: block; margin-top: 5px; font-weight: 400; font-size: 10.5px; letter-spacing: .06em; color: #a99d86; line-height: 1.4; }

/* ---------- Carousel (recent event) ---------- */
.carousel { position: relative; }
.carousel-track { position: relative; }
.carousel-slide { display: none; }
.carousel-slide.is-current { display: block; }
.carousel-slide img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; }
.carousel-btn { border: 1px solid var(--hairline); background: transparent; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s ease; }
.carousel-btn:hover { border-color: var(--gold); }
.carousel-counter { font-weight: 500; font-size: 11px; letter-spacing: .1em; color: var(--muted-gold); }

/* ---------- Speaker modals ---------- */
.modal-scrim {
  position: fixed; inset: 0;
  background: rgba(23,19,14,.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Extra top clearance (on top of the usual 44px) so a tall modal centered
     in the full viewport never rides up underneath the fixed site header —
     it should always sit clearly below it, never touching/overlapping it. */
  padding: calc(var(--header-h) + 24px) 44px 44px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 100;
}
.modal-scrim.is-open { opacity: 1; pointer-events: auto; }
body.modal-lock { overflow: hidden; }

.modal-spread { background: var(--parchment); width: 780px; max-width: 100%; max-height: min(680px, 85vh); position: relative; display: flex; flex-direction: row; gap: 44px; padding: 56px 52px; overflow-y: auto; box-shadow: 0 24px 64px rgba(23,19,14,.4); }
.modal-photo-col { flex: 0 0 240px; display: flex; flex-direction: column; }
.modal-photo-col .photo-frame { flex: 1; min-height: 220px; position: relative; overflow: hidden; background: var(--hairline); }
.modal-photo-col .photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modal-caption { flex-shrink: 0; background: var(--ink); padding: 18px 22px; }
.modal-caption .name { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 16px; color: var(--parchment); }
.modal-caption .title { display: block; margin-top: 5px; font-weight: 500; font-size: 10px; letter-spacing: .09em; color: var(--gold); }
.modal-text-col { flex: 1; min-width: 0; padding-top: 34px; display: flex; flex-direction: column; }
.modal-close-x { position: absolute; top: 20px; right: 24px; background: none; border: none; padding: 10px; cursor: pointer; display: flex; align-items: center; font-weight: 500; font-size: 10.5px; letter-spacing: .14em; color: var(--muted-gold); transition: color .2s ease; }
.modal-close-x:hover { color: var(--ink); }
/* The label sits to the left of the X, collapsed to nothing by default so it
   reads as just an X in the corner. On hover it widens open (revealing the
   word left-to-right, since the box is left-aligned and clipped on the
   right) while the button's fixed right edge holds the X in place — so the
   word appears to slide out from underneath it. */
.modal-close-x .close-label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .45s ease, opacity .3s ease;
}
.modal-close-x:hover .close-label { max-width: 60px; opacity: 1; margin-right: 8px; }
.modal-close-x .close-icon {
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  transition: transform .5s ease;
}
.modal-close-x:hover .close-icon { transform: rotate(360deg); }
@media (prefers-reduced-motion: reduce) {
  .modal-close-x:hover .close-label { transition: none; }
  .modal-close-x:hover .close-icon { transform: none; }
}
.modal-link { font-weight: 500; font-size: 11.5px; letter-spacing: .14em; color: var(--sepia); display: inline-block; border-bottom: 1px solid rgba(194,162,94,.5); padding-bottom: 3px; transition: color .2s ease, border-color .2s ease; }
.modal-link:hover { color: var(--ink); border-bottom-color: var(--gold); }
.modal-watch { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--ink); border: 1px solid var(--gold); background: transparent; font-weight: 500; font-size: 11.5px; letter-spacing: .14em; padding: 13px 26px; transition: background .2s ease, border-color .2s ease; }
.modal-watch:hover { background: rgba(194,162,94,.1); border-color: var(--gold-hover); }
/* Inert "coming soon" state (see initWatchTalkLinks in assets/main.js): no
   real destination yet, so it must not read as a live, clickable link. */
.modal-watch.is-disabled { cursor: default; opacity: .55; }
.modal-watch.is-disabled:hover { background: transparent; border-color: var(--gold); }

.soon-spread { background: var(--parchment); width: 420px; max-width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px; margin-left: auto; box-shadow: 0 24px 64px rgba(23,19,14,.4); }
.soon-spread svg { stroke: var(--gold); }
.soon-eyebrow { margin-top: 22px; font-weight: 500; font-size: 11px; letter-spacing: .18em; color: var(--gold); }
.soon-title { margin: 14px 0 0; font-family: 'Playfair Display', serif; font-weight: 800; font-size: 26px; color: var(--ink); }
.soon-body { margin: 16px 0 0; max-width: 300px; font-family: 'Playfair Display', serif; font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--sepia); }

@media (max-width: 760px) {
  .modal-scrim { padding: calc(var(--header-h) + 12px) 16px 16px; }
  .modal-spread { flex-direction: column; width: 100%; max-width: 100%; max-height: 100%; height: auto; padding: 40px 24px; gap: 24px; }
  .modal-photo-col { flex: 0 0 220px; }
  .soon-spread { width: 100%; max-width: 100%; }
}

/* ---------- Full-bleed ink panels (Thesis stat, Who We Are network) ---------- */
.panel-ink { background: var(--ink); }
.panel-ink .headline { color: var(--parchment); }
.panel-ink .lede { color: var(--muted-gold); }
.panel-ink .rule { background: rgba(194,162,94,.4); }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s cubic-bezier(.16,.84,.44,1), transform .6s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}