@font-face{
  font-family:'Commit Mono';
  src:url('../fonts/commit-mono/CommitMono-Variable.woff2') format('woff2');
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#F8F8F9;
  --ink:#131315;
  --mut:#6E6E72;
  --line:#E2E2E5;
  --line2:#ECECEE;
  --acc:#2F6BFF;        /* decorative accent: led, cursor, borders */
  --link:#2456D6;       /* text-link accent, AA on light bg */
  --hl:rgba(47,107,255,.22);   /* blue phrase highlight */
  --thumb-a:#e4e4e8;
  --thumb-b:#ededf0;
  --mono:'Commit Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
[data-theme="dark"]{
  --bg:#0E0E10;
  --ink:#D2D2D7;        /* softened off-white — less glare than pure white */
  --mut:#9A9AA0;
  --line:#2A2A2D;
  --line2:#202023;
  --acc:#6F9BFF;
  --link:#8FB0FF;
  --hl:rgba(111,155,255,.34);
  --thumb-a:#26262a;
  --thumb-b:#1c1c20;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:var(--mono);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .2s ease, color .2s ease;
}

/* skip link */
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--bg);
  padding:8px 14px; font-size:12.5px; z-index:10;
}
.skip:focus{ left:12px; top:12px; }

a{ color:inherit; }
:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; border-radius:2px; }

/* blue phrase highlight (tagline + bio) */
.hl{ background:linear-gradient(transparent 56%, var(--hl) 56%); padding:0 1px; border-radius:1px; }

.page{
  max-width:880px;
  margin:0 auto;
  padding:56px 56px 80px;
}

/* ---------- utility / theme toggle ---------- */
.utility{ display:flex; justify-content:flex-end; margin-bottom:26px; }
.theme-switch{
  width:46px; height:26px; padding:0; cursor:pointer;
  background:none; border:1.5px solid var(--ink); border-radius:999px;
  position:relative; display:inline-block; flex-shrink:0;
  transition:border-color .2s;
}
.theme-switch .knob{
  position:absolute; top:50%; left:4px; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  background:var(--ink); transition:left .2s ease;
}
[data-theme="dark"] .theme-switch .knob{ left:calc(100% - 20px); }

/* ---------- header ---------- */
.masthead{
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:start;
}
.name{
  font-size:38px; font-weight:700; letter-spacing:-.02em; line-height:1; margin:0 0 18px;
}
.name .dot{ color:var(--acc); }
.tagline{
  font-size:14.5px; font-weight:400; line-height:1.6; color:var(--ink);
  margin:0 0 14px; max-width:52ch;
}
.status{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:var(--mut); margin-bottom:26px;
}
.status .led{ width:7px; height:7px; border-radius:50%; background:var(--mut); flex-shrink:0; }
.status .time{ color:var(--mut); font-variant-numeric:tabular-nums; }
.cursor{
  display:inline-block; width:7px; height:14px; background:var(--ink);
  margin-left:1px; transform:translateY(2px); animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* portrait / id card */
.idcard{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.portrait{
  width:112px; height:216px; border:1px solid var(--ink);
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--thumb-a) 0 2px, var(--thumb-b) 2px 4px);
}
.portrait picture{ display:block; width:100%; height:100%; }
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05); }
.portrait .ph{
  display:none; position:absolute; inset:0;
  align-items:flex-end; justify-content:center; padding-bottom:6px;
  font-size:9.5px; letter-spacing:.06em; color:var(--mut);
}
.portrait.no-photo img{ display:none; }
.portrait.no-photo .ph{ display:flex; }
.idcap{ font-size:10px; color:var(--mut); letter-spacing:.04em; display:flex; gap:8px; }
.idcap b{ color:var(--ink); font-weight:600; }

/* ---------- contact row ---------- */
.contact{
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
  font-size:12.5px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:11px 0; margin:30px 0;
}
.contact a{
  text-decoration:none; padding:2px 14px; position:relative; transition:color .15s;
}
.contact a:first-child{ padding-left:0; }
.contact a + a::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:11px; background:var(--line);
}
.contact a:hover{ color:var(--link); }
.contact a .ar{ color:var(--mut); }

