/* ==========================================================================
   Team page (team.html): page-specific layout only (components.css provides
   .portrait duotone, .person hover, tags, buttons, facades).
   Rhythm: dark hero (contact sheet) → ink-2 leadership → cream engineers →
   dark music & sync → ink-2 "book by name" → footer.
   Prefix: tm-. Use contextual tokens (--fg, --rule, --accent…) so themes work.
   ========================================================================== */

/* ---- Shared bits ------------------------------------------------------------ */
.tm-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 1.5rem clamp(2rem, 5vw, 6rem); margin-bottom: clamp(3rem, 7vw, 6.5rem); }
.tm-head__title { max-width: 12ch; }
.tm-head__aside { color: var(--fg-muted); max-width: 46ch; justify-self: end; }

.tm-name {
  font-family: var(--font-display); font-variation-settings: var(--soft);
  font-size: var(--fs-d3); font-weight: 380; line-height: .98; letter-spacing: -.028em;
}
.tm-name em { font-style: italic; font-weight: 300; }
.tm-tags .tag { font-size: .68rem; }

/* key stat: big number or phrase + console label */
.tm-key { display: grid; gap: .55rem; justify-items: start; padding-block: 1.15rem; border-block: 1px solid var(--rule); }
.tm-key .stat__value { font-size: clamp(2.6rem, 4.2vw, 4.4rem); }
.tm-key .stat__unit { font-size: .4em; }
.tm-key__text {
  font-family: var(--font-display); font-variation-settings: var(--soft); font-style: italic; font-weight: 300;
  font-size: clamp(2.1rem, 3.6vw, 3.6rem); line-height: .95; letter-spacing: -.035em;
}
.tm-key .stat__label { max-width: 40ch; line-height: 1.5; }

.tm-bio { max-width: 58ch; color: var(--fg); }
.tm-bio p { font-size: 1.0625rem; line-height: 1.68; }

.tm-facts { display: grid; margin: 0; border-top: 1px solid var(--rule); }
.tm-facts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .35rem 1.25rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.tm-facts dt { color: var(--fg-muted); padding-top: .2em; }
.tm-facts dd { margin: 0; font-size: var(--fs-small); line-height: 1.55; }

/* credits: a console track-sheet of names */
.tm-credits { display: grid; gap: .8rem; }
.tm-credits__label { color: var(--accent); }
.tm-credits__list { border-top: 1px solid var(--rule-strong); }
.tm-credits__list li { border-bottom: 1px solid var(--rule); }
.tm-credits__row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 2rem; align-items: baseline; gap: .3rem 1.25rem;
  padding: .72rem 0; color: var(--fg);
}
.tm-credits__name {
  font-family: var(--font-display); font-variation-settings: var(--soft);
  font-size: clamp(1.12rem, 1.45vw, 1.42rem); font-weight: 400; line-height: 1.15; letter-spacing: -.012em;
}
.tm-credits__note { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); line-height: 1.5; }
.tm-credits__arrow { justify-self: end; align-self: center; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--rule-strong); transition: background-color .35s, color .35s, border-color .35s, transform .5s var(--ease-out); }
.tm-credits__arrow .icon { width: .8rem; height: .8rem; }
.tm-credits__row--link { transition: color .3s; }
.tm-credits__row--link:hover, .tm-credits__row--link:focus-visible { color: var(--accent); }
.tm-credits__row--link:hover .tm-credits__arrow, .tm-credits__row--link:focus-visible .tm-credits__arrow { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: rotate(45deg); }

/* ---- 1. Hero ------------------------------------------------------------------- */
.tm-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--header-h) + clamp(2.5rem, 7vh, 5.5rem)) 0 clamp(4rem, 8vw, 7rem);
  background: var(--ink);
}
.tm-hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 42% at 86% 8%, rgba(124, 204, 191, .14), transparent 70%),
    radial-gradient(42% 46% at 4% 92%, rgba(255, 106, 43, .13), transparent 72%);
}
.tm-hero__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 2rem; margin-bottom: clamp(1.5rem, 4vh, 2.75rem); }
.tm-hero__count { display: flex; align-items: center; gap: 1.2rem; color: var(--muted); }
.tm-hero__title { max-width: 9.6em; }
/* one grid: roster count, title, contact sheet, lead + jump links. At ≥1101px the lead and the
   jump links sit beside the title, so the first frame carries them (no empty band below the sheet). */
