/* ==========================================================================
   4BIT DIGITAL STUDIO — team.css
   The people pages: the directory (team.php), the individual profile
   (member.php), and the member card the About teaser shares with both.
   Loaded only by those three pages, last, so it can lean on everything in
   tokens / components / sections / pages.
   ========================================================================== */

/* ==========================================================================
   COLOURWAYS
   Six deterministic palettes, picked from the member's name in PHP so the
   same person is the same colour on the card, the profile and the preview.
   ========================================================================== */
.member__frame[data-art="1"], .profile[data-art="1"], .roster__preview[data-art="1"] { --a1: rgba(245, 69, 58,.55); --a2: rgba(58,22,34,.92); --a3: rgba(18,12,22,.98); }
.member__frame[data-art="2"], .profile[data-art="2"], .roster__preview[data-art="2"] { --a1: rgba(64,120,255,.50); --a2: rgba(20,30,66,.92); --a3: rgba(10,14,28,.98); }
.member__frame[data-art="3"], .profile[data-art="3"], .roster__preview[data-art="3"] { --a1: rgba(255,140,48,.50); --a2: rgba(56,30,18,.92); --a3: rgba(20,14,12,.98); }
.member__frame[data-art="4"], .profile[data-art="4"], .roster__preview[data-art="4"] { --a1: rgba(38,205,170,.45); --a2: rgba(12,44,48,.92); --a3: rgba(8,20,24,.98); }
.member__frame[data-art="5"], .profile[data-art="5"], .roster__preview[data-art="5"] { --a1: rgba(160,72,255,.50); --a2: rgba(36,20,62,.92); --a3: rgba(14,10,26,.98); }
.member__frame[data-art="6"], .profile[data-art="6"], .roster__preview[data-art="6"] { --a1: rgba(234,42,128,.55); --a2: rgba(54,16,44,.92); --a3: rgba(18,10,20,.98); }

/* ==========================================================================
   MEMBER CARD
   A portrait tile with the short profile floating on a glass plate over it.
   The whole tile is one link to that member's page; the quick-look button
   is a sibling, because a button inside an anchor is invalid markup.
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr));
  gap: clamp(1.1rem, 2.5vw, 1.9rem);
}
.team-grid--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.team-grid[hidden] { display: none; }

.member {
  position: relative;
  display: grid;
  gap: .8rem;
  align-content: start;
  transform-style: preserve-3d;
  transition: opacity .45s var(--e-out), transform .45s var(--e-out);
}
.member.is-filtered {
  position: absolute;
  opacity: 0;
  transform: scale(.94);
  visibility: hidden;
  pointer-events: none;
}

.member__open { display: block; border-radius: var(--r-lg); }
.member__open:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 6px; }

.member__frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--glass-brd);
  background:
    radial-gradient(120% 90% at 78% 6%, var(--a1, rgba(245,69,58,.5)) 0%, transparent 58%),
    linear-gradient(165deg, var(--a2, rgba(40,20,34,.9)) 0%, var(--a3, rgba(16,12,22,.98)) 100%);
  transition:
    transform var(--d-mid) var(--e-out),
    box-shadow var(--d-mid) var(--e-out),
    border-color var(--d-mid);
}
.member__open:hover .member__frame,
.member__open:focus-visible .member__frame {
  transform: translateY(-6px);
  border-color: var(--glass-brd-hi);
  box-shadow: 0 32px 70px -28px rgba(var(--brand-rgb, 238 46 92), .85);
}

/* initTilt writes --mx/--my on [data-tilt]; the frame inherits them */
.member__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.16), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-mid) var(--e-out);
}
.member:hover .member__frame::after { opacity: 1; }

/* slow drifting light behind the portrait */
.member__aura {
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 210deg, transparent, var(--a1, rgba(245,69,58,.5)), transparent 60%);
  filter: blur(38px);
  opacity: .55;
  animation: auraDrift 22s linear infinite;
  pointer-events: none;
}
@keyframes auraDrift { to { rotate: 1turn; } }

