/* ==========================================================================
   TEDxSavyon — styles.css
   ==========================================================================
   EDIT ME: every color, font and size the site uses is defined once below.
   Change a value here and the whole site follows.
   ========================================================================== */

:root {
  /* ----- Colors ----- */
  --color-accent:        #E62B1E;  /* TEDx red: nav, headings, buttons, dates */
  --color-hero-bg:       #000000;  /* hero background */
  --color-band-dark:     #242323;  /* organizer section + footer */
  --color-band-video:    #2F2E2E;  /* video strip background */
  --color-bg-light:      #FAFAFA;  /* light gray sections (intro, speakers) */
  --color-bg-white:      #FFFFFF;  /* white sections (partners) */
  --color-heading:       #1C1616;  /* dark headings on light background */
  --color-body:          #414141;  /* paragraph text on light background */
  --color-inverse:       #FAFAFA;  /* text on dark backgrounds */
  --color-inverse-soft:  #D6D6D6;  /* soft gray on dark backgrounds */

  /* ----- Fonts (loaded from Google Fonts in the HTML) ----- */
  --font-heading: 'Inter', 'Helvetica Neue', Arial, sans-serif;      /* original: Helvetica (light cut = weight 300, bold cut = 700) */
  --font-body:    'Montserrat', 'Segoe UI', sans-serif;              /* original: Proxima Nova */
  --font-2020:    'Nasalization', 'Inter', sans-serif;               /* the site's own uploaded font (2020-era nav, hero, jumps) */

  /* ----- Type scale ----- */
  --size-title-big:   60px;  /* "Our Partners" / "Our Speakers" */
  --size-title-mid:   40px;  /* "Partners in kind" / organizer heading */
  --size-video-title: 25px;
  --size-speaker-name: 22px;
  --size-body:        20px;  /* intro paragraphs */
  --size-small:       15px;

  /* ----- Layout ----- */
  --container:       980px;
  --hero-height:     699px;
  --radius-btn:        6px;

  /* ----- Spacing scale ----- */
  --space-sm: 16px;
  --space-md: 28px;
  --space-lg: 48px;
  --space-xl: 72px;
}

/* The font the original site uploaded to Wix (Nasalization Regular — freeware, Typodermic).
   Used on the 2020-era pages: menu, UNLIMITED FUTURE title, jump links. */
@font-face {
  font-family: 'Nasalization';
  src: url("fonts/tedx-2020.woff2") format("woff2"),
       url("fonts/tedx-2020.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-bg-white);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

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

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  height: var(--hero-height);
  background: var(--color-hero-bg);
  overflow: hidden;
}
.hero .container {
  position: relative;
  height: 100%;
  z-index: 20;
  padding: 0;           /* hero content sits on the grid edge, like the original */
}

/* the original cover graphic (the X): anchored to the centered 980 grid */
.hero-cover {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -186px;  /* grid center + 304.5 from grid left, like the original */
  width: 832px;
  height: 699px;
  object-fit: cover;
  z-index: 10;
}

/* --- Nav --- */
.nav { padding-top: 44px; }
.nav-list {
  display: flex;
  gap: 30px;
  list-style: none;
}
.hero .nav-list { padding-left: 4px; }   /* the original home menu starts 4px in from the grid edge */
.nav-list a {
  font: 700 18px var(--font-heading);   /* the original menu uses the Helvetica BOLD cut */
  color: var(--color-accent);
  text-decoration: none;
}
.nav-list a:hover { opacity: .75; }
.nav-toggle { display: none; }

/* --- Logo + theme + date --- */
.logo { margin-top: 58px; }
.logo-img {
  width: 432px;
  height: auto;
  margin-left: -50px;   /* the logo art pokes left of the text column */
}
.theme-img {
  margin-top: 13px;
  width: 340px;
  height: auto;
}
.hero-date {
  margin-top: 14px;
  margin-left: 4px;
  font: 700 34px var(--font-heading);
  letter-spacing: 1.7px;
  color: var(--color-accent);
}

/* --- CTA button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 257px;
  height: 42px;
  margin-top: 70px;
  background: var(--color-accent);
  color: #fff;
  font: 400 16px var(--font-body);
  text-decoration: none;
  border-radius: var(--radius-btn);
}
.btn:hover { background: #c8220f; }

/* --- Social icons --- */
.social-row {
  position: absolute;
  left: 0;
  bottom: 45px;
  display: flex;
  gap: 10px;
}
.social-row a { display: block; width: 39px; height: 39px; }
.social-row a:hover { opacity: .8; }

/* ==========================================================================
   INTRO (theme statement)
   ========================================================================== */
.intro {
  background: var(--color-bg-light);
  padding: 36px 0 58px;
  text-align: center;
}
.intro-chevron {
  margin: 0 auto 37px;
  width: 35px;
  height: 19px;
  stroke: #333;
}
.intro-title {
  font: 700 22px var(--font-heading);
  color: var(--color-accent);
}
.intro p {
  max-width: 780px;   /* wide enough for Inter to keep the original's line count */
  margin: 27px auto 0;
  font: 300 var(--size-body)/1.5 var(--font-heading);   /* original: Helvetica LIGHT cut */
  color: var(--color-body);
}
.intro p.intro-closing { margin-top: 35px; font-weight: 700; }

/* ==========================================================================
   PARTNERS (main sponsors)
   ========================================================================== */
.partners {
  background: var(--color-bg-white);
  padding: 36px 0 19px;
}
.section-title {
  font: 300 var(--size-title-big)/1.23 var(--font-heading);  /* original: Helvetica LIGHT cut, 74px line pitch */
  color: var(--color-heading);
}
.section-title .accent { font-weight: 700; }
.partners-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 56px;
  margin-top: 36px;
}
.partners-logos a { display: block; }
.partners-logos a:hover { opacity: .85; }

