/* SAVED SECTIONS below the hero (t1823): institution band, existing Supercharge, Meet the Team. Recovered, not redesigned.
   SCOPING: every selector starts with its own section id (#team-f2, #p67, #team), so none of the legacy global classes (.card .nm .ph .ttl .li .it .layer .strip .still .pz)
   can touch the hero, the nav or each other. Nothing here uses body/html/:root selectors. Rules are copied from the saved style blocks
   (_sections_package/source/ALL_STYLE_BLOCKS_REFERENCE_ONLY.txt) with their later override blocks applied in cascade order; the line numbers are cited.
   ADAPTED (not in the sources, disclosed in README): the legacy 1440px absolute geometry of #p67 is rebuilt as a responsive grid with the same card artwork,
   sizes and text; #team drops its 1100px min-height and its padding and title scale with width.
   Status: recovered sources. */

@font-face { font-family: "Urbanist"; src: url("../_sections_package/assets/fonts/Urbanist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }   /* team title; Latin subset (W5) of the package file, sha256 957b3b61... */

/* =========================== 1. INSTITUTION BAND  #team-f2  =========================== */
/* Source: .band2 / .strip / .layer / .it / .nm rules (style lines 358-406), P67 desktop sizes (608-624), #team-f2 label (633-634), pause-control hiding (652-661),
   and the later hero_v2 override that made the f2 names Geist (line 676).
   t1848u: the six names are now the authentic WHITE logo SVGs (assets/institutions/white/, see PROVENANCE.json there). The saved band geometry is kept: the strip is centred on the same line,
   the label, the gap and the section height are unchanged. Logos are sized BY HEIGHT only (width:auto, object-fit:contain, never stretched, cropped or recoloured), from the per-logo optical
   heights of carousel-heights.json (px at desktop: Stanford 39, UC Berkeley 42, UCSF 45, UCLA 36, SLAC 34, CERN 74). --k scales them all together (1 desktop, .62 at 860px and below).
   t1852u (make it a bit smaller): every per-logo height is x0.9 (desktop Stanford 35.1, UC Berkeley 37.8, UCSF 40.5, UCLA 32.4, SLAC 30.6, CERN 66.6; at 860px and below x --k .62: 21.8, 23.4, 25.1, 20.1,
   19.0, 41.3). The strip box (--box) FOLLOWS THE TALLEST LOGO (the max() of the six heights, x --k): desktop 66.6px (was 74), mobile 41.3px (was 45.9). The band's vertical padding is trimmed by 12%:
   desktop 27.46 / 31.33px (was 31.2 / 35.6; total 66.8 to 58.79), mobile 22.05 / 25.57px (was 25.06 / 29.06; total 54.12 to 47.62). Nothing is clipped: the strip is as tall as CERN.
   t1849u (proportional, aligned): every logo is sized by HEIGHT only (width:auto, object-fit:contain), each keeping its own optical height, and every logo is centred on ONE shared line:
   the track (.layer), every item (.it) and every logo (.lg) are align-items / align-self: center, never baseline or top. */
#team-f2 { --ink: #EDEDED; --page: #000000; --k: .72;   /* 2026-11-09 pt2012u: band smaller/quieter, logos x0.72 (was --k 1) */
  --lh-stanford: 35.1px; --lh-uc-berkeley: 37.8px; --lh-ucsf: 40.5px; --lh-ucla: 32.4px; --lh-slac: 30.6px; --lh-cern: 66.6px;
  --box: calc(max(var(--lh-stanford), var(--lh-uc-berkeley), var(--lh-ucsf), var(--lh-ucla), var(--lh-slac), var(--lh-cern)) * var(--k));
  --pt: 19.77px; --pb: 22.56px;   /* 2026-11-09: x0.72 (was 27.46 / 31.33) */
  position: relative; background: var(--page); color: var(--ink); font-family: var(--font); padding: var(--pt) 0 var(--pb); overflow: hidden; scroll-margin-top: 72px; }
#team-f2 .band2-lead { margin: 0 0 24.31px; padding: 0 24px; text-align: center; font: 500 19.8px/25.74px var(--font); letter-spacing: 0; color: #EDEDED; }
#team-f2 .strip { position: relative; height: var(--box); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
#team-f2 .strip.is-drag { cursor: grabbing; }
#team-f2 .layer { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; }   /* t1849u: the track centres its items on one line (the items are absolutely placed at top 0 with the same height, so they share this centre line exactly) */
#team-f2 .layer.sharp { -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.5) 14%, #000 27%, #000 73%, rgba(0,0,0,.5) 86%, transparent 96%);
                        mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.5) 14%, #000 27%, #000 73%, rgba(0,0,0,.5) 86%, transparent 96%); }
