/* ===== nicholaseshunwilson.com =====
   Layout adapted from lisaeshunwilson.com: one column, a hero with photo and
   links, then sections split by hairlines. Type is Capitana (Floodfonts),
   self-hosted under licence. Colours come from the CV (items.typ), so a
   project is the same colour on paper and on screen. */

/* ===== Type ===== */
@font-face { font-family: "Capitana"; src: url("fonts/capitana-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Capitana"; src: url("fonts/capitana-300i.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Capitana"; src: url("fonts/capitana-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Capitana"; src: url("fonts/capitana-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Capitana"; src: url("fonts/capitana-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Capitana"; src: url("fonts/capitana-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Capitana"; src: url("fonts/capitana-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ===== Global ===== */
:root {
  --brand: #8640b1;   /* the purple from the transcripts and the CV's "now" rule */
  --ink: #222;
  --muted: #555;
  --faint: #666;
  --house: #404040;   /* the CV's dark block: year chips, lane labels, strips */
  --rule: #eee;
  --bg: #fdfdfd;
}

html, body {
  margin: 0;
  /* Capitana has no Greek beta; the system sans fills in that one glyph */
  font-family: "Capitana", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
}

a, a:visited { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Container aligns every section with the photo's edge */
.container { max-width: 1100px; margin: 0 auto; padding: 0 72px; }

/* ===== Hero ===== */
.hero { display: flex; align-items: center; gap: 40px; padding: 36px 0 8px; flex-wrap: wrap; }
.profile-pic { width: 200px; height: 200px; object-fit: cover; border-radius: 50%; }
.hero-text { max-width: 680px; }

h1 { font-size: 1.75rem; margin: 0 0 10px; font-weight: 700; }
.tagline { font-size: 1.25rem; font-weight: 500; color: var(--brand); margin: 0 0 16px; line-height: 1.35; }
.bio { font-size: 1rem; line-height: 1.6; margin: 0 0 18px; font-weight: 300; }

/* Social icons row */
.social-links { display: flex; align-items: center; gap: 8px; }
.icon { width: 28px; height: 28px; transition: transform .3s; vertical-align: middle; }
.icon:hover { transform: scale(1.2); }

/* ===== Sections ===== */
.section { padding: 36px 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section h2 { font-size: 1.6rem; margin: 0 0 18px; font-weight: 700; }

/* Timeline: drawn by Typst from items.typ, the same chart as the CV.
   Phones scroll it sideways rather than shrink it past reading. */
.timeline { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.timeline img { display: block; width: 100%; min-width: 620px; height: auto; }

/* News: compact list */
.news-list { list-style: disc; margin: 0; padding-left: 1.1rem; }
.news-list li { margin: 0 0 6px; line-height: 1.5; font-weight: 300; }
.news-list .when { font-weight: 600; }

/* Project cards: Lisa's research cards, with the CV's chip and tags */
.paper {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: 28px;
  align-items: start;
  margin: 0 0 32px;
}
.paper:last-child { margin-bottom: 0; }
.paper-thumb { display: block; }
.paper-thumb img { width: 100%; height: auto; border-radius: 12px; display: block; transition: transform .3s; }
.paper-thumb:hover img { transform: scale(1.015); }
.paper-title { font-size: 1.35rem; margin: 0 0 10px; font-weight: 700; line-height: 1.25; }
.paper-title a, .paper-title a:visited { color: var(--ink); }
.paper-meta { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 12px; }
.chip { background: var(--house); color: #fff; font-weight: 700; font-size: .78rem; padding: 3px 8px; font-variant-numeric: tabular-nums; }
.tag { background: var(--c, var(--house)); color: #fff; font-weight: 700; font-size: .72rem; padding: 3px 8px; }
.tag:nth-of-type(even) { filter: brightness(1.14); }
.paper-summary { margin: 0 0 10px; line-height: 1.55; font-weight: 300; }
.more { font-weight: 600; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); padding: 24px 0 40px; color: var(--faint); font-weight: 300; font-size: .92rem; line-height: 1.5; }
.site-footer p { margin: 0 0 6px; }

/* ===== Subpages: CV and projects ===== */
/* flow-root keeps the last card's margin inside the grey, and min-height
   carries the grey to the bottom of short pages */
body.sub { background: #f3f4f6; display: flow-root; min-height: 100vh; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: #fff; border-bottom: 1px solid #e5e7eb;
  position: sticky; top: 0; z-index: 10;
}
.pill, .pill:visited {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 999px;
  background: #fff; font-size: 14px; color: var(--ink);
}
.pill:hover { text-decoration: none; border-color: #c9ccd2; }
.pill img { width: 18px; height: 18px; }

/* The CV, page by page, rendered from the same Typst file as the PDF */
.page-frame { width: min(210mm, calc(100vw - 24px)); margin: 18px auto 28px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.10); }
.page-frame img { display: block; width: 100%; height: auto; }

/* Project pages: the CV's section bar, in HTML */
.project { max-width: 820px; margin: 18px auto 40px; padding: 32px 40px 40px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.bar { border-bottom: 2px solid var(--house); margin: 0 0 24px; }
.bar-strip, .bar-row { display: grid; grid-template-columns: 8rem 1fr; }
.bar-strip { background: var(--house); }
.bar-part { color: #fff; font-size: .72rem; font-weight: 600; padding: 3px 9px; }
.bar-tiles { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px 6px 3px 8px; }
.bar-tiles span { flex: 1 1 auto; background: var(--c); color: #fff; font-size: .68rem; font-weight: 700; text-align: center; padding: 1px 6px; }
.bar-tiles span:nth-child(even) { filter: brightness(1.14); }
.bar-row { align-items: stretch; }
.bar-row .chip { display: flex; align-items: center; font-size: .86rem; padding: 0 9px; }
.bar-row h1 { font-size: 1.4rem; margin: 0; padding: 8px 0 8px 12px; line-height: 1.25; }

.project .figure { display: block; width: 100%; border-radius: 12px; margin: 0 0 24px; }
.project .lead { font-size: 1.08rem; line-height: 1.6; font-weight: 300; margin: 0 0 18px; }
.project h2 { font-size: 1.1rem; margin: 26px 0 10px; }
.project ul { list-style: square; padding-left: 1.1rem; margin: 0 0 18px; }
.project li { margin: 0 0 8px; line-height: 1.55; font-weight: 300; }
.project li::marker { color: var(--c); }
.project .video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 14px; background: #000; border-radius: 12px; overflow: hidden; }
.project .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.project .talks .when { font-weight: 600; }
.project .docs .size { color: var(--faint); font-size: .88rem; white-space: nowrap; }
.note { border-left: 4px solid var(--c, var(--house)); padding: 8px 14px; background: #f7f7f8; font-weight: 300; line-height: 1.55; margin: 0 0 14px; }

/* 404 */
.lost { max-width: 560px; margin: 18vh auto 0; padding: 0 20px; text-align: center; }
.lost .chip { display: inline-block; font-size: 1rem; margin: 0 0 14px; }

@media (max-width: 900px) {
  .container { padding: 0 20px; }
  .paper { grid-template-columns: 1fr; gap: 16px; }
  .project { margin: 0; padding: 24px 20px 32px; box-shadow: none; }
  .bar-strip, .bar-row { grid-template-columns: 6.5rem 1fr; }
}

@media print {
  .topbar { display: none; }
  body.sub { background: #fff; }
  .page-frame, .project { box-shadow: none; margin: 0 auto; }
}