/* Vignelli-inspired research index.
   One typographic family, a disciplined three-column system, and color as information.
   Experience is organized as two strands of work, with dates alongside roles. */
:root {
  color-scheme: light;
  --paper: #f8f8f6;
  --ink: #191a18;
  --body: #50514e;
  --muted: #72736f;
  --line: #c7c8c4;
  --signal: #b51f16;
  --page-margin: clamp(24px, 5.25vw, 82px);
  --site-width: 1340px;
  --type: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Shared design tokens for the COLM project stylesheet. */
  --ground: var(--paper);
  --rule: var(--line);
  --accent: var(--signal);
  --text: var(--body);
  --font: var(--type);
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.5 var(--type); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection { color:var(--ink); background:#e9c3bc; }
h1,h2,h3,h4,p,figure { margin:0; }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible { outline:2px solid var(--signal); outline-offset:5px; }
.skip-link { position:fixed; z-index:10; top:-100px; left:16px; padding:11px 16px; background:var(--ink); color:var(--paper); }
.skip-link:focus { top:12px; }
.site-shell { max-width:calc(var(--site-width) + 2 * var(--page-margin)); padding-inline:var(--page-margin); margin-inline:auto; }

/* Identity: no decorative bar. Three elements share a real top datum. */
.hero { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3.8fr) minmax(0,2.35fr); column-gap:clamp(28px,3.6vw,55px); padding-block:clamp(70px,6.7vw,92px) 49px; }
.identity,.intro { display:flex; flex-direction:column; min-width:0; }
.identity h1 { font-size:clamp(73px,7.05vw,101px); line-height:.88; font-weight:700; letter-spacing:-.068em; white-space:nowrap; }
.contact-links { margin-top:auto; padding-top:44px; display:flex; flex-wrap:wrap; gap:clamp(17px,1.7vw,26px); align-items:center; }
.contact-links a { font-size:12px; font-weight:650; line-height:1.3; display:inline-flex; align-items:center; min-height:42px; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:5px; text-decoration-thickness:1px; }
.contact-links a:hover { text-decoration-color:var(--ink); }
.intro { justify-content:space-between; gap:35px; padding-top:0; }
.lead { font-size:clamp(28px,2.6vw,37px); font-weight:400; line-height:1.18; letter-spacing:-.045em; text-wrap:pretty; }
.bio { color:var(--body); font-size:13.5px; line-height:1.6; max-width:380px; }
.portrait { min-width:0; align-self:start; }
.portrait img { width:100%; aspect-ratio:4/5; height:auto; object-fit:cover; object-position:50% 41%; display:block; background:#d9d8d1; }

/* Publications: single headline rule, rhythmic index, and full author lists. */
.section { padding-top:29px; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding-bottom:20px; border-bottom:1.5px solid var(--ink); }
.section-heading h2 { font-size:25px; font-weight:650; line-height:1.16; letter-spacing:-.038em; }
.section-heading p { font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.025em; white-space:nowrap; }
.paper { display:grid; grid-template-columns:52px minmax(0,1fr) 155px; gap:clamp(16px,2.6vw,35px); padding-block:25px 28px; border-bottom:1px solid var(--line); }
.paper-index { padding-top:5px; color:var(--signal); font-size:13px; font-weight:700; line-height:1.3; font-variant-numeric:tabular-nums; }
.paper h4 { max-width:865px; font-size:clamp(24px,2.35vw,32px); font-weight:600; letter-spacing:-.043em; line-height:1.15; text-wrap:pretty; }
.paper h4 a { text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:1px; text-underline-offset:5px; transition:text-decoration-color .12s ease; }
.paper h4 a:hover { text-decoration-color:var(--ink); }
.paper-authors,.paper-note { color:var(--body); font-size:12.7px; line-height:1.65; margin-top:11px; max-width:780px; }
.paper-note { margin-top:4px; }
.paper-authors strong { color:var(--ink); font-weight:700; }
.paper-venue { padding-top:7px; text-align:right; font-size:12px; font-weight:600; line-height:1.4; }
.paper-resources { display:flex; gap:17px; margin-top:7px; }
.paper-resources a { display:inline-flex; align-items:center; min-height:34px; border-bottom:1px solid var(--line); font-size:12px; font-weight:600; }
.paper-resources a:hover { border-color:var(--ink); }

/* Experience: two parallel strands of work, not a detached chart.
   The distinction conveys the kind of work; dates stay beside roles. */
.background { margin-top:83px; }
.background .section-heading { padding-bottom:20px; }
.experience-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(34px,6.7vw,104px); align-items:start; }
.experience-lane { min-width:0; }
.experience-lane-title { font-size:13px; font-weight:700; letter-spacing:-.005em; line-height:1.35; padding:21px 0 16px; }
.experience-entries { margin:0; padding:0; list-style:none; }
.experience-entry { display:grid; grid-template-columns:minmax(89px,110px) minmax(0,1fr); column-gap:clamp(10px,1.6vw,22px); border-top:1px solid var(--line); padding:24px 0 29px; min-height:156px; }
.experience-entry:last-child { border-bottom:1px solid var(--line); }
.experience-date { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.4; letter-spacing:-.025em; color:var(--body); padding-top:7px; white-space:nowrap; }
.experience-entry.is-current .experience-date { color:var(--signal); }
.experience-entry-content { min-width:0; }
.experience-org { font-size:clamp(25px,2.35vw,32px); line-height:1.13; font-weight:650; letter-spacing:-.045em; text-wrap:pretty; }
.experience-role { font-size:13.5px; line-height:1.45; font-weight:650; margin-top:10px; }
.experience-detail { color:var(--body); font-size:12.6px; line-height:1.55; max-width:350px; margin-top:4px; }

.site-footer { border-top:1px solid var(--ink); margin-top:80px; padding:21px 0 40px; display:flex; align-items:baseline; justify-content:space-between; gap:24px; font-size:10.5px; letter-spacing:.025em; font-weight:650; }
.site-footer a { text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; }
.site-footer a:hover { text-decoration-color:var(--ink); }

@media(max-width:1160px) {
  .hero { grid-template-columns:minmax(0,1.16fr) minmax(0,1fr) minmax(0,.59fr); gap:25px; padding-top:71px; }
  .identity h1 { font-size:clamp(60px,7.1vw,82px); }
  .lead { font-size:clamp(27px,2.75vw,33px); }
  .contact-links { gap:16px; }
  .experience-grid { column-gap:clamp(30px,5vw,72px); }
  .experience-entry { grid-template-columns:94px minmax(0,1fr); }
}
@media(max-width:850px) {
  .hero { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.54fr); gap:18px; padding-top:57px; padding-bottom:41px; }
  .identity h1 { font-size:clamp(48px,7.2vw,67px); }
  .intro { gap:20px; }
  .lead { font-size:25px; }
  .bio { font-size:12px; }
  .contact-links { gap:12px; }
  .contact-links a { font-size:11px; }
  .paper { grid-template-columns:36px minmax(0,1fr) 112px; gap:18px; }
  .paper h4 { font-size:25px; }
  .experience-grid { column-gap:30px; }
  .experience-entry { grid-template-columns:1fr; row-gap:8px; min-height:176px; }
  .experience-date { padding-top:0; }
  .experience-org { font-size:25px; }
}
/* Full mobile composition. The two strands stack, retaining their identity. */
@media(max-width:700px) {
  :root { --page-margin:clamp(21px,5.7vw,31px); }
  .hero { padding-top:29px; padding-bottom:30px; grid-template-columns:minmax(0,1fr) clamp(96px,28vw,136px); column-gap:16px; row-gap:0; }
  .identity { display:contents; }
  .identity h1 { grid-column:1; grid-row:1; font-size:clamp(47px,10.2vw,69px); line-height:.91; letter-spacing:-.068em; align-self:center; }
  .portrait { grid-column:2; grid-row:1; align-self:center; }
  .portrait img { object-position:51% 39%; }
  .intro { grid-column:1/-1; grid-row:2; gap:15px; padding:25px 0 0; }
  .lead { max-width:560px; font-size:clamp(27px,6.1vw,36px); line-height:1.19; letter-spacing:-.044em; }
  .bio { max-width:540px; margin-top:4px; font-size:13.5px; line-height:1.58; }
  .contact-links { grid-column:1/-1; grid-row:3; padding-top:17px; margin:3px 0 0; gap:clamp(14px,4vw,25px); }
  .contact-links a { font-size:12px; min-height:43px; }
  .section { padding-top:24px; }
  .section-heading { padding-bottom:17px; }
  .section-heading h2 { font-size:24px; }
  .paper { grid-template-columns:minmax(0,1fr) auto; column-gap:14px; row-gap:11px; padding-block:21px 23px; }
  .paper-index { grid-row:1; grid-column:1; padding:0; font-size:12px; }
  .paper-venue { grid-row:1; grid-column:2; padding:0; text-align:right; font-size:12px; font-weight:500; }
  .paper-copy { grid-row:2; grid-column:1/-1; }
  .paper h4 { max-width:none; font-size:clamp(23px,4.5vw,29px); line-height:1.17; letter-spacing:-.041em; }
  .paper-authors,.paper-note { font-size:12.5px; line-height:1.55; margin-top:11px; }
  .paper-note { margin-top:4px; }
  .background { margin-top:59px; }
  .experience-grid { grid-template-columns:minmax(0,1fr); gap:13px; }
  .experience-lane-title { font-size:13px; padding:23px 0 13px; }
  .experience-entry { grid-template-columns:94px minmax(0,1fr); gap:13px; padding:19px 0 24px; min-height:0; }
  .experience-date { font-size:12px; padding-top:4px; }
  .experience-org { font-size:clamp(24px,6.3vw,29px); }
  .experience-role { font-size:13px; margin-top:7px; }
  .experience-detail { font-size:12.5px; line-height:1.58; margin-top:3px; }

  .site-footer { margin-top:65px; padding-bottom:29px; font-size:10px; }
}
@media(max-width:440px) {
  .hero { grid-template-columns:minmax(0,1fr) 103px; column-gap:12px; }
  .identity h1 { font-size:clamp(42px,12.1vw,55px); }
  .lead { font-size:clamp(25px,6.3vw,29px); }
  .section-heading h2 { font-size:23px; }
  .contact-links { gap:15px; }
  .contact-links a { font-size:11.5px; }
  .paper h4 { font-size:23px; }
  .experience-entry { grid-template-columns:86px minmax(0,1fr); }
}
@media(max-width:355px) {
  :root { --page-margin:20px; }
  .hero { grid-template-columns:minmax(0,1fr) 91px; column-gap:10px; }
  .identity h1 { font-size:41px; }
  .lead { font-size:24px; }
  .contact-links { column-gap:12px; }
  .contact-links a { font-size:11px; }
  .section-heading h2 { font-size:20px; }
  .experience-entry { grid-template-columns:79px minmax(0,1fr); gap:10px; }
  .experience-org { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .paper h4 a { transition:none; } }

/* Research chapters — same content and sticky behavior, stronger editorial hierarchy.
   All rules are scoped to Publications. No JavaScript or external fonts. */
.publications {
  --chapter-rule: #191a18;
  --paper-rule: #b8b9b3;
}
.publications > .section-heading {
  padding-bottom: 20px;
  border-bottom: 2px solid var(--chapter-rule);
}
.publications > .section-heading h2 {
  color: var(--ink);
  font-weight: 700;
}
.publications .research-group {
  display: grid;
  grid-template-columns: minmax(190px, .22fr) minmax(0, 1fr);
  column-gap: clamp(40px, 4.4vw, 68px);
  align-items: start;
  padding-top: 36px;
  scroll-margin-top: 32px;
}
.publications .research-group + .research-group {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1.5px solid var(--chapter-rule);
}
.publications .research-group-heading {
  position: sticky;
  top: 32px;
  align-self: start;
  min-width: 0;
  padding: 0;
}
.publications .research-group-heading h3 {
  color: var(--ink);
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.052em;
}
.publications #llm-internals-heading { max-width: 7ch; }
.publications .research-group-heading p {
  max-width: 205px;
  margin-top: 18px;
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.52;
  text-wrap: pretty;
}
.publications .publication-list,
.publications .paper-copy { min-width: 0; }
.publications .paper {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 112px;
  column-gap: 22px;
  row-gap: 0;
  align-items: start;
  padding-block: 30px 32px;
  border-bottom: 1px solid var(--paper-rule);
}
.publications .paper:first-child { padding-top: 0; }
.publications .paper:last-child { border-bottom: 0; padding-bottom: 0; }
.publications .paper-index {
  padding-top: 7px;
  color: var(--signal);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.publications .paper h4 {
  max-width: 840px;
  color: var(--ink);
  font-size: clamp(27px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.041em;
  text-wrap: pretty;
}
.publications .paper h4 a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .12em;
  transition: text-decoration-color .12s ease;
}
.publications .paper h4 a:hover {
  text-decoration-color: currentColor;
}
.publications .paper-phrase { white-space: nowrap; }
.publications .paper-authors {
  margin-top: 13px;
  max-width: 760px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--body);
}
.publications .paper-note {
  margin-top: 5px;
  font-size: 12.7px;
  line-height: 1.55;
  color: var(--body);
}
.publications .paper-venue {
  padding-top: 8px;
  color: var(--ink);
  text-align: right;
  text-wrap: balance;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
.publications .paper-resources { margin-top: 8px; }
.publications .paper-resources a {
  min-height: 34px;
  font-size: 12px;
  font-weight: 700;
  border-bottom-color: var(--paper-rule);
}
.publications .paper-resources a:hover { border-bottom-color: var(--ink); }
@media (min-width: 901px) and (max-width: 1160px) {
  .publications .research-group { grid-template-columns: 190px minmax(0, 1fr); column-gap: 36px; }
  .publications .research-group-heading h3 { font-size: 34px; }
  .publications .research-group-heading p { max-width: 180px; }
  .publications .paper { grid-template-columns: 24px minmax(0, 1fr); column-gap: 18px; }
  .publications .paper-copy { grid-column: 2; grid-row: 1; }
  .publications .paper-venue { grid-column: 2; grid-row: 2; padding-top: 9px; text-align: left; }
}
/* Mobile keeps chapter headings in reading order; no sticky overlay on text. */
@media (max-width: 900px) {
  .publications .research-group { display: block; padding-top: 28px; }
  .publications .research-group + .research-group { margin-top: 36px; padding-top: 28px; }
  .publications .research-group-heading { position: static; padding: 0 0 26px; }
  .publications .research-group-heading h3 { font-size: 32px; line-height: 1.05; letter-spacing: -.045em; }
  .publications #llm-internals-heading { max-width: none; }
  .publications .research-group-heading p { max-width: 420px; margin-top: 9px; font-size: 13px; }
  .publications .paper { grid-template-columns: 28px minmax(0, 1fr) 112px; column-gap: 18px; padding-block: 26px 28px; }
  .publications .paper h4 { font-size: 28px; }
  .publications .paper:first-child { padding-top: 0; }
}
@media (max-width: 700px) {
  .publications > .section-heading { padding-bottom: 17px; }
  .publications .research-group-heading h3 { font-size: 30px; }
  .publications .research-group-heading { padding-bottom: 25px; }
  .publications .paper {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 0;
    padding-block: 25px 27px;
  }
  .publications .paper-index { grid-column: 1; grid-row: 1; padding-top: 5px; font-size: 12px; }
  .publications .paper-copy { grid-column: 2; grid-row: 1; }
  .publications .paper h4 { font-size: clamp(24px, 5.6vw, 29px); line-height: 1.14; letter-spacing: -.037em; }
  .publications .paper-authors { margin-top: 11px; font-size: 12.6px; line-height: 1.6; }
  .publications .paper-note { font-size: 12.3px; }
  .publications .paper-venue { grid-column: 2; grid-row: 2; padding-top: 9px; text-align: left; font-size: 12px; }
}
@media (max-width: 355px) {
  .publications .paper { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; }
  .publications .paper h4 { font-size: 23px; }
  .publications .research-group-heading h3 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .publications .paper h4 a { transition: none; }
}
@media print {
  .publications .research-group-heading { position: static; }
}