#team-f2 .layer.soft { filter: blur(3.3px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 7%, rgba(0,0,0,.5) 16%, transparent 30%, transparent 70%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.55) 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 7%, rgba(0,0,0,.5) 16%, transparent 30%, transparent 70%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.55) 93%, transparent 100%); }
#team-f2 .it { position: absolute; left: 0; top: 0; height: var(--box); display: flex; align-items: center; will-change: transform; backface-visibility: hidden; }
#team-f2 .still { display: none; }
/* The logos (t1848u). Height only; width follows the SVG's own ratio. Pure white as supplied: no filter, opacity or colour change. Values = carousel-heights.json (UCSF uses "ucsf" 45, not "ucsf-signature"). */
#team-f2 .lg { opacity: .8; display: block; flex: none; align-self: center; margin: 0; width: auto; max-width: none; height: calc(var(--lh) * var(--k)); object-fit: contain; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
#team-f2 .lg-stanford { --lh: var(--lh-stanford); }
/* t1853u OPTICAL alignment, the ONE per-logo offset. Every logo's ink box is already centred on the strip's centre line (measured on Tavio's screenshot: within 0.5px), but the UC Berkeley
   wordmark carries a "y" descender in the bottom 23.25% of its SVG, so its text body (cap line to baseline, rows 11 to 306 of 400, centre at (11 + 306) / 800 = 0.396 of the height, against the box
   centre at 0.5) reads about 10.4% of its height too HIGH. It is moved DOWN by 0.104 x its own rendered height: 3.93px at the desktop height 37.8px and 2.44px at 860px and below (x --k .62),
   so the body, not the descender, sits on the centre line. The offset follows the height variable, so it scales with --lh and --k; no asset, no other logo, no height, padding, gap or speed changed.
   Clipping: the strip is as tall as CERN (66.6px / 41.3px), Berkeley leaves 14.4px (8.9px) above and below, so the 3.93px (2.44px) shift stays inside the strip and the blurred layer. Stanford (no descenders),
   UCLA and SLAC (solid caps), CERN (a seal centred on its box) and UCSF (an offset stacked lockup, kept box-centred as its own mark) get no offset. */
#team-f2 .lg-uc-berkeley { --lh: var(--lh-uc-berkeley); --oy: 0.104; transform: translateY(calc(var(--oy) * var(--lh) * var(--k))); }
#team-f2 .lg-ucsf { --lh: var(--lh-ucsf); }
#team-f2 .lg-ucla { --lh: var(--lh-ucla); }
#team-f2 .lg-slac { --lh: var(--lh-slac); }
#team-f2 .lg-cern { --lh: var(--lh-cern); }
/* Pause control: always in the tab order, visible only on keyboard focus (P67-final, WCAG 2.2.2) */
#team-f2 .pz { all: unset; position: absolute; right: 24.2px; bottom: 13.2px; width: 28.6px; height: 28.6px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); color: var(--ink); }
#team-f2 .pz:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
#team-f2 .pz:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#team-f2 .pz:not(:focus-visible) { clip: rect(0 0 0 0); clip-path: inset(50%); box-shadow: none; }
#team-f2 .pz svg { width: 11px; height: 11px; }
#team-f2 .pz .i-pause { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }
#team-f2 .pz .i-play { fill: currentColor; display: none; }
#team-f2 .pz[aria-pressed="true"] .i-pause { display: none; }
#team-f2 .pz[aria-pressed="true"] .i-play { display: block; }
/* Mobile band (style lines 414-432 and 441-450): the saved strip is 44px and the saved padding 26px / 30px. t1848u: all logos scale by --k = .62 so the three home logos fit a 390px phone.
   t1852u: with the x0.9 heights the mobile logos are 19.0 to 25.1px tall (CERN 41.3px = the strip box, was 45.9) and the padding is 22.05 / 25.57px (was 25.06 / 29.06, 12% less in total). */
