/* Hallmark · editorial academic · warm paper / navy · fixed profile + long document.
   Reference-led restraint: P5 H5 E4 S5 R5 V4. Existing semantic tokens are reused. */
:root {
  color-scheme: light;
  --bg: #f4f6f1;
  --text: #171a16;
  --text-secondary: #454b42;
  --text-muted: #626b5b;
  --accent: #25361e;
  --accent-hover: #395228;
  --accent-soft: #879860;
  --border: #d9dfd3;
  --link: #395228;
  --max-width: 960px;
  --profile-width: 232px;
  --column-gap: 68px;
  --text-body: 16px;
  --text-heading: 25.12px;
  --text-name: 28px;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; max-width: 100%; overflow-x: hidden; background: var(--bg); color: var(--text-secondary); font: var(--text-body)/1.5 var(--font-serif); font-weight: 400; }
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--accent-soft); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 5px; }
.wrapper { width: var(--max-width); max-width: 100%; margin: 0 auto; padding: 0; display: grid; grid-template-columns: var(--profile-width) minmax(0, 1fr); column-gap: var(--column-gap); }
.profile { position: sticky; top: 0; align-self: start; text-align: center; padding-top: 64px; -webkit-font-smoothing: subpixel-antialiased; }
.avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto var(--space-lg); }
h1, h2, h3 { color: var(--accent); line-height: 1.1; }
h1 { font-size: var(--text-name); line-height: 1.1; font-weight: 500; margin: 0 0 20px; }
.identity { margin: 0 0 20px; line-height: 1.5; }
.email { font: 14px/1.5 var(--font-mono); color: var(--text-secondary); overflow-wrap: anywhere; }
.social { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: var(--space-xl); }
.social a { color: #25361E; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-weight: bold; font-size: 17px; }
.social a:hover { color: #25361E; text-decoration: none; }
.social svg { display: block; height: 20px; width: 20px; fill: currentColor; flex: 0 0 20px; }
.social a[aria-label="CV"] span { display: block; width: 20px; font-size: 13px; line-height: 20px; text-align: center; }
.social a[aria-label="LinkedIn"] svg { transform: scale(1.2); }
h2 { font-size: var(--text-heading); line-height: 1.1; font-weight: 500; margin: 2px 0 15px; }
section { min-width: 0; margin: 0 0 20px; padding: 64px 0 30px; scroll-margin-top: 20px; }
main > section { padding-top: 0; padding-bottom: 0; }
main > section:first-child { padding-top: 64px; }
p { margin: 0 0 20px; }
strong { font-weight: 700; }
.themes { padding-left: var(--space-lg); margin: var(--space-sm) 0 0; }
.themes li + li { margin-top: 0; }
.themes li::marker { color: var(--accent-soft); }
.experience-grid { display: grid; grid-template-columns: repeat(auto-fit, 260px); gap: 12px; }
.experience-card { min-height: 76px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 0; box-shadow: 0 2px 4px rgb(35 43 53 / 8%); }
.experience-logo { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; mix-blend-mode: multiply; }
.experience-copy { min-width: 0; }
.experience-copy .org { color: var(--text); font-size: 15px; line-height: 1.3; font-weight: 400; }
.experience-copy time { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 13px; font-style: italic; font-weight: 400; }
.news { padding-left: var(--space-lg); margin: 0; }
.news li { padding-bottom: var(--space-xs); }
.news time { color: var(--accent); white-space: nowrap; }
.publication-note { font-size: 12px; color: var(--text-muted); margin-top: calc(-1 * var(--space-sm)); }
.publication { display: grid; min-width: 0; grid-template-columns: 135px minmax(0, 1fr); gap: var(--space-lg); margin: var(--space-lg) 0 var(--space-xl); align-items: start; }
.publication > div { min-width: 0; }
.teaser { position: relative; background: #ffffff; min-height: 110px; display: flex; align-items: center; justify-content: center; }
.teaser img { width: 52px; height: 64px; opacity: .8; }
.teaser img.teaser-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 1; background: #fff; }
.teaser span { position: absolute; bottom: 0; left: 0; right: 0; background: var(--accent); color: var(--bg); font: 10px/1.4 var(--font-sans); padding: var(--space-xs); text-align: center; }
h3 { font-size: 16px; line-height: 1.4; margin: 0 0 var(--space-xs); }
.authors { font-size: 13px; line-height: 1.6; margin-bottom: var(--space-xs); }
.venue { font-size: 13px; font-style: italic; margin-bottom: var(--space-sm); }
.paper-links { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.paper-links a { font: 11px/1.5 var(--font-sans); border: 1px solid var(--accent); padding: 1px 7px; color: var(--accent); }
.paper-links a:hover { background: var(--accent); color: var(--bg); text-decoration: none; }
footer { font-size: 11px; line-height: 1.7; color: var(--text-muted); margin-top: var(--space-2xl); }
.skip-link { position: absolute; left: -10000px; top: var(--space-sm); }
.skip-link:focus { left: var(--space-md); background: var(--bg); padding: var(--space-sm); }
.language-notice { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; padding: 6px 16px; background: var(--accent); color: #d6d9d3; font: 13px/1.5 var(--font-sans); text-align: center; }
.language-notice[hidden] { display: none; }
.language-notice button { border: 0; padding: 0; background: transparent; color: #d6d9d3; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.language-notice button:hover { color: #fff; }
@media (max-width: 1060px) { .wrapper { padding-inline: var(--space-xl); --column-gap: 48px; --profile-width: 220px; } }
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  .wrapper { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; width: 100%; max-width: 690px; min-width: 0; padding: 24px 20px 32px; }
  .profile { position: static; width: 100%; min-width: 0; padding: 0; margin: 0 0 20px; border-bottom: 0; }
  .avatar { margin-bottom: 12px; width: 88px; height: 88px; }
  h1 { font-size: clamp(24px, 6vw, 28px); margin-bottom: 8px; }
  h2 { font-size: clamp(21px, 5.5vw, 24px); }
  .identity { margin-bottom: 12px; }
  .social { margin-top: 16px; }
  main { width: 100%; min-width: 0; }
  main > section:first-child { padding-top: 0; }
  .experience-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .experience-card { min-height: 68px; }
  .experience-logo { width: 44px; height: 44px; flex-basis: 44px; }
  .affiliation { flex-basis: 120px; }
}
@media (max-width: 440px) {
  .language-notice { flex-wrap: wrap; gap: 2px 6px; font-size: 12px; }
  .publication { grid-template-columns: 86px minmax(0, 1fr); gap: var(--space-md); }
  .teaser { min-height: 95px; }
  .teaser img { width: 40px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }