/**
 * Shikhin Agarwal speaker page — isolated styles.
 * Scoped under .speaker-page so nothing here collides with the shared
 * site chrome (header/footer/nav), which is styled by css/style.css.
 * Load order: css/style.css, then this file.
 */

.speaker-page {
  --sp-ink: #101923;
  --sp-muted: #53616d;
  --sp-line: #d8e0e5;
  --sp-paper: #ffffff;
  --sp-soft: #f3f7f8;
  --sp-teal: #0d6875;
  --sp-teal-bright: #77d3d7;
  --sp-navy: #0c2533;
  --sp-page: min(1180px, calc(100% - 48px));

  color: var(--sp-ink);
  background: var(--sp-paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

.speaker-page * {
  box-sizing: border-box;
}

.speaker-page a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.speaker-page a:focus-visible,
.speaker-page button:focus-visible {
  outline: 3px solid var(--sp-teal-bright);
  outline-offset: 4px;
}

.speaker-page .skip-link {
  position: absolute;
  top: -80px;
  left: 24px;
  z-index: 10;
  padding: 10px 16px;
  color: #fff;
  background: var(--sp-navy);
}

.speaker-page .skip-link:focus {
  top: 12px;
}

.speaker-page .hero,
.speaker-page .section,
.speaker-page .accountability,
.speaker-page .organizers {
  width: var(--sp-page);
  margin-inline: auto;
}

.speaker-page .hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr);
  gap: 72px;
  /* top padding matches css/style.css's own .hero { padding-top: 140px }
     convention — the site's real header is position:fixed with no space
     reserved for it in normal flow, so every page's hero has to clear it
     itself. Without this, the eyebrow line sits underneath the fixed
     header on load (invisible until you scroll it fully out of view). */
  padding: 140px 0 76px;
  align-items: start;
}

.speaker-page .eyebrow {
  margin: 0 0 16px;
  color: var(--sp-teal);
  font-size: 13px;
  font-weight: 780;
  letter-spacing: 0.11em;
  line-height: 1.3;
  text-transform: uppercase;
}

.speaker-page .eyebrow.light {
  color: var(--sp-teal-bright);
}

.speaker-page h1,
.speaker-page h2,
.speaker-page h3,
.speaker-page p {
  margin-top: 0;
}

.speaker-page h1 {
  margin-bottom: 8px;
  font-size: clamp(52px, 7vw, 86px);
  font-weight: 760;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.speaker-page .hero-statement {
  max-width: 720px;
  margin: 24px 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3.7vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.speaker-page .hero-detail {
  max-width: 690px;
  color: var(--sp-muted);
  font-size: 18px;
}

.speaker-page .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.speaker-page .button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 19px;
  font-size: 15px;
  font-weight: 740;
  text-decoration: none;
}

.speaker-page .button.primary {
  color: #fff;
  background: var(--sp-teal);
}

.speaker-page .button.secondary {
  border: 1px solid var(--sp-ink);
}

.speaker-page .proof {
  padding-left: 26px;
  border-left: 3px solid var(--sp-teal);
}

.speaker-page .proof-portrait {
  width: min(100%, 320px);
  margin: 0 0 28px;
  overflow: hidden;
  background: var(--sp-soft);
}

.speaker-page .proof-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 35%;
}

