/* Ordis AI v2: Team (P4). Founders as alternating editorial splits, clip-path portrait reveal
   (data-reveal="custom": B's reveal module adds/removes .is-pending, this file owns the look),
   company statement (B's scrub-words) and ruled facts. Parallax inside the clip: assets/js/pages/team.js. */
@layer pages{

  /* Hero */
  .team-hero .shell{display:grid;justify-items:start;gap:clamp(20px,2.4vw,28px)}
  .team-hero__title{max-width:15ch;text-wrap:balance}
  .team-hero__line{display:block;color:var(--ink-2)}
  .team-hero .lede{max-width:56ch}

  /* Founders */
  .team-people{display:grid;gap:clamp(72px,10vw,160px);margin:0;padding:0;list-style:none}
  .team-person{display:grid;gap:clamp(28px,4vw,40px);align-items:end}
  @media (min-width:640px) and (max-width:959.98px){
    .team-person{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
  }
  @media (min-width:960px){
    .team-person{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,7vw,120px)}
    .team-person:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
    .team-person:nth-child(even) .team-person__media{order:2}
    .team-person:nth-child(even) .team-person__body{justify-self:end}
  }

  .team-person__media{
    position:relative;margin:0;
    aspect-ratio:4/5;
    overflow:hidden;
  }
  /* The wipe lives on the picture, not the observed figure: a clip-path on the IntersectionObserver
     target itself keeps its intersection ratio at 0, so the reveal would never fire. */
  .team-person__media picture{
    display:block;block-size:100%;
    background:var(--bg-2);
    clip-path:inset(0);
    transform-origin:50% 100%;
    transition:clip-path var(--d-xl) var(--ease-inout),transform calc(var(--d-xl) + var(--d-sm)) var(--ease-out);
  }
  .team-person__img{
    display:block;inline-size:100%;block-size:100%;
    object-fit:cover;object-position:50% 30%;
    transition:filter var(--d-md) var(--ease-ui);
  }
  /* Pointer devices: monochrome until the person is hovered or focused; touch keeps full colour. */
  @media (hover:hover){
    .team-person__img{filter:grayscale(1) contrast(1.04)}
    .team-person:hover .team-person__img,
    .team-person:focus-within .team-person__img{filter:none}
  }
  /* .reg corner marks sit above the photo */
  .team-person__media.reg::after{z-index:1}

  /* Pending look (JS only, below the fold): wiped up from the bottom, photo slightly zoomed */
  html.js .team-person__media.is-pending picture{clip-path:inset(100% 0 0 0);transform:scale(1.18)}

  .team-person__body{display:grid;justify-items:start;gap:14px;max-inline-size:34rem}
  .team-person__n{
    display:flex;align-items:center;gap:12px;
    font-size:var(--fs-eyebrow);letter-spacing:.08em;color:var(--accent-text);
    font-variant-numeric:tabular-nums;
  }
  .team-person__n::after{content:"";inline-size:48px;block-size:1px;background:var(--line-3)}
  .team-person__name{margin-top:6px;line-height:1}
  .team-person__role{
    font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  }
  .team-person__bio{max-width:46ch;margin-top:6px;color:var(--ink-2);line-height:1.7;text-wrap:pretty}
  .team-person__link{margin-top:10px}

  /* Company */
  #company .sec-head{margin-bottom:clamp(32px,4vw,56px)}
  .team-statement{
    max-width:30ch;
    margin-bottom:clamp(48px,6vw,88px);
    font-size:clamp(1.5rem,1.05rem + 2vw,3rem);
    font-weight:300;line-height:1.18;letter-spacing:-.025em;
    color:var(--ink);
    text-wrap:pretty;
  }
  .team-facts .cell dd.sub a{
    color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-3);
    text-underline-offset:.22em;text-decoration-thickness:1px;
    transition:text-decoration-color var(--d-xs) var(--ease-ui);
  }
  .team-facts .cell dd.sub a:hover{text-decoration-color:currentColor}
  .team-social{display:grid;gap:8px;margin:0;padding:0;list-style:none}
  .team-social a{
    display:inline-flex;align-items:center;gap:6px;min-block-size:24px;
  }
  .team-social .ico{
    inline-size:12px;block-size:12px;flex:none;
    fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
    transition:transform var(--d-sm) var(--ease-spring);
  }
  .team-social a:hover .ico{transform:translate(2px,-2px)}
  .team-facts a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
}