/* 7Code — team: /team, /team/{slug}, plus the team cards on the homepage and /about. Builds on the tokens + inner-page classes in styles.css.
   Photos are shown at (or below) their real pixel size — never stretched — so they stay sharp. */

/* =========================== shared =========================== */
.tm-kick{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red);line-height:1.3}
.tm-kick::before{content:"";width:10px;height:10px;background:var(--red);flex:0 0 auto}
.tm-nick{color:var(--red)}

/* =========================== team cards (.member) =========================== */
.member .mph{position:relative;overflow:hidden}
.member .mph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
a.tm-card{display:block;color:inherit;transition:background .25s}
a.tm-card .tm-go{display:inline-flex;gap:6px;margin-top:12px;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink45);transition:color .25s}
a.tm-card:hover{background:var(--panel)}
a.tm-card:hover .tm-go,a.tm-card:focus-visible .tm-go{color:var(--red)}
a.tm-card:focus-visible{outline-offset:-3px}

/* =========================== profile: hero =========================== */
.tm-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,377px);grid-template-rows:auto auto auto auto auto 1fr;
  grid-template-areas:"kick photo" "name photo" "lead photo" "meta photo" "acts photo" ". photo";column-gap:clamp(32px,6vw,96px);align-items:start}
.tm-hero>.tm-kick{grid-area:kick}
.tm-name{grid-area:name;margin-top:18px;font-weight:900;font-size:clamp(40px,6.2vw,100px);line-height:.9;letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance;overflow-wrap:break-word}
.tm-lead{grid-area:lead}
.tm-meta{grid-area:meta}
.tm-acts{grid-area:acts}
.tm-acts .btn{min-height:46px}
/* photo: 374 px wide file in a frame whose inner box is exactly 374 px (1.5 px border each side) */
.tm-photo{grid-area:photo;margin:0;width:100%;max-width:377px;justify-self:end;position:relative;display:flex;justify-content:flex-end}
.tm-fr{position:relative;width:fit-content;max-width:100%;border:1.5px solid var(--ink);background:var(--panel)}
.tm-fr::after{content:"";position:absolute;inset:-1.5px;z-index:-1;background:var(--red);transform:translate(12px,12px)}
.tm-fr picture{display:block}
.tm-fr img{display:block;width:100%;max-width:374px;height:auto}   /* never wider than the file: the frame shrinks to the image, whatever the border rounds to */

/* pull-quote */
.tm-quote{background:var(--panel);border-bottom:1.5px solid var(--ink)}
.tm-q{margin:0;padding:clamp(44px,7vw,100px) 0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(16px,3vw,44px);align-items:start}
.tm-qm{grid-row:1/3;color:var(--red);width:clamp(40px,5vw,72px);height:auto}
.tm-q blockquote,.tm-q figcaption{grid-column:2}
.tm-q blockquote p{font-weight:800;font-size:clamp(26px,3.7vw,56px);line-height:1.1;letter-spacing:-.025em;max-width:24ch;text-wrap:balance}
.tm-q figcaption{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink45)}
.tm-q figcaption::before{content:"";width:28px;height:2px;background:var(--red);flex:0 0 auto}
.tm-q figcaption b{color:var(--ink);font-weight:700}

/* story, expertise, languages */
.tm-bio p{color:var(--ink70)}
.tm-bio p:first-child{color:var(--ink);font-size:clamp(20px,2vw,27px);line-height:1.38;font-weight:700;letter-spacing:-.01em}
.tm-chips{gap:10px}
.tm-chips li{font-size:13.5px;padding:10px 16px;border-color:var(--ink);color:var(--ink);line-height:1.35}
.tm-langs li[lang=ar]{font-family:"Cairo",system-ui,sans-serif;font-size:15.5px;padding-block:8px}