.tm-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "title" "sheet" "foot"; }
.tm-hero__top { grid-area: top; }
.tm-hero__title { grid-area: title; }
.tm-sheet { grid-area: sheet; }
.tm-hero__foot { grid-area: foot; }

.tm-hero__foot {
  display: grid; grid-template-columns: minmax(0, 46ch) auto; justify-content: space-between; align-items: end; gap: 1.75rem 3rem;
  margin-top: clamp(2.75rem, 6vw, 5rem); padding-top: clamp(1.1rem, 2.4vh, 1.6rem); border-top: 1px solid var(--rule);
}
.tm-hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: rgba(243, 235, 224, .86); }
.tm-jump { display: grid; gap: .1rem; min-width: 17rem; }
.tm-jump__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; min-height: 44px;
  border-bottom: 1px solid var(--rule); font-weight: 500; color: var(--fg); transition: color .3s, padding .5s var(--ease-out);
}
.tm-jump__link::after { content: "↓"; font-family: var(--font-mono); color: var(--fg-muted); transition: transform .5s var(--ease-out), color .3s; }
.tm-jump__link:hover, .tm-jump__link:focus-visible { color: var(--mint-hi); padding-left: .4rem; }
.tm-jump__link:hover::after { transform: translateY(3px); color: var(--mint); }

/* the contact sheet: nine frames, staggered like a strip of film */
.tm-sheet {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: clamp(.6rem, 1vw, 1rem);
  margin-top: clamp(2.25rem, 4.5vw, 4rem); align-items: start;
}
.tm-sheet__item:nth-child(2n) { margin-top: clamp(1.5rem, 3.4vw, 3.5rem); }
.tm-sheet__link { display: grid; gap: .8rem; color: var(--fg); border-radius: var(--r-sm); }
.tm-sheet__portrait { aspect-ratio: 3 / 4; }
.tm-sheet__meta { display: grid; gap: .3rem; }
.tm-sheet__name {
  font-family: var(--font-display); font-variation-settings: var(--soft);
  font-size: clamp(.98rem, 1.12vw, 1.18rem); font-weight: 420; line-height: 1.12; letter-spacing: -.01em;
  transition: color .3s;
}
.tm-sheet__first { display: none; }
.tm-sheet__role { color: var(--muted); font-size: .66rem; }
.tm-sheet__link:focus-visible .tm-sheet__name { color: var(--mint-hi); }
.tm-sheet__link:focus-visible { outline-offset: 6px; }
/* the sheet's portraits (the client's request, 20 Oct 2026): black and white at rest; the mint duotone of the
   portraits further down on hover and keyboard focus, and on touch screens while the frame crosses the middle
   of the screen (team.js sets .is-lit). Hover only
   where the device can hover: a tap's :hover sticks on touch screens. The change runs on the .portrait
   transitions, so it is instant with reduced motion. */
.tm-sheet__portrait { background-color: #fff; }                 /* multiply by white = identity */
.tm-sheet__portrait::after { background-color: #000; }          /* lighten with black = identity */
.tm-sheet__portrait img { filter: grayscale(1) contrast(1.1) brightness(var(--duo-b, 1)); }
.tm-sheet__link:focus-visible .tm-sheet__portrait, .tm-sheet__portrait.is-lit { background-color: var(--duo-hi); }
.tm-sheet__link:focus-visible .tm-sheet__portrait::after, .tm-sheet__portrait.is-lit::after { background-color: var(--duo-lo); }
.tm-sheet__link:focus-visible .tm-sheet__portrait img, .tm-sheet__portrait.is-lit img { filter: grayscale(1) contrast(1.25) brightness(var(--duo-b, 1)); }
@media (hover: hover) {
  .tm-sheet__link:hover .tm-sheet__name { color: var(--mint-hi); }
  .tm-sheet__link:hover .tm-sheet__portrait { background-color: var(--duo-hi); }
  .tm-sheet__link:hover .tm-sheet__portrait::after { background-color: var(--duo-lo); }
  .tm-sheet__link:hover .tm-sheet__portrait img { filter: grayscale(1) contrast(1.25) brightness(var(--duo-b, 1)); }
}

@media (min-width: 1101px) {
  .tm-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); column-gap: clamp(2rem, 4vw, 4.5rem);
    grid-template-areas: "top top" "title foot" "sheet sheet";
  }
  .tm-hero__foot {
    align-self: end; grid-template-columns: 1fr; gap: 1.5rem;
    margin-top: 0; padding-top: 0; border-top: 0; padding-bottom: .6rem;
  }
  .tm-hero__lead { font-size: var(--fs-body); color: rgba(243, 235, 224, .8); }
  .tm-jump { min-width: 0; }
}
@media (max-width: 1100px) {
  .tm-hero__foot { grid-template-columns: 1fr; }
  .tm-jump { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .tm-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 1rem; }
  .tm-sheet__item:nth-child(2n) { margin-top: 0; }
  .tm-sheet__item:nth-child(3n + 2) { margin-top: clamp(1.25rem, 4vw, 2.5rem); }
  .tm-sheet__portrait { aspect-ratio: 1 / 1; }
}
@media (max-width: 760px) {
  .tm-hero__count > span:last-child { display: none; }
  .tm-jump { grid-template-columns: 1fr; gap: 0; }
  .tm-sheet { gap: 1rem .55rem; margin-top: 2.25rem; }
  .tm-sheet__link { gap: .5rem; }
  .tm-sheet__full { display: none; }
  .tm-sheet__first { display: inline; }
  .tm-sheet__name { font-size: .95rem; }
  .tm-sheet__role { display: none; }
  .tm-sheet__portrait { aspect-ratio: 4 / 5; }
}

