/* ProteoStem — shared stylesheet
   Edit design tokens here once; every page updates. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  /* Palette: Clinical navy. --teal = primary navy, --amber = cyan accent,
     --teal-deep = dark strip background. Names kept for compatibility. */
  --paper:#F7F9FC;
  --ink:#0E1B2E;
  --ink-soft:#47566E;
  --teal:#12345B;
  --teal-deep:#0E2036;
  --amber:#2C8CC0;
  --mist:#DCE3EC;
  --mist-2:#EDF1F6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.mono{font-family:"IBM Plex Mono",monospace}
a{color:var(--teal)}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:500}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.1;letter-spacing:-.01em}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(251,250,248,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--mist)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:baseline;gap:10px;font-family:"Fraunces",serif;font-weight:600;font-size:20px;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);position:relative;top:-1px;box-shadow:5px 0 0 -1px var(--amber)}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center}
.nav-links a{color:var(--ink-soft);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--teal)}
.nav-links a.active{border-bottom:2px solid var(--amber);padding-bottom:3px}
/* Dropdown menu */
.nav-links .has-menu{position:relative}
.nav-links .menu-top{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.nav-links .menu-top .caret{font-size:9px;transition:transform .2s}
.nav-links .has-menu:hover .menu-top .caret,.nav-links .has-menu:focus-within .menu-top .caret{transform:rotate(180deg)}
.submenu{position:absolute;top:100%;left:0;min-width:196px;list-style:none;background:var(--paper);border:1px solid var(--mist);border-radius:3px;padding:6px;display:none;flex-direction:column;gap:2px;box-shadow:0 8px 24px rgba(14,27,46,.10);z-index:60}
.nav-links .has-menu:hover .submenu,.nav-links .has-menu:focus-within .submenu{display:flex}
.submenu li{display:block}
.submenu a{display:block;padding:8px 12px;border-radius:2px;font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;white-space:nowrap;border:none}
.submenu a:hover{background:var(--mist-2);color:var(--teal)}
.submenu a.active{color:var(--teal)}

/* SUB-PAGE HERO */
.subhero{border-bottom:1px solid var(--mist);position:relative;overflow:hidden}
.subhero:before{content:"";position:absolute;inset:0;background:radial-gradient(30% 60% at 78% 30%,rgba(18,52,91,.10),transparent 70%),radial-gradient(28% 55% at 90% 70%,rgba(44,140,192,.10),transparent 70%);pointer-events:none}
.subhero-in{position:relative;padding:66px 0 54px;max-width:760px}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft);letter-spacing:.08em;margin-bottom:18px}
.crumb a{color:var(--ink-soft);text-decoration:none}
.crumb a:hover{color:var(--teal)}
.subhero h1{font-size:clamp(32px,5vw,52px);margin:14px 0 20px}
.subhero p{font-size:clamp(17px,2vw,20px);color:var(--ink-soft)}

/* HOME HERO */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--mist)}
.hero-field{position:absolute;inset:0;pointer-events:none;background:radial-gradient(38% 55% at 24% 42%,rgba(18,52,91,.16),transparent 70%),radial-gradient(34% 50% at 70% 58%,rgba(44,140,192,.15),transparent 70%);animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.06)}}
.hero-in{position:relative;padding:104px 0 92px;max-width:820px}
.hero h1{font-size:clamp(38px,6vw,66px);margin:20px 0 26px}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero p{font-size:clamp(18px,2.2vw,21px);color:var(--ink-soft);max-width:640px}

/* BUTTONS */
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:14.5px;font-weight:600;padding:13px 22px;border-radius:2px;transition:.2s;cursor:pointer;border:none}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--teal)}
.btn-ghost{color:var(--ink);border:1px solid var(--mist);background:transparent}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-sm{padding:8px 14px;font-size:13px}

/* SECTIONS */
section{padding:80px 0}
.sec-head{max-width:680px;margin-bottom:46px}
.sec-head h2{font-size:clamp(28px,4vw,40px);margin:14px 0 0}
.prose{max-width:720px}
.prose p{margin-bottom:18px;color:var(--ink-soft)}
.prose h3{font-size:22px;margin:34px 0 12px;color:var(--ink)}

/* CARD GRID (home teasers) */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--mist);border:1px solid var(--mist)}
.card{background:var(--paper);padding:30px 28px;text-decoration:none;color:inherit;transition:.2s;display:block}
.card:hover{background:var(--mist-2)}
.card .eyebrow{margin-bottom:14px;display:block}
.card h3{font-size:21px;margin-bottom:10px;color:var(--ink)}
.card p{font-size:15px;color:var(--ink-soft)}
.card .more{display:inline-block;margin-top:16px;font-size:14px;font-weight:600;color:var(--teal)}