/* ==========================================================================
   VIDEOS (talks strip)
   ========================================================================== */
.videos {
  background: var(--color-band-video);
  padding: 47px 0 36px;
}
/* The original Wix gallery: always a 4-slot row (home fills 3 of them), left margin 104,
   right margin 119; below ~1323px the tiles stop shrinking at 275px and overflow right,
   exactly like the fixed-width original. */
.container--videos { max-width: none; margin: 0 104px; padding: 0; }
@media (max-width: 1322px) and (min-width: 901px) {
  .container--videos { width: 1100px; margin-right: 0; }
}
.videos-label {
  font: 300 14px var(--font-heading);   /* original: Helvetica LIGHT cut */
  color: var(--color-inverse);
  margin: 0 0 19px 16px;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 slots like the original widget */
  gap: 0;
  row-gap: 50px;                          /* multi-row strips breathe like the 2020 page */
}
.video-thumb {
  position: relative;
  display: block;
  text-decoration: none;
}
.video-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 352 / 198;
  object-fit: cover;
}
.video-thumb:hover { opacity: .88; }
.video-time {
  position: absolute;
  right: 2px;
  bottom: 7px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font: 400 12px var(--font-heading);   /* original: Helvetica Neue 55 Roman (regular, not bold) */
}
.video-text { padding: 0 20px; }
.video-title {
  margin-top: 24px;
  font: 700 var(--size-video-title)/1.1 var(--font-heading);
  color: var(--color-inverse);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-desc {
  margin-top: 10px;
  font: 300 15px/1.1 var(--font-heading);   /* original: Helvetica LIGHT cut */
  color: var(--color-inverse);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Click-to-play overlay (the original opens a full-screen player instead of leaving the page) */
.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-overlay iframe {
  width: min(1128px, 86vw);
  aspect-ratio: 16 / 9;
  border: 0;
}
.video-overlay-close {
  position: absolute;
  top: 18px;
  right: 26px;
  background: none;
  border: 0;
  color: #fff;
  font: 400 40px/1 var(--font-heading);
  cursor: pointer;
  padding: 4px 10px;
}
.video-overlay-close:hover { opacity: .7; }

/* ==========================================================================
   SPEAKERS
   ========================================================================== */
.speakers {
  background: var(--color-bg-light);
  padding: 91px 0 70px;
}
.speakers-hint {
  margin-top: 20px;
  font: 400 17px var(--font-heading);
  color: var(--color-body);
}
.speakers-row {
  display: grid;
  gap: 10px;
  margin: 33px auto 0;
  padding: 0 24px;
}
.speakers-row--three {
  grid-template-columns: repeat(3, 1fr);
  max-width: 978px;
}
.speakers-row--four {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1298px;
  margin-top: 38px;
}
.speaker a { display: block; }
.speaker a:hover { opacity: .85; }
.speaker img { width: 100%; height: auto; }
.speaker figcaption {
  margin-top: 26px;
  text-align: center;
  font: 700 var(--size-speaker-name) var(--font-heading);
  color: var(--color-accent);
}

/* ==========================================================================
   PARTNERS IN KIND
   ========================================================================== */
.inkind {
  background: var(--color-bg-white);
  padding: 51px 0 0;
}
.inkind-title {
  font: 700 var(--size-title-mid) var(--font-heading);
  color: var(--color-accent);
}
.inkind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  gap: 20px 40px;   /* the original places these freely; 20px keeps the block the same height */
  max-width: 940px;
  margin-top: 37px;
  margin-left: -16px;
}
.inkind-grid a:hover { opacity: .85; }

/* ==========================================================================
   ORGANIZER (team)
   ========================================================================== */
.organizer {
  background: var(--color-band-dark);
  padding: 47px 0 51px;
}
.organizer-grid {
  display: grid;
  grid-template-columns: 585px 1fr;   /* a touch wider than the original 560 so Inter keeps the line count */
  column-gap: 55px;
}
.organizer-heading {
  font: 300 var(--size-title-mid)/1.22 var(--font-heading);   /* original: light cut, roman red accents */
  color: var(--color-inverse);
}
.organizer-heading .accent { font-weight: 400; }
.organizer-name {
  margin-top: 19px;
  font: 300 var(--size-title-mid)/1.22 var(--font-heading);
  color: var(--color-inverse);
}
.organizer-text p {
  margin-top: 27px;
  font: 300 17px/1.4 var(--font-heading);
  color: #fff;
}
.organizer-text a { color: #fff; }
.organizer-photo {
  justify-self: end;
  align-self: start;
  margin-top: 182px;
  margin-right: 13px;
  background: #fff;
  padding: 6px 6px 38px;   /* polaroid-style white frame */
}
.organizer-photo img { width: 267px; height: 287px; object-fit: cover; }

/* ==========================================================================
   LOCATION (map + venue photo)
   ========================================================================== */
.location {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* true halves — the 661px map may overflow its half, like the original */
  gap: 0;
  background: var(--color-bg-light);
}
.location-map { overflow: visible; }
.location-map iframe {
  width: 661px;   /* fixed width, centered in the left half — overflows on narrow windows, like the original */
  max-width: none;
  height: 400px;
  border: 0;
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);   /* true centering even when wider than the half (flex clamps the overflow) */
}
.location-photo img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--color-band-dark);
  padding: 32px 0 21px;
  text-align: center;
}
.footer p {
  font: 400 14px var(--font-heading);
  color: var(--color-inverse);
}
.footer .heart { color: #fff; }

/* ==========================================================================
   MOBILE (the original is a fixed-width Wix page; this build adapts)
   ========================================================================== */
@media (max-width: 900px) {
  .hero {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .hero .container { height: auto; padding: 0 24px 32px; }

  /* burger menu */
  .nav { padding-top: 20px; }
  .nav-toggle {
    display: block;
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 40;
    background: none;
    border: 0;
    width: 48px;              /* 48px thumb target */
    height: 48px;
    padding: 8px 11px;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    margin: 5px 0;
    background: var(--color-accent);
  }
  .nav-list {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 16px 0 4px;
  }
  .nav.open .nav-list { display: flex; }
  .nav-list a { display: inline-flex; align-items: center; min-height: 48px; }  /* 48px tap rows */

  .logo { margin-top: 28px; }
  .logo-img { width: 320px; margin-left: 0; }
  .theme-img { width: 270px; }
  .hero-date { font-size: 28px; }
  .btn { margin-top: 36px; min-height: 48px; }
  .btn-dark { min-height: 48px; }
  .video-overlay-close { width: 48px; height: 48px; padding: 0; }
  .social-row { position: static; margin-top: 32px; }
  .social-row a { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
  .contact-mail, .jump20 a { min-height: 48px; align-items: center; }
  .jump20 a { display: inline-flex; }

  .hero-cover {
    position: relative;
    left: 0;
    margin-left: 0;
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 832 / 699;
  }

  .section-title { font-size: 40px; }
  .intro p { font-size: 18px; }

  .container--videos { margin: 0; padding: 0 16px; width: auto; }
  .videos-label { margin-left: 0; }
  /* two columns of talk cards, like every card grid on mobile */
  .video-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
  .video-card:last-child:nth-child(odd) { grid-column: span 2; }
  .video-text { padding: 0; }
  .video-title { font-size: 17px; line-height: 1.2; margin-top: 12px; }
  .video-desc { font-size: 13px; line-height: 1.25; margin-top: 6px; }

  .speakers { padding: 64px 0 72px; }
  .speakers-row--three,
  .speakers-row--four { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
  .speakers-row--four { margin-top: 44px; }
  .speaker figcaption { font-size: 18px; margin-top: 14px; }
  .speakers-row .speaker:last-child:nth-child(odd) { grid-column: span 2; }

  .inkind-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-left: 0;
    gap: 32px 20px;
  }
  .inkind-grid > :last-child:nth-child(odd) { grid-column: span 2; }

  .organizer-grid { grid-template-columns: 1fr; }
  .organizer-photo {
    margin: 40px auto 0;
    justify-self: center;
  }

  .location { grid-template-columns: 1fr; gap: 16px; }
  .location-map iframe { width: 100%; max-width: 100%; }
  .location-map iframe, .location-photo img { height: 280px; }
}

/* ==========================================================================
   GATEWAY (the new main page): pick an event — 22.2.22 or 02.01.20
   ========================================================================== */
.gate-body { background: #000; }
.gate {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 40px 24px 56px;
}
.gate-logo { width: 380px; height: auto; }
.gate-cards {
  display: flex;
  gap: 56px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}
.gate-card {
  display: block;
  text-decoration: none;
  text-align: center;
}
.gate-card img {
  width: 440px;
  max-width: 82vw;
  height: 400px;
  object-fit: cover;
  display: block;
  transition: transform .25s ease, opacity .25s ease;
}
.gate-card:hover img { transform: scale(1.02); opacity: .88; }
.gate-card:nth-child(2) img { object-position: 92% 50%; }   /* the X in hero-2020.jpg sits at ~71% — this centers it in the card */
.gate-date {
  display: block;
  margin-top: 22px;
  font: 700 34px var(--font-heading);
  letter-spacing: 1.7px;
  color: var(--color-accent);
}
.gate-date--20 { font: 400 34px var(--font-2020); letter-spacing: 1px; }
@media (max-width: 900px) {
  .gate { gap: 32px; }
  .gate-logo { width: 280px; }
  /* both event choices visible side by side, like every card grid on mobile */
  .gate-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; width: 100%; max-width: 480px; }
  .gate-card img { width: 100%; max-width: none; height: 170px; }
  .gate-date { font-size: 28px; margin-top: 12px; }
}

/* ==========================================================================
   SUB-PAGES — shared header (black), 2020 header (white+strip), contact band
   ========================================================================== */
.subhero {
  position: relative;
  height: 397px;
  background: #000;
  overflow: hidden;
}
.subhero .container { position: relative; height: 100%; }
.subhero-logo { position: absolute; top: 31px; left: 0; display: block; }
.subhero .nav { position: absolute; top: 60px; right: 49px; padding-top: 0; }
.subhero-title {
  position: absolute;
  top: 207px;
  left: 24px;
  font: 300 60px/1.23 var(--font-heading);   /* original: Helvetica LIGHT cut */
  color: #fff;
  z-index: 5;
}
.subhero-title .accent { font-weight: 700; }
.subhero-x { position: absolute; right: -36px; bottom: 0; width: 352px; height: 227px; z-index: 1; }
.subhero--sp .subhero-x { right: 0; }

/* white header + photo strip (2020-era template) */
.head20-bar {
  position: relative;
  height: 216px;
}
.head20-logo { position: absolute; top: 24px; left: 21px; width: 379px; height: 147px; }
.head20-bar .nav { position: absolute; top: 78px; right: 32px; padding-top: 0; }
.nav--dark .nav-list { gap: 26px; }   /* was 44 with five items; six items at 44 run onto the logo */
.nav--dark .nav-list a { font-family: var(--font-2020); color: #000; font-weight: 400; font-size: 15px; }
/* mentors page: tighter bar, like the original */
.head20--mn .head20-bar { height: 193px; }
.head20--mn .head20-logo { top: 0; left: 0; }
.head20--mn .head20-bar .nav { top: 52px; }
/* narrow desktop band: the bar can't hold logo + six menu items side by side — stack them */
@media (max-width: 990px) and (min-width: 901px) {
  .head20-bar, .head20--mn .head20-bar { height: auto; padding: 16px 24px 10px; }
  .head20-logo, .head20--mn .head20-logo { position: static; }
  .head20-bar .nav, .head20--mn .head20-bar .nav { position: static; padding-top: 8px; }
}

.strip20 {
  background: #000 url("images/strip-x.jpg") center/cover no-repeat;
  height: 229px;
}
.strip20 .container { position: relative; height: 100%; }
.strip20-title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 21px;
  margin-top: -7px;                          /* two-line titles sit 7px above center in the original */
  font: 300 60px/1.23 var(--font-heading);   /* original: Helvetica LIGHT cut */
  color: #fff;
}
.strip20-title .accent { font-weight: 700; }
.strip20-title--big { font-size: 60px; margin-top: 0; }

/* contact band */
.contact { background: var(--color-heading); padding: 42px 0 94px; }
.contact-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 13px;
  margin-left: 8px;
  flex-wrap: wrap;
}
.contact-title { font: 700 80px/1.1 var(--font-heading); color: #fff; }
.contact-mail {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 26px var(--font-heading);
  color: #fff;
  margin-bottom: 14px;
}
.contact-mail img { width: 27px; height: 19px; }
.contact-mail svg { width: 36px; height: 36px; fill: #fff; }
.contact-mail a { color: #fff; text-decoration: none; }
.contact-mail a:hover { color: var(--color-inverse-soft); }
.contact--20 .contact-row { margin-left: 76px; }
.contact--20 .contact-mail { font-size: 40px; font-weight: 300; margin-left: -28px; margin-bottom: 17px; }
.contact--20 .contact-mail img { width: 51px; height: 35px; }
.contact--20 { padding-bottom: 171px; }
.contact-fb a { display: inline-flex; align-items: center; gap: 10px; }
.contact-fb img { width: 36px; height: 36px; }
.contact--20 .contact-fb img { width: 42px; height: 42px; }
.contact-license {
  margin-top: 102px;
  text-align: center;
  font: 400 15px var(--font-heading);
  color: #fff;
}
.contact-hr {
  border: 0;
  border-top: 1px solid #fff;
  max-width: 284px;
  margin: 13px auto;
}
.contact-credit {
  text-align: center;
  font: 400 14px var(--font-heading);
  color: var(--color-inverse);
}

/* ==========================================================================
   BIO BLOCKS (speakers / speakers2020 / mentors)
   ========================================================================== */
.bio-list { padding: 60px 0 40px; background: #fff; }
.bio {
  display: grid;
  grid-template-columns: 320px 1fr;
  column-gap: 92px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: start;
}
.bio-photo { width: 320px; height: 348px; object-fit: cover; }   /* the original crops every bio photo to 320x348 */
.bio-text { width: 550px; max-width: none; }   /* ~30px wider than the 520px track so Inter keeps the original line count */
.bio-text h2 { margin-top: -14px; font: 400 40px/1.2 var(--font-heading); color: var(--color-body); }  /* the original name sits 14px above the photo top */
.bio-list--s20 .bio-text h2, .bio-list--mn .bio-text h2 { margin-top: 0; }   /* only the 2022 page raises the name */
.bio-text p { margin-top: 19px; font: 400 17px/1.4 var(--font-heading); color: var(--color-body); }   /* original: 23.8px lines */
.bio-text a { color: var(--color-body); }
.bio-sep {
  border: 0;
  height: 2px;
  background: var(--color-accent);
  max-width: 840px;
  margin: 62px auto;
}
/* per-page rhythm, measured off the original (each bio block breathes differently) */
.bio-list--sp22 { padding: 103px 0 272px; }
.bio-list--sp22 .bio-sep:nth-of-type(1) { margin: 119px auto 76px; }
.bio-list--sp22 .bio-sep:nth-of-type(2) { margin: 32px auto 78px; }
.bio-list--sp22 .bio-sep:nth-of-type(3) { margin: 34px auto 84px; }
.bio-list--sp22 .bio-sep:nth-of-type(4) { margin: 61px auto 44px; }
.bio-list--sp22 .bio-sep:nth-of-type(5) { margin: 47px auto 42px; }
.bio-list--sp22 .bio-sep:nth-of-type(6) { margin: 42px auto 42px; }
.bio-list--s20 { padding: 312px 0 77px; }
.bio-list--s20 .bio-text p { line-height: 1.2; }   /* the 2020 bios use ~20px lines, unlike the 2022 page's 23.8px */
.bio-list--s20 .bio-text { width: 540px; }
.bio-list--s20 .bio-sep:nth-of-type(1) { margin: 88px auto 104px; }
.bio-list--s20 .bio-sep:nth-of-type(2) { margin: 77px auto 107px; }
.bio-list--s20 .bio-sep:nth-of-type(3) { margin: 38px auto 112px; }
.bio-list--s20 .bio-sep:nth-of-type(4) { margin: 67px auto 120px; }
.bio-list--s20 .bio-sep:nth-of-type(5) { margin: 71px auto 119px; }
.bio-list--s20 .bio-sep:nth-of-type(6) { margin: 50px auto 99px; }
.bio-list--s20 .bio-sep:nth-of-type(7) { margin: 18px auto 124px; }
.bio-list--s20 .bio-sep:nth-of-type(8) { margin: 121px auto 123px; }
.bio-list--mn { padding: 58px 0 200px; }
.bio-list--mn .bio-text p { line-height: 1.2; }
.bio-list--mn .bio-text { width: 540px; }
.bio-list--mn .bio-sep:nth-of-type(1) { margin: 325px auto 116px; }
.bio-list--mn .bio-sep:nth-of-type(2) { margin: 126px auto 113px; }
.bio-list--mn .bio-sep:nth-of-type(3) { margin: 86px auto 138px; }
.bio-list--mn .bio-sep:nth-of-type(4) { margin: 144px auto 123px; }
.bio-list--mn .bio-sep:nth-of-type(5) { margin: 154px auto 112px; }

/* ==========================================================================
   TEAM PAGE
   ========================================================================== */
.team-block { padding: 20px 0 40px; background: var(--color-bg-light); }
.team-block--gray { background: #F0F0F0; }
.team-block--liat { padding-top: 48px; }
/* per-block padding, tuned so every name lands where the original renders it */
.team-block:nth-of-type(1) { padding-bottom: 82px; }
.team-block:nth-of-type(2) { padding-top: 0; padding-bottom: 0; }
.team-block:nth-of-type(3) { padding-top: 0; padding-bottom: 0; }
.team-block:nth-of-type(4) { padding-top: 12px; padding-bottom: 44px; }
.team-block:nth-of-type(5) { padding-top: 20px; padding-bottom: 0; }
.team-grid {
  display: grid;
  grid-template-columns: 663px 1fr;   /* original 602 — wider so Inter keeps the original line count */
  column-gap: 10px;
  align-items: start;
}
.team-lead { font: 300 50px/1.24 var(--font-heading); color: var(--color-band-dark); margin-bottom: 44px; }  /* original: light cut, roman accents */
.team-lead .accent { font-weight: 400; }
.team-name { font: 300 45px/1.22 var(--font-heading); color: var(--color-band-dark); }
.team-text p { margin-top: 20px; font: 400 17px/1.4 var(--font-heading); color: var(--color-body); }
.team-text a { color: var(--color-body); }
.team-text .tm-logo { margin-top: 26px; }
.frame {
  justify-self: end;
  background: #fff;
  padding: 6px 6px 36px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.team-grid .frame { margin-top: 74px; margin-right: 29px; }
.team-block--liat .frame { margin-top: 236px; }
.crew { background: var(--color-bg-white); padding: 42px 0 45px; }
.crew-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  row-gap: 27px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}
.crew-card { text-align: center; }
.crew-card .frame { display: inline-block; justify-self: auto; }
.crew-name { margin-top: 12px; font: 300 22px var(--font-heading); color: var(--color-accent); }   /* original: light cut */
.crew-role { margin-top: 5px; font: 300 20px var(--font-heading); color: #323232; }

/* ==========================================================================
   EDUCATION PAGE
   ========================================================================== */
.edu { background: var(--color-bg-light); padding: 82px 0 105px; }
.edu .container { padding: 0; }
.edu-grid { display: grid; grid-template-columns: 490px 1fr; column-gap: 50px; }
.edu-title { font: 700 50px/1.24 var(--font-heading); color: var(--color-heading); width: 540px; }
.edu-rule { border: 0; border-top: 3px solid var(--color-accent); width: 334px; margin: 39px 0 0; }
.edu-text p.edu-lead { margin-top: 34px; font: 700 24px/1.2 var(--font-heading); color: var(--color-body); }
.edu-text p { margin-top: 22px; font: 400 18px/1.28 var(--font-heading); color: var(--color-body); }
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 344px;
  height: 40px;
  margin-top: 50px;
  background: #323232;
  color: #fff;
  font: 400 15px var(--font-heading);
  text-decoration: none;
  border-radius: 6px;
}
.btn-dark:hover { background: #4a4a4a; }
.edu-fb { margin-top: 16px; gap: 10px; }
.edu-photo { margin-top: 269px; width: 534px; max-width: none; height: 353px; object-fit: cover; justify-self: end; margin-right: -95px; }

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-body { background: #fff; padding: 115px 0 100px; }
.about-big { font: 300 50px/1.1 var(--font-heading); color: var(--color-heading); }  /* original: light cut */
.about-big .accent { font-weight: 700; }
.about-rule { border: 0; border-top: 3px solid var(--color-accent); width: 169px; margin: 23px 0 0; }
.about-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 0;
  margin-top: 65px;
}
.about-row:first-of-type { margin-top: 40px; }
.about-label { font: 700 35px/1.18 var(--font-heading); color: var(--color-heading); }
.about-col h3 { font: 700 30px var(--font-heading); color: var(--color-heading); }
.about-col p { margin-top: 24px; font: 300 20px/1.25 var(--font-heading); color: var(--color-body); max-width: 640px; }  /* original: light cut, 25px lines */
.about-col h3 + p { margin-top: 17px; }
.about-col .btn-dark { width: 321px; margin-top: 44px; }
.about-div { border: 0; border-top: 1px solid #999997; max-width: 683px; margin: 39px 0 0 220px; }

/* ==========================================================================
   2021 (2020 EVENT) PAGE
   ========================================================================== */
.hero20 {
  position: relative;
  height: 666px;
  background: #000 url("images/hero-2020.jpg") center/cover no-repeat;
  overflow: hidden;
}
.hero20 .container { position: relative; height: 100%; padding: 0; }
.hero20 .nav { padding-top: 45px; margin-left: -29px; }   /* the original 2020 menu starts 29px left of the grid */
.nav--20 .nav-list a { font-family: var(--font-2020); color: #FAFAFA; font-weight: 400; font-size: 15px; }
.hero20-logo { display: block; margin: 47px 0 0 -50px; width: 432px; }
.hero20-title {
  margin-top: 42px;
  font: 400 30px/1.2 var(--font-2020);
  color: #fff;
}
.hero20 .btn { margin-top: 28px; }
.hero20 .social-row { position: absolute; left: 0; top: 458px; }
.intro--20 { padding-bottom: 40px; }
.intro--20 p { color: var(--color-heading); font-weight: 300; line-height: 1.25; margin-top: 25px; max-width: 760px; }  /* original: light cut, 25px lines; a bit wider so Inter keeps the original line count */
.when20 { background: var(--color-bg-light); padding: 18px 0 77px; text-align: center; }
.when20-box {
  max-width: 780px;
  margin: 0 auto;
  padding: 58px 0 47px;
  border-top: 5px solid var(--color-accent);
  border-bottom: 5px solid var(--color-accent);
}
.when20-cols {
  display: grid;
  grid-template-columns: 234px 1fr;   /* measured off the original: date column 234, gap 57 */
  column-gap: 57px;
  padding-left: 20px;
}
.when20-cols p { white-space: nowrap; }   /* Inter runs wider than the original Helvetica — keep the lines whole */
.when20-date p:first-child { font: 700 60px/72px var(--font-heading); color: var(--color-heading); }
.when20-date p:last-child { margin-top: 24px; font: 700 43px/51px var(--font-heading); color: var(--color-heading); }
.when20-place { text-align: left; }
.when20-place p:first-child { font: 700 52px/62px var(--font-heading); color: var(--color-heading); }
.when20-place p:last-child { margin-top: 28px; font: 700 52px/62px var(--font-heading); color: var(--color-heading); }
.when20-box .btn { margin-top: 63px; }
.jump20 { position: relative; height: 21px; margin-top: 47px; }
.jump20 a {
  position: absolute;
  top: 0;
  font: 400 15px var(--font-2020);
  color: var(--color-accent);
  text-decoration: none;
}
.jump20 a:nth-child(1) { left: 107px; }
.jump20 a:nth-child(2) { left: 396px; }
.jump20 a:nth-child(3) { left: 676px; }
.jump20 a:hover { opacity: .75; }
.spacer20 { padding: 82px 0 83px; background: var(--color-bg-light); }
.embed20 { display: block; width: 778px; max-width: calc(100% - 48px); height: 452px; border: 0; margin-left: calc(50% - 390px); }  /* anchored to the 980 grid + 100px, like the original player */
.videos--20 { padding-bottom: 51px; }
.videos--20 .video-grid { row-gap: 50px; }
.videos--20 .video-thumb img { aspect-ratio: 275 / 155; }
/* 2022 strip: 7 talks — a row of 4, then a full-width row of 3 bigger cards */
.videos--22 .video-grid { grid-template-columns: repeat(12, 1fr); }
.videos--22 .video-card { grid-column: span 3; }
.videos--22 .video-card:nth-child(n+5) { grid-column: span 4; }
@media (max-width: 900px) {  /* back to the 2-per-row phone grid */
  .videos--22 .video-grid { grid-template-columns: repeat(2, 1fr); }
  .videos--22 .video-card, .videos--22 .video-card:nth-child(n+5) { grid-column: auto; }
  .videos--22 .video-card:last-child:nth-child(odd) { grid-column: span 2; }
}
.container--20 { max-width: 1188px; margin: 0 auto; padding: 0 24px; }
.grid20 { padding: 44px 0 90px; background: #fff; }
.grid20--gray { background: #EFEFEF; }
#speakers.grid20 { padding-bottom: 0; }
#mentors.grid20 { margin-top: -91px; padding-top: 46px; padding-bottom: 179px; }
#mentors.grid20 .section-title { position: relative; }  /* title paints above the speaker photos that dip into this band, like the live site */
.grid20 .speakers-hint { margin-top: 15px; }
.photo-grid { display: grid; margin-top: 24px; }
.photo-grid--sp { grid-template-columns: repeat(3, 347px); gap: 102px 50px; }
.photo-grid--mn { grid-template-columns: repeat(3, 350px); gap: 77px 25px; margin-top: 39px; }
.gcell { position: relative; overflow: hidden; }
.gcell img { width: 100%; height: auto; display: block; }
.gcell figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px;
  background: rgba(0, 0, 0, .55);
  color: var(--color-accent);
  font: 400 16px var(--font-heading);
  text-align: center;
  opacity: 0;
  transition: opacity .25s;
}
.gcell-sub { display: block; margin-top: 3px; font: 400 14px var(--font-heading); color: #fff; }
.gcell:hover figcaption { opacity: 1; }
.partners20 { background: #fff; padding: 40px 0 66px; }
.logo-row20 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin-top: 76px;
  flex-wrap: wrap;
}
.logo-row20 + .logo-row20 { margin-top: 33px; }
.inkind20 { background: #fff; padding: 0 0 224px; }
.inkind20 .inkind-title { color: var(--color-heading); }
.inkind20-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px 60px;
  margin-top: 120px;
  max-width: 1160px;
}
.organizer--20 .organizer-heading { font-size: 60px; line-height: 1.18; }
.organizer--20 .organizer-name { font-size: 45px; }
.organizer--20 .organizer-text p { font-size: 18px; color: var(--color-inverse); }
.organizer--20 .organizer-photo { margin-top: 205px; }
.organizer--20 { padding-bottom: 97px; }
.footer--sharp p { font-size: 14px; }

@media (max-width: 900px) {
  .subhero { height: auto; padding-bottom: 0; }
  .subhero-logo { position: static; display: inline-block; padding: 20px 0 0; margin-left: 24px; }
  .subhero-logo img { width: 260px; height: auto; }
  .subhero .nav { position: static; }
  .subhero-title { position: static; font-size: 40px; padding: 24px 24px 10px; }
  .subhero-x { position: static; display: block; margin-left: auto; width: 260px; height: auto; }

  .head20-bar, .head20--mn .head20-bar { height: auto; padding: 16px 0 8px; }
  .head20-logo, .head20--mn .head20-logo { position: static; width: 280px; height: auto; margin-left: 24px; }
  .head20-bar .nav, .head20--mn .head20-bar .nav { position: static; padding: 8px 24px 0; }
  .strip20 { height: 170px; }
  .strip20-title, .strip20-title--big { font-size: 40px; }

  .bio { grid-template-columns: 1fr; row-gap: 28px; }
  .bio-photo { margin: 0 auto; }
  .bio-sep,
  .bio-list--sp22 .bio-sep, .bio-list--s20 .bio-sep, .bio-list--mn .bio-sep,
  .bio-list--sp22 .bio-sep:nth-of-type(n), .bio-list--s20 .bio-sep:nth-of-type(n), .bio-list--mn .bio-sep:nth-of-type(n) { margin: 44px auto; }
  .bio-list--sp22, .bio-list--s20, .bio-list--mn { padding: 44px 0 60px; }

  .team-grid { grid-template-columns: 1fr; }
  .team-lead { font-size: 36px; }
  .team-name { font-size: 32px; }
  .team-grid .frame, .team-block--liat .frame { margin: 36px auto 0; justify-self: center; }
  .crew-grid { grid-template-columns: repeat(2, 1fr); }
  .crew-card:last-child:nth-child(odd) { grid-column: span 2; }

  .edu .container { padding: 0 24px; }
  .edu-grid { grid-template-columns: 1fr; }
  .edu-photo { margin-top: 40px; width: 100%; height: auto; justify-self: stretch; margin-right: 0; }
  .edu-title { font-size: 36px; }

  .about-row { grid-template-columns: 1fr; row-gap: 20px; margin-top: 44px; }
  .about-div { margin-left: 0; }
  .about-big { font-size: 36px; }
  .about-col .btn-dark, .btn-dark { width: 100%; max-width: 344px; }

  .contact-row, .contact--20 .contact-row { gap: 24px; margin-left: 0; }
  .contact-title { font-size: 52px; }
  .contact-mail { font-size: 20px; }
  .contact--20 .contact-mail { font-size: 22px; margin-left: 0; }

  .hero20 { height: auto; padding-bottom: 40px; }
  .hero20 .container { padding: 0 24px; }
  .hero20 .nav { margin-left: 0; }
  .hero20-logo { width: 300px; margin-left: 0; }
  .hero20 .social-row { position: static; margin-top: 28px; }
  .when20-cols { grid-template-columns: 1fr; }
  .when20-place { text-align: center; }
  .when20-date p:first-child, .when20-place p:first-child { font-size: 44px; }
  .when20-date p:last-child, .when20-place p:last-child { font-size: 30px; }
  .jump20 { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; height: auto; }
  .jump20 a { position: static; }
  .spacer20 { padding: 24px 0; }
  .embed20 { height: 240px; margin: 0 auto; }
  .videos--20 .video-grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  #speakers.grid20 { padding-bottom: 40px; }
  #mentors.grid20 { margin-top: 0; padding-bottom: 90px; }
  .photo-grid--sp, .photo-grid--mn { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .photo-grid .gcell:last-child:nth-child(odd) { grid-column: span 2; }
  .logo-row20 { gap: 36px; margin-top: 40px; }
  .inkind20 { padding-bottom: 90px; }
  .inkind20-grid { margin-top: 48px; }
}