@media (max-width: 860px) {
  #team-f2 { --k: .4464; --pt: 15.88px; --pb: 18.41px; }   /* 2026-11-09: x0.72 (was --k .62, 22.05 / 25.57) */
  #team-f2 .layer.sharp { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 4%, #000 10%, #000 90%, rgba(0,0,0,.55) 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 4%, #000 10%, #000 90%, rgba(0,0,0,.55) 96%, transparent 100%); }
  #team-f2 .layer.soft { filter: blur(2px); -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.5) 4%, transparent 11%, transparent 89%, rgba(0,0,0,.5) 96%, rgba(0,0,0,.35) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.5) 4%, transparent 11%, transparent 89%, rgba(0,0,0,.5) 96%, rgba(0,0,0,.35) 100%); }
  #team-f2 .pz { right: 12px; bottom: 6px; width: 24px; height: 24px; }
  #team-f2 .pz svg { width: 10px; height: 10px; }
}
@media (max-width: 760px) { #team-f2 .band2-lead { font-size: 16px; line-height: 20.8px; margin-bottom: 20.2px; } }
/* Reduced motion: no drift and no duplicates; one still row of the six logos (style lines 433-450, 657-661). t1848u: the still row is --box tall (CERN fits) and the padding is relative to the saved 57.2px row. */
@media (prefers-reduced-motion: reduce) {
  #team-f2 .strip, #team-f2 .pz { display: none; }
  #team-f2 .still { display: flex; justify-content: center; align-items: center; gap: 57.2px; height: var(--box); margin: 0 auto; padding: 0 24px; list-style: none; max-width: none; }
  #team-f2 .still .g { display: contents; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  #team-f2 .still { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 24px; row-gap: 0; padding: 0 16px; height: auto; max-width: 1180px; }
  #team-f2 .still .l, #team-f2 .still .r { display: contents; }
  #team-f2 .still .g.c { display: flex; align-items: center; gap: 24px; height: var(--box); grid-column: 2; grid-row: 1; }
  #team-f2 .still .l > span, #team-f2 .still .r > span { display: flex; align-items: center; height: var(--box); }
  #team-f2 .still .l > span:nth-child(1) { grid-column: 1; grid-row: 2; justify-self: end; }
  #team-f2 .still .l > span:nth-child(2) { grid-column: 1; grid-row: 1; justify-self: end; }
  #team-f2 .still .r > span:nth-child(1) { grid-column: 3; grid-row: 1; justify-self: start; }
  #team-f2 .still .r > span:nth-child(2) { grid-column: 3; grid-row: 2; justify-self: start; }
}

/* =========================== 2. EXISTING SUPERCHARGE  #p67  =========================== */
/* Source: #p67 rules (style lines 637-648), v52gap (935), hover review fix (1056-1066). The legacy layout was absolute on a fixed 1440px canvas
   (cards 400 x 311 at left 80/520/960, top 230/561); that geometry is not readable or reflowable at half-monitor or phone widths, so it is REBUILT here as a grid with the
   same card artwork (380 x 199.38 image, 10px inset), the same type sizes and the same colours. At 1440 wide: 3 columns of 400px, 40px apart, left edge 80px. */
#p67 { position: relative; z-index: 2; background: #000; color: #fff; font-family: var(--font); scroll-margin-top: 72px;
  padding: clamp(72px, 7.6389vw, 110px) clamp(20px, 5.5556vw, 80px) clamp(56px, 4.8611vw, 70px); }