/* RESEARCH THEMES */
.themes{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--mist);border:1px solid var(--mist)}
.theme{background:var(--paper);padding:34px 32px}
.theme .idx{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--amber);letter-spacing:.1em}
.theme h3{font-size:23px;margin:16px 0 12px;color:var(--ink)}
.theme .q{font-style:italic;color:var(--teal);font-family:"Fraunces",serif;font-size:16px;margin-bottom:12px}
.theme p{font-size:15.5px;color:var(--ink-soft);margin-bottom:14px}
.theme ul{list-style:none;font-size:14px;color:var(--ink-soft)}
.theme ul li{padding-left:18px;position:relative;margin-bottom:6px}
.theme ul li:before{content:"→";position:absolute;left:0;color:var(--teal)}

/* PUBLICATIONS */
.pubs{border-top:1px solid var(--mist)}
.pub{display:grid;grid-template-columns:88px 1fr auto;gap:26px;align-items:center;padding:24px 4px;border-bottom:1px solid var(--mist);text-decoration:none;color:inherit;transition:.2s}
.pub:hover{background:var(--mist-2);padding-left:14px;padding-right:14px}
.pub .yr{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--teal);font-weight:500}
.pub h3{font-family:"Fraunces",serif;font-size:19px;font-weight:500;line-height:1.25;margin-bottom:5px;color:var(--ink)}
.pub .venue{font-size:14px;color:var(--ink-soft)}
.pub .arrow{font-size:20px;color:var(--mist);transition:.2s}
.pub:hover .arrow{color:var(--teal);transform:translateX(4px)}

/* TABS (datasets) */
.tablist{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--mist);margin-bottom:36px}
.tab{font-family:"IBM Plex Sans",sans-serif;font-size:14.5px;font-weight:600;color:var(--ink-soft);background:transparent;border:none;padding:14px 20px;cursor:pointer;position:relative;transition:color .2s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--teal)}
.tab[aria-selected="true"]:after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--teal)}
.tab:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:2px}
.panel[hidden]{display:none}
.panel-intro{max-width:640px;color:var(--ink-soft);font-size:15.5px;margin-bottom:28px}

