/* ==========================================================================
   Apostolos Mourtzinos: shared stylesheet (index, 404)
   Source Serif 4 (display, headings, research write-ups) + Inter (body), both
   self-hosted variable fonts.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Google serves one variable file per family and subset across every weight, so
   each face is declared once with a weight RANGE. Ranges are the real axis limits:
   Inter 100-900, Source Serif 4 200-900. Thanks to unicode-range a subset is only
   downloaded when one of its characters is on screen: latin-ext and greek exist
   for the accented author names and the odd Greek letter (PKA Cα, β-catenin) in
   the research write-ups. Inter italic is there for journal and species names,
   because font-synthesis is off and would otherwise render them upright. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-serif-4-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* --- Tokens ---------------------------------------------------------------
   Light "paper" with one deep teal accent, a nod to biology and fluorescence
   imaging. Changing --accent restyles every accent on the site: links, section
   labels, chips, the current-section marker, news dates and focus rings.
   WCAG contrast, light: text 12.98:1, muted 5.52:1 (5.06:1 on --raised), accent
   5.78:1 (5.21:1 on --accent-soft chips). Dark: text 13.11:1, muted 6.87:1
   (6.33:1 on --raised), accent 9.26:1 (6.80:1 on chips). Every text pairing
   passes AA. --hairline (1.26:1 / 1.36:1) is decorative only, never the sole
   indicator of state or of an interactive boundary. */
:root {
  --bg:          #FAF9F6;
  --raised:      #F1EFEA;
  --text:        #2A2E33;
  --text-strong: #121417;
  --muted:       #5E6670;
  --hairline:    #E2DFD8;
  --accent:      #0E6E68;
  --accent-ink:  #0A5550;   /* hover */
  --accent-soft: #E3F0EE;   /* chips, portrait disc, highlighted reference */
  --figure-bg:   #FFFFFF;   /* the figures are drawn on white */
  --card-dim:    none;      /* white logo tiles and figures, dimmed in the dark theme */
  --shadow:      0 1px 2px rgba(18, 20, 23, 0.05), 0 8px 28px rgba(18, 20, 23, 0.07);

  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Every min and preferred term carries a rem component so the scale still
     responds to text-only zoom, not just page zoom. */
  --fs-h1:    clamp(2.125rem, 1.55rem + 2.4vw, 3.125rem);
  --fs-h3:    clamp(1.125rem, 1.07rem + 0.25vw, 1.3125rem);
  --fs-lede:  clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --fs-body:  1rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --fs-label: 0.75rem;

  --max:      1080px;
  --narrow:   760px;
  --gutter:   clamp(1.25rem, 5vw, 2.5rem);
  --band:     clamp(3.25rem, 7vw, 5rem);   /* vertical rhythm between sections */
  --header-h: 64px;
  --radius:   14px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light;
}

/* --- Dark theme -----------------------------------------------------------
   Follows the system by default. The header toggle overrides it: main.js sets
   data-theme="light" or "dark" on <html> before first paint and remembers the
   choice. With JS off only the system preference applies. The two blocks below
   must stay identical, and verify.sh checks that they do. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0E1413;
    --raised:      #151D1B;
    --text:        #D3DAD8;
    --text-strong: #F1F4F3;
    --muted:       #93A09C;
    --hairline:    #25302D;
    --accent:      #5CC8BC;
    --accent-ink:  #7FD8CE;
    --accent-soft: #173230;
    --figure-bg:   #F4F3EF;   /* soften the white figures a touch at night */
  --card-dim:    brightness(0.9);
    --shadow:      0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 32px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:          #0E1413;
  --raised:      #151D1B;
  --text:        #D3DAD8;
  --text-strong: #F1F4F3;
  --muted:       #93A09C;
  --hairline:    #25302D;
  --accent:      #5CC8BC;
  --accent-ink:  #7FD8CE;
  --accent-soft: #173230;
  --figure-bg:   #F4F3EF;   /* soften the white figures a touch at night */
  --card-dim:    brightness(0.9);
  --shadow:      0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 32px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Clears the sticky header for every in-page anchor, so a new section can
     never be added without it. Exactly the header height, so a section's top
     border lands on the header's own bottom border and the two read as one line
     (any gap shows two parallel hairlines). Smaller targets add their own
     breathing room with scroll-margin-top below. */
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  font-synthesis: none;            /* no faux-bold or faux-italic of the variable faces */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }
img { display: block; }
[hidden] { display: none !important; }

a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.2em;
  transition: color 0.15s var(--ease), text-decoration-color 0.15s var(--ease);
}
a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }

p { margin: 0; }

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell.narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.1rem;
  background: var(--accent);
  color: var(--bg);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
}
.skip-link:focus { left: var(--gutter); }

