/* =====================================================================================================
   ChillX — TEAM PROFILE TEMPLATE  (/team/*.html, 10 pages)            owner: team-template builder
   Rebuild of the Wix Studio draft profile pages (slugs blank-1 … blank-2-1-1-1-1-1); measured against
   site-build/wix-spec/team__{name}/layout.css. Every profile page = the same two sections:
     1. hero    : portrait cell (left) | light-green name panel with a thin rule (right)
     2. summary : "Professional Summary" heading row spanning the section, then 1 or 2 text boxes
   Studio sizes are written as  calc(N * var(--tp-u)),  N = the spx value at a 1920px window
   (= layout.css coefficient x 1920). --tp-u follows Studio's --scaling-factor: the page width, capped
   at the section max-width (--tp-max), divided by 1920 (100cqw = <main> width, i.e. without scrollbar).

   ---------------------------------------------------------------------------------------------------
   MARKUP (copy exactly; {…} = per-page value; keep text verbatim from tree.txt incl. &nbsp; and <br>)
   ---------------------------------------------------------------------------------------------------
   <head> … skeleton from BUILD_BRIEF … <link rel="stylesheet" href="/site.css">
   <link rel="stylesheet" href="/team.css">
   <style>.tp{--tp-max:1600px;--tp-photo-pos:50% 27.4%}</style>    (page knobs only, see PAGE KNOBS)

   <main class="tp">
     <section class="tp-hero" aria-labelledby="tp-name">
       <div class="tp-photo">
         <img src="/assets/media/{id}~mv2.webp" alt="Portrait of {Name}" width="{w}" height="{h}"
              decoding="async" fetchpriority="high">
       </div>
       <div class="tp-id">
         <h1 class="tp-name" id="tp-name">{NAME}&nbsp;<br> {Role}</h1>
         <span class="tp-rule" aria-hidden="true"></span>
       </div>
     </section>
     <section class="tp-sum" aria-labelledby="tp-sum-title">
       <div class="tp-sum-head">
         <h2 class="tp-sum-title" id="tp-sum-title">Professional <span class="tp-accent">Summary</span></h2>
       </div>
       <!-- two-column pages (hieu-tran, frederic-plourde, manuel-pham): -->
       <div class="tp-box tp-box--soft"><div class="tp-text tp-text--lead"> <p>…</p> </div></div>
       <div class="tp-box"><div class="tp-text"> <p>…</p> </div></div>
       <!-- one-column pages: add class tp-sum--one to the section and use ONE box, e.g.
       <div class="tp-box tp-box--green"><div class="tp-text tp-text--full"> <p>…</p> </div></div>
       (a decorative FiveGridLine inside a box = <span class="tp-rule" aria-hidden="true"></span> as a 2nd child) -->
     </section>
   </main>

   Rich text: Wix <p>/<h2>/<h6> body blocks become <p> (body text is not a heading); drop bare <span>
   wrappers and empty <span class="wixGuard"></span>; <span style="font-weight:bold;"> -> <b>;
   <span style="color:#005200;"> -> <span class="tp-accent">; lists = <ul><li><p>…</p></li></ul>.
   French text: lang="fr" on its .tp-text. Wix filename alts ("DSC08093 copy_edited.png") -> real alt.
   Typos/placeholders stay verbatim with a <!-- DRAFT NOTE: … --> comment (BUILD_BRIEF fidelity rules).

   ---------------------------------------------------------------------------------------------------
   CLASSES (Wix source in brackets; spx = value at a 1920px window)
   ---------------------------------------------------------------------------------------------------
   .tp-box            white box, 1.52spx border rgba(47,43,54,.1)               [--brw 1.52spx, alpha .1]
                      (Wix box borders are overlays -> inset box-shadow, they never shift the content)
   .tp-box--soft      white box, 15.2spx border at 1% alpha (2-col left box)    [--brw 15.2spx, alpha .01]
   .tp-box--green     #BFE3B4 box (1-col pages: ralf, justin, david-m, tam, ha-do, david-r) [--bg 191,227,180]
   .tp-text           Montserrat 27.36spx, line-height 1.6, left, width 94.987%, centred vertically
                      (2-col right text; manuel-baumgartner's body)              [font_8 + montserrat override]
   .tp-text--lh14     line-height 1.4 when the Wix block is <h6 class="font_6"> (hieu-tran right text)
   .tp-text--top      align to top with 58.78spx margin (frederic right text)   [align-self:start; mt 58.78spx]
   .tp-text--lead     Wix Madefor Text max(18px,min(60px,27.36spx)), line-height 2, justified, width 85.955%,
                      top + 58.78spx margin (2-col left text)                   [--lineHeight 2em, justify]
   .tp-text--full     width 89.849%, justified (1-col green box text; add its small Wix margins in the page)
   .tp-rule           FiveGridLine. Inside a body box (ha-do, david-rodriguez) add it as the box's 2nd child
                      with its own width: <span class="tp-rule" style="--tp-rule-w:10.3182994%" aria-hidden="true">

   ---------------------------------------------------------------------------------------------------
   PAGE KNOBS (set on .tp in the page <style>; defaults = hieu-tran / frederic-plourde / manuel-pham)
   ---------------------------------------------------------------------------------------------------
   --tp-max         1600px | 99999px  section max-width (--variables-m137uptb = 1600px, or 99999999999px)
   --tp-hero-cols   .5867912551fr 1.4132087449fr   hero grid-template-columns (ralf: .7282318625fr 1.2717681375fr)
   --tp-photo-pos   50% 50%  object-position. Wix 'fill' + focal (fx,fy) CENTRES the focal point:
                    with the image covering a w x h cell at H px tall, y% = clamp(0,(fy*H - h/2)/(H - h),1)
                    (same for x when the image overflows sideways). No focal in tree.txt -> 50% 50%.
   --tp-photo-ar    563.3/657.26  phone-only aspect ratio of the portrait = (photo-column fraction x 1920)/657.26
                    so the phone crop matches the desktop crop (ralf: 699.1/657.26)
   --tp-rule-w      16.2264449%  FiveGridLine width (27.6733896% / 42.4890618% on other pages)
   --tp-rule-m      0            FiveGridLine margins, e.g. 0 calc(11.2 * var(--tp-u)) calc(.8 * var(--tp-u)) 0
   --tp-head-h      167.70       summary heading row min-height in spx = 1st grid-template-rows coefficient x 1920
   --tp-body-h      1113.53      summary body row min-height in spx    = 2nd coefficient x 1920 (frederic 2177)
   --tp-sum-cols    .8749341029fr 1.1250658971fr  (one-column pages: add .tp-sum--one instead)
   Anything else page-specific (Baumgartner's top/right-offset name block: .tp-name{align-self:start;
   justify-self:end;margin:calc(217.4 * var(--tp-u)) calc(-299.2 * var(--tp-u)) 0 0}, small text margins) = page <style>.

   Verified 1-column example (ralf-schmidt, measured identical to the draft at 1440px):
     .tp{--tp-max:99999px;--tp-hero-cols:.7282318625fr 1.2717681375fr;--tp-photo-pos:50% 8.7%;--tp-photo-ar:699.1/657.26;
         --tp-rule-w:42.4890618%;--tp-rule-m:0 calc(5.5901 * var(--tp-u)) calc(.7763 * var(--tp-u)) 0;
         --tp-head-h:113.16;--tp-body-h:751.51}
     .tp-text--full{margin:0 calc(13.2497 * var(--tp-u)) calc(25.1628 * var(--tp-u)) 0}
     + <section class="tp-sum tp-sum--one">…<div class="tp-box tp-box--green"><div class="tp-text tp-text--full">
   Check: PYTHONUTF8=1 python site-build/compare.py --local-only team__{name}  (the only expected residual is
   PAGE height -30px = the Wix ad banner on the live draft).
   ===================================================================================================== */