.member__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.92);
  transition: filter var(--d-mid) var(--e-out), transform var(--d-slow) var(--e-out);
}
.member__open:hover .member__img { filter: none; transform: scale(1.06); }

/* Parked above the plate rather than centred in the frame, or the plate
   crops them in half. Directory cards carry a bio, so their plate is taller. */
.member__initials {
  position: absolute;
  left: 50%; top: 34%;
  translate: -50% -50%;
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -.04em;
  color: rgba(255,255,255,.88);
  text-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.member--directory .member__initials { top: 28%; }

.member__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at 50% 32%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 32%, #000 10%, transparent 72%);
  pointer-events: none;
}

/* scanlines, plus a light bar that sweeps down on hover */
.member__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  opacity: .55;
  pointer-events: none;
  overflow: hidden;
}
.member__scan::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -45%;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.22), transparent);
  opacity: 0;
}
.member__open:hover .member__scan::after { opacity: 1; animation: memberSweep 1.15s var(--e-out); }
@keyframes memberSweep { from { top: -45%; } to { top: 115%; } }

.member__rank {
  position: absolute;
  top: .8rem; left: .95rem;
  z-index: 4;
  font-family: var(--f-mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: rgba(255,255,255,.6);
  text-shadow: 0 2px 14px rgba(0,0,0,.7);
  transition: color var(--d-fast);
}
.member__open:hover .member__rank { color: #fff; }

/* ---- the floating glass plate ------------------------------------------- */
.member__plate {
  position: absolute;
  left: .55rem; right: .55rem; bottom: .55rem;
  z-index: 4;
  display: grid;
  gap: .26rem;
  padding: .8rem .9rem .85rem;
  border-radius: calc(var(--r-lg) - 9px);
  background: linear-gradient(180deg, rgba(7,10,17,.52), rgba(7,10,17,.8));
  box-shadow: 0 12px 32px -18px rgba(0,0,0,.95);
  transition: transform var(--d-mid) var(--e-out), background var(--d-mid);
}
.member__open:hover .member__plate {
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(7,10,17,.62), rgba(7,10,17,.88));
}

.member__tags { display: flex; align-items: center; gap: .45rem; margin-bottom: .1rem; }
.member__dept {
  font-family: var(--f-mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.member__lead-tag {
  font-family: var(--f-mono);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  padding: .2em .5em;
  border-radius: 4px;
  background: var(--brand-grad);
}

.member__name {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.14;
  color: var(--text);
  transition: color var(--d-fast);
}
.member__open:hover .member__name { color: #fff; }

.member__role { font-size: var(--t-xs); color: var(--text-soft); line-height: 1.45; }

.member__cue {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-family: var(--f-mono);
  font-size: .57rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.member__cue svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: translate var(--d-fast) var(--e-out);
}
.member__open:hover .member__cue svg { translate: 3px -3px; }

/* ---- quick-look button --------------------------------------------------- */
.member__peek {
  position: absolute;
  top: .7rem; right: .7rem;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--text-soft);
  background: rgba(7,10,17,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: .72;
  transition: opacity var(--d-fast), color var(--d-fast), background-color var(--d-fast), transform var(--d-fast) var(--e-spring);
}
.member:hover .member__peek { opacity: 1; }
.member__peek:hover, .member__peek:focus-visible {
  opacity: 1;
  color: #fff;
  background: var(--brand-2);
  transform: scale(1.08);
}
.member__peek svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

.chips--sm { padding-top: 0; }
.chips--sm li { padding: .26em .66em; font-size: .6rem; }
.member__socials { gap: .35rem; }
.member__socials a { width: 30px; height: 30px; border-radius: 9px; }
.member__socials a svg { width: 13px; height: 13px; }

/* ==========================================================================
   DIRECTORY HERO
   ========================================================================== */
.phero--roster { padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }

.roster-rings { position: absolute; inset: 0; pointer-events: none; }
.roster-rings i {
  position: absolute;
  top: 12%; left: 50%;
  translate: -50% -50%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.055);
}
.roster-rings i:nth-child(1) { width: min(560px, 82vw); }
.roster-rings i:nth-child(2) {
  width: min(900px, 128vw);
  border-style: dashed;
  border-color: rgba(255,255,255,.05);
  animation: ringSpin 110s linear infinite;
}
.roster-rings i:nth-child(3) { width: min(1300px, 175vw); border-color: rgba(255,255,255,.035); }
@keyframes ringSpin { to { rotate: 1turn; } }

/* Outlined names scrolling past, so the roster announces itself before the
   grid does. Purely decorative — the band is aria-hidden. */
.ticker--names {
  border-block-color: rgba(255,255,255,.055);
  background: rgba(255,255,255,.012);
  padding: clamp(.9rem, 2vw, 1.5rem) 0;
}
.ticker--names .ticker__group { gap: 2.4rem; padding-right: 2.4rem; }
.ticker--names .ticker__group span {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1rem + 2.2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.035em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.24);
  transition: color var(--d-fast), -webkit-text-stroke-color var(--d-fast);
}
.ticker--names:hover .ticker__group span { -webkit-text-stroke-color: rgba(255,255,255,.4); }
.ticker--names .ticker__group em { width: 7px; height: 7px; border-radius: 50%; }

/* ==========================================================================
   DIRECTORY TOOLBAR
   ========================================================================== */
.directory { position: relative; }

.directory__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1rem;
  margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
}

/* The search box, the layout switch and the empty-state line moved into
   components.css when the shop shelf started using the same three. */

.directory__count {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.directory__count b {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
}

.filters--team { margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }

/* ==========================================================================
   DIRECTORY — INDEX VIEW
   The same roster set as type. One preview tile follows the pointer rather
   than every row carrying its own image.
   ========================================================================== */
.roster { position: relative; }
.roster[hidden] { display: none; }

.roster__head,
.roster__row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1.45fr) minmax(0, 1.35fr) minmax(0, .85fr) minmax(0, .85fr) 2.4rem;
  gap: 1rem;
  align-items: center;
}
.roster__head {
  padding: 0 1.1rem .75rem;
  font-family: var(--f-mono);
  font-size: .56rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.roster__item { border-bottom: 1px solid rgba(255,255,255,.055); }
.roster__item.is-filtered { display: none; }

.roster__row {
  position: relative;
  padding: clamp(.95rem, 2vw, 1.3rem) 1.1rem;
  isolation: isolate;
}
.roster__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(var(--brand-rgb, 238 46 92), .16), transparent 62%);
  opacity: 0;
  transition: opacity var(--d-fast) var(--e-out);
}
.roster__row:hover::before,
.roster__row:focus-visible::before { opacity: 1; }

