:root {
      color-scheme: light;
      --ink: #14243a;
      --muted: #52647a;
      --blue: #244f9e;
      --blue-dark: #193d7d;
      --sky: #e8f0fb;
      --paper: #ffffff;
      --canvas: #f4f7fb;
      --line: #dce4ee;
      --accent: #e5aa35;
      --serif: Georgia, "Times New Roman", serif;
      --sans: "DM Sans", Arial, sans-serif;
      --display: "Manrope", "DM Sans", Arial, sans-serif;
      --max: 1160px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 94px; }
    body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 17px; line-height: 1.65; }
    a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 4px; }
    a:hover { color: var(--blue-dark); }
    a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
    .wrap { width: min(var(--max), calc(100% - 56px)); margin-inline: auto; }
    .topbar { position: sticky; inset-block-start: 0; z-index: 10; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
    .nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .wordmark { font: 800 16px/1 var(--display); letter-spacing: -.04em; color: var(--ink); text-decoration: none; white-space: nowrap; }
    .wordmark span { color: var(--blue); }
    .navlinks { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); }
    .navlinks a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
    .navlinks a:hover { color: var(--blue); }
    .navlinks .contact-link { color: white; background: var(--blue); border-radius: 5px; padding: 9px 15px; }
    .navlinks .contact-link:hover { background: var(--blue-dark); color: white; }
    .hero { overflow: hidden; background: var(--ink); color: white; }
    .hero-inner { min-height: 580px; display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(280px, .76fr); align-items: center; gap: 64px; padding-block: 72px; }
    .eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 24px; color: #9cb9ea; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
    .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
    h1, h2, h3, p { margin-top: 0; }
    h1 { max-width: 730px; margin-bottom: 21px; font: 800 clamp(3.25rem, 6.2vw, 5.8rem)/.99 var(--display); letter-spacing: -.075em; }
    .hero-lead { max-width: 690px; margin-bottom: 18px; color: #d9e3f1; font: 400 clamp(1.35rem, 2.3vw, 1.82rem)/1.35 var(--serif); }
    .hero-copy { max-width: 690px; margin-bottom: 28px; color: #b8c7da; font-size: 16px; }
    .affiliation { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 13px; color: #fff; font-weight: 600; font-size: 14px; }
    .affiliation .dot { color: var(--accent); }
    .hero-portrait { position: relative; justify-self: end; width: min(100%, 370px); aspect-ratio: 4/5; padding: 11px; border: 1px solid rgba(191,211,241,.32); }
    .hero-portrait::after { position: absolute; content: ""; width: 74px; height: 74px; right: -24px; bottom: -24px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
    .hero-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; background: #263a56; }
    .institution-strip { padding-block: 21px; border-bottom: 1px solid var(--line); background: #fff; }
    .institution-strip-inner { display: flex; align-items: center; justify-content: center; gap: clamp(42px, 8vw, 96px); }
    .institution-logo { min-height: 42px; color: var(--ink); text-decoration: none; transition: opacity .18s ease; }
    .institution-logo:hover { opacity: .78; }
    .ieseg-logo { display: flex; align-items: center; gap: 9px; }
    .ieseg-globe { width: 38px; height: 38px; flex: 0 0 auto; }
    .ieseg-wordmark { display: flex; flex-direction: column; line-height: 1; }
    .ieseg-wordmark strong { font: 700 22px/.95 Arial, sans-serif; letter-spacing: .045em; color: #092449; }
    .ieseg-wordmark small { margin-top: 4px; font: 600 8px/1 Arial, sans-serif; letter-spacing: .075em; text-transform: uppercase; color: #092449; }
    .fdc-wordmark { display: flex; align-items: center; gap: 9px; height: 40px; color: #672a71; }
    .fdc-wordmark strong { font: 700 39px/.9 Georgia, serif; letter-spacing: -.08em; }
    .fdc-wordmark i { display: block; width: 2px; height: 38px; background: #ed8952; }
    .fdc-wordmark small { font: 500 10px/1.05 Arial, sans-serif; }
    .section { padding-block: 92px; }
    .section-head { display: grid; grid-template-columns: 220px 1fr; gap: 50px; align-items: start; margin-bottom: 40px; }
    .section-kicker { margin: 8px 0 0; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
    h2 { margin-bottom: 0; font: 700 clamp(2rem, 3.4vw, 3rem)/1.12 var(--display); letter-spacing: -.055em; }
    .section-intro { max-width: 780px; margin: 17px 0 0; color: var(--muted); }
    .research { background: var(--canvas); }
    .research-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
    .research-item { min-height: 158px; padding: 25px 28px; background: white; border: 1px solid var(--line); display: flex; align-items: flex-start; gap: 20px; }
    .research-num { padding-top: 2px; color: var(--blue); font: 700 13px/1 var(--display); letter-spacing: .08em; }
    .research-item p { margin: 0; max-width: 460px; font: 600 19px/1.4 var(--display); letter-spacing: -.025em; }
    .bio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
    .bio-block h3 { margin-bottom: 24px; color: var(--blue); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; }
    .timeline { border-top: 1px solid var(--line); }
    .timeline-item { display: grid; grid-template-columns: 74px 1fr; gap: 18px; padding: 19px 0; border-bottom: 1px solid var(--line); }
    .timeline-label { padding-top: 3px; color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
    .timeline-item p { margin: 0; }
    .timeline-item strong { font-weight: 700; }
    .timeline-item small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
    .news { background: var(--sky); }
    .news-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
    .news-card { display: flex; flex-direction: column; min-height: 310px; padding: 27px; background: white; border: 1px solid #d3deed; }
    .news-type { margin-bottom: 29px; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
    .news-card h3 { margin-bottom: 13px; font: 700 21px/1.28 var(--display); letter-spacing: -.04em; }
    .news-card p { margin-bottom: 19px; color: var(--muted); font-size: 15px; }
    .news-card .card-link { margin-top: auto; font-size: 14px; font-weight: 700; }
    .video-frame { width: 100%; aspect-ratio: 16/9; border: 0; margin: 0 0 16px; background: #14243a; }
    .contact { background: var(--ink); color: white; }
    .contact .section-kicker { color: #9cb9ea; }
    .contact h2 { max-width: 680px; }
    .contact-grid { display: flex; justify-content: space-between; gap: 48px; margin-top: 38px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.2); }
    .contact-email { color: #fff; font: 600 19px/1.4 var(--display); text-decoration-color: var(--accent); }
    .socials { display: flex; flex-wrap: wrap; gap: 10px 21px; }
    .socials a { color: #cfdaea; font-size: 14px; }
    footer { padding-block: 21px; background: #0e1b2d; color: #9eafc4; font-size: 12px; }
    .footer-inner { display:flex; justify-content:space-between; gap:20px; }
    @media (max-width: 820px) {
      .hero-inner { min-height: unset; grid-template-columns: 1fr 260px; gap: 34px; padding-block: 65px; }
      .hero-portrait { width: 260px; }
      .section-head { grid-template-columns: 155px 1fr; gap: 25px; }
      .bio-grid { gap: 42px; }
      .news-grid { grid-template-columns: 1fr 1fr; }
      .news-card:last-child { grid-column: 1 / -1; min-height: 250px; }
    }
    @media (max-width: 620px) {
      body { font-size: 16px; }
      .wrap { width: min(var(--max), calc(100% - 36px)); }
      .nav { min-height: 64px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 11px; padding-block: 13px; }
      .navlinks { width: 100%; gap: 21px; overflow-x: auto; padding-bottom: 2px; }
      .navlinks a { font-size: 13px; white-space: nowrap; }
      .navlinks .contact-link { padding: 5px 10px; }
      .hero-inner { grid-template-columns: 1fr; gap: 30px; padding-block: 50px 58px; }
      h1 { font-size: clamp(3.2rem, 17vw, 5rem); }
      .hero-portrait { justify-self: start; width: min(72%, 270px); }
      .institution-strip { padding-block: 17px; }
      .institution-strip-inner { gap: clamp(25px, 8vw, 42px); }
      .ieseg-globe { width: 32px; height: 32px; }
      .ieseg-wordmark strong { font-size: 19px; }
      .ieseg-wordmark small { font-size: 7px; }
      .fdc-wordmark { gap: 7px; }
      .fdc-wordmark strong { font-size: 34px; }
      .fdc-wordmark i { height: 32px; }
      .fdc-wordmark small { font-size: 9px; }
      .section { padding-block: 66px; }
      .section-head { display: block; margin-bottom: 28px; }
      .section-kicker { margin: 0 0 15px; }
      h2 { font-size: 2.25rem; }
      .research-grid, .bio-grid, .news-grid { grid-template-columns: 1fr; }
      .research-item { min-height: 122px; padding: 22px; }
      .bio-grid { gap: 48px; }
      .news-card, .news-card:last-child { grid-column: auto; min-height: 250px; }
      .contact-grid { flex-direction: column; gap: 25px; }
      .footer-inner { flex-direction: column; gap: 4px; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    .research .news-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .page-title { margin: 0; font: 800 clamp(2.8rem,5vw,4.8rem)/1.02 var(--display); letter-spacing: -.07em; }
    .subhead { margin: 54px 0 21px; padding-top: 22px; border-top: 1px solid var(--line); font: 700 1.45rem/1.3 var(--display); letter-spacing: -.04em; }
    .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .list-grid a { padding: 18px 20px; background: white; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.4; }
    .list-grid a:hover { border-color: var(--blue); color: var(--blue); }
    .publication-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
    .publication-list li { padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
    .publication-list a { color: var(--ink); }
    .conference-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; }
    .conference-columns h3 { margin: 25px 0 13px; color: var(--blue); font: 700 1.04rem/1.4 var(--display); }
    .conference-columns .publication-list { border-top: 0; }
    .conference-columns .publication-list li { padding: 10px 0; }
    .teaching-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
    .teaching-card { min-height: 220px; padding: 27px; border: 1px solid var(--line); background: white; }
    .teaching-card h3 { margin: 0 0 18px; font: 700 1.3rem/1.25 var(--display); letter-spacing: -.035em; }
    .teaching-card p { color: var(--muted); font-size: 15px; }
    .service-group { margin-top: 18px; padding: 26px 28px; border: 1px solid var(--line); background: white; }
    .service-group h3 { margin: 0 0 14px; font: 700 1.18rem/1.35 var(--display); }
    .service-group h4 { margin: 22px 0 10px; color: var(--blue); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }
    .service-group ul { margin: 0; padding-left: 21px; color: var(--muted); }
    .service-group li { padding: 4px 0; }
    .media-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .media-list a { display: block; padding: 18px 20px; background: white; border: 1px solid var(--line); color: var(--ink); font-weight: 600; line-height: 1.4; text-decoration: none; }
    .media-list a:hover { border-color: var(--blue); color: var(--blue); }
    .media-list a::after { content: " ↗"; color: var(--blue); white-space: nowrap; }
    @media (max-width: 620px) { .list-grid,.conference-columns,.teaching-grid,.media-list { grid-template-columns: 1fr; } .service-group { padding: 21px; } }