/* ---- 2. Leadership (ink-2) ------------------------------------------------------ */
.tm-lead__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 7vw, 8rem); align-items: start; }
.tm-lead__person { display: grid; gap: clamp(1.5rem, 2.6vw, 2.25rem); align-content: start; }
.tm-lead__person:nth-child(2) { margin-top: clamp(4rem, 12vw, 12rem); }
.tm-lead__media { display: grid; gap: .8rem; width: min(100%, 440px); }
.tm-lead__portrait { box-shadow: var(--shadow-2); }
.tm-lead__body { display: grid; gap: 1.25rem; align-content: start; max-width: 40rem; }
.tm-lead__body .tm-name { font-size: var(--fs-d2); }
@media (max-width: 860px) {
  .tm-lead__grid { grid-template-columns: 1fr; gap: clamp(4rem, 12vw, 6rem); }
  .tm-lead__person:nth-child(2) { margin-top: 0; }
  .tm-lead__person { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 1.75rem; align-items: start; }
  .tm-lead__media { width: 100%; }
}
@media (max-width: 600px) {
  .tm-lead__person { grid-template-columns: 1fr; }
  .tm-lead__media { width: min(100%, 360px); }
}

/* ---- 3. Engineers & producers (cream) ------------------------------------------- */
.tm-eng { overflow: clip; }
.tm-head--eng { grid-template-columns: 1fr; gap: 1.5rem; }
.tm-eng__title { max-width: none; }
.tm-eng__intro {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem;
  padding-top: 1.4rem; border-top: 1px solid var(--rule-strong);
}
.tm-eng__intro .lead { max-width: 44ch; }
.tm-eng__note { max-width: 42ch; color: var(--fg-muted); }

