/* =====================================================================
   Design follows the reference layout in sample.html, typeset with the
   fonts already bundled in fonts.css (no external requests).
   ===================================================================== */

:root{
  --ink:#14212B;
  --ink-soft:#4A5C64;
  --muted:#7E8D92;
  --paper:#F6F7F4;
  --raise:#FFFFFF;
  --line:#D3DAD7;
  --accent:#0E7C86;
  --accent-deep:#0A5A61;
  --accent-soft:rgba(14,124,134,0.10);
  /* one colour per research strand, used on the card spine and method bullets */
  --p1:#0E7C86; --p2:#9C4A18; --p3:#5A3F99;
  --nav-bg:rgba(246,247,244,0.82);
  --todo-bg:#FBF0D8; --todo-ink:#8A5A12; --todo-line:#E6D2A9;
  --maxw:1060px;
  --display:"Public Sans","Segoe UI",sans-serif;
  --body:"Public Sans","Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

html[data-theme="dark"]{
  --ink:#E7ECEA;
  --ink-soft:#AEBAB8;
  --muted:#7F8D8B;
  --paper:#171B1E;
  --raise:#1E262B;
  --line:#2C383F;
  --accent:#2BB3BD;
  --accent-deep:#74D4DB;
  --accent-soft:rgba(43,179,189,0.12);
  --p1:#2BB3BD; --p2:#CF7233; --p3:#9C88E4;
  --nav-bg:rgba(23,27,30,0.82);
  --todo-bg:#33270F; --todo-ink:#E3B45F; --todo-line:#4C3B1B;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .35s ease, color .35s ease;
}
a{color:inherit}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

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

/* ---------- section scaffolding ---------- */
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:12px; margin:0 0 22px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--accent); display:inline-block}
section{padding:92px 0; border-top:1px solid var(--line)}
h2.section-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem,3vw,2.05rem); letter-spacing:-.025em;
  margin:0 0 34px; line-height:1.15;
}

/* ---------- nav ---------- */
nav{position:sticky; top:0; z-index:50; background:var(--nav-bg);
  backdrop-filter:saturate(140%) blur(9px);
  border-bottom:1px solid transparent; transition:border-color .3s ease, background .35s ease}
nav.scrolled{border-bottom-color:var(--line)}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:15px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px}
.nav-brand{font-family:var(--display); font-weight:600; font-size:.98rem;
  letter-spacing:-.01em; text-decoration:none; white-space:nowrap}
.nav-brand span{color:var(--accent)}
.nav-links{display:flex; gap:26px; align-items:center}
.nav-links a{font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-soft); transition:color .2s ease}
.nav-links a:hover{color:var(--accent)}
.theme-toggle{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); background:transparent;
  border:1px solid var(--line); border-radius:2px; padding:6px 10px; cursor:pointer;
  transition:color .2s ease, border-color .2s ease; white-space:nowrap}
.theme-toggle:hover{color:var(--accent); border-color:var(--accent)}
.nav-links a.nav-cta{font-family:var(--mono); font-size:.76rem; letter-spacing:.04em;
  color:#fff; background:var(--ink); padding:8px 15px; border-radius:2px;
  border:1px solid transparent; transition:background .2s ease, color .35s ease}
