h1 em, h2 em { font-style: italic; color: var(--brand); }
.hero h1, .sec-head h2, .contact h2 { font-weight: 400; letter-spacing: -.01em; }
.hero h1 { font-size: clamp(44px, 6.4vw, 76px); line-height: 1.02; }
.sec-head h2 { font-size: clamp(32px, 4vw, 46px); }
.contact h2 { font-size: clamp(30px, 3.6vw, 42px); }

/* progress */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100; pointer-events: none; }
.progress span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand-2), var(--brand), #7c3aed);
}

/* nav tools */
.nav-tools { display: flex; align-items: center; gap: 8px; }
.kbd-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted); border-radius: 10px;
  font: inherit; font-size: 13.5px; cursor: pointer; transition: border-color .15s, color .15s;
}
.kbd-btn:hover { border-color: var(--brand); color: var(--brand); }
kbd {
  font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-bottom-width: 2px; background: #fff; border-radius: 6px; padding: 1px 6px;
  white-space: nowrap;
}

/* hero extras */
.hero-glow {
  position: absolute; width: 720px; height: 720px; right: -160px; top: -220px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, #bfe0ff, #c9f1e7, #e2d9ff, #bfe0ff); filter: blur(90px); opacity: .55;
  animation: spin 24s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
mark {
  background: none; color: var(--ink); font-weight: 600; padding: 0 2px;
  background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 88%;
}
.hl-g { background-image: linear-gradient(#c9f1e7, #c9f1e7); }
.hl-b { background-image: linear-gradient(#cfe3fb, #cfe3fb); }
.hl-p { background-image: linear-gradient(#e2d9ff, #e2d9ff); }
.orbit { position: absolute; inset: -34px; border: 1.5px dashed #c7d6ea; border-radius: 50%; animation: spin 40s linear infinite; z-index: 0; }
.orbit span {
  position: absolute; width: 42px; height: 42px; margin: -21px; border-radius: 12px;
  left: calc(50% + 50% * sin(var(--a))); top: calc(50% - 50% * cos(var(--a)));
  display: grid; place-items: center; background: #fff; color: var(--brand); box-shadow: var(--shadow-lg); font-size: 16px;
}
.orbit span i { animation: spin 40s linear infinite reverse; }
.orbit span:nth-child(2) { color: var(--brand-2); }
.orbit span:nth-child(3) { color: #5a3fb8; }
.orbit span:nth-child(4) { color: #c2410c; }
.orbit span:nth-child(5) { color: var(--amber); }
.portrait-frame { z-index: 1; }
.float-card { z-index: 2; animation: bob 6s ease-in-out infinite; }
.fc-2 { animation-delay: -3s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.fc-2 i { background: var(--teal-soft); color: var(--brand-2); }

/* spotlight */
.spot { position: relative; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 2;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(11, 92, 173, .07), transparent 60%);
}
.spot:hover::before { opacity: 1; }

/* art */
.art, .thumb { overflow: hidden; background: var(--bg); }
.art svg, .thumb svg { width: 100%; height: 100%; display: block; transition: transform .6s ease; }
.spot:hover .art svg, .pub:hover .thumb svg { transform: scale(1.06); }

/* bento */
.bento {
  display: grid; gap: 18px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "erc erc erc erc erc erc"
    "about about about gw gw gw"
    "about about about se se se"
    "fund fund world world cost cost";
}
.tile { padding: 24px; overflow: hidden; }
.tile h3 { font-size: 16px; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tile h3 > i { color: var(--brand); }
.tile p { margin: 0 0 12px; font-size: 14.5px; }
.tile p:last-child { margin: 0; }
.t-about { grid-area: about; }
.t-about p { font-size: 15.5px; }
.t-about { display: flex; flex-direction: column; }
.about-facts { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.about-facts div {
  display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line);
}
.about-facts i {
  grid-row: span 2; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(15, 27, 45, .08);
}
.about-facts div:nth-child(2) i { color: var(--brand-2); }
.about-facts div:nth-child(3) i { color: #5a3fb8; }
.about-facts div:nth-child(4) i { color: var(--amber); }
.about-facts b { color: var(--ink); font-size: 14px; line-height: 1.2; }
.about-facts span { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.t-gw { grid-area: gw; }
.t-se { grid-area: se; }

/* workshop cards */
.ws { --ac: var(--brand); --ac-soft: var(--brand-soft); padding: 0; display: grid; grid-template-columns: 42% 1fr; border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--ac), #c9d6e6 55%) border-box; border: 1.5px solid transparent;
  transition: transform .25s, box-shadow .25s; }
.ws:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ws-green { --ac: #0e8a7e; --ac-soft: var(--teal-soft); }
.ws-blue { --ac: #0b5cad; --ac-soft: var(--brand-soft); }
.ws .art { min-height: 100%; border-radius: 13px 0 0 13px; }
.ws-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ws-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-role { font-size: 12px; font-weight: 700; color: #fff; background: var(--ac); padding: 3px 10px; border-radius: 99px; }
.ws-role i { font-size: 10px; margin-right: 3px; }
.ws-ed { font-size: 11.5px; font-weight: 600; color: var(--ac); background: var(--ac-soft); padding: 3px 9px; border-radius: 99px; }
.ws h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 4px 0 0; color: var(--ink); }
.ws-full { font-size: 14px !important; color: var(--ink-2); margin: 0 !important; line-height: 1.45; }
.ws-meta { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; color: var(--muted); display: grid; gap: 3px; }
.ws-meta i { width: 16px; color: var(--ac); }
.ws-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ws-due { font-size: 12px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.ws-due b { font-size: 15px; color: var(--ac); font-variant-numeric: tabular-nums; }
.ws-due .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); animation: pulse 1.8s infinite; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac) 60%, transparent); }
.ws-link { font-size: 13px; font-weight: 700; color: var(--ac); display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; background: var(--ac-soft); }
.ws-link:hover { text-decoration: none; background: var(--ac); color: #fff; }
.ws-link i { transition: transform .2s; }
.ws-link:hover i { transform: translateX(3px); }
.tile-body { padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.tile-body h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 4px 0 0; }
.tile-body .badge, .news .badge { align-self: flex-start; }
.t-world { grid-area: world; }
.t-fund { grid-area: fund; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.t-fund p { flex: 1 1 180px; }
.t-fund .big { font-family: var(--serif); font-size: 50px; color: var(--ink); line-height: 1; white-space: nowrap; }
.t-cost { grid-area: cost; }
.tile-ic {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; flex: none; font-size: 17px;
  background: rgba(255, 255, 255, .1); color: #9fd8ff; margin-bottom: 14px;
}
.tile-ic.amber { background: var(--amber-soft); color: var(--amber); margin: 0; }
.tile-ic.teal { background: var(--teal-soft); color: var(--brand-2); }

.year-chart { display: flex; align-items: flex-end; gap: 4px; height: 130px; padding-top: 18px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.bar .stack {
  width: 100%; max-width: 22px; display: flex; flex-direction: column; border-radius: 5px 5px 2px 2px; overflow: hidden;
  transform-origin: bottom; transform: scaleY(0); transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.in .bar .stack { transform: scaleY(1); }
.bar .seg.j { background: var(--brand-2); }
.bar .seg.c { background: var(--brand); }
.bar em { order: -1; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.bar small { font-size: 10px; color: var(--muted); margin-top: 4px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sw.j { background: var(--brand-2); }
.sw.c { background: var(--brand); }

.world { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.world span { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 9px; border-radius: 9px; background: var(--bg); }
.world b { font-size: 10.5px; color: #fff; background: var(--brand); border-radius: 5px; padding: 2px 5px; letter-spacing: .04em; }
.world span:nth-child(even) b { background: var(--brand-2); }

/* themes */
.themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.theme { overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.theme:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.theme .art { aspect-ratio: 5 / 3; border-bottom: 1px solid var(--line); }
.theme-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.theme h3 { font-size: 19px; }
.theme p { margin: 0; font-size: 14.5px; flex: 1; }
.num-tag { font-family: var(--serif); font-size: 30px; color: #b3c2d6; line-height: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); }
.sub-h { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 44px 0 16px; }
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.proj { display: flex; gap: 14px; align-items: center; padding: 12px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.proj:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.proj .art.sm { flex: none; width: 108px; height: 78px; border-radius: 10px; }
.proj h4 { color: var(--ink); font-size: 15px; margin: 0 0 3px; }
.proj p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* news */
.news { position: relative; overflow: hidden; }
.news::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.news.k-conf::after { background: var(--brand); }
.news.k-jour::after { background: var(--brand-2); }
.news.k-mile::after { background: var(--amber); }
.news.k-talk::after { background: #5a3fb8; }
.news.k-serv::after { background: #be185d; }
.more-wrap { text-align: center; margin-top: 22px; }
.more-count { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg); padding: 1px 8px; border-radius: 99px; }

/* publications */
.pub { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 14px; }
.pub .thumb { border-radius: 10px; aspect-ratio: 5 / 3; align-self: start; border: 1px solid var(--line); }
.pub-body { min-width: 0; }
.pub.featured { border-color: #b9d3ee; background: linear-gradient(180deg, #f7fbff, #fff); }
.rank {
  display: inline-block; vertical-align: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  padding: 1px 7px; border-radius: 6px; background: var(--amber-soft); color: var(--amber); border: 1px solid #f3dcb2;
}
button.pill { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* area filter (first level) */
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; margin-bottom: 14px; }
.area {
  --c: var(--brand);
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: left;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15, 27, 45, .04);
  transition: transform .15s, border-color .15s, box-shadow .15s, background .15s;
}
.area:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); box-shadow: var(--shadow); }
.area-ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 14px;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); transition: all .15s;
}
.area-txt { flex: 1; min-width: 0; line-height: 1.25; }
.area-n { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--bg); padding: 1px 8px; border-radius: 99px; }
.area.active { background: color-mix(in srgb, var(--c) 8%, #fff); border-color: var(--c); color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent); }
.area.active .area-ic { background: var(--c); color: #fff; }
.area.active .area-n { background: var(--c); color: #fff; }
.a-all { --c: #0f1b2d; } .a-green { --c: #0e8a7e; } .a-access { --c: #0b5cad; } .a-data { --c: #5a3fb8; }
.a-nlp { --c: #c2410c; } .a-geo { --c: #15803d; } .a-health { --c: #be185d; } .a-vision { --c: #0369a1; }
.a-sports { --c: #4d7c0f; } .a-sys { --c: #334155; } .a-ml { --c: #7c3aed; }
.tab.empty-tab { opacity: .45; }
.type-chip.soon { background: #fff7e6; color: #b45309; border: 1px dashed #f0c27a; }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow-lg);
  transition: all .25s; z-index: 120;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* journey */
.journey { grid-template-columns: 1.15fr 1fr; align-items: start; }
.journey-side { display: flex; flex-direction: column; gap: 28px; }
.tl .t-note { font-size: 13.5px; margin-top: 2px; }

/* teaching */
.philosophy {
  margin: 0 0 24px; padding: 26px 30px; display: flex; gap: 18px; align-items: flex-start;
  background: linear-gradient(120deg, #f2f8ff, #f1fbf8);
}
.philosophy i { font-size: 26px; color: var(--brand); opacity: .5; }
.philosophy p { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.4; color: var(--ink); }
.teach-grid { align-items: start; }
.teach-side { display: flex; flex-direction: column; gap: 20px; }
.certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.cert { display: flex; gap: 14px; align-items: center; padding: 18px 20px; }
.cert > i {
  width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--amber-soft); color: var(--amber); font-size: 17px;
}
.cert b { display: block; color: var(--ink); font-size: 14.5px; line-height: 1.35; }
.cert span { font-size: 12.5px; color: var(--muted); }

/* certifications */
.cert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cert-list li {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg);
  transition: border-color .15s, background .15s;
}
.cert-list li:hover { background: #fff; border-color: #c9d6e8; }
.cert-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 16px; }
.c-a { background: linear-gradient(135deg, #7a1f3d, #b8456b); }
.c-b { background: linear-gradient(135deg, #0b5cad, #3b8be0); }
.c-c { background: linear-gradient(135deg, #0e8a7e, #35b9a5); }
.c-d { background: linear-gradient(135deg, #c07a12, #e6a63c); }
.cert-list b { display: block; color: var(--ink); font-size: 14px; line-height: 1.3; }
.cert-list div span { font-size: 12.5px; color: var(--muted); }
.cert-yr { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: #fff; border: 1px solid var(--line); padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.cert-yr.live { color: var(--brand-2); border-color: #bfe8e0; background: var(--teal-soft); }

/* skills */
.skills-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.skill-card { padding: 20px; overflow: hidden; border-top: 3px solid var(--c); transition: transform .2s, box-shadow .2s; }
.skill-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.skill-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.skill-head span {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 17px;
  color: #fff; background: var(--c); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 30%, transparent);
}
.skill-head b { color: var(--ink); font-size: 15px; line-height: 1.3; white-space: nowrap; }
.skill-items { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-items span {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  padding: 6px 11px; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); transition: background .15s, color .15s;
}
.skill-items span:hover { background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--ink); }
.skill-items i { width: 16px; text-align: center; color: var(--c); }

/* service */
.service-grid { align-items: start; grid-template-columns: 1.4fr 1fr; }
.svc-main, .svc-side { display: flex; flex-direction: column; gap: 24px; }
.svc-sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 6px 0 10px; }
.svc-sub + .chips { margin-bottom: 18px; }
.chip small { color: var(--muted); font-weight: 500; }
.wos {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 18px; border-radius: 12px;
  background: linear-gradient(120deg, #f3f0fe, #eef5fd); border: 1px solid #ddd5fb; color: var(--ink);
}
.wos:hover { text-decoration: none; border-color: #5a3fb8; }
.wos > i:first-child { font-size: 22px; color: #5a3fb8; }
.wos span { flex: 1; }
.wos b { display: block; font-size: 14px; }
.wos small { color: var(--muted); font-size: 12px; }
.wos > i:last-child { color: #5a3fb8; font-size: 13px; }
.rv-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; }
.rv-list li { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr 26px; align-items: center; gap: 10px; font-size: 13px; }
.rv-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-bar { height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.rv-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #5a3fb8, var(--brand)); transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.in .rv-bar i { transform: scaleX(1); }
.rv-list b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.chip.hot { background: var(--brand-soft); border-color: #c4dbf3; color: var(--brand); }
.svc-list.compact li { padding: 7px 0; font-size: 13.5px; }
.grants { list-style: none; margin: 0; padding: 0; }
.grants li { padding: 10px 0 10px 18px; border-top: 1px dashed var(--line); font-size: 14px; position: relative; }
.grants li:first-child { border-top: 0; }
.grants li::before { content: ""; position: absolute; left: 0; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.grants b { color: var(--ink); }
.grants span { display: block; font-size: 12.5px; color: var(--muted); }

/* contact */
.sec-kicker.light { color: #8ff0dc; }
.contact-copy { position: relative; z-index: 1; }

/* command palette */
.palette {
  position: fixed; inset: 0; z-index: 200; background: rgba(15, 27, 45, .35); backdrop-filter: blur(4px);
  display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px;
}
.palette[hidden] { display: none; }
.palette-box {
  width: min(640px, 100%); background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(15, 27, 45, .3); animation: pop .18s ease;
}
@keyframes pop { from { transform: translateY(-8px) scale(.98); } }
.palette-input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--muted); }
.palette-input input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--ink); min-width: 0; }
.palette-results { list-style: none; margin: 0; padding: 8px; max-height: 56vh; overflow: auto; }
.palette-results li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.palette-results li > i {
  width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: var(--bg); color: var(--brand); font-size: 13px;
}
.palette-results li span { flex: 1; min-width: 0; }
.palette-results li b, .palette-results li small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-results li b { color: var(--ink); font-weight: 600; font-size: 14px; }
.palette-results li small { color: var(--muted); font-size: 12px; }
.palette-results li kbd { opacity: 0; }
.palette-results li.sel { background: var(--brand-soft); }
.palette-results li.sel kbd { opacity: 1; }
.palette-results li.none { color: var(--muted); cursor: default; justify-content: center; }

/* responsive */
@media (max-width: 1140px) {
  .kbd-btn span, .kbd-btn kbd { display: none; }
  .kbd-btn { width: 40px; height: 40px; justify-content: center; padding: 0; }
  .nav-links a { padding: 8px 10px; }
  .nav-cta { margin-left: 4px; }
}
@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-areas: "erc erc" "about about" "gw se" "fund world" "cost cost"; }
  .ws { grid-template-columns: 1fr; }
  .ws .art { aspect-ratio: 5 / 2; min-height: 0; border-radius: 13px 13px 0 0; }
  .themes, .projects { grid-template-columns: 1fr 1fr; }
  .skills-grid { grid-template-columns: 1fr 1fr; }
  .teach-side { grid-column: span 2; }
}
@media (max-width: 860px) {
  .kbd-btn span, .kbd-btn kbd { display: none; }
  .kbd-btn { width: 40px; height: 40px; justify-content: center; padding: 0; }
  .orbit { inset: -22px; }
  .orbit span { width: 36px; height: 36px; margin: -18px; font-size: 14px; }
  .journey, .service-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "erc" "about" "gw" "se" "fund" "world" "cost"; }
  .themes, .projects { grid-template-columns: 1fr; }
  .teach-side { grid-column: auto; }
  .world { grid-template-columns: 1fr 1fr; }
  .skills-grid { grid-template-columns: 1fr; }
  .cert-list li { grid-template-columns: 40px 1fr; }
  .cert-yr { grid-column: 2; justify-self: start; }
  .areas { display: flex; flex-wrap: wrap; gap: 6px; }
  .area { flex: none; gap: 7px; padding: 6px 10px 6px 6px; border-radius: 99px; font-size: 13px; box-shadow: none; }
  .area:hover { transform: none; }
  .area-ic { width: 24px; height: 24px; border-radius: 50%; font-size: 11px; }
  .area-txt { flex: none; }
  .area-n { padding: 0 7px; font-size: 11.5px; }
  .pub { grid-template-columns: 1fr; }
  .pub .thumb { aspect-ratio: 3 / 1; }
  .philosophy { padding: 20px; }
  .philosophy p { font-size: 20px; }
  .orbit { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow, .orbit, .orbit span i, .float-card { animation: none; }
  .bar .stack { transform: none; transition: none; }
}

/* news: one update per line */
.news-list { display: flex !important; flex-direction: column; gap: 0 !important; padding: 6px 0; overflow: hidden; }
.news-list .news {
  display: grid; grid-template-columns: 92px 112px 1fr; align-items: center; gap: 14px;
  padding: 13px 22px; border: 0; border-radius: 0; box-shadow: none; background: transparent;
  border-top: 1px solid var(--line);
}
.news-list .news:first-child { border-top: 0; }
.news-list .news:hover { background: var(--bg); }
.news-list .news::after { top: 10px; bottom: 10px; border-radius: 3px; }
.news-list .news .when { display: contents; }
.news-list .news .when-d { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.news-list .news .badge { justify-self: start; }
.news-list .news h3 { font-size: 14.5px; font-weight: 500; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 600px) {
  .news-list .news { grid-template-columns: auto 1fr; gap: 6px 10px; padding: 12px 16px; }
  .news-list .news h3 { grid-column: 1 / -1; }
}

/* talks timeline */
.talks { list-style: none; margin: 0 0 6px; padding: 0; position: relative; }
.talks::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.talks li { position: relative; display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; padding: 8px 0; }
.tk-ic {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; color: #fff; background: var(--tk); box-shadow: 0 0 0 4px var(--surface);
}
.tk-talk { --tk: #0b5cad; } .tk-demo { --tk: #0e8a7e; } .tk-inv { --tk: #c07a12; } .tk-ws { --tk: #5a3fb8; }
.talks .tk-kind { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tk); }
.talks b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
.talks small { color: var(--muted); font-size: 12.5px; }
.talks em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); padding: 2px 8px; border-radius: 99px; white-space: nowrap; margin-top: 4px; }
.vol-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vol-chips span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 6px 10px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); }
.vol-chips i { color: #be185d; }
.vol-chips em { font-style: normal; color: var(--muted); font-weight: 500; }

/* research at scale */
.evidence { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ev { display: flex; flex-direction: column; gap: 4px; padding: 20px; color: var(--ink-2); border-top: 3px solid var(--c); transition: transform .2s, box-shadow .2s; }
a.ev:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ev-num { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--c); }
.ev b { color: var(--ink); font-size: 14.5px; line-height: 1.35; }
.ev-src { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 4px; }
a.ev .ev-src::after { content: " ↗"; color: var(--c); }

/* code, tools & datasets */
.repos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.repo { padding: 18px; display: flex; flex-direction: column; gap: 6px; transition: transform .2s, box-shadow .2s; }
.repo:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.rp-tool { --c: #0e8a7e; } .rp-data { --c: #5a3fb8; } .rp-code { --c: #0b5cad; }
.repo-top { display: flex; align-items: center; gap: 10px; }
.repo-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--c); font-size: 14px; }
.repo-kind { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c); }
.repo h4 { margin: 4px 0 0; color: var(--ink); font-size: 15.5px; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.repo p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; flex: 1; }
.repo-links { display: flex; gap: 8px; margin-top: 6px; }

/* career drawn to scale */
.gantt { padding: 24px; margin-bottom: 28px; }
.gantt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gantt-head h3 { font-size: 16px; display: flex; align-items: center; gap: 10px; }
.gantt-head h3 i { color: var(--brand); }
.gt-legend { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.gt-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.gt-r, .gt-r .gt-bar { background: var(--brand); }
.gt-i, .gt-i .gt-bar { background: var(--amber); }
.gt-n, .gt-n .gt-bar { background: var(--brand-2); }
.gt-rows { list-style: none; margin: 0; padding: 0; }
.gt-rows li, .gt-axis { display: grid; grid-template-columns: 250px 1fr 150px; gap: 16px; align-items: center; }
.gt-rows li { padding: 7px 0; border-top: 1px dashed var(--line); }
.gt-rows li:first-child { border-top: 0; }
.gt-lbl b { display: block; color: var(--ink); font-size: 13.5px; line-height: 1.3; }
.gt-lbl span { font-size: 12px; color: var(--muted); }
.gt-track { position: relative; height: 12px; border-radius: 99px; background: var(--bg); }
.gt-rows li .gt-bar { position: absolute; top: 0; bottom: 0; border-radius: 99px; background-color: inherit; transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.gt-rows li.gt-r .gt-bar { background: var(--brand); } .gt-rows li.gt-i .gt-bar { background: var(--amber); }
.gt-rows li.gt-n .gt-bar { background: linear-gradient(90deg, var(--brand-2), color-mix(in srgb, var(--brand-2) 40%, transparent)); }
.gt-rows li { background: none; }
.in .gt-bar { transform: scaleX(1) !important; }
.gt-rows em { font-style: normal; font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.gt-ticks { position: relative; height: 18px; border-top: 1px solid var(--line); margin-top: 6px; }
.gt-ticks span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 11px; color: var(--muted); }
.gt-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }


@media (max-width: 1020px) {
  .evidence { grid-template-columns: 1fr 1fr; }
  .repos { grid-template-columns: 1fr 1fr; }
  .gt-rows li, .gt-axis { grid-template-columns: 190px 1fr; }
  .gt-rows em, .gt-axis > div:last-child { display: none; }
}
@media (max-width: 600px) {
  .evidence, .repos { grid-template-columns: 1fr; }
  .gt-rows li { grid-template-columns: 1fr; gap: 6px; }
  .gt-axis { grid-template-columns: 1fr; } .gt-axis > div:first-child { display: none; }
  .gantt { padding: 18px; }
}
[data-motion="reduced"] .gt-bar { transform: none !important; }

/* show / hide panels */
.more-toggle { display: flex; justify-content: center; margin: 36px 0 18px; }
.more-toggle.top { justify-content: flex-start; margin: 0 0 18px; }
.toggle .t-count { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--bg); padding: 1px 8px; border-radius: 99px; }
.toggle .chev { font-size: 12px; transition: transform .2s; }
.toggle[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
.toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.repos[hidden], .gantt[hidden] { display: none; }
.repos:not([hidden]), .gantt:not([hidden]) { animation: pop .25s ease; }

/* teaching rows on small screens: term under the course */
@media (max-width: 600px) {
  .courses li { flex-direction: column; gap: 2px; padding: 9px 18px; }
  .courses .term { white-space: normal; }
  .courses .code { white-space: nowrap; }
}

/* header logo: data-path S */
.brand svg.brand-mark { width: 38px; height: 38px; background: none; padding: 0; border-radius: 0; flex: none; transition: transform .3s ease; }
.brand:hover svg.brand-mark { transform: rotate(-6deg) scale(1.05); }
[data-theme="dark"] .brand svg.brand-mark rect { fill: #1d2a3d; }

/* ERC STEMMA */
svg.eu { width: 30px; height: 20px; flex: none; border-radius: 3px; }
.erc-badge {
  display: inline-flex; align-items: center; gap: 10px; margin: -6px 0 20px; padding: 7px 14px 7px 8px; border-radius: 99px;
  background: var(--surface); border: 1px solid #c9d4ee; color: var(--ink-2); font-size: 14px; box-shadow: var(--shadow);
}
.erc-badge b { color: #003399; font-weight: 700; }
.erc-badge i { font-size: 11px; color: #003399; transition: transform .2s; }
.erc-badge:hover { text-decoration: none; border-color: #003399; }
.erc-badge:hover i { transform: translateX(3px); }
.t-erc { grid-area: erc; padding: 0; display: grid; grid-template-columns: 1fr 1.35fr; overflow: hidden;
  border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, #003399, #ffcc00 60%, #c9d4ee) border-box; }
.erc-art { background: radial-gradient(circle at 40% 45%, #e9eefb, #f6f8fd 70%); min-height: 240px; position: relative; }
.erc-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.erc-body { padding: 26px 28px; display: flex; flex-direction: column; gap: 8px; }
.erc-top { display: flex; align-items: center; gap: 10px; }
.erc-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #003399; }
.t-erc h3 { font-family: var(--serif); font-weight: 400; font-size: 40px; letter-spacing: .02em; margin: 2px 0 0; color: var(--ink); }
.erc-sub { font-size: 15px !important; font-style: italic; color: var(--ink-2); margin: -4px 0 4px !important; }
.erc-facts { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.erc-facts li { padding: 8px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); min-width: 120px; }
.erc-facts b { display: block; color: var(--ink); font-size: 15px; }
.erc-facts span { font-size: 12px; color: var(--muted); }
.erc-links { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.t-erc .ws-link { --ac: #003399; --ac-soft: #e9eefb; }
[data-theme="dark"] .erc-badge, [data-theme="dark"] .erc-badge b, [data-theme="dark"] .erc-badge i, [data-theme="dark"] .erc-kicker { color: #9db7ff; }
[data-theme="dark"] .erc-badge { border-color: #2a3f73; }
[data-theme="dark"] .erc-art { background: radial-gradient(circle at 40% 45%, #172447, #0e1726 70%); }
[data-theme="dark"] .t-erc { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, #3d63c9, #c9a400 60%, #2a3a52) border-box; }
@media (max-width: 860px) { .t-erc { grid-template-columns: 1fr; } .erc-art { min-height: 170px; } }
@media (max-width: 600px) { .erc-body { padding: 20px; } .t-erc h3 { font-size: 32px; } .erc-badge { font-size: 13px; } }

/* projects under one role */
.t-proj { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.tl .t-proj li { display: block; gap: 0; position: relative; padding: 8px 10px 8px 12px; border-radius: 9px; background: var(--bg); border-left: 3px solid var(--brand-2); font-size: 13.5px; line-height: 1.45; }
.t-proj li:first-child { border-left-color: #003399; }
.t-proj b { color: var(--ink); }
.t-proj-when { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
[data-theme="dark"] .t-proj li:first-child { border-left-color: #9db7ff; }

/* teaching: Galway + LUMS on the left, FAST + NUST on the right; one column on phones */
.teach-grid { grid-template-columns: 1fr 1fr !important; }
.teach-grid > .teach-side { grid-column: auto !important; }
@media (max-width: 600px) { .teach-grid { grid-template-columns: 1fr !important; } }