/* ============================================================
   Directors & Creators (/team). Links after core.css.
   Split out of the former style.css on 2026-10-18; rules unchanged, in their
   original order. ============================================================ */

/* ============================================================
   Team page layout — sticky sidebar + 2-col card grid.
   Light theme, same pattern as work-all.
   ============================================================ */
body.team { background: var(--bg); color: var(--fg); }
.team .site-header { position: static; pointer-events: auto; background: var(--bg); }

.team-main {
  position: relative;
  z-index: 1;
  background: var(--bg);
}

.team-layout {
  display: flex;
  padding: 4.17vw 10px;
  gap: 10px;              /* 80px top @ 1920 */
}

/* Left sidebar — sticky, ~50% width */
.team-sidebar {
  position: sticky;
  top: 10px;
  align-self: flex-start;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;                          /* Figma: 40px between title and filters */
}

.team-sidebar-title {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: var(--lh-link);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Filter buttons — vertical stack, serif 72px (3.75vw) */
.team-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;                           /* Figma: 8px between filter items */
  font-family: var(--ff-serif);
  font-weight: 400;
  letter-spacing: -0.03em;
  font-size: 3.75vw;                  /* 72px @ 1920 */
  line-height: 1;
}

.team-filter-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  opacity: 0.5;
}

.team-filter-btn.is-active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: var(--ul-offset);
  text-decoration-thickness: var(--ul-thickness);
}

.team-filter-btn:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: var(--ul-offset);
  text-decoration-thickness: var(--ul-thickness);
}

/* Count superscripts */
.team-filter-btn sup {
  display: inline-block;
  font-weight: 400;
  font-size: 0.6em;
  margin-left: 0.15em;
  vertical-align: super;
}
.team-filter-btn sup::before { content: '('; }
.team-filter-btn sup::after  { content: ')'; }

/* Right column — card grid */
.team-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 10px;                     /* Figma: 20px row, 10px column */
  align-items: start;
}

/* Post's services list reads as the homepage footer's directory lists: the
   same serif (from the DISPLAY group), the same H2 size and leading, 4px between
   items, the same hover. Colour is not set here: the page's ground supplies it.
   (About's lists shared this until 2026-09-24; the About panel's are the 12px
   italic .about-list now.) */

/* ---- Mobile layout (≤48em) — MUST stay last in this sheet: media queries
   add no specificity, so source order decides. ---- */
@media (max-width: 48em) {
  /* Team page — collapse to single column with sticky filter bar */
  .team-layout {
    flex-direction: column;
    gap: 40px;
    padding: 12.82vw 10px 10.26vw;    /* 50px top, 40px bottom @ 390 */
  }
  .team-sidebar {
    position: static;                 /* not sticky in the single-column mobile layout —
                                         a sticky sidebar let the grid scroll through it and
                                         triggered the black/paint corruption on scroll */
    flex: none;
    align-self: stretch;
    padding: 10px 0;
    gap: 20px;
  }
  /* Filters wrap horizontally (same as work-all mobile) */
  .team-filter {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 7.18vw;                /* 28px @ 390 — matches work-all mobile */
  }
  .team-grid {
    padding: 0;
    gap: 20px 10px;                    /* 20px row, 10px column */
  }
}

/* ============================================================
   Directors & Creators — /team/: the dark ground, the header in flow at the top
   like /work/'s, the roster once, the wordmark footer, and the hover still as a
   card over the names. (The full-bleed still, the endless scroll and the nav
   popup that ran it are archived — archive/site-variants-2026-09/.)
   ============================================================ */
body.team-page { background: var(--bg); color: var(--fg); }
/* An ordinary page that ends, so the header is static, not fixed over the
   names, and the phone's MENU is just the site's. */
.team-page .site-header { position: static; pointer-events: auto; }


/* ============================================================
   The rows (team-axis.js): the Figma layout (1927:2430 · 1927:2608). One
   director | creator pair per row in two static columns — DIRECTORS left-aligned
   from the column-3 line, CREATORS right-aligned to column 10's far edge, of a
   12-col / 10px-gutter grid: the row is inset two columns (and their gutters)
   each side, and each name is pushed to the outer edge of its half. On phones the
   two lists stack instead — Directors, then Creators below, centred, 24px names.
   ============================================================ */
