/* ==========================================================================
   osamahalabi.com — design system  (v2, "paper & ink")
   --------------------------------------------------------------------------
   Light editorial direction. Everything below is tokens + a small set of
   components. Add a component here rather than writing one-off CSS in
   scripts/build.py.

   Why light, not the previous navy: 54 of the site's images are screenshots,
   plots and system diagrams captured on white backgrounds. On navy they sit
   in dark boxes and read as muddy holes in the page; on paper they read as
   figures. The imagery is the strongest asset here, so the page defers to it.
   ========================================================================== */

/* ---------- self-hosted body face (carried over from v1) ---------- */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;
  font-weight:500;src:url("../fonts/ibm-plex-sans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/ibm-plex-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/ibm-plex-sans-700.woff2") format("woff2")}

:root{
  /* ---- surface & ink ---- */
  --paper:      #faf8f4;   /* page */
  --paper-card: #ffffff;   /* raised surfaces */
  --paper-sunk: #f3f0ea;   /* inset / table stripe / image letterbox */
  --ink:        #17150f;
  --ink-2:      #403d34;
  --muted:      #6d685c;
  --rule:       #e4dfd4;
  --rule-2:     #d0c9ba;
  /* darker than --rule-2 on purpose: buttons/chips/search inputs have almost
     no fill contrast against the page (paper-card is only 1.06:1 off paper),
     so their border is the only thing marking the boundary -- WCAG 1.4.11
     needs 3:1 for that. --rule-2 stays for decorative hairlines/hover states
     where a fill, icon or adjacent text already carries the boundary. */
  --rule-3:     #968763;

  /* ---- accent: Qatar University maroon. Identity only —
         nav state, eyebrows, links, primary action. Never decoration. ---- */
  --accent:      #8a1538;
  --accent-deep: #6d0f2c;
  --accent-soft: #f7ebef;

  --ok: #1a7f52;   /* "active"/"ongoing" state dot */

  /* ---- project theme hues. Redundant with the text label on every badge,
         so colour is never the only channel carrying meaning. ---- */
  --t-haptics:  #a8501e;
  --t-vr:       #1f5fa8;
  --t-ar:       #0f766e;
  --t-health:   #6b3fa0;
  --t-mobility: #7c5a00;
  --t-laser:    #be185d;
  --t-sensing:  #3f6212;

  /* ---- type ---- */
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* No webfont for display: Palatino Linotype ships on Windows, Iowan Old
     Style on macOS, Georgia everywhere. Zero bytes, zero CDN, and none of
     them are the default-AI-pick faces PLAN.md warns about. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --t-xs: .75rem;  --t-sm: .8125rem; --t-base: .9375rem;
  --t-md: 1.0625rem; --t-lg: 1.1875rem;
  --t-h3: 1.3125rem;
  --t-h2: clamp(1.5rem, 2.4vw, 1.875rem);
  --t-h1: clamp(2.125rem, 5vw, 3.25rem);
  --t-hero: clamp(2.5rem, 6.2vw, 4.25rem);

  /* ---- space ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --wide: 1160px;     /* grids, tables */
  --prose: 66ch;      /* running text */
  --radius: 3px;      /* deliberately near-square: rounded-card grids are a
                         generated-UI tell (PLAN.md §1) */
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 1px 2px rgba(23,21,15,.04), 0 6px 20px -8px rgba(23,21,15,.10);
  --shadow-lg: 0 24px 64px -16px rgba(23,21,15,.28);
}

