:root {
  --void:#080B15; --deep:#0F1626; --surface:#141E35; --edge:#24314F;
  --glow:#7BEFD0; --glow-dim:rgba(123,239,208,0.42); --starlight:#F4C97B;
  --text:#E8ECF4; --muted:#8B96AD; --maxw:1120px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--void); color:var(--text);
  font-family:"Hanken Grotesk",system-ui,sans-serif; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

#progress { position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--glow),var(--starlight));
  box-shadow:0 0 10px var(--glow); z-index:100; transition:width .1s linear; }

.sky { position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1200px 780px at 80% 6%, rgba(123,239,208,0.11), transparent 60%),
    radial-gradient(1000px 660px at 10% 92%, rgba(244,201,123,0.08), transparent 60%),
    radial-gradient(820px 560px at 48% 42%, rgba(64,90,150,0.20), transparent 66%),
    var(--void); }
.stars-wrap { position:fixed; inset:-10%; z-index:-2; will-change:transform; }
.star-layer { position:absolute; inset:0; }
.star-layer.drift { animation:drift 140s linear infinite; }
@keyframes drift { from{transform:translateY(0);} to{transform:translateY(-40px);} }
.vignette { position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(4,6,12,0.55) 100%); }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* nav */
nav { position:sticky; top:0; z-index:50; backdrop-filter:blur(16px);
  background:rgba(8,11,21,0.62); border-bottom:1px solid rgba(36,49,79,0.7); }
.nav-inner { display:flex; align-items:center; justify-content:space-between;
  height:66px; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.brand { font-family:"Fraunces",serif; font-size:1.15rem; font-weight:600;
  color:var(--text); text-decoration:none; display:flex; align-items:center; gap:11px; }
.brand .dot { width:9px; height:9px; border-radius:50%; background:var(--glow);
  box-shadow:0 0 12px var(--glow); animation:pulse 3.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 10px var(--glow);} 50%{box-shadow:0 0 20px var(--glow);} }
.nav-links { display:flex; gap:28px; }
.nav-links a { position:relative; color:var(--muted); text-decoration:none;
  font-size:0.86rem; letter-spacing:0.2px; transition:color .2s; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--glow); transition:width .25s ease; }
.nav-links a:hover { color:var(--text); }
.nav-links a:hover::after { width:100%; }

/* hero */
header.hero { position:relative; padding:98px 0 104px; }
.hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
.eyebrow { font-family:"Space Mono",monospace; font-size:0.72rem; letter-spacing:3px;
  text-transform:uppercase; color:var(--glow); display:inline-flex; align-items:center; gap:10px; margin-bottom:26px; }
.eyebrow::before { content:""; width:26px; height:1px; background:var(--glow); opacity:.6; }
h1.title { font-family:"Fraunces",serif; font-weight:500; font-size:clamp(3rem,7vw,5.25rem);
  line-height:1.01; letter-spacing:-1.2px; margin-bottom:24px; }
