/* Visual refinement over academic.css: real typefaces, warmer paper, editorial
   hierarchy. Structure and layout are untouched -- this only changes surfaces. */

:root{
  --paper:#fbfaf8;
  --paper-2:#f4f2ee;
  --ink:#1a1d1e;
  --muted:#5c6a6b;
  --line:#e4e0d9;
  --line-soft:#eeebe5;
  --accent:#1f5a60;
  --accent-soft:#2c7178;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}

/* ---------------------------------------------------------------- type */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--serif);letter-spacing:-.012em;font-weight:500}

/* Section headings stay uppercase sans -- serif caps read poorly. */
.section-heading h2,.about h2,.awards h2,.contact h2{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--muted);
  text-transform:uppercase;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  margin-bottom:4px;
}
.section-heading>p{color:var(--muted);font-size:15px;margin-top:14px}

.eyebrow{font-family:var(--sans);font-weight:600;letter-spacing:.14em;color:var(--accent-soft)}

/* ---------------------------------------------------------------- header */
.header{background:transparent;height:96px}
.brand{
  font-family:var(--serif);
  font-size:25px;
  font-weight:600;
  letter-spacing:-.02em;
  border-bottom:2px solid var(--accent);
  padding-bottom:1px;
}
nav{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.13em;color:var(--muted)}
nav a{transition:color .18s ease}
nav a:hover{color:var(--accent)}

/* ---------------------------------------------------------------- hero */
.hero{padding:64px 0 72px}
.hero .eyebrow{font-size:11px;color:var(--accent-soft);margin-bottom:18px}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(40px,4.6vw,58px);
  font-weight:450;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.hero .intro{font-size:16.5px;line-height:1.78;color:var(--muted);margin-top:26px;max-width:520px}
