:root{
    --cardinal: #8C1515;
    --cardinal-dark: #5e0e0e;
    --cardinal-light: #b83a3a;
    --ink: #17140f;
    --ink-soft: #4b463e;
    --paper: #faf8f4;
    --paper-dim: #f1ede4;
    --card: #ffffff;
    --line: #e4ddce;
    --shadow: 0 1px 2px rgba(23,20,15,.04), 0 8px 24px -8px rgba(23,20,15,.10);
    --radius: 16px;
    --radius-sm: 10px;
    --maxw: 1180px;
    --serif: 'Fraunces', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color-scheme: light;
  }
  html[data-theme="dark"]{
    --ink: #f3efe6;
    --ink-soft: #c9c2b3;
    --paper: #14120f;
    --paper-dim: #1b1814;
    --card: #1e1b16;
    --line: #332f27;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 30px -10px rgba(0,0,0,.6);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--sans);
    color:var(--ink);
    background:var(--paper);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    transition:background .25s ease, color .25s ease;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;}
  h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.15; margin:0;}
  p{margin:0;}
  section{scroll-margin-top:84px;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  .visually-hidden{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap;
  }
  .skip-link{
    position:absolute; left:-999px; top:0; background:var(--cardinal); color:#fff;
    padding:10px 16px; border-radius:0 0 8px 0; z-index:200; font-weight:600;
  }
  .skip-link:focus{left:0;}

  /* ---------- Top Banner ---------- */
  .top-banner{
    width:100%; background:#000; text-align:center; overflow:hidden;
    line-height:0;
  }
  .top-banner-img{
    width:100%; height:auto; max-height:160px; object-fit:cover; display:block;
    margin:0 auto;
  }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter:blur(10px) saturate(140%);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 28px; max-width:var(--maxw); margin:0 auto;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:var(--sans); font-weight:500; font-size:1.15rem;
    text-decoration:none; letter-spacing:.1px;
  }
  .brand .mark{
    width:34px; height:34px; border-radius:9px;
    background:linear-gradient(145deg, var(--cardinal), var(--cardinal-dark));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:var(--serif); font-weight:700; font-size:1.05rem;
    flex:none;
  }
  .brand .sub{
    display:block; font-family:var(--sans); font-weight:600; font-size:.62rem;
    letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-soft); margin-top:1px;
  }
  nav.links{display:flex; align-items:center; gap:28px;}
  nav.links a{
    font-size:.92rem; font-weight:600; text-decoration:none; color:var(--ink-soft);
    position:relative; padding:6px 0;
    transition:color .15s ease;
  }
  nav.links a:hover, nav.links a[aria-current="true"]{color:var(--ink);}
  nav.links a[aria-current="true"]::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
    background:var(--cardinal); border-radius:2px;
  }
  .nav-actions{display:flex; align-items:center; gap:10px;}
  .icon-btn{
    width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
    background:var(--card); display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--ink); flex:none;
  }
  .icon-btn svg{width:17px; height:17px;}
  .icon-btn:hover{border-color:var(--cardinal);}
  .cta-btn{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--cardinal); color:#fff !important; text-decoration:none;
    font-weight:700; font-size:.88rem; padding:10px 18px; border-radius:999px;
    white-space:nowrap; border:1px solid var(--cardinal);
    transition:transform .15s ease, background .15s ease;
  }
  .cta-btn:hover{background:var(--cardinal-dark); transform:translateY(-1px);}
  .cta-btn.ghost{
    background:transparent; color:var(--ink) !important; border:1px solid var(--line);
  }
  .cta-btn.ghost:hover{border-color:var(--cardinal); background:transparent;}
  .menu-toggle{display:none;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative; overflow:hidden;
    padding:96px 0 76px;
    background:
      radial-gradient(circle at 15px 15px, color-mix(in srgb, var(--ink) 6%, transparent) 1.6px, transparent 1.7px) 0 0/28px 28px,
      var(--paper);
  }
  .hero::before{
    content:""; position:absolute; top:-140px; right:-160px; width:520px; height:520px;
    background:radial-gradient(circle, color-mix(in srgb, var(--cardinal) 20%, transparent), transparent 70%);
    filter:blur(10px); pointer-events:none;
  }
  .hero::after{
    content:""; position:absolute; bottom:-220px; left:-180px; width:480px; height:480px;
    background:radial-gradient(circle, color-mix(in srgb, var(--cardinal) 12%, transparent), transparent 70%);
    pointer-events:none;
  }
  .hero-grid{
    position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:.78rem; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--cardinal); background:color-mix(in srgb, var(--cardinal) 10%, transparent);
    padding:7px 14px; border-radius:999px; margin-bottom:20px;
  }
  .eyebrow-sub{
    display:inline-flex; align-items:center; gap:8px;
    font-size:.78rem; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--cardinal); background:color-mix(in srgb, var(--cardinal) 10%, transparent);
    padding:7px 14px; border-radius:999px; margin-bottom:20px;
  }
  .hero h1{font-size:clamp(2.6rem, 5.2vw, 4.4rem); letter-spacing:-.5px;}
  .hero h1 em{color:var(--cardinal); font-style:normal;}
  .hero p.lead{
    margin-top:20px; font-size:1.15rem; color:var(--ink-soft); max-width:560px;
  }
  .hero-ctas{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
  .tag-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:40px;}
  .tag{
    font-size:.78rem; font-weight:600; color:var(--ink-soft);
    border:1px solid var(--line); background:var(--card);
    padding:7px 13px; border-radius:999px;
  }

  /* Hero figure — dark/light illustration of the B-cell -> antibody -> brain
     pathway. Both versions are embedded; only one is shown depending on the
     active color theme. */
  .hero-figure{position:relative; width:100%; max-width:560px; margin:0 auto;}
  /* <picture> wrappers must not create their own box, or the theme-based
     display:none/block toggling below would leave an empty inline slot. */
  .top-banner picture, .hero-figure picture{display:contents;}
  .hero-figure-img{
    width:100%; height:auto; display:block;
  }
  .hero-figure-light{display:none;}
  html[data-theme="dark"] .hero-figure-dark{display:block;}
  html[data-theme="dark"] .hero-figure-light{display:none;}
  html:not([data-theme="dark"]) .hero-figure-dark{display:none;}
  html:not([data-theme="dark"]) .hero-figure-light{display:block;}

  /* Decorative "B cell cluster" graphic — pure inline SVG, no external images.
     Each cell shows a membrane, an offset nucleus, and B cell receptors (BCRs)
     anchored around the surface. */
  .cluster{position:relative; width:100%; aspect-ratio:1/1; max-width:420px; margin:0 auto;}
  .cluster-defs{position:absolute; width:0; height:0; overflow:hidden;}
  .blob{
    position:absolute; border-radius:50%;
    animation:float 7s ease-in-out infinite;
  }
  .blob.b1{width:190px; height:190px; top:6%; left:8%; animation-delay:0s;}
  .blob.b2{width:120px; height:120px; top:52%; left:2%; animation-delay:1.2s;}
  .blob.b3{width:150px; height:150px; top:38%; left:46%; animation-delay:2.1s;}
  .blob.b4{width:96px; height:96px; top:8%; left:60%; animation-delay:.6s;}
  .blob.b5{width:70px; height:70px; top:74%; left:56%; animation-delay:1.8s;}
  .blob svg.cell{
    width:100%; height:100%; display:block; overflow:visible;
    filter:drop-shadow(0 10px 20px color-mix(in srgb, var(--ink) 16%, transparent));
  }
  @keyframes float{
    0%,100%{transform:translateY(0) translateX(0);}
    50%{transform:translateY(-14px) translateX(6px);}
  }
  @media (prefers-reduced-motion: reduce){ .blob{animation:none;} }
  .antigen-halo{animation:antigenPulse 2.6s ease-in-out infinite; transform-origin:center;}
  @keyframes antigenPulse{
    0%,100%{opacity:.32; r:4.2;}
    50%{opacity:.75; r:5.1;}
  }
  @media (prefers-reduced-motion: reduce){ .antigen-halo{animation:none;} }

  /* ---------- Section shells ---------- */
  .section{padding:88px 0;}
  .section.alt{background:var(--paper-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .kicker{
    font-size:.78rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--cardinal);
  }
  .section-head{max-width:680px; margin-bottom:48px;}
  .section-head h2{font-size:clamp(1.8rem, 3vw, 2.5rem); margin-top:10px;}
  .section-head p{margin-top:14px; color:var(--ink-soft); font-size:1.05rem;}

  [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  [data-reveal].is-visible{opacity:1; transform:none;}

  /* ---------- Research grid ---------- */
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .pillar{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:28px; box-shadow:var(--shadow);
    transition:transform .2s ease, border-color .2s ease;
  }
  .pillar:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--cardinal) 40%, var(--line));}
  .pillar .ico{
    width:84px; height:84px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background:transparent; color:var(--cardinal); margin-bottom:14px; overflow:hidden;
  }
  .pillar .ico svg{width:22px; height:22px;}
  .pillar .ico img{
    width:100%; height:100%; object-fit:contain; display:block;
    transition:transform .2s ease;
  }
  .pillar:hover .ico img{transform:scale(1.06);}
  .pillar h3{font-size:1.15rem;}
  .pillar p{margin-top:10px; color:var(--ink-soft); font-size:.96rem;}

  /* ---------- Approach strip ---------- */
  .approach{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:56px; position:relative;}
  .approach::before{
    content:""; position:absolute; top:23px; left:6%; right:6%; height:1px;
    background:repeating-linear-gradient(to right, var(--line) 0 8px, transparent 8px 14px);
    z-index:0;
  }
  .step{position:relative; z-index:1; text-align:center; padding:0 14px;}
  .step .num{
    width:46px; height:46px; border-radius:50%; margin:0 auto 16px;
    background:var(--paper); border:2px solid var(--cardinal); color:var(--cardinal);
    display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--serif);
  }
  .step h4{font-size:1rem;}
  .step p{margin-top:8px; font-size:.88rem; color:var(--ink-soft);}

  /* ---------- Team ---------- */
  .pi-card{
    display:grid; grid-template-columns:168px 1fr; gap:32px; align-items:center;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:32px; box-shadow:var(--shadow); margin-bottom:36px;
  }
  /* Avatars work two ways, and you don't have to choose per person:
       <div class="avatar"><img src="images/team/first-last.jpg" alt="Name"></div>
     shows the photo, and
       <div class="avatar">XY</div>
     falls back to initials on the cardinal gradient. The gradient is always
     painted underneath, so a photo that fails to load degrades gracefully
     instead of leaving a blank hole. */
  .avatar{
    width:150px; height:150px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-weight:700; font-size:2.6rem; color:#fff;
    background:linear-gradient(150deg, var(--cardinal), var(--cardinal-dark));
    flex:none; overflow:hidden;
  }
  .avatar img{
    width:100%; height:100%; object-fit:cover; display:block;
    /* keeps faces in frame even when a photo isn't perfectly square */
    object-position:center 42%;
  }
  .pi-card h3{font-size:1.4rem;}
  /* The PI avatar is 168px against everyone else's 150px — enough to register
     as first among equals without looking like a different design element. */
  .pi-card .avatar{width:168px; height:168px; font-size:2.9rem;}
  /* PI avatar and name both link to the Stanford profile. */
  .avatar-link{
    display:block; border-radius:50%; width:168px; height:168px;
    transition:transform .2s, box-shadow .2s;
  }
  .avatar-link:hover{transform:scale(1.03); box-shadow:0 0 0 3px var(--cardinal);}
  .avatar-link:focus-visible{outline:2px solid var(--cardinal); outline-offset:4px;}
  .name-link{color:inherit; text-decoration:none;}
  .name-link:hover{color:var(--cardinal); text-decoration:underline; text-underline-offset:3px;}
  @media (prefers-reduced-motion: reduce){
    .avatar-link{transition:none;}
    .avatar-link:hover{transform:none;}
  }
  .pi-card .role{color:var(--cardinal); font-weight:700; font-size:.85rem; letter-spacing:.4px; text-transform:uppercase; margin-top:4px; display:block;}
  .pi-card p.bio{margin-top:14px; color:var(--ink-soft);}
  .pi-links{display:flex; gap:10px; margin-top:16px;}

  .team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .member{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:22px; text-align:center; box-shadow:var(--shadow);
  }
  /* Every avatar on the page is 150px — PI, current members, alumni alike. */
  .member .avatar{width:150px; height:150px; font-size:2.6rem; margin:0 auto 14px;}
  .member h4{font-size:1rem; font-family:var(--sans); font-weight:700;}
  /* Job titles use the same cardinal treatment as the PI's "Principal
     Investigator" line, so the hierarchy reads consistently. */
  .member .role{
    display:block; color:var(--cardinal); font-weight:700; font-size:.78rem;
    letter-spacing:.4px; text-transform:uppercase; margin-top:5px;
  }

  /* Member cards that link to a Stanford profile. Rendered as <a class="member">
     so the whole card is one click target; cards without a profile stay a
     plain <div class="member"> and look identical minus the hover cue. */
  a.member{
    display:block; text-decoration:none; color:inherit;
    transition:border-color .2s, box-shadow .2s, transform .2s;
  }
  a.member:hover{
    border-color:var(--cardinal); transform:translateY(-2px);
  }
  a.member:focus-visible{outline:2px solid var(--cardinal); outline-offset:3px;}
  /* Small external-link cue, revealed on hover/focus only so the resting
     state stays clean. */
  a.member .ext{
    display:inline-flex; align-items:center; gap:3px; margin-top:8px;
    font-size:.72rem; color:var(--ink-soft); font-weight:600;
    opacity:0; transition:opacity .2s;
  }
  a.member:hover .ext, a.member:focus-visible .ext{opacity:1;}
  a.member .ext svg{width:11px; height:11px;}
  @media (prefers-reduced-motion: reduce){
    a.member{transition:none;}
    a.member:hover{transform:none;}
    a.member .ext{transition:none;}
  }
  /* Touch devices have no hover, so show the cue permanently there. */
  @media (hover: none){
    a.member .ext{opacity:1;}
  }
  /* ---------- Alumni toggle card ----------
     A .member-sized button that previews the four alumni faces in a 2x2
     cluster occupying the same 150px footprint as a single avatar, so it
     lines up with the real member cards beside it. */
  .member.alumni-toggle{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:0; cursor:pointer; font:inherit; color:inherit; text-align:center;
    border-style:dashed; transition:border-color .2s, box-shadow .2s, transform .2s;
  }
  .member.alumni-toggle:hover{
    border-color:var(--cardinal); transform:translateY(-2px);
  }
  .member.alumni-toggle:focus-visible{
    outline:2px solid var(--cardinal); outline-offset:3px;
  }
  .alumni-faces{
    width:150px; height:150px; margin:0 auto 14px;
    display:grid; grid-template-columns:1fr 1fr; gap:6px;
  }
  .alumni-faces img{
    width:100%; height:100%; object-fit:cover; object-position:center 42%;
    border-radius:50%; display:block;
  }
  .alumni-label{
    font-family:var(--sans); font-weight:700; font-size:1rem;
  }
  .alumni-hint{
    display:flex; align-items:center; justify-content:center; gap:4px;
    color:var(--cardinal); font-weight:700; font-size:.78rem;
    letter-spacing:.4px; text-transform:uppercase; margin-top:5px;
  }
  .alumni-hint .chev{
    width:14px; height:14px; transition:transform .25s ease;
  }
  .alumni-toggle[aria-expanded="true"] .alumni-hint .chev{transform:rotate(180deg);}
  .alumni-toggle[aria-expanded="true"]{border-style:solid; border-color:var(--cardinal);}

  /* ---------- Alumni panel ----------
     Cards are identical in structure and size to the current-members grid.
     Fades in when opened; [hidden] keeps it out of the tab order when shut. */
  .alumni-panel[hidden]{display:none;}
  .alumni-panel{
    margin-top:24px; padding-top:32px; border-top:1px solid var(--line);
    animation:alumniIn .3s ease both;
  }
  @keyframes alumniIn{
    from{opacity:0; transform:translateY(-6px);}
    to{opacity:1; transform:none;}
  }
  @media (prefers-reduced-motion: reduce){
    .alumni-panel{animation:none;}
    .member.alumni-toggle:hover{transform:none;}
    .alumni-hint .chev{transition:none;}
  }
  .alumni-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}

  /* ---------- Publications ---------- */
  /* Sub-headers inside the Publications section ("Recent Reviews", "Full
     Publication List"). Same type treatment as the section's own h2 so the
     three groups read as peers, just with a rule above to separate them. */
  .pub-group{
    margin-top:56px; padding-top:32px; border-top:1px solid var(--line);
    margin-bottom:26px;
  }
  .group-head{font-size:clamp(1.8rem, 3vw, 2.5rem);}

  /* Paper titles and inline PubMed/DOI links inside a .pub entry. */
  .pub h4 .pub-link{color:inherit; text-decoration:none;}
  .pub h4 .pub-link:hover{color:var(--cardinal); text-decoration:underline; text-underline-offset:3px;}
  .pub .meta a{color:var(--cardinal); font-weight:600; text-decoration:none;}
  .pub .meta a:hover{text-decoration:underline; text-underline-offset:2px;}

  .pub-list{display:flex; flex-direction:column; gap:16px;}
  .pub{
    display:flex; gap:18px; align-items:flex-start; padding:20px; background:var(--card);
    border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow);
  }
  .pub .yr{
    flex:none; width:64px; text-align:center; font-family:var(--serif); font-weight:700;
    color:var(--cardinal); font-size:1.1rem; padding-top:2px;
  }
  .pub .meta{color:var(--ink-soft); font-size:.9rem; margin-top:5px;}
  .pub h4{font-size:1.02rem; font-weight:700; font-family:var(--sans);}
  .pub .journal{font-style:italic;}
  .pub-cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}

  /* ---------- News timeline ---------- */
  /* ---------- Timeline scroll viewport ----------
     The timeline is capped at a fixed height and scrolls internally, so the
     page length stays constant no matter how many entries accumulate.
     Roughly 3-5 entries are visible at once — fewer when an entry has a
     photo, which is the intended behaviour. */
  .timeline-wrap{position:relative;}
  .timeline-scroll{
    max-height:clamp(520px, 72vh, 820px);
    overflow-y:auto; overflow-x:hidden;
    /* left room for the dots, which overhang the rail; right room for the bar */
    padding-left:12px; padding-right:16px;
    overscroll-behavior:contain;      /* don't chain into page scroll at the ends */
    scrollbar-width:thin;
    scrollbar-color:var(--line) transparent;
  }
  .timeline-scroll:focus-visible{
    outline:2px solid var(--cardinal); outline-offset:4px; border-radius:var(--radius-sm);
  }
  .timeline-scroll::-webkit-scrollbar{width:8px;}
  .timeline-scroll::-webkit-scrollbar-track{background:transparent;}
  .timeline-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:999px;}
  .timeline-scroll::-webkit-scrollbar-thumb:hover{background:var(--ink-soft);}

  /* Fade at the bottom edge signals there is more below. Sits on the wrapper,
     not the scroller, so it stays put while the content moves. Removed once
     the user reaches the end (.at-end is toggled in js/main.js). */
  .timeline-wrap::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:72px;
    background:linear-gradient(to bottom, transparent, var(--paper-dim));
    pointer-events:none; transition:opacity .25s ease;
  }
  .timeline-wrap.at-end::after{opacity:0;}
  .tl-hint{
    margin-top:12px; font-size:.78rem; letter-spacing:.5px; text-transform:uppercase;
    font-weight:700; color:var(--ink-soft); transition:opacity .25s ease;
  }
  .timeline-wrap.at-end .tl-hint{opacity:0;}

  .timeline{position:relative; padding-left:32px; border-left:2px solid var(--line);}
  .tl-item{position:relative; padding-bottom:36px;}
  .tl-item:last-child{padding-bottom:0;}
  .tl-item::before{
    content:""; position:absolute; left:-38px; top:2px; width:12px; height:12px; border-radius:50%;
    background:var(--cardinal); border:3px solid var(--paper-dim);
  }
  .tl-date{font-size:.8rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--cardinal);}
  .tl-item h4{margin-top:6px; font-size:1.08rem;}
  .tl-item p{margin-top:8px; color:var(--ink-soft); font-size:.95rem; max-width:640px;}
  /* Optional photo(s) per entry. An entry with no .tl-media renders exactly as
     before, so entries without an available image are not second-class. */
  .tl-media{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; align-items:flex-start;}
  /* Constrained by HEIGHT, not width. Sources range from square headshots to
     very tall phone photos; capping the width would let a portrait shot run
     400px+ tall and eat the whole scroll viewport. Capping height instead
     gives every entry a predictable footprint. */
  .tl-media img{
    max-height:200px; width:auto; max-width:100%; height:auto; display:block;
    border-radius:var(--radius-sm); border:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .tl-media.two{align-items:center;}
  .tl-media.two img{max-height:150px;}

  /* Before -> after arrow between a pair of photos. Decorative: the
     before/after meaning is carried by the two alt texts, so it's
     aria-hidden and screen readers don't announce a stray arrow. */
  .tl-arrow{
    display:flex; align-items:center; justify-content:center;
    flex:none; color:var(--cardinal);
  }
  .tl-arrow svg{width:18px; height:18px;}

  @media (max-width: 560px){
    .tl-media img{max-height:170px;}
    .tl-media.two img{max-height:120px;}
    /* photos stack on narrow screens, so the arrow turns to point down */
    .tl-arrow{width:100%;}
    .tl-arrow svg{transform:rotate(90deg);}
  }

  /* ---------- Join us ---------- */
  .positions{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
  .position{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
    box-shadow:var(--shadow);
  }
  /* wrap, because "Currently no open positions" is far longer than "Open" */
  .position h3{font-size:1.1rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .position .badge{
    font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
    background:color-mix(in srgb, var(--cardinal) 12%, transparent); color:var(--cardinal);
    padding:3px 9px; border-radius:999px;
  }
  /* Muted variant: cardinal reads as "apply now", which would be misleading
     on a role that isn't currently recruiting. */
  .position .badge.badge-closed{
    background:color-mix(in srgb, var(--ink-soft) 12%, transparent);
    color:var(--ink-soft);
    text-transform:none; letter-spacing:.2px;
  }
  .position p{margin-top:10px; color:var(--ink-soft); font-size:.94rem;}

  /* ---------- Contact ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
  .contact-list{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:18px;}
  .contact-list li{display:flex; gap:14px; align-items:flex-start;}
  .contact-list .ic{
    width:38px; height:38px; border-radius:10px; background:color-mix(in srgb, var(--cardinal) 12%, transparent);
    color:var(--cardinal); display:flex; align-items:center; justify-content:center; flex:none;
  }
  .contact-list .ic svg{width:18px; height:18px;}
  .contact-list strong{display:block; font-size:.95rem;}
  .contact-list span, .contact-list a{color:var(--ink-soft); font-size:.92rem; text-decoration:none;}
  .contact-list a:hover{color:var(--cardinal);}
  .map-frame{
    width:100%; height:340px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow);
  }
  .map-frame iframe{width:100%; height:100%; border:0;}

  footer{
    border-top:1px solid var(--line); padding:40px 0; background:var(--paper-dim);
  }
  .foot-grid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:18px;}
  .foot-grid p{color:var(--ink-soft); font-size:.86rem;}
  .foot-org{line-height:1.65;}
  .foot-copy{margin-top:10px; font-size:.8rem;}
  .foot-socials{display:flex; gap:10px; flex:none;}

  /* Affiliation buttons, matching the publication CTAs. */
  .foot-links{
    display:flex; flex-wrap:wrap; gap:12px;
    margin-top:28px; padding-top:24px; border-top:1px solid var(--line);
  }
  .foot-links .cta-btn{font-size:.84rem;}

  .to-top{
    position:fixed; right:24px; bottom:24px; z-index:90;
    width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
    background:var(--card); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
    color:var(--ink); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(8px);
    transition:opacity .2s ease, transform .2s ease;
  }
  .to-top.show{opacity:1; pointer-events:auto; transform:none;}

  @media (max-width: 980px){
    .pillars{grid-template-columns:repeat(2,1fr);}
    .team-grid{grid-template-columns:repeat(2,1fr);}
    .alumni-grid{grid-template-columns:repeat(3,1fr);}
    .contact-grid{grid-template-columns:1fr;}
    .hero-grid{grid-template-columns:1fr;}
    .cluster{margin-top:20px;}
    .positions{grid-template-columns:1fr;}
  }
  @media (max-width: 760px){
    nav.links{
      position:fixed; inset:64px 0 0 0; background:var(--paper); flex-direction:column;
      align-items:flex-start; padding:24px 28px; gap:6px; transform:translateX(100%);
      transition:transform .25s ease; overflow-y:auto;
    }
    nav.links.open{transform:translateX(0);}
    nav.links a{width:100%; padding:14px 0; border-bottom:1px solid var(--line); font-size:1rem;}
    .menu-toggle{
      display:flex; width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
      background:var(--card); align-items:center; justify-content:center; cursor:pointer;
    }
    .menu-toggle svg{width:18px; height:18px;}
    .nav-actions .cta-btn.ghost{display:none;}
    .approach{grid-template-columns:1fr 1fr; gap:28px;}
    .approach::before{display:none;}
    .pillars{grid-template-columns:1fr;}
    .pi-card{grid-template-columns:1fr; text-align:center;}
    .pi-links{justify-content:center;}
    .team-grid{grid-template-columns:1fr 1fr;}
    .alumni-grid{grid-template-columns:1fr 1fr;}
    .hero{padding:64px 0 48px;}
  }