.tp{
  --tp-max:1600px;
  --tp-u:calc(min(100cqw, var(--tp-max)) / 1920);
  --tp-bw:max(.5px, calc(1.5203 * var(--tp-u)));
  --tp-line:rgba(47,43,54,.1);
  container-type:inline-size;
  display:block;
  color:#2F2B36;
}
.tp :where(h1,h2,p,ul){margin:0}

/* ---------- 1. hero: portrait | name panel ---------- */
.tp-hero{
  display:grid;
  grid-template-columns:var(--tp-hero-cols, .5867912551fr 1.4132087449fr);
  grid-template-rows:minmax(calc(657.26 * var(--tp-u)), auto);
  max-width:var(--tp-max);
  margin:0 auto;
}
.tp-photo{min-width:0;contain:size;overflow:hidden;background:#BFE3B4}  /* ImageX --backgroundColor 191,227,180 behind transparent PNGs */
.tp-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:var(--tp-photo-pos, 50% 50%);
  outline:1px solid var(--tp-line);outline-offset:-1px;                 /* ImageX 1px border, alpha .1 */
}
.tp-id{
  display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);
  min-width:0;
  background:#BFE3B4;
  box-shadow:inset 0 0 0 var(--tp-bw) var(--tp-line);
}
.tp-id>*{grid-area:1/1}
.tp-name{
  align-self:center;
  font:400 calc(45.6058 * var(--tp-u))/1.4 Montserrat,sans-serif;          /* font_6 + montserrat override */
  text-align:center;color:#2F2B36;
}
.tp-rule{
  display:block;align-self:center;justify-self:center;
  width:var(--tp-rule-w, 16.2264449%);height:0;
  margin:var(--tp-rule-m, 0);
  border-top:1px solid #2F2B36;
}

