/* ==========================================================================
   SECTION 7 & 8: EDITORIAL BOARD & EDITORIAL TEAM
   ========================================================================== */

/* --- Section 7: Editorial Board --- */
.team-section {
  position: relative;
  background-color: #1F5AA6;
  padding: clamp(3.75rem, 5.8vw, 5.75rem) 1.5rem clamp(2rem, 3.2vw, 2.75rem);
  text-align: center;
  border-bottom: 4px solid var(--c-black);
  overflow: hidden;
  isolation: isolate;
}

/* Blue Wall Texture Backdrop - Matched to SPU Associates section */
.eb-bg-texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  z-index: 1;
}

/* Corner & Edge Stickers with Jitter from SPU Associates section */
.eb-sticker {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  transform-origin: center center;
  will-change: transform;
}

.eb-sticker-top-left {
  top: 0;
  left: 0;
  width: clamp(170px, 22vw, 340px);
  height: auto;
  animation: spu-jitter-dark-burst 1.45s ease-in-out infinite;
}

.eb-sticker-top-right {
  top: 2%;
  right: 7%;
  width: clamp(130px, 16vw, 230px);
  height: auto;
  animation: spu-jitter-star-top-right 1.35s ease-in-out infinite;
}

.eb-sticker-bottom-left {
  bottom: 6%;
  left: 0;
  width: clamp(120px, 15vw, 220px);
  height: auto;
  animation: spu-jitter-star-left 1.25s ease-in-out infinite;
}

.eb-sticker-bottom-right {
  bottom: 2%;
  right: -7%;
  width: clamp(140px, 17vw, 250px);
  height: auto;
  animation: spu-jitter-star-outline 1.55s ease-in-out infinite;
}

.eb-sticker-lines-right {
  top: 10%;
  right: 8%;
  width: clamp(140px, 22vw, 280px);
  height: auto;
  opacity: 0.7;
  animation: spu-jitter-dark-burst 1.6s ease-in-out infinite;
}

/* Jitter Keyframes from SPU Associates Section */
@keyframes spu-jitter-star-left {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(-0.8px, 0.6px) rotate(-0.7deg);
  }

  40% {
    transform: translate(0.9px, -0.6px) rotate(0.6deg);
  }

  60% {
    transform: translate(-0.6px, -0.8px) rotate(-0.5deg);
  }

  80% {
    transform: translate(0.7px, 0.6px) rotate(0.6deg);
  }
}

@keyframes spu-jitter-star-top-right {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(0.7px, -0.8px) rotate(0.7deg);
  }

  40% {
    transform: translate(-0.8px, 0.6px) rotate(-0.6deg);
  }

  60% {
    transform: translate(0.6px, 0.8px) rotate(0.5deg);
  }

  80% {
    transform: translate(-0.7px, -0.6px) rotate(-0.6deg);
  }
}

@keyframes spu-jitter-star-outline {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(-0.9px, -0.5px) rotate(-0.5deg);
  }

  40% {
    transform: translate(0.7px, 0.8px) rotate(0.4deg);
  }

  60% {
    transform: translate(-0.6px, 0.7px) rotate(-0.4deg);
  }

  80% {
    transform: translate(0.8px, -0.6px) rotate(0.5deg);
  }
}

@keyframes spu-jitter-dark-burst {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(-0.8px, 0.7px) rotate(0.6deg);
  }

  40% {
    transform: translate(0.7px, -0.6px) rotate(-0.5deg);
  }

  60% {
    transform: translate(-0.6px, -0.8px) rotate(0.4deg);
  }

  80% {
    transform: translate(0.8px, 0.6px) rotate(-0.5deg);
  }
}

/* Container */
.eb-container {
  position: relative;
  z-index: 3;
  max-width: 1380px;
  margin: 0 auto;
}

/* Header Area: Static 'Ad Astra' (Righteous), Pop-up 'Editorial Board', Pop-up 'P.Y. 2025-2026' (Darker Grotesque) */
.eb-header-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: clamp(0.4rem, 0.8vw, 1rem);
  margin-bottom: clamp(0.4rem, 0.8vw, 0.75rem);
  position: relative;
  z-index: 5;
}