/* A visible focus ring everywhere, in the accent colour. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
main:focus { outline: none; }

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}

/* Section labels: small uppercase, as on George's site, in the accent colour. */
h2.label {
  margin: 0 0 1.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-strong);
}

/* Small sub-labels inside an entry: "Core skills", "Projects", "References". */
h4 {
  margin: 1.1rem 0 0.55rem;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

em, i { font-style: italic; }
cite { font-style: normal; }

.prose p + p { margin-top: 1rem; }

.nowrap { white-space: nowrap; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--hairline); }

@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--bg); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem 1.25rem;
  min-height: var(--header-h);
}

.wordmark {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;   /* last resort on very narrow phones; the header never wraps with JS on */
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--accent); }

.nav { margin-left: auto; }

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.15rem;
}

/* Full-height links, with equal transparent borders top and bottom: the text
   sits on the same centre line as the wordmark, and the current-section marker
   lands on the header's bottom edge instead of floating mid-header. */
.nav a {
  display: flex;
  align-items: center;
  height: var(--header-h);
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
.nav a:hover { color: var(--text-strong); }
/* Set by main.js (scroll-spy) on the link of the section in view. */
.nav a.is-current { color: var(--accent); border-bottom-color: var(--accent); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.95rem;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--text-strong);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }

.nav-bars { display: inline-grid; gap: 4px; width: 16px; }
.nav-bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-bars span:first-child { transform: translateY(2.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bars span:last-child  { transform: translateY(-2.75px) rotate(-45deg); }

/* Light/dark switch. It needs JS, so it only appears once main.js has run. It is
   last in the header on every layout: after the nav on desktop, after "Menu" on
   small screens, and right after the wordmark on the 404 page. */
.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--text-strong);
  cursor: pointer;
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle .icon { width: 0.95rem; height: 0.95rem; }
.wordmark + .theme-toggle { margin-left: auto; }

/* Moon while light (switch to dark), sun while dark. main.js keeps aria-pressed
   in step with the theme actually showing, system default included. */
.theme-toggle .icon-sun,
.theme-toggle[aria-pressed="true"] .icon-moon { display: none; }
.theme-toggle[aria-pressed="true"] .icon-sun { display: block; }

/* --- Intro ---------------------------------------------------------------- */
.intro { padding-block: clamp(1.25rem, 3.5vw, 2.5rem) var(--band); }

.cover {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--raised);
  aspect-ratio: 1392 / 420;
}
.cover img { width: 100%; height: 100%; object-fit: cover; }

.intro-head {
  position: relative;
  margin-top: calc(-1 * clamp(3rem, 7vw, 4.5rem));
  padding-inline: clamp(0.5rem, 3vw, 1.75rem);
}

.portrait {
  width: clamp(6.5rem, 15vw, 8.5rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent-soft);   /* the cutout portrait sits on a theme-aware disc */
  border: 4px solid var(--bg);
  box-shadow: var(--shadow);
}

.intro h1 { margin-top: 1.1rem; }

.tagline {
  margin-top: 0.6rem;
  max-width: 48ch;
  color: var(--muted);
  font-size: var(--fs-lede);
  line-height: 1.55;
}

.profile-links {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.profile-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--text-strong);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.profile-links a:hover { border-color: var(--accent); color: var(--accent); }

.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

.lede { margin-top: 2.25rem; padding-inline: clamp(0.5rem, 3vw, 1.75rem); }
.lede p { font-size: var(--fs-lede); line-height: 1.7; }

/* --- Sections ------------------------------------------------------------- */
.band {
  padding-block: var(--band);
  border-top: 1px solid var(--hairline);
}

/* Two square photos under the background story. */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 2rem 0 0;
}
.duo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--raised);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.75rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.button:hover { background: var(--accent-soft); color: var(--accent-ink); }

/* --- Research ------------------------------------------------------------- */
.research-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12.5rem;
  gap: 2rem;
  align-items: start;
}
.research-lead figure { margin: 0.35rem 0 0; }
.research-lead img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--raised);
}

.chips {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chips li {
  padding: 0.2rem 0.7rem;
  background: var(--accent-soft);
  border-radius: 999px;
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
}

.callout {
  margin-top: 2.25rem;
  padding: 1.1rem 1.35rem;
  background: var(--raised);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
}
.callout .title {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-strong);
}
.callout .meta { margin-top: 0.3rem; color: var(--muted); font-size: var(--fs-sm); }

