@import url("./tokens.css");

/* Mobile-first skeleton — section phases own real layout */
.page {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.page > section {
  /* width/box only — do not set display (beats .hero/.description/… flex) */
  width: 100%;
  box-sizing: border-box;
}

/* —— Hero (Figma 33:789 mobile / 0:251 desktop) —— */
.hero {
  container-type: inline-size;
  --hero_bg: var(--color-green-dark);
  --hero_cream: var(--color-cream);
  --hero_gold: var(--color-gold);
  --hero_ink: var(--color-ink);
  --hero_min-h: 73.5rem;
  --hero_pad-x: 1.6rem;
  /* shared 402→1728; desktop MQ must not hard-reset */
  --hero_header-pad: clamp(1.2rem, calc(0.836rem + 0.905cqw), 2.4rem);
  --hero_logo-w: 20rem;
  --hero_header-gap: 2.9rem;
  --hero_nav-gap: 0.8rem;
  --hero_nav-fs: 2.3rem;
  --hero_nav-lh: 2.4rem;
  --hero_nav-link-gap: 0.4rem;
  --hero_nav-arrow: 1.2rem;
  --hero_header-h: 6.4rem;
  --hero_body-pad-top: 11.3rem;
  --hero_gap-eyebrow-title: 0;
  --hero_gap-title-date: 4.3rem;
  --hero_gap-date-lecturers: 3.9rem;
  --hero_gap-lecturers-mod: 1.5rem;
  --hero_gap-mod-cta: 5.2rem;
  --hero_meta-names-mt: 0.4rem;
  --hero_eyebrow-size: 1.8rem;
  --hero_eyebrow-lh: 2.8rem;
  --hero_title-size: 6rem;
  --hero_title-lh: 5.1rem;
  --hero_title-max-w: 37rem;
  --hero_date-size: 2.7rem;
  --hero_date-lh: 2.8rem;
  --hero_date-ls: 0;
  --hero_date-caps: normal;
  --hero_meta-label-size: 1.5rem;
  --hero_meta-label-lh: 1.6rem;
  --hero_meta-label-ls: 0.1em;
  --hero_meta-label-caps: all-small-caps;
  --hero_meta-names-size: 1.7rem;
  --hero_meta-names-lh: 2rem;
  --hero_meta-names-color: var(--hero_cream);
  --hero_meta-names-caps: normal;
  --hero_meta-label-color: var(--hero_gold);
  --hero_meta-max-w: 28.2rem;
  --hero_cta-h: 3.5rem;
  --hero_cta-pad-x: 2rem;
  --hero_cta-fs: 1.7rem;
  --hero_cta-lh: 2rem;
  /* Figma 33:790 «градиент» (get_css_for_node) */
  --hero_glow_w: 109.99rem;
  --hero_glow_h: 63.155rem;
  --hero_glow_x: -38.3rem;
  --hero_glow_y: -7.5rem;
  --hero_glow_opacity: 0.7;
  --hero_glow_blur: 7.5rem;
  --hero_glow_radius: 109.99rem;
  --hero_glow_rotate: -2.49deg;

  position: relative;
  overflow: clip;
  min-height: var(--hero_min-h);
  background: var(--hero_bg);
  color: var(--hero_cream);
  font-family: var(--font-body);
}

/* ponytail: fixed .menu clipped by overflow:clip + trapped under .hero__body stacking.
   overflow:visible unclips the panel but also the oversized .hero__glow → page x-scroll;
   hide the glow while open (menu has its own fill) and lock html+body. */
.hero:has(.hero__menu[open]) {
  overflow: visible;
}

.hero:has(.hero__menu[open]) .hero__glow {
  visibility: hidden;
}

.hero:has(.hero__menu[open]) .hero__header {
  z-index: 40;
}

.hero__glow {
  position: absolute;
  left: var(--hero_glow_x);
  top: var(--hero_glow_y);
  width: var(--hero_glow_w);
  height: var(--hero_glow_h);
  border-radius: var(--hero_glow_radius);
  pointer-events: none;
  user-select: none;
  opacity: var(--hero_glow_opacity);
  transform: rotate(var(--hero_glow_rotate));
  /* Figma 33:790: radial evergreen→gold + LAYER_BLUR */
  background: radial-gradient(
    50% 50% at 50% 50%,
    var(--hero_bg) 70.58%,
    var(--hero_gold) 100%
  );
  filter: blur(var(--hero_glow_blur));
  z-index: 0;
}

.hero__header,
.hero__body {
  position: relative;
  z-index: 1;
}

.hero__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--hero_header-h);
  padding: 0 var(--hero_header-pad);
  box-sizing: border-box;
}

