/* Fonts are loaded from a in each page's , not with @import.
An @import here cannot be discovered until this file has been fetched
and parsed, which serialises the request and delays first paint. */
/* ---------- tokens ----------
Single dark theme, deliberately committed to. Surfaces and the one accent
are sampled from the gaze x EEG footage in the hero. Teal appears only
inside that footage, so the interface stays two-tone: ink + amber. */
:root{
--bg:#0a0e13; /* page ground, matches the footage background */
--bg-raised:#10161d; /* hero band, elevated surfaces */
--card-bg:#121920;
--ink:#e9e6e0;
--muted:#98a1ab;
--rule:rgba(233,230,224,0.13);
--rule-strong:rgba(233,230,224,0.26);
--accent:#e6a03c; /* the warm pole of the topoplot colormap */
--accent-dim:#c9861f;
--on-accent:#15100a;
--shadow: 0 18px 44px -22px rgba(0,0,0,0.85);
--shadow-sm: 0 8px 20px -12px rgba(0,0,0,0.8);
--radius:10px;
--maxw:1080px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
line-height:1.65;
font-size:16.5px;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration-thickness:0.6px; text-underline-offset:3px; }
a:hover{ color:#f3b862; }
h1,h2,h3,h4{
font-family:"Newsreader", Georgia, "Times New Roman", serif;
font-weight:600; letter-spacing:-0.01em; line-height:1.18;
margin:0 0 0.5rem; color:var(--ink);
}
h1{ font-size:clamp(2rem, 3.6vw, 2.7rem); }
h2{ font-size:clamp(1.45rem, 2.5vw, 1.95rem); }
h3{ font-size:1.18rem; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.eyebrow{
font-family:"JetBrains Mono", ui-monospace, monospace;
font-size:0.72rem; letter-spacing:0.09em; text-transform:uppercase;
color:var(--accent); font-weight:500; margin-bottom:0.6rem; display:block;
}
/* ---------- header / nav ---------- */
.site-header{
position:sticky; top:0; z-index:50;
background:rgba(10,14,19,0.86);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--rule);
}
.nav{
display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
padding:0.85rem 1.5rem; max-width:var(--maxw); margin:0 auto;
}
.brand{ text-decoration:none; color:var(--ink); display:block; line-height:1.25; }
.brand:hover{ color:var(--ink); }
.brand-name{
display:block; font-family:"Newsreader",serif; font-weight:600;
font-size:1.12rem; letter-spacing:-0.01em;
}
.brand-title{
display:block; font-size:0.72rem; color:var(--muted); font-weight:400;
letter-spacing:0.01em;
}
.nav-links{ display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; }
.nav-links a{
color:var(--ink); text-decoration:none; font-size:0.92rem; font-weight:500;
padding:0.3rem 0; border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ border-color:var(--accent); color:var(--ink); }
.nav-toggle{
display:none; background:none; border:1px solid var(--rule-strong); border-radius:6px;
width:38px; height:34px; cursor:pointer; color:var(--ink); font-size:1rem;
}
@media (max-width: 820px){
.nav-toggle{ display:block; }
.nav-links{
position:absolute; top:100%; left:0; right:0; background:var(--bg-raised);
flex-direction:column; gap:0; border-bottom:1px solid var(--rule);
max-height:0; overflow:hidden; transition:max-height .3s ease;
}
.nav-links.open{ max-height:360px; }
.nav-links li{ border-top:1px solid var(--rule); }
.nav-links a{ display:block; padding:0.85rem 1.5rem; border-bottom:none; }
}
@media (max-width: 460px){ .brand-title{ display:none; } }
/* ---------- hero ---------- */
.hero{
position:relative; overflow:hidden;
padding:4rem 0 3.4rem;
background:linear-gradient(160deg, var(--bg-raised) 0%, var(--bg) 100%);
border-bottom:1px solid var(--rule);
}
.hero .wrap{ display:flex; gap:3rem; align-items:center; flex-wrap:wrap; }
.hero-text{ flex:1 1 380px; }
.hero p.lede{ max-width:54ch; font-size:1.06rem; margin:0; }
.hero p.lede + p.lede{ margin-top:0.9rem; color:var(--muted); font-size:1rem; }
.hero-visual{ flex:1 1 330px; max-width:460px; }
.hero-visual figure{ margin:0; }
.hero-visual .frame{
border-radius:var(--radius); overflow:hidden; border:1px solid var(--rule-strong);
box-shadow:var(--shadow); background:#080d13;
}
.hero-visual img{ width:100%; height:auto; }
.hero-visual figcaption{
margin-top:0.7rem; font-family:"JetBrains Mono",monospace; font-size:0.71rem;
color:var(--muted); line-height:1.55;
}
.hero-visual figcaption .dot{ color:var(--accent); }
/* ---------- buttons ---------- */
.btn-row{ display:flex; gap:0.7rem; flex-wrap:wrap; margin:1.6rem 0 1.4rem; }
.btn{
display:inline-block; padding:0.55rem 1.05rem; border-radius:999px;
text-decoration:none; font-weight:500; font-size:0.92rem;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease,
color .15s ease, border-color .15s ease;
}
.btn.solid{ background:var(--accent); color:var(--on-accent); }
.btn.solid:hover{ background:#f3b862; color:var(--on-accent); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn.ghost{ border:1px solid var(--rule-strong); color:var(--ink); }
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
/* ---------- social icons ---------- */
.social-row{ display:flex; gap:0.65rem; flex-wrap:wrap; align-items:center; }
.social-row a{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:50%;
border:1px solid var(--rule-strong); color:var(--muted);
text-decoration:none; transition:all .15s ease;
}
.social-row a:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.social-row svg{ width:18px; height:18px; fill:currentColor; display:block; }
/* ---------- sections ---------- */
.section{ padding:3.4rem 0; border-bottom:1px solid var(--rule); }
.section:last-of-type{ border-bottom:none; }
.section-head{
display:flex; justify-content:space-between; align-items:baseline;
gap:1rem; margin-bottom:1.8rem; flex-wrap:wrap;
}
.see-all{ font-family:"JetBrains Mono",monospace; font-size:0.8rem; white-space:nowrap; }
/* cards */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.software-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
@media (max-width:860px){ .card-grid, .software-grid{ grid-template-columns:1fr; } }
.card{
background:var(--card-bg); border:1px solid var(--rule); border-radius:var(--radius);
padding:1.4rem; text-decoration:none; color:inherit; display:block;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--accent); }
.card h3{ margin-bottom:0.5rem; }
.card p{ margin:0; color:var(--muted); font-size:0.95rem; }
.tag{
font-family:"JetBrains Mono",monospace; font-size:0.68rem; letter-spacing:0.05em;
text-transform:uppercase; color:var(--muted); display:inline-block;
margin-bottom:0.6rem;
}
/* research-line cards: a still from the line's animation, then the claim */
.line-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:980px){ .line-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .line-grid{ grid-template-columns:1fr; } }
.line-card{
background:var(--card-bg); border:1px solid var(--rule); border-radius:var(--radius);
overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.line-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--accent); }
.line-card .poster{
display:block; width:100%; aspect-ratio:760/265; object-fit:cover; object-position:center;
background:#080d13; border-bottom:1px solid var(--rule);
}
.line-card .poster-none{
display:flex; align-items:center; justify-content:center;
aspect-ratio:760/265; background:linear-gradient(160deg,#12181f,#0c1117);
border-bottom:1px solid var(--rule);
color:var(--muted); font-family:"JetBrains Mono",monospace; font-size:0.66rem;
text-align:center; padding:0 1rem;
}
.line-card .body{ padding:1.05rem 1.15rem 1.2rem; }
.line-card h3{ font-size:1.06rem; margin-bottom:0.4rem; }
.line-card p{ margin:0; color:var(--muted); font-size:0.9rem; line-height:1.55; }
.line-card .cue{
display:block; margin-top:0.7rem; font-family:"JetBrains Mono",monospace;
font-size:0.7rem; color:var(--accent);
}
/* compact funding strip */
.funding{ margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--rule); }
.funding h3{ font-size:0.95rem; margin-bottom:0.7rem; }
.funding ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.5rem; }
.funding li{ color:var(--muted); font-size:0.88rem; line-height:1.5; }
.funding .grant{
font-family:"JetBrains Mono",monospace; font-size:0.68rem; color:var(--accent);
text-transform:uppercase; letter-spacing:0.05em; margin-right:0.5rem;
}
.pkg-links{ margin-top:0.9rem; display:flex; gap:0.5rem; flex-wrap:wrap; }
.pill{
font-family:"JetBrains Mono",monospace; font-size:0.74rem; padding:0.28rem 0.65rem;
border:1px solid var(--rule-strong); border-radius:999px;
text-decoration:none; color:var(--ink);
}
.pill:hover{ border-color:var(--accent); color:var(--accent); }
/* publications */
.pub-list{ list-style:none; margin:0; padding:0; }
.pub-item{ padding:1.2rem 0; border-top:1px solid var(--rule); }
.pub-item:first-child{ border-top:none; }
.pub-title{ font-weight:600; font-size:1.01rem; margin-bottom:0.25rem; }
.pub-authors{ color:var(--muted); font-size:0.91rem; margin-bottom:0.3rem; }
.pub-venue{ font-size:0.89rem; color:var(--ink); }
.pub-venue .year{ color:var(--muted); }
/* Publications: click a title to reveal its abstract.
Native /: keyboard accessible and works with JavaScript
off. Entries with no abstract keep the plain markup, so the chevron never
appears where there is nothing to open. */
.pub-details > summary{
list-style:none; display:block; cursor:pointer;
position:relative; padding-right:1.7rem;
}
.pub-details > summary::-webkit-details-marker{ display:none; }
.pub-details > summary::after{
content:""; position:absolute; right:0.4rem; top:0.4rem;
width:0.48rem; height:0.48rem;
border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
transform:rotate(45deg); transition:transform .18s ease, border-color .18s ease;
}
.pub-details[open] > summary::after{ transform:rotate(-135deg); }
.pub-details > summary:hover .pub-title{ color:var(--accent); }
.pub-details > summary:hover::after{ border-color:var(--accent); }
.pub-details > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
.pub-details .pub-title,
.pub-details .pub-authors,
.pub-details .pub-venue{ display:block; }
.pub-abstract{
margin-top:0.8rem; padding:0.85rem 1.05rem;
border-left:2px solid var(--accent);
background:var(--card-bg);
border-radius:0 var(--radius) var(--radius) 0;
}
.pub-abstract p{
margin:0; max-width:76ch; font-size:0.9rem; line-height:1.68; color:var(--muted);
}
@media (prefers-reduced-motion:reduce){
.pub-details > summary::after{ transition:none; }
}
.year-head{
font-family:"JetBrains Mono",monospace; font-size:0.78rem; letter-spacing:0.08em;
color:var(--accent); text-transform:uppercase; margin:2.2rem 0 0.4rem;
}
.year-head:first-child{ margin-top:0; }
/* project blocks on the research page */
.project{ padding-top:2rem; }
.project:first-of-type{ padding-top:0.4rem; }
.project p{ max-width:72ch; color:var(--muted); }
.project p strong, .project p em{ color:var(--ink); }
/* data animation embedded in a project block */
.datafig{ margin:1.2rem 0 0; max-width:560px; }
.datafig-wide{ max-width:100%; }
.datafig .frame{
border-radius:var(--radius); overflow:hidden;
border:1px solid var(--rule-strong); box-shadow:var(--shadow); background:#0a0e13;
}
.datafig img{ width:100%; height:auto; }
.datafig figcaption{
margin-top:0.6rem; font-family:"JetBrains Mono",monospace; font-size:0.71rem;
color:var(--muted); line-height:1.55;
}
.datafig figcaption .dot{ color:var(--accent); }
/* ---------- research page: clip gallery + two-column projects ---------- */
.clip-section{ padding-top:2.4rem; }
.clip-head{ margin-bottom:0.3rem; }
.clip-intro{ color:var(--muted); max-width:64ch; margin:0 0 1.5rem; }
.clip-strip{
display:grid; gap:1rem;
grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.clip-card{
display:flex; flex-direction:column; text-decoration:none; color:inherit;
border:1px solid var(--rule); border-radius:var(--radius);
overflow:hidden; background:var(--card-bg);
transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.clip-card img{
width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
border-bottom:1px solid var(--rule);
}
.clip-name{
font-weight:600; font-size:0.9rem; padding:0.7rem 0.85rem 0.15rem; line-height:1.3;
}
.clip-note{
font-family:"JetBrains Mono",monospace; font-size:0.68rem; line-height:1.45;
color:var(--muted); padding:0 0.85rem 0.85rem;
}
.clip-card:hover, .clip-card:focus-visible{
transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow);
}
.clip-card:hover .clip-name{ color:var(--accent); }
.clip-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
/* Text and clip side by side, so the animation is visible while the prose that
explains it is being read, instead of sitting below all of it. */
@media (min-width:920px){
.project.has-fig{
display:grid; column-gap:2.4rem; align-items:start;
grid-template-columns:minmax(0,1fr) minmax(0,44%);
}
.project.has-fig > h3{ grid-column:1 / -1; }
.project.has-fig > .project-prose{ grid-column:1; }
.project.has-fig > .datafig{
grid-column:2; margin-top:0; position:sticky; top:5.5rem;
}
.project.has-fig .project-prose p{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
.clip-card{ transition:none; }
.clip-card:hover, .clip-card:focus-visible{ transform:none; }
.project.has-fig > .datafig{ position:static; }
}
/* about */
.about p{ max-width:70ch; }
.about-flex{ display:flex; gap:2rem; align-items:flex-start; flex-wrap:wrap; margin-top:1.4rem; }
.about-text{ flex:1 1 420px; }
.portrait-block{ flex:0 0 152px; display:flex; flex-direction:column; align-items:center; gap:0.55rem; }
.portrait-credit{
margin:0; font-size:0.72rem; line-height:1.45; text-align:center; color:var(--muted);
}
.portrait{
flex:0 0 auto; width:152px; height:152px; border-radius:50%;
background:var(--card-bg); border:1px solid var(--rule-strong);
overflow:hidden; box-shadow:var(--shadow-sm);
display:flex; align-items:center; justify-content:center;
color:var(--muted); font-family:"JetBrains Mono",monospace; font-size:0.62rem;
text-align:center; padding:0.8rem;
}
.portrait img{ width:100%; height:100%; object-fit:cover; }
/* page header on interior pages */
.page-hero{ padding:3.2rem 0 2.2rem; border-bottom:1px solid var(--rule); }
.page-hero p{ max-width:66ch; color:var(--muted); }
/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
@media (max-width:700px){ .contact-grid{ grid-template-columns:1fr; } }
.addr{ font-style:normal; color:var(--muted); line-height:1.8; }
/* footer */
.site-footer{ padding:2.4rem 0 3rem; border-top:1px solid var(--rule); }
.site-footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-note{ color:var(--muted); font-size:0.84rem; margin:0; }
/* CV embed */
.cv-embed{ width:100%; height:80vh; border:1px solid var(--rule-strong); border-radius:var(--radius); background:var(--card-bg); }
/* reveal-on-scroll
Guarded behind .js (set by an inline script in each page's ): with
JavaScript disabled or broken, nothing is ever hidden. Content visibility
must never depend on a script running. */
.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
.js .reveal{ opacity:1; transform:none; transition:none; }
html{ scroll-behavior:auto; }
}