/* ---------- 2. Professional Summary ---------- */
.tp-sum{
  display:grid;
  grid-template-columns:var(--tp-sum-cols, .8749341029fr 1.1250658971fr);
  grid-template-rows:minmax(calc(var(--tp-head-h, 167.70) * var(--tp-u)), auto) minmax(calc(var(--tp-body-h, 1113.53) * var(--tp-u)), auto);
  max-width:var(--tp-max);
  margin:0 auto;
}
.tp-sum--one{grid-template-columns:minmax(0,1fr)}
.tp-sum-head{
  grid-column:1/-1;
  display:grid;align-items:center;
  box-shadow:inset 0 0 0 var(--tp-bw) var(--tp-line);                    /* transparent box, 1.5spx border */
}
.tp-sum-title{font:700 calc(45.6058 * var(--tp-u))/1.4 Montserrat,sans-serif;text-align:center;color:#2F2B36}
.tp-accent{color:#005200}

.tp-box{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;
  min-width:0;
  background:#fff;
  box-shadow:inset 0 0 0 var(--tp-bw) var(--tp-line);
}
.tp-box>*{grid-area:1/1}
.tp-box--soft{box-shadow:inset 0 0 0 max(.5px, calc(15.202 * var(--tp-u))) rgba(47,43,54,.01)}
.tp-box--green{background:#BFE3B4}

.tp-text{
  width:94.9867573%;min-width:0;
  justify-self:center;align-self:center;
  font:400 calc(27.3635 * var(--tp-u))/1.6 Montserrat,sans-serif;
  text-align:left;color:#2F2B36;
}
.tp-text--lh14{line-height:1.4}
.tp-text--top{align-self:start;margin-top:calc(58.7806 * var(--tp-u))}
.tp-text--lead{
  width:85.9550276%;
  align-self:start;margin-top:calc(58.7806 * var(--tp-u));
  font-family:var(--madefor);
  font-size:max(18px, min(60px, calc(27.3635 * var(--tp-u))));
  line-height:2;text-align:justify;
}
.tp-text--full{width:89.8492328%;text-align:justify}
.tp-text b{font-weight:700}
.tp-text ul{margin:0 0 0 .5em;padding:0 0 0 1.3em}

/* ---------- tablet (draft: same grid, scaled; the name turns bold) ---------- */
@media (max-width:1000px){
  .tp-name{font-weight:700}
}

/* ---------- phone: one clean column (the draft only squeezes the desktop grid to ~9-11px text) ---------- */
@media (max-width:750px){
  .tp-hero,.tp-sum{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .tp-photo{aspect-ratio:var(--tp-photo-ar, 563.3/657.26)}
  .tp-id{padding:36px 20px}
  .tp-name{font-size:24px}
  .tp-rule{width:min(80%, calc(var(--tp-rule-w, 16.2264449%) * 2.4));margin:0}
  .tp-sum-head{padding:22px 20px}
  .tp-sum-title{font-size:24px}
  .tp-box{padding:28px 20px}
  .tp-box--soft{box-shadow:inset 0 0 0 1px var(--tp-line)}
  .tp-text,.tp-text--lead,.tp-text--full{width:100%;margin:0;font-size:16px;text-align:left}
  .tp-text--lead{line-height:1.9}
}