:root {
  --paper:#edf1f6;
  --ink:#172e46;
  --muted:#526579;
  --blue:#005b8c;
  --accent:#b65c25;
  --line:#d7e0e9;
  --white:#fff;
  --teal:var(--blue)}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  }
a {
  color:var(--teal);
  text-underline-offset:4px}
a:hover {
  color:#a34e1b}
a:focus-visible,summary:focus-visible,input:focus-visible {
  outline:3px solid #b85c36;
  outline-offset:5px}
.skip {
  position:absolute;
  top:-80px;
  left:20px;
  background:white;
  padding:12px;
  z-index:10}
.skip:focus {
  top:10px}
.shell {
  max-width:1680px;
  margin:auto;
  padding:52px 32px;
  display:grid;
  grid-template-columns:295px minmax(0,1fr);
  gap:32px}
.profile {
  position:sticky;
  top:32px;
  align-self:start}
.monogram {
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border:1px solid #92b8d2;
  border-radius:50%;
  color:var(--teal);
  margin-bottom:28px}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--teal)}
h1,h2,h3 {
  line-height:1.13}
h1 {
  letter-spacing:-1.6px;
  margin:14px 0 20px}
h2 {
  margin:0 0 24px;
  letter-spacing:-.8px}
h3 {
  margin:34px 0 18px}
.role {
  max-width:230px}
.muted,.metadata {
  color:var(--muted)}
.profile nav {
  margin:32px 0;
  border-top:1px solid var(--line)}
.profile nav a {
  display:flex;
  gap:18px;
  padding:14px 0;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  }
.profile nav span {
  color:var(--muted);
  padding-top:3px}
.contact {
  overflow-wrap:anywhere}
.contact a {
  display:block;
  margin:9px 0}
.profile-foot {
  margin-top:30px;
  color:var(--muted)}
main {
  min-width:0}
.card {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:9px;
  padding:38px 40px;
  margin-bottom:24px;
  box-shadow:0 8px 30px #153b6410}
.section-label {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:20px}
.section-label:after {
  content:'';
  height:1px;
  background:var(--line);
  flex:1}
.intro {
  line-height:1.65}
.feature {
  margin:28px 0 0;
  background:#eaf2f9;
  border-left:3px solid var(--teal);
  padding:20px 24px}
.feature p {
  margin:5px 0}
.feature a {
  }
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:24px 0}
.tags span {
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:4px;
  }
.link-row {
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  }
.research-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.research-grid h4 {
  margin:12px 0}
.research-grid p {
  }
.library-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px}
.library-head a {
  }
.search {
  margin:4px 0 18px}
.search label {
  display:block;
  margin-bottom:7px}
input {
  width:100%;
  border:1px solid #9ab0c5;
  background:#fff;
  padding:12px 14px;
  border-radius:5px;
  color:var(--ink)}
[role=status] {
  margin:5px 0}
.bibliography, .course, .more {
  border-top:1px solid var(--line)}
details:last-child {
  border-bottom:1px solid var(--line)}
summary {
  display:flex;
  align-items:center;
  gap:12px;
  list-style:none;
  cursor:pointer;
  padding:12px 0;
  }
summary::-webkit-details-marker {
  display:none}
summary:after {
  content:'+';
  width:18px;
  text-align:center;
  color:var(--teal)}
details[open]>summary:after {
  content:'−'}
summary>span:first-child {
  flex:1}
.count {
  color:var(--muted);
  background:var(--paper);
  border-radius:20px;
  padding:2px 9px;
  margin-left:auto}
.entries {
  list-style:none;
  margin:0;
  padding:0}
.entry {
  border-top:1px solid #e0e7ee;
  padding:20px 0;
  overflow-wrap:anywhere}
.entry-title {
  line-height:1.5}
.entry p {
  margin:6px 0;
  }
.entry-links {
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  margin-top:9px}
.badge {
  display:inline-block;
  color:var(--teal);
  letter-spacing:.08em;
  margin-top:6px}