.roster__rank { font-family: var(--f-mono); font-size: .72rem; color: var(--text-dim); }
.roster__name {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, .9rem + .55vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.028em;
  transition: color var(--d-fast), translate var(--d-fast) var(--e-out);
}
.roster__row:hover .roster__name { color: var(--brand-2); translate: 4px 0; }
.roster__lead {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  padding: .22em .5em;
  border-radius: 4px;
  background: var(--brand-grad);
}
.roster__role { font-size: var(--t-sm); color: var(--text-soft); }
.roster__dept {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.roster__loc { font-family: var(--f-mono); font-size: .68rem; color: var(--text-mute); }
.roster__go {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--text-mute);
  box-shadow: 0 0 0 1px var(--glass-brd) inset;
  transition: color var(--d-fast), background var(--d-fast), translate var(--d-fast) var(--e-out);
}
.roster__row:hover .roster__go { color: #fff; background: var(--brand-grad); translate: 3px 0; }
.roster__go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.roster__preview {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 190px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--glass-brd-hi);
  background:
    radial-gradient(120% 90% at 78% 6%, var(--a1, rgba(245,69,58,.5)) 0%, transparent 58%),
    linear-gradient(165deg, var(--a2, rgba(40,20,34,.9)) 0%, var(--a3, rgba(16,12,22,.98)) 100%);
  box-shadow: 0 34px 70px -26px rgba(0,0,0,.95);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.88) rotate(-5deg);
  transition: opacity .26s var(--e-out), transform .3s var(--e-out);
}
.roster__preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
.roster__preview img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.roster__preview span {
  font-family: var(--f-display);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -.04em;
  color: rgba(255,255,255,.9);
}
@media (hover: none), (pointer: coarse) { .roster__preview { display: none; } }

