/* =========================================================
   Selorm Adablanu — Academic Profile
   Original knowledge-panel-inspired design system
   ========================================================= */

:root{
  /* warm-neutral paper + slate ink + scholarly blue accent */
  --bg:        oklch(0.984 0.004 250);
  --card:      oklch(1 0 0);
  --card-2:    oklch(0.975 0.005 250);
  --ink:       oklch(0.26 0.018 255);
  --ink-soft:  oklch(0.42 0.02 255);
  --muted:     oklch(0.55 0.018 255);
  --line:      oklch(0.92 0.008 255);
  --line-2:    oklch(0.95 0.006 255);
  --accent:    oklch(0.5 0.1 250);
  --accent-ink:oklch(0.42 0.11 250);
  --accent-soft: oklch(0.95 0.03 250);
  --accent-2:  oklch(0.52 0.09 175);     /* teal, secondary */
  --accent-2-soft: oklch(0.95 0.03 175);
  --gold:      oklch(0.62 0.09 75);
  --shadow-sm: 0 1px 2px oklch(0.4 0.03 255 / 0.06), 0 1px 3px oklch(0.4 0.03 255 / 0.05);
  --shadow-md: 0 4px 14px oklch(0.4 0.03 255 / 0.07), 0 1px 4px oklch(0.4 0.03 255 / 0.05);
  --shadow-lg: 0 18px 50px oklch(0.35 0.04 255 / 0.12);
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --maxw: 1120px;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent-ink); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-0.02em; }
p{ margin:0; }
ul{ margin:0; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.serif{ font-family:var(--serif); }

.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--accent-ink);
}
.section-label{
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.section-label h2{
  font-family:var(--serif); font-size:26px; font-weight:600; letter-spacing:-0.02em;
}
.section-label .ln{ flex:1; height:1px; background:var(--line); }

/* ---------- skip + a11y ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; font-weight:600;
}
.skip:focus{ left:0; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* =========================================================
   Sticky tab bar
   ========================================================= */
.tabbar{
  position:sticky; top:0; z-index:100;
  background:oklch(0.984 0.004 250 / 0.82);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.tabbar .inner{
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:18px; height:60px;
}
.tabbar .brand{
  font-family:var(--serif); font-weight:600; font-size:18px; letter-spacing:-0.02em;
  white-space:nowrap; margin-right:6px;
}
.tabbar .brand b{ color:var(--accent-ink); }
.tabnav{
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; flex:1;
}
.tabnav::-webkit-scrollbar{ display:none; }
.tabnav a{
  color:var(--ink-soft); font-size:14px; font-weight:500; padding:8px 13px;
  border-radius:999px; white-space:nowrap; transition:.15s; text-decoration:none;
}
.tabnav a:hover{ background:var(--card-2); color:var(--ink); }
.tabnav a.active{ background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
.tabbar .cv{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:var(--accent); color:#fff; font-weight:600; font-size:13.5px;
  padding:9px 15px; border-radius:999px; text-decoration:none; transition:.15s;
}
.tabbar .cv:hover{ background:var(--accent-ink); text-decoration:none; }

/* =========================================================
   Layout grid
   ========================================================= */
main{ padding:34px 0 80px; }
.grid{
  display:grid; grid-template-columns: 1fr 360px; gap:26px; align-items:start;
}
.rail{ position:sticky; top:78px; display:flex; flex-direction:column; gap:18px; }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-sm);
}
.card.pad{ padding:26px 28px; }
section[id]{ scroll-margin-top:80px; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  background:
    radial-gradient(120% 140% at 88% -20%, var(--accent-soft) 0%, transparent 46%),
    var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
  padding:34px; margin-bottom:26px;
  display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center;
}
.portrait{
  width:158px; height:158px; border-radius:24px; object-fit:cover;
  border:1px solid var(--line); box-shadow:var(--shadow-md);
  background:var(--card-2);
}
.portrait-fallback{
  width:158px; height:158px; border-radius:24px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:62px; font-weight:600; color:var(--accent-ink);
  background:
    repeating-linear-gradient(135deg, var(--accent-soft) 0 9px, oklch(0.97 0.02 250) 9px 18px);
  border:1px solid var(--line); box-shadow:var(--shadow-md);
}
.hero .verified{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--accent-2); background:var(--accent-2-soft); padding:4px 11px; border-radius:999px;
  letter-spacing:.01em;
}
.hero h1{
  font-family:var(--serif); font-size:42px; line-height:1.04; margin:13px 0 0;
  letter-spacing:-0.025em;
}
.hero .role{
  font-size:18px; color:var(--ink); font-weight:600; margin-top:10px;
}
.hero .role span{ color:var(--accent-ink); }
.hero .sub{
  font-size:15.5px; color:var(--muted); margin-top:9px; max-width:54ch; text-wrap:pretty;
}
.hero .meta{
  display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-size:13.5px; color:var(--ink-soft);
}
.hero .meta span{ display:inline-flex; align-items:center; gap:6px; }
.hero .meta svg{ width:14px; height:14px; stroke:var(--muted); fill:none; stroke-width:1.7; }
.cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px;
  padding:11px 18px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:.15s;
}
.btn svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-ink); text-decoration:none; }
.btn-ghost{ background:var(--card); border-color:var(--line); color:var(--ink); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ background:var(--card-2); text-decoration:none; }

