/* ===========================================================
   AURALIS — About page styles (shared by the 3 options)
   Tokens only · Helvetica Neue · black background.
   Option A = .about--editorial  (abhero / roster)
   Option B = .about--grid       (abhero2 / tgrid / values)
   Option C = .about--cinematic  (abhero3 / tfeat)
   Reuses .position .stats .start .scard .foot .pill from site.css
   =========================================================== */

/* ---- team headshot placeholder (shared) ----------------------------------
   Plankton-green card fill with the member's initials in faded Fountain
   Frolic. Drop a real portrait in as <img> inside the media box and it
   layers on top of the placeholder (object-fit:cover). */
.t-ph{
  position:absolute;inset:0;display:grid;place-items:center;
  background:var(--ink-3);
  font-size:clamp(2.4rem,5vw,4rem);font-weight:500;letter-spacing:-.03em;
  color:var(--cream-24);user-select:none;
}
.t-media{position:relative;overflow:hidden;border-radius:2px;background:var(--ink-3)}
.t-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1.2s var(--ease-out);
  /* desaturate the portraits to match the site's black & white treatment */
  filter:grayscale(1) contrast(1.04)}
.t-media:hover img{transform:scale(1.035)}   /* subtle hover zoom */

/* shared section heading bar */
.team__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding:0 var(--shell)}
.team__title{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:500;line-height:1;
  letter-spacing:-.03em}
.team__intro{max-width:38ch;font-size:14px;line-height:1.6;color:var(--cream-60)}

/* =====================================================================
   OPTION A — EDITORIAL ROSTER
   ===================================================================== */
.abhero{padding:clamp(150px,20vw,260px) var(--shell) clamp(50px,8vw,110px)}
.abhero__kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-60);margin-bottom:clamp(22px,3vw,40px)}
.abhero__kicker::before{content:"";display:inline-block;width:26px;height:1px;
  background:var(--cream-40);vertical-align:middle;margin-right:12px}
.abhero__title{font-size:clamp(2.4rem,6.6vw,6rem);font-weight:500;line-height:1.0;
  letter-spacing:-.035em;max-width:18ch}
.abhero__foot{display:grid;grid-template-columns:1.5fr 1fr;
  gap:clamp(28px,5vw,80px);align-items:start;
  margin-top:clamp(48px,7vw,100px);padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--line)}
.abhero__lede{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.5;
  letter-spacing:-.015em;max-width:46ch}
.abhero__meta{display:flex;flex-direction:column;gap:20px}
.abhero__meta div{display:flex;flex-direction:column;gap:5px}
.abhero__meta b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:var(--cream-60)}
.abhero__meta span{font-size:15px;color:var(--cream)}

/* standalone intro block (Option A's lede + meta, used below the C hero) */
.ab-intro{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,5vw,80px);
  align-items:start;padding:clamp(56px,8vw,110px) var(--shell) clamp(20px,3vw,40px)}

.team{padding:clamp(40px,7vw,90px) 0 clamp(20px,3vw,40px)}
.team__head .pill{align-self:center}
.roster{list-style:none;margin-top:clamp(40px,6vw,80px)}
.tmember{display:grid;grid-template-columns:clamp(220px,30vw,380px) 1fr;
  gap:clamp(24px,4vw,64px);align-items:start;
  padding:clamp(34px,4vw,56px) var(--shell);
  border-top:1px solid var(--line)}
.tmember:last-child{border-bottom:1px solid var(--line)}
.tmember .t-media{aspect-ratio:4/5;width:100%}
.tmember__body{position:relative;padding-top:6px}
.tmember__name{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:500;
  letter-spacing:-.025em;line-height:1.04}
/* names stay on a single line on desktop; wrap on tablet/mobile */
@media (min-width:1025px){.tmember__name{white-space:nowrap}}
.tmember__bio{margin-top:20px;font-size:15px;line-height:1.62;color:var(--cream-60);
  max-width:62ch}

/* =====================================================================
   OPTION B — MANIFESTO + GRID
   ===================================================================== */
.abhero2{position:relative;padding:clamp(150px,20vw,260px) var(--shell) clamp(60px,9vw,120px);
  display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,5vw,80px);
  align-items:end;overflow:hidden}
.abhero2__ring{position:absolute;right:-10%;top:6%;width:min(60vw,640px);aspect-ratio:1;
  border:1px solid var(--line);border-radius:50%;pointer-events:none;z-index:0}
.abhero2__ring::after{content:"";position:absolute;inset:16%;border-radius:50%;
  border:1px solid var(--line)}
.abhero2>*{position:relative;z-index:1}
.abhero2__title{font-size:clamp(2.8rem,8vw,7rem);font-weight:500;line-height:.98;
  letter-spacing:-.04em}