.eb-brand-static {
  font-family: var(--f-righteous);
  font-size: clamp(2.8rem, 4.6vw, 4.2rem);
  font-weight: 400;
  color: #19191E;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.eb-title-img-wrap {
  width: 100%;
  max-width: clamp(340px, 46vw, 600px);
  margin: clamp(-2.2rem, -2.6vw, -1.6rem) auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.eb-title-img {
  width: 90%;
  height: auto;
  display: block;
  opacity: 0;
  transform: scale(0.3) translateY(24px);
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.eb-year {
  font-family: var(--f-darker);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 900;
  color: #19191e;
  letter-spacing: 0.06em;
  margin-top: clamp(-2.2rem, -2.8vw, -1.5rem);
  opacity: 0;
  transform: scale(0.3) translateY(18px);
  will-change: transform, opacity;
  position: relative;
  z-index: 3;
}

/* One-time Pop-up Animations Triggered on Viewport Entry */
.team-section.is-visible .eb-title-img {
  animation: ebPopUp 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s forwards;
}

.team-section.is-visible .eb-year {
  animation: ebPopUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards;
}

@keyframes ebPopUp {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(24px);
  }

  75% {
    opacity: 1;
    transform: scale(1.08) translateY(-4px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Member Cutout Cards Grid */
.eb-row-top {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.4vw, 1.6rem);
  max-width: 1360px;
  width: 100%;
  margin: 0 auto clamp(0.6rem, 1.2vw, 1.1rem);
  align-items: end;
  box-sizing: border-box;
}

.eb-row-bottom {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.6vw, 2rem);
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  align-items: end;
  box-sizing: border-box;
}

.eb-card {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  width: 100%;
  aspect-ratio: 3 / 4;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), filter 0.28s ease;
}

.eb-card-img {
  width: 100%;
  height: 100%;
  max-width: 245px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), filter 0.28s ease;
}

.eb-card:hover .eb-card-img {
  transform: translateY(-10px) scale(1.05);
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.5));
}

/* Responsive Breakpoints for Section 7 */
@media (max-width: 1024px) {
  .eb-row-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 680px;
    margin: 0 auto 1.2rem;
  }

  .eb-row-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: 680px;
    margin: 0 auto;
  }

  .eb-row-bottom .eb-card {
    flex: 0 0 calc((100% - 3rem) / 3);
    max-width: 190px;
    box-sizing: border-box;
  }

  .eb-card-img {
    max-width: 190px;
  }
}

@media (max-width: 640px) {
  .team-section {
    padding: 3.25rem 1rem 2.25rem;
  }

  .eb-header-wrap {
    margin-top: 0.5rem;
    margin-bottom: 0.45rem;
  }

  .eb-row-top,
  .eb-row-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 0.85rem;
    max-width: 380px;
    margin: 0 auto 1.25rem;
  }

  .eb-row-top .eb-card,
  .eb-row-bottom .eb-card {
    flex: 0 0 calc((100% - 0.85rem) / 2);
    max-width: 175px;
    box-sizing: border-box;
    margin: 0;
  }

  .eb-card-img {
    max-width: 175px;
  }

  .eb-brand-static {
    font-size: 2.5rem;
  }

  .eb-title-img-wrap {
    max-width: 320px;
    margin-top: -1.5rem;
  }

  .eb-year {
    font-size: 1.35rem;
    margin-top: -1.15rem;
  }

  .eb-sticker-top-left {
    width: 120px;
  }

  .eb-sticker-top-right {
    width: 95px;
  }

  .eb-sticker-bottom-left {
    width: 85px;
  }

  .eb-sticker-bottom-right {
    width: 95px;
  }
}


/* ==========================================================================
   SECTION 8: EDITORIAL TEAM (CAROUSEL)
   ========================================================================== */

.editorial-team-section {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--c-black);
  border-bottom: 4px solid var(--c-black);
  overflow: hidden;
  /* So the fixed site header never covers the title when jumping to this section */
  scroll-margin-top: var(--site-header-h, 4.5rem);

  /* ----- Spacing system: one value drives the breathing room on every side ----- */
  --et-m: clamp(3.5rem, 17vw, 6rem);
  /* space above the title cloud and below the last control */
  --et-side: clamp(1.25rem, 7vw, 4rem);
  /* space beside the board on phones */
  --et-title-gap: clamp(1.75rem, 6.5vw, 2.75rem);
  /* space between the title cloud and the board */
  --et-row-gap: clamp(1.5rem, 6vw, 2.25rem);
  /* space between the board and the arrows (phones) */
}