.nav-links a.nav-cta:hover{background:var(--accent-deep); color:#fff}
html[data-theme="dark"] .nav-links a.nav-cta{background:transparent; color:var(--ink); border-color:var(--line)}
html[data-theme="dark"] .nav-links a.nav-cta:hover{background:var(--accent-deep); color:var(--paper); border-color:var(--accent-deep)}
@media (max-width:1040px){.nav-links{gap:18px}}
@media (max-width:940px){.nav-links a[href="#contact"]:not(#nav-gh){display:none}}
@media (max-width:860px){#nav-gh{display:none}}
@media (max-width:720px){.nav-links .hide-sm{display:none}}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; border-top:none; padding:0}
.hero-inner{max-width:var(--maxw); margin:0 auto; padding:118px 28px 104px; position:relative; z-index:2}
.fieldlines{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none}
.fieldlines use{fill:none}
.fieldlines .line{fill:none; stroke:var(--line); stroke-width:1.15; opacity:.55}
.fieldlines .index{fill:none; stroke:var(--accent); stroke-width:1.7; opacity:.85}
.wave-drift{animation:drift 16s ease-in-out infinite alternate; transform-origin:center}
@keyframes drift{from{transform:translateY(-7px)} to{transform:translateY(7px)}}

.hero-coord{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em;
  color:var(--muted); text-transform:uppercase; margin:0 0 18px}
.availability{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-deep); background:var(--accent-soft);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px; margin:0 0 24px}
.availability .dot{width:8px; height:8px; border-radius:50%; background:#1B9E4B;
  box-shadow:0 0 0 3px rgba(27,158,75,.18); flex:none}
.hero h1{font-family:var(--display); font-weight:700;
  font-size:clamp(2.7rem,7.4vw,5rem); line-height:.98; letter-spacing:-.035em; margin:0 0 20px}
.hero .role{font-family:var(--mono); font-size:clamp(.82rem,1.7vw,.95rem);
  letter-spacing:.02em; color:#3d686b; margin:0 0 30px; max-width:44ch; line-height:1.7}
html[data-theme="dark"] .hero .role{color:var(--accent-deep)}
.hero .pitch{font-size:clamp(1.12rem,2.4vw,1.5rem); line-height:1.42;
  max-width:36ch; color:var(--ink); font-weight:400; margin:0 0 40px}
.hero .pitch em{font-style:normal; color:var(--accent-deep);
  border-bottom:1.5px solid var(--accent-soft)}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

.btn{font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; text-decoration:none;
  padding:12px 20px; border-radius:2px; display:inline-flex; align-items:center; gap:9px;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  cursor:pointer; border:1px solid transparent}
.btn-solid{background:var(--ink); color:var(--paper)}
.btn-solid:hover{background:var(--accent-deep); color:#fff; transform:translateY(-1px)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent-deep)}
.btn svg{width:15px; height:15px; flex:none}
.btn[aria-disabled="true"]{opacity:.55; cursor:default}
.btn[aria-disabled="true"]:hover{transform:none; background:var(--ink)}

/* ---------- hero portrait ---------- */
.hero-grid{display:grid; grid-template-columns:1fr auto; gap:56px; align-items:center}
.hero-portrait{width:232px; height:288px; border-radius:6px; border:1px solid var(--line);
  box-shadow:0 18px 44px -22px rgba(20,33,43,.5); background:var(--raise);
  flex:none; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center}
html[data-theme="dark"] .hero-portrait{box-shadow:0 18px 44px -22px rgba(0,0,0,.7)}
.hero-portrait img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
  /* the portrait is a cut-out PNG, so this sits behind its transparent pixels */
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--raise)) 0%, var(--raise) 82%)}
.hero-portrait .ini{font-family:var(--display); font-size:3rem; font-weight:600; color:var(--muted)}
.hero-portrait .cap{position:absolute; left:0; right:0; bottom:0; background:var(--todo-bg);
  color:var(--todo-ink); font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; text-align:center; padding:5px 2px}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:32px}
  .hero-portrait{order:-1; width:148px; height:184px}
  .hero-inner{padding:84px 28px 76px}
}

/* ---------- selected work / mini cards ---------- */
.highlights{padding-top:78px; padding-bottom:78px}
.hl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:800px){.hl-grid{grid-template-columns:1fr}}
.hl-card{display:flex; flex-direction:column; background:var(--raise);
  border:1px solid var(--line); border-radius:4px; padding:24px 24px 22px;
  text-decoration:none; color:inherit;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease}
a.hl-card:hover{border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 16px 32px -24px rgba(20,33,43,.5)}
.hl-card .hl-kicker{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 12px}
.hl-card h3{font-family:var(--display); font-weight:600; font-size:1.06rem;
  line-height:1.3; letter-spacing:-.015em; margin:0 0 10px}