.abhero2__side{padding-bottom:8px}
.abhero2__kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-60);margin-bottom:18px}
.abhero2__lede{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;
  color:var(--cream);max-width:44ch;margin-bottom:28px}

.tgrid-sec{padding:clamp(50px,8vw,110px) 0 clamp(20px,3vw,40px)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px);
  padding:clamp(40px,6vw,72px) var(--shell) 0}
.tcard{display:flex;flex-direction:column}
.tcard .t-media{aspect-ratio:3/4;width:100%}
.tcard__name{margin-top:20px;font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:500;
  letter-spacing:-.02em;line-height:1.06}
.tcard__role{margin-top:9px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);opacity:.66}
.tcard__bio{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--cream-60);
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
  transition:-webkit-line-clamp .3s}
.tcard:hover .tcard__bio{-webkit-line-clamp:initial}

/* values / ethos band */
.values{padding:clamp(80px,12vw,160px) var(--shell)}
.values__title{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:400;line-height:1.18;
  letter-spacing:-.02em;max-width:22ch;margin-bottom:clamp(40px,5vw,70px)}
.values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.values__item{border-top:1px solid var(--line);padding-top:22px}
.values__item b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-60);font-weight:500;margin-bottom:14px}
.values__item p{font-size:15px;line-height:1.6;color:var(--cream)}

/* =====================================================================
   OPTION C — CINEMATIC
   ===================================================================== */
.abhero3{position:relative;min-height:88svh;display:flex;align-items:flex-end;
  padding:clamp(120px,16vw,200px) var(--shell) clamp(50px,8vw,100px);overflow:hidden}
.abhero3__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.abhero3::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 30%,rgba(0,0,0,.55) 78%,var(--ink) 100%)}
.abhero3__inner{position:relative;z-index:2;max-width:none;width:100%}
.abhero3__kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);opacity:.8;margin-bottom:22px}
.abhero3__title{font-size:clamp(2.4rem,7.4vw,6.6rem);font-weight:500;line-height:1.02;
  letter-spacing:-.04em;max-width:none}
.abhero3__lede{margin-top:clamp(24px,3vw,38px);font-size:clamp(1.1rem,1.5vw,1.35rem);
  line-height:1.5;color:var(--cream);max-width:50ch}

.tfeat-sec{padding:clamp(60px,9vw,120px) 0 clamp(20px,3vw,40px)}
.tfeat{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,80px);align-items:center;
  padding:clamp(48px,7vw,100px) var(--shell)}
.tfeat:nth-child(even) .t-media{order:2}
.tfeat .t-media{aspect-ratio:1/1;width:100%}
.tfeat__no{font-size:clamp(3rem,7vw,6rem);font-weight:500;line-height:1;
  letter-spacing:-.04em;color:var(--cream);opacity:.14;margin-bottom:18px}
.tfeat__name{font-size:clamp(1.8rem,3.4vw,3rem);font-weight:500;letter-spacing:-.03em;
  line-height:1.02}
.tfeat__role{margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-60)}
.tfeat__bio{margin-top:22px;font-size:15px;line-height:1.64;color:var(--cream-60);
  max-width:52ch}

/* position statement (mirrors the homepage component, so option C is
   self-contained without loading studio.css) */
.position{padding:clamp(70px,11vw,170px) var(--shell) clamp(40px,6vw,90px)}
.position p{font-size:clamp(1.7rem,4.3vw,3.7rem);font-weight:500;line-height:1.12;
  letter-spacing:-.025em;max-width:24ch}
.position__foot{display:flex;gap:clamp(24px,4vw,60px);flex-wrap:wrap;
  margin-top:clamp(36px,5vw,64px);padding-top:26px;border-top:1px solid var(--line)}
.position__foot div{max-width:30ch}
.position__foot b{display:block;font-weight:500;font-size:1.05rem;margin-bottom:6px}
.position__foot span{color:var(--cream-60);font-size:14px;line-height:1.5}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:860px){
  .abhero__foot,.ab-intro{grid-template-columns:1fr;gap:30px}
  .abhero2{grid-template-columns:1fr;gap:30px}
  .abhero2__ring{display:none}
  .tmember{grid-template-columns:1fr;gap:20px}
  .tmember .t-media{aspect-ratio:16/11;max-width:420px}
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .values__grid{grid-template-columns:1fr}
  .tcard__bio{-webkit-line-clamp:initial}
  .tfeat{grid-template-columns:1fr;gap:22px}
  .tfeat:nth-child(even) .t-media{order:0}
  .tfeat .t-media{aspect-ratio:16/11;max-width:480px}
}
@media (max-width:560px){
  .tgrid{grid-template-columns:1fr;max-width:420px}
}