/* Personal website, design "Helix". Tokens, fonts and reset come from base.css. */

body { font-family: var(--sans); }

/* reveal only hides content when JavaScript is running */
html:not(.js) .reveal { opacity: 1; transform: none; }
html:not(.js) .lang { display: none; }
html { scroll-padding-top: 76px; }

/* ---------- background: grid + glow + helix canvas ---------- */
.grid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(160, 220, 230, .045) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(160, 220, 230, .045) 1px, transparent 1px) 0 0 / 48px 100%;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 35%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 20%, #000 35%, transparent 100%); }
.glow { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 78% 30%, rgba(34, 211, 238, .13), transparent 70%),
    radial-gradient(50vw 50vh at 30% 90%, rgba(52, 232, 158, .09), transparent 70%); }
#helix { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .site-header, .site-footer { position: relative; z-index: 1; }

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 48px); }

/* ---------- header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center;
  padding: 14px clamp(16px, 4vw, 48px); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(5, 9, 13, .55); border-bottom: 1px solid var(--line); }
.mark { font: 600 15px var(--display); letter-spacing: .02em; text-decoration: none; }
.mark b { color: var(--cyan); font-weight: 600; }
.site-header nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 26px); }
.site-header nav a { font-size: 14px; color: var(--muted); text-decoration: none; transition: color .2s; }
.site-header nav a:hover { color: var(--text); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(24px, 5vw, 64px); padding-top: 84px; padding-bottom: 60px; }
.role { font: 13px var(--mono); color: var(--muted); letter-spacing: .04em; margin-bottom: 18px; }
.role b { color: var(--green); font-weight: 500; }
h1 { font: 600 clamp(52px, 8.6vw, 112px)/0.94 var(--sans); letter-spacing: -0.05em; }
h1 span { display: inline-block; }
h1 .sc { font-family: var(--mono); font-weight: 500; letter-spacing: -0.08em; min-width: .3em; }
h1 .sc.A { color: var(--A); } h1 .sc.C { color: var(--C); } h1 .sc.G { color: var(--G); } h1 .sc.T { color: var(--T); }
.tagline { margin-top: 20px; font: 600 clamp(24px, 3.4vw, 42px)/1.08 var(--sans); letter-spacing: -0.035em; }
.grad { background: linear-gradient(100deg, var(--cyan), var(--green) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin-top: 20px; font-size: clamp(17px, 1.8vw, 20px); color: #b9cbd0; max-width: 30em; line-height: 1.5; letter-spacing: -0.01em; }
.affil { margin-top: 16px; font: 13px/1.5 var(--mono); color: var(--muted); }
.affil a { color: var(--text); text-decoration-color: rgba(34, 211, 238, .5); text-underline-offset: 4px; }
.affil a:hover { color: var(--cyan); }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(11, 19, 24, .78);
  text-decoration: none; font-size: 15px; font-weight: 500; transition: border-color .25s, box-shadow .25s, transform .25s; }
.btn:hover { border-color: rgba(34, 211, 238, .6); box-shadow: 0 0 28px rgba(34, 211, 238, .22); transform: translateY(-2px); }
.btn.primary { background: linear-gradient(100deg, var(--cyan), var(--green)); color: #03191c; border-color: transparent; }

.portrait { justify-self: center; margin: 0; position: relative; width: clamp(220px, 27vw, 330px); aspect-ratio: 1; }
.portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(160, 220, 230, .3), 0 0 0 12px rgba(34, 211, 238, .07), 0 0 90px rgba(34, 211, 238, .28); }
.portrait::after { content: ""; position: absolute; inset: -26px; border-radius: 50%; border: 1px dashed rgba(52, 232, 158, .28); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font: 11px var(--mono); color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.hint::after { content: ""; display: block; width: 1px; height: 26px; margin: 8px auto 0; background: linear-gradient(var(--cyan), transparent); animation: drop 1.8s ease-in-out infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- sections ---------- */
section.block { padding-block: clamp(70px, 13vh, 130px); scroll-margin-top: 40px; }
.eyebrow { font: 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
h2 { font: 600 clamp(30px, 4.4vw, 54px)/1.05 var(--sans); letter-spacing: -0.035em; margin-bottom: 36px; }

.card { border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(17, 28, 34, .86), rgba(11, 19, 24, .86)); }

/* cards that reveal on scroll and lift on hover: one transition list, so the reveal fade and its delay survive */
.pub.reveal, .tree a.reveal { transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s), transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; }