/* ---------- data readout ---------- */
.readout{
  display:grid; grid-template-columns:auto 1fr; gap:8px 22px;
  font-size:12.5px; margin-bottom:30px;
}
.readout dt{ color:var(--mut); letter-spacing:.08em; text-transform:uppercase; font-size:11px; padding-top:1px; }
.readout dd{ margin:0; color:var(--ink); }
.readout dd a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.readout dd a:hover{ border-bottom-color:var(--mut); }

.bio{
  font-size:13.5px; line-height:1.72; color:var(--ink);
  max-width:70ch; margin:0 0 46px;
}
.bio a{ color:var(--link); text-decoration:none; }
.bio a:hover{ text-decoration:underline; }

/* ---------- section header ---------- */
.sec-head{ display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.sec-head h2{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin:0; }
.sec-head .rule{ flex:1; height:1px; background:var(--line); }
.sec-head .count{ font-size:11px; color:var(--mut); font-variant-numeric:tabular-nums; }

/* ---------- filter tabs ---------- */
.filters{ display:flex; align-items:center; gap:0; margin:16px 0 6px; flex-wrap:wrap; }
.filters button{
  font-family:var(--mono); font-size:12px; background:none; border:none; cursor:pointer;
  color:var(--mut); padding:4px 13px; position:relative; transition:color .15s;
}
.filters button:first-child{ padding-left:0; }
.filters button + button::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:11px; background:var(--line);
}
.filters button:hover{ color:var(--ink); }
.filters button.active{ color:var(--acc); }

/* ---------- publication rows ---------- */
.pubs{ margin-top:14px; min-height:510px; }
.pub-entry{ border-bottom:1px solid var(--line); }
.pub-entry:first-child{ border-top:1px solid var(--line); }
.pub{
  display:grid; grid-template-columns:66px 1fr auto; gap:20px; align-items:start;
  padding:18px 0;
}
.thumb{
  width:66px; height:48px; border:1px solid var(--line); overflow:hidden;
  background:repeating-linear-gradient(45deg, var(--thumb-a) 0 5px, var(--thumb-b) 5px 10px);
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1); }
.pub-main{ min-width:0; }
.venue{
  display:inline-block; vertical-align:top; font-size:10.5px; font-weight:600; letter-spacing:.06em;
  border:1px solid var(--line); border-radius:4px; padding:1.5px 7px; margin-bottom:8px;
}
.venue.oral{ border-color:var(--acc); color:var(--acc); }
.award{
  display:inline-block; vertical-align:top; font-size:10.5px; font-weight:600; letter-spacing:.06em;
  background:var(--acc); color:#fff; border:1px solid var(--acc); border-radius:4px;
  padding:1.5px 7px; margin-left:6px; margin-bottom:8px;
}
.ptitle{ font-size:14px; font-weight:500; line-height:1.4; margin:0 0 5px; }
.ptitle-btn{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px; width:100%;
  text-align:left; background:none; border:none; padding:0; margin:0 0 5px; cursor:pointer;
  font-family:var(--mono); font-size:14px; font-weight:500; line-height:1.4; color:var(--ink);
}
.ptitle-btn:hover{ color:var(--acc); }
.ptitle-btn .exp{ flex-shrink:0; color:var(--mut); font-weight:400; }
.ptitle-btn:hover .exp{ color:var(--acc); }
.thumb.clickable{ cursor:pointer; }
.pub-panel{ padding:0 0 18px 86px; }
.pub-panel[hidden]{ display:none; }
.pub-big{ display:block; max-width:320px; width:100%; height:auto; border:1px solid var(--line); margin:0 0 12px; }
.pub-abstract{ font-size:12.5px; line-height:1.62; color:var(--mut); margin:0; max-width:66ch; }
.authors{ font-size:12px; color:var(--mut); line-height:1.5; margin:0; }
.authors b{ color:var(--ink); font-weight:600; }
.pub-act{ display:flex; gap:7px; align-items:center; padding-top:24px; }
.pub-act a{
  font-size:11px; letter-spacing:.03em; color:var(--mut); text-decoration:none;
  border:1px solid var(--line); border-radius:4px; padding:3px 8px; transition:all .15s; white-space:nowrap;
}
.pub-act a:hover{ color:var(--ink); border-color:var(--mut); }