.kicker {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.projects { display: grid; gap: 1rem; margin-top: 1.25rem; }

.project {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.project h3 { margin-top: 0.35rem; }
.project .teaser { margin-top: 0.75rem; }

details.more { margin-top: 1rem; }
details.more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary:hover { color: var(--accent-ink); }
details.more > summary .icon { width: 0.75em; height: 0.75em; transition: transform 0.2s var(--ease); }
details.more[open] > summary .icon { transform: rotate(180deg); }
details.more .when-open { display: none; }
details.more[open] .when-open { display: inline; }
details.more[open] .when-closed { display: none; }

/* The expanded write-ups read like a journal article. */
.writeup {
  margin-top: 1.25rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.writeup p + p { margin-top: 1rem; }
.writeup::after { content: ""; display: table; clear: both; }

.writeup figure { margin: 1.75rem 0; }
.writeup figure img {
  background: var(--figure-bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  filter: var(--card-dim);
}
.writeup figcaption {
  margin-top: 0.65rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--muted);
}
.writeup figcaption strong { color: var(--text-strong); font-weight: 600; }

/* The source is only 352px wide: 1.5x keeps its labels legible without going soft. */
.figure-wide img { width: 100%; max-width: 528px; }

/* The FLC schematic is tall, so on wide screens the text wraps beside it. The
   .writeup prefix outranks the generic `.writeup figure` margin above. */
.writeup .figure-side { float: right; width: min(16.5rem, 44%); margin: 0.35rem 0 1.25rem 1.75rem; }
.writeup .figure-side img { width: 100%; }

sup.cite {
  font-family: var(--font-body);
  font-size: 0.68em;
  line-height: 0;
  vertical-align: super;
  white-space: nowrap;
}
sup.cite a { text-decoration: none; padding-inline: 0.04em; }
sup.cite a:hover { text-decoration: underline; }

ol.refs {
  clear: both;
  margin: 0.5rem 0 0;
  padding-left: 1.85rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--muted);
}
ol.refs li { padding: 0.1rem 0.35rem; border-radius: 4px; }
ol.refs li + li { margin-top: 0.3rem; }
ol.refs li::marker { font-variant-numeric: tabular-nums; }
ol.refs cite { color: var(--text); }
ol.refs cite a { color: inherit; }
ol.refs cite a:hover { color: var(--accent); }
ol.refs li:target { background: var(--accent-soft); color: var(--text); }

/* Sections land flush under the header (see scroll-padding-top). A jump to a
   single reference or paper gets a little air above it instead. */
ol.refs li, .pubs > li { scroll-margin-top: 1.25rem; }

/* --- Publications --------------------------------------------------------- */
.pubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.pubs cite {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}
.pubs cite a { color: var(--text-strong); text-decoration-color: transparent; }
.pubs cite a:hover { color: var(--accent); text-decoration-color: currentColor; }
.pubs .authors { margin-top: 0.4rem; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }
.pubs .authors strong { color: var(--text-strong); font-weight: 600; }
.pubs .venue { margin-top: 0.2rem; font-size: var(--fs-sm); }

.more-link { margin-top: 1.75rem; font-size: var(--fs-sm); }

/* --- Institution logos -----------------------------------------------------
   Uniform white tiles, in timeline order. Each logo file is pre-sized to a
   similar visual area (see README, "Logos"), so a round seal and a long
   wordmark carry the same weight. Tiles stay white in the dark theme because
   several logos are drawn on white, and are dimmed a touch instead. */
.logo-wall {
  list-style: none;
  margin: 0 0 2.75rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.logo-wall li {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  padding: 0.75rem 0.9rem;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  filter: var(--card-dim);
}
.logo-wall img { max-width: 100%; height: auto; }

/* --- Timelines (experience, education) ------------------------------------ */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.35rem 1.75rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--hairline);
}
.timeline > li:first-child { padding-top: 0; border-top: 0; }
.timeline > li:last-child { padding-bottom: 0; }

.when {
  padding-top: 0.2rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.where { margin-top: 0.25rem; color: var(--muted); font-size: var(--fs-sm); }
.entry > p:not(.where) { margin-top: 0.75rem; }
.entry .chips { margin-top: 0; }

.points { margin: 0.75rem 0 0; padding-left: 1.15rem; }
.points li + li { margin-top: 0.35rem; }
.points li::marker { color: var(--accent); }

/* --- Awards --------------------------------------------------------------- */
.awards { list-style: none; margin: 0; padding: 0; }
.awards li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 1.5rem;
  padding-block: 1.05rem;
  border-top: 1px solid var(--hairline);
}
.awards li:first-child { padding-top: 0; border-top: 0; }
.awards h3 { font-size: 1.0625rem; }
.awards .year {
  padding-top: 0.15rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.awards p { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-sm); }

/* --- News ----------------------------------------------------------------- */
.section-lede { margin: -0.5rem 0 1.75rem; color: var(--muted); }

.news { list-style: none; margin: 0; padding: 0; }
.news > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: 1rem 1.75rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--hairline);
}
.news > li:first-child { padding-top: 0; border-top: 0; }
.news > li:last-child { padding-bottom: 0; }
.news > li.text-only { grid-template-columns: minmax(0, 1fr); }
.news time {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.news h3 { margin-top: 0.3rem; }
.news .body p { margin-top: 0.6rem; }
.news figure { margin: 0.2rem 0 0; }
.news img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--raised);
}
/* A logo instead of a photo: same 4:3 frame, as a white tile like the logo wall. */
.news figure.logo-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 1.25rem;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  filter: var(--card-dim);
}
.news figure.logo-figure img {
  width: 12.5rem;            /* its intended 200px; the file is 2x for sharp screens */
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
}