.hero__menu {
  position: relative;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
}

.hero__menu > summary {
  list-style: none;
}

.hero__menu > summary::-webkit-details-marker {
  display: none;
}

.hero__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--hero_cream);
  color: var(--hero_bg);
  cursor: pointer;
}

.hero__burger:focus-visible {
  outline: 2px solid var(--hero_gold);
  outline-offset: 2px;
}

.hero__close-icon {
  display: none;
}

.hero__menu[open] > .hero__burger {
  position: fixed;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 41;
}

.hero__menu[open] .hero__burger-icon {
  display: none;
}

.hero__menu[open] .hero__close-icon {
  display: block;
}

html:has(.hero__menu[open]),
body:has(.hero__menu[open]) {
  overflow: hidden;
}

/* Mobile menu overlay (Figma 39:1386 / 39:1409): solid + IMAGE fill */
.menu {
  --menu_bg: var(--color-green);
  --menu_cream: var(--color-cream);
  --menu_gold: var(--color-gold);
  --menu_ink: var(--color-green-dark);
  --menu_pad: 1.6rem;
  --menu_header-pad: 1.2rem;
  --menu_header-h: 6.4rem;
  --menu_btn: 4rem;
  --menu_primary-fs: 6rem;
  --menu_primary-lh: 5.1rem;
  --menu_primary-mt: 2.4rem;
  --menu_lower-h: 16rem;
  --menu_lower-fs: 1.7rem;
  --menu_lower-lh: 2rem;
  --menu_lower-ls: 0.005em;
  --menu_lower-gap: 0.8rem;
  --menu_bg-image: url("/images/menu-glow.webp");

  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  box-sizing: border-box;
  background-color: var(--menu_bg);
  background-image: var(--menu_bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--menu_cream);
  overflow-x: clip;
  overflow-y: auto;
}

.menu__top,
.menu__lower {
  position: relative;
  z-index: 1;
}

.menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--menu_header-h);
  padding: 0 var(--menu_header-pad);
  box-sizing: border-box;
}

.menu__header-spacer {
  width: var(--menu_btn);
  height: var(--menu_btn);
  flex-shrink: 0;
}

.menu__logo {
  display: block;
  flex-shrink: 0;
  width: 20rem;
  height: 3.2rem;
  line-height: 0;
}

.menu__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.menu__primary {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--menu_primary-mt);
  padding: 0 var(--menu_pad);
}

.menu__primary-link {
  font-family: var(--font-display);
  font-size: var(--menu_primary-fs);
  line-height: var(--menu_primary-lh);
  font-weight: 500;
  color: var(--menu_cream);
  text-decoration: none;
}

.menu__primary-link:focus-visible {
  outline: 2px solid var(--menu_gold);
  outline-offset: 2px;
}

.menu__lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  min-height: var(--menu_lower-h);
  padding: 0 var(--menu_pad) 2.4rem;
  box-sizing: border-box;
}

.menu__social,
.menu__legal {
  display: flex;
  flex-direction: column;
  gap: var(--menu_lower-gap);
  align-self: end;
}

.menu__lower-link {
  font-family: var(--font-body);
  font-size: var(--menu_lower-fs);
  line-height: var(--menu_lower-lh);
  letter-spacing: var(--menu_lower-ls);
  color: var(--menu_cream);
  text-decoration: none;
}

.menu__lower-link:focus-visible {
  outline: 2px solid var(--menu_gold);
  outline-offset: 2px;
}

/* Legacy dropdown panel (unused after 8.2) — keep for safety */
.hero__menu-panel {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 18rem;
  padding: 1.2rem 1.6rem;
  background: var(--hero_bg);
  border: 1px solid rgba(229, 175, 87, 0.35);
  border-radius: 0.8rem;
  z-index: 2;
}