/* how I think */
.tm-think{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);margin-top:14px}
.tm-think li{position:relative;padding:clamp(24px,3vw,40px) clamp(18px,2.4vw,32px) clamp(28px,3.4vw,46px);border-inline-end:1.5px solid var(--ink)}
.tm-think li:last-child{border-inline-end:0}
.tm-think li::before{content:"";position:absolute;inset-inline-start:0;top:-1.5px;height:3px;width:0;background:var(--red);transition:width .4s cubic-bezier(.2,.7,0,1)}
.tm-think li:hover::before{width:100%}
.tm-think .tm-n{display:block;font-weight:900;font-size:clamp(64px,7.4vw,112px);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--ink);direction:ltr;text-align:start;transition:-webkit-text-stroke-color .25s}
.tm-think li:hover .tm-n{-webkit-text-stroke-color:var(--red)}
.tm-think h3{font-weight:900;text-transform:uppercase;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;line-height:1.05;margin:26px 0 12px}
.tm-think p{color:var(--ink70);font-size:16px;line-height:1.6;max-width:42ch}

.tm-pp .shead .k{white-space:nowrap}   /* short counters ("CASE STUDIES / 05") stay on one line */
.tm-fsec .shead{flex-wrap:wrap;row-gap:8px}

/* projects I led */
.tm-rel .rel-card .t{line-height:1.05}
.tm-next{margin-top:clamp(64px,8vw,110px)}
.tm-next+.cta-band{margin-top:0}

/* =========================== founder card (/team, /about) =========================== */
.tm-feat{display:grid;grid-template-columns:minmax(0,1fr);border:1.5px solid var(--ink);margin-top:14px;transition:border-color .25s}
.tm-feat.has-ph{grid-template-columns:374px minmax(0,1fr)}
.tm-feat:hover{border-color:var(--red)}
.tm-feat-ph{display:flex;justify-content:center;align-items:flex-start;background:var(--panel);min-width:0}
.tm-feat-ph picture{display:block;width:100%;max-width:374px}
.tm-feat-ph img{display:block;width:100%;max-width:374px;height:auto}
.tm-feat-b{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;padding:clamp(22px,3.4vw,48px)}
.tm-feat.has-ph .tm-feat-b{border-inline-start:1.5px solid var(--ink)}
.tm-feat-n{margin-top:16px;font-weight:900;font-size:clamp(34px,4.4vw,70px);line-height:.92;letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance}
.tm-feat-n a{transition:color .2s}
.tm-feat-n a:hover{color:var(--red)}
.tm-feat-h{margin-top:18px;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink70);max-width:52ch}
.tm-feat-q{margin-top:26px;padding-inline-start:18px;border-inline-start:3px solid var(--red)}
.tm-feat-q p{font-weight:800;font-size:clamp(19px,1.9vw,26px);line-height:1.25;letter-spacing:-.01em;max-width:34ch}
.tm-feat-go{margin-top:30px;min-height:46px}