*,*::before,*::after{box-sizing:border-box}
/* Components below set display:flex/grid, which outranks the user-agent
   [hidden]{display:none} rule — so filtered-out cards and rows would stay on
   screen while the result count said otherwise. Restate it with weight. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-md); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--accent-deep)}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; letter-spacing:-.014em; line-height:1.18}
p{margin:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--wide); margin:0 auto; padding:0 var(--s5)}
.prose{max-width:var(--prose)}
.skip-link{position:absolute; left:-9999px; background:var(--accent); color:#fff;
  padding:var(--s2) var(--s4); z-index:200; font-weight:600}
.skip-link:focus{left:var(--s3); top:var(--s3)}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.masthead{
  position:sticky; top:0; z-index:40;
  background:rgba(250,248,244,.88);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.masthead-inner{
  max-width:var(--wide); margin:0 auto; padding:var(--s3) var(--s5);
  display:flex; align-items:center; gap:var(--s5);
}
.wordmark{
  display:flex; align-items:center; gap:var(--s3);
  text-decoration:none; color:var(--ink); flex:none;
}
.wordmark-logo{height:34px; width:auto; flex:none}
.wordmark b{font-family:var(--serif); font-weight:400; font-size:1.25rem; letter-spacing:-.015em}
.wordmark span{font-size:var(--t-xs); color:var(--muted); letter-spacing:.08em; text-transform:uppercase}
@media (max-width:900px){ .wordmark span{display:none} }

.nav{margin-left:auto; display:flex; gap:var(--s5); list-style:none; padding:0; margin-block:0}
.nav a{
  text-decoration:none; color:var(--ink-2); font-size:var(--t-base); font-weight:500;
  padding:var(--s2) 0; border-bottom:2px solid transparent; display:block;
  transition:color .16s var(--ease), border-color .16s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--accent); border-bottom-color:var(--accent)}

/* padding sized for a ~42px tap target -- this control only ever renders on
   the touch-first mobile breakpoint below (display:block in the query),
   so the larger hit area costs nothing on desktop. */
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--rule-2);
  border-radius:var(--radius); padding:13px 16px; cursor:pointer; font-size:var(--t-sm); font-weight:600}
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav{
    position:absolute; left:0; right:0; top:100%; margin:0; padding:var(--s3) var(--s5) var(--s5);
    flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--rule);
  }
  .nav[hidden]{display:none}
  .nav a{padding:var(--s3) 0; border-bottom:1px solid var(--rule)}
  .nav a[aria-current="page"]{border-bottom-color:var(--accent)}
}

/* ==========================================================================
   PAGE HEADER + SECTIONS
   ========================================================================== */
.page-head{padding:var(--s8) 0 var(--s6); border-bottom:1px solid var(--rule)}
.eyebrow{
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:0 0 var(--s4);
  display:flex; align-items:center; gap:var(--s3);
}
.eyebrow::after{content:""; height:1px; flex:1; background:var(--rule); max-width:120px}
h1.title{font-family:var(--serif); font-size:var(--t-h1); max-width:18ch}

/* Research page only: the eyebrow/title/lede stack keeps the normal text
   eyebrow (other pages use the same pattern), with the XReality Lab mark
   placed beside it on the right -- a distinct brand moment rather than
   standing in for the text. Flat on the paper background, no card/shadow
   -- see CLAUDE.md hard rules. */
.research-masthead{display:flex; align-items:center; justify-content:space-between; gap:var(--s7); flex-wrap:wrap}
.research-masthead-text{flex:1 1 420px; min-width:280px}
.research-masthead .lab-mark{height:140px; width:auto; flex:none}
@media (max-width:720px){
  .research-masthead{flex-direction:column-reverse; align-items:flex-start}
  .research-masthead .lab-mark{height:96px}
}
.lede{margin-top:var(--s4); font-size:var(--t-lg); color:var(--ink-2); max-width:var(--prose)}

/* "on this page" links for pages that grow long -- Research now has 50
   project cards above the funding table, which used to mean scrolling
   past all of them to reach it. */
.jump-nav{display:flex; flex-wrap:wrap; gap:var(--s5); margin-top:var(--s5); font-size:var(--t-sm)}
.jump-nav a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px}
.jump-nav a:hover{color:var(--ink); border-color:var(--rule-2)}
/* vertical variant: sits inside a 200px sticky .rail (see About's Service
   section), so it needs to stack rather than wrap horizontally */
.jump-nav.vertical{flex-direction:column; gap:var(--s2); margin-top:var(--s4)}
/* offset so the sticky masthead + toolbar don't cover the heading being
   jumped to (masthead ~57px + toolbar ~64px, see .toolbar top:57px) */
#project-grid, #funding, #research-interests{scroll-margin-top:132px}
#glance, #education, #positions, #awards, #service, [id^="svc-"]{scroll-margin-top:76px}

/* Home page, between the hero and the stats band -- a brand/mission
   moment. Logo and copy sit side by side (not stacked) and the band
   takes reduced vertical padding so the stats band below still clears
   the fold on a typical laptop viewport. */