.speaker-page .proof-label {
  margin-bottom: 4px;
  color: var(--sp-muted);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.speaker-page .proof dl,
.speaker-page .proof dd {
  margin: 0;
}

.speaker-page .proof dl > div {
  padding: 18px 0;
  border-bottom: 1px solid var(--sp-line);
}

.speaker-page .proof dt {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.speaker-page .proof dd {
  margin-top: 5px;
  color: var(--sp-muted);
  font-size: 14px;
  line-height: 1.45;
}

.speaker-page .section {
  padding: 84px 0;
  border-top: 1px solid var(--sp-line);
}

.speaker-page .section-intro {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
  column-gap: 56px;
  align-items: start;
}

.speaker-page .section-intro .eyebrow {
  grid-column: 1;
}

.speaker-page .section-intro h2,
.speaker-page .section-intro > p:not(.eyebrow) {
  grid-column: 2;
}

.speaker-page h2 {
  margin-bottom: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.speaker-page .section-intro > p:not(.eyebrow) {
  max-width: 670px;
  color: var(--sp-muted);
}

.speaker-page .topic-list {
  margin-top: 54px;
  border-top: 1px solid var(--sp-ink);
}

.speaker-page .topic {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 28px;
  padding: 34px 0;
  border-bottom: 1px solid var(--sp-line);
}

.speaker-page .topic-number {
  color: var(--sp-teal);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.speaker-page .topic h3 {
  margin: 0 0 4px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.speaker-page .topic-subtitle {
  margin-bottom: 12px;
  color: var(--sp-teal);
  font-weight: 700;
}

.speaker-page .topic div > p:not(.topic-subtitle, .best-for) {
  max-width: 760px;
  color: var(--sp-muted);
}

.speaker-page .best-for {
  margin-bottom: 0;
  color: var(--sp-ink);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.speaker-page .accountability {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 72px;
  padding: 76px;
  color: #fff;
  background: var(--sp-navy);
}

.speaker-page .accountability h2 {
  margin-bottom: 16px;
}

.speaker-page .accountability p:not(.eyebrow) {
  color: #c7d4da;
}

.speaker-page .accountability a {
  color: #fff;
  font-weight: 700;
}

.speaker-page .chain {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.speaker-page .chain li {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 17px;
  font-weight: 720;
}

.speaker-page .chain span {
  color: var(--sp-teal-bright);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.speaker-page .speaking-grid,
.speaker-page .about-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
  gap: 70px;
  margin-top: 40px;
}

.speaker-page .speaking-grid > div:first-child,
.speaker-page .about-copy {
  color: var(--sp-muted);
}

.speaker-page .evidence-links {
  border-top: 1px solid var(--sp-ink);
}

.speaker-page .evidence-links a {
  display: flex;
  flex-direction: column;
  padding: 18px 2px;
  border-bottom: 1px solid var(--sp-line);
  color: var(--sp-muted);
  font-size: 14px;
  text-decoration: none;
}

.speaker-page .evidence-links span {
  color: var(--sp-ink);
  font-size: 17px;
  font-weight: 760;
}

.speaker-page .about-copy {
  grid-template-columns: repeat(2, 1fr);
}

.speaker-page .organizers {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  gap: 70px;
  align-items: end;
  padding: 70px 76px;
  color: #fff;
  background: var(--sp-teal);
}

.speaker-page .organizers h2 {
  max-width: 760px;
}

.speaker-page .organizers p:not(.eyebrow) {
  max-width: 730px;
  margin-bottom: 0;
  color: #e0f0f1;
}

.speaker-page .organizer-action {
  text-align: right;
}

.speaker-page .button.inverse {
  color: var(--sp-ink);
  background: #fff;
}

.speaker-page .organizer-action p {
  margin-top: 12px;
  font-size: 14px;
}

@media (max-width: 860px) {
  .speaker-page {
    --sp-page: min(100% - 32px, 700px);
  }

  .speaker-page .hero,
  .speaker-page .section-intro,
  .speaker-page .accountability,
  .speaker-page .speaking-grid,
  .speaker-page .about-copy,
  .speaker-page .organizers {
    grid-template-columns: 1fr;
  }

  .speaker-page .hero {
    gap: 50px;
    padding: 140px 0 62px;
  }

  .speaker-page .proof-portrait {
    width: min(68vw, 320px);
  }

  .speaker-page .section {
    padding: 64px 0;
  }

  .speaker-page .section-intro h2,
  .speaker-page .section-intro > p:not(.eyebrow) {
    grid-column: 1;
  }

  .speaker-page .accountability,
  .speaker-page .organizers {
    gap: 42px;
    padding: 52px 34px;
  }

  .speaker-page .organizer-action {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .speaker-page {
    font-size: 16px;
  }

  .speaker-page h1 {
    font-size: 48px;
  }

  .speaker-page .hero-statement {
    font-size: 30px;
  }

  .speaker-page .topic {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
  }

  .speaker-page .chain {
    grid-template-columns: repeat(2, 1fr);
  }
}