.hero__menu-link {
  font-family: var(--font-body);
  font-size: 1.7rem;
  line-height: 2rem;
  color: var(--hero_cream);
  text-decoration: none;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.025em;
}

.hero__menu-link:focus-visible {
  outline: 2px solid var(--hero_gold);
  outline-offset: 2px;
}

.hero__nav {
  display: none;
}

.hero__logo {
  display: block;
  flex-shrink: 0;
  width: var(--hero_logo-w);
  height: 3.2rem;
  line-height: 0;
}

.hero__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__spacer {
  display: block;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
}

.hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  padding: 0 var(--hero_pad-x);
  /* Figma: eyebrow at y=113 under hero; header is 64 — pad from header bottom */
  margin-top: calc(var(--hero_body-pad-top) - var(--hero_header-h));
  padding-bottom: 3rem;
}

.hero__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--hero_eyebrow-size);
  font-style: italic;
  line-height: var(--hero_eyebrow-lh);
  color: var(--hero_gold);
}

.hero__title {
  margin: var(--hero_gap-eyebrow-title) 0 0;
  max-width: var(--hero_title-max-w);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--hero_title-size);
  line-height: var(--hero_title-lh);
  color: var(--hero_cream);
}

.hero__br-m {
  display: block;
}

.hero__gap-d {
  display: none;
}

.hero__date {
  margin: var(--hero_gap-title-date) 0 0;
  font-family: var(--font-body);
  font-size: var(--hero_date-size);
  line-height: var(--hero_date-lh);
  letter-spacing: var(--hero_date-ls);
  font-variant-caps: var(--hero_date-caps);
  color: var(--hero_gold);
}

.hero__lecturers,
.hero__moderator {
  margin: 0;
  max-width: var(--hero_meta-max-w);
}

.hero__lecturers {
  margin-top: var(--hero_gap-date-lecturers);
}

.hero__moderator {
  margin-top: var(--hero_gap-lecturers-mod);
}

.hero__meta-label,
.hero__meta-names {
  margin: 0;
  font-family: var(--font-body);
}

.hero__meta-label {
  font-size: var(--hero_meta-label-size);
  line-height: var(--hero_meta-label-lh);
  letter-spacing: var(--hero_meta-label-ls);
  font-variant-caps: var(--hero_meta-label-caps);
  color: var(--hero_meta-label-color);
}

.hero__meta-names {
  margin-top: var(--hero_meta-names-mt);
  font-size: var(--hero_meta-names-size);
  line-height: var(--hero_meta-names-lh);
  font-variant-caps: var(--hero_meta-names-caps);
  color: var(--hero_meta-names-color);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  box-sizing: border-box;
  height: var(--hero_cta-h);
  margin-top: var(--hero_gap-mod-cta);
  padding: 0 var(--hero_cta-pad-x);
  border-radius: 4rem;
  background: var(--hero_gold);
  border: 1px solid rgba(33, 32, 38, 0.1);
  color: var(--hero_bg);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--hero_cta-fs);
  line-height: var(--hero_cta-lh);
}

.hero__cta:focus-visible {
  outline: 2px solid var(--hero_cream);
  outline-offset: 3px;
}

