/* Homepage stylesheet. Ported from the approved mockup (design round 2,
   Sep 2026). Tokens live on :root; everything else derives from them. */

:root {
  color-scheme: light;
  --ground: #fafbfc;
  --ink: #13181c;
  --ink-2: #4e585f;
  --ink-3: #868f96;
  --rule: #e2e7ea;
  --rule-soft: #edf0f2;
  --accent: #2f6d7c;
  --accent-deep: #23545f;
  --accent-wash: rgba(47, 109, 124, 0.32);
  --fig: #e7ecee;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --rail-w: 280px;
  --rail-pad: 30px;
  --rail-col: calc(var(--rail-w) - 2 * var(--rail-pad));
  --g: 96px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-wash);
}
a:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
img { max-width: 100%; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.fig img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============ fixed left rail ============ */

.rail {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--rail-w);
  overflow: hidden;
  background: var(--ground);
  border-right: 1px solid var(--rule);
  padding: 40px var(--rail-pad) 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 20;
}

.portrait {
  display: block;
  width: 120px;
  height: 150px;
  object-fit: cover;
  object-position: 50% 22%;
  background: var(--fig);
  border: 1px solid var(--rule);
}
/* in the rail the portrait spans the whole column, so the rail reads as one
   solid block instead of a small picture parked in its top-left corner */
.rail .portrait {
  width: var(--rail-col);
  height: var(--rail-col);
  object-position: 50% 18%;
}

.rail h1 {
  font-size: 1.26rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
h1 .suffix {
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: 0;
}
.rail .role {
  margin-top: 7px;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink);
}
.rail .affil {
  margin-top: 2px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.iconrow a {
  border-bottom: none;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  line-height: 1;
}
.iconrow a:hover { color: var(--accent-deep); }
.iconrow .ic { width: 19px; height: 19px; flex: none; }

.iconrow--rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px 4px;
}
.iconrow--rail a { flex-direction: column; gap: 6px; text-align: center; }

.rail-nav {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  margin-top: 2px;
}
.rail-nav ul { display: flex; flex-direction: column; gap: 2px; }
.rail-nav a {
  display: block;
  border: none;
  border-left: 2px solid transparent;
  margin-left: -14px;
  padding: 5px 0 5px 12px;
  font-size: 0.94rem;
  color: var(--ink-2);
  transition: color .15s ease, border-color .15s ease;
}
.rail-nav a:hover { color: var(--ink); }
.rail-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
}

