.guests {
  --guests-soft: rgba(246, 240, 227, 0.8);
  --guests-edge: rgba(140, 151, 171, 0.16);

  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 8.4vw, 124px) var(--section);
  background-image:
    radial-gradient(circle at 6% 12%, rgba(246, 240, 227, 0.32) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 6%, rgba(246, 240, 227, 0.22) 0 1px, transparent 1.6px),
    radial-gradient(circle at 95% 46%, rgba(246, 240, 227, 0.26) 0 1px, transparent 1.6px),
    radial-gradient(circle at 64% 58%, rgba(246, 240, 227, 0.18) 0 1px, transparent 1.6px),
    radial-gradient(circle at 3% 72%, rgba(246, 240, 227, 0.2) 0 1px, transparent 1.6px);
}

.guests__head {
  margin-bottom: clamp(32px, 4.4vw, 64px);
}

.guests__title {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--h2-size);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-wrap: balance;
}

.guests__meta {
  margin: 14px 0 0;
  font-size: clamp(16px, 0.35vw + 14px, 20px);
  line-height: 1.4;
  color: var(--guests-soft);
}

.guests__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 40fr);
  column-gap: 5%;
  align-items: start;
}

.guests__chief,
.guests__honours {
  position: relative;
  z-index: 1;
}

.guests__figure {
  margin: 0;
}

.guests__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-raised);
}

.guests__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--origin, 50% 50%);
}

.guests__photo--chief {
  --pos: 0% 50%;
  --zoom: 1.14;
  --origin: 30% 40%;

  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow);
}

/* Shared navy grade so the formal portrait and podium shot read as a set. */
.guests__photo--card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 20, 39, 0.1), rgba(10, 20, 39, 0.34));
  pointer-events: none;
}

.guests__photo--card img {
  filter: saturate(0.9);
}

.guests__photo--mathou {
  --pos: 48% 50%;
}

.guests__photo--goenka {
  --pos: 40% 50%;
  --zoom: 2;
  --origin: 50% 46%;
}

.guests__caption {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--slate-light);
}

.guests__label {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: clamp(17px, 0.4vw + 12px, 20px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--gold);
}

.guests__chief .guests__label {
  margin-top: clamp(20px, 2vw, 28px);
}

.guests__name {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 1.5vw + 6px, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.guests__name--chief {
  font-size: clamp(32px, 1.2vw + 23px, 42px);
  line-height: 1.1;
}

.guests__role {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--guests-soft);
}

.guests__role--chief {
  max-width: 62ch;
  margin-top: 12px;
  text-wrap: pretty;
}

.guests__honours {
  margin-top: 4%;
}

.guests__card {
  position: relative;
  display: grid;
  grid-template-columns: 36% minmax(0, 1fr);
  align-items: center;
  background: var(--navy-raised);
  border: 1px solid var(--guests-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.guests__card + .guests__card {
  margin-top: 5.5%;
}

.guests__card > :first-child {
  align-self: stretch;
}

.guests__figure--card {
  display: grid;
}

.guests__photo--card {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
}

.guests__caption--card {
  position: absolute;
  top: 100%;
  left: 0;
}

.guests__body {
  padding: 24px clamp(18px, 1.6vw, 28px);
}

.guests__orbit {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: auto;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}

.guests__orbit-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-opacity: 0.85;
}

.guests__orbit-node {
  fill: var(--gold);
}

.host {
  --host-inset: clamp(24px, 4vw, 72px);

  position: relative;
  display: grid;
  grid-template-columns: calc(var(--host-inset) + 252px) minmax(0, 1fr);
  align-items: center;
  margin-top: clamp(100px, 9vw, 128px);
  padding: 34px clamp(28px, 4vw, 56px) 34px 0;
  background: var(--navy-raised);
  border: 1px solid var(--guests-edge);
  border-top-color: rgba(232, 185, 95, 0.8);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.host__orbit {
  display: none;
}

/* The cut-out has 16 of 480px transparent below the uniform; the offset drops them. */
.host__portrait {
  position: absolute;
  bottom: -9px;
  left: var(--host-inset);
  width: auto;
  height: 276px;
  max-width: none;
}

.host__body {
  grid-column: 2;
}

.host__label {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: clamp(17px, 0.4vw + 12px, 20px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--gold);
}

.host__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 20px;
}

.host__name {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 1.2vw + 17px, 36px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.host__honours {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(246, 240, 227, 0.74);
}

.host__role {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--guests-soft);
}

.host__former {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--slate-light);
}

.speakers {
  --speakers-gap: 20px;
  --speakers-per-view: 4.3;

  margin-top: clamp(64px, 7vw, 104px);
}

.speakers__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.speakers__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(26px, 1vw + 18px, 32px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.speakers__controls {
  display: flex;
  flex: none;
  gap: 12px;
}

.speakers__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(232, 185, 95, 0.7);
  border-radius: 50%;
  color: var(--gold);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}

.speakers__btn--prev .icon {
  transform: scaleX(-1);
}

.speakers__btn:hover:not([aria-disabled="true"]) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.speakers__btn:focus-visible {
  border-radius: 50%;
}

.speakers__btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

