/* ── Variables ───────────────────────────────── */
/*
* FONTS — change them here in two places:
*
* --font-body → used for all body/paragraph text (currently Georgia, a serif)
* --font-sans → used for the name, nav tabs, headings, captions, and metadata
*
* To use a Google Font, paste a tag into the of each HTML file,
* then replace the font name below. Example:
*
* --font-sans: 'Lato', sans-serif;
*/
:root {
--accent: #0a4d8c; /* purple – change this to any colour you like */
--accent-dark: #90b4d6;
--nav-bg: #f08b11;
--nav-active-bg: #fff;
--text: #222;
--muted: #555;
--link: #db7704;
--max-width: 820px;
--font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-sans: 'Helvetica Neue', Arial, sans-serif;
}
/* ── Reset ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--text);
background: #fff;
}
a {
color: var(--link);
text-decoration: underline;
}
a:hover { color: var(--accent-dark); }
/* ── Header ─────────────────────────────────── */
header {
width: 100%;
background: var(--accent);
}
.header-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 28px 32px 22px;
}
header h1 {
font-family: var(--font-sans);
font-size: 2.2rem;
font-weight: 400;
color: #fff;
letter-spacing: 0.01em;
}
/* ── Nav ─────────────────────────────────────── */
nav {
width: 100%;
background: var(--nav-bg);
}
.nav-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 32px;
display: flex;
gap: 0;
}
nav a {
display: inline-block;
padding: 10px 18px;
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
text-decoration: none;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
nav a:not(.active) {
color: #000;
font-weight: 400;
}
nav a:hover {
background: transparent;
}
nav a.active {
background: #fff;
border-top: 3px solid var(--accent);
}
/* ── Main content ────────────────────────────── */
main {
max-width: var(--max-width);
margin: 0 auto;
padding: 36px 32px 60px;
}
/* ── About / Home page ───────────────────────── */
.about-grid {
display: grid;
grid-template-columns: 220px 1fr;
gap: 40px;
align-items: start;
}
.about-photo img {
width: 100%;
display: block;
}
.about-text h3 {
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin: 24px 0 6px;
}
/* ── Research page ───────────────────────────── */
.research-section {
margin-bottom: 44px;
}
.research-section h2 {
font-family: var(--font-sans);
font-size: 1.15rem;
font-weight: 700;
border-bottom: 1px solid #ddd;
padding-bottom: 6px;
margin-bottom: 20px;
color: var(--accent-dark);
}
.paper {
margin-bottom: 28px;
}
.paper-title {
font-weight: bold;
margin-bottom: 2px;
}
.paper-meta {
font-family: var(--font-sans);
font-size: 0.9rem;
color: var(--muted);
margin-bottom: 4px;
}
.paper-abstract {
font-size: 0.95rem;
color: #333;
}
.talks-list {
padding-left: 20px;
font-size: 0.95rem;
}
.talks-list li {
margin-bottom: 8px;
}
/* ── CV page ─────────────────────────────────── */
.cv-download {
font-family: var(--font-sans);
font-size: 0.95rem;
margin-bottom: 32px;
color: var(--muted);
}
.cv-section {
margin-bottom: 40px;
}
.cv-section h2 {
font-family: var(--font-sans);
font-size: 1.15rem;
font-weight: 700;
border-bottom: 1px solid #ddd;
padding-bottom: 6px;
margin-bottom: 16px;
color: var(--accent-dark);
}
.cv-entry {
display: grid;
grid-template-columns: 90px 1fr;
gap: 16px;
margin-bottom: 16px;
font-size: 0.95rem;
}
.cv-year {
font-family: var(--font-sans);
font-size: 0.88rem;
color: var(--muted);
padding-top: 2px;
}
.service-list {
padding-left: 20px;
font-size: 0.95rem;
}
.service-list li {
margin-bottom: 6px;
}
/* ── Responsive ──────────────────────────────── */
@media (max-width: 600px) {
.header-inner, .nav-inner, main { padding-left: 16px; padding-right: 16px; }
.about-grid { grid-template-columns: 1fr; }
.about-photo img { max-width: 200px; }
.cv-entry { grid-template-columns: 1fr; gap: 4px; }
.cv-year { color: var(--muted); font-size: 0.8rem; }
}