h1.title em { font-style:italic; font-weight:500; color:var(--starlight); text-shadow:0 0 26px rgba(244,201,123,0.35); }
.lede { font-size:1.18rem; color:#C6CEDF; max-width:40ch; margin-bottom:38px; }
.cta-row { display:flex; gap:14px; flex-wrap:wrap; }
.btn { font-family:"Hanken Grotesk",sans-serif; font-size:0.92rem; font-weight:600;
  padding:13px 24px; border-radius:100px; text-decoration:none; cursor:pointer;
  transition:transform .15s,box-shadow .25s,background .2s,border-color .2s,color .2s; display:inline-block; }
.btn-primary { background:var(--glow); color:#06231C; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 34px rgba(123,239,208,0.28); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--edge); }
.btn-ghost:hover { border-color:var(--glow); color:var(--glow); }

/* constellation */
.constellation-holder { position:relative; }
.coord { position:absolute; bottom:-6px; right:4px; font-family:"Space Mono",monospace;
  font-size:0.64rem; letter-spacing:2px; color:var(--muted); opacity:.7; }
.constellation { width:100%; height:auto; overflow:visible; }
.phylo-line { stroke:var(--glow-dim); stroke-width:1.4; fill:none;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:draw 1.6s ease forwards; }
@keyframes draw { to{stroke-dashoffset:0;} }
.phylo-node { fill:var(--glow); filter:drop-shadow(0 0 5px var(--glow));
  opacity:0; transform-box:fill-box; transform-origin:center;
  animation:ignite .5s ease forwards, twinkle 4.2s ease-in-out infinite; }
.phylo-node.tip { fill:var(--starlight); filter:drop-shadow(0 0 6px var(--starlight)); }
@keyframes ignite { from{opacity:0;} to{opacity:1;} }
@keyframes twinkle { 0%,100%{opacity:1;} 50%{opacity:.5;} }
.phylo-label { font-family:"Space Mono",monospace; font-size:9.5px; letter-spacing:1.2px;
  fill:var(--muted); text-transform:uppercase; opacity:0; animation:ignite .6s ease 1.4s forwards; }

/* section system */
section { padding:84px 0; position:relative; }
.divider { position:relative; height:1px; background:rgba(36,49,79,0.55); max-width:var(--maxw); margin:0 auto; }
.divider::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:6px; height:6px; border-radius:50%; background:var(--glow); box-shadow:0 0 12px var(--glow); }
.sec-eyebrow { font-family:"Space Mono",monospace; font-size:0.72rem; letter-spacing:3px;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.sec-eyebrow span { color:var(--glow); }
h2 { font-family:"Fraunces",serif; font-weight:500; font-size:clamp(1.95rem,4vw,2.8rem);
  line-height:1.08; letter-spacing:-0.6px; margin-bottom:22px; max-width:24ch; }
.saga-body { max-width:64ch; color:#C6CEDF; font-size:1.09rem; }
.saga-body p + p { margin-top:18px; }
.saga-body em { color:var(--starlight); font-style:italic; }
.saga-body strong { color:var(--text); font-weight:600; }

/* research cards */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.card { position:relative; overflow:hidden; background:linear-gradient(180deg,var(--surface),var(--deep));
  border:1px solid var(--edge); border-radius:16px; padding:28px 26px 30px;
  transition:transform .22s,border-color .22s,box-shadow .22s; }
.card::before { content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--glow),transparent); opacity:0; transition:opacity .25s; }
.card:hover { transform:translateY(-5px); border-color:rgba(123,239,208,0.5); box-shadow:0 18px 40px rgba(4,10,20,0.5); }
.card:hover::before { opacity:1; }
.card-tag { font-family:"Space Mono",monospace; font-size:0.7rem; letter-spacing:2px;
  text-transform:uppercase; color:var(--glow); display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.card-tag::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--glow); box-shadow:0 0 8px var(--glow); }
.card h3 { font-family:"Fraunces",serif; font-weight:500; font-size:1.32rem; margin-bottom:12px; line-height:1.16; }
.card p { color:var(--muted); font-size:0.95rem; }

/* publications */
.pub-list { margin-top:40px; border-top:1px solid rgba(36,49,79,0.55); }
.pub { display:grid; grid-template-columns:88px 1fr auto; gap:20px; align-items:baseline;
  padding:22px 4px; border-bottom:1px solid rgba(36,49,79,0.45);
  transition:background .2s; text-decoration:none; color:inherit; }
.pub:hover { background:rgba(20,30,53,0.4); }
.pub .yr { font-family:"Space Mono",monospace; font-size:0.82rem; color:var(--glow); letter-spacing:1px; }
.pub .body .t { font-family:"Fraunces",serif; font-size:1.12rem; line-height:1.3; margin-bottom:6px; color:var(--text); }
.pub .body .meta { font-size:0.9rem; color:var(--muted); }
.pub .body .meta b { color:#C6CEDF; font-weight:600; }
.pub .venue { font-style:italic; color:var(--starlight); }
.pub .arrow { font-family:"Space Mono",monospace; color:var(--muted); transition:color .2s,transform .2s; }
.pub:hover .arrow { color:var(--glow); transform:translateX(3px); }
.pub.review .yr { color:var(--muted); }
.sub-label { font-family:"Space Mono",monospace; font-size:0.72rem; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted); margin:34px 0 4px; }

