/* =============================================================================
Refresh layer — loaded after main.css
Deliberately additive. The template's structure, colour scheme, particles
backdrop and page-transition behaviour are all untouched; this only modernises
type, spacing, focus states and the publication list. Delete the in
index.php to revert completely.
1. Typography
2. Rhythm and spacing
3. Links and focus
4. Cards (timeline items)
5. Publication / patent list
6. Motion preferences
============================================================================= */
/* =============================================================================
1. Typography
---------------------------------------------------------------------------
Roboto → Inter. Near-identical proportions, so nothing reflows meaningfully,
but it holds up far better at small sizes and has real optical sizing.
Montserrat stays for headings — it is a lot of this site's character.
============================================================================= */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'kern' 1, 'liga' 1;
text-rendering: optimizeLegibility;
}
p {
font-size: 1rem;
line-height: 1.68;
margin: 0 0 0.85em;
}
/* Montserrat needs negative tracking once it gets large, or it reads loose. */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', Helvetica, sans-serif;
letter-spacing: -0.011em;
line-height: 1.28;
}
/* Fluid headline, so it stops jumping between fixed breakpoints. */
.title-block h1 {
font-size: clamp(2.25rem, 5.4vw, 3.4rem);
letter-spacing: -0.024em;
line-height: 1.04;
}
.page-header h2 {
font-size: clamp(1.65rem, 3.2vw, 2.3rem);
letter-spacing: -0.02em;
}
.block-title h3 {
font-size: 1.3rem;
letter-spacing: -0.012em;
margin: 5px 0 22px;
}
.start-page-content .page-header .title-block .sp-subtitle {
font-size: 1.0625rem;
line-height: 1.55;
}
/* The biography: justified, full width of its column.
Hyphenation is on because justifying without it is what opens up the ragged
white gaps between words. Needs lang="en" on , which is already set. */
.custom-page-content .block > div[style*="justify"] {
font-size: 1rem;
line-height: 1.7;
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 7 3 3;
}
/* =============================================================================
2. Rhythm and spacing
============================================================================= */
.custom-page-content .page-header {
padding: 34px 30px;
margin-bottom: 34px;
}
.custom-page-content .block {
margin-bottom: 38px;
}
.timeline-item {
padding: 16px 22px 14px;
margin-bottom: 16px;
}
.timeline-item .item-description {
margin-bottom: 0;
}
.timeline-item .item-description li {
margin-bottom: 3px;
line-height: 1.55;
}
/* =============================================================================
3. Links and focus
---------------------------------------------------------------------------
main.css sets a:focus { outline: 0 }, which leaves keyboard users with no
indication of where they are. :focus-visible restores it for keyboard
navigation without showing a ring on mouse clicks.
============================================================================= */
a {
text-underline-offset: 0.16em;
text-decoration-thickness: 1px;
transition: color 0.18s ease;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid #2196F3;
outline-offset: 3px;
border-radius: 2px;
}
html {
scroll-behavior: smooth;
}
/* =============================================================================
4. Cards
---------------------------------------------------------------------------
The template's single hard shadow is the most dated thing on the page.
A layered, softer shadow plus a small radius reads current without changing
the colour scheme at all.
============================================================================= */
.timeline-item {
border-radius: 0 5px 5px 0;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05),
0 1px 3px rgba(16, 24, 40, 0.06);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.timeline-item:hover {
box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06),
0 8px 18px rgba(16, 24, 40, 0.09);
transform: translateY(-1px);
}
/* No shadow on the section header — it sits inside the page card, and giving it
its own elevation just draws a hairline across the card. */
.timeline-item .item-period {
font-weight: 500;
letter-spacing: 0.005em;
}
.btn.btn-secondary {
border-radius: 4px;
letter-spacing: 0.02em;
font-weight: 500;
transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
/* =============================================================================
5. Publication / patent list
---------------------------------------------------------------------------
Previously every entry was one undifferentiated run of text inside a
used purely for alignment. Same information, same order — but the title now
leads, the authors recede, and the venue and year are separated out, so the
Nature paper no longer looks identical to a 2008 conference note.
============================================================================= */
.pub {
display: flex;
gap: 14px;
align-items: baseline;
}
.pub-number {
flex: 0 0 auto;
min-width: 26px;
color: #2196F3;
font-size: 0.8125rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
line-height: 1.5;
}
.pub-body {
min-width: 0;
}
.pub-title {
display: block;
color: #212121;
font-family: 'Montserrat', Helvetica, sans-serif;
font-size: 1rem;
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.008em;
}
.pub-authors {
display: block;
margin-top: 4px;
color: #757575;
font-size: 0.875rem;
line-height: 1.5;
}
.pub-meta {
display: block;
margin-top: 3px;
font-size: 0.875rem;
line-height: 1.5;
color: #9e9e9e;
}
.pub-venue {
color: #616161;
font-style: italic;
}
.pub-year {
color: #2196F3;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
/* Theses keep a text label instead of a number, so they need more room. */
.pub-number.pub-label {
min-width: 84px;
font-size: 0.75rem;
letter-spacing: 0.02em;
text-transform: uppercase;
}
@media (max-width: 600px) {
.pub { gap: 10px; }
.pub-number { min-width: 20px; font-size: 0.75rem; }
/* Let the body claim the remaining space rather than wrapping the number
onto a line of its own. */
.pub-body { flex: 1 1 0; min-width: 0; }
.pub-number.pub-label { min-width: 62px; font-size: 0.6875rem; }
}
/* =============================================================================
6. Motion preferences
============================================================================= */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.timeline-item:hover { transform: none; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}