@media (max-width: 900px) {
  .roster__head { display: none; }
  .roster__row {
    grid-template-columns: 2.6rem minmax(0, 1fr) 2.4rem;
    align-items: start;
    row-gap: .2rem;
  }
  .roster__name, .roster__role, .roster__dept, .roster__loc { grid-column: 2; }
  .roster__go { grid-column: 3; grid-row: 1 / -1; align-self: center; }
  .roster__row:hover .roster__name { translate: 0; }
}
@media (max-width: 560px) { .roster__loc { display: none; } }

/* ==========================================================================
   CAPABILITY SPREAD — what the whole roster adds up to
   ========================================================================== */
.spread { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.spread__item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: calc(.42rem + var(--w, 0) * .28rem) calc(.95rem + var(--w, 0) * .55rem);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
  box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset;
  font-family: var(--f-display);
  font-size: calc(.86rem + var(--w, 0) * 1rem);
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--text-soft);
  opacity: calc(.62 + var(--w, 0) * .38);
  transition: color var(--d-fast), background var(--d-fast), box-shadow var(--d-fast), transform var(--d-fast) var(--e-out), opacity var(--d-fast);
}
.spread__item:hover {
  opacity: 1;
  color: var(--text);
  transform: translateY(-3px);
  background: rgba(var(--brand-rgb, 238 46 92), .12);
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb, 238 46 92), .45) inset;
}
.spread__item i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  padding: .22em .45em;
  border-radius: 4px;
  background: var(--brand-grad);
}

/* ==========================================================================
   MEMBER PROFILE — hero
   ========================================================================== */
.profile {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5.5rem, 4rem + 9vw, 9.5rem) clamp(2.5rem, 2rem + 4vw, 4.5rem);
}
.profile__glow {
  position: absolute;
  top: -45%; left: 62%;
  translate: -50% 0;
  width: min(1200px, 150vw);
  aspect-ratio: 1.6;
  background: radial-gradient(ellipse at center, rgba(var(--brand-rgb, 238 46 92), .22), transparent 62%);
  filter: blur(50px);
  pointer-events: none;
}
.profile__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 22%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 22%, #000, transparent 76%);
  pointer-events: none;
}
.profile__inner { position: relative; z-index: 2; }

.profile__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.profile__crumbs a { transition: color var(--d-fast); }
.profile__crumbs a:hover { color: var(--brand-2); }
.profile__crumbs b { font-weight: 500; color: var(--text-soft); }

.profile__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .profile__layout { grid-template-columns: 1fr; } }

.profile__rank { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .8rem; font-family: var(--f-mono); }
.profile__rank i {
  font-style: normal;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile__rank span { font-size: .68rem; letter-spacing: .2em; color: var(--text-dim); }

.profile__name { font-size: var(--t-3xl); line-height: .94; }
.profile__role {
  margin-top: 1rem;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.profile__tagline {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--text-soft);
}

.profile__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1rem 1.4rem;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-top: clamp(1.3rem, 2.5vw, 1.8rem);
  border-top: 1px solid rgba(255,255,255,.08);
}
.profile__fact-label {
  display: block;
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.profile__fact-value {
  display: block;
  margin-top: .3rem;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text);
}

.profile__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.6rem, 3vw, 2.3rem);
}

.profile__portrait {
  position: relative;
  justify-self: center;
  width: min(420px, 100%);
  transform-style: preserve-3d;
}
.profile__spine {
  position: absolute;
  top: 0; left: -2.6rem;
  height: 100%;
  display: grid;
  align-content: center;
  writing-mode: vertical-rl;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--text-dim);
}
@media (max-width: 1100px) { .profile__spine { display: none; } }