@media (min-width: 960px) {
  .hero {
    --hero_min-h: 105.5rem;
    --hero_pad-x: 2.4rem;
    /* --hero_header-pad owned by base clamp */
    --hero_header-h: 4rem;
    --hero_header-top: 1.2rem;
    --hero_body-pad-top: 12.9rem;
    --hero_gap-eyebrow-title: 0.6rem;
    --hero_gap-title-date: 4rem;
    --hero_gap-date-lecturers: 8.1rem;
    --hero_gap-lecturers-mod: 1.8rem;
    --hero_gap-mod-cta: 7rem;
    --hero_meta-names-mt: 0;
    --hero_eyebrow-size: 2.7rem;
    --hero_eyebrow-lh: 2.835rem;
    --hero_title-size: 12rem;
    --hero_title-lh: 10.2rem;
    --hero_title-max-w: 124.8rem;
    --hero_date-size: 4rem;
    --hero_date-lh: 4rem;
    --hero_date-ls: 0.025em;
    --hero_date-caps: small-caps;
    --hero_meta-label-size: 2.3rem;
    --hero_meta-label-lh: 2.4rem;
    --hero_meta-label-ls: 0.025em;
    --hero_meta-label-caps: small-caps;
    --hero_meta-names-size: 2.3rem;
    --hero_meta-names-lh: 2.4rem;
    --hero_meta-names-color: var(--hero_cream); /* styledSegments 9:438/9:440 */
    --hero_meta-names-caps: small-caps;
    --hero_meta-max-w: 44.8rem;
    --hero_cta-h: 6rem;
    --hero_cta-pad-x: 3.2rem;
    --hero_cta-fs: 2.3rem;
    --hero_cta-lh: 2.6rem;
    /* Figma 0:252 «градиент» (get_css_for_node) */
    --hero_glow_w: 275.422rem;
    --hero_glow_h: 163.727rem;
    --hero_glow_x: -43.904rem;
    --hero_glow_y: -33.876rem;
    --hero_glow_opacity: 0.8;
    --hero_glow_blur: 10.993rem;
    --hero_glow_radius: 275.422rem;
    --hero_glow_rotate: -2.92deg;
    /* desktop-only chrome: floor 960 → ceiling 1728 (nowrap row fits) */
    --hero_logo-w: clamp(14rem, calc(6.5rem + 7.813cqw), 20rem);
    --hero_header-gap: clamp(2rem, calc(0.875rem + 1.172cqw), 2.9rem);
    --hero_nav-gap: clamp(0.6rem, calc(0.35rem + 0.26cqw), 0.8rem);
    --hero_nav-fs: clamp(1.6rem, calc(0.725rem + 0.911cqw), 2.3rem);
    --hero_nav-lh: clamp(1.7rem, calc(0.825rem + 0.911cqw), 2.4rem);
    --hero_nav-arrow: clamp(1rem, 0.7cqw, 1.2rem);
  }

  /* Desktop glow uses Figma 0:252 radial (vars above); same .hero__glow rule */

  .hero__header {
    position: absolute;
    top: var(--hero_header-top);
    left: 0;
    right: 0;
    height: var(--hero_header-h);
    gap: var(--hero_header-gap);
    justify-content: flex-start;
  }

  .hero__menu,
  .hero__spacer {
    display: none;
  }

  .hero__nav {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--hero_nav-gap);
    min-width: 0;
  }

  .hero__nav--right {
    justify-content: flex-end;
  }

  .hero__nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--hero_nav-link-gap);
    font-family: var(--font-body);
    font-size: var(--hero_nav-fs);
    line-height: var(--hero_nav-lh);
    letter-spacing: 0.025em;
    font-variant-caps: all-small-caps;
    color: var(--hero_cream);
    text-decoration: none;
    white-space: nowrap;
  }

  .hero__nav-link:focus-visible {
    outline: 2px solid var(--hero_gold);
    outline-offset: 2px;
  }

  .hero__nav-arrow {
    flex-shrink: 0;
    width: var(--hero_nav-arrow);
    height: var(--hero_nav-arrow);
  }

  .hero__body {
    margin-top: 0;
    padding-top: var(--hero_body-pad-top);
    padding-bottom: 7.3rem;
  }

  .hero__br-m {
    display: none;
  }

  .hero__gap-d {
    display: inline;
  }

  .hero__moderator {
    max-width: 86.8rem;
  }

  .hero__meta-names {
    font-style: italic; /* desktop mixed runs: names Regular Italic */
  }
}

/* Description — mobile-first; desktop MQ at 960px */
.description {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 4.8rem 1.6rem;
  color: var(--color-ink);
  background: transparent;
}

.description__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 6rem;
  line-height: 5.1rem;
  text-align: center;
  color: var(--color-green-dark);
}

.description__body {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 100%;
  max-width: 81.6rem;
}

.description__p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 2.1rem;
  line-height: 2.6rem;
  text-align: left;
  color: var(--color-ink);
}