.mission-band{display:flex; align-items:center; gap:var(--s6); padding:var(--s6) 0}
.mission-band .lab-mark{height:88px; width:auto; flex:none}
.lab-mark-link{flex:none; display:block; transition:opacity .15s var(--ease)}
.lab-mark-link:hover{opacity:.75}
.mission-band-text .section-title{margin-bottom:var(--s2)}
.mission-band-text .section-note{margin-bottom:0}
@media (max-width:600px){
  .mission-band{flex-direction:column; align-items:flex-start; gap:var(--s4)}
}

section.band{padding:var(--s8) 0; border-bottom:1px solid var(--rule)}
section.band:last-of-type{border-bottom:none}
h2.section-title{
  font-family:var(--serif); font-size:var(--t-h2); margin-bottom:var(--s2);
}
.section-note{color:var(--muted); font-size:var(--t-base); margin-bottom:var(--s6); max-width:var(--prose)}
h3.sub{font-size:var(--t-h3); font-family:var(--serif); margin:var(--s7) 0 var(--s4)}
h3.sub:first-child{margin-top:0}

/* two-column: sticky label rail + content. The rail is what stops long
   data pages reading as one undifferentiated scroll. */
.railed{display:grid; grid-template-columns:200px 1fr; gap:var(--s7)}
.railed > .rail{position:sticky; top:110px; align-self:start}
.rail h2{font-family:var(--serif); font-size:var(--t-h3); margin-bottom:var(--s3)}
.rail p{font-size:var(--t-sm); color:var(--muted)}
@media (max-width:860px){
  .railed{grid-template-columns:1fr; gap:var(--s5)}
  .railed > .rail{position:static}
}

/* ==========================================================================
   HOME HERO
   ========================================================================== */
.hero{display:grid; grid-template-columns:1.35fr .65fr; gap:var(--s8);
  align-items:end; padding:var(--s9) 0 var(--s8); border-bottom:1px solid var(--rule)}
.hero h1{font-family:var(--serif); font-size:var(--t-hero); letter-spacing:-.026em; max-width:14ch}
.hero .standfirst{margin-top:var(--s5); font-size:var(--t-lg); color:var(--ink-2); max-width:52ch}
.hero .affil{margin-top:var(--s5); font-size:var(--t-base); color:var(--muted)}
.hero-portrait{width:100%; aspect-ratio:4/5; object-fit:cover; border:1px solid var(--rule);
  border-radius:var(--radius); background:var(--paper-sunk)}
@media (max-width:860px){
  .hero{grid-template-columns:1fr; gap:var(--s6); padding-top:var(--s7)}
  .hero-portrait{max-width:260px; aspect-ratio:1}
}

.actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.btn{
  display:inline-flex; align-items:center; gap:var(--s2); text-decoration:none;
  font-size:var(--t-base); font-weight:600; padding:9px 18px; border-radius:var(--radius);
  border:1px solid var(--rule-3); background:var(--paper-card); color:var(--ink);
  transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn:hover{border-color:var(--ink); color:var(--ink)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-deep); border-color:var(--accent-deep); color:#fff}
.btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}

/* ---- figure strip / stats ---- */
.figures{display:flex; flex-wrap:wrap; gap:var(--s4) var(--s8)}
.figure b{display:block; font-family:var(--serif); font-size:2rem; font-weight:400; line-height:1.1}
.figure span{font-size:var(--t-xs); letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}

/* ==========================================================================
   PROJECT GRID + CARDS
   ========================================================================== */
.toolbar{
  position:sticky; top:57px; z-index:30; background:rgba(250,248,244,.9);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule); margin-bottom:var(--s5);
}
.toolbar-inner{max-width:var(--wide); margin:0 auto; padding:var(--s3) var(--s5);
  display:flex; align-items:center; gap:var(--s4) var(--s5); flex-wrap:wrap}