/* identifier chips */
.idrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.idchip{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--ink-soft); background:var(--card-2); border:1px solid var(--line);
  padding:7px 12px; border-radius:999px; transition:.15s; text-decoration:none;
}
.idchip:hover{ border-color:var(--accent); color:var(--accent-ink); text-decoration:none; box-shadow:var(--shadow-sm); }
.idchip .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent-2); }

/* =========================================================
   Stat strip
   ========================================================= */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px;
}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; box-shadow:var(--shadow-sm); text-align:left;
}
.stat .n{ font-family:var(--serif); font-size:34px; font-weight:600; letter-spacing:-0.02em; line-height:1; }
.stat .k{ font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.35; }
.stat .src{ font-size:11px; color:var(--muted); opacity:.8; margin-top:5px; }

/* =========================================================
   Generic content blocks
   ========================================================= */
.block{ margin-bottom:34px; }
.lede{ font-size:17px; line-height:1.7; color:var(--ink-soft); text-wrap:pretty; }
.lede strong{ color:var(--ink); font-weight:600; }

/* interest chips */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  font-size:13.5px; font-weight:500; color:var(--ink); background:var(--card);
  border:1px solid var(--line); padding:8px 14px; border-radius:999px; box-shadow:var(--shadow-sm);
}
.chip.accent{ background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); font-weight:600; }
.chips.journals{ margin-top:12px; }
.chips.journals .chip{ font-size:12.5px; }
.chips.journals .chip em{ font-style:normal; font-weight:700; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-2); margin-left:8px; }

/* expertise grid */
.exp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.exp{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:15px 16px; box-shadow:var(--shadow-sm); display:flex; gap:11px; align-items:flex-start;
}
.exp .ic{
  width:30px; height:30px; flex:none; border-radius:8px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
}
.exp .ic svg{ width:16px; height:16px; stroke:var(--accent-ink); fill:none; stroke-width:1.8; }
.exp b{ font-size:14px; font-weight:600; display:block; }
.exp small{ font-size:12px; color:var(--muted); }
.confirm-note{
  margin-top:14px; font-size:12.5px; color:var(--muted); background:var(--card-2);
  border:1px dashed var(--line); border-radius:var(--r-sm); padding:11px 14px;
}
.tag-confirm{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gold); background:oklch(0.95 0.04 75); padding:2px 7px; border-radius:6px;
  vertical-align:middle; margin-left:6px;
}