/* timeline */
.timeline { margin-top:42px; position:relative; padding-left:26px; }
.timeline::before { content:""; position:absolute; left:4px; top:6px; bottom:6px; width:1px; background:var(--edge); }
.tl-item { position:relative; padding:0 0 34px 22px; }
.tl-item::before { content:""; position:absolute; left:-22px; top:6px; width:9px; height:9px; border-radius:50%;
  background:var(--void); border:1.5px solid var(--glow); box-shadow:0 0 10px rgba(123,239,208,0.5); }
.tl-date { font-family:"Space Mono",monospace; font-size:0.74rem; letter-spacing:1px; color:var(--glow); margin-bottom:5px; }
.tl-role { font-family:"Fraunces",serif; font-size:1.18rem; color:var(--text); }
.tl-org { color:var(--muted); font-size:0.96rem; margin-top:2px; }
.tl-note { color:#AEB7C9; font-size:0.94rem; margin-top:8px; max-width:60ch; }

/* two-col meta blocks (education + awards) */
.meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:42px; }
.meta-card { background:linear-gradient(180deg,var(--surface),var(--deep)); border:1px solid var(--edge);
  border-radius:16px; padding:26px 26px 28px; }
.meta-card h4 { font-family:"Space Mono",monospace; font-size:0.72rem; letter-spacing:2px;
  text-transform:uppercase; color:var(--glow); margin-bottom:18px; }
.meta-row { padding:12px 0; border-top:1px solid rgba(36,49,79,0.4); }
.meta-row:first-of-type { border-top:none; }
.meta-row .mr-t { font-family:"Fraunces",serif; font-size:1.05rem; color:var(--text); }
.meta-row .mr-s { color:var(--muted); font-size:0.9rem; margin-top:2px; }
.meta-row .mr-yr { font-family:"Space Mono",monospace; font-size:0.72rem; color:var(--starlight); float:right; }

/* skills chips */
.chips { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.chip { font-family:"Space Mono",monospace; font-size:0.72rem; letter-spacing:0.5px;
  color:#AEB7C9; border:1px solid var(--edge); border-radius:100px; padding:7px 13px; }

/* contact / footer */
footer { padding:84px 0 62px; text-align:center; }
.signal { font-family:"Space Mono",monospace; font-size:0.78rem; letter-spacing:2px; color:var(--muted); margin-bottom:10px; }
.signal b { color:var(--glow); font-weight:400; }
.foot-name { font-family:"Fraunces",serif; font-size:1.55rem; margin:20px 0 8px; color:var(--text); }
.foot-sub { color:var(--muted); font-size:0.96rem; margin-bottom:24px; }
.foot-links { display:inline-flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.foot-links a { color:var(--muted); text-decoration:none; font-size:0.9rem;
  border-bottom:1px solid transparent; transition:color .2s,border-color .2s; }
.foot-links a:hover { color:var(--glow); border-color:var(--glow); }
.copyright { margin-top:34px; font-size:0.78rem; color:#5A647C; }

@media (max-width:860px) {
  .nav-links { display:none; }
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .constellation-holder { order:-1; max-width:380px; }
  .lede { max-width:none; }
  .cards { grid-template-columns:1fr; }
  .meta-grid { grid-template-columns:1fr; }
  .pub { grid-template-columns:56px 1fr; }
  .pub .arrow { display:none; }
  header.hero { padding:60px 0 72px; }
  section { padding:60px 0; }
}

a:focus-visible, .btn:focus-visible { outline:2px solid var(--starlight); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce) {
  *, .phylo-line, .phylo-node, .phylo-label { animation:none !important; scroll-behavior:auto; }
  .phylo-line { stroke-dashoffset:0 !important; }
  .phylo-node, .phylo-label { opacity:1 !important; }
}
.fade { opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.fade.in { opacity:1; transform:none; }

/* ─────────── blog: writing list (Option D — grid + covers) ─────────── */
.page-head { padding:110px 0 8px; }
.post-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:8px 0 90px; }

.cell { background:linear-gradient(180deg,var(--surface),var(--deep));
  border:1px solid var(--edge); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .22s, border-color .22s, box-shadow .22s; }
.cell:hover { transform:translateY(-4px); border-color:rgba(123,239,208,0.5); box-shadow:0 16px 36px rgba(4,10,20,0.5); }
/* lock every child onto the palette (kills default blue/visited link colour) */
.cell, .cell:visited, .cell * { color:inherit; text-decoration:none; }

/* cover image */
.cover { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--deep); }
.cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.cell:hover .cover img { transform:scale(1.05); }
.cover:not(.noimg)::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,11,21,0) 55%,rgba(15,22,38,0.85)); }