.description__link {
  color: inherit;
  font-style: italic;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

@media (min-width: 960px) {
  .description {
    gap: 4.8rem;
    padding: 4.8rem 0 12.8rem;
  }

  .description__title {
    font-size: 8rem;
    line-height: 6.8rem;
  }

  .description__body {
    gap: 4.8rem;
    width: 81.6rem;
    max-width: 81.6rem;
  }
}

/* Lecturers — mobile-first; Figma 33:830 / 0:295 */
.lecturers {
  --lecturers_pad-y: 4.8rem;
  --lecturers_pad-x: 1.6rem;
  --lecturers_pad-b: 4.8rem;
  --lecturers_gap: 4rem;
  --lecturers_title-size: 6rem;
  --lecturers_title-lh: 5.1rem;
  --lecturers_title-case: none;
  --lecturers_grid-gap: 4.8rem;
  --lecturers_grid-row-gap: 4.8rem;
  --lecturers_grid-max: 37rem;
  --lecturers_card-w: 100%;
  --lecturers_card-gap: 1.6rem;
  --lecturers_meta-gap: 0.8rem; /* Figma info itemSpacing 8 (mobile) */
  --lecturers_portrait: 20rem;
  --lecturers_name-size: 4rem;
  --lecturers_name-lh: 3.6rem;
  --lecturers_bio-size: 1.7rem;
  --lecturers_bio-lh: 2rem;
  --lecturers_bio-ls: 0.0085rem;
  --lecturers_bio-style: normal;
  --lecturers_bg: transparent;
  --lecturers_ink: var(--color-green-dark);
  --lecturers_text: var(--color-green);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lecturers_gap);
  padding: var(--lecturers_pad-y) var(--lecturers_pad-x) var(--lecturers_pad-b);
  overflow: clip;
  background: var(--lecturers_bg);
  color: var(--lecturers_text);
}

/* Decorative cream→gold wash — desktop only (Figma 0:296) */
.lecturers::before {
  content: none;
}

.lecturers__title,
.lecturers__grid {
  position: relative;
  z-index: 1;
}

.lecturers__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--lecturers_title-size);
  line-height: var(--lecturers_title-lh);
  text-align: center;
  text-transform: var(--lecturers_title-case);
  color: var(--lecturers_ink);
}

.lecturers__grid {
  display: flex;
  flex-direction: column;
  /* Figma 0:301/21:476 + 33:833 inspect: align-items flex-start (MIN) */
  align-items: flex-start;
  gap: var(--lecturers_grid-row-gap) var(--lecturers_grid-gap);
  width: 100%;
  max-width: var(--lecturers_grid-max);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lecturers__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lecturers_card-gap);
  width: var(--lecturers_card-w);
  max-width: 44.8rem;
}

.lecturers__portrait {
  display: block;
  width: var(--lecturers_portrait);
  height: var(--lecturers_portrait);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

.lecturers__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lecturers_meta-gap);
  width: 100%;
}

.lecturers__name {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--lecturers_name-size);
  line-height: var(--lecturers_name-lh);
  text-align: center;
  color: var(--lecturers_text);
}

.lecturers__bio {
  margin: 0;
  width: 100%;
  max-width: 31rem;
  font-family: var(--font-body);
  font-size: var(--lecturers_bio-size);
  font-style: var(--lecturers_bio-style);
  line-height: var(--lecturers_bio-lh);
  letter-spacing: var(--lecturers_bio-ls);
  text-align: center;
  color: var(--lecturers_text);
}