/* timeline */
.timeline{ position:relative; padding-left:30px; }
.timeline::before{
  content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--line);
}
.tl{ position:relative; padding-bottom:24px; }
.tl:last-child{ padding-bottom:0; }
.tl::before{
  content:""; position:absolute; left:-26px; top:4px; width:14px; height:14px; border-radius:50%;
  background:var(--card); border:3px solid var(--accent); box-shadow:0 0 0 3px var(--bg);
}
.tl.now::before{ background:var(--accent); }
.tl .deg{ font-size:15.5px; font-weight:600; }
.tl .inst{ font-size:14px; color:var(--ink-soft); margin-top:2px; }
.tl .yr{ font-size:12.5px; font-weight:600; color:var(--accent-ink); margin-top:3px; }

/* publications */
.pub{
  padding:20px 0; border-top:1px solid var(--line-2); display:grid;
  grid-template-columns:auto 1fr; gap:16px;
}
.pub:first-child{ border-top:none; padding-top:4px; }
.pub .yr{
  font-family:var(--serif); font-size:15px; font-weight:600; color:var(--accent-ink);
  white-space:nowrap; padding-top:1px;
}
.pub h3{ font-size:16.5px; line-height:1.4; font-weight:600; letter-spacing:-0.01em; }
.pub h3 a{ color:var(--ink); }
.pub h3 a:hover{ color:var(--accent-ink); }
.pub .authors{ font-size:13.5px; color:var(--ink-soft); margin-top:5px; }
.pub .authors b{ color:var(--ink); }
.pub .venue{ font-size:13.5px; color:var(--muted); margin-top:3px; font-style:italic; }
.pub .why{ font-size:13.5px; color:var(--ink-soft); margin-top:9px; text-wrap:pretty; }
.pub .pmeta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.pub .pill{
  font-size:11.5px; font-weight:600; color:var(--ink-soft); background:var(--card-2);
  border:1px solid var(--line); padding:4px 10px; border-radius:999px;
}
.pub .pill.doi{ color:var(--accent-ink); }
.pub .pill.cite{ color:var(--accent-2); }
.pub-status{
  font-size:11.5px; font-weight:600; color:var(--muted); background:var(--card-2);
  border:1px solid var(--line); padding:4px 11px; border-radius:999px; white-space:nowrap;
  transition:.2s;
}
.pub-status.live{ color:var(--accent-2); background:var(--accent-2-soft); border-color:transparent; }
.pub-status.live::before{ content:"\25CF"; margin-right:5px; font-size:9px; vertical-align:1px; }
.pub-status.syncing{ color:var(--accent-ink); background:var(--accent-soft); border-color:transparent; }
#pub-list.updating{ opacity:.5; transition:opacity .2s; }