.profile__frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--glass-brd-hi);
  background:
    radial-gradient(120% 90% at 76% 8%, var(--a1, rgba(245,69,58,.5)) 0%, transparent 58%),
    linear-gradient(165deg, var(--a2, rgba(40,20,34,.9)) 0%, var(--a3, rgba(16,12,22,.98)) 100%);
  box-shadow: 0 50px 100px -42px rgba(0,0,0,.95);
}
.profile__aura {
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 210deg, transparent, var(--a1, rgba(245,69,58,.5)), transparent 60%);
  filter: blur(46px);
  opacity: .6;
  animation: auraDrift 26s linear infinite;
  pointer-events: none;
}
.profile__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.14), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-mid) var(--e-out);
}
.profile__portrait:hover .profile__frame::after { opacity: 1; }

.profile__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* No plate to dodge here — recentre the grid the card shifted upward. */
.profile__frame .member__grid {
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 72%);
}

.profile__initials {
  font-family: var(--f-display);
  font-size: clamp(4rem, 13vw, 7rem);
  font-weight: 600;
  letter-spacing: -.05em;
  color: rgba(255,255,255,.9);
  text-shadow: 0 14px 50px rgba(0,0,0,.6);
}
.profile__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.profile__badge {
  position: absolute;
  top: -.75rem; right: -.75rem;
  z-index: 5;
  padding: .5em .95em;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand-grad);
  box-shadow: 0 14px 32px -12px rgba(var(--brand-rgb, 238 46 92), .9);
}

/* ==========================================================================
   MEMBER PROFILE — the long version
   ========================================================================== */
.dossier {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .dossier { grid-template-columns: 1fr; } }

.dossier__side { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 900px) { .dossier__side { position: static; } }

.dossier__card { display: grid; gap: 1.2rem; padding: clamp(1.4rem, 3vw, 2rem); }
.dossier__list { display: grid; gap: .9rem; }
.dossier__list > div {
  display: grid;
  gap: .22rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dossier__list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.dossier__list dt {
  font-family: var(--f-mono);
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dossier__list dd { font-size: var(--t-sm); color: var(--text); overflow-wrap: anywhere; }
.dossier__chips { padding-top: 0; margin-top: 0; }

.profile-story {
  display: grid;
  gap: 1.4rem;
  margin-top: 1.2rem;
  font-size: var(--t-md);
  line-height: 1.8;
  color: var(--text-soft);
}
.profile-story p:first-of-type::first-letter {
  float: left;
  margin: .06em .14em 0 0;
  font-family: var(--f-display);
  font-size: 3.6em;
  font-weight: 700;
  line-height: .78;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile-story strong, .profile-story b { color: var(--text); font-weight: 600; }
.profile-story a { color: var(--brand-2); }

.profile-quote {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.7rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.4rem) clamp(1.7rem, 3vw, 2.4rem) clamp(3.6rem, 6vw, 4.8rem);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(var(--brand-rgb, 238 46 92), .1), rgba(255,255,255,.02));
  box-shadow: 0 0 0 1px var(--glass-brd) inset;
}
.profile-quote__mark {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.1rem);
  left: clamp(1.2rem, 2.5vw, 1.8rem);
  width: 28px; height: 28px;
  fill: none; stroke: var(--brand-2);
  stroke-width: 1.4;
  opacity: .65;
}
.profile-quote p {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -.025em;
  color: var(--text);
}
.profile-quote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ==========================================================================
   MEMBER PROFILE — capability
   ========================================================================== */
