/* ============================================================
     Paddock CV — design system per Linear DESIGN.md
     canvas #010102 · surface ladder · hairline borders ·
     BMW M language: true-black canvas, white UPPERCASE display (700) over light body (300),
     M tricolor #0066b1/#1c69d4/#e22718 as brand marks only, zero radius except circular controls
     ============================================================ */
  :root{
    /* Apple dark language: black gallery canvas, #1d1d1f tiles, SF Pro voice,
       one interactive blue (#2997ff on dark), generous continuous radii */
    --canvas:#000000; --s1:#161617; --s2:#1d1d1f; --s3:#272729; --carbon:#2a2a2c;
    --hair:#2d2d2f; --hair2:#3d3d41; --hair3:#4c4c50;
    --ink:#f5f5f7; --ink2:#d2d2d7; --ink3:#a1a1a6; --ink4:#86868b;
    /* PaddockCV brand slashes (logo only) */
    --m1:#0066b1; --m2:#1c69d4; --m3:#e22718;
    --blue:#2997ff; --blue-f:#0071e3;
    --lav:#2997ff; --lav-h:#2997ff; --lav-f:#0071e3;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --monoft:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
    /* legacy aliases (inline JS templates) */
    --bg:var(--canvas); --card:var(--s2); --card2:var(--s3); --card3:var(--carbon);
    --line:var(--hair); --line2:var(--hair2);
    --txt:var(--ink); --muted:var(--ink3); --muted2:var(--ink4);
    --accent:var(--blue); --mono:var(--monoft);
    /* Series brand hues, Apple-dark register: each is the OFFICIAL color
       (verified per-site, recorded in data/series_colors.json) lifted 25%
       toward white — full-saturation brand hex glares on a pure-black canvas.
       F1 red, F2 pacific blue, WEC electric blue, F1A purple, FE blue */
    --a1:#e94440; --a2:#40acdc; --a3:#40cbff; --a4:#8f40f0; --a5:#5b75ff; --a6:#98989d;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--canvas); color:var(--ink);
    font-family:var(--sans); font-size:16.5px; font-weight:400; line-height:1.48;
    letter-spacing:-.2px; -webkit-font-smoothing:antialiased;
  }
  ::selection{background:rgba(41,151,255,.4)}
  a{color:inherit}
  button{font-family:inherit}
  :focus-visible{outline:2px solid rgba(0,113,227,.85); outline-offset:2px; border-radius:8px}
  .wrap{max-width:1640px; margin:0 auto; padding:0 32px}

  /* ---------- top nav (56px, canvas, hairline) ---------- */
  header.top{
    position:sticky; top:0; z-index:40;
    background:rgba(0,0,0,.88); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--hair);
  }
  .top .wrap{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center;
    gap:24px; height:56px;
  }
  .logo{display:flex; align-items:center; gap:10px; min-width:0}
  .bars{display:flex; gap:2.5px; transform:skewX(-16deg)}
  .bars span{width:4px}
  .bars span{width:4px; height:16px; border-radius:1.5px; display:block}
  /* brand slashes ordered as a hue walk (red → purple → blue) so the trio
     reads as one gradient: F1 red / F1 Academy purple / F2 blue */
  .bars span:nth-child(1){background:var(--a1)}
  .bars span:nth-child(2){background:var(--a4)}
  .bars span:nth-child(3){background:var(--a2)}
  .logo h1{margin:0; font-size:16px; font-weight:600; letter-spacing:-.2px; white-space:nowrap}
  .tabs{display:flex; align-items:center; gap:2px; justify-self:center; padding:0; border:0; background:none}
  .tab{
    appearance:none; background:none; border:0; cursor:pointer;
    font-size:14px; font-weight:400; letter-spacing:-.1px; line-height:1.2; color:var(--ink3);
    padding:8px 14px; border-radius:9999px;
    transition:color .15s ease, background .15s ease;
  }
  .tab:hover{color:var(--ink)}
  .tab.on{color:var(--ink); background:var(--s3)}
  .langsel{
    /* native select arrow clashes with the pill — draw our own chevron */
    appearance:none; -webkit-appearance:none;
    font-size:13px; font-weight:400; color:var(--ink2);
    background:var(--s2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2386868b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/10px;
    border:1px solid var(--hair2); border-radius:9999px;
    padding:6px 26px 6px 12px; cursor:pointer; outline:none; margin-left:6px;
    transition:border-color .15s ease, color .15s ease;
  }
  .langsel:hover,.langsel:focus-visible{color:var(--ink); border-color:var(--hair2)}
  .searchbox{
    display:flex; align-items:center; gap:8px; justify-self:end;
    background:var(--s2); border:1px solid transparent; border-radius:9999px;
    padding:0 14px; height:36px; width:min(340px,100%);
    transition:border-color .15s ease;
  }
  .searchbox:focus-within{border-color:var(--blue-f); outline:none}
  .searchbox span{
    flex:none; font-family:var(--monoft); font-size:10px; color:var(--ink4);
    border:1px solid var(--hair2); border-radius:4px; padding:0 4px; line-height:1.5;
  }
  .search{
    background:none; border:0; outline:none; color:var(--ink); min-width:0;
    font-family:inherit; font-size:14px; width:100%; letter-spacing:-.05px;
    text-overflow:ellipsis;
  }
  .search::placeholder{color:var(--ink4)}

  /* ---------- views ---------- */
  section.view{display:none; padding:0 0 96px}
  section.view.on{display:block}

  /* ---------- hero ---------- */
  .hero{padding:72px 0 40px; max-width:780px}
  .eyebrow{
    font-size:14px; font-weight:600; letter-spacing:-.1px;
    color:var(--ink4); margin-bottom:14px;
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  }
  .eyebrow b{font-weight:600}
  .eyebrow i{font-style:normal; color:var(--hair3)}
  .hero h2{
    margin:0 0 16px; font-size:clamp(34px,4.6vw,56px); font-weight:600;
    line-height:1.07; letter-spacing:-1px; color:var(--ink);
  }
  .hero p{margin:0; font-size:20px; font-weight:400; line-height:1.4; color:var(--ink3); max-width:640px}
  .quickfilters{display:flex; gap:8px; flex-wrap:wrap; margin-top:24px}
  .quickfilters span{
    font-size:12.5px; line-height:1.4; color:var(--ink2);
    background:var(--s2); border:1px solid var(--hair); border-radius:9999px;
    padding:2px 10px; white-space:nowrap;
  }
  .boardhead{margin:0}
  .boardhead h3{display:none}
  .boardhead p{margin:0}

  /* ---------- roster: series sections as changelog rows ---------- */
  .seriesboard{display:flex; flex-direction:column}
  .rostersection{border-bottom:1px solid var(--hair); padding:8px 0 28px}
  .rostersection.collapsed{padding-bottom:8px}
  .rostertop{border-left:none !important; padding:0}
  .series-toggle{
    appearance:none; background:none; border:0; cursor:pointer; width:100%;
    display:flex; align-items:center; gap:12px; text-align:left;
    padding:16px 0; color:var(--ink);
  }
  .series-toggle .chev{
    /* square flex box + symmetric SVG glyph: rotation pivots dead-center,
       so expanded (90deg) stays vertically centered like collapsed */
    width:18px; height:18px; flex:none; color:var(--ink4);
    display:flex; align-items:center; justify-content:center;
    transform:rotate(90deg); transition:transform .15s ease;
  }
  .rostersection.collapsed .chev{transform:rotate(0deg)}
  .series-title{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; min-width:0}
  .series-title h3{margin:0; font-size:24px; font-weight:600; letter-spacing:-.4px; line-height:1.2}
  .series-title span{font-family:var(--monoft); font-size:12.5px; color:var(--ink4)}
  .series-toggle:hover .series-title h3{filter:brightness(1.25)}

  .rostergrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
  .rosterteam{
    background:var(--s2); border:1px solid transparent; border-radius:18px;
    padding:20px; min-width:0; position:relative; overflow:hidden;
    transition:background .15s ease;
  }
  .rosterteam:hover{background:var(--s3)}
  .rosterhd{display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; gap:12px; margin-bottom:14px}
  .rosterhd .mark{width:3px; height:38px; border-radius:2px; display:block}
  .teamlogo{width:64px; height:44px; object-fit:contain; flex:none; background:none}
  /* dark transparent marks flipped light at runtime (see logoTune) */
  .teamlogo.darkmark{filter:invert(1) hue-rotate(180deg)}
  .teamlogo.dim{opacity:.9}
  /* near-black official marks ship as logowhite on a team-color chip */
  .teamlogo.chip{border-radius:12px; padding:6px 10px}
  /* sources with a baked-in white background: luminance-invert + screen drops the
     white plate (no element background here — the filter would invert it too) */
  .teamlogo.wm{filter:invert(1) hue-rotate(180deg); mix-blend-mode:screen; opacity:.92}
  .tn{font-size:16px; font-weight:700; letter-spacing:-.2px; line-height:1.3}
  .tn .zh{font-weight:400; color:var(--ink4); margin-left:6px; font-size:12.5px}
  .td{font-size:13px; color:var(--ink3); margin-top:2px; line-height:1.45}

  .posblock{margin-top:14px}
  .postitle{
    font-size:12px; font-weight:600; letter-spacing:-.1px;
    color:var(--ink4); padding-bottom:6px; border-bottom:1px solid var(--hair);
    margin-bottom:4px; display:flex; align-items:baseline; gap:8px;
  }
  .postitle b{font-weight:600}
  .postitle span{font-weight:400; letter-spacing:.2px; text-transform:none; color:var(--ink4)}

  .personrow{
    --tc:var(--accent);
    display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:10px;
    padding:7px 8px; margin:0 -8px; border-radius:12px; cursor:pointer;
    transition:background .15s ease; position:relative;
    color:inherit; text-decoration:none; /* it is an <a> — kill link styling */
  }
  .personrow::after{
    content:'›'; position:absolute; right:10px; top:50%; transform:translateY(-50%);
    color:var(--tc); font-size:15px; opacity:0; transition:opacity .15s ease;
  }
  .personrow:hover{background:color-mix(in srgb, var(--tc) 14%, var(--s2))}
  .personrow:hover::after{opacity:1}
  .personrow:focus-visible{outline:2px solid rgba(0,113,227,.85); outline-offset:0}
  .pav{
    width:48px; height:48px; border-radius:9999px; flex:none;
    background-color:var(--s3); background-size:cover; background-position:center 22%;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:600; color:#fff; letter-spacing:0;
  }
  span.zh{margin-left:6px}
  .pnamebar{display:flex; align-items:center; gap:8px; min-width:0}
  .pname{font-size:15px; font-weight:500; letter-spacing:-.05px; line-height:1.35; min-width:0}
  .pname .zh{font-weight:400; color:var(--ink4); font-size:12px; margin-left:5px}
  .pnick{font-size:11.5px; color:var(--ink4); margin-top:1px}
  .prole{font-size:13.5px; color:var(--ink3); line-height:1.4; margin-top:1px}
  .role-en{display:block; font-size:12.5px; color:var(--ink4)}
  .ptags{display:flex; gap:5px; flex:none}
  .ptag{
    font-size:10.5px; line-height:1.4; border-radius:9999px; padding:1px 8px;
    background:var(--s2); border:1px solid var(--hair); color:var(--ink3); white-space:nowrap;
  }
  .ptag.warn{color:#d4a054; border-color:rgba(212,160,84,.35)}
  .unknownrow{
    font-size:12px; color:var(--ink4); padding:8px; margin:0 -8px;
    border-radius:12px; background:transparent;
  }
  .unknownrow b{font-weight:500; color:var(--ink4)}
  .slotlist{margin-top:2px}
  .slotlist span{font-size:11px; color:var(--ink4)}
  .notfound,.empty{font-size:13px; color:var(--ink4); padding:12px 0}

  /* ---------- role map ---------- */
  .roleintro{
    margin:48px 0 32px; font-size:15.5px; line-height:1.6; color:var(--ink3);
    background:var(--s2); border-radius:18px; padding:20px 24px;
  }
  .roleintro strong{color:var(--ink); font-weight:700; margin-right:8px}
  .rolegrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
  .rolecard{
    background:var(--s2); border:1px solid transparent; border-radius:18px; padding:24px;
    display:flex; flex-direction:column; gap:12px; min-width:0;
    transition:background .15s ease, border-color .15s ease;
  }
  .rolecard:hover{background:var(--s3)}
  .rolecard .lvl{
    font-size:12px; font-weight:600; letter-spacing:-.1px; color:var(--ink4);
  }
  .rolecard h3{margin:0; font-size:21px; font-weight:600; letter-spacing:-.3px; line-height:1.25}
  .rolecard h3 .role-en{font-size:12.5px; color:var(--ink4); font-weight:400; margin-top:2px}
  .rolecard>p{margin:0; font-size:14.5px; line-height:1.55; color:var(--ink3)}
  .rolefacts{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; border-top:1px solid var(--hair); padding-top:12px}
  .rolefact .fl{font-size:11.5px; font-weight:600; letter-spacing:0; color:var(--ink4); margin-bottom:2px}
  .rolefact .fv{font-size:14px; color:var(--ink2); line-height:1.4}
  .diffreason{
    font-size:13.5px; line-height:1.55; color:var(--ink3);
    background:var(--s3); border-radius:12px; padding:10px 14px;
  }
  .prog{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink3)}
  .prog strong{color:var(--ink2); font-weight:700}
  .exchips{display:flex; flex-wrap:wrap; gap:6px}
  .exchips span{
    font-size:12.5px; color:var(--ink3); background:var(--s3);
    border-radius:9999px; padding:3px 11px;
  }
  .sourcegrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:32px}
  .sourcecard{
    display:block; text-decoration:none; background:var(--s2);
    border-radius:14px; padding:14px 16px; transition:background .15s ease;
  }
  .sourcecard:hover{background:var(--s3)}
  .sourcecard b{display:block; font-size:14.5px; font-weight:600; letter-spacing:-.1px}
  .sourcecard span{display:block; font-size:13px; color:var(--ink4); margin-top:3px; line-height:1.5}

  /* ---------- routes ---------- */
  .rgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px}
  .panel{
    background:var(--s2); border-radius:18px; padding:24px;
    min-width:0;
  }
  .panel>h3{
    margin:0 0 18px; font-size:18px; font-weight:600; letter-spacing:-.3px;
    padding-bottom:12px; border-bottom:1px solid var(--hair);
  }
  .panel.playbook{grid-column:1/-1}
  .bar{margin-bottom:16px}
  .bar .bl{display:flex; flex-direction:column; gap:2px; margin-bottom:6px}
  .bar .bn{font-size:16px; font-weight:600}
  .bar .cnt{font-family:var(--monoft); font-size:12px; color:var(--ink4); margin-left:8px; font-weight:400}
  .bar .bd{font-size:13.5px; color:var(--ink4); line-height:1.5}
  .track{height:5px; background:var(--s3); border-radius:3px; overflow:hidden}
  .fill{height:100%; border-radius:3px}
  .pathchart svg{width:100%; height:auto; display:block}
  .chartlegend{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px}
  .chartlegend span{font-size:13px; color:var(--ink3); display:inline-flex; align-items:center}
  .chartlegend i{width:10px; height:10px; border-radius:4px; display:inline-block; margin-right:7px; flex:none}
  .gridline{stroke:var(--hair); stroke-width:1}
  .axis{stroke:var(--hair2); stroke-width:1}
  .charttext{fill:var(--ink4); font-size:11px; font-family:var(--monoft)}
  .chartlabel{font-size:11px; font-family:var(--monoft)}
  .route-table{display:flex; flex-direction:column}
  .route-row{
    display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) 64px minmax(0,1.1fr);
    gap:12px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--hair);
    font-size:14.5px;
  }
  .route-row:last-child{border-bottom:none}
  .route-row.head{
    font-size:12.5px; font-weight:600; letter-spacing:0; color:var(--ink4);
  }
  .route-row b{font-weight:500; font-weight:600}
  .route-row span{color:var(--ink3); min-width:0}
  .ydist{display:flex; align-items:flex-end; gap:16px; height:180px; padding-top:24px}
  .yb{
    flex:1; background:linear-gradient(180deg, rgba(41,151,255,.85), rgba(41,151,255,.4));
    border-radius:8px 8px 3px 3px; position:relative; min-height:6px;
  }
  .yb span{
    position:absolute; top:-22px; left:50%; transform:translateX(-50%);
    font-family:var(--monoft); font-size:12.5px; color:var(--ink2);
  }
  .yb i{
    position:absolute; bottom:-24px; left:50%; transform:translateX(-50%);
    font-style:normal; font-family:var(--monoft); font-size:11.5px; color:var(--ink4); white-space:nowrap;
  }
  .uni{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:7px 0; border-bottom:1px solid var(--hair); font-size:14.5px}
  .uni:last-child{border-bottom:none}
  .un{min-width:0}
  .un .zh{color:var(--ink4); font-size:12.5px; margin-left:5px}
  .uc{font-family:var(--monoft); font-size:11.5px; color:var(--ink3); white-space:nowrap; letter-spacing:1px}
  .routeitem{margin-bottom:20px}
  .routeitem:last-child{margin-bottom:0}
  .routeitem h4{
    margin:0 0 8px; font-size:16.5px; font-weight:600; letter-spacing:-.2px;
    display:flex; align-items:baseline; gap:10px;
  }
  .routeitem h4 span{font-family:var(--monoft); font-size:11px; color:var(--ink4); font-weight:400}
  .rroles{display:flex; flex-direction:column; gap:5px}
  .rrole{display:flex; gap:8px; font-size:14px; color:var(--ink3); line-height:1.5}
  .rrole b{color:var(--m2); flex:none}
  .rrole strong{color:var(--ink2); font-weight:500}
  .step{display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--hair)}
  .step:last-child{border-bottom:none}
  .step .num{
    width:24px; height:24px; flex:none; border-radius:9999px;
    background:var(--s2); border:1px solid var(--hair2); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--monoft); font-size:11px; font-weight:700;
  }
  .step .st{font-size:16.5px; font-weight:600; letter-spacing:-.2px}
  .step .sd{font-size:14px; color:var(--ink3); line-height:1.55; margin-top:2px}

  /* ---------- person CV (full page) ---------- */
  body.modal-open{overflow:hidden}
  .scrim{position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility 0s; z-index:50}
  .scrim.on{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .2s ease}
  .drawer{
    position:fixed; inset:0; z-index:60; background:var(--canvas);
    overflow-y:auto; overscroll-behavior:contain;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s;
  }
  .drawer.on{opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .2s ease, transform .2s ease}
  .dh{
    border-bottom:1px solid var(--hair);
    background:
      var(--canvas);
  }
  .dh .stripe{display:block; height:3px; width:100%; margin:0; opacity:.9}
  .dh .dhrow{
    max-width:1040px; margin:0 auto; padding:64px 32px 36px;
    display:grid; grid-template-columns:96px minmax(0,1fr); gap:28px; align-items:center;
  }
  .dh .dhrow>div:last-child{min-width:0}
  .close{
    position:fixed; top:16px; right:24px; z-index:70;
    width:40px; height:40px; border-radius:9999px; cursor:pointer;
    background:var(--s3); border:1px solid transparent; color:var(--ink2);
    font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  .close:hover{color:var(--ink); background:var(--carbon)}
  .dav{
    width:96px; height:96px; border-radius:9999px; object-fit:cover; object-position:center 22%;
    background:var(--s2); display:block;
  }
  .dav.ph{display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; color:#fff}
  .dcap{font-size:11px; color:var(--ink4); margin-top:8px; text-align:center; max-width:96px; line-height:1.45}
  .dn{font-size:clamp(30px,3.4vw,44px); font-weight:600; letter-spacing:-.8px; line-height:1.08}
  .dn .zh{font-size:16px; font-weight:400; color:var(--ink3); margin-left:10px; letter-spacing:0}
  .dnick{font-size:12.5px; color:var(--ink4); margin-top:4px}
  .drole{font-size:17px; color:var(--ink2); margin-top:8px; line-height:1.5}
  .drole .role-en{display:inline; color:var(--ink4); margin-left:8px; font-size:14px}
  .drole .role-meta{display:block; font-size:14px; color:var(--ink3); margin-top:3px}
  .agewrap{max-width:1040px; margin:0 auto; padding:0 32px}
  .agechip{
    display:inline-flex; align-items:baseline; gap:6px;
    background:var(--s3); border-radius:9999px;
    padding:3px 12px; font-size:12.5px; color:var(--ink2);
  }
  .agechip .al{font-size:11px; font-weight:600; letter-spacing:0; color:var(--ink4)}
  .chips{max-width:1040px; margin:0 auto; padding:16px 32px 30px; display:flex; flex-wrap:wrap; gap:8px}
  .badge{
    font-size:13px; line-height:1.4; color:var(--ink2);
    background:var(--s3); border-radius:9999px; padding:3px 12px;
  }
  .abadge{font-size:11.5px; font-weight:600; border-radius:9999px; padding:3px 12px; letter-spacing:0}
  .confbadge{
    font-size:11.5px; border-radius:9999px; padding:3px 12px;
    background:var(--s2); border:1px solid rgba(212,160,84,.35); color:#d4a054;
  }
  .dbody{
    max-width:1040px; margin:0 auto; padding:36px 32px 96px;
    display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px 48px;
    grid-auto-flow:dense; align-items:start;
  }
  .sec{min-width:0}
  .sec.side{grid-column:2}
  .sec.main{grid-column:1}
  .lab{
    font-size:13px; font-weight:600; letter-spacing:-.1px;
    color:var(--ink4); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--hair);
  }
  /* career timeline */
  .tl{position:relative; padding-left:20px}
  .tl::before{content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--hair2)}
  .tli{position:relative; padding:0 0 22px}
  .tli:last-child{padding-bottom:0}
  .dot{
    position:absolute; left:-19px; top:6px; width:9px; height:9px; border-radius:9999px;
    border:2px solid var(--canvas); box-shadow:0 0 0 1px var(--hair3);
  }
  .yr{font-family:var(--monoft); font-size:13.5px; color:var(--ink4); letter-spacing:.2px}
  .org{font-size:17px; font-weight:600; letter-spacing:-.3px; margin-top:3px; line-height:1.4}
  .org .zh{font-weight:400; color:var(--ink4); font-size:13.5px; margin-left:6px}
  .org .cat{
    font-size:11px; font-weight:400; color:var(--ink4);
    background:var(--s3); border-radius:9999px; padding:2px 9px; margin-left:8px;
    vertical-align:2px; white-space:nowrap;
  }
  .org .cat:empty{display:none}
  .ro{font-size:15.5px; color:var(--ink3); margin-top:3px; line-height:1.5}
  /* education */
  .edu{padding:12px 0; border-bottom:1px solid var(--hair)}
  .edu:first-child{padding-top:0}
  .edu:last-child{border-bottom:none}
  .edu .ei{font-size:16px; font-weight:600; letter-spacing:-.2px; line-height:1.4}
  .edu .ei .zh{font-weight:400; color:var(--ink4); font-size:13px; margin-left:5px}
  .edu .ed{font-size:14.5px; color:var(--ink3); margin-top:2px; line-height:1.5}
  .edu .eyr{font-family:var(--monoft); font-size:12px; color:var(--ink4)}
  .edusrc{
    display:inline-block; font-size:12px; color:var(--ink4); text-decoration:none;
    margin-top:5px; border-bottom:1px dotted var(--hair3);
  }
  .edusrc:hover{color:var(--lav-h); border-color:var(--lav-h)}
  /* notes & highlights */
  .notes{font-size:16.5px; line-height:1.6; color:var(--ink2)}
  .notes p{margin:0 0 12px}
  .notes p:last-child{margin-bottom:0}
  .hl{
    font-size:15.5px; line-height:1.6; color:var(--ink2);
    padding:12px 16px; margin-bottom:8px;
    background:var(--s2); border-radius:12px;
  }
  /* sources */
  .src{
    display:block; text-decoration:none; font-size:14.5px; color:var(--ink3);
    padding:9px 0; border-bottom:1px solid var(--hair); line-height:1.5;
    transition:color .15s ease;
  }
  .src:last-child{border-bottom:none}
  .src:hover{color:var(--lav-h)}
  .src .st{
    display:inline-block; font-family:var(--monoft); font-size:10px; letter-spacing:.5px;
    text-transform:uppercase; color:var(--ink4); background:var(--s3);
    border-radius:6px; padding:2px 7px; margin-right:8px;
    vertical-align:1px;
  }

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--hair); color:var(--ink4); font-size:13px;
    padding:32px 0 64px; line-height:1.7;
  }
  footer a{color:var(--ink3); text-decoration:none}
  footer a:hover{color:var(--lav-h)}

  /* ---------- lazy avatar error fallback ---------- */
  .pav.lazy-bg[data-error="1"]{background-color:var(--s3)}

  /* ---------- responsive ---------- */
  @media(max-width:1620px){
    /* 3-up only when each card gets ~510px+ (the longest bilingual role
       label needs 472px unwrapped) — below that, 2 wide columns */
    .rostergrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media(max-width:1080px){
    .rolegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .sourcegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .rgrid{grid-template-columns:1fr}
  }
  @media(max-width:880px){
    .wrap{padding:0 20px}
    .hero{padding:48px 0 28px}
    .rostergrid{grid-template-columns:1fr}
    .dbody{grid-template-columns:1fr; gap:36px}
    .sec.side,.sec.main{grid-column:auto}
  }
  @media(max-width:640px){
    .wrap{padding:0 14px}
    .top .wrap{
      grid-template-columns:auto 1fr; grid-auto-rows:auto; height:auto;
      padding-top:8px; padding-bottom:10px; row-gap:8px;
    }
    .tabs{justify-self:end; min-width:0; max-width:100%; flex-wrap:wrap; justify-content:flex-end}
    .tab{padding:7px 8px; font-size:13px}
    .langsel{padding:5px 20px 5px 9px; margin-left:2px; max-width:96px; background-position:right 7px center}
    .searchbox{grid-column:1/-1; width:100%; height:36px}
    .hero h2{letter-spacing:-1px}
    .rolegrid,.sourcegrid{grid-template-columns:1fr}
    .rosterhd{grid-template-columns:auto minmax(0,1fr)}
    .rosterhd .teamlogo{display:none}
    .pname{white-space:normal}
    .dh .dhrow{grid-template-columns:64px minmax(0,1fr); gap:16px; padding:48px 14px 24px}
    .dav{width:64px; height:64px}
    .dcap{max-width:64px}
    .chips,.agewrap{padding-left:14px; padding-right:14px}
    .dbody{padding:28px 14px 72px}
    .close{top:10px; right:12px}
    .route-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) 44px minmax(0,1fr); gap:8px; font-size:12px}
  }
  @media(max-width:420px){
    .role-en{white-space:normal}
    .personrow{grid-template-columns:42px minmax(0,1fr)}
    .pav{width:42px; height:42px}
    .ydist{gap:8px}
  }
  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; animation:none !important}
    html{scroll-behavior:auto}
  }