/* Photo and content share one grid cell: the photo sets the section height so the whole picture shows */
.editorial-team-section .editorial-team-bg-picture {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.editorial-team-section .editorial-team-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editorial-team-section .editorial-team-inner {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding: var(--et-m) clamp(0.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ---------- Background people effect (layer is added by JS) ---------- */

.editorial-team-section .editorial-team-fx {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0.22) 44%,
      #000 49.6%,
      rgba(0, 0, 0, 0.22) 50.4%, rgba(0, 0, 0, 0.22) 100%);
  mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0.22) 44%,
      #000 49.6%,
      rgba(0, 0, 0, 0.22) 50.4%, rgba(0, 0, 0, 0.22) 100%);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
}

/* Copy of the photo that keeps only the colored people (see the SVG filter) */
.editorial-team-section .editorial-team-fx-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#editorial-people-filter) drop-shadow(0 0 6px rgba(255, 236, 170, 0.75));
  will-change: transform;
}

.editorial-team-section.is-fx-running .editorial-team-fx {
  animation: editorial-scan-sweep 9s linear infinite;
}

.editorial-team-section.is-fx-running .editorial-team-fx-img {
  animation: editorial-people-shake 0.9s steps(1, end) infinite;
}

@keyframes editorial-scan-sweep {
  from {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }

  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

@keyframes editorial-people-shake {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-1.5px, 1px);
  }

  40% {
    transform: translate(1px, -1.5px);
  }

  60% {
    transform: translate(-1px, -1px);
  }

  80% {
    transform: translate(1.5px, 1px);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* ---------- Title: spray cloud image behind the text ---------- */

.editorial-team-section .editorial-team-title {
  --title-text-shift: 0em;
  position: relative;
  display: inline-block;
  /* The spray cloud reaches past the text box (about 0.74em above and 0.56em below), so the margins add that
     back: the space you SEE above the cloud and below it equals the spacing tokens, whatever the font size */
  margin: 0.74em 0 calc(var(--et-title-gap) + 0.56em);
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--c-red);
}

/* The cloud is sized from the text width (200%) and shifted so the middle of the black blob, not the middle of the image, sits behind the text */
.editorial-team-section .editorial-team-title-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -43.8%);
  pointer-events: none;
  z-index: 0;
}

.editorial-team-section .editorial-team-title-text {
  position: relative;
  z-index: 1;
  display: block;
  top: var(--title-text-shift);
  padding: 0.7em 0 0.75em;
  white-space: nowrap;
  font-family: var(--f-righteous);
}

/* Title shake: the cloud and the text jitter a little, like the people in the photo (only while the section is on screen) */
.editorial-team-section.is-fx-running .editorial-team-title-bg {
  animation: editorial-title-cloud-shake 1.1s steps(1, end) infinite;
}

.editorial-team-section.is-fx-running .editorial-team-title-text {
  animation: editorial-title-text-shake 0.8s steps(1, end) infinite;
}

@keyframes editorial-title-cloud-shake {
  0% {
    transform: translate(-50%, -43.8%);
  }

  16% {
    transform: translate(calc(-50% - 1.5px), calc(-43.8% + 1px));
  }

  33% {
    transform: translate(calc(-50% + 1px), calc(-43.8% - 1.5px));
  }

  50% {
    transform: translate(calc(-50% - 1px), calc(-43.8% - 1px));
  }

  66% {
    transform: translate(calc(-50% + 1.5px), calc(-43.8% + 1px));
  }

  83% {
    transform: translate(calc(-50% - 0.5px), calc(-43.8% + 1.5px));
  }

  100% {
    transform: translate(-50%, -43.8%);
  }
}