.course .course-content,.more>div {
  padding:0 0 20px;
  }
.course-content li {
  margin:9px 0}
.course-content ul,.course-content ol {
  padding-left:22px}
footer {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  padding:4px 0 20px}
address {
  font-style:normal;
  }
 [hidden] {
  display:none!important}
/* Give the main column more room on laptops; retain the mobile layout below. */
@media(max-width:1200px) {
  .shell {
  grid-template-columns:260px minmax(0,1fr);
  gap:24px;
  padding:30px 24px}
.card {
  padding:28px}
}
@media(max-width:950px) {
  .shell {
  grid-template-columns:240px minmax(0,1fr);
  gap:24px;
  padding:30px 24px}
.card {
  padding:28px}
h1 {
  }
.research-grid {
  grid-template-columns:1fr;
  gap:0}
}
@media(max-width:700px) {
  .shell {
  display:block;
  padding:25px 18px}
.profile {
  position:static}
.monogram {
  width:48px;
  height:48px;
  margin-bottom:20px}
h1 {
  max-width:none}
.role {
  max-width:none}
.profile nav {
  display:flex;
  gap:22px;
  margin:22px 0}
.profile nav a {
  border:0;
  }
.profile nav span {
  display:none}
.profile-foot {
  display:none}
.contact {
  margin-bottom:26px}
.contact a {
  display:inline-block;
  margin-right:18px}
.card {
  padding:26px 22px}
h2 {
  }
.intro {
  }
.library-head {
  align-items:center}
h3 {
  }
footer {
  gap:15px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}
@media print {
  body {
  background:white}
.shell {
  display:block;
  padding:0}
.profile {
  position:static}
.profile nav,.search,.skip {
  display:none}
.card {
  box-shadow:none;
  break-inside:avoid}
details:not([open])> *:not(summary) {
  display:block}
a {
  color:inherit}
}

.course-resource {
  border:1px solid var(--line);
  border-radius:6px;
  margin:14px 0;
  padding:22px;
  background:linear-gradient(135deg,#f0f5fa,#ffffff)}
.course-resource h4 {
  margin:0}


/* RAL 5010-inspired blue, with complementary copper and amber accents. */
body {
  background:radial-gradient(ellipse at top left,#dce8f4 0,transparent 52%),var(--paper)}

.profile {
  background:linear-gradient(155deg,#005b8c,#103958);
  color:#fff;
  padding:30px 25px;
  border-radius:9px;
  box-shadow:0 14px 35px #12395820;
  border-top:4px solid #d99351}

.profile .eyebrow {
  color:#f2ba83}
.profile .muted {
  color:#dbe7f0}
.profile h1 {
  }
.profile .monogram {
  color:#fff;
  border-color:#ffffff55;
  background:#ffffff0a}

.profile nav {
  border-color:#ffffff30;
  margin-bottom:0}
.profile nav a {
  color:#fff;
  border-color:#ffffff30}
.profile nav a:hover {
  color:#ffd4ab}
.profile nav span {
  color:#f2ba83}

.card {
  border-top:3px solid var(--blue);
  box-shadow:0 10px 28px #1239580b}
.section-label {
  color:var(--accent)}
.section-label:after {
  background:linear-gradient(90deg,#c77940aa,var(--line))}

.feature {
  border-left:3px solid var(--accent);
  background:linear-gradient(110deg,#e4eef7,#f3f7fb)}

.count {
  background:#e9f0f7;
  color:#245b80}
.badge {
  color:#974917}
.tags span {
  background:#f3f7fb}
.bibliography>summary:hover,.more>summary:hover {
  color:var(--blue);
  background:#f4f7fb}

.course-resource {
  border-left:3px solid #be743d}

footer {
  display:block;
  background:#103958;
  color:#e2edf5;
  border-radius:9px;
  padding:30px 34px;
  border-top:3px solid #d99351}
footer h2 {
  color:white;
  margin-bottom:20px}
.footer-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:28px}
footer a {
  color:#ffd0a1}
footer a:hover {
  color:#fff}
footer .contact a:first-child {
  margin-top:0}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:25px;
  border-top:1px solid #ffffff30;
  padding-top:18px}

@media(max-width:950px) and (min-width:701px) {
  .profile {
  padding:25px 18px}
.profile h1 {
  }
.footer-grid {
  grid-template-columns:1fr}
}

@media(max-width:700px) {
  .profile {
  padding:26px;
  margin-bottom:24px}
.profile h1 {
  }
.profile nav {
  margin-bottom:0}
.footer-grid {
  grid-template-columns:1fr;
  gap:16px}
footer {
  padding:26px 22px}
footer .contact {
  margin:0}
footer .contact a {
  display:block;
  margin:9px 0}
}

@media print {
  .profile,footer {
  background:white;
  color:var(--ink);
  box-shadow:none}
.profile .muted,.profile .eyebrow,.profile .monogram,footer h2,footer a {
  color:var(--ink)}
}

/* Stripe only visible records, so filtering preserves the alternating pattern. */
.entries>.entry {
  padding:20px 16px;
  border-top:0;
  border-bottom:0}

.entries>.entry:nth-child(odd of :not([hidden])) {
  background:#fafbfd}

.entries>.entry:nth-child(even of :not([hidden])) {
  background:#fff}

.research-grid {
  gap:18px 26px;
  margin-bottom:24px}
.research-grid>div {
  border-top:2px solid var(--line);
  padding-top:8px}
.research-grid>div:first-child {
  border-color:var(--accent)}

.statistics>p {
  }
.chart-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:20px 0 30px}
.chart-preview {
  display:block;
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px;
  text-decoration:none;
  background:#fff;
  transition:border-color .15s,box-shadow .15s}
.chart-preview>span {
  display:flex;
  justify-content:space-between;
  }
.chart-preview:hover {
  border-color:var(--blue);
  box-shadow:0 4px 14px #005b8c18}
.chart-preview img {
  display:block;
  width:100%;
  height:160px;
  object-fit:contain;
  margin-top:12px}
dialog {
  width:min(1050px,94vw);
  max-height:90vh;
  overflow:auto;
  border:1px solid var(--line);
  border-top:4px solid var(--accent);
  border-radius:9px;
  padding:28px;
  color:var(--ink);
  box-shadow:0 24px 90px #10263d55}
dialog::backdrop {
  background:#10263dbb}
.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px}
.dialog-heading h2 {
  margin:0}
.close-chart {
  background:var(--blue);
  color:white;
  border:0;
  border-radius:4px;
  padding:10px 16px;
  cursor:pointer;
  }
.close-chart:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px}
.chart-dialog-body svg {
  width:100%;
  height:auto;
  }
.chart-dialog-body table {
  width:100%;
  border-collapse:collapse;
  }
.chart-dialog-body caption {
  text-align:left;
  padding:12px 0;
  color:var(--muted)}
.chart-dialog-body th,.chart-dialog-body td {
  padding:8px;
  text-align:left;
  border-bottom:1px solid var(--line)}
.chart-dialog-body tr:nth-child(even) {
  background:#eaf1f8}
.chart-counts summary {
  justify-content:space-between}

@media(max-width:700px) {
  .chart-grid {
  grid-template-columns:1fr}
.chart-preview img {
  height:190px}
dialog {
  padding:18px}
.dialog-heading h2 {
  }
}

.chart-scroll {
  overflow-x:auto}
.chart-scroll svg {
  display:block;
  min-width:700px}
.chart-scroll:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:2px}

@media(min-width:1100px) {
  .chart-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.chart-preview {
  padding:12px}
.chart-preview img {
  height:135px}
}

.feature {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px}
.erc-logo {
  display:block;
  width:100px;
  height:auto;
  flex-shrink:0}
@media(max-width:420px) {
  .feature {
  gap:14px;
  padding:18px}
.erc-logo {
  width:76px}
}


/* Blend the original white logo background into the panel without altering the mark. */
.erc-logo {
  mix-blend-mode:multiply}
.feature {
  isolation:isolate}


/* Typography system: roles are shared across About, Research and Teaching.
   Body/prose and item headings: 16px; supporting information: 14px;
   labels/counts: 12px; subsection headings: 24px; main headings: 32px.
   Only heading tokens scale on narrow screens; body text stays readable. */
:root {
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: var(--font-body);
  --text-label: .75rem;
  --text-small: .875rem;
  --text-body: 1rem;
  --text-subsection: 1.5rem;
  --text-section: 2rem;
  --text-name: 2.4375rem;
  --leading-body: 1.65;
  --leading-heading: 1.25;
}
body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); }
button, input { font: inherit; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: var(--leading-heading); }
h1 { font-size: var(--text-name); }
h2 { font-size: var(--text-section); }
h3 { font-size: var(--text-subsection); }
h4, .entry-title, summary, .chart-preview > span {
  font-family: var(--font-body); font-size: var(--text-body); font-weight: 600; line-height: 1.5;
}
.card { font-size: var(--text-body); line-height: var(--leading-body); }
.card p, .intro, .research-grid p, .feature p, .course-resource p {
  font-size: var(--text-body); line-height: var(--leading-body);
}
.intro { font-weight: 400; }
.card .entry p, .entry-links, .link-row, .library-head > a,
.search label, .search input, [role="status"], .statistics > p,
.chart-dialog-body table, .chart-dialog-body > p, .contact, address {
  font-size: var(--text-small); line-height: var(--leading-body);
}
.eyebrow, .count, .badge, .profile nav span, .footer-bottom {
  font-size: var(--text-label); line-height: 1.5;
}
.eyebrow, .search label { font-weight: 600; }
.count { font-family: var(--font-body); font-weight: 500; }
.badge { font-weight: 600; }
.profile nav a, .feature a { font-weight: 600; }
.monogram { font-family: var(--font-heading); font-size: var(--text-subsection); }
footer h2, .dialog-heading h2 { font-size: var(--text-subsection); }
.course-resource h4 { margin: 0 0 12px; }
.course-resource p { margin: 8px 0; }
summary::after { font-size: var(--text-subsection); font-weight: 400; }
@media (max-width: 950px) and (min-width: 701px) {
  :root { --text-name: 2rem; }
}
@media (max-width: 700px) {
  :root { --text-section: 1.75rem; --text-subsection: 1.375rem; }
}

/* Simulation gallery: keep scientific images intact, on a neutral background. */
.simulation-gallery { margin: 0 0 32px; }
.card .gallery-intro, .simulation-card figcaption p, #gallery-caption, .gallery-controls, .gallery-original { font-size: var(--text-small); line-height: var(--leading-body); }
.simulation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.simulation-card { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.simulation-preview { display: flex; align-items: center; justify-content: center; height: 175px; padding: 10px; background: #fff; }
.simulation-preview:hover { background: #f6f8fb; }
.simulation-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.simulation-card figcaption { padding: 14px; border-top: 1px solid var(--line); }
.simulation-card h4 { margin: 0 0 8px; }
.simulation-card figcaption p { margin: 0; color: var(--muted); }
.gallery-enlarged { margin: 20px 0; }
.gallery-enlarged img { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #fff; }
#gallery-caption { margin-top: 16px; color: var(--muted); }
.gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gallery-controls button { border: 1px solid var(--line); border-radius: 4px; color: var(--blue); background: #f6f8fb; padding: 9px 14px; cursor: pointer; }
.gallery-controls button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.gallery-original { margin-bottom: 0; }
@media (max-width: 1100px) { .simulation-grid { grid-template-columns: 1fr; } .simulation-preview { height: 240px; } }
@media print { .simulation-card { break-inside: avoid; } }