.tm-spread {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: 2rem;
  align-items: start;
}
.tm-spread + .tm-spread { margin-top: clamp(3.5rem, 6.5vw, 7rem); padding-top: clamp(3.5rem, 6.5vw, 7rem); border-top: 1px solid var(--rule); }
/* Jim's source portrait is only 360 px: keep it near native size */
#jim-macrae .tm-spread__frame { max-width: 400px; }
.tm-spread__media { position: relative; z-index: 1; grid-column: 1 / span 5; display: grid; gap: .85rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.tm-spread__frame { width: 100%; max-width: 500px; }
.tm-spread__portrait { box-shadow: 0 40px 80px -40px rgba(15, 13, 12, .55); }
.tm-spread__body { position: relative; z-index: 1; grid-column: 7 / span 6; display: grid; gap: 1.35rem; align-content: start; padding-top: clamp(0rem, 2vw, 2rem); }
.tm-spread--flip .tm-spread__media { grid-column: 8 / span 5; grid-row: 1; justify-items: end; }
.tm-spread--flip .tm-spread__body { grid-column: 1 / span 6; grid-row: 1; }
.tm-spread__role { margin-bottom: -.4rem; }
.tm-spread__name { font-size: var(--fs-d2); }
.tm-spread__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: .35rem; }
.theme-cream .tm-spread .person__role { color: var(--accent); }
/* tablet: keep the two-column spread (portrait 5 / story 7), sticky portrait, no flip */
@media (max-width: 1000px) {
  .tm-spread { column-gap: clamp(1.5rem, 3.5vw, 2.5rem); }
  .tm-spread__media, .tm-spread--flip .tm-spread__media { grid-column: 1 / span 5; grid-row: 1; justify-items: start; }
  .tm-spread__body, .tm-spread--flip .tm-spread__body { grid-column: 6 / -1; grid-row: 1; padding-top: 0; }
  .tm-spread__name { font-size: var(--fs-d3); }
  .tm-credits__row { grid-template-columns: minmax(0, 1fr) 2rem; }
  .tm-credits__note { grid-column: 1; grid-row: 2; }
  .tm-credits__arrow { grid-column: 2; grid-row: 1 / span 2; }
  .tm-facts > div { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tm-spread { grid-template-columns: 1fr; }
  .tm-spread__media, .tm-spread--flip .tm-spread__media { grid-column: 1; grid-row: auto; position: relative; top: auto; justify-items: start; width: 100%; }
  .tm-spread__body, .tm-spread--flip .tm-spread__body { grid-column: 1; grid-row: auto; }
  #jim-macrae .tm-spread__frame { max-width: none; }
}
@media (max-width: 600px) {
  .tm-credits__row { grid-template-columns: minmax(0, 1fr) 2rem; }
  .tm-credits__note { grid-column: 1; grid-row: 2; }
  .tm-credits__arrow { grid-column: 2; grid-row: 1 / span 2; }
  .tm-facts > div { grid-template-columns: 1fr; }
}

/* ---- 4. Music & sync (dark) --------------------------------------------------------- */
.tm-sync {
  position: relative; overflow: hidden;
  background:
    radial-gradient(50% 40% at 90% 12%, rgba(124, 204, 191, .1), transparent 70%),
    radial-gradient(40% 40% at 0% 70%, rgba(255, 106, 43, .08), transparent 70%),
    var(--ink);
}
.tm-sync__reel { margin-top: clamp(3.5rem, 7vw, 6rem); }
.tm-sync__reel-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rule); color: var(--muted); }
.tm-sync__videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.tm-sync__video { --ratio: 922 / 637; }
.tm-sync__video .facade__play { width: 64px; margin: -32px 0 0 -32px; }
.tm-sync__video .facade__label { flex-direction: column; align-items: start; gap: .35rem; }
@media (max-width: 1000px) {
  .tm-sync__videos { grid-template-columns: 1fr 1fr; }
  .tm-sync__videos > :last-child { grid-column: 1 / -1; --ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .tm-sync__videos { grid-template-columns: 1fr; }
  .tm-sync__videos > :last-child { --ratio: 922 / 637; }
}

/* Daniel and John Paul also represent music & sync (Kais, 22 Oct 2026: the one-line mention "does not do
   them justice"). A card each, after Amine's spread and reel: the portrait of their spread (same photo, crop
   and mint duotone, warming on hover and keyboard focus like every .person), the sync role, the name, one
   line on their sync work, and two links (the sync work, the full profile above). Not their bios.
   Side by side from 761px, a hairline between them: portrait beside the text from 1001px (the links sit on
   the portrait's bottom line), above it from 761px; stacked on phones, a small portrait beside the name. */
.tm-also { margin-top: clamp(4rem, 8vw, 7rem); }
.tm-also__label { padding-bottom: 1rem; margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem); border-bottom: 1px solid var(--rule); color: var(--mint); }
.tm-also__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tm-also__list > li { display: grid; }
.tm-also__list > li:first-child { padding-right: clamp(1.5rem, 3.2vw, 3.5rem); }
.tm-also__list > li + li { padding-left: clamp(1.5rem, 3.2vw, 3.5rem); border-left: 1px solid var(--rule); }
.tm-also__card {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "media head" "media text" "media links";
  gap: 1.1rem clamp(1.25rem, 2.2vw, 2.25rem); align-items: start;
}
.tm-also__media { grid-area: media; }
.tm-also__portrait { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.tm-also__head { grid-area: head; display: grid; gap: .7rem; padding-top: .15rem; }
.tm-also__name { font-size: clamp(2rem, 2.7vw, 2.9rem); }
.tm-also__name em { white-space: nowrap; }       /* "Chant-Burgess" never breaks at its hyphen */
@media (min-width: 1001px) { .tm-also__name em { display: block; } }   /* both surnames on their own line: the two cards' rows line up */
.tm-also__text { grid-area: text; max-width: 40ch; font-size: var(--fs-small); line-height: 1.62; color: rgba(243, 235, 224, .84); }
.tm-also__links {
  grid-area: links; align-self: end; display: flex; flex-wrap: wrap; gap: 0 1.75rem;
  padding-top: .5rem; border-top: 1px solid var(--rule);
}
.tm-also__link { min-height: 44px; font-size: var(--fs-small); }
.tm-also__link .icon { width: .85rem; height: .85rem; }
.tm-also__link--up:hover .icon, .tm-also__link--up:focus-visible .icon { transform: translateY(-3px); }   /* in-page, up the page */
@media (max-width: 1000px) {
  /* the text row takes the slack, so both cards' links share a bottom line */
  .tm-also__card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "media" "head" "text" "links"; }
  .tm-also__portrait { aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .tm-also__list { grid-template-columns: minmax(0, 1fr); }
  .tm-also__list > li:first-child { padding-right: 0; }
  .tm-also__list > li + li { padding-left: 0; border-left: 0; margin-top: 2rem; padding-top: 2.25rem; border-top: 1px solid var(--rule); }
  .tm-also__card {
    grid-template-columns: clamp(6.25rem, 28vw, 8.5rem) minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "media head" "text text" "links links";
    column-gap: 1.1rem;
  }
  .tm-also__portrait { aspect-ratio: 4 / 5; }
  .tm-also__head { align-self: end; gap: .5rem; }
  .tm-also__name { font-size: clamp(1.55rem, 7vw, 2rem); }
  .tm-also__text { max-width: none; }
}

/* ---- 5. Book by name ----------------------------------------------------------------- */
.tm-book { background: var(--ink-2); border-top: 1px solid var(--rule); }
.tm-book__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.tm-book__copy { display: grid; gap: 1.4rem; justify-items: start; position: sticky; top: calc(var(--header-h) + 2rem); }
.tm-book__copy .t-d2 { max-width: 11ch; }
.tm-book__copy .muted { max-width: 42ch; }
.tm-book__list { border-top: 1px solid var(--rule-strong); }
.tm-book__list li { border-bottom: 1px solid var(--rule); }
.tm-book__chip {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.75rem; align-items: center; gap: .4rem 1.5rem;
  padding: clamp(1rem, 1.8vw, 1.4rem) 0; color: var(--fg);
}
.tm-book__chip::before {
  content: ""; position: absolute; inset: 0 calc(var(--gutter) * -.5); z-index: -1; border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(124, 204, 191, .1), transparent 75%); opacity: 0; transition: opacity .45s var(--ease-soft);
}
.tm-book__chip-name {
  font-family: var(--font-display); font-variation-settings: var(--soft);
  font-size: clamp(1.45rem, 2.4vw, 2.4rem); font-weight: 360; line-height: 1.05; letter-spacing: -.025em;
  transition: transform .7s var(--ease-out), color .3s;
}
.tm-book__chip-role { color: var(--fg-muted); }
.tm-book__chip-arrow { justify-self: end; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--rule-strong); transition: background-color .4s, color .4s, border-color .4s, transform .6s var(--ease-out); }
.tm-book__chip-arrow .icon { width: .95rem; height: .95rem; }
.tm-book__chip:hover::before, .tm-book__chip:focus-visible::before { opacity: 1; }
.tm-book__chip:hover .tm-book__chip-name, .tm-book__chip:focus-visible .tm-book__chip-name { transform: translateX(clamp(.4rem, 1vw, 1rem)); color: var(--mint-hi); }
.tm-book__chip:hover .tm-book__chip-arrow, .tm-book__chip:focus-visible .tm-book__chip-arrow { background: var(--mint); border-color: var(--mint); color: var(--ink); transform: rotate(45deg); }
.tm-book__list:hover .tm-book__chip:not(:hover) { color: color-mix(in srgb, var(--fg) 50%, transparent); }
@media (max-width: 1000px) {
  .tm-book__grid { grid-template-columns: 1fr; }
  .tm-book__copy { position: static; }
}
@media (max-width: 600px) {
  .tm-book__chip { grid-template-columns: minmax(0, 1fr) 2.75rem; }
  .tm-book__chip-role { grid-column: 1; grid-row: 2; }
  .tm-book__chip-arrow { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---- Head responsive ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .tm-head { grid-template-columns: 1fr; }
  .tm-head__aside { justify-self: start; }
}

/* a person arrived at via #anchor glows briefly (class set by team.js) */
.tm-is-target .tm-spread__portrait, .tm-is-target .tm-lead__portrait, .tm-is-target .tm-also__portrait { box-shadow: 0 0 0 2px var(--accent), 0 40px 80px -40px rgba(15, 13, 12, .55); }