:root {
      --background: #f4f7fb;
      --surface: #ffffff;
      --primary: #063970;
      --primary-dark: #04294f;
      --accent: #1f78d1;
      --text: #1f2933;
      --muted: #61748f;
      --radius: 18px;
      --shadow: 0 20px 50px rgba(15, 32, 68, 0.08);
      --max-width: 1120px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
      background: linear-gradient(180deg, rgba(240, 248, 255, 0.65), var(--background));
      color: var(--text);
      line-height: 1.7;
      scroll-behavior: smooth;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
    }

    .skip-link {
      position: absolute;
      left: -999px;
      top: 1rem;
      background: var(--primary);
      color: #fff;
      padding: 0.75rem 1rem;
      border-radius: 0 12px 12px 0;
      z-index: 1000;
      transition: left 0.3s ease;
    }

    .skip-link:focus {
      left: 0;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 999;
      backdrop-filter: blur(16px);
      background: rgba(255, 255, 255, 0.85);
      box-shadow: 0 1px 12px rgba(6, 57, 112, 0.08);
    }

    .nav-container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0.75rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand {
      font-weight: 700;
      font-size: 1.05rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--primary);
    }

    nav ul {
      margin: 0;
      padding: 0;
      display: flex;
      gap: 1.25rem;
      list-style: none;
      align-items: center;
    }

    nav a {
      text-decoration: none;
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--muted);
      padding: 0.35rem 0.5rem;
      border-radius: 999px;
      transition: background 0.25s ease, color 0.25s ease;
    }

    nav a:focus-visible,
    nav a:hover,
    nav a[aria-current="page"] {
      background: rgba(31, 120, 209, 0.12);
      color: var(--primary);
      outline: none;
    }

    .nav-toggle {
      display: none;
    }

    main {
      padding: 0 1.5rem 4rem;
    }

    section {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 4rem 0;
    }

    h1,
    h2,
    h3,
    h4 {
      color: var(--primary-dark);
      margin: 0 0 1rem;
      line-height: 1.25;
      font-weight: 700;
    }

    h2 span {
      display: block;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.2em;
      margin-bottom: 0.35rem;
    }

    p {
      margin: 0 0 1rem;
      color: var(--muted);
      font-size: 1.05rem;
    }

    .hero {
      display: grid;
      gap: 3rem;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      align-items: center;
      padding-top: 6rem;
    }

    .hero-copy h1 {
      font-size: clamp(2.2rem, 5vw, 3.2rem);
    }

    .hero-subtitle {
      font-size: 1.15rem;
      color: var(--muted);
      margin-bottom: 2rem;
      max-width: 32rem;
    }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
    }

    .btn-primary,
    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none;
      font-weight: 600;
      border-radius: 999px;
      padding: 0.85rem 1.5rem;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--primary), var(--accent));
      color: #fff;
      box-shadow: 0 12px 24px rgba(6, 57, 112, 0.22);
    }

    .btn-primary:hover,
    .btn-primary:focus-visible {
      transform: translateY(-2px);
    }

    .btn-outline {
      border: 1px solid rgba(6, 57, 112, 0.18);
      color: var(--primary);
      background: #fff;
    }

    .btn-outline:hover,
    .btn-outline:focus-visible {
      background: rgba(6, 57, 112, 0.08);
    }

    .stats-card {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      background: rgba(255, 255, 255, 0.92);
      border-radius: var(--radius);
      padding: 1.5rem;
      box-shadow: var(--shadow);
    }

    .stat {
      text-align: center;
    }

    .stat strong {
      display: block;
      font-size: 1.8rem;
      color: var(--primary);
    }

    .card-grid {
      display: grid;
      gap: 1.75rem;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 1.75rem;
      box-shadow: var(--shadow);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .card:hover,
    .card:focus-within {
      transform: translateY(-6px);
      box-shadow: 0 24px 45px rgba(6, 57, 112, 0.16);
    }

    .card h3 {
      font-size: 1.25rem;
      margin-bottom: 0.75rem;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.8rem;
      color: var(--primary);
      background: rgba(31, 120, 209, 0.12);
      padding: 0.35rem 0.7rem;
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .timeline {
      position: relative;
      padding-left: 1.25rem;
      border-left: 2px solid rgba(6, 57, 112, 0.2);
      display: grid;
      gap: 2.5rem;
    }

    .timeline-entry {
      position: relative;
      padding-left: 1rem;
    }

    .timeline-entry::before {
      content: "";
      position: absolute;
      left: -1.72rem;
      top: 0.35rem;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      box-shadow: 0 0 0 6px rgba(31, 120, 209, 0.16);
    }

    .timeline-entry h3 {
      margin-bottom: 0.25rem;
    }

    .timeline-entry span {
      display: block;
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 0.75rem;
    }

    .pill-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
    }

    .pill-list li {
      padding: 0.4rem 0.9rem;
      border-radius: 999px;
      background: rgba(6, 57, 112, 0.08);
      color: var(--primary-dark);
      font-size: 0.9rem;
      font-weight: 600;
    }

    .projects {
      display: grid;
      gap: 2rem;
    }

    .project-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 2rem;
      box-shadow: var(--shadow);
      display: grid;
      gap: 1rem;
    }

    .project-card h3 {
      margin-bottom: 0.35rem;
    }

    .project-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      font-size: 0.9rem;
      color: var(--muted);
    }

    .project-meta span {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.35rem 0.65rem;
      border-radius: 999px;
      background: rgba(31, 120, 209, 0.12);
      color: var(--primary);
      font-weight: 600;
    }

    blockquote {
      margin: 0;
      padding: 1.5rem 2rem;
      background: rgba(255, 255, 255, 0.92);
      border-left: 4px solid var(--accent);
      border-radius: 0 var(--radius) var(--radius) 0;
      color: var(--muted);
      font-size: 1.1rem;
      font-style: italic;
      box-shadow: var(--shadow);
    }

    .cta {
      text-align: center;
      background: linear-gradient(135deg, rgba(6, 57, 112, 0.95), rgba(31, 120, 209, 0.88));
      color: #fff;
      padding: 4rem;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .cta h2,
    .cta p {
      color: inherit;
    }

    .cta p {
      max-width: 38rem;
      margin: 0.5rem auto 2rem;
    }

    .site-footer {
      margin-top: 3rem;
      background: #031a30;
      color: rgba(255, 255, 255, 0.8);
      padding: 2rem 1.5rem;
    }

    .site-footer .footer-content {
      max-width: var(--max-width);
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 1rem;
      font-size: 0.95rem;
      align-items: center;
    }

    .site-footer a {
      color: #fff;
      text-decoration: none;
      font-weight: 600;
    }

    .site-footer a:hover,
    .site-footer a:focus-visible {
      text-decoration: underline;
    }

    @media (max-width: 840px) {
      .nav-container {
        padding: 0.75rem 1.25rem;
        width: 100%;
        gap: 0.75rem;
        justify-content: flex-start;
      }

      nav {
        order: 3;
        position: relative;
        width: auto;
      }

      nav ul {
        position: absolute;
        top: calc(100% + 0.75rem);
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        background: rgba(255, 255, 255, 0.95);
        padding: 1.25rem 1.5rem;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        min-width: min(18rem, 80vw);
        display: none;
        z-index: 1000;
      }

      nav ul::before {
        content: "";
        position: absolute;
        top: -0.75rem;
        right: 1.5rem;
        width: 1rem;
        height: 1rem;
        transform: rotate(45deg);
        background: rgba(255, 255, 255, 0.95);
        box-shadow: -5px -5px 15px rgba(6, 57, 112, 0.03);
        pointer-events: none;
      }

      nav ul[data-visible="true"] {
        display: flex;
      }

      .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
        border: 1px solid rgba(6, 57, 112, 0.18);
        background: rgba(6, 57, 112, 0.08);
        color: var(--primary);
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
        margin-left: auto;
      }

      .nav-toggle:hover {
        background: rgba(6, 57, 112, 0.14);
      }

      .nav-toggle:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }

      .nav-toggle[aria-expanded="true"] {
        background: var(--primary);
        color: #fff;
      }

      .nav-toggle[aria-expanded="true"]:hover {
        background: var(--primary-dark);
      }

      .nav-toggle .icon-close {
        display: none;
      }

      .nav-toggle[aria-expanded="true"] .icon-open {
        display: none;
      }

      .nav-toggle[aria-expanded="true"] .icon-close {
        display: inline;
      }
    }

    @media (max-width: 640px) {
      .hero {
        padding-top: 3rem;
      }

      .cta {
        padding: 3rem 1.5rem;
      }
    }
  