.chips{display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:0; margin:0; list-style:none}
.chip{
  border:1px solid var(--rule-3); background:var(--paper-card); border-radius:999px;
  padding:5px 13px; font-size:var(--t-sm); font-weight:500; color:var(--ink-2);
  cursor:pointer; white-space:nowrap;
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.chip:hover{border-color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.chip .n{opacity:.55; margin-left:5px; font-size:var(--t-xs); font-variant-numeric:tabular-nums}
.rule-v{width:1px; height:20px; background:var(--rule-2); flex:none}
/* larger tap target on touch viewports; unchanged on desktop, where the
   dense multi-row chip toolbar (7 subject + 3 era chips) needs the compact
   size to avoid excessive wrapping under a mouse pointer. */
@media (max-width:760px){ .chip{padding:12px 15px} }

.search{position:relative; margin-left:auto; flex:0 1 220px; min-width:160px}
.search input{
  width:100%; border:1px solid var(--rule-3); background:var(--paper-card); border-radius:999px;
  padding:6px 13px 6px 32px; font-size:var(--t-sm); color:var(--ink);
}
.search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:13px; height:13px; stroke:var(--muted); fill:none; stroke-width:2; pointer-events:none}
@media (max-width:640px){ .search{flex-basis:100%; margin-left:0; order:9} }

.result-line{font-size:var(--t-sm); color:var(--muted); margin-bottom:var(--s4)}

.project-grid{display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  padding:0 0 var(--s8)}
/* the home page's four featured cards: a fixed 4-up, so they never leave one
   orphan on a second row the way auto-fill does at some widths */
.project-grid.featured{grid-template-columns:repeat(4,1fr); padding-bottom:0}
@media (max-width:1080px){ .project-grid.featured{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .project-grid.featured{grid-template-columns:1fr} }

.pcard{
  position:relative; display:flex; flex-direction:column; background:var(--paper-card);
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.pcard:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--rule-2)}
.pcard:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.pcard-media{aspect-ratio:16/10; background:var(--paper-sunk); overflow:hidden; border-bottom:1px solid var(--rule)}
/* contain, not cover: these are diagrams and plots — cropping them destroys
   the content. The letterbox is the sunk paper tone, so it reads as a plate. */
.pcard-media img{width:100%; height:100%; object-fit:contain; transition:transform .45s var(--ease)}
.pcard:hover .pcard-media img{transform:scale(1.03)}
.pcard-media.empty{display:grid; place-items:center}
.pcard-media.empty svg{width:44px; height:44px; stroke:var(--rule-2); fill:none; stroke-width:1.2}

.pcard-body{padding:var(--s4); display:flex; flex-direction:column; flex:1; gap:var(--s3)}
.pcard h3{font-family:var(--serif); font-size:var(--t-h3); line-height:1.24}
.pcard h3 a{color:inherit; text-decoration:none}
.pcard h3 a::after{content:""; position:absolute; inset:0; z-index:1}
.pcard p{font-size:var(--t-base); color:var(--muted); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.pcard-foot{margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:var(--s3); font-size:var(--t-xs); color:var(--muted)}
.pcard-foot .count{margin-left:auto; font-variant-numeric:tabular-nums}

.tag{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--th, var(--muted)); display:inline-flex; align-items:center; gap:5px;
}
.tag::before{content:""; width:7px; height:7px; border-radius:1px; background:currentColor; flex:none}

[data-theme="haptics"] { --th:var(--t-haptics) }
[data-theme="vr"]      { --th:var(--t-vr) }
[data-theme="ar"]      { --th:var(--t-ar) }
[data-theme="health"]  { --th:var(--t-health) }
[data-theme="mobility"]{ --th:var(--t-mobility) }
[data-theme="laser"]   { --th:var(--t-laser) }
[data-theme="sensing"] { --th:var(--t-sensing) }

.empty-state{grid-column:1/-1; text-align:center; padding:var(--s9) var(--s5); color:var(--muted)}
.empty-state b{display:block; font-family:var(--serif); font-size:1.3rem; color:var(--ink); font-weight:400; margin-bottom:var(--s2)}

/* ==========================================================================
   PROJECT DRAWER
   ========================================================================== */
.scrim{position:fixed; inset:0; z-index:50; background:rgba(23,21,15,.4);
  opacity:0; pointer-events:none; transition:opacity .28s var(--ease)}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:60; width:min(660px,100%);
  background:var(--paper-card); box-shadow:var(--shadow-lg);
  transform:translateX(101%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column; overscroll-behavior:contain;
}
.drawer.open{transform:none}
.drawer-bar{display:flex; align-items:center; gap:var(--s3); flex:none;
  padding:var(--s3) var(--s5); border-bottom:1px solid var(--rule)}
.iconbtn{width:32px; height:32px; flex:none; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--rule); background:var(--paper-card); border-radius:var(--radius)}
.iconbtn:hover{background:var(--paper-sunk); border-color:var(--rule-2)}
.iconbtn svg{width:14px; height:14px; stroke:var(--ink-2); fill:none; stroke-width:2; stroke-linecap:round}
.iconbtn.copied{background:var(--accent-soft); border-color:var(--accent)}
.drawer-bar .iconbtn:first-of-type{margin-left:auto}
.drawer-scroll{overflow-y:auto; flex:1}
.drawer-body{padding:var(--s6) var(--s7) var(--s9)}
.drawer-body h2{font-family:var(--serif); font-size:1.75rem; margin-bottom:var(--s4)}
@media (max-width:640px){ .drawer-body{padding:var(--s5) var(--s5) var(--s8)} }