.colophon {
  position: absolute;
  left: var(--rail-pad); right: var(--rail-pad); bottom: 22px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

@media (max-height: 760px) {
  .rail { padding-top: 30px; gap: 16px; }
  .rail .portrait { height: calc(var(--rail-col) * 0.72); object-position: 50% 15%; }
  .rail-nav { padding-top: 14px; }
}
@media (max-height: 600px) {
  .rail .portrait { display: none; }
}

/* ============ pinned top bar (mobile/tablet only) ============ */

.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  align-items: center;
  gap: 14px;
  padding: 9px 20px;
}
.topbar .who {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
  border: none;
}
.topbar nav {
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar nav::-webkit-scrollbar { display: none; }
.topbar ul { display: flex; gap: 15px; }
.topbar a {
  border: none;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
.topbar a[aria-current="page"] { color: var(--accent); font-weight: 500; border-bottom-color: var(--accent); }

/* ============ document column ============ */

.doc {
  margin-left: var(--rail-w);
  padding-left: clamp(40px, 9vw, 150px);
  padding-right: 32px;
  padding-block: 52px 0;
}
.doc-inner { max-width: 680px; }

section.block {
  padding-top: 34px;
  margin-top: 34px;
  border-top: 1px solid var(--rule);
}
.doc-inner > section.block:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

h2 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 20px;
}
h3 {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}

.lead {
  font-size: 1.08rem;
  line-height: 1.62;
  max-width: 63ch;
}
.lead + .lead { margin-top: 12px; }

.more {
  margin-top: 22px;
  font-size: 0.9rem;
}
.more a { border-bottom-color: var(--accent-wash); }

/* generic gutter row */
.rows { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: var(--g) minmax(0, 1fr);
  gap: 4px 20px;
  align-items: start;
}
.gut {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  line-height: 1.55;
  padding-top: 4px;
}

/* ============ highlight / project rows ============ */

.work { display: flex; flex-direction: column; gap: 30px; }
.item {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.fig {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--fig);
  border: 1px solid var(--rule);
  max-width: 100%;
}
/* no teaser image: a quiet wordmark tile instead of an empty box */
.fig--word {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  text-align: center;
}
.fig--word span {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--ink-2);
  text-wrap: balance;
}
.item h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.item p {
  margin-top: 7px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
}
.links {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.links .sep { color: var(--rule); }
.links a { border-bottom-color: var(--accent-wash); }

/* ============ publications ============ */

.pub .t { font-size: 0.97rem; line-height: 1.42; }
.pub .a {
  font-size: 0.87rem;
  color: var(--ink-2);
  margin-top: 3px;
  line-height: 1.45;
}
.pub .a strong { font-weight: 600; color: var(--ink); }
.pub .m {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  margin-top: 5px;
  letter-spacing: 0.01em;
}
.pub .m .venue { color: var(--ink-2); }
.pub .m .dot { color: var(--rule); padding: 0 3px; }
.selpubs .pub + .pub { margin-top: 18px; }

.tally {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.89rem;
  color: var(--ink-2);
  max-width: 62ch;
}
.tally b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tally .dot { color: var(--rule); padding: 0 3px; }

.note {
  font-size: 0.89rem;
  color: var(--ink-2);
  max-width: 62ch;
  margin-top: -8px;
  margin-bottom: 24px;
}
h3.later { margin-top: 38px; }

/* ============ news ============ */

.news { --g: 84px; }
.news .row + .row { margin-top: 15px; }
.news .txt { font-size: 0.93rem; color: var(--ink-2); max-width: 60ch; }

/* ============ cv ============ */

.cvhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cvhead h2 { margin-bottom: 0; }
.cvhead .dl {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.cv { --g: 116px; }
.cv .row + .row { margin-top: 22px; }
.cv .title { font-weight: 600; font-size: 0.97rem; line-height: 1.35; }
.cv .org { font-size: 0.89rem; color: var(--ink-2); margin-top: 2px; }
.cv .sub { font-size: 0.87rem; color: var(--ink-3); margin-top: 2px; }
.cv ul.bul { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.cv ul.bul li {
  font-size: 0.89rem;
  color: var(--ink-2);
  line-height: 1.5;
  padding-left: 15px;
  position: relative;
  max-width: 60ch;
}
.cv ul.bul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.66em;
  width: 5px; height: 1px;
  background: var(--ink-3);
}
.cv .plain { font-size: 0.92rem; color: var(--ink-2); max-width: 60ch; line-height: 1.5; }
.cv .plain strong { color: var(--ink); font-weight: 600; }

/* ============ footer ============ */

.foot {
  margin-top: 44px;
  padding: 20px 0 56px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.foot .sep { color: var(--rule); }

/* ============ mobile intro (hidden on desktop) ============ */

.m-intro { display: none; }

@media (max-width: 860px) {
  .rail { display: none; }
  .topbar { display: flex; }
  .doc {
    margin-left: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-block: 26px 0;
  }
  .m-intro {
    display: block;
    margin-bottom: 22px;
  }
  .m-intro .top {
    display: flex;
    gap: 18px;
    align-items: flex-start;
  }
  .m-intro .portrait { width: 104px; height: 130px; }
  .m-intro h1 {
    font-size: 1.42rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.18;
  }
  .m-intro .role { margin-top: 7px; font-size: 0.9rem; line-height: 1.35; }
  .m-intro .affil { margin-top: 2px; font-size: 0.84rem; color: var(--ink-2); line-height: 1.4; }
  .m-intro .iconrow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--rule-soft);
  }
  .lead { font-size: 1.02rem; }
  .cv { --g: 96px; }
}

@media (max-width: 620px) {
  .item { grid-template-columns: 1fr; gap: 14px; }
  .fig { max-width: 260px; }
  .row { grid-template-columns: 1fr; gap: 3px; }
  .gut { padding-top: 0; }
  .cv .gut, .news .gut { color: var(--ink-3); }
  h2 { font-size: 1.14rem; }
}

@media (max-width: 430px) {
  body { font-size: 16px; }
  .m-intro .top { flex-direction: column; gap: 14px; }
}

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