@keyframes editorial-title-text-shake {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(1px, -1px);
  }

  40% {
    transform: translate(-1.5px, 0.5px);
  }

  60% {
    transform: translate(0.5px, 1.5px);
  }

  80% {
    transform: translate(-1px, -1px);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* Fallback when the cloud image is missing (added by JS) */
.editorial-team-section .editorial-team-title.is-fallback {
  margin: 0 0 var(--et-title-gap);
}

.editorial-team-section .editorial-team-title.is-fallback .editorial-team-title-bg {
  display: none;
}

.editorial-team-section .editorial-team-title.is-fallback .editorial-team-title-text {
  top: 0;
  padding: 0.35em 1.1em 0.5em;
  background-color: #19191E;
  border-radius: 48% 52% 46% 54% / 62% 58% 42% 38%;
  box-shadow: 0 0 0 0.1em rgba(25, 25, 30, 0.85), 0 0.25em 0.6em rgba(0, 0, 0, 0.35);
}

/* ---------- Stage: [button] [board] [button] ---------- */

.editorial-team-section .editorial-team-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 2.75rem);
  width: 100%;
}

.editorial-team-section .editorial-team-btn {
  flex: 0 0 auto;
  width: clamp(34px, 3.4vw, 60px);
  height: clamp(34px, 3.4vw, 60px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.editorial-team-section .editorial-team-btn:hover:not(:disabled) {
  transform: scale(1.1);
}

.editorial-team-section .editorial-team-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.editorial-team-section .editorial-team-btn:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 4px;
  border-radius: 50%;
}

.editorial-team-section .editorial-team-btn:disabled {
  cursor: default;
}

.editorial-team-section .editorial-team-btn:disabled .editorial-team-btn-icon {
  opacity: 0.35;
}

.editorial-team-section .editorial-team-btn-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ---------- Board: image + text share one grid cell ---------- */

/* The board is a size container: every text size, column count and padding inside it
   is measured from the BOARD width, not the screen width. So the text always fits the
   board, whatever the device, and adding more names only makes the board taller. */
.editorial-team-section .editorial-team-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: clamp(300px, 46vw, 880px);
  min-width: 0;
  container: editorial-board / inline-size;
  touch-action: pan-y;
}

.editorial-team-section .editorial-team-board-img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 0;
}

/* All slides stack in one cell, so the board is always as tall as the tallest slide and
   every slide is centered inside it with equal space on all sides.
   Safe area: raise --pad-y / --pad-x if your board art has a thicker frame. */
.editorial-team-section .editorial-team-content {
  --pad-y: max(1.75rem, 6.5cqw);
  --pad-x: max(1.25rem, 9cqw);
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: var(--pad-y) var(--pad-x);
  color: #ffffff;
  font-family: var(--f-body);
  text-align: center;
}

.editorial-team-section .editorial-team-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.editorial-team-section .editorial-team-panel[hidden] {
  display: flex;
  visibility: hidden;
}

/* Slide headings: big title and optional sub title */
.editorial-team-section .editorial-team-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 clamp(1.1rem, 6cqw, 3rem);
}

.editorial-team-section .editorial-team-panel:has(.editorial-team-grid--names) .editorial-team-heading {
  margin-bottom: clamp(0.9rem, 4cqw, 2rem);
}

.editorial-team-section .editorial-team-slide-title {
  margin: 0;
  font-size: clamp(1.05rem, 3.4cqw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.editorial-team-section .editorial-team-subtitle {
  margin: 0;
  font-size: clamp(0.85rem, 2.5cqw, 1.15rem);
  font-weight: 700;
  line-height: 1.2;
}

/* Items wrap 3 per row (2 on narrow boards) and the last row centers itself */
.editorial-team-section .editorial-team-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.9rem, 4.4cqw, 3rem) 0;
}