/* publications */
.pubs { display: grid; gap: 16px; }
.pub { display: grid; grid-template-columns: 76px 1fr auto; gap: 20px; align-items: center; padding: 24px 26px; text-decoration: none; }
.pub:hover { border-color: rgba(52, 232, 158, .5); transform: translateY(-3px); box-shadow: 0 20px 50px -30px rgba(52, 232, 158, .5); }
.pub .yr { font: 500 22px var(--mono); color: var(--green); }
.pub h3 { font: 600 19px/1.3 var(--sans); letter-spacing: -0.015em; }
.pub p { color: var(--muted); font-size: 14px; margin-top: 6px; }
.pub p b { color: var(--text); font-weight: 500; }
.pub > .icon-slot { color: var(--muted); }
.ph { font: 11px var(--mono); color: var(--amber); border: 1px dashed rgba(251, 191, 36, .5); border-radius: 6px; padding: 2px 7px; margin-left: 8px; vertical-align: middle; white-space: nowrap; }
.pub-empty { display: flex; align-items: center; gap: 22px; padding: 28px 30px; border-style: dashed; }
.pub-empty p { color: #b9cbd0; font-size: 16px; }
.pub-empty p b { color: var(--text); font-weight: 600; }
.pub-empty .dots { display: flex; gap: 7px; flex: none; }
.pub-empty .dots i { width: 9px; height: 9px; border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; }
.pub-empty .dots i:nth-child(1) { background: var(--A); }
.pub-empty .dots i:nth-child(2) { background: var(--C); animation-delay: .2s; }
.pub-empty .dots i:nth-child(3) { background: var(--G); animation-delay: .4s; }
.pub-empty .dots i:nth-child(4) { background: var(--T); animation-delay: .6s; }
@keyframes pulse { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.pubs-more { margin-top: 22px; font-size: 14px; color: var(--muted); }
.pubs-more a { color: var(--cyan); text-underline-offset: 3px; }

/* about: wet lab / dry lab */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo .card { padding: clamp(24px, 3.4vw, 40px); position: relative; overflow: hidden; }
.duo .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--k); box-shadow: 0 0 24px var(--k); }
.duo .tag { font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--k); margin-bottom: 16px; }
.duo h3 { font: 600 clamp(24px, 3vw, 36px)/1.08 var(--sans); letter-spacing: -0.035em; }
.duo h3 em { font-style: normal; color: var(--k); }
.duo p { margin-top: 14px; color: #b9cbd0; font-size: 16px; }
.both { margin-top: 44px; text-align: center; font: 600 clamp(26px, 4vw, 50px)/1.08 var(--sans); letter-spacing: -0.04em; }
.both small { display: block; margin: 16px auto 0; max-width: 32em; font: 400 clamp(15px, 1.6vw, 18px)/1.5 var(--sans); letter-spacing: 0; color: #b9cbd0; }

/* link tree */
.tree { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tree a { display: flex; align-items: center; gap: 16px; padding: 22px 24px; text-decoration: none; }
.tree a:hover { border-color: var(--k); transform: translateY(-3px); box-shadow: 0 20px 50px -30px var(--k); }
.tree .ico { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 21px; color: var(--k); background: rgba(160, 220, 230, .07); }
.tree strong { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tree small { display: block; font: 12px var(--mono); color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.tree .go { margin-left: auto; color: var(--muted); transition: transform .3s, color .3s; }
.tree a:hover .go { transform: translate(3px, -3px); color: var(--text); }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 34px 60px; color: var(--muted); font-size: 13px; background: rgba(5, 9, 13, .6); }
.site-footer .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.site-footer details { margin-top: 16px; max-width: 60em; }
.site-footer summary { cursor: pointer; color: var(--text); width: fit-content; }
.site-footer details p { margin-top: 10px; line-height: 1.6; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .site-header nav a { display: none; }
  .hero { grid-template-columns: 1fr; align-content: center; gap: 26px; padding-top: 96px; }
  .portrait { order: -1; justify-self: start; width: clamp(190px, 56vw, 260px); }
  .portrait::after { inset: -14px; }
  .pub { grid-template-columns: 1fr; gap: 8px; }
  .pub > .icon-slot { display: none; }
  .duo, .tree { grid-template-columns: 1fr; }
  .pub-empty { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .portrait::after { animation: none; } }
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  #helix, .grid-bg, .glow, .hint { display: none; }
  .site-header { position: static; }
}