/* Vertical padding gives the hover lift and badge shadow room inside the clipped viewport. */
.speakers__viewport {
  margin-block: -8px -32px;
  padding-block: 8px 32px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.speakers__viewport::-webkit-scrollbar {
  display: none;
}

.speakers--enhanced .speakers__viewport {
  overflow: hidden;
  scroll-snap-type: none;
  cursor: grab;
}

.speakers--enhanced .speakers__viewport:active {
  cursor: grabbing;
}

.speakers__container {
  display: flex;
  align-items: stretch;
  margin-left: calc(var(--speakers-gap) * -1);
  touch-action: pan-y pinch-zoom;
}

.speakers__slide {
  display: flex;
  flex: 0 0 calc(100% / var(--speakers-per-view));
  flex-direction: column;
  min-width: 0;
  padding-left: var(--speakers-gap);
}

.speakers__card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  scroll-snap-align: start;
  transition: transform 0.4s var(--ease);
}

.speakers__photo {
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--navy-raised);
  user-select: none;
  -webkit-user-drag: none;
}

/* Badges stretch to the tallest in the row so every bottom edge aligns. */
.speakers__badge {
  position: relative;
  flex: 1 1 auto;
  margin: -44px 12px 0;
  padding: 14px 16px 16px;
  background: var(--navy-raised);
  border: 1px solid var(--guests-edge);
  border-top-color: rgba(232, 185, 95, 0.8);
  border-radius: 10px;
  box-shadow: 0 18px 36px -16px rgba(3, 6, 12, 0.7);
}

.speakers__name {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.speakers__role {
  display: -webkit-box;
  margin: 6px 0 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  color: var(--guests-soft);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

@media (hover: hover) {
  .speakers__card:hover {
    transform: translateY(-6px);
  }
}

@media (max-width: 1100px) {
  .speakers {
    --speakers-per-view: 3.3;
  }
}

@media (max-width: 860px) {
  .speakers {
    --speakers-per-view: 2.4;
  }
}

@media (max-width: 600px) {
  .speakers {
    --speakers-gap: 14px;
    --speakers-per-view: 1.4;
  }

  .speakers__name {
    font-size: 18px;
  }

  .speakers__head {
    gap: 12px;
  }

  .speakers__title {
    font-size: clamp(21px, 6vw, 23px);
  }

  .speakers__controls {
    gap: 10px;
  }
}

/* Transitions sit on the .is-in state so adding .anim on load hides instantly. */
.anim .guests__photo img {
  transform: scale(calc(var(--zoom, 1) * 1.06));
}

.anim .is-in .guests__photo img {
  transform: scale(var(--zoom, 1));
  transition: transform 1.6s var(--ease) var(--d, 0s);
}

.anim .guests__orbit[data-reveal] {
  transform: none;
}

.anim .guests__orbit-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.anim .guests__orbit.is-in .guests__orbit-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.4s var(--ease) 0.35s;
}

.anim .guests__orbit-node {
  opacity: 0;
  transform: scale(0.3);
  transform-box: fill-box;
  transform-origin: center;
}

.anim .guests__orbit.is-in .guests__orbit-node {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease) 1.2s, transform 0.7s var(--ease) 1.2s;
}

.anim .guests__orbit.is-in .guests__orbit-node--2 {
  transition-delay: 1.8s;
}

@media (max-width: 1100px) {
  .guests__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .guests__orbit {
    display: none;
  }

  .guests__chief {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 40px;
  }

  .guests__chief .guests__figure {
    grid-row: 1 / -1;
  }

  .guests__chief .guests__label {
    grid-row: 2;
    margin-top: 0;
  }

  .guests__chief .guests__name {
    grid-row: 3;
  }

  .guests__chief .guests__role {
    grid-row: 4;
  }

  .guests__honours {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 0;
  }

  .guests__card {
    grid-template-columns: 36% minmax(0, 1fr);
  }

  .guests__card + .guests__card {
    margin-top: 0;
  }

  .guests__body {
    padding: 20px;
  }
}

@media (max-width: 860px) {
  .guests__honours {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .guests__card {
    grid-template-columns: 150px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .guests__chief {
    display: block;
  }

  .guests__chief .guests__label {
    margin-top: 18px;
  }
}

@media (max-width: 860px) {
  .host {
    display: block;
    min-height: 0;
    margin-top: 300px;
    padding: 24px 22px 26px;
    border-color: rgba(232, 185, 95, 0.5);
    border-top-color: rgba(232, 185, 95, 0.8);
  }

  .host__orbit {
    position: absolute;
    top: -226px;
    left: calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) * 2);
    height: auto;
    max-width: none;
    overflow: visible;
  }

  .host__orbit path {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.25;
    stroke-opacity: 0.8;
  }

  .host__orbit circle {
    fill: var(--gold);
  }

  .host__portrait {
    right: 0;
    bottom: calc(100% - 7px);
    left: 0;
    height: 240px;
    margin-inline: auto;
  }

  .host__heading {
    display: block;
  }

  .host__honours {
    margin-top: 6px;
  }
}

@media (max-width: 600px) {
  .guests__head {
    margin-bottom: 28px;
  }

  .guests__grid {
    row-gap: 28px;
  }

  .guests__photo {
    border-radius: 12px;
  }

  .guests__label {
    font-size: 16px;
  }

  .guests__name {
    font-size: clamp(19px, 5.5vw, 21px);
  }

  .guests__name--chief {
    font-size: 34px;
  }

  .guests__role {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
  }

  .guests__role--chief {
    margin-top: 10px;
  }

  .guests__honours {
    gap: 14px;
  }

  .guests__card {
    grid-template-columns: 96px minmax(0, 1fr);
    border-radius: 12px;
  }

  .guests__body {
    padding: 14px;
  }

  .host {
    padding-inline: 20px;
  }

  .host__orbit {
    display: block;
  }

  .host__name {
    font-size: 26px;
  }

  .guests__label + .guests__name {
    margin-top: 2px;
  }
}