/* =========================== /team page =========================== */
.tm-join{margin-top:clamp(64px,8vw,110px)}
.tm-join-a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 24px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:clamp(28px,4vw,52px) 0;transition:background .3s,padding .3s}
.tm-join-a .k{grid-column:1/-1;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink45)}
.tm-join-a .t{font-weight:900;font-size:clamp(30px,5vw,72px);line-height:.92;letter-spacing:-.03em;text-transform:uppercase}
.tm-join-a .d{display:inline-flex;align-items:center;gap:8px;min-height:46px;font-family:var(--mono);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border:1.5px solid var(--ink);padding:10px 16px}
.tm-join-a:hover{background:var(--red);color:#fff;padding-inline:18px}
.tm-join-a:hover .k{color:#fff}
.tm-join-a:hover .d{border-color:#fff}

/* =========================== Arabic =========================== */
html[dir=rtl] .tm-kick{font-size:15px}
html[dir=rtl] .tm-name{line-height:1.3;font-size:clamp(38px,5.4vw,86px)}
html[dir=rtl] .tm-fr::after{transform:translate(-12px,12px)}
html[dir=rtl] .tm-qm{transform:scaleX(-1)}
html[dir=rtl] .tm-q blockquote p{font-size:clamp(24px,3.2vw,46px);line-height:1.65;max-width:26ch}
html[dir=rtl] .tm-q figcaption{font-size:14.5px}
html[dir=rtl] .tm-bio p{line-height:1.9}
html[dir=rtl] .tm-bio p:first-child{line-height:1.65}
html[dir=rtl] .tm-chips li{font-family:var(--mono);font-size:15.5px;padding-block:8px}
html[dir=rtl] .tm-think .tm-n{text-align:right}
html[dir=rtl] .tm-think h3{line-height:1.45}
html[dir=rtl] .tm-think p{line-height:1.9}
html[dir=rtl] .tm-feat-n{line-height:1.3}
html[dir=rtl] .tm-feat-q p{line-height:1.7}
html[dir=rtl] .tm-feat-h{line-height:1.8}
html[dir=rtl] .tm-join-a .t{line-height:1.3}
html[dir=rtl] .tm-join-a .k,html[dir=rtl] .tm-join-a .d,html[dir=rtl] a.tm-card .tm-go{font-size:14px}
html[dir=rtl] .member .mn{line-height:1.5}
html[dir=rtl] .tm-rel .rel-card .t{line-height:1.3}
/* Russian (Montserrat): its heavy weight has overlapping contours, so the outlined numbers are solid there */
html[lang=ru] .tm-name,html[lang=ru] .tm-feat-n,html[lang=ru] .tm-join-a .t{letter-spacing:-.02em}
html[lang=ru] .tm-think .tm-n{color:var(--ink45);-webkit-text-stroke:0;letter-spacing:-.03em;transition:color .25s}
html[lang=ru] .tm-think li:hover .tm-n{color:var(--red)}

/* =========================== responsive =========================== */
@media(max-width:1100px){
  .tm-think{grid-template-columns:1fr}
  .tm-think li{display:grid;grid-template-columns:clamp(64px,10vw,96px) minmax(0,1fr);column-gap:16px;border-inline-end:0;border-bottom:1.5px solid var(--line);padding:26px 0}
  .tm-think li:last-child{border-bottom:0}
  .tm-think li::before{display:none}
  .tm-think .tm-n{grid-row:1/3;font-size:clamp(52px,7vw,72px)}
  .tm-think h3{margin:4px 0 8px}
}
@media(max-width:900px){
  .tm-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"kick" "name" "photo" "lead" "meta" "acts"}
  .tm-photo{justify-self:start;justify-content:flex-start;margin-top:28px;max-width:min(377px,calc(100% - 12px))}
  .tm-feat.has-ph{grid-template-columns:minmax(0,240px) minmax(0,1fr)}
  .tm-rel{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .tm-feat.has-ph{grid-template-columns:minmax(0,1fr)}
  .tm-feat.has-ph .tm-feat-b{border-inline-start:0;border-top:1.5px solid var(--ink)}
  .tm-rel{grid-template-columns:1fr}
  .tm-q{grid-template-columns:minmax(0,1fr)}
  .tm-qm{grid-row:auto;width:40px;margin-bottom:16px}
  .tm-q blockquote,.tm-q figcaption{grid-column:1}
  .tm-join-a{grid-template-columns:minmax(0,1fr)}
  .tm-join-a .d{justify-self:start}
}
@media(max-width:520px){
  .tm-acts{display:grid;grid-template-columns:minmax(0,1fr)}
  .tm-acts .btn{justify-content:center;text-align:center}
  .tm-think li{grid-template-columns:56px minmax(0,1fr);column-gap:12px}
  .tm-think .tm-n{font-size:48px}
}
@media(prefers-reduced-motion:reduce){.tm-join-a:hover{padding-inline:0}}