/* --- Contact -------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 16.5rem);
  gap: 1.5rem 2.5rem;
}
.contact-grid .prose p:first-child { font-size: var(--fs-lede); }
address { font-style: normal; color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; }
address strong { display: block; margin-bottom: 0.2rem; color: var(--text-strong); font-weight: 600; }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  padding-block: 2rem 2.75rem;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* --- 404 ------------------------------------------------------------------ */
.page-head { padding-block: clamp(4rem, 12vw, 7.5rem) 1rem; }
.error-code {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 5vw, 6.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}
.page-head h1 { margin-top: 0.75rem; }
.page-body { padding-bottom: clamp(5rem, 14vw, 9rem); font-size: var(--fs-lede); }

/* --- Scroll reveal -------------------------------------------------------
   Gated on .js, which main.js sets on <html> before first paint. With JS off
   nothing is ever hidden. Kept deliberately light: this is a page for reading. */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --- Responsive ----------------------------------------------------------- */
/* 1040px rather than a smaller tablet width: below it the wordmark, all eight
   nav links and the theme toggle no longer fit on one line. */
@media (max-width: 1040px) {
  .header-inner { flex-wrap: wrap; }

  /* Without JS the nav simply wraps under the wordmark, and the header stops
     being sticky so a two-line bar never covers the page. */
  html:not(.js) .site-header { position: static; }
  html:not(.js) .nav { width: 100%; padding-bottom: 0.85rem; }
  html:not(.js) .nav a { height: auto; padding-block: 0.3rem; }

  /* With JS the nav is a dropdown, so the bar holds only the wordmark, "Menu"
     and the theme toggle, and must stay on one line. */
  .js .header-inner { flex-wrap: nowrap; column-gap: 0.6rem; }
  .js .nav-toggle { display: inline-flex; margin-left: auto; }
  .js .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.25rem var(--gutter) 0.75rem;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow);
  }
  .js .nav.is-open { display: block; }
  .js .nav ul { flex-direction: column; gap: 0; }
  .js .nav a {
    display: block;
    height: auto;
    padding: 0.7rem 0;
    border-top: 0;
    border-bottom: 1px solid var(--hairline);
    font-size: 1rem;
  }
  .js .nav li:last-child a { border-bottom: 0; }
  .js .nav a.is-current { border-bottom-color: var(--hairline); }
}

@media (max-width: 680px) {
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }

  .research-lead { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .research-lead figure { max-width: 15rem; }

  .timeline > li { grid-template-columns: minmax(0, 1fr); }
  .when { padding-top: 0; }

  .news > li { grid-template-columns: minmax(0, 1fr); }
  .news figure { max-width: 26rem; }

  .contact-grid { grid-template-columns: minmax(0, 1fr); }

  .writeup .figure-side { float: none; width: min(18rem, 100%); margin: 1.5rem 0; }
}

@media (max-width: 420px) {
  .wordmark { font-size: 1.05rem; }
  /* Icon-only "Menu", a round twin of the theme toggle, so the full name fits on
     the bar down to 320px. The word stays in the markup for screen readers. */
  .nav-toggle { justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; }
  .nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .duo { gap: 0.5rem; }
  .profile-links a { padding: 0.4rem 0.75rem; }
}

/* --- Reduced motion -------------------------------------------------------
   Kills the reveal, the smooth scroll and every transition. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  /* Paper is always light, whatever theme is on screen. These selectors match the
     dark-theme ones above so they win on specificity as well as order. */
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --bg: #FFFFFF; --raised: #F4F4F4; --text: #000000; --text-strong: #000000;
    --muted: #333333; --hairline: #CCCCCC; --accent: #0E6E68; --accent-ink: #0A5550;
    --accent-soft: #E3F0EE; --figure-bg: #FFFFFF; --card-dim: none; color-scheme: light;
  }
  .site-header, .skip-link, .nav-toggle, .cover, details.more > summary { display: none; }
  .intro-head { margin-top: 0; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .band { padding-block: 1.5rem; }
  .project, .timeline > li, .awards li, .news > li, .pubs li { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}