/* Corentin Chatelier — adaptation of Dimension by HTML5 UP. */
:root { color-scheme: dark; --accent: #b8dedb; --muted: #b9c3cc; --line: rgba(216,231,238,.24); --panel: rgba(23,33,43,.96); }
html { scroll-behavior: smooth; }
body, input, select, textarea, button { font-family: 'Source Sans Pro', 'Segoe UI', sans-serif; }
body { background: #17232d; }
[hidden] { display: none !important; }
a { text-underline-offset: .2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
p { margin-bottom: 1.4rem; }
figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
figcaption { margin-top: .65rem; font-size: .8rem; color: var(--muted); }
.eyebrow { color: var(--accent); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.lead { font-size: 1.3rem; line-height: 1.55; }
.muted, .authors { color: var(--muted); }
.small { font-size: .88rem; }
.overline { text-decoration: overline; }
#wrapper { padding: 3rem 2rem; min-height: 100svh; gap: 2rem; }
#header { width: 58rem; }
#header > * { margin-top: 2.5rem; }
#header > *::before { top: calc(-2.5rem - 1px); height: calc(2.5rem + 1px); background: var(--line); }
#header .logo.portrait { width: 7.5rem; height: 7.5rem; padding: .35rem; border-color: var(--line); line-height: normal; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; border-radius: 50%; }
#header .content { border-color: var(--line); width: 100%; }
#header .content .inner { padding: 2.5rem 1.25rem; max-height: none; }
#header h1 { font-size: clamp(1.55rem, 4vw, 2.65rem); letter-spacing: .16em; margin: .7rem 0 1rem; }
#header .content .eyebrow { color: var(--accent); font-size: .7rem; margin-bottom: .75rem; }
#header .content .affiliation { letter-spacing: .15em; font-size: .77rem; margin-bottom: 1.2rem; }
#header .content .intro { text-transform: none; letter-spacing: .015em; font-size: 1.1rem; line-height: 1.65; color: #d7e0e6; }
#header nav { max-width: 100%; }
#header nav ul { border-color: var(--line); }
#header nav ul li { border-color: var(--line); }
#header nav ul li a { min-width: 0; padding: 0 1.25rem; height: 3rem; line-height: 3rem; font-size: .68rem; letter-spacing: .14em; }
#header .header-links { margin-top: 1.65rem; display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
#header .header-links::before { display: none; }
.header-links .icons { margin: 0; }
.header-links .cv-link { font-size: .75rem; letter-spacing: .08em; }
.header-links .cv-link span { margin-left: .4rem; }
.icons a { border-color: var(--line) !important; }
#bg:before { background-image: linear-gradient(130deg,rgba(13,30,39,.76),rgba(22,29,44,.62)),url('../../images/overlay.png'); }
#main { display: block; width: 54rem; }
#main article { opacity: 1; transform: none; width: 54rem; padding: 3.5rem; margin: 3rem 0; background: var(--panel); border: 1px solid var(--line); }
#main article h2.major { max-width: calc(100% - 1rem); font-size: clamp(1.2rem,3vw,1.75rem); letter-spacing: .16em; line-height: 1.4; margin-bottom: 2rem; padding-bottom: 1rem; overflow-wrap: anywhere; }
#main article h3:not(.section-heading), #main article h4 { text-transform: none; letter-spacing: 0; }
#main article .close { border: 0; }
#main article > .eyebrow { margin-bottom: .6rem; }
body.is-article-visible #wrapper { justify-content: flex-start; }
body.is-article-visible #wrapper::before { display: none; }
.js #main article { margin: 0; }
.js #main article.active { animation: reveal .26s ease-out; }
@keyframes reveal { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
.intro-grid { display: grid; grid-template-columns: 12rem 1fr; gap: 2rem; align-items: center; margin-bottom: 2rem; }
.intro-grid img { border-radius: 3px; }
.intro-grid p:last-child { margin-bottom: 0; }
.facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; padding: 1.8rem 0; margin: 0 0 1.5rem; border-block: 1px solid var(--line); }
.facts > div { display: flex; flex-direction: column-reverse; gap: .35rem; }
.facts dt { font-size: .75rem; font-weight: 300; color: var(--muted); }
.facts dd { margin: 0; font-size: 2rem; font-weight: 600; line-height: 1; }
.actions { flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0; }
ul.actions li { padding: 0; }
.button { font-size: .68rem; letter-spacing: .1em; }
.button.primary { background: #d7edeb; color: #14222c !important; }
.article-nav { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 3rem; display: flex; gap: .8rem 1.2rem; flex-wrap: wrap; font-size: .78rem; }
.skill-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem 2rem; margin: 2rem 0; }
.skill-grid section { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.skill-grid ul { padding-left: 1rem; margin-bottom: 0; font-size: .95rem; }
.wide-image { margin: 2rem 0; }
.wide-image img { width: 100%; border-radius: 3px; }
.research-item { display: grid; grid-template-columns: 2rem 1fr; gap: 1.3rem; padding: 2rem 0; border-top: 1px solid var(--line); }
.item-number { color: var(--accent); font-size: .75rem; padding-top: .1rem; }
.research-item h3 { font-size: 1.22rem; line-height: 1.5; }
.research-item .eyebrow { margin-bottom: .7rem; }
.research-item p:last-child { margin-bottom: 0; }
.section-heading { font-size: .85rem; letter-spacing: .15em; margin: 2.5rem 0 1.5rem; }
.timeline { list-style: none; padding: 0; }
.timeline li { display: grid; grid-template-columns: 7rem 1fr; gap: 1.5rem; padding: 1.3rem 0; border-top: 1px solid var(--line); }
.timeline .date { color: var(--accent); font-size: .85rem; }
.timeline h4 { font-size: 1.05rem; margin: 0 0 .4rem; }
.timeline p { margin: 0; }
.publication-controls { display: grid; grid-template-columns: 1fr 8rem; gap: 1rem; margin: 2rem 0 1rem; }
.publication-controls label { letter-spacing: .1em; font-size: .65rem; }
.publication-controls input { width: 100%; font-size: .95rem; }
.publication-controls select { font-size: .9rem; }
.publication-list { list-style: none; padding: 0; }
.publication { padding: 1.8rem 0; border-top: 1px solid var(--line); }
.publication-summary { display: grid; grid-template-columns: 4.8rem 1fr; gap: 1.4rem; }
.publication-cover { width: 4.8rem; height: 6.4rem; object-fit: contain; object-position: top; background: white; border-radius: 2px; }
.publication h3 { font-size: 1.07rem; line-height: 1.5; margin-bottom: .65rem; }
.publication h3 a { border-bottom: 0; }
.publication .eyebrow { font-size: .6rem; margin: 0 0 .6rem; }
.authors { font-size: .83rem; line-height: 1.6; margin-bottom: .6rem; }
.journal { color: var(--accent); font-size: .87rem; margin: 0; }
details { margin: 1rem 0 0; }
summary { cursor: pointer; font-size: .82rem; color: var(--accent); padding: .4rem 0; display: list-item; }
.publication > details { margin-left: 6.2rem; }
.publication-detail, .abstract { padding-top: 1rem; font-size: .94rem; }
.publication-detail figure { margin: 1.4rem 0; background: white; padding: .5rem; border-radius: 3px; }
.publication-detail figure img { max-height: 34rem; width: 100%; object-fit: contain; }
.reference-link { overflow-wrap: anywhere; font-size: .8rem; }
.talk { border-top: 1px solid var(--line); padding: 1.8rem 0; }
.talk h3 { font-size: 1.16rem; line-height: 1.5; }
.talk .eyebrow { margin-bottom: .65rem; }
.event-link { margin: 1rem 0 0; font-size: .82rem; }
.contact-links { display: flex; align-items: flex-start; gap: 1.5rem; flex-direction: column; margin: 2rem 0 1rem; }
.email-link { overflow-wrap: anywhere; max-width: 100%; }
.contact-info { display: grid; grid-template-columns: 5rem 1fr; gap: .75rem 1rem; margin: 2rem 0; }
.contact-info dt { color: var(--muted); font-size: .85rem; }
.contact-info dd { margin: 0; overflow-wrap: anywhere; }
.skip-link { position: fixed; top: .5rem; left: .5rem; transform: translateY(-200%); z-index: 10; background: #17232d; padding: .75rem; }
.skip-link:focus { transform: none; }
.js .skip-link[hidden] { display: none; }
@media (max-width: 736px) {
  #wrapper { padding: 2rem 1rem; }
  #header nav ul { display: grid; grid-template-columns: repeat(3,1fr); }
  #header nav ul li { border: 0; }
  #header nav ul li + li { border-left: 1px solid var(--line); }
  #header nav ul li:nth-child(4) { border-left: 0; }
  #header nav ul li:nth-child(n+4) { border-top: 1px solid var(--line); }
  #header nav ul li a { padding: 0 .9rem; }
  #main article { padding: 3rem 1.5rem 1.5rem; }
  .intro-grid { grid-template-columns: 8rem 1fr; gap: 1.2rem; }
  .lead { font-size: 1.15rem; }
  .timeline li { grid-template-columns: 6rem 1fr; gap: 1rem; }
}
@media (max-width: 480px) {
  #wrapper { padding: 1.25rem .8rem; gap: 1.5rem; }
  #header { padding: .5rem 0; }
  #header > * { margin-top: 1.7rem; }
  #header > *::before { top: calc(-1.7rem - 1px); height: calc(1.7rem + 1px); }
  #header .logo.portrait { width: 6rem; height: 6rem; }
  #header .content .inner { padding: 1.7rem .5rem; }
  #header h1 { letter-spacing: .11em; font-size: 1.65rem; }
  #header .content .affiliation { font-size: .66rem; }
  #header .content .intro { font-size: 1rem; }
  #header nav ul li a { font-size: .61rem; letter-spacing: .09em; padding: 0 .7rem; }
  #header .header-links { flex-direction: column; gap: .8rem; }
  #main article { padding: 3rem 1.1rem 1.25rem; }
  .intro-grid { display: block; }
  .intro-grid figure { max-width: 12rem; margin-bottom: 1.5rem; }
  .skill-grid { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: .4rem; }
  .publication-controls { grid-template-columns: 1fr; }
  .publication-summary { grid-template-columns: 3rem 1fr; gap: .9rem; }
  .publication-cover { width: 3rem; height: 4rem; }
  .publication > details { margin-left: 0; }
  .research-item { grid-template-columns: 1.2rem 1fr; gap: .8rem; }
  .facts { gap: .5rem; }
  .facts dt { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  body { background: white; color: black; }
  #bg, #header, #footer, .close, .article-nav, .publication-controls, .skip-link { display: none !important; }
  #wrapper, #main { display: block !important; padding: 0; width: 100%; }
  #main article { display: block !important; color: black; background: white; border: 0; padding: 1rem 0; margin: 0; break-after: page; }
  h1,h2,h3,h4,p,a,.muted,.eyebrow,.authors,.journal, .timeline .date, .facts dt { color: black !important; }
  .publication { break-inside: avoid; }
}