/* The eyebrow is p:nth-of-type(1), so the lead paragraph is the second p. */
.hero-copy>p.intro:nth-of-type(2){
  font-size:18.5px;
  line-height:1.66;
  color:#33403f;
}
.certification-note{
  display:inline-block;
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--accent);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 14px;
  margin-top:26px;
  transition:background .18s ease,border-color .18s ease;
}
.certification-note:hover{background:#eaf1f0;border-color:#cfd9d5}

/* Portrait: keep the offset frame, make it accent-toned rather than hard black. */
.academic-portrait:after{
  inset:20px -20px -20px 20px;
  border:2px solid var(--accent);
  opacity:.55;
}
.academic-portrait img{
  border-radius:2px;
  box-shadow:0 18px 40px -26px rgba(26,29,30,.55);
}

/* ---------------------------------------------------------------- buttons */
.button,.primary{
  font-family:var(--sans);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.01em;
  border:1px solid var(--ink);
  border-radius:3px;
  padding:9px 20px;
  background:transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.button:hover,.primary:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ------------------------------------------------- credentials stat band */
/* academic.css hides this; it is good content and breaks up the page. */
.credentials{
  display:grid;
  grid-template-columns:1.1fr repeat(3,1fr);
  gap:34px;
  align-items:start;
  padding:30px 0 34px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
}
.credentials>p{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.4;
  color:var(--muted);
  margin:0;
}
.credentials>p strong{
  font-family:var(--serif);
  font-size:inherit;
  font-weight:600;
  color:var(--ink);
  letter-spacing:0;
}
.credentials>div{display:flex;flex-direction:column;gap:5px}
.credentials>div strong{
  font-family:var(--serif);
  font-size:25px;
  font-weight:600;
  color:var(--accent);
  line-height:1.1;
}
.credentials>div span{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---------------------------------------------------------------- research */
.research-section{background:transparent}
.paper-number{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:3px;
  font-family:var(--serif);
  font-size:38px;
  font-weight:600;
  color:var(--accent);
}
.paper-number span{font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:var(--muted)}
.publication h3,.research-note h3{
  font-family:var(--serif);
  font-size:24px;
  font-weight:500;
  line-height:1.32;
  letter-spacing:-.012em;
}
.publication p,.research-note p{font-size:15px;color:var(--muted)}
.publication .citation{font-size:13.5px;color:#6d7a7a;font-style:italic}
.research-note{border-top:1px solid var(--line)}

.text-link,.research-note button{
  font-family:var(--sans);
  font-size:13.5px;
  font-weight:500;
  color:var(--accent);
  border-bottom:1px solid rgba(31,90,96,.35);
  transition:border-color .18s ease,color .18s ease;
}
.text-link:hover,.research-note button:hover{color:var(--accent-soft);border-bottom-color:var(--accent-soft)}

/* ---------------------------------------------------------------- projects */
.filters button{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:500;
  border-radius:999px;
  padding:7px 16px;
  border:1px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.filters button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.filters button:not(.active):hover{background:var(--paper-2);color:var(--ink)}
.search input{border-radius:3px;font-size:12.5px;padding-left:2px}

.project-card{border-bottom:1px solid var(--line-soft);padding-bottom:34px}
.project-media{
  border-radius:4px;
  overflow:hidden;
  background:var(--paper-2);
  box-shadow:0 14px 34px -28px rgba(26,29,30,.6);
}
.project-title h3{
  font-family:var(--serif);
  font-size:24px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.012em;
}
.project-meta{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.11em;color:var(--muted)}
.project-card>p{font-size:15px;color:var(--muted)}
.gallery-downloads strong{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--accent)}
.gallery-more{
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  border-radius:3px;
  transition:background .18s ease,color .18s ease;
}

/* ---------------------------------------------------------------- about */
.experience article{border-bottom:1px solid var(--line-soft)}
.experience h3{font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:-.01em}
.experience .dates{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.11em;color:var(--muted)}
.experience .role{font-size:13.5px;font-weight:500;color:var(--accent)}
.experience p{font-size:15px;color:var(--muted)}
.education h4{font-family:var(--serif);font-size:17px;font-weight:600}

/* ---------------------------------------------------------------- awards */
.achievement-grid article,.achievement-grid article:first-child{
  background:transparent;
  border-bottom:1px solid var(--line-soft);
  padding:22px 0;
}
.awards .achievement-grid strong{
  font-family:var(--serif);
  font-size:18px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:-.01em;
}
.award-category{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.12em;color:var(--accent-soft)}
.achievement-grid p{font-size:13.5px;color:var(--muted)}

/* ---------------------------------------------------------------- contact */
.contact{background:var(--paper-2);border-top:1px solid var(--line)}
.contact h2{border-bottom:0;padding-bottom:0}
.email{
  font-family:var(--serif);
  font-size:30px;
  font-weight:500;
  letter-spacing:-.015em;
  color:var(--accent);
  border-bottom:1px solid rgba(31,90,96,.3);
  transition:border-color .18s ease;
}
.email:hover{border-bottom-color:var(--accent)}
.contact-bottom a{font-size:12.5px;font-weight:500;color:var(--accent)}
.footer{border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--muted);padding-top:22px}

/* ---------------------------------------------------------------- dialog */
dialog{border-radius:6px;border-color:var(--line)}
.dialog-body h2{font-family:var(--serif);font-weight:500;border-bottom:0;text-transform:none;letter-spacing:-.015em;color:var(--ink);font-size:30px}

@media(max-width:1000px){
  .credentials{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:700px){
  body{font-size:16px}
  .hero{padding:26px 0 48px}
  .hero h1{font-size:clamp(32px,8.6vw,40px)}
  .hero .intro:first-of-type{font-size:17px}
  .credentials{grid-template-columns:1fr;gap:20px;padding:24px 0}
  .credentials>p{font-size:17px}
  .publication h3,.research-note h3,.project-title h3{font-size:21px}
  .email{font-size:22px}
}

/* Respect reduced-motion: the transitions above are decorative. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* Citation count on the publication card -- a credential, so it gets the serif
   numeral treatment rather than disappearing into the italic citation line. */
.publication .cite-count{
  display:flex;
  align-items:baseline;
  gap:9px;
  margin:12px 0 16px;
  font-size:13.5px;
  color:var(--muted);
}
.publication .cite-count strong{
  font-family:var(--serif);
  font-size:26px;
  font-weight:600;
  line-height:1;
  color:var(--accent);
}
.publication .cite-count span{font-size:11.5px;color:#8a9596}