/* 2026 review: explicit grid, accessible type, scoping and mobile menu */
:root{--muted:#485b70;--border:#d8e2ee}
html{scroll-padding-top:5.2rem}
body{color:#1c2936}
a:focus-visible,button:focus-visible{outline:3px solid #1768bd;outline-offset:3px}
section{scroll-margin-top:5.2rem}
header.site-header{background:rgba(255,255,255,.97)}
.brand-link{text-decoration:none}
.site-nav{display:flex;align-items:center}
.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);padding-top:4.5rem}
.hero-copy h1{font-size:clamp(2.7rem,5.5vw,4.1rem);letter-spacing:-.035em}
.hero-role{color:var(--primary);font-size:1.25rem;font-weight:650}
.hero-credentials{display:grid;gap:1.15rem}
.hero-credentials .credential{border-bottom:1px solid #e1e9f3;padding-bottom:.8rem}
.hero-credentials .credential:last-child{border:0;padding:0}
.hero-credentials strong,.hero-credentials span{display:block}
.hero-credentials strong{color:var(--primary-dark);font-size:1rem}
.hero-credentials span{font-size:.86rem;color:var(--muted)}
.long-text{max-width:76ch}
.section-intro{max-width:78ch;margin-bottom:1.6rem}
.overline{display:block;color:var(--accent);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;font-weight:750;margin-bottom:.65rem}
.section-intro h2{font-size:clamp(1.8rem,3vw,2.45rem)}
.section-intro p{margin:0}
.academic-tag{display:inline-block;background:#e2edfc;color:var(--primary);font-weight:750;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;border-radius:30px;padding:.4rem .8rem;margin-bottom:1rem}
.card{min-width:0;border:1px solid #e1e8f1}
.card h3{font-size:1.17rem}
.card p:last-child{margin-bottom:0}
.card .small-label{font-size:.73rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:750}
.two-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}
.feature-box{background:#e8f2fd;border:1px solid #d4e3f3;border-radius:var(--radius);padding:1.6rem}
.publications{list-style:none;padding:0;margin:0;counter-reset:pub}
.publications li{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:1rem;align-items:start;border-bottom:1px solid #dbe4f0;padding:1.2rem 0;counter-increment:pub}
.publications li::before{content:counter(pub,decimal-leading-zero);color:var(--accent);font-weight:800;font-size:.82rem}
.publications strong{color:var(--primary-dark);display:block;line-height:1.45}
.publications .details{display:block;color:var(--muted);font-size:.87rem;margin-top:.3rem}
.publications a{white-space:nowrap;font-weight:700;font-size:.88rem}
.text-note{font-size:.89rem;color:var(--muted);margin-top:1rem}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tags span{background:#eaf2fa;color:var(--primary-dark);padding:.25rem .6rem;border-radius:8px;font-size:.85rem;font-weight:650}
.experience-summary{display:grid;grid-template-columns:minmax(180px,.58fr) minmax(0,1.42fr);gap:2rem}
.experience-summary h3{margin-top:.1rem}
.experience-summary p{color:var(--muted)}
.project-card{border:1px solid #e1e8f1}
.project-card p:last-child{margin-bottom:0}
.site-footer{background:#031a30;margin-top:0}
.site-footer .footer-content{max-width:var(--max-width)}
.site-footer a{color:white}
.hero .stats-card{display:block}
.hero-cta{gap:.7rem}
.hero-cta a{min-height:44px}
.header-note{font-size:.94rem;color:var(--muted)}
.site-nav nav{display:block}
.cv-sheet{max-width:880px;margin:2rem auto;padding:2rem;background:white;border-radius:18px;border:1px solid #dae5ef}
.cv-sheet h1{font-size:2.3rem}.cv-sheet h2{font-size:1.3rem}
.cv-sheet section{padding:1.2rem 0;border-top:1px solid #dce6ef}
.cv-sheet p,.cv-sheet li{font-size:.98rem}
.cv-sheet .cv-top{padding:0 0 1.5rem}
.cv-sheet .cv-top p{margin:.3rem 0}
.cv-sheet ul,.cv-sheet ol{padding-left:1.5rem}
.cv-sheet li{margin-bottom:.55rem}
.cv-controls{display:flex;flex-wrap:wrap;gap:.65rem;margin:1rem 0}
.cv-controls button{border:0;cursor:pointer;font:inherit}
@media(max-width:840px){
 .nav-container{position:relative}
 nav{position:static;order:unset}
 .site-nav{position:absolute;top:calc(100% + .35rem);right:1.25rem;left:1.25rem;min-width:0;width:auto;z-index:1010;display:flex}
 .site-nav ul{position:static;width:100%;min-width:0;margin:0}
 .site-nav ul[data-visible=false]{display:flex}
 .js .site-nav ul[data-visible=false]{display:none}
 .js .site-nav ul[data-visible=true]{display:flex}
 .nav-toggle{margin-left:auto}
 .hero{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
 main{padding:0 1rem 2rem}
 section{padding:2.7rem 0}
 .card-grid,.two-cols,.experience-summary{grid-template-columns:minmax(0,1fr)}
 .hero{padding-top:3rem;gap:1.7rem}
 .publications li{grid-template-columns:1.5rem minmax(0,1fr);gap:.6rem}
 .publications a{grid-column:2}
 .cta{padding:2rem 1.2rem}
 .cv-sheet{margin:0;padding:1rem;border:0}
}
@media(max-width:360px){.hero-cta{flex-direction:column;align-items:stretch}.hero-cta a{justify-content:center}}
@media(prefers-reduced-motion:reduce){html,body{scroll-behavior:auto!important}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media print{
 body{background:white;color:#111;font-size:10pt}
 .site-header,.site-footer,.cv-controls,.skip-link{display:none!important}
 .cv-sheet{padding:0;margin:0;border:0;max-width:none}
 .cv-sheet section{break-inside:avoid;padding:.6rem 0}
 .cv-sheet p,.cv-sheet li{font-size:9pt}
 .cv-sheet h1{font-size:23pt}
 .cv-sheet h2{font-size:13pt}
 .cv-sheet a{color:#111;text-decoration:none}
 @page{size:A4;margin:15mm}
}