.meta-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden; margin:var(--s5) 0}
.meta-grid > div{background:var(--paper-card); padding:10px 13px}
.meta-grid dt{font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.meta-grid dd{margin:2px 0 0; font-size:var(--t-base); font-weight:600}

.drawer-body h4{font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:var(--s7) 0 var(--s4);
  padding-bottom:var(--s2); border-bottom:1px solid var(--rule)}
.drawer-body .body-copy p{margin-bottom:var(--s4); color:var(--ink-2)}
.drawer-body .body-copy p:last-child{margin-bottom:0}

.plates{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.plate{border:1px solid var(--rule); border-radius:var(--radius); background:var(--paper-sunk);
  padding:var(--s2); margin:0}
.plate img{width:100%; height:auto; border-radius:2px; background:#fff}
.plate figcaption{font-size:var(--t-xs); color:var(--muted); padding:6px 4px 2px; font-variant-numeric:tabular-nums}

.pager{display:flex; gap:var(--s3); border-top:1px solid var(--rule);
  padding-top:var(--s5); margin-top:var(--s7)}
.pager button{flex:1; min-width:0; text-align:left; cursor:pointer; padding:10px 13px;
  background:var(--paper-card); border:1px solid var(--rule); border-radius:var(--radius)}
.pager button:hover:not(:disabled){border-color:var(--ink); background:var(--paper-sunk)}
.pager button:disabled{opacity:.4; cursor:default}
.pager span{display:block; font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.pager strong{display:-webkit-box; font-weight:600; font-size:var(--t-sm); line-height:1.3; margin-top:2px;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pager .nx{text-align:right}

/* ==========================================================================
   ENTRY LISTS  (publications, awards, service, grants, people)
   ========================================================================== */
.entries{list-style:none; margin:0; padding:0}
.entry{display:grid; grid-template-columns:5.5rem 1fr; gap:var(--s5);
  padding:var(--s4) 0; border-bottom:1px solid var(--rule)}
.entry:last-child{border-bottom:none}
.entry .k{font-family:var(--mono); font-size:var(--t-sm); color:var(--muted);
  font-variant-numeric:tabular-nums; padding-top:2px}
.entry .t{font-size:var(--t-base); line-height:1.5}
.entry .t b{font-weight:600; color:var(--ink)}
.entry .t .m{display:block; color:var(--muted); font-size:var(--t-sm); margin-top:3px}
.entry .t .m em{font-style:italic}
@media (max-width:560px){
  .entry{grid-template-columns:1fr; gap:var(--s1)}
  .entry .k{padding-top:0}
}

/* year headings inside a long list */
.year-head{display:flex; align-items:baseline; gap:var(--s4); margin:var(--s7) 0 var(--s2)}
.year-head:first-child{margin-top:0}
.year-head h2{font-family:var(--serif); font-size:1.375rem}
.year-head span{font-size:var(--t-xs); color:var(--muted); font-variant-numeric:tabular-nums}
.year-head::after{content:""; flex:1; height:1px; background:var(--rule)}

/* pill for publication type */
.ptype{display:inline-block; font-size:var(--t-xs); font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--rule-2);
  border-radius:999px; padding:1px 8px; margin-right:var(--s2); vertical-align:1px}

/* ==========================================================================
   TABLES
   ========================================================================== */
.table-scroll{overflow-x:auto; margin:0 calc(var(--s5) * -1); padding:0 var(--s5)}
table.data{width:100%; border-collapse:collapse; font-size:var(--t-base); min-width:560px}
table.data th,table.data td{text-align:left; padding:11px var(--s4); border-bottom:1px solid var(--rule);
  vertical-align:top}
table.data thead th{font-size:var(--t-xs); letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:600; border-bottom:1px solid var(--rule-2)}
table.data tbody tr:hover{background:var(--paper-sunk)}
table.data td.num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
table.data td.code{font-family:var(--mono); font-size:var(--t-sm); color:var(--muted); white-space:nowrap}
/* funding tables: the project title is the column that matters and the
   award code can be long (some run 50+ chars) -- give title priority
   width and let the code sit underneath, wrapping freely, instead of
   forcing its own nowrap column that squeezes the title into a scroll. */
table.data td.col-title{width:46%}
table.data .code-sub{display:block; margin-top:3px; font-family:var(--mono);
  font-size:var(--t-xs); color:var(--muted); white-space:normal; overflow-wrap:anywhere}
table.data caption{caption-side:bottom; text-align:left; padding-top:var(--s4);
  font-size:var(--t-sm); color:var(--muted)}

.state{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-xs);
  text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--muted); white-space:nowrap}
.state::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--rule-2)}
.state.on{color:var(--ok)}
.state.on::before{background:var(--ok); box-shadow:0 0 0 3px rgba(26,127,82,.14)}

