/* ==========================================================================
   /team/ — departments index (`stack` variant "dept") + roster fixes

   Loaded only where site/stack_dept.py renders (the team page). Same tokens,
   hairlines and clay shadows as clay.css — nothing new in colour or type.

     · .dept        sticky department index left, the open department's
                    members right; a crossfade between departments
     · ≤ 940px      the same DOM as an accordion: the two columns become
                    `display: contents`, CSS `order` puts each panel under
                    its row, closed panels are display:none
     · .roster__none / .roster__group   markup build.py's roster emits that
                    clay.css never styled (the no-photo initials, group heads)
     · .phero__link the "Meet the leadership" arrow in the team hero's lede
   ========================================================================== */

/* ── hero: the link to /leadership/ sits on its own line under the lede ── */
.phero__lede .phero__link { display: flex; width: max-content; max-width: 100%; margin-top: 20px; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.dept { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 5vw, 88px); align-items: start; }
.dept__index { position: sticky; top: calc(var(--head-h) + 28px); border-top: 1px solid var(--line); }

/* ── index rows (the hairline .index-row idiom, as a button) ────────────── */
.dept__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: baseline;
  gap: 18px; width: 100%; padding: 19px 2px; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: inherit; font: inherit; cursor: pointer; text-align: left;
  transition: padding-left .3s var(--ease), background-color .3s var(--ease); }
.dept__row:hover, .dept__row:focus-visible, .dept__row[aria-selected="true"] {
  padding-left: 12px; background: rgba(255, 255, 255, .45); }
.dept__row:focus-visible { outline-offset: -2px; border-radius: 0; }
.dept__label { font: 350 clamp(1.25rem, 1.8vw, 1.625rem)/1.15 Newsreader, Georgia, serif;
  color: var(--ink); min-width: 0; overflow-wrap: break-word; }
.dept__tag { font: 500 11px/1.7 Inter, sans-serif; letter-spacing: .14em;   /* as written: "vCFO", not VCFO */
  color: var(--ink-faint); white-space: nowrap; }
.dept__n { font: 500 12px/1.8 Inter, sans-serif; letter-spacing: .14em; color: var(--ink-soft);
  text-align: right; font-variant-numeric: tabular-nums; transition: color .3s var(--ease); }
.dept__row[aria-selected="true"] .dept__n { color: var(--bronze-deep); }
.dept__chev { display: none; color: var(--bronze-deep); align-self: center;
  transition: transform .3s var(--ease); }
.dept__more { padding: 22px 2px; border-bottom: 1px solid var(--line);
  font: 400 14px/1.6 Inter, sans-serif; color: var(--ink-soft); }

/* ── the stage: every panel in the same cell, one visible ───────────────── */
.dept__stage { display: grid; min-width: 0; }
.dept__panel { grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0);
  transition: opacity .36s var(--ease), transform .36s var(--ease), visibility 0s linear .36s; }
.dept__panel[data-on="true"] { opacity: 1; visibility: visible; transform: none;
  transition: opacity .36s var(--ease) .06s, transform .36s var(--ease) .06s, visibility 0s; }
.dept__panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 0 2px 16px; border-bottom: 1px solid var(--line); }
.dept__panel-label { font: 400 1.25rem/1.2 Newsreader, Georgia, serif; color: var(--ink); }
.dept__panel-n { font: 500 10.5px/1.6 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bronze-deep); white-space: nowrap; }

/* ── members: name over role, two/three columns as the width allows ─────── */
.dept__list { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); column-gap: clamp(20px, 3vw, 40px); }
.dept__m { display: grid; row-gap: 4px; padding: 15px 2px 14px; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.dept__name { font: 350 clamp(1.0625rem, 1.3vw, 1.25rem)/1.2 Newsreader, Georgia, serif; color: var(--ink);
  overflow-wrap: anywhere; }
.dept__role { font: 500 10.5px/1.6 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); }

/* ── ≤ 940px: accordion — same DOM, each panel under its row ────────────── */
@media (max-width: 940px) {
  .dept { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .dept__index, .dept__stage { display: contents; }
  .dept__row { order: calc(var(--i, 0) * 2); grid-template-columns: minmax(0, 1fr) auto 36px 14px; gap: 14px; }
  .dept__chev { display: block; }
  .dept__row[aria-selected="true"] .dept__chev { transform: rotate(180deg); }
  .dept__panel { order: calc(var(--i, 0) * 2 + 1); grid-area: auto; transform: none; transition: none; }
  .dept__panel:not([data-on="true"]) { display: none; }
  .dept__panel[data-on="true"] { opacity: 1; visibility: visible; padding: 4px 0 26px;
    border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .22); }
  .dept__panel-head { display: none; }
  .dept__more { order: 99; }
  .dept__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; padding: 0 12px; }
}
@media (max-width: 600px) {
  .dept__list { grid-template-columns: minmax(0, 1fr); padding: 0 10px; }
  .dept__m { padding: 13px 2px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dept__panel, .dept__panel[data-on="true"] { transition: none; transform: none; }
}

/* ── roster: markup the renderer emits that clay.css does not style ─────── */
/* the no-photo stage: initials on the warm block, shown only for a row without a portrait */
.roster__none { position: absolute; inset: 0; display: grid; place-items: center;
  font: 300 clamp(3rem, 7vw, 5.5rem)/1 Newsreader, Georgia, serif; letter-spacing: .04em;
  color: var(--bronze-deep); opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.roster__none.on { opacity: 1; }
/* group heads (when the roster is grouped): tag + count on one hairline row */
.roster__group { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 26px 2px 10px; border-bottom: 1px solid var(--line); }
.roster__group-tag { font: 500 10.5px/1 Inter, sans-serif; letter-spacing: .26em; text-transform: uppercase;
  color: var(--bronze-deep); }
.roster__group-n { font: 500 12px/1 Inter, sans-serif; letter-spacing: .12em; color: var(--ink-faint); }

/* ── roster ≤ 940px: keep the sticky stage smaller than the viewport ──────
   clay.css stacks the stage above the list and keeps it sticky, but lets it
   span the whole shell: on a tablet the 3:4 frame is ~1000px tall, covers the
   viewport, and the names scroll underneath it — untappable (measured at
   834×1112). From 601px the two sit side by side again (the desktop 5/7);
   on phones the portrait is capped so rows stay visible beneath it. */
@media (max-width: 940px) and (min-width: 601px) {
  .roster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 48px); }
}
@media (max-width: 600px) {
  /* the sticky stage is a real slab: the sunk ground behind it, full-bleed,
     so the names scrolling underneath never show through the portrait or
     the caption; the frame itself is capped so ~3 rows stay visible below */
  .roster__stage { position: sticky; top: var(--head-h); z-index: 2;
    margin: 0 calc(-1 * var(--gutter)); padding: 16px var(--gutter) 14px;
    background: var(--ground-sink); }
  .roster__stage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px;
    background: linear-gradient(var(--ground-sink), rgba(235, 229, 216, 0)); pointer-events: none; }
  .roster__frame { max-width: 240px; }
}