/* =====================================================================
   CTFY · Midnight Theta · Team (/about/team/) — page layer
   Spec: docs/redesign/pages/35-team.md. Builds on css/site.css and css/modules.css.
   Chapters: I dark portrait hero (H5 variant "Portrait Pair" = the hero moment) · II porcelain (bio cards → bridge) · III finale
   Merilin keeps the monogram tile (D11); the photo-wanted note is an HTML comment only.
   ===================================================================== */

#daniela,#merilin,#book{scroll-margin-top:96px}

/* ---------- I · H5 variant "Portrait Pair" ----------
   Two 4:5 tiles overlapping by 12%: Daniela's portrait in front, Merilin's monogram tile behind, offset down-right.
   Hero choreography: Daniela's frame opens (iris, via data-seq="iris" → site.css), then the monogram tile slides out
   from behind it (translateX, 600ms, 1150ms) and its initials fade in. Default CSS is the finished state. */
.team-hero .hero__main{max-width:620px}
.team-hero .crumbs{margin-bottom:24px}
.team-pair{position:relative;justify-self:end;width:100%;max-width:560px;aspect-ratio:1/.98}
.team-pair::before{content:"";position:absolute;inset:-18% -22%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(62,85,245,.26),transparent 70%)}
.team-tile{position:absolute;width:56%;aspect-ratio:4/5;margin:0;border-radius:var(--r-xl);overflow:hidden;background:var(--bg-2)}
.team-tile::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 rgba(255,255,255,.14)}
.team-tile--dp{left:0;top:0;z-index:2}
.team-tile--dp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:57% 20%;
  transform:scale(1.4);transform-origin:57% 20%}   /* the 1080 px frame is a full-length shot: zoom to head and shoulders, never beyond 1.4× */
.team-tile--mi{right:0;top:28%;z-index:1}
.team-tile__slide{position:absolute;inset:0;isolation:isolate;display:grid;place-items:center;background:var(--bg-1)}
.team-tile__slide>.aurora{z-index:-1}
.team-tile__slide>span{display:grid;place-items:center;width:64%;aspect-ratio:1;border-radius:50%;color:var(--text-1);transform:translateX(9%);   /* centred in the visible part, clear of Daniela's frame */
  font:500 clamp(3rem,.5rem + 6vw,6.5rem)/1 var(--font-display);letter-spacing:.02em}
/* motion on: the tile waits behind Daniela, then slides out */
.js .team-hero:not(.is-in) .team-tile__slide{transform:translateX(-22%);animation:hero-failsafe 0s linear 2.5s forwards}
.js .team-hero:not(.is-in) .team-tile__slide>span{opacity:0;animation:hero-failsafe 0s linear 2.5s forwards}
.team-hero.is-in .team-tile__slide{transition:transform 600ms var(--ease-out) 1150ms}
.team-hero.is-in .team-tile__slide>span{transition:opacity 500ms var(--ease-out) 1500ms}
[data-motion="off"] .team-hero .team-tile__slide{transform:none!important;transition:none!important}
[data-motion="off"] .team-hero .team-tile__slide>span{opacity:1!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.team-tile__slide{transform:none!important}.team-tile__slide>span{opacity:1!important}}

@media (max-width:1023px){
  /* phones: the pair comes first, Daniela on a 16:10 crop, Merilin's tile under and offset */
  .team-pair{order:-1;justify-self:center;width:min(86vw,440px);aspect-ratio:1/.86}
  .team-tile{aspect-ratio:16/10;border-radius:var(--r-l)}
  .team-tile--dp{width:84%}
  .team-tile--dp img{object-position:57% 12%;transform:scale(1.15);transform-origin:57% 22%}
  .team-tile--mi{width:58%;top:58%}
  .team-tile__slide>span{width:auto;height:84%;transform:none;font-size:clamp(2.25rem,1rem + 6vw,3.25rem)}
}

/* ---------- II · M20 People Cards, bio-forward ----------
   Left: 120px round thumbnail, name, role. Right: the bio at 68ch. */
.ch--paper.team-people{padding-bottom:clamp(40px,6vw,80px)}
.team-cards{display:grid;gap:clamp(20px,2.4vw,32px)}
.team-card{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(24px,4vw,64px);padding:clamp(26px,3.4vw,48px);
  border-radius:var(--r-l);background:var(--surface);border:1px solid var(--hair);box-shadow:var(--lift-paper)}
.team-card__id{display:grid;justify-items:start;align-content:start;gap:6px}
.team-thumb{position:relative;width:120px;height:120px;margin:0 0 12px;border-radius:50%;overflow:hidden;background:var(--bg-2);
  box-shadow:0 0 0 1px var(--line-p),0 10px 26px -12px rgba(17,19,26,.4)}
/* head-and-shoulders re-cut of the portrait (percentages keep it right at any thumbnail size) */
.team-thumb img{position:absolute;width:240%;height:auto;max-width:none;left:-87%;top:-17%}
.team-thumb--mono{isolation:isolate;display:grid;place-items:center;background:var(--bg-1)}
.team-thumb--mono>.aurora{z-index:-1}
.team-thumb--mono>span{color:var(--text-1);font:500 2.4rem/1 var(--font-display);letter-spacing:.02em}
.team-card__name{color:var(--fg-1);font:500 calc(var(--t-display-m) * .72 * var(--k-display))/1.06 var(--font-display);letter-spacing:-.01em;text-wrap:balance}
.team-card__role{color:var(--fg-3)}
.team-card__bio{align-self:start;padding-top:6px}
.team-card__bio p{max-width:68ch;color:var(--fg-2);font-size:calc(var(--t-body) * var(--k-text));line-height:1.65}
/* "the first Theta Chamber in Europe": champagne hairline underline, decoration only */
.team-hl{padding-bottom:2px;background:linear-gradient(var(--champ-600),var(--champ-600)) 0 100%/100% 1px no-repeat}
@media (max-width:767px){
  .team-card{grid-template-columns:minmax(0,1fr);gap:20px}
  .team-card__id{grid-template-columns:96px minmax(0,1fr);column-gap:18px;row-gap:2px;align-items:center}
  .team-thumb{grid-row:span 2;width:96px;height:96px;margin:0}
  .team-thumb--mono>span{font-size:2rem}
  .team-card__name{align-self:end}
  .team-card__role{align-self:start}
  .team-card__bio p{font-size:1.0625rem}
}

/* ---------- II · M30 bridge card on porcelain ---------- */
.ch--paper.team-bridge{padding-top:0}