:root {
    --paper:#FAFBFC; --surface:#FFFFFF; --surface-2:#F0F4F6;
    --ink:#0D1B26; --ink-soft:#45575F; --ink-faint:#7F929B;
    --line:#DCE5EA; --line-strong:#C4D1D8;
    --teal:#0E6E7C; --teal-deep:#0A4E59; --teal-tint:rgba(14,110,124,.08);
    --signal:#E1456A; --signal-tint:rgba(225,69,106,.10);
    --shadow:0 1px 2px rgba(13,27,38,.04), 0 8px 24px rgba(13,27,38,.06);
    --shadow-lift:0 2px 6px rgba(13,27,38,.06), 0 16px 40px rgba(13,27,38,.10);
    --r:14px; --maxw:1120px;
    --serif:"IBM Plex Serif",Georgia,serif;
    --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  }
  [data-theme="dark"] {
    --paper:#0A1219; --surface:#0F1C25; --surface-2:#15252F;
    --ink:#E8EEF2; --ink-soft:#A3B5BF; --ink-faint:#6A7E89;
    --line:#21333E; --line-strong:#2C4150;
    --teal:#37B6C6; --teal-deep:#5CCBD8; --teal-tint:rgba(55,182,198,.12);
    --signal:#FF7095; --signal-tint:rgba(255,112,149,.14);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
    --shadow-lift:0 2px 6px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.5);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper:#0A1219; --surface:#0F1C25; --surface-2:#15252F;
      --ink:#E8EEF2; --ink-soft:#A3B5BF; --ink-faint:#6A7E89;
      --line:#21333E; --line-strong:#2C4150;
      --teal:#37B6C6; --teal-deep:#5CCBD8; --teal-tint:rgba(55,182,198,.12);
      --signal:#FF7095; --signal-tint:rgba(255,112,149,.14);
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
      --shadow-lift:0 2px 6px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.5);
    }
  }

  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; scroll-padding-top:80px; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
  body {
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-size:16px; line-height:1.62;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  a { color:var(--teal); text-decoration:none; }
  a:hover { text-decoration:underline; }
  ::selection { background:var(--signal-tint); color:var(--ink); }
  :focus-visible { outline:2.5px solid var(--teal); outline-offset:3px; border-radius:4px; }
  .wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }
  .mono { font-family:var(--mono); }

  /* ---------- eyebrow / region label ---------- */
  .eyebrow {
    font-family:var(--mono); font-size:12px; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
    display:inline-flex; align-items:center; gap:9px; margin:0 0 14px;
  }
  .eyebrow::before {
    content:""; width:22px; height:1px; background:var(--teal); display:inline-block;
  }

  /* ---------- nav ---------- */
  header.nav {
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter:blur(12px) saturate(1.4);
    -webkit-backdrop-filter:blur(12px) saturate(1.4);
    border-bottom:1px solid transparent; transition:border-color .3s;
  }
  header.nav.scrolled { border-bottom-color:var(--line); }
  .nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
  .brand { display:flex; align-items:center; gap:11px; font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink); }
  .brand:hover { text-decoration:none; }
  .brand .mark {
    width:30px; height:30px; border-radius:8px; flex:0 0 auto;
    background:var(--teal); position:relative; overflow:hidden;
    display:grid; place-items:center; color:#fff; font-family:var(--mono); font-weight:600; font-size:13px;
  }
  .brand .mark::after {
    content:""; position:absolute; inset:0; background:
      repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.12) 5px 6px);
  }
  .nav-links { display:flex; align-items:center; gap:5px; }
  .nav-links a {
    color:var(--ink-soft); font-size:14px; font-weight:500; padding:7px 12px; border-radius:8px;
    transition:background .18s,color .18s;
  }
  .nav-links a:hover { color:var(--ink); background:var(--surface-2); text-decoration:none; }
  .nav-tools { display:flex; align-items:center; gap:8px; }
  .icon-btn {
    width:38px; height:38px; border-radius:9px; border:1px solid var(--line);
    background:var(--surface); color:var(--ink-soft); cursor:pointer;
    display:grid; place-items:center; transition:.18s;
  }
  .icon-btn:hover { color:var(--ink); border-color:var(--line-strong); }
  .icon-btn svg { width:18px; height:18px; }
  .theme-btn .sun { display:none; } [data-theme="dark"] .theme-btn .sun { display:block; }
  [data-theme="dark"] .theme-btn .moon { display:none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .sun{display:block;} :root:not([data-theme="light"]) .theme-btn .moon{display:none;} }
  .menu-btn { display:none; }

  /* ---------- hero ---------- */
  .hero { padding:64px 0 24px; }
  .hero-grid { display:grid; grid-template-columns:1.35fr .85fr; gap:56px; align-items:center; }
  .hero h1 {
    font-family:var(--serif); font-weight:600; font-size:clamp(36px,5.2vw,58px);
    line-height:1.04; letter-spacing:-.015em; margin:0 0 6px; color:var(--ink);
  }
  .hero .deg { font-family:var(--mono); font-size:14px; color:var(--signal); font-weight:500; letter-spacing:.02em; }
  .hero .role { font-size:18px; color:var(--ink-soft); margin:18px 0 4px; max-width:46ch; line-height:1.5; }
  .hero .role b { color:var(--ink); font-weight:600; }
  .hero .place { font-family:var(--mono); font-size:13px; color:var(--ink-faint); margin-bottom:26px; display:flex; align-items:center; gap:8px; }
  .hero .place svg { width:14px; height:14px; flex:0 0 auto; }

  .links { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px; }
  .chip {
    display:inline-flex; align-items:center; gap:8px; padding:8px 13px;
    border:1px solid var(--line); border-radius:999px; background:var(--surface);
    font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink-soft);
    transition:.16s;
  }
  .chip:hover { color:var(--ink); border-color:var(--teal); background:var(--teal-tint); text-decoration:none; transform:translateY(-1px); }
  .chip svg { width:15px; height:15px; }

  /* metrics panel */
  .metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
  .metric { padding:18px 16px; border-right:1px solid var(--line); position:relative; }
  .metric:last-child { border-right:none; }
  .metric .num { font-family:var(--mono); font-weight:600; font-size:24px; color:var(--teal); line-height:1; letter-spacing:-.02em; }
  .metric .lab { font-size:12px; color:var(--ink-faint); margin-top:7px; line-height:1.35; }

  /* portrait */
  .portrait-wrap { position:relative; justify-self:center; }
  .portrait {
    position:relative; width:300px; max-width:100%; aspect-ratio:1/1.12; border-radius:18px; overflow:hidden;
    border:1px solid var(--line-strong); box-shadow:var(--shadow-lift); background:var(--surface-2);
  }
  .portrait img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.02); }
  /* ROI segmentation overlay */
  .portrait .roi {
    position:absolute; left:21%; top:7%; width:60%; height:60%;
    border:1.5px solid var(--signal); border-radius:6px;
    background:var(--signal-tint); pointer-events:none;
    box-shadow:0 0 0 1px rgba(0,0,0,.05) inset;
  }
  .portrait .roi::before {
    content:"face · 0.99"; position:absolute; top:-22px; left:-1px;
    font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.05em;
    color:#fff; background:var(--signal); padding:2px 7px; border-radius:4px;
  }
  /* corner ticks */
  .portrait .tick { position:absolute; width:16px; height:16px; border:2px solid var(--teal); }
  .portrait .tick.tl { top:10px; left:10px; border-right:0; border-bottom:0; }
  .portrait .tick.tr { top:10px; right:10px; border-left:0; border-bottom:0; }
  .portrait .tick.bl { bottom:10px; left:10px; border-right:0; border-top:0; }
  .portrait .tick.br { bottom:10px; right:10px; border-left:0; border-top:0; }
  .portrait-cap {
    font-family:var(--mono); font-size:11px; color:var(--ink-faint); text-align:center;
    margin-top:14px; letter-spacing:.03em;
  }

  /* ---------- sections ---------- */
  section { padding:60px 0; border-top:1px solid var(--line); }
  .sec-head { margin-bottom:36px; max-width:62ch; }
  .sec-head h2 { font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.4vw,36px); letter-spacing:-.01em; margin:0; color:var(--ink); }
  .lede { color:var(--ink-soft); font-size:17px; line-height:1.7; }
  .lede a { font-weight:500; }

  /* repos / datasets inline */
  .pill-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
  .pill {
    font-family:var(--mono); font-size:12px; padding:5px 11px; border-radius:7px;
    background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft);
    transition:.16s;
  }
  .pill:hover { color:var(--teal); border-color:var(--teal); text-decoration:none; }
  .pill-label { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:18px 0 2px; display:block; }

  /* ---------- timeline ---------- */
  .filter-note { font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin-bottom:20px; }
  .timeline { position:relative; margin-left:8px; }
  .timeline::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:1.5px; background:var(--line-strong); }
  .tl-item { position:relative; padding:0 0 22px 30px; }
  .tl-item::before {
    content:""; position:absolute; left:-4px; top:7px; width:9px; height:9px; border-radius:50%;
    background:var(--surface); border:2px solid var(--teal);
  }
  .tl-item.key::before { background:var(--signal); border-color:var(--signal); box-shadow:0 0 0 4px var(--signal-tint); }
  .tl-date { font-family:var(--mono); font-size:12px; color:var(--teal); font-weight:500; }
  .tl-item.key .tl-date { color:var(--signal); }
  .tl-text { color:var(--ink-soft); font-size:15px; margin-top:2px; }
  .tl-text b { color:var(--ink); font-weight:600; }
  .tl-more-btn { margin-top:6px; }

  .ghost-btn {
    font-family:var(--mono); font-size:13px; font-weight:500; color:var(--teal);
    background:none; border:1px solid var(--line); border-radius:9px; padding:9px 16px;
    cursor:pointer; transition:.16s;
  }
  .ghost-btn:hover { border-color:var(--teal); background:var(--teal-tint); }

  /* ---------- publications ---------- */
  .pub-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
  .pub-filter {
    font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink-soft);
    background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 15px; cursor:pointer; transition:.16s;
  }
  .pub-filter:hover { border-color:var(--line-strong); color:var(--ink); }
  .pub-filter[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .pubs { display:grid; gap:14px; }
  .pub {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    padding:22px 24px; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s, border-color .2s;
  }
  .pub:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--line-strong); }
  .pub-top { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
  .pub h3 { font-family:var(--serif); font-weight:600; font-size:18.5px; line-height:1.34; margin:0 0 8px; color:var(--ink); }
  .pub .authors { font-size:14px; color:var(--ink-soft); margin:0 0 4px; }
  .pub .authors .me { color:var(--ink); font-weight:600; border-bottom:1.5px solid var(--signal); }
  .pub .venue { font-family:var(--mono); font-size:13px; color:var(--ink-faint); }
  .pub .venue em { font-style:normal; color:var(--ink-soft); }
  .if-badge {
    flex:0 0 auto; font-family:var(--mono); text-align:center; min-width:70px;
    border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--surface-2);
  }
  .if-badge .v { display:block; font-size:18px; font-weight:600; color:var(--teal); line-height:1; }
  .if-badge .k { display:block; font-size:9.5px; letter-spacing:.1em; color:var(--ink-faint); margin-top:4px; text-transform:uppercase; }
  .pub-links { display:flex; gap:8px; margin-top:14px; }
  .pub-links a {
    font-family:var(--mono); font-size:12.5px; font-weight:500; padding:6px 13px; border-radius:8px;
    border:1px solid var(--line); color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; transition:.16s;
  }
  .pub-links a:hover { color:var(--teal); border-color:var(--teal); background:var(--teal-tint); text-decoration:none; }
  .pub-links svg { width:13px; height:13px; }

  /* ---------- two col grids ---------- */
  .cols2 { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
  .tag-list { display:flex; flex-wrap:wrap; gap:9px; }
  .tag {
    font-size:14px; padding:9px 15px; border-radius:10px; background:var(--surface);
    border:1px solid var(--line); color:var(--ink); box-shadow:var(--shadow);
  }

  /* services grid */
  .svc-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .svc {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:11px 15px; border:1px solid var(--line); border-radius:10px; background:var(--surface);
    font-size:14px; transition:.16s;
  }
  .svc:hover { border-color:var(--line-strong); }
  .svc .j { color:var(--ink); }
  .svc .pub-name { font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
  .svc .cert {
    flex:0 0 auto; font-family:var(--mono); font-size:10.5px; font-weight:500; color:var(--teal);
    border:1px solid var(--teal); border-radius:6px; padding:2px 7px; display:inline-flex; gap:4px; align-items:center;
  }
  .svc .cert:hover { background:var(--teal-tint); text-decoration:none; }
  .svc .cert svg { width:11px; height:11px; }
  .hidden { display:none !important; }

  /* supervision */
  .sup { display:grid; gap:12px; }
  .sup-item { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:10px; padding:16px 20px; box-shadow:var(--shadow); }
  .sup-item .t { font-family:var(--serif); font-weight:600; font-size:16px; color:var(--ink); }
  .sup-item .m { font-size:13.5px; color:var(--ink-soft); margin-top:5px; }
  .sup-item .m .mono { color:var(--ink-faint); }

  /* contact */
  .contact-card {
    background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:40px;
    box-shadow:var(--shadow-lift); display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center;
    position:relative; overflow:hidden;
  }
  .contact-card::before {
    content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px; border-radius:50%;
    background:radial-gradient(circle at center, var(--teal-tint), transparent 70%); pointer-events:none;
  }
  .contact-card h2 { font-family:var(--serif); font-size:30px; margin:0 0 10px; }
  .contact-card p { color:var(--ink-soft); margin:0 0 22px; }
  .contact-meta { display:grid; gap:14px; }
  .cm-row { display:flex; align-items:center; gap:13px; font-size:14px; }
  .cm-row .ic { width:38px; height:38px; flex:0 0 auto; border-radius:10px; background:var(--teal-tint); color:var(--teal); display:grid; place-items:center; }
  .cm-row .ic svg { width:18px; height:18px; }
  .cm-row .k { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
  .cm-row .val { color:var(--ink); font-weight:500; }
  .btn-primary {
    display:inline-flex; align-items:center; gap:9px; background:var(--teal); color:#fff;
    font-weight:600; font-size:15px; padding:13px 22px; border-radius:11px; transition:.18s; box-shadow:var(--shadow);
  }
  .btn-primary:hover { background:var(--teal-deep); text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow-lift); }
  .btn-primary svg { width:17px; height:17px; }

  /* footer */
  footer { border-top:1px solid var(--line); padding:34px 0 46px; margin-top:10px; }
  .foot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
  .foot .c { font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); }
  .foot .socials { display:flex; gap:6px; }
  .foot .socials a { width:36px; height:36px; border-radius:9px; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-soft); transition:.16s; }
  .foot .socials a:hover { color:var(--teal); border-color:var(--teal); }
  .foot .socials svg { width:17px; height:17px; }

  /* reveal animation */
  .reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } }

  /* ---------- hero motif ---------- */
  .hero { position:relative; overflow:hidden; }
  .hero-bg {
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(var(--line-strong) 1px, transparent 1px);
    background-size:26px 26px; opacity:.5;
    -webkit-mask-image:radial-gradient(ellipse 70% 70% at 78% 35%, #000, transparent 72%);
    mask-image:radial-gradient(ellipse 70% 70% at 78% 35%, #000, transparent 72%);
  }
  .hero > .wrap { position:relative; z-index:1; }
  .portrait .scan {
    position:absolute; left:0; right:0; top:0; height:40px; pointer-events:none; z-index:2;
    background:linear-gradient(to bottom, transparent, var(--teal-tint), transparent);
    border-top:1px solid color-mix(in srgb, var(--teal) 55%, transparent);
    animation:scan 6s ease-in-out infinite;
  }
  @keyframes scan {
    0%{ transform:translateY(-44px); opacity:0; }
    14%{ opacity:1; } 50%{ transform:translateY(360px); opacity:1; }
    62%{ opacity:0; } 100%{ transform:translateY(360px); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){ .portrait .scan{ display:none; } }

  /* hero CTA buttons */
  .hero-cta { display:flex; flex-wrap:wrap; gap:11px; margin:0 0 22px; }
  .btn-solid {
    display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14.5px;
    padding:12px 19px; border-radius:11px; background:var(--teal); color:#fff;
    transition:.18s; box-shadow:var(--shadow);
  }
  .btn-solid:hover{ background:var(--teal-deep); text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow-lift); }
  .btn-solid svg{ width:16px; height:16px; }
  .btn-outline {
    display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14.5px;
    padding:12px 19px; border-radius:11px; border:1px solid var(--line-strong);
    color:var(--ink); background:var(--surface); transition:.18s;
  }
  .btn-outline:hover{ border-color:var(--teal); color:var(--teal); text-decoration:none; transform:translateY(-2px); background:var(--teal-tint); }
  .btn-outline svg{ width:16px; height:16px; }

  /* ---------- trajectory ---------- */
  .traj { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); margin-top:30px; }
  .traj-step { padding:16px 18px; border-right:1px solid var(--line); }
  .traj-step:last-child{ border-right:none; }
  .traj-step .yr{ font-family:var(--mono); font-size:11.5px; color:var(--teal); font-weight:500; letter-spacing:.04em; }
  .traj-step .org{ font-weight:600; font-size:14.5px; color:var(--ink); margin-top:6px; line-height:1.3; }
  .traj-step .rl{ font-size:12.5px; color:var(--ink-faint); margin-top:4px; }
  .traj-step.now{ background:var(--teal-tint); }
  .traj-step.now .org{ color:var(--teal); }
  @media (max-width:700px){ .traj{ grid-template-columns:1fr 1fr; } .traj-step:nth-child(2){border-right:none;} .traj-step:nth-child(1),.traj-step:nth-child(2){border-bottom:1px solid var(--line);} }

  /* ---------- research program ---------- */
  .pillars { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
  .pillar { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s, border-color .2s; position:relative; overflow:hidden; }
  .pillar::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--teal); opacity:0; transition:opacity .2s; }
  .pillar:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--line-strong); }
  .pillar:hover::after{ opacity:1; }
  .pillar .pn{ font-family:var(--mono); font-size:12px; color:var(--signal); font-weight:500; letter-spacing:.08em; }
  .pillar h3{ font-family:var(--serif); font-weight:600; font-size:20px; margin:9px 0 9px; color:var(--ink); line-height:1.25; }
  .pillar p{ color:var(--ink-soft); font-size:14.5px; margin:0 0 15px; line-height:1.62; }
  .pillar .works{ display:flex; flex-wrap:wrap; gap:6px; }
  .pillar .works a{ font-family:var(--mono); font-size:11.5px; padding:4px 10px; border-radius:7px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft); transition:.15s; }
  .pillar .works a:hover{ color:var(--teal); border-color:var(--teal); text-decoration:none; }
  @media (max-width:760px){ .pillars{ grid-template-columns:1fr; } }

  /* ---------- impact chart ---------- */
  .impact { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px 28px; box-shadow:var(--shadow); margin-bottom:30px; }
  .impact .ttl{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:20px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
  .impact .ttl .lg{ color:var(--teal); font-weight:500; }
  .bar-row{ display:grid; grid-template-columns:160px 1fr 42px; align-items:center; gap:14px; margin-bottom:12px; }
  .bar-row .lbl{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bar-track{ display:block; height:12px; background:var(--surface-2); border-radius:6px; overflow:hidden; }
  .bar-fill{ display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg, var(--teal-deep), var(--teal)); transition:width 1.1s cubic-bezier(.2,.75,.2,1); }
  .reveal.in .bar-fill{ width:var(--w); }
  .bar-row .val{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--teal); text-align:right; }
  @media (max-width:600px){ .bar-row{ grid-template-columns:92px 1fr 36px; gap:9px; } .bar-row .lbl{ font-size:10px; } }

  /* ---------- responsive ---------- */
  @media (max-width:920px) {
    .hero-grid { grid-template-columns:1fr; gap:40px; }
    .portrait-wrap { order:-1; justify-self:start; }
    .portrait { width:240px; }
    .cols2 { grid-template-columns:1fr; gap:36px; }
    .contact-card { grid-template-columns:1fr; padding:32px 26px; }
    .nav-links { display:none; }
    .menu-btn { display:grid; }
  }
  @media (max-width:620px) {
    .wrap { padding:0 20px; }
    .metrics { grid-template-columns:1fr 1fr; }
    .metric:nth-child(2) { border-right:none; }
    .metric:nth-child(1),.metric:nth-child(2) { border-bottom:1px solid var(--line); }
    .svc-grid { grid-template-columns:1fr; }
    .pub-top { flex-direction:column-reverse; align-items:flex-start; }
    .if-badge { align-self:flex-start; }
    .hero { padding:40px 0 16px; }
  }
  /* mobile menu */
  .mobile-menu { display:none; position:fixed; inset:64px 0 auto 0; z-index:49; background:var(--paper); border-bottom:1px solid var(--line); padding:14px 20px 20px; }
  .mobile-menu.open { display:block; }
  .mobile-menu a { display:block; padding:11px 8px; color:var(--ink); font-weight:500; border-bottom:1px solid var(--line); }
  .mobile-menu a:last-child { border-bottom:none; }

/* additions for the dynamic version */
.lede-block p { color:var(--ink-soft); font-size:17px; line-height:1.7; margin:0 0 18px; }
.lede-block p:last-child { margin-bottom:0; }
.lede-block a { font-weight:500; }
.pub .venue .yr { color:var(--ink-faint); }