@media (min-width: 960px) {
  .lecturers {
    --lecturers_pad-y: 4.8rem;
    --lecturers_pad-x: 2rem;
    --lecturers_pad-b: 12.8rem;
    --lecturers_gap: 6.4rem;
    --lecturers_title-size: 8rem;
    --lecturers_title-lh: 6.8rem;
    --lecturers_title-case: uppercase;
    --lecturers_grid-gap: 4.8rem;
    /* Figma: two row frames are section siblings → itemSpacing 64 between rows */
    --lecturers_grid-row-gap: 6.4rem;
    --lecturers_grid-max: 153.6rem;
    --lecturers_card-w: 44.8rem;
    --lecturers_card-gap: 2.4rem;
    --lecturers_meta-gap: 2.4rem;
    --lecturers_portrait: 28.8rem;
    --lecturers_name-size: 5rem;
    --lecturers_name-lh: 4.25rem;
    --lecturers_bio-size: 2.7rem;
    --lecturers_bio-lh: 2.835rem;
    --lecturers_bio-ls: 0;
    --lecturers_bio-style: italic;
    --lecturers_bg: var(--color-cream);
  }

  .lecturers::before {
    content: "";
    position: absolute;
    right: calc(50% - 90rem);
    margin-block: auto;
    top: -3.3rem;
    width: 201.593rem;
    height: 56.163rem;
    border-radius: 201.5933rem; /* Figma 0:296 inspect */
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: 0.8;
    transform: rotate(-11deg);
    transform-origin: top right;
    background:
      linear-gradient(
        265deg,
        rgba(255, 240, 215, 0) 32%,
        var(--color-cream) 59.66%
      ),
      radial-gradient(
        44.78% 56.64% at 53.71% 60.89%,
        var(--color-cream) 70.19%,
        var(--color-gold) 100%
      );
    filter: blur(6rem);
  }

  /* Figma: row1 = 2 cards, row2 = 3 (not flex-wrap 3+2) */
  .lecturers__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-items: center;
    column-gap: var(--lecturers_grid-gap);
    row-gap: var(--lecturers_grid-row-gap);
  }

  .lecturers__card:nth-child(1) {
    grid-column: 2 / span 2;
  }

  .lecturers__card:nth-child(2) {
    grid-column: 4 / span 2;
  }

  .lecturers__card:nth-child(3) {
    grid-column: 1 / span 2;
  }

  .lecturers__card:nth-child(4) {
    grid-column: 3 / span 2;
  }

  .lecturers__card:nth-child(5) {
    grid-column: 5 / span 2;
  }

  .lecturers__bio {
    max-width: 44.8rem;
  }
}

/* Registration form — mobile-first; desktop MQ at 960px */
.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;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  padding: 4.8rem 1.6rem 6.4rem;
  background: var(--color-cream);
  color: var(--color-ink);
}

.form__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 8rem;
  line-height: 6.8rem;
  text-align: center;
  color: var(--color-green-dark);
}

.form__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* mobile: fields↔footer = section itemSpacing 40 (Figma 33:859) */
  gap: 4rem;
  width: 100%;
  max-width: 37rem;
}

.form__fields {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  width: 100%;
}

.form__field {
  display: block;
  width: 100%;
}

.form__input {
  box-sizing: border-box;
  width: 100%;
  height: 5.2rem;
  padding: 1.6rem 2.4rem;
  border: 1px solid rgba(255, 240, 215, 0.2); /* Figma input-border-normal */
  border-radius: 4rem;
  background: var(--color-input);
  font-family: var(--font-body);
  font-size: 1.7rem;
  line-height: 2rem;
  color: var(--color-ink);
}

.form__input::placeholder {
  color: color-mix(in srgb, var(--color-ink) 50%, transparent);
}

.form__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  width: 100%;
}

.form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
  max-width: 26.6rem;
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1.6rem;
  color: var(--color-ink);
  cursor: pointer;
}

.form__check--privacy span {
  font-style: italic;
  text-decoration: underline;
  letter-spacing: 0.01em; /* Figma 0:459 ls 0.17 on 17px */
}

.form__check input[type="checkbox"] {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.2rem 0 0;
  appearance: none;
  border: 1px solid var(--color-ink);
  background: transparent;
  accent-color: var(--color-green);
}

