/* ==========================================================================
   Team page. Loaded only by pages/team.html (via `extra_css` in its front
   matter), so selectors here cannot affect any other page.

   Type: the site's Helvetica stack carries body copy; headings use a system
   serif so the page reads as academic-editorial without a webfont request.
   Colour: warm neutrals rather than the theme's pure grey, plus one muted
   brick accent used sparingly for eyebrows and rules.
   ========================================================================== */

.team {
  --ink:      #22201d;
  --body:     #4b463f;
  --muted:    #7d746a;
  --rule:     #e4ded5;
  --paper:    #faf7f3;
  --accent:   #8a3b2f;
  --serif:    Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;

  --gutter:   clamp(16px, 4vw, 40px);
  --stack:    clamp(48px, 8vw, 104px);   /* space between major sections */
  --measure:  68ch;

  color: var(--body);
  font-size: 15px;
  line-height: 1.6;
}

/* This page supplies its own hero, so the theme's generic page header goes. */
.page-header { display: none; }

/* The layout's container is 700px; `wide: true` in the front matter opts this
   page into a wider measure without touching the rest of the site.

   `max-width` alone leaves no margin at all once the viewport is narrower than
   the cap, so between roughly 1000 and 1080px the content ran edge to edge.
   Capping at 82vw instead keeps at least 8% clear on each side at every
   desktop width, while still stopping at 1080px on a large monitor. Phones
   keep their own tighter gutter below. */
.container-wide { max-width: 1080px; }

@media (min-width: 600px) {
  .container-wide { max-width: min(1080px, 82vw); }
}

.team *, .team *::before, .team *::after { box-sizing: border-box; }
.team img { display: block; max-width: 100%; height: auto; }

.team h1, .team h2 { text-wrap: balance; }

/* --- section scaffolding -------------------------------------------------- */
.team-section { margin: var(--stack) 0 0; }
.team-section:first-child { margin-top: clamp(8px, 2vw, 20px); }

h2.team-eyebrow, .team-eyebrow {
  font-family: inherit;
  font-weight: bold;
  text-align: center;
  text-indent: 0.16em;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 clamp(18px, 2.6vw, 30px);
}


.team-lede {
  max-width: var(--measure);
  color: var(--muted);
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: clamp(14px, 1.5vw, 16px);
}

/* --- hero ----------------------------------------------------------------- */
.team-hero { padding: clamp(4px, 2vw, 18px) 0 clamp(20px, 3vw, 30px); }
/* The opening reel reads as part of the hero, so it gets a tighter gap. */
.team-hero + .team-section { margin-top: clamp(18px, 3vw, 40px); }

.team-hero h1 {
  font-family: inherit;
  font-size: clamp(19px, 3.4vw, 33px);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  /* letter-spacing adds a trailing gap; nudge back so it centres optically */
  text-indent: 0.2em;
  text-align: center;
  color: var(--ink);
  line-height: 1.25;
  margin: 0;
}


/* --- horizontal photo reel ------------------------------------------------ */
.team-reel-wrap { position: relative; }

.team-reel {
  display: flex;
  gap: clamp(10px, 1.6vw, 18px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.team-reel::-webkit-scrollbar { height: 6px; }
.team-reel::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }

.team-reel > figure {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
  width: 44%;
}
/* A little variation keeps the strip from reading as a filmstrip of clones. */
.team-reel > figure:nth-child(3n) { width: 30%; }

.team-reel .lp img {
  width: 100%;
  height: clamp(180px, 18vw, 255px);
  object-fit: cover;
  border-radius: 2px;
  background: var(--paper);
}

.team-reel figcaption {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.4;
}

.team-reel-nav {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
.team-reel-nav button {
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: border-color .15s ease, background .15s ease;
}
.team-reel-nav button:hover { border-color: var(--muted); background: var(--paper); }
.team-reel-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.team-reel-nav button[disabled] { opacity: .35; cursor: default; }

/* --- people --------------------------------------------------------------- */
.team-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 3vw, 36px) clamp(16px, 2.2vw, 28px);
}

/* Never let a portrait balloon past a sensible headshot size, whatever the
   column width works out to. */
.team-person figure { max-width: 280px; }

.team-person figure { margin: 0 0 12px; }

.team-person .lp img,
.team-initials {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}

/* Typeset initials stand in until a portrait is added. Muted, rotating tints
   so a grid of them reads as a considered pattern rather than a gap. */