/* ==========================================================================
   MISC
   ========================================================================== */
.cols{display:grid; gap:var(--s6); grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.taglist{display:flex; flex-wrap:wrap; gap:var(--s2); list-style:none; padding:0; margin:0}
.taglist li{border:1px solid var(--rule-2); border-radius:999px; padding:3px 12px;
  font-size:var(--t-sm); color:var(--ink-2)}

.def{margin:0}
.def > div{padding:var(--s4) 0; border-bottom:1px solid var(--rule); display:grid;
  grid-template-columns:9rem 1fr; gap:var(--s5)}
.def > div:last-child{border-bottom:none}
.def dt{font-size:var(--t-sm); color:var(--muted)}
.def dd{margin:0}
@media (max-width:560px){ .def > div{grid-template-columns:1fr; gap:var(--s1)} }

.callout{border-left:2px solid var(--accent); padding:var(--s2) 0 var(--s2) var(--s5);
  color:var(--ink-2)}

.cardlink{display:block; text-decoration:none; color:inherit; background:var(--paper-card);
  border:1px solid var(--rule); border-radius:var(--radius); padding:var(--s5);
  transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease)}
.cardlink:hover{border-color:var(--rule-2); transform:translateY(-2px); box-shadow:var(--shadow)}
.cardlink h3{font-family:var(--serif); font-size:var(--t-h3); margin-bottom:var(--s2)}
.cardlink p{font-size:var(--t-base); color:var(--muted)}
.cardlink .go{display:inline-block; margin-top:var(--s4); font-size:var(--t-sm);
  font-weight:600; color:var(--accent)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{border-top:1px solid var(--rule); margin-top:var(--s9); padding:var(--s7) 0 var(--s8)}
.footer-inner{max-width:var(--wide); margin:0 auto; padding:0 var(--s5);
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s7)}
.site-footer h3{font-size:var(--t-xs); letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:var(--s3)}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:var(--s2)}
.site-footer a{color:var(--ink-2); text-decoration:none; font-size:var(--t-base)}
.site-footer a:hover{color:var(--accent); text-decoration:underline}
.site-footer .colophon{font-size:var(--t-sm); color:var(--muted); margin-top:var(--s3)}
@media (max-width:760px){ .footer-inner{grid-template-columns:1fr; gap:var(--s5)} }

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

/* print: the CV-adjacent pages get printed by committees more often than
   anyone expects */
@media print{
  .masthead,.toolbar,.site-footer,.actions,.drawer,.scrim{display:none !important}
  body{background:#fff; font-size:10.5pt}
  .entry{break-inside:avoid}
  a{color:#000; text-decoration:none}
}