.hl-card p{color:var(--ink-soft); font-size:.9rem; line-height:1.5; margin:0 0 16px}
.hl-card .hl-go{margin-top:auto; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.04em; color:var(--accent)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .wave-drift{animation:none}
  .btn:hover,a.hl-card:hover{transform:none}
}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:54px; align-items:start}
.about-lead p{font-size:1.16rem; line-height:1.55; color:var(--ink); margin:0 0 18px}
.about-lead p:last-child{margin-bottom:0}
.about-lead strong,.about-lead b{font-weight:600}
.facts{border-left:2px solid var(--accent); padding-left:22px}
.fact{margin-bottom:20px}
.fact:last-child{margin-bottom:0}
.fact .k{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:3px}
.fact .v{font-size:.98rem; color:var(--ink)}
@media (max-width:760px){.about-grid{grid-template-columns:1fr; gap:34px}}

/* ---------- research cards ---------- */
.card{background:var(--raise); border:1px solid var(--line); border-radius:4px;
  padding:34px 34px 30px; margin-bottom:22px; position:relative}
.card::before{content:""; position:absolute; left:0; top:22px; bottom:22px; width:3px;
  background:var(--wc,var(--accent)); border-radius:3px}
.card-top{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:16px}
.tag{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 10px; border-radius:2px}
.tag-live{background:var(--accent-soft); color:var(--accent-deep)}
.tag-role{border:1px solid var(--line); color:var(--ink-soft)}
.card h3{font-family:var(--display); font-weight:600; font-size:1.28rem; line-height:1.3;
  letter-spacing:-.02em; margin:0 0 6px}
.card .venue{font-family:var(--mono); font-size:.78rem; color:var(--muted);
  margin:0 0 12px; letter-spacing:.03em}
.card .summary{color:var(--ink-soft); margin:0 0 22px}
.card .summary strong{color:var(--ink); font-weight:600}
.card-link{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:.76rem; letter-spacing:.03em; color:var(--accent); text-decoration:none;
  margin:0 18px 22px 0; border-bottom:1px solid transparent; transition:border-color .2s ease}
.card-link:hover{border-bottom-color:var(--accent)}

.method-label{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:22px 0 12px}
.method{list-style:none; margin:0; padding:0}
.method li{position:relative; padding-left:22px; margin-bottom:11px;
  color:var(--ink-soft); font-size:.95rem; line-height:1.5}
.method li:last-child{margin-bottom:0}
.method li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  border:1.5px solid var(--wc,var(--accent)); border-radius:50%}
.card-note{margin:0; color:var(--ink-soft); font-size:.95rem; line-height:1.55}
.card-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:22px}
.card-grid .method-label{margin-top:0}
@media (max-width:760px){
  .card{padding:26px 22px 24px}
  .card-grid{grid-template-columns:1fr; gap:22px}
}

/* bench parameters strip */
.bench{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.bench div{border:1px solid var(--line); border-radius:2px; padding:7px 12px;
  display:flex; flex-direction:column; gap:2px; background:var(--paper)}
.bench b{font-family:var(--mono); font-size:.8rem; font-weight:500; color:var(--ink)}
.bench span{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted)}

/* ---------- final-year thesis ---------- */
.thesis-title-link{color:inherit; text-decoration:none; display:inline}
.thesis-title-link:hover{color:var(--accent-deep)}
.thesis-title-link .pdf-tag{font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); border:1px solid var(--line); border-radius:2px;
  padding:3px 7px; opacity:.6; transition:opacity .2s ease, border-color .2s ease;
  white-space:nowrap; vertical-align:middle; margin-left:10px}
.thesis-title-link:hover .pdf-tag{opacity:1; border-color:var(--accent)}
.thesis-meta{font-family:var(--mono); font-size:.76rem; letter-spacing:.03em;
  color:var(--muted); margin:0 0 20px; line-height:1.7}