/* generated fallback cover (no image) */
.cover.noimg { display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 140% at 30% 20%,rgba(123,239,208,0.18),transparent 60%),
             radial-gradient(120% 140% at 80% 90%,rgba(244,201,123,0.12),transparent 60%),
             linear-gradient(160deg,var(--surface),var(--deep)); }
.cover.noimg .dotgrid { position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.10) 1px,transparent 1px); background-size:18px 18px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,black,transparent 75%);
  mask-image:radial-gradient(circle at 50% 50%,black,transparent 75%); }
.cover.noimg .mark { font-family:"Fraunces",serif; font-size:2.4rem; color:rgba(232,236,244,0.22); letter-spacing:1px; position:relative; }

.cell .body { padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.cell .p-date { font-family:"Space Mono",monospace; font-size:0.72rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--glow); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.cell .p-date::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--glow); box-shadow:0 0 8px var(--glow); }
.cell .p-title { font-family:"Fraunces",serif; font-weight:500; font-size:1.3rem; line-height:1.18; margin-bottom:10px; transition:color .2s; }
.cell:hover .p-title { color:var(--glow); }
.cell .p-summary { color:var(--muted); font-size:0.95rem; line-height:1.55; margin-bottom:16px; flex:1; }
.cell .p-tags { display:flex; flex-wrap:wrap; gap:7px; }

@media (max-width:760px){ .post-grid { grid-template-columns:1fr; } }

/* ─────────── blog: single post ─────────── */
.article { max-width:720px; margin:0 auto; padding:104px 0 70px; }
.back-link { font-family:"Space Mono",monospace; font-size:0.78rem; letter-spacing:1px;
  color:var(--muted); text-decoration:none; transition:color .2s; }
.back-link:hover { color:var(--glow); }
.article .a-date { font-family:"Space Mono",monospace; font-size:0.76rem; letter-spacing:1px;
  color:var(--glow); margin:26px 0 12px; }
.article .a-title { font-family:"Fraunces",serif; font-weight:500; font-size:clamp(2.2rem,5vw,3.1rem);
  line-height:1.08; letter-spacing:-0.6px; color:var(--text); margin-bottom:18px; }
.article .a-summary { font-size:1.18rem; color:#C6CEDF; font-style:italic;
  border-left:2px solid var(--glow-dim); padding-left:18px; margin-bottom:8px; }

.article-body { font-size:1.12rem; line-height:1.85; color:#C6CEDF; margin-top:34px; }
.article-body p { margin:0 0 22px; }
.article-body h2 { font-family:"Fraunces",serif; font-weight:500; font-size:1.6rem;
  color:var(--text); line-height:1.2; margin:44px 0 14px; letter-spacing:-0.3px; }
.article-body h3 { font-family:"Fraunces",serif; font-weight:500; font-size:1.3rem;
  color:var(--text); margin:34px 0 12px; }
.article-body a { color:var(--glow); text-decoration:none; border-bottom:1px solid var(--glow-dim); }
.article-body a:hover { border-color:var(--glow); }
.article-body em { color:var(--starlight); font-style:italic; }
.article-body strong { color:var(--text); font-weight:600; }
.article-body ul, .article-body ol { margin:0 0 22px 1.2em; }
.article-body li { margin-bottom:8px; }
.article-body blockquote { margin:26px 0; padding:6px 0 6px 22px; border-left:2px solid var(--glow-dim);
  color:#AEB7C9; font-style:italic; }
.article-body img { max-width:100%; height:auto; border-radius:12px; margin:26px 0; }
.article-body hr { border:none; border-top:1px solid rgba(36,49,79,0.6); margin:38px 0; }

.a-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:38px; }
.article-foot { margin-top:44px; padding-top:26px; border-top:1px solid rgba(36,49,79,0.55); }

@media (max-width:860px){
  .article { padding:84px 0 56px; }
  .post-item .p-title { font-size:1.35rem; }
}