/* projects */
.proj-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.proj{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.proj::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.proj h3{ font-size:17px; font-weight:600; letter-spacing:-0.01em; }
.proj p{ font-size:13.5px; color:var(--ink-soft); margin-top:9px; text-wrap:pretty; }
.proj .tools{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.proj .tools span{ font-size:11px; font-weight:600; color:var(--accent-ink); background:var(--accent-soft); padding:3px 9px; border-radius:6px; }
.proj .status{ font-size:12px; color:var(--muted); margin-top:12px; display:flex; align-items:center; gap:6px; }
.proj .status .d{ width:7px; height:7px; border-radius:50%; background:var(--accent-2); }

/* service / list */
.svc{ display:flex; flex-direction:column; gap:14px; }
.svc-item{ display:flex; gap:13px; align-items:flex-start; }
.svc-item .ic{
  width:32px; height:32px; flex:none; border-radius:9px; background:var(--accent-2-soft);
  display:flex; align-items:center; justify-content:center;
}
.svc-item .ic svg{ width:16px; height:16px; stroke:var(--accent-2); fill:none; stroke-width:1.8; }
.svc-item b{ font-size:14.5px; font-weight:600; }
.svc-item p{ font-size:13px; color:var(--ink-soft); margin-top:2px; }

/* =========================================================
   Right rail
   ========================================================= */
.about h3, .rail-card h3{ font-family:var(--serif); font-size:19px; margin-bottom:12px; }
.about p{ font-size:14px; color:var(--ink-soft); line-height:1.65; }
.facts{ list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:0; }
.facts li{
  display:grid; grid-template-columns:104px 1fr; gap:10px; padding:10px 0;
  border-top:1px solid var(--line-2); font-size:13.5px;
}
.facts li:first-child{ border-top:none; }
.facts .lbl{ color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; padding-top:1px; }
.facts .val{ color:var(--ink); }

.linklist{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
.linklist a{
  display:flex; align-items:center; gap:11px; padding:10px 10px; border-radius:10px;
  color:var(--ink); font-size:14px; font-weight:500; transition:.13s; text-decoration:none;
}
.linklist a:hover{ background:var(--card-2); text-decoration:none; }
.linklist .ic{
  width:30px; height:30px; flex:none; border-radius:8px; background:var(--card-2);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; color:var(--accent-ink);
}
.linklist a:hover .ic{ background:var(--accent-soft); border-color:transparent; }
.linklist small{ display:block; color:var(--muted); font-size:11.5px; font-weight:500; }

/* contact card */
.contact-card{
  background:
    radial-gradient(130% 130% at 100% 0%, var(--accent-soft) 0%, transparent 50%),
    var(--card);
}
.contact-card .invite{ font-size:15px; color:var(--ink-soft); line-height:1.65; margin-top:10px; text-wrap:pretty; }

/* footer */
.site-footer{
  border-top:1px solid var(--line); padding:30px 0 60px; margin-top:30px;
}
.site-footer .inner{
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.site-footer p{ font-size:13px; color:var(--muted); }
.disclaimer{
  max-width:var(--maxw); margin:18px auto 0; padding:0 24px;
}
.disclaimer div{
  font-size:12px; color:var(--muted); background:var(--card-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:13px 16px; line-height:1.55;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px){
  .grid{ grid-template-columns:1fr; }
  .rail{ position:static; }
  .hero{ grid-template-columns:1fr; text-align:left; }
  .exp-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px){
  .hero{ padding:26px 22px; }
  .hero h1{ font-size:33px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .proj-grid{ grid-template-columns:1fr; }
  .pub{ grid-template-columns:1fr; gap:6px; }
  .pub .yr{ order:-1; }
  .tabbar .brand{ display:none; }
}
@media (max-width: 460px){
  .exp-grid{ grid-template-columns:1fr; }
  .facts li{ grid-template-columns:1fr; gap:2px; }
}

/* =========================================================
   Print — clean CV-style output
   ========================================================= */
@media print{
  :root{ --bg:#fff; --card:#fff; }
  body{ font-size:11pt; color:#111; }
  .tabbar, .cta, .site-footer .inner .top, .skip, .btn{ display:none !important; }
  .hero, .card, .stat, .proj, .exp{ box-shadow:none !important; border:1px solid #ddd !important; }
  .hero{ background:#fff !important; }
  .grid{ grid-template-columns:1fr 280px; gap:18px; }
  .rail{ position:static; }
  a{ color:#111 !important; text-decoration:none; }
  section[id]{ break-inside:avoid; }
  .pub, .proj, .tl{ break-inside:avoid; }
  .tabbar{ position:static; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* =========================================================
   COLOR ENRICHMENT — multi-hue accent system
   (shared lightness/chroma, hue varied — colorful yet calm)
   ========================================================= */
:root{
  --c-blue:   oklch(0.52 0.13 252); --c-blue-soft:   oklch(0.96 0.030 252);
  --c-teal:   oklch(0.54 0.10 195); --c-teal-soft:   oklch(0.96 0.032 195);
  --c-violet: oklch(0.52 0.15 300); --c-violet-soft: oklch(0.96 0.035 300);
  --c-amber:  oklch(0.56 0.11 64);  --c-amber-soft:  oklch(0.96 0.045 80);
  --c-rose:   oklch(0.57 0.15 18);  --c-rose-soft:   oklch(0.96 0.040 20);
  --c-green:  oklch(0.55 0.11 150); --c-green-soft:  oklch(0.96 0.040 150);
}

body{
  background:
    radial-gradient(52% 38% at 100% -2%, var(--c-violet-soft) 0%, transparent 60%),
    radial-gradient(46% 32% at 0% 1%, var(--c-teal-soft) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* coloured section markers */
.section-label::before{
  content:""; width:11px; height:11px; border-radius:3px; flex:none;
  background:linear-gradient(135deg, var(--c-blue), var(--c-violet));
}

/* hero */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(85% 120% at 100% -10%, var(--c-violet-soft) 0%, transparent 46%),
    radial-gradient(70% 120% at -5% 0%, var(--c-teal-soft) 0%, transparent 42%),
    var(--card);
}
.hero::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--c-blue), var(--c-teal), var(--c-green), var(--c-amber), var(--c-rose), var(--c-violet));
}
.portrait{
  border:3px solid transparent;
  background:
    linear-gradient(var(--card),var(--card)) padding-box,
    linear-gradient(135deg, var(--c-blue), var(--c-violet) 50%, var(--c-teal)) border-box;
}
.portrait-fallback{
  border:3px solid transparent; color:var(--c-violet);
  background:
    repeating-linear-gradient(135deg, var(--c-blue-soft) 0 9px, var(--c-violet-soft) 9px 18px) padding-box,
    linear-gradient(135deg, var(--c-blue), var(--c-violet) 50%, var(--c-teal)) border-box;
}
.hero .verified{ color:var(--c-teal); background:var(--c-teal-soft); }

/* buttons */
.btn-primary{ background:linear-gradient(135deg, var(--c-blue), oklch(0.50 0.15 288)); }
.btn-primary:hover{ background:linear-gradient(135deg, oklch(0.47 0.14 252), oklch(0.45 0.16 290)); }

/* identifier chip dots */
.idrow .idchip:nth-child(6n+1) .dot{ background:var(--c-blue); }
.idrow .idchip:nth-child(6n+2) .dot{ background:var(--c-teal); }
.idrow .idchip:nth-child(6n+3) .dot{ background:var(--c-violet); }
.idrow .idchip:nth-child(6n+4) .dot{ background:var(--c-amber); }
.idrow .idchip:nth-child(6n+5) .dot{ background:var(--c-green); }
.idrow .idchip:nth-child(6n+6) .dot{ background:var(--c-rose); }

/* stat cards */
.stats .stat{ position:relative; overflow:hidden; }
.stats .stat::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; }
.stats .stat:nth-child(1){ background:linear-gradient(180deg, var(--c-blue-soft), var(--card) 64%); }
.stats .stat:nth-child(1)::before{ background:var(--c-blue); } .stats .stat:nth-child(1) .n{ color:var(--c-blue); }
.stats .stat:nth-child(2){ background:linear-gradient(180deg, var(--c-teal-soft), var(--card) 64%); }
.stats .stat:nth-child(2)::before{ background:var(--c-teal); } .stats .stat:nth-child(2) .n{ color:var(--c-teal); }
.stats .stat:nth-child(3){ background:linear-gradient(180deg, var(--c-violet-soft), var(--card) 64%); }
.stats .stat:nth-child(3)::before{ background:var(--c-violet); } .stats .stat:nth-child(3) .n{ color:var(--c-violet); }
.stats .stat:nth-child(4){ background:linear-gradient(180deg, var(--c-amber-soft), var(--card) 64%); }
.stats .stat:nth-child(4)::before{ background:var(--c-amber); } .stats .stat:nth-child(4) .n{ color:var(--c-amber); }

/* research interest chips */
#research .chips .chip{ border-color:transparent; font-weight:600; box-shadow:none; }
#research .chips .chip:nth-child(6n+1){ background:var(--c-blue-soft); color:var(--c-blue); }
#research .chips .chip:nth-child(6n+2){ background:var(--c-teal-soft); color:var(--c-teal); }
#research .chips .chip:nth-child(6n+3){ background:var(--c-violet-soft); color:var(--c-violet); }
#research .chips .chip:nth-child(6n+4){ background:var(--c-amber-soft); color:var(--c-amber); }
#research .chips .chip:nth-child(6n+5){ background:var(--c-green-soft); color:var(--c-green); }
#research .chips .chip:nth-child(6n+6){ background:var(--c-rose-soft); color:var(--c-rose); }

/* expertise icons */
.exp:nth-child(6n+1) .ic{ background:var(--c-blue-soft); } .exp:nth-child(6n+1) .ic svg{ stroke:var(--c-blue); }
.exp:nth-child(6n+2) .ic{ background:var(--c-teal-soft); } .exp:nth-child(6n+2) .ic svg{ stroke:var(--c-teal); }
.exp:nth-child(6n+3) .ic{ background:var(--c-violet-soft); } .exp:nth-child(6n+3) .ic svg{ stroke:var(--c-violet); }
.exp:nth-child(6n+4) .ic{ background:var(--c-amber-soft); } .exp:nth-child(6n+4) .ic svg{ stroke:var(--c-amber); }
.exp:nth-child(6n+5) .ic{ background:var(--c-green-soft); } .exp:nth-child(6n+5) .ic svg{ stroke:var(--c-green); }
.exp:nth-child(6n+6) .ic{ background:var(--c-rose-soft); } .exp:nth-child(6n+6) .ic svg{ stroke:var(--c-rose); }

/* project accent bars */
.proj:nth-child(4n+1)::before{ background:var(--c-blue); }
.proj:nth-child(4n+2)::before{ background:var(--c-teal); }
.proj:nth-child(4n+3)::before{ background:var(--c-violet); }
.proj:nth-child(4n+4)::before{ background:var(--c-amber); }
.proj:nth-child(4n+1) .tools span{ background:var(--c-blue-soft); color:var(--c-blue); }
.proj:nth-child(4n+2) .tools span{ background:var(--c-teal-soft); color:var(--c-teal); }
.proj:nth-child(4n+3) .tools span{ background:var(--c-violet-soft); color:var(--c-violet); }
.proj:nth-child(4n+4) .tools span{ background:var(--c-amber-soft); color:var(--c-amber); }

/* profile link icons */
.linklist li:nth-child(7n+1) .ic{ background:var(--c-blue-soft); color:var(--c-blue); }
.linklist li:nth-child(7n+2) .ic{ background:var(--c-teal-soft); color:var(--c-teal); }
.linklist li:nth-child(7n+3) .ic{ background:var(--c-violet-soft); color:var(--c-violet); }
.linklist li:nth-child(7n+4) .ic{ background:var(--c-green-soft); color:var(--c-green); }
.linklist li:nth-child(7n+5) .ic{ background:var(--c-amber-soft); color:var(--c-amber); }
.linklist li:nth-child(7n+6) .ic{ background:var(--c-rose-soft); color:var(--c-rose); }
.linklist li:nth-child(7n+7) .ic{ background:var(--c-blue-soft); color:var(--c-blue); }

/* service icons */
.svc-item:nth-child(1) .ic{ background:var(--c-blue-soft); } .svc-item:nth-child(1) .ic svg{ stroke:var(--c-blue); }
.svc-item:nth-child(2) .ic{ background:var(--c-violet-soft); } .svc-item:nth-child(2) .ic svg{ stroke:var(--c-violet); }
.svc-item:nth-child(3) .ic{ background:var(--c-amber-soft); } .svc-item:nth-child(3) .ic svg{ stroke:var(--c-amber); }

/* reviewer journal chips — full-spectrum */
.chips.journals .chip{ border-color:transparent; box-shadow:none; }
.chips.journals .chip:nth-child(6n+1){ background:var(--c-blue-soft); color:var(--c-blue); }
.chips.journals .chip:nth-child(6n+2){ background:var(--c-teal-soft); color:var(--c-teal); }
.chips.journals .chip:nth-child(6n+3){ background:var(--c-violet-soft); color:var(--c-violet); }
.chips.journals .chip:nth-child(6n+4){ background:var(--c-amber-soft); color:var(--c-amber); }
.chips.journals .chip:nth-child(6n+5){ background:var(--c-green-soft); color:var(--c-green); }
.chips.journals .chip:nth-child(6n+6){ background:var(--c-rose-soft); color:var(--c-rose); }
.chips.journals .chip em{ color:currentColor; opacity:.62; font-weight:700; }

/* education timeline dots */
#education .tl:nth-child(1)::before{ border-color:var(--c-blue); }
#education .tl:nth-child(2)::before{ border-color:var(--c-teal); }
#education .tl:nth-child(3)::before{ border-color:var(--c-violet); }
#education .tl:nth-child(4)::before{ border-color:var(--c-amber); }
#education .tl:nth-child(5)::before{ border-color:var(--c-rose); }
#education .tl:nth-child(1) .yr{ color:var(--c-blue); }
#education .tl:nth-child(2) .yr{ color:var(--c-teal); }
#education .tl:nth-child(3) .yr{ color:var(--c-violet); }
#education .tl:nth-child(4) .yr{ color:var(--c-amber); }
#education .tl:nth-child(5) .yr{ color:var(--c-rose); }

/* contact card */
.contact-card{
  background:
    radial-gradient(120% 130% at 100% 0%, var(--c-violet-soft) 0%, transparent 55%),
    radial-gradient(120% 130% at 0% 100%, var(--c-teal-soft) 0%, transparent 55%),
    var(--card);
}

/* tabs + misc */
.tabnav a.active{ background:var(--c-blue-soft); color:var(--c-blue); }
.tabbar .brand b{ color:var(--c-blue); }
.tabbar .brand{ background:linear-gradient(135deg,var(--c-blue),var(--c-violet)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pub-status.live{ color:var(--c-teal); background:var(--c-teal-soft); }
.pub .pill.cite{ color:var(--c-green); background:var(--c-green-soft); border-color:transparent; }
.pub h3 a:hover{ color:var(--c-blue); }
.proj h3{ color:var(--ink); }

/* =========================================================
   DARK HEADER + FOOTER
   ========================================================= */
:root{
  --dark:      oklch(0.20 0.022 262);
  --dark-2:    oklch(0.26 0.022 262);
  --dark-line: oklch(0.31 0.02 262);
  --dark-ink:  oklch(0.95 0.008 262);
  --dark-mut:  oklch(0.72 0.018 262);
}

/* header / tab bar */
.tabbar{
  background: color-mix(in oklch, var(--dark) 88%, transparent);
  border-bottom-color: var(--dark-line);
}
.tabnav a{ color: var(--dark-mut); }
.tabnav a:hover{ background: var(--dark-2); color:#fff; }
.tabnav a.active{ background: var(--c-blue-soft); color: var(--c-blue); }
.tabbar .brand{
  background:linear-gradient(135deg, oklch(0.78 0.12 252), oklch(0.74 0.15 300));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* footer */
.site-footer{
  position:relative; margin-top:44px;
  background: var(--dark); border-top:none;
}
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--c-blue), var(--c-teal), var(--c-green), var(--c-amber), var(--c-rose), var(--c-violet));
}
.site-footer .inner{ padding-top:34px; padding-bottom:34px; }
.site-footer p{ color: var(--dark-mut); }
.site-footer p:first-child{ color: var(--dark-ink); font-weight:500; }

@media print{
  .site-footer{ background:#fff; }
  .site-footer::before{ display:none; }
  .site-footer p, .site-footer p:first-child{ color:#111; }
  .tabbar{ background:#fff; }
}