.noresult{ display:none; font-size:12.5px; color:var(--mut); padding:26px 0; }
.noresult.show{ display:block; }

/* ---------- news ---------- */
.news{ margin-top:44px; }
.news-list{ margin-top:16px; min-height:300px; }
.news-item{
  display:grid; grid-template-columns:96px 1fr; gap:20px;
  padding:11px 0; border-bottom:1px solid var(--line2);
  font-size:13px; line-height:1.5; align-items:baseline;
}
.news-item:first-child{ border-top:1px solid var(--line2); }
.news-item time{ color:var(--mut); font-variant-numeric:tabular-nums; font-size:12px; }
.news-item p{ margin:0; }
.news-item p a{ color:var(--link); text-decoration:none; }
.news-item p a:hover{ text-decoration:underline; }
.news-item .new{ color:var(--acc); font-size:10px; border:1px solid var(--acc); border-radius:3px; padding:0 4px; margin-left:7px; vertical-align:1px; }

.news-pager{ display:flex; align-items:center; gap:16px; margin-top:18px; font-size:12px; }
.news-pager button{
  font-family:var(--mono); font-size:12px; background:none; border:1px solid var(--line);
  border-radius:6px; color:var(--mut); cursor:pointer; padding:5px 12px; transition:all .15s;
}
.news-pager button:hover:not(:disabled){ color:var(--ink); border-color:var(--mut); }
.news-pager button:disabled{ opacity:.4; cursor:default; }
.news-pager .pageind{ color:var(--mut); font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.news-pager .pageind b{ color:var(--ink); font-weight:600; }

/* ---------- academic service ---------- */
.service{ margin-top:44px; }
.service-list{ margin-top:16px; min-height:126px; }
.service-item{
  display:grid; grid-template-columns:96px 1fr; gap:20px;
  padding:11px 0; border-bottom:1px solid var(--line2);
  font-size:13px; line-height:1.5; align-items:baseline;
}
.service-item:first-child{ border-top:1px solid var(--line2); }
.service-item time{ color:var(--mut); font-variant-numeric:tabular-nums; font-size:12px; }
.service-item p{ margin:0; }
.service-item p span{ color:var(--ink); font-weight:600; }
.service-item p a{ color:var(--link); text-decoration:none; }
.service-item p a:hover{ text-decoration:underline; }

/* ---------- footer ---------- */
.foot{
  margin-top:54px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11px; color:var(--mut); letter-spacing:.03em;
}
.foot .sync{ color:var(--mut); }

/* ---------- responsive ---------- */
@media (max-width:720px){
  .page{ padding:36px 24px 56px; }
  .masthead{ grid-template-columns:1fr; gap:24px; }
  .idcard{ align-items:flex-start; order:-1; }
}
@media (max-width:520px){
  .name{ font-size:30px; }
  .readout{ grid-template-columns:1fr; gap:3px 0; }
  .readout dt{ padding-top:10px; }
  .pub{ grid-template-columns:48px 1fr; gap:14px; }
  .thumb{ width:48px; height:36px; }
  .pubs{ min-height:620px; }
  .news-list{ min-height:410px; }
  .pub-act{ grid-column:1 / -1; padding-top:10px; }
  .pub-panel{ padding-left:0; }
  .news-item,
  .service-item{ grid-template-columns:1fr; gap:2px; }
}

/* The site has only subtle, non-vestibular effects (a slow cursor blink and
   short colour/position micro-transitions), so they remain even with
   reduce-motion. Re-add suppression here if any large motion is introduced. */