.axis-main {
  display: block;                      /* not the homepage main's hero grid */
  min-height: 0;                       /* not the site-wide main { min-height: 100svh } */
  /* The page's growing child (as .page-main is in the inner-page recipe,
     core.css): a short roster still puts the wordmark at the foot of the
     screen, with the air above it (user, 2026-10-18). */
  flex: 1 0 auto;
  padding: 0 var(--pad-inline);
}

.axis-list,
.axis-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Starts the same distance below the header as /work/'s masthead does
   (.work-all-bar's margin-top), and ends like /work/ too: the footer follows the
   last name at the footer's own padding (45px @ 1920, 12px on phones). */
.axis-list {
  padding-top: var(--page-top);        /* 80px @ 1920, 60px @ 390 — every page head's (core.css) */
  padding-bottom: 4.17vw;              /* 80px @ 1920 above the footer's own padding */
  font-size: 3.75vw;                   /* 72px @ 1920 — the name size */
  line-height: var(--lh-h1);
  opacity: 0;                          /* until team-axis.js has placed the rows */
  transition: opacity 0.6s ease;
}
.axis-list.is-ready { opacity: 1; }
/* No JS, no rows — nothing to hide. */
@media (scripting: none) { .axis-list { opacity: 1; } }

/* Spacing is a margin on the row rather than a gap on the list, so it reads
   the same inside the nested section. */
.axis-row {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;                  /* between names, at every width */
  gap: 10px;
  padding-inline: calc((100% - 110px) / 12 * 2 + 20px);
}
.axis-side { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.axis-side--director { text-align: left; }    /* out to the column-3 line (Directors left, user 2026-10-19) */
.axis-side--creator  { text-align: right; }   /* out to column 10's far edge */

/* A name's hover box is exactly its row's pitch, and it is a BOX, not the glyphs.
   As a plain inline span its hit area was the font's content area — ~13px
   taller than the 1.0 line — so neighbouring names overlapped by ~9px and on
   that band the pointer was over two names at once. inline-block makes the box
   the line; the 2px of padding pulled back by the negative margin extends it
   over half the 4px between rows, so neighbours meet edge to edge — one
   boundary, no dead gap — without moving anything.
   That still left the text itself: it hit-tests on the font's content area,
   which spills ~6px past the box at each end, so the bottom of one name and the
   top of the next both claimed the same band. Which one won was paint order,
   and the hover changes paint order — the dimmed neighbour (opacity .1) becomes
   a stacking context and paints over the opaque active one — so every swap
   handed the band to the other name, Chrome re-tested the hover after the
   style change, and the two strobed at frame rate with the pointer perfectly
   still (measured 2026-09-24: 7,000 pointerover events in a few seconds).
   Text with no pointer events plus a pseudo-element that is exactly the padding
   box gives one boundary, fixed in geometry, with nothing for the hover state
   to move. position: relative is also what lets the hovered name take a
   z-index over the card. */
.axis-name {
  display: inline-block;
  position: relative;
  line-height: var(--lh-h1);
  padding-block: 2px;
  margin-block: -2px;
  pointer-events: none;
}
.axis-name::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

/* The column labels: a row like any other, in the 12px label type, sitting the
   label gap above the first names. */
.axis-row--labels {
  margin-bottom: 2.08vw;               /* 40px @ 1920 */
  letter-spacing: -0.01em;             /* the label tracking, not the serif's -0.03em */
}

/* Phones: one centred column, Directors then Creators below (user, 2026-11-03).
   The markup pairs a director and a creator per row, so the rows dissolve
   (display: contents) and every creator half is ordered after every director
   half — the Creators label first, being earliest in the DOM. The row's spacing
   moves onto the halves; the shorter list's blank halves drop out. */
@media (max-width: 48em) {
  .axis-list { font-size: 6.15vw; }                   /* 24px @ 390, per the mobile board */
  .axis-section > ul { display: flex; flex-direction: column; align-items: center; }
  .axis-row { display: contents; }
  .axis-side { flex: none; text-align: center; margin-bottom: 4px; }
  .axis-side:empty { display: none; }
  .axis-side--creator { order: 1; }
  .axis-row--labels .axis-side { margin-bottom: 20px; }
  .axis-row--labels .axis-side--creator { margin-top: 15.38vw; }   /* 60px @ 390 between the lists */
}