#thesis .about-lead p{font-size:1.05rem}
/* #thesis-findings{margin-top:42px; border-top:1px solid var(--line); padding-top:26px}
#thesis-findings .method{columns:2; column-gap:40px}
#thesis-findings .method li{break-inside:avoid; margin-bottom:14px} */
@media (max-width:760px){#thesis-findings .method{columns:1}}

/* ---------- skills ---------- */
.skill-group{margin-bottom:40px}
.skill-group:last-child{margin-bottom:0}
.skill-group > .grp{font-family:var(--display); font-weight:600; font-size:1.06rem;
  letter-spacing:-.01em; margin:0 0 4px; display:flex; align-items:baseline; gap:12px}
.skill-group > .grp .num{font-family:var(--mono); font-size:.72rem; color:var(--accent);
  letter-spacing:.1em; font-weight:400}
.skill-list{border-top:1px solid var(--line); margin-top:16px}
.skill-row{display:grid; grid-template-columns:210px 1fr; gap:22px;
  padding:13px 0; border-bottom:1px solid var(--line); align-items:baseline}
.skill-row .name{font-family:var(--mono); font-size:.86rem; color:var(--ink); letter-spacing:.01em}
.skill-row .desc{color:var(--ink-soft); font-size:.94rem; line-height:1.5}
@media (max-width:640px){
  .skill-row{grid-template-columns:1fr; gap:4px; padding:12px 0}
  .skill-row .name{color:var(--accent-deep)}
}

/* ---------- education / experience ---------- */
.edu{display:grid; grid-template-columns:150px 1fr; gap:30px; align-items:start; margin-bottom:34px}
.edu:last-child{margin-bottom:0}
.edu .when{font-family:var(--mono); font-size:.82rem; color:var(--muted);
  letter-spacing:.04em; padding-top:3px}
.edu h3{font-family:var(--display); font-weight:600; font-size:1.22rem; margin:0 0 4px; letter-spacing:-.015em}
.edu .inst{color:var(--ink-soft); margin:0 0 10px}
.edu .det{color:var(--ink-soft); margin:0 0 16px; font-size:.95rem}
.edu .det:last-child{margin-bottom:0}
.coursework{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:var(--mono); font-size:.74rem; letter-spacing:.02em;
  padding:5px 11px; border:1px solid var(--line); border-radius:2px; color:var(--ink-soft)}
@media (max-width:640px){.edu{grid-template-columns:1fr; gap:8px}}

/* ---------- contact ---------- */
.contact-flex{display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; align-items:flex-end}
.contact-big{font-family:var(--display); font-weight:600;
  font-size:clamp(1.3rem,4vw,2.4rem); letter-spacing:-.025em; text-decoration:none;
  line-height:1.1; overflow-wrap:anywhere; display:inline-block; margin:0 0 20px}
.contact-big:hover{color:var(--accent-deep)}
.contact-meta{font-family:var(--mono); font-size:.82rem; color:var(--muted);
  line-height:1.9; letter-spacing:.02em}
.contact-meta a{text-decoration:none; transition:color .2s ease}
.contact-meta a:hover{color:var(--accent)}
.contact-actions{display:flex; flex-wrap:wrap; gap:12px}
@media (max-width:640px){
  .contact-flex{gap:28px}
  .contact-actions .btn{flex:1 1 auto; justify-content:center}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:26px 0 40px}
.foot-inner{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center}
.foot-inner p{font-family:var(--mono); font-size:.72rem; color:var(--muted);
  letter-spacing:.05em; margin:0; max-width:70ch; line-height:1.8}
.foot-inner a{font-family:var(--mono); font-size:.72rem; color:var(--muted);
  letter-spacing:.05em; text-decoration:none}
.foot-inner a:hover{color:var(--accent)}

/* ---------- to-fill marker ---------- */
.tofill{display:inline-block; background:var(--todo-bg); color:var(--todo-ink);
  border:1px dashed var(--todo-line); border-radius:2px; padding:0 6px;
  font-family:var(--mono); font-size:.8em; font-weight:400; letter-spacing:.02em;
  line-height:1.5; font-style:normal; text-transform:none}

@media (max-width:560px){
  .wrap,.nav-inner{padding-inline:18px}
  section{padding:64px 0}
}