/* Muted portrait strips, a lifted selection and a scroll-led team entrance. */
.teacher-spotlight { display: none; }
.teacher-room-dimmer, .teacher-stage-light { display: none; }
@media (max-width: 700px) {
  .teacher-room-dimmer { display: block; position: fixed; inset: 0; z-index: 1; background: #030305; opacity: var(--teacher-room-dim, 0); pointer-events: none; }
  #teachers { --teacher-accent: #cc8548; position: relative; isolation: isolate; z-index: 2;
    --teacher-lit-ink: color-mix(in srgb, var(--ink), #f6eee5 calc(var(--teacher-stage-on, 0) * 100%));
    --teacher-lit-dim: color-mix(in srgb, var(--ink-dim), #c3b8aa calc(var(--teacher-stage-on, 0) * 100%));
    --teacher-lit-accent: color-mix(in srgb, var(--accent-text), #e4a168 calc(var(--teacher-stage-on, 0) * 100%));
  }
  .teacher-stage-light { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; filter: blur(22px); opacity: var(--teacher-stage-on, 0); }
  .teacher-stage-light::before { content: ''; position: absolute; left: var(--teacher-beam-x, 35%); top: var(--teacher-light-top, 220px); width: 90%; height: var(--teacher-light-height, 220px); transform: translateX(-50%); transition: left .7s cubic-bezier(.22,1,.36,1);
    background: radial-gradient(ellipse at 50% 25%, #f3eee21a, #eee5d508 42%, transparent 72%);
  }
  #teachers.teacher-stage-ready > .section__head,
  #teachers.teacher-stage-ready > .tacc-row,
  #teachers.teacher-stage-ready > #teacher-nav,
  #teachers.teacher-stage-ready > .teacher-spotlight { opacity: var(--teacher-reveal, 1); translate: 0 calc((1 - var(--teacher-reveal, 1)) * 28px); }
  #teachers.teacher-stage-ready > .section__head { translate: 0 calc((1 - var(--teacher-reveal, 1)) * 14px); }
  #teachers.teacher-stage-ready:has(:focus-visible) > .section__head,
  #teachers.teacher-stage-ready:has(:focus-visible) > .tacc-row,
  #teachers.teacher-stage-ready:has(:focus-visible) > #teacher-nav,
  #teachers.teacher-stage-ready:has(:focus-visible) > .teacher-spotlight { opacity: 1; translate: none; }
  #teachers .section__title { color: var(--teacher-lit-ink); }
  #teachers .section__eyebrow { color: var(--teacher-lit-accent); }
  #teachers .tacc-nav__b { color: var(--teacher-lit-dim); }
  #teachers .tacc-row { display: grid; grid-template-columns: 44px 1fr 44px; column-gap: 8px; align-items: center; }
  #teacher-grid {
    grid-column: 1 / -1; grid-row: 1; display: flex; gap: 0; width: 100%;
    height: clamp(320px, 92vw, 440px); margin: 0; padding: 0;
    overflow: visible; scroll-snap-type: none; background: transparent; touch-action: pan-y;
  }
  #teacher-grid::after { content: none; }
  #teacher-grid .teacher-card,
  #teacher-grid .teacher-card:hover,
  #teacher-grid .teacher-card.is-open {
    position: relative; flex: 1 1 0; min-width: 0; padding: 0; gap: 0; z-index: 0;
    border: 0; border-radius: 0; border-right: 1px solid #ffffff3d;
    background: transparent; box-shadow: none; transform: none; animation: none;
    overflow: hidden; cursor: pointer;
    mask-image: linear-gradient(180deg, transparent, #000 13%, #000 86%, transparent);
    transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease, border-radius .55s ease;
  }
  #teacher-grid .teacher-card.is-open {
    z-index: 3; transform: translateY(-5px) skewX(-3deg) scale(1.08, 1.035); border-radius: 0;
    background: transparent; border-right-color: transparent;
    box-shadow: -12px 3px 18px -12px #000b, 12px 3px 18px -12px #000b;
  }
  #teacher-grid .teacher-card:last-child { border-right: 0; }
  #teacher-grid .teacher-card.is-off { display: none; }
  #teacher-grid .teacher-card__photo, #teacher-grid .teacher-card__ph {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0;
    object-fit: cover; object-position: 50% 32%;
    mask-image: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent);
    filter: grayscale(.68) saturate(.72) brightness(.96) contrast(.96);
    transition: filter .42s ease, transform .6s cubic-bezier(.22,1,.36,1);
  }
  #teacher-grid .teacher-card__ph { background: #343132; color: #c3bab3; box-shadow: none; font-size: 44px; }
  #teacher-grid .teacher-card.is-open .teacher-card__photo,
  #teacher-grid .teacher-card.is-open .teacher-card__ph { filter: grayscale(0) brightness(1) contrast(1); transform: skewX(3deg) scale(1.06); }
  /* Focal positions belong to these photos; replacement uploads return to centre. */
  #teacher-grid .teacher-card__photo[src*="1784963802772_Fiona_icon"] { object-position: 20% 32%; }
  #teacher-grid .teacher-card__photo[src*="1783591338202_"] { object-position: 11% 32%; }
  #teacher-grid .teacher-card.is-open .teacher-card__ph { color: #e3b080; background: #30251d; }
  #teacher-grid .teacher-card::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, #0b0b0c85 0%, transparent 32%, #0b0b0c33 56%, #0b0b0cf5 100%);
  }
  #teacher-grid .teacher-card::after {
    content: ''; position: absolute; inset: 0; border: 0;
    background: linear-gradient(128deg, transparent 47%, #ede7dd85 49%, #ede7dd85 51%, transparent 53%) left 2px top 8px / 22px 30px no-repeat,
      linear-gradient(128deg, transparent 47%, #ede7dd65 49%, #ede7dd65 51%, transparent 53%) right 2px bottom 8px / 22px 30px no-repeat;
    z-index: 3; pointer-events: none; box-shadow: none; opacity: 0;
    transition: opacity .45s ease;
  }
  #teacher-grid .teacher-card.is-open::after { opacity: 1; transform: none; }
  #teacher-grid .teacher-card__heading { display: block; position: absolute; bottom: 15%; left: 4px; right: 4px; z-index: 2; transform: none; color: #f3efeb; text-align: center; pointer-events: none; }
  #teacher-grid .teacher-card__heading span { display: none; }
  #teacher-grid .teacher-card__heading strong { display: block; font: 600 clamp(10px, 2.7vw, 13px)/1.4 var(--font-tc), sans-serif; writing-mode: horizontal-tb; transform: none; white-space: normal; letter-spacing: 0; text-wrap: balance; }
  #teacher-grid .teacher-card.is-open .teacher-card__heading { transform: skewX(3deg); }
  #teacher-grid .teacher-card__number { display: block; position: absolute; top: 13%; left: 0; right: 0; z-index: 2; text-align: center; font: 500 10px/1 var(--font-latin); letter-spacing: .1em; color: #dbd7d2; }
  #teacher-grid .teacher-card.is-open .teacher-card__number { color: #efb888; }
  #teacher-grid .teacher-card__body { display: none; }
  #teacher-grid .teacher-card:focus-visible { outline: 2px solid #efb888; outline-offset: -4px; }
  #teachers .tacc-nav__b { display: grid; grid-row: 2; width: 44px; height: 44px; margin-top: 10px; }
  #teachers #tacc-prev { grid-column: 1; }
  #teachers #tacc-next { grid-column: 3; }
  #teacher-nav { display: flex; height: 44px; margin: -44px 52px 0; gap: 24px; }
  #teacher-nav .tacc-nav__d::after { background: var(--teacher-lit-dim); }
  #teacher-nav .tacc-nav__d.is-on::after { background: var(--teacher-accent); }
  #teacher-nav .tacc-nav__d::before { inset: -17.5px -10px; }
  .teacher-spotlight {
    display: block; min-height: 132px; padding: 20px 0 0; margin-top: 8px;
    border-top: 1px solid var(--glass-border);
  }
  .teacher-spotlight__hint { color: var(--teacher-lit-dim); font-size: 14px; margin: 0; }
  .teacher-spotlight__head { display: flex; align-items: baseline; gap: 12px; }
  .teacher-spotlight__head strong { color: var(--teacher-lit-ink); font-size: 24px; font-weight: 800; line-height: 1.3; }
  .teacher-spotlight__head small { color: var(--teacher-lit-dim); font-size: 12px; }
  .teacher-spotlight p { margin: 8px 0 0; color: var(--teacher-lit-dim); font-size: 14px; line-height: 1.7; }
  .teacher-spotlight__link { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; margin-top: 8px; padding: 0; border: 0; background: transparent; color: var(--teacher-lit-accent); font: 600 13px/1.4 var(--font-tc),sans-serif; cursor: pointer; }
  #teacher-grid.is-leaving { pointer-events: none; animation: teacherMobileOut .16s ease-in both; }
  #teacher-grid.is-entering { animation: teacherMobileIn .32s cubic-bezier(.22,1,.36,1) both; }
  @keyframes teacherMobileOut { to { opacity: 0; transform: translateX(calc(var(--tacc-direction, 1) * -14px)); } }
  @keyframes teacherMobileIn { from { opacity: 0; transform: translateX(calc(var(--tacc-direction, 1) * 14px)); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  #teacher-grid, #teacher-grid .teacher-card, #teacher-grid .teacher-card::after, #teacher-grid .teacher-card__photo { animation: none !important; transition: none !important; }
  .teacher-stage-light::before { transition: none; }
  #teachers.teacher-stage-ready > .section__head,
  #teachers.teacher-stage-ready > .tacc-row,
  #teachers.teacher-stage-ready > #teacher-nav,
  #teachers.teacher-stage-ready > .teacher-spotlight { opacity: 1; translate: none; }
}