#p67 .x65scr { max-width: 1280px; margin: 0 auto; }
#p67 .x65kick { margin: 0; font: 500 clamp(18px, 1.5278vw, 22px)/1.2727 var(--font); letter-spacing: 0; color: #C4C4C4; }
#p67 .x65ttl { margin: 6px 0 0; font: 700 clamp(36px, 4.4444vw, 64px)/1.02 var(--font); letter-spacing: -0.01em; color: #F5F5F5; }
#p67 .x65scr > .x65card:first-of-type { margin-top: 0; }
#p67 .x65card { position: relative; background: #F2F2F2; color: #0A0A0A; border-radius: 0; overflow: hidden; padding: 10px 10px 12px; min-width: 0; transition: transform 200ms ease, box-shadow 200ms ease; }
#p67 .x65scr { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 400px)); gap: 20px 40px; justify-content: start; align-items: start; }
#p67 .x65kick, #p67 .x65ttl { grid-column: 1 / -1; }
#p67 .x65ttl { margin-bottom: 20px; }
/* 2026-11-09: Crimson #E13A26 / Deep Red #831613 treatment. Raster artwork stays as supplied;
   a CSS color-blend overlay remaps the blue field and halftone dots (hue ~221°) to Deep Red as the
   deep base and Crimson as the brighter highlight, with gradient stops between them. White figure
   dots keep their luminosity. Chrome rings are remapped to matching reds. */
#p67 .x65dp { position: relative; isolation: isolate; width: 100%; aspect-ratio: 380 / 199.38; border-radius: 0;
  background-color: #831613; background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
  box-shadow: 0 0 0 1px #E39288, inset 0 0 0 1px rgba(255, 196, 186, .55); }