.editorial-team-section .editorial-team-item {
  flex: 0 0 33.3333%;
  box-sizing: border-box;
  min-width: 0;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.editorial-team-section .editorial-team-role {
  font-size: clamp(0.75rem, 2.3cqw, 1.05rem);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: break-word;
  max-width: 100%;
}

.editorial-team-section .editorial-team-name {
  font-size: clamp(0.72rem, 2.2cqw, 1rem);
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.92;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Names only variant: 2 columns, tighter rows */
.editorial-team-section .editorial-team-grid--names {
  gap: clamp(0.45rem, 1.6cqw, 0.8rem) 0;
}

.editorial-team-section .editorial-team-grid--names .editorial-team-item {
  flex-basis: 50%;
}

.editorial-team-section .editorial-team-grid--names .editorial-team-name {
  font-size: clamp(0.75rem, 2.3cqw, 1.05rem);
  opacity: 1;
}

/* ---------- Board size steps (measured on the board, not the screen) ---------- */

/* Narrow board (phones, iPad portrait): 2 columns */
@container editorial-board (max-width: 500px) {
  .editorial-team-section .editorial-team-content {
    --pad-y: max(2.75rem, 14.5cqw);
    /* room between the text and the top / bottom edge of the board */
    --pad-x: max(1.25rem, 9cqw);
  }

  .editorial-team-section .editorial-team-item {
    flex-basis: 50%;
    padding: 0 0.3rem;
  }

  .editorial-team-section .editorial-team-grid {
    gap: clamp(0.85rem, 4cqw, 1.3rem) 0;
  }

  .editorial-team-section .editorial-team-role {
    font-size: clamp(0.76rem, 3.1cqw, 0.95rem);
  }

  .editorial-team-section .editorial-team-name {
    font-size: clamp(0.74rem, 2.9cqw, 0.9rem);
  }

  .editorial-team-section .editorial-team-grid--names .editorial-team-name {
    font-size: clamp(0.76rem, 3cqw, 0.92rem);
  }

  .editorial-team-section .editorial-team-heading {
    margin-bottom: clamp(1.25rem, 6.5cqw, 2rem);
  }
}

/* Very narrow board (small phones): everything in a single column */
@container editorial-board (max-width: 240px) {
  .editorial-team-section .editorial-team-item {
    flex-basis: 100%;
  }
}

/* ---------- Text glitch: every text has its own timing, strength and direction ---------- */

/* JS copies each text into data-glitch so two colored slices can be drawn on top of it */
.editorial-team-section [data-glitch] {
  --gl-k: calc(var(--item-amp, 1) * var(--item-dir, 1));
  position: relative;
}

.editorial-team-section [data-glitch]::before,
.editorial-team-section [data-glitch]::after {
  content: attr(data-glitch);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.editorial-team-section [data-glitch]::before {
  color: #ff3d6e;
}

.editorial-team-section [data-glitch]::after {
  color: #3de6ff;
}

/* Names glitch a moment after their role, so the pair never flickers in sync */
.editorial-team-section .editorial-team-name {
  --gl-offset: -0.5s;
}

/* Per-item variety: primes make the pattern hard to notice however many people you add */
.editorial-team-section .editorial-team-item:nth-child(5n+1) {
  --item-dur: 5.4s;
}

.editorial-team-section .editorial-team-item:nth-child(5n+2) {
  --item-dur: 6.8s;
}

.editorial-team-section .editorial-team-item:nth-child(5n+3) {
  --item-dur: 4.6s;
}

.editorial-team-section .editorial-team-item:nth-child(5n+4) {
  --item-dur: 7.4s;
}

.editorial-team-section .editorial-team-item:nth-child(5n+5) {
  --item-dur: 6.1s;
}

.editorial-team-section .editorial-team-item:nth-child(7n+1) {
  --item-delay: -0.3s;
}

.editorial-team-section .editorial-team-item:nth-child(7n+2) {
  --item-delay: -2.1s;
}

.editorial-team-section .editorial-team-item:nth-child(7n+3) {
  --item-delay: -4.4s;
}

.editorial-team-section .editorial-team-item:nth-child(7n+4) {
  --item-delay: -1.2s;
}

.editorial-team-section .editorial-team-item:nth-child(7n+5) {
  --item-delay: -3.3s;
}

.editorial-team-section .editorial-team-item:nth-child(7n+6) {
  --item-delay: -5.6s;
}

.editorial-team-section .editorial-team-item:nth-child(7n+7) {
  --item-delay: -0.9s;
}

.editorial-team-section .editorial-team-item:nth-child(3n+1) {
  --item-amp: 1;
}

.editorial-team-section .editorial-team-item:nth-child(3n+2) {
  --item-amp: 1.5;
}

.editorial-team-section .editorial-team-item:nth-child(3n+3) {
  --item-amp: 0.8;
}

.editorial-team-section .editorial-team-item:nth-child(even) {
  --item-dir: -1;
}

/* Slide title and sub title have their own rhythm */
.editorial-team-section .editorial-team-slide-title {
  --item-dur: 7.2s;
  --item-delay: -1.5s;
  --item-amp: 1.2;
}

.editorial-team-section .editorial-team-subtitle {
  --item-dur: 6.3s;
  --item-delay: -4s;
  --item-amp: 0.8;
  --item-dir: -1;
}

.editorial-team-section.is-fx-running [data-glitch] {
  animation: editorial-glitch-main var(--item-dur, 6s) steps(1, end) calc(var(--item-delay, 0s) + var(--gl-offset, 0s)) infinite;
}

.editorial-team-section.is-fx-running [data-glitch]::before {
  animation: editorial-glitch-red var(--item-dur, 6s) steps(1, end) calc(var(--item-delay, 0s) + var(--gl-offset, 0s)) infinite;
}

.editorial-team-section.is-fx-running [data-glitch]::after {
  animation: editorial-glitch-cyan var(--item-dur, 6s) steps(1, end) calc(var(--item-delay, 0s) + var(--gl-offset, 0s)) infinite;
}

/* No point animating slides that are not showing */
.editorial-team-section .editorial-team-panel[hidden] [data-glitch],
.editorial-team-section .editorial-team-panel[hidden] [data-glitch]::before,
.editorial-team-section .editorial-team-panel[hidden] [data-glitch]::after {
  animation: none;
}

/* Text is still and fully readable about 90% of the time, then a short burst */
@keyframes editorial-glitch-main {

  0%,
  88%,
  96%,
  100% {
    transform: none;
  }

  89% {
    transform: translate(calc(var(--gl-k) * -1px), 0) skewX(calc(var(--item-dir, 1) * -4deg));
  }

  90.5% {
    transform: translate(calc(var(--gl-k) * 1.5px), calc(var(--item-amp, 1) * -0.5px));
  }

  92% {
    transform: translate(calc(var(--gl-k) * -0.5px), 0) skewX(calc(var(--item-dir, 1) * 3deg));
  }

  94% {
    transform: translate(calc(var(--gl-k) * 1px), calc(var(--item-amp, 1) * 0.5px));
  }
}

@keyframes editorial-glitch-red {

  0%,
  88%,
  97%,
  100% {
    opacity: 0;
  }

  89% {
    opacity: 0.9;
    clip-path: inset(8% 0 62% 0);
    transform: translate(calc(var(--gl-k) * -2px), 0);
  }

  91% {
    opacity: 0.9;
    clip-path: inset(52% 0 18% 0);
    transform: translate(calc(var(--gl-k) * 2px), 0);
  }

  93% {
    opacity: 0.9;
    clip-path: inset(28% 0 42% 0);
    transform: translate(calc(var(--gl-k) * -1.5px), 0);
  }

  95% {
    opacity: 0.7;
    clip-path: inset(0 0 70% 0);
    transform: translate(calc(var(--gl-k) * 1px), 0);
  }
}

@keyframes editorial-glitch-cyan {

  0%,
  89%,
  97%,
  100% {
    opacity: 0;
  }

  89.5% {
    opacity: 0.9;
    clip-path: inset(60% 0 8% 0);
    transform: translate(calc(var(--gl-k) * 2px), 0);
  }

  91.5% {
    opacity: 0.9;
    clip-path: inset(15% 0 55% 0);
    transform: translate(calc(var(--gl-k) * -2px), 0);
  }

  93.5% {
    opacity: 0.9;
    clip-path: inset(40% 0 30% 0);
    transform: translate(calc(var(--gl-k) * 1.5px), 0);
  }

  95.5% {
    opacity: 0.7;
    clip-path: inset(70% 0 0 0);
    transform: translate(calc(var(--gl-k) * -1px), 0);
  }
}


/* ---------- Slide change glitch: short and soft, only when a button is pressed ---------- */

/* Old slide glitches out quickly */
.editorial-team-section .editorial-team-panel.is-glitch-out {
  animation: editorial-switch-out 0.16s steps(1, end) 1;
}

/* New slide glitches in, then settles */
.editorial-team-section .editorial-team-panel.is-switching {
  animation: editorial-switch-panel 0.5s steps(1, end) 1;
}

.editorial-team-section .editorial-team-panel.is-switching [data-glitch] {
  animation: editorial-switch-main 0.46s steps(1, end) var(--sw-delay, 0s) 1;
}

.editorial-team-section .editorial-team-panel.is-switching [data-glitch]::before {
  animation: editorial-switch-red 0.46s steps(1, end) var(--sw-delay, 0s) 1;
}

.editorial-team-section .editorial-team-panel.is-switching [data-glitch]::after {
  animation: editorial-switch-cyan 0.46s steps(1, end) var(--sw-delay, 0s) 1;
}

.editorial-team-section .editorial-team-panel.is-glitch-out [data-glitch]::before {
  animation: editorial-switch-red 0.16s steps(1, end) 1;
}

.editorial-team-section .editorial-team-panel.is-glitch-out [data-glitch]::after {
  animation: editorial-switch-cyan 0.16s steps(1, end) 1;
}

/* Small stagger so the texts glitch in a ripple instead of all at once */
.editorial-team-section .editorial-team-panel.is-switching .editorial-team-item:nth-child(8n+1) {
  --sw-delay: 0s;
}

.editorial-team-section .editorial-team-panel.is-switching .editorial-team-item:nth-child(8n+2) {
  --sw-delay: 0.04s;
}

.editorial-team-section .editorial-team-panel.is-switching .editorial-team-item:nth-child(8n+3) {
  --sw-delay: 0.08s;
}

.editorial-team-section .editorial-team-panel.is-switching .editorial-team-item:nth-child(8n+4) {
  --sw-delay: 0.12s;
}

.editorial-team-section .editorial-team-panel.is-switching .editorial-team-item:nth-child(8n+5) {
  --sw-delay: 0.06s;
}

.editorial-team-section .editorial-team-panel.is-switching .editorial-team-item:nth-child(8n+6) {
  --sw-delay: 0.1s;
}

.editorial-team-section .editorial-team-panel.is-switching .editorial-team-item:nth-child(8n+7) {
  --sw-delay: 0.02s;
}

.editorial-team-section .editorial-team-panel.is-switching .editorial-team-item:nth-child(8n+8) {
  --sw-delay: 0.14s;
}

@keyframes editorial-switch-out {
  0% {
    opacity: 1;
    transform: translate(-2px, 0) skewX(3deg);
    text-shadow: 1px 0 #ff3d6e, -1px 0 #3de6ff;
  }

  40% {
    opacity: 0.7;
    transform: translate(3px, 0) skewX(-3deg);
    text-shadow: -1px 0 #ff3d6e, 1px 0 #3de6ff;
  }

  75% {
    opacity: 0.85;
    transform: translate(-2px, 0);
    text-shadow: 1px 0 #ff3d6e, -1px 0 #3de6ff;
  }

  100% {
    opacity: 0;
    transform: translate(3px, 0) skewX(-4deg);
    text-shadow: none;
  }
}

@keyframes editorial-switch-panel {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
    transform: translate(3px, 0) skewX(-3deg);
    text-shadow: -1px 0 #ff3d6e, 1px 0 #3de6ff;
  }

  18% {
    opacity: 0.7;
    transform: translate(-3px, 0) skewX(2deg);
    text-shadow: 1px 0 #ff3d6e, -1px 0 #3de6ff;
  }

  30% {
    opacity: 1;
    transform: translate(2px, 0);
    text-shadow: -0.75px 0 #ff3d6e, 0.75px 0 #3de6ff;
  }

  44% {
    opacity: 0.9;
    transform: translate(-1px, 0);
    text-shadow: 0.5px 0 #ff3d6e, -0.5px 0 #3de6ff;
  }

  58%,
  100% {
    opacity: 1;
    transform: none;
    text-shadow: none;
  }
}

@keyframes editorial-switch-main {
  0% {
    transform: translate(calc(var(--item-dir, 1) * -3px), 0) skewX(-4deg);
  }

  14% {
    transform: translate(calc(var(--item-dir, 1) * 2.5px), 0) skewX(3deg);
  }

  28% {
    transform: translate(calc(var(--item-dir, 1) * -2px), 0);
  }

  42% {
    transform: translate(calc(var(--item-dir, 1) * 1.5px), 0) skewX(-2deg);
  }

  56% {
    transform: translate(calc(var(--item-dir, 1) * -0.5px), 0);
  }

  70%,
  100% {
    transform: none;
  }
}

@keyframes editorial-switch-red {
  0% {
    opacity: 0.6;
    clip-path: inset(0 0 55% 0);
    transform: translate(calc(var(--item-dir, 1) * -3px), 0);
  }

  12% {
    opacity: 0.6;
    clip-path: inset(45% 0 20% 0);
    transform: translate(calc(var(--item-dir, 1) * 3px), 0);
  }

  24% {
    opacity: 0.6;
    clip-path: inset(15% 0 60% 0);
    transform: translate(calc(var(--item-dir, 1) * -2px), 0);
  }

  38% {
    opacity: 0.55;
    clip-path: inset(60% 0 5% 0);
    transform: translate(calc(var(--item-dir, 1) * 2px), 0);
  }

  52% {
    opacity: 0.45;
    clip-path: inset(30% 0 40% 0);
    transform: translate(calc(var(--item-dir, 1) * -1px), 0);
  }

  66%,
  100% {
    opacity: 0;
  }
}

@keyframes editorial-switch-cyan {
  0% {
    opacity: 0.6;
    clip-path: inset(50% 0 0 0);
    transform: translate(calc(var(--item-dir, 1) * 3px), 0);
  }

  12% {
    opacity: 0.6;
    clip-path: inset(10% 0 60% 0);
    transform: translate(calc(var(--item-dir, 1) * -3px), 0);
  }

  24% {
    opacity: 0.6;
    clip-path: inset(55% 0 15% 0);
    transform: translate(calc(var(--item-dir, 1) * 2px), 0);
  }

  38% {
    opacity: 0.55;
    clip-path: inset(5% 0 65% 0);
    transform: translate(calc(var(--item-dir, 1) * -2px), 0);
  }

  52% {
    opacity: 0.45;
    clip-path: inset(40% 0 30% 0);
    transform: translate(calc(var(--item-dir, 1) * 1px), 0);
  }

  66%,
  100% {
    opacity: 0;
  }
}

/* Tablet landscape (small laptops): same layout, slightly wider board */
@media (min-width: 701px) and (max-width: 1024px) and (orientation: landscape) {
  .editorial-team-section .editorial-team-board {
    width: min(60vw, 560px);
  }
}

/* Tablet portrait (iPad): arrows beside the board, board grows smoothly with the screen */
@media (min-width: 701px) and (max-width: 1024px) and (orientation: portrait) {
  .editorial-team-section .editorial-team-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
  }

  .editorial-team-section .editorial-team-board {
    width: clamp(440px, 60vw, 500px);
  }
}

/* Phone: board on top, both arrows centered together underneath.
   The board keeps an even margin on its left and right, and the same air above the title and below the arrows on every phone size. */
@media (max-width: 700px) {
  .editorial-team-section .editorial-team-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .editorial-team-section .editorial-team-stage {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    justify-items: center;
    align-items: center;
    gap: var(--et-row-gap) 1.5rem;
  }

  .editorial-team-section .editorial-team-board {
    grid-area: 1 / 1 / 2 / 5;
    width: min(460px, calc(100% - 2 * var(--et-side)));
    max-width: none;
  }

  .editorial-team-section .editorial-team-btn {
    width: clamp(44px, 12vw, 56px);
    height: clamp(44px, 12vw, 56px);
  }

  .editorial-team-section .editorial-team-btn[data-editorial-prev] {
    grid-area: 2 / 2;
  }

  .editorial-team-section .editorial-team-btn[data-editorial-next] {
    grid-area: 2 / 3;
  }

  /* Uncomment to switch the scan effect off on phones (saves battery) */
  /*
  .editorial-team-section .editorial-team-fx {
    display: none;
  }
  */
}

@media (prefers-reduced-motion: reduce) {
  .editorial-team-section .editorial-team-btn {
    transition: none;
  }

  .editorial-team-section .editorial-team-fx {
    display: none;
  }

  .editorial-team-section .editorial-team-title-bg,
  .editorial-team-section .editorial-team-title-text {
    animation: none;
  }

  .editorial-team-section [data-glitch],
  .editorial-team-section [data-glitch]::before,
  .editorial-team-section [data-glitch]::after,
  .editorial-team-section .editorial-team-panel.is-glitch-out,
  .editorial-team-section .editorial-team-panel.is-switching {
    animation: none;
  }
}