/* DATASET CARDS */
.ds-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.dataset{border:1px solid var(--mist);border-radius:3px;padding:26px 24px;background:var(--paper);display:flex;flex-direction:column}
.dataset .badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.badge{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:2px;background:var(--mist-2);color:var(--ink-soft)}
.badge.teal{background:rgba(18,52,91,.10);color:var(--teal)}
.badge.amber{background:rgba(44,140,192,.12);color:var(--amber)}
.dataset h3{font-size:19px;margin-bottom:8px;color:var(--ink)}
.dataset p{font-size:14.5px;color:var(--ink-soft);margin-bottom:20px;flex-grow:1}
.dataset .links{display:flex;flex-wrap:wrap;gap:9px}
.res-link{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;text-decoration:none;padding:8px 13px;border-radius:2px;border:1px solid var(--mist);color:var(--ink);transition:.2s}
.res-link:hover{border-color:var(--teal);color:var(--teal)}
.res-link.primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.res-link.primary:hover{background:var(--teal-deep);color:#fff}
.res-link svg{width:14px;height:14px}

/* DARK STRIP */
.strip{background:var(--teal-deep);color:#EAF1F8}
.strip .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.strip .eyebrow{color:#8FB6D6}
.strip h2{font-size:clamp(26px,3.5vw,36px);color:#fff;margin:14px 0 18px}
.strip p{color:#AEC1D6;font-size:16px}
.strip .btn-solid{background:var(--amber);color:var(--teal-deep);margin-top:24px}
.strip .btn-solid:hover{background:#fff}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.stat .n{font-family:"Fraunces",serif;font-size:38px;color:#fff;line-height:1}
.stat .l{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;color:#8FB6D6;text-transform:uppercase;margin-top:8px}

/* FUNDERS */
.funders{background:var(--mist-2)}
.funder-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.funder{font-size:14px;color:var(--ink-soft);background:var(--paper);border:1px solid var(--mist);padding:9px 16px;border-radius:2px}

/* TEAM */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.member{border:1px solid var(--mist);border-radius:3px;overflow:hidden;background:var(--paper)}
.member .ph{aspect-ratio:1/1;background:linear-gradient(135deg,rgba(18,52,91,.12),rgba(44,140,192,.12));display:flex;align-items:center;justify-content:center;font-family:"Fraunces",serif;font-size:34px;color:var(--teal)}
.member .body{padding:20px}
.member h3{font-size:18px;color:var(--ink);margin-bottom:4px}
.member .role{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--amber);letter-spacing:.04em;text-transform:uppercase}
.member p{font-size:14px;color:var(--ink-soft);margin-top:10px}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.lab-lines p{margin-bottom:10px;color:var(--ink-soft);font-size:15.5px}
.lab-lines a{text-decoration:none}
.lab-lines a:hover{text-decoration:underline}

/* NOTE (prototype placeholders) */
.note{background:rgba(44,140,192,.08);border:1px dashed var(--amber);border-radius:3px;padding:14px 18px;font-size:13.5px;color:var(--ink-soft);margin-bottom:28px}
.note strong{color:var(--amber)}

/* FOOTER */
footer{border-top:1px solid var(--mist);padding:38px 0}
.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot-in p{font-size:13px;color:var(--ink-soft)}
.foot-links{display:flex;gap:22px}
.foot-links a{color:var(--ink-soft);font-size:13px;text-decoration:none}
.foot-links a:hover{color:var(--teal)}

@media (max-width:820px){
  .grid-3,.themes,.strip .wrap,.contact-grid,.ds-grid,.team-grid{grid-template-columns:1fr}
  .pub{grid-template-columns:60px 1fr;gap:16px}
  .pub .arrow{display:none}
}
@media (prefers-reduced-motion:reduce){.hero-field{animation:none}*{scroll-behavior:auto}}

/* Member photos */
.member .ph img{width:100%;height:100%;object-fit:cover;display:block}

/* Research blocks with figures */
.research-block{display:grid;grid-template-columns:1.1fr 0.9fr;gap:44px;align-items:center;margin-bottom:52px}
.research-block:nth-child(even) .rb-fig{order:-1}
.research-block h3{font-size:26px;margin-bottom:16px;color:var(--ink)}
.research-block p{color:var(--ink-soft);margin-bottom:14px;font-size:15.5px}
.research-block .rb-fig img{width:100%;border:1px solid var(--mist);border-radius:3px;background:var(--mist-2)}
.research-block .rb-fig figcaption{font-size:12.5px;color:var(--ink-soft);margin-top:10px;font-family:"IBM Plex Mono",monospace;line-height:1.5}
.member .body .links-row{margin-top:12px}
.member .body .links-row a{font-size:12px;font-family:"IBM Plex Mono",monospace;text-decoration:none;color:var(--teal)}
@media (max-width:820px){.research-block{grid-template-columns:1fr;gap:24px}.research-block:nth-child(even) .rb-fig{order:0}}

/* Datasets grouped by paper */
.study-head{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--mist)}
.study-head .study-venue{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.04em;color:var(--teal);margin-bottom:8px}
.study-head h2{font-size:23px;line-height:1.2;margin-bottom:12px;max-width:760px}
.study-head a.paper-link{font-size:13px;font-weight:600;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--mist);padding-bottom:2px}
.study-head a.paper-link:hover{color:var(--teal);border-color:var(--teal)}
.tab .tab-venue{display:block;font-family:"IBM Plex Sans",sans-serif;font-weight:400;font-size:11px;color:var(--ink-soft);margin-top:2px;letter-spacing:0}

/* Hamburger toggle (hidden on desktop) */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;background:none;border:none;cursor:pointer}
.nav-burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.nav-toggle-cb{display:none}

/* Mobile navigation: collapse to a hamburger panel below 900px */
@media (max-width:900px){
  .nav-burger{display:flex}
  .nav-links{
    position:absolute;top:66px;left:0;right:0;z-index:60;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--mist);
    box-shadow:0 14px 26px rgba(14,27,46,.10);padding:6px 0;
  }
  .nav-toggle-cb:checked ~ .nav-links{display:flex}
  .nav-links > li{width:100%}
  .nav-links > li > a{display:block;padding:12px 28px;font-size:15px}
  .nav-links a.active{border:none;padding-bottom:12px;color:var(--teal)}
  .nav-links .has-menu{display:block}
  .nav-links .menu-top{display:block;padding:14px 28px 4px;color:var(--ink-soft);font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:default}
  .nav-links .menu-top .caret{display:none}
  .submenu{position:static;display:block;background:none;border:none;box-shadow:none;padding:0;min-width:0}
  .submenu a{display:block;padding:10px 28px 10px 42px;font-size:15px;font-weight:500;white-space:normal}
  .nav-toggle-cb:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle-cb:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle-cb:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* Tighter padding on phones */
@media (max-width:560px){
  .wrap{padding:0 20px}
  .hero-in{padding:74px 0 60px}
  .subhero-in{padding:46px 0 38px}
  section{padding:56px 0}
  .cta-row{gap:10px}
}