.skillset {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 275px), 1fr));
  gap: clamp(.8rem, 2vw, 1.2rem);
}
.skill {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem .9rem;
  padding: clamp(1rem, 2vw, 1.3rem);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.028);
  box-shadow: 0 0 0 1px var(--glass-brd) inset;
  transition: transform var(--d-fast) var(--e-out), background var(--d-fast), box-shadow var(--d-fast);
}
.skill:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 1px var(--glass-brd-hi) inset, 0 20px 44px -24px rgba(0,0,0,.95);
}
.skill__num { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .16em; color: var(--text-dim); }
.skill__name { font-family: var(--f-display); font-size: var(--t-base); font-weight: 600; letter-spacing: -.015em; }
.skill__level { font-family: var(--f-mono); font-size: .74rem; font-weight: 500; color: var(--brand-2); }
.skill__level small { font-size: .62em; opacity: .7; }
.skill__meter {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.skill__meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--e-out) .12s;
}
.skill.is-in .skill__meter i { transform: scaleX(var(--lvl, 0)); }
/* No reveal observer (scripting off, or the effect switched off) — fill anyway. */
html:not(.js) .skill__meter i,
.no-reveal .skill__meter i { transform: scaleX(var(--lvl, 0)); }

.toolbelt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.3rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid rgba(255,255,255,.07);
}
.toolbelt__label {
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.toolbelt .chips { margin-top: 0; padding-top: 0; }

/* ==========================================================================
   MEMBER PROFILE — pager
   ========================================================================== */
.section--pager { padding-block: clamp(2rem, 4vw, 3.5rem); }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.4rem); }
@media (max-width: 700px) { .pager { grid-template-columns: 1fr; } }

.pager__link {
  display: grid;
  gap: .3rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.2rem, 3vw, 1.9rem);
  border-radius: var(--r-lg);
  transition: transform var(--d-fast) var(--e-out);
}
.pager__link:hover { transform: translateY(-4px); }
.pager__link--next { text-align: right; }
.pager__dir {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: .57rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.pager__link--next .pager__dir { justify-content: flex-end; }
.pager__dir svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pager__link--prev .pager__dir svg { rotate: 180deg; }
.pager__name { font-family: var(--f-display); font-size: var(--t-md); font-weight: 600; letter-spacing: -.025em; }
.pager__role { font-size: var(--t-xs); color: var(--text-mute); }

/* ==========================================================================
   QUICK-LOOK DIALOG
   ========================================================================== */
.member-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  padding-bottom: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-bottom));
}
.member-modal[hidden] { display: none; }

.member-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,5,9,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn .3s var(--e-out);
}

.member-modal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86svh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  display: grid;
  gap: 1.2rem;
  animation: modalIn .42s var(--e-out);
}

@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.member-modal__close {
  position: absolute;
  top: .9rem; right: .9rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset;
  color: var(--text-soft);
  transition: color var(--d-fast), background var(--d-fast);
}
.member-modal__close:hover { color: #fff; background: var(--brand-2); }
.member-modal__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.member-modal__head {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  padding-right: 2.6rem;
}
.member-modal__photo {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--brand-grad-soft);
  border: 1px solid var(--glass-brd);
  font-family: var(--f-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}
.member-modal__photo img { width: 100%; height: 100%; object-fit: cover; }

.member-modal__name { font-size: var(--t-lg); }
.member-modal__role { margin-top: .15rem; font-size: var(--t-sm); font-weight: 500; color: var(--brand-2); }
.member-modal__where { margin-top: .3rem; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-mute); }

.member-modal__bio { font-size: var(--t-sm); line-height: 1.75; color: var(--text-soft); }
.member-modal__skills { margin: 0; }
.member-modal__full { justify-self: start; }

.member-modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.member-modal__mail {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--text-soft);
  transition: color var(--d-fast);
}
.member-modal__mail:hover { color: var(--brand-2); }
.member-modal__mail svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.member-modal__mail[hidden] { display: none; }
.member-modal__foot[hidden] { display: none; }

@media (max-width: 420px) {
  .member-modal__head { grid-template-columns: 64px minmax(0, 1fr); gap: .85rem; }
  .member-modal__photo { width: 64px; height: 64px; font-size: 1.3rem; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .member__aura,
  .profile__aura,
  .roster-rings i,
  .member__open:hover .member__scan::after { animation: none; }
  .roster__preview { display: none; }
  .skill__meter i { transition: none; }
  .member-modal__panel, .member-modal__backdrop { animation: none; }
}