.team-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: 0.04em;
  color: #6f6459;
  background: #efeae2;
  border: 1px solid var(--rule);
  user-select: none;
}
.team-person:nth-child(4n+2) .team-initials { background: #e9ece6; color: #63705f; }
.team-person:nth-child(4n+3) .team-initials { background: #f0e9e6; color: #7c635b; }
.team-person:nth-child(4n+4) .team-initials { background: #e8eaee; color: #5f6874; }

.team-person .name {
  font-family: var(--serif);
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 3px;
}
.team-person .name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.team-person .name a:hover,
.team-person .name a:focus-visible { color: var(--accent); border-bottom-color: currentColor; }

.team-person .role {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

/* --- people --------------------------------------------------------------- */
.team-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 3vw, 36px) clamp(16px, 2.2vw, 28px);
}

/* Never let a portrait balloon past a sensible headshot size, whatever the
   column width works out to. */
.team-person figure { max-width: 280px; }

.team-person figure { margin: 0 0 12px; }

.team-person .lp img,
.team-initials {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}

/* Typeset initials stand in until a portrait is added. Muted, rotating tints
   so a grid of them reads as a considered pattern rather than a gap. */
.team-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: 0.04em;
  color: #6f6459;
  background: #efeae2;
  border: 1px solid var(--rule);
  user-select: none;
}
.team-person:nth-child(4n+2) .team-initials { background: #e9ece6; color: #63705f; }
.team-person:nth-child(4n+3) .team-initials { background: #f0e9e6; color: #7c635b; }
.team-person:nth-child(4n+4) .team-initials { background: #e8eaee; color: #5f6874; }

.team-person .name {
  font-family: var(--serif);
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 3px;
}
.team-person .name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.team-person .name a:hover,
.team-person .name a:focus-visible { color: var(--accent); border-bottom-color: currentColor; }

.team-person .role {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

/* --- alumni --------------------------------------------------------------- */
/* Names in reverse chronological order with photographs interspersed,
   alternating sides on wide screens and stacking into one column on phones. */
.team-lane { display: grid; gap: clamp(18px, 3vw, 44px); margin-top: clamp(6px, 1.5vw, 14px); }
.team-lane-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}
.team-lane-row:nth-child(even) .team-lane-photo { order: -1; }
/* When the photographs run out, the remaining names take the full width. */
.team-lane-row.no-photo { grid-template-columns: 1fr; }

.team-lane-photo figure { margin: 0; }
.team-lane-photo .lp img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

.team-lane-list { list-style: none; margin: 0; padding: 0; }
.team-lane-list li { padding: 11px 0; border-bottom: 1px solid var(--rule); }
.team-lane-list li:first-child { padding-top: 0; }
.team-lane-list .name { display: block; font-family: var(--serif); font-size: 17px;
  color: var(--ink); margin-bottom: 2px; }
.team-lane-list .meta { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* --- joining ------------------------------------------------------------- */
.team-join {
  margin-top: var(--stack);
  background: var(--paper);
  border-top: 2px solid var(--ink);
  padding: clamp(24px, 3.4vw, 44px);
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(22px, 3.4vw, 48px);
  align-items: center;
}
.team-join h2 { margin-top: 0; text-align: left; text-indent: 0; }
.team-join p { max-width: 52ch; }
.team-join .lp img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }

.team-cta {
  display: inline-block;
  margin-top: 6px;
  padding: 12px 20px;
  min-height: 44px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  border-radius: 2px;
  font-size: 14px;
}
.team-cta:hover, .team-cta:focus-visible { background: var(--accent); color: #fff; text-decoration: none; }
.team-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ==========================================================================
   Responsive. Breakpoints chosen where these compositions actually break,
   not by device name.
   ========================================================================== */

/* Laptop: four columns become three before the portraits get too narrow. */
@media (max-width: 1000px) {
  .team-people { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet: two columns of people. */
@media (max-width: 760px) {
  .team-people { grid-template-columns: repeat(2, 1fr); }
  .team-reel > figure,
  .team-reel > figure:nth-child(3n) { width: 62%; }
  .team-join { grid-template-columns: 1fr; }
  .team-join .team-join-photo { order: -1; }
}

/* Phone: one vertical rhythm. The reel becomes touch-first and shows a sliver
   of the next frame; the alumni rows stop alternating and stack. */
@media (max-width: 600px) {
  .team { font-size: 15px; }

  .team-reel {
    scroll-snap-type: x proximity;
    gap: 10px;
    /* Bleed to the screen edges so the reel reads as swipeable. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-left: var(--gutter);
  }
  .team-reel > figure,
  .team-reel > figure:nth-child(3n) { width: 86vw; }
  .team-reel .lp img { height: auto; aspect-ratio: 4 / 3; }
  .team-reel-nav { display: none; }   /* swipe is the primary affordance */

  .team-people { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }




  .team-lane-row { grid-template-columns: 1fr; gap: 16px; }
  /* Photo always follows its alumni block on a phone - no side-swapping. */
  .team-lane-row:nth-child(even) .team-lane-photo { order: 0; }

  .team-join { padding: 22px 18px; }
}

/* Narrow phones: portraits get the full width so faces stay recognisable. */
@media (max-width: 380px) {
  .team-people { grid-template-columns: 1fr; gap: 0; }

  /* Portrait beside the name rather than above it: keeps faces recognisable,
     keeps names easy to scan, and stops the section running very long. */
  .team-person {
    display: grid;
    grid-template-columns: 104px 1fr;
    /* Named areas keep the role beside the portrait; with plain auto-flow it
       wrapped onto a second row underneath it. */
    grid-template-areas: "photo name" "photo role";
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rule);
  }
  .team-person figure { grid-area: photo; margin: 0; align-self: center; }
  .team-person .name { grid-area: name; align-self: end; }
  .team-person .role { grid-area: role; align-self: start; }
  .team-person .team-initials { font-size: 22px; }
  .team-person .name { margin-bottom: 3px; }

  .team-reel > figure,
  .team-reel > figure:nth-child(3n) { width: 88vw; }
}

@media (prefers-reduced-motion: no-preference) {
  .team-reel { scroll-behavior: smooth; }
}