:root{
    --bg: #ffffff;
    --bg-elevated: #f6f7f9;
    --bg-card: #fbfbfd;
    --ink: #1a2233;
    --ink-dim: #5b6472;
    --ink-faint: #97a0ab;
    --line: rgba(20,30,50,0.09);
    --line-strong: rgba(20,30,50,0.16);
    --accent: #1e3a5f;       /* academic navy */
    --accent-soft: rgba(30,58,95,0.07);
    --gold: #6b5a2e;         /* muted bronze, for small labels */
    --teal: #3f5f6b;         /* muted slate teal, for venue meta */
    --radius: 10px;
    --maxw: 760px;
    --nav-h: 68px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 18px); }

  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  a{ color: inherit; text-decoration: none; }
  h1,h2,h3,h4{ font-family: "Fraunces", serif; font-weight: 600; margin:0; }
  ::selection{ background: var(--accent); color: #ffffff; }

  :focus-visible{
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* ---------- NAV ---------- */
  header.nav{
    position: fixed;
    top:0; left:0; right:0;
    height: var(--nav-h);
    z-index: 100;
    display:flex;
    align-items:center;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: border-color .35s ease, background .35s ease, box-shadow .35s ease;
  }
  header.nav.scrolled{
    background: rgba(255,255,255,0.92);
    border-bottom-color: var(--line);
    box-shadow: 0 8px 24px -18px rgba(20,30,50,0.25);
  }
  .nav-inner{
    width:100%;
    max-width: 820px;
    margin:0 auto;
    padding: 0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 24px;
  }
  .brand{
    display:flex;
    align-items:baseline;
    gap:8px;
    font-family:"Fraunces", serif;
    font-weight:700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    white-space:nowrap;
  }
  .brand .khmer-mark{
    font-family:"IBM Plex Sans", sans-serif;
    font-size: 0.68rem;
    color: var(--gold);
    letter-spacing: 0.14em;
    text-transform:uppercase;
  }
  nav.links{
    display:flex;
    gap: 4px;
    align-items:center;
  }
  nav.links a{
    position:relative;
    font-size: 0.86rem;
    padding: 8px 12px;
    color: var(--ink-dim);
    border-radius: 6px;
    transition: color .2s ease, background .2s ease;
    white-space:nowrap;
  }
  nav.links a:hover{ color: var(--ink); background: rgba(20,30,50,0.04); }
  nav.links a.active{ color: var(--ink); }
  nav.links a.active::after{
    content:"";
    position:absolute;
    left:12px; right:12px; bottom:3px;
    height:2px;
    background: var(--accent);
    border-radius: 2px;
  }

  .nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--line-strong);
    border-radius:8px;
    width:40px; height:40px;
    color: var(--ink);
    cursor:pointer;
    align-items:center;
    justify-content:center;
  }

  /* ---------- LAYOUT ---------- */
  main{
    position:relative;
    z-index:1;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: calc(var(--nav-h) + 56px) 24px 120px;
  }

  section{ scroll-margin-top: calc(var(--nav-h) + 18px); }
  section + section{ margin-top: 88px; }

  .eyebrow{
    display:flex;
    align-items:center;
    gap: 14px;
    margin-bottom: 26px;
  }
  .eyebrow .num{
    font-family:"IBM Plex Mono", monospace;
    font-size: 0.82rem;
    color: var(--gold);
    letter-spacing: 0.06em;
  }
  .eyebrow .rule{
    flex:1;
    height:1px;
    background: linear-gradient(90deg, var(--line-strong), transparent);
  }
  h2.section-title{
    font-size: 1.55rem;
    letter-spacing: 0.01em;
  }

  /* ---------- HERO ---------- */
  .hero{
    display:flex;
    gap: 30px;
    align-items:flex-start;
    margin-bottom: 8px;
  }
  .avatar{
    flex: 0 0 auto;
    width: 150px; height: 150px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(155deg, var(--accent), #3a5a82);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:"Fraunces", serif;
    font-weight:700;
    font-size: 2.1rem;
    color: #ffffff;
    box-shadow: 0 0 0 1px var(--line-strong), 0 16px 32px -18px rgba(30,58,95,0.35);
  }
  .avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .hero-text h1{
    font-size: 2.15rem;
    line-height:1.15;
    margin-bottom:8px;
  }
  .hero-text .role{
    color: var(--ink-dim);
    font-size: 1.02rem;
    margin-bottom: 4px;
  }
  .hero-text .loc{
    color: var(--ink-faint);
    font-size: 0.88rem;
    font-family:"IBM Plex Mono", monospace;
  }

  .hero-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin: 22px 0 26px;
  }
  .hero-links a{
    font-size: 0.82rem;
    padding: 7px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    color: var(--ink-dim);
    transition: all .2s ease;
    font-family:"IBM Plex Mono", monospace;
  }
  .hero-links a:hover{
    border-color: var(--accent);
    color: var(--ink);
    background: var(--accent-soft);
  }

  .bio p{ color: var(--ink-dim); margin: 0 0 14px; max-width: 75ch; text-align: justify; text-justify: inter-word; hyphens: auto; }
  .bio strong{ color: var(--ink); font-weight:600; }
  .bio strong.dr{ color: var(--ink); font-weight:600; }

  /* ---------- WORK EXPERIENCE ---------- */
  .job{
    display:grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
  }
  .job:first-of-type{ border-top: none; padding-top:0; }
  .job time{
    font-family:"IBM Plex Mono", monospace;
    font-size: 0.78rem;
    color: var(--gold);
    padding-top: 3px;
    white-space: nowrap;
  }
  .job h3{ font-size: 1.08rem; margin-bottom: 3px; }
  .job .org{ color: var(--ink-dim); font-size:0.9rem; margin-bottom: 10px; }
  .job ul{ margin:0; padding-left: 18px; color: var(--ink-dim); font-size: 0.94rem; }
  .job li{ margin-bottom: 6px; }
  .job li::marker{ color: var(--accent); }

  /* ---------- PUBLICATIONS ---------- */
  .pub-year{
    font-family:"IBM Plex Mono", monospace;
    color: var(--gold);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    margin: 30px 0 14px;
    text-transform: uppercase;
  }
  .pub-year:first-child{ margin-top:0; }

  .pub-card{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 16px;
    transition: border-color .2s ease;
  }
  .pub-card:hover{ border-color: var(--line-strong); }
  .pub-card h3{ font-size: 1.05rem; line-height:1.4; margin-bottom: 6px; }
  .pub-authors{ font-size: 0.88rem; color: var(--ink-dim); margin-bottom: 4px; }
  .pub-authors .me{ color: var(--ink); font-weight:600; }
  .pub-venue{
    font-family:"IBM Plex Mono", monospace;
    font-size: 0.78rem;
    color: var(--teal);
    margin-bottom: 12px;
  }
  .pub-desc{ color: var(--ink-dim); font-size: 0.9rem; margin-bottom: 14px; }

  .pub-links{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .pub-links a, .pub-links span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:"IBM Plex Mono", monospace;
    font-size: 0.76rem;
    padding: 7px 12px;
    border-radius: 7px;
    border: 1px solid var(--line-strong);
    color: var(--ink-dim);
  }
  .pub-links a{
    color: var(--ink);
    background: rgba(20,30,50,0.02);
    transition: all .18s ease;
  }
  .pub-links a:hover{
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--ink);
    transform: translateY(-1px);
  }
  .pub-links span.disabled{
    color: var(--ink-faint);
    opacity: 0.45;
    cursor: not-allowed;
    border-style: dashed;
  }
  .pub-links svg{ width:12px; height:12px; }

  /* ---------- EDUCATION ---------- */
  .edu-item{
    display:grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
  }
  .edu-item:first-of-type{ border-top:none; padding-top:0; }
  .edu-item time{
    font-family:"IBM Plex Mono", monospace;
    font-size: 0.78rem;
    color: var(--gold);
  }
  .edu-item h3{ font-size: 1.02rem; margin-bottom:3px; }
  .edu-item .org{ color: var(--ink-dim); font-size: 0.9rem; }
  .edu-note{
    display:inline-block;
    margin-top:8px;
    font-size: 0.78rem;
    color: var(--ink-faint);
    font-style: italic;
  }

  /* ---------- SHARING SESSION / TEACHING (list style) ---------- */
  .simple-list{ list-style:none; margin:0; padding:0; }
  .simple-list li{
    display:grid;
    grid-template-columns: 128px 1fr;
    gap:20px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    font-size: 0.94rem;
    color: var(--ink-dim);
  }
  .simple-list li:first-child{ border-top:none; padding-top:0; }
  .simple-list time{
    font-family:"IBM Plex Mono", monospace;
    font-size: 0.78rem;
    color: var(--gold);
  }
  .simple-list strong{ color: var(--ink); font-weight:600; }

  .placeholder-tag{
    display:inline-block;
    margin-top:10px;
    font-size: 0.74rem;
    font-family:"IBM Plex Mono", monospace;
    color: var(--teal);
    background: rgba(63,95,107,0.08);
    border: 1px dashed rgba(63,95,107,0.35);
    padding: 4px 9px;
    border-radius: 6px;
  }

  footer{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 40px 24px 60px;
    color: var(--ink-faint);
    font-size: 0.8rem;
    text-align:center;
    border-top: 1px solid var(--line);
    font-family:"IBM Plex Mono", monospace;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 800px){
    .job, .edu-item, .simple-list li{ grid-template-columns: 1fr; gap:4px; }
    .job time, .edu-item time, .simple-list time{ order:-1; }
  }

  @media (max-width: 680px){
    nav.links{
      position: fixed;
      top: var(--nav-h);
      left:0; right:0;
      background: rgba(255,255,255,0.98);
      backdrop-filter: blur(14px);
      flex-direction: column;
      align-items: stretch;
      padding: 10px 20px 20px;
      gap:2px;
      border-bottom: 1px solid var(--line);
      transform: translateY(-140%);
      opacity:0;
      transition: transform .3s ease, opacity .3s ease;
    }
    nav.links.open{ transform: translateY(0); opacity:1; }
    nav.links a{ padding: 12px 8px; font-size: 0.95rem; }
    .nav-toggle{ display:flex; }
    .hero{ flex-direction:column; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  }