#p67 .x65dp::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 92% -8%, #E13A26 0%, rgba(225, 58, 38, .55) 36%, transparent 64%),
    radial-gradient(90% 70% at 8% 108%, #6a100e, transparent 70%),
    linear-gradient(155deg, #9a1c18 0%, #831613 48%, #721410 100%);
  mix-blend-mode: color; }
/* 2026-11-09: restore v32 hover reveal — dots38 stipple at rest, assets/cards/{name}.jpg photo on hover/focus.
   Source: /workspace/storyboard/features_p1_v32/build.py card_html() (dots PNG → cards JPG, 200ms ease-out).
   The crimson color-blend overlay is hidden while the photo is shown, so the photograph is not recolored. */
#p67 .x65ph { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; pointer-events: none; transition: opacity 200ms ease-out; }
#p67 .x65dp::after { transition: opacity 200ms ease-out; }
#p67 .x65card:is(:hover, :focus-within) .x65ph { opacity: 1; }
#p67 .x65card:is(:hover, :focus-within) .x65dp::after { opacity: 0; }
#p67 .x65tt { margin: 11.62px 10px 0; font: 600 22px/28px var(--font); letter-spacing: -.005em; color: #0A0A0A; }
#p67 .x65ul { margin: 6px 10px 0; padding: 0; list-style: none; }
#p67 .x65li { position: relative; min-height: 22px; padding-left: 16px; font: 400 16px/22px var(--font); color: #4A4A4A; }
#p67 .x65li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: #4A4A4A; border-radius: 0; }
#p67 .x65card:is(:hover, :focus-within) { background: #F2F2F2; color: #0A0A0A; transform: translateY(-4px); z-index: 1;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .18); }   /* 2026-11-09 (t2044): no red ring on hover; lift and soft neutral shadow only */
@media (prefers-reduced-motion: reduce) {
  #p67 .x65card { transition: box-shadow 200ms ease; }
  #p67 .x65card:is(:hover, :focus-within) { transform: none; }   /* drop the lift */
  #p67 .x65ph, #p67 .x65dp::after { transition: none; }          /* instant photo swap, no fade */
}
#p67 .x65rise { will-change: auto; }   /* the legacy reveal controller was not recovered; cards are simply visible */

/* =========================== 3. MEET THE TEAM  #team  =========================== */
/* Source: team-resting-v1-css (style lines 956-1066) and the isolation rules (941-947). Static cards; the ONLY interaction is the LinkedIn border hover
   (blue, about 8% heavier, white icon, transparent interior, no layout shift), taken from the saved hover-treatment proof. */
#team { --bg: #000; --white: #fff; --accent: #E13A26; /* t1949 was #1060C8 */ --display: "Urbanist", "Geist", system-ui, sans-serif; --text: "Geist", system-ui, -apple-system, sans-serif;
  --pad: clamp(24px, 4.4444vw, 64px); --max: 1440px; --gap: clamp(24px, 2.7778vw, 40px);
  z-index: 2; isolation: isolate; scroll-margin-top: 72px;
  position: relative; width: 100%; max-width: var(--max); margin: 0 auto; background: var(--bg); color: #fff; font-family: var(--text); overflow: hidden; padding: 120px var(--pad) 96px; }
#team .hd { position: relative; z-index: 2; margin: 0 0 56px; }
#team .ttl { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(36px, 4.4444vw, 64px); line-height: 1.05; letter-spacing: -.02em; color: #fff; }
#team .row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; width: 100%; }
#team .card { position: relative; background: transparent; border: 0; outline: none; display: flex; flex-direction: column; min-width: 0; width: 100%; padding: 0; min-height: auto; border-radius: 0; justify-content: normal; }
#team .ph { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; min-height: auto; padding: 0; border: 0; }
#team .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; pointer-events: none; }
#team .meta { position: relative; padding: 20px 0 0; display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; }
#team .nm { margin: 0; font: 500 22px/30px var(--text); letter-spacing: -.005em; color: #fff; max-width: 100%; white-space: normal; }
#team .rl { margin: 6px 0 0; font: 400 15px/22px var(--text); color: #fff; max-width: 100%; }
/* Saved biography paragraph (style lines 1011-1015), exactly as saved (18px above it). t1837: the labels and notes that used to sit around it are gone. */
#team .bio { margin: 18px 0 0; font: 400 15px/24px var(--text); color: #fff; max-width: 100%; min-height: 120px; }
#team .has-link { padding-right: 48px !important; }
/* LinkedIn control: 36px square at the card's right edge. Rest = 1px 40%-white border; hover and keyboard focus = the border's ::after turns blue and grows 0.08px;
   icon stays white; interior stays transparent; nothing moves. Pinned with !important against any inherited link style (style lines 1038-1053). */
#team .li { display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 13px; margin: 0; width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.4); background: transparent; padding: 0; border-radius: 4px; }
#team .li svg { display: block; width: 16px; height: 16px; color: #fff; fill: currentColor; }
#team .li::after { content: ""; position: absolute; inset: -1px; border: 1px solid transparent; border-radius: 4px; pointer-events: none; }
#team a.li { color: #fff !important; background: transparent !important; border: 1px solid rgba(255,255,255,.4) !important; }
#team a.li:is(:hover, :focus-visible) { color: #fff !important; background: transparent !important; border-color: rgba(255,255,255,.4) !important; }
#team a.li:is(:hover, :focus-visible)::after { border-color: #E13A26 !important; /* t1949 */ inset: -1.08px !important; }
#team a.li:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 860px) {
  #team { --pad: 24px; --gap: 28px; padding: 72px var(--pad) 72px; min-height: 0; }
  #team .ttl { font-size: 36px; }
  #team .hd { margin-bottom: 36px; }
  #team .row { grid-template-columns: 1fr; }
  #team .card + .card { margin-top: 8px; }
  #team .bio { min-height: 0; }   /* style line 1032 */
}