.form__check input[type="checkbox"]:checked {
  background: var(--color-green);
  border-color: var(--color-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff0d7' stroke-width='1.5' d='M2.5 6.2l2.3 2.3 4.7-4.7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.form__submit {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34rem;
  max-width: 100%;
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: 4rem;
  background: var(--color-green);
  font-family: var(--font-body);
  font-size: 1.7rem;
  line-height: 2rem;
  color: var(--color-cream);
  cursor: pointer;
}

.form__submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.form__alert,
.form__error {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1.6rem;
  color: #8b1e1e;
}

.form__alert {
  width: 100%;
  text-align: center;
}

.form__error {
  display: block;
  margin-top: 0.8rem;
}

.form__error[hidden],
.form__alert[hidden] {
  display: none;
}

@media (min-width: 960px) {
  .form {
    gap: 7.2rem;
    padding: 4.8rem 2rem 12.8rem;
  }

  .form__form {
    gap: 7.5rem;
    max-width: 88.8rem;
  }

  .form__fields {
    gap: 3.2rem;
    max-width: 51.4rem;
  }

  .form__check {
    max-width: 29.4rem;
    font-size: 1.7rem;
    line-height: 1.6rem;
  }
}

/* —— Status / register success (Figma 39:1266 mobile / 3:292 desktop) —— */
.status {
  container-type: inline-size;
  --status_title: #0d0d0d;
  /* header fluid mirrors .hero (status page has no .hero ancestor) */
  --hero_header-pad: clamp(1.2rem, calc(0.836rem + 0.905cqw), 2.4rem);
  --hero_logo-w: 20rem;
  --hero_header-gap: 2.9rem;
  --hero_nav-gap: 0.8rem;
  --hero_nav-fs: 2.3rem;
  --hero_nav-lh: 2.4rem;
  --hero_nav-link-gap: 0.4rem;
  --hero_nav-arrow: 1.2rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-cream);
  color: var(--status_title);
}

/* Cream page: invert closed burger + header logo; open overlay = landing chrome */
.status .hero__burger {
  background: var(--color-green-dark);
  color: var(--color-cream);
}

.status .hero__menu[open] > .hero__burger {
  background: var(--hero_cream);
  color: var(--hero_bg);
}

.status__header > .hero__logo img {
  /* ponytail: cream wordmark → dark on cream; gold 226 darkens too */
  filter: brightness(0.28);
}

.status .hero__nav-link {
  color: var(--color-ink);
}

.status__header {
  flex-shrink: 0;
  height: 6.4rem;
}

.status__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 1.6rem;
}

.status__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2.4rem;
  width: 100%;
  max-width: 37rem;
}

.status__text {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.status__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 5rem;
  line-height: 4.25rem;
  color: var(--status_title);
  text-align: left;
}

.status__title--d {
  display: none;
}

.status__title--m {
  display: inline;
}

.status__copy {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.7rem;
  line-height: 2rem;
  color: var(--status_title);
}

.status__copy p {
  margin: 0;
}

.status__copy p + p {
  margin-top: 2.4rem;
}

.status__cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4rem;
  border: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
  border-radius: 4rem;
  font-family: var(--font-body);
  font-size: 1.7rem;
  line-height: 2rem;
  color: var(--color-green);
  text-decoration: none;
  text-align: center;
}

.status__cta:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

@media (min-width: 960px) {
  .status {
    --hero_logo-w: clamp(14rem, calc(6.5rem + 7.813cqw), 20rem);
    --hero_header-gap: clamp(2rem, calc(0.875rem + 1.172cqw), 2.9rem);
    --hero_nav-gap: clamp(0.6rem, calc(0.35rem + 0.26cqw), 0.8rem);
    --hero_nav-fs: clamp(1.6rem, calc(0.725rem + 0.911cqw), 2.3rem);
    --hero_nav-lh: clamp(1.7rem, calc(0.825rem + 0.911cqw), 2.4rem);
    --hero_nav-arrow: clamp(1rem, 0.7cqw, 1.2rem);
  }

  .status__header {
    position: relative;
    top: auto;
    height: 6.4rem;
    padding: 0 var(--hero_header-pad);
    gap: var(--hero_header-gap);
  }

  .status .hero__menu,
  .status .hero__spacer {
    display: none;
  }

  .status .hero__nav {
    display: flex;
  }

  .status__body {
    padding: 0 2.4rem;
  }

  .status__content {
    width: 52.6rem;
    max-width: 52.6rem;
    align-items: center;
  }

  .status__text {
    width: 52.6rem;
  }

  .status__title {
    font-size: 8rem;
    line-height: 6.8rem;
  }

  .status__title--d {
    display: inline;
  }

  .status__title--m {
    display: none;
  }

  .status__copy {
    font-size: 2.1rem;
    line-height: 2.4rem;
    letter-spacing: 0.005em;
  }

  .status__cta {
    width: 34rem;
  }
}