/* ---------------------------------------------------------------
   Caltech black & orange for hugo-theme-terminal, with a
   light/dark toggle. The theme derives every colour from these
   three variables (it even uses color-mix() on them), so swapping
   them is enough to repaint the whole site.
   --------------------------------------------------------------- */

/* Dark is the default, and applies when JS is off. */
:root,
html[data-theme="dark"] {
  --background: #0f0f0f;   /* near-black; pure #000 is harsh on screens */
  --foreground: #e8e8e8;
  --accent: #ff6c0c;       /* Caltech orange */
}

/* Explicit light choice. */
html[data-theme="light"] {
  --background: #ffffff;
  --foreground: #1a1a1a;
  /* Caltech orange is only ~2.9:1 on white, below the 4.5:1 needed
     for body text, so light mode uses a darkened shade (~5:1). */
  --accent: #c24400;   /* Caltech's own darker orange (their --primary) */
}

/* Dark is the site's default look regardless of the visitor's OS setting;
   the toggle is what opts into light. To follow the OS preference instead,
   restore the @media (prefers-color-scheme: light) block here. */

/* ---------------------------------------------------------------
   Light/dark toggle button
   --------------------------------------------------------------- */
#theme-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--accent);
  background: var(--background);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
}

#theme-toggle:hover,
#theme-toggle:focus-visible {
  color: var(--background);
  background: var(--accent);
}

/* The icon is swapped by CSS, so the button stays correct even if
   the page is restored from cache. */
#theme-toggle .icon-light { display: none; }
#theme-toggle .icon-dark  { display: inline; }
html[data-theme="light"] #theme-toggle .icon-light { display: inline; }
html[data-theme="light"] #theme-toggle .icon-dark  { display: none; }

@media print {
  #theme-toggle { display: none; }
}

/* ---------------------------------------------------------------
   Home page intro: photo left, details right
   --------------------------------------------------------------- */
.profile {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.profile__aside {
  /* Fixed-width left column: the photo, with position and contact
     links beneath it. */
  flex: 0 0 270px;
  max-width: 100%;
}

.profile__photo {
  display: block;
  width: 100%;
  /* The theme puts `margin: 25px 0` on every img, which would drop the
     photo below the text it should line up with. */
  margin: 0;
  /* The theme frames every image in an 8px accent border; the portrait
     reads better bare. */
  border: none;
  padding: 0;
}

.profile__caption {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.profile__caption > :first-child { margin-top: 0; }
.profile__caption > :last-child  { margin-bottom: 0; }
.profile__caption p { margin: 0 0 0.5rem; }

.profile__body { flex: 1 1 0; min-width: 0; }
.profile__body > :first-child { margin-top: 0 !important; }
.profile__body > :last-child  { margin-bottom: 0; }

/* The contact line: separated links that wrap neatly. */
.profile__body .contact {
  margin-top: 0.5rem;
  line-height: 1.9;
}

/* Name sits tight above the position line. */
.profile__body h3 {
  margin: 0 0 0.35rem 0;
}

/* Stack the photo above the details on narrow screens. */
@media (max-width: 620px) {
  .profile {
    flex-direction: column;
    gap: 1rem;
  }
  .profile__aside {
    flex-basis: auto;
    width: 100%;
  }
  .profile__photo {
    width: 160px;
  }
}

/* ---------------------------------------------------------------
   Publication list (generated from publications.bib)
   --------------------------------------------------------------- */
.pubs__year {
  margin: 1.75rem 0 0.75rem;
}

.pubs__list {
  margin: 0;
  padding: 0;
  /* No bullets: a flex item (an entry with a teaser image) cannot render
     a list marker, so markers would appear on some entries but not
     others. */
  list-style: none;
}

/* Each entry flows as a single wrapping line, so every part is inline
   and separated by a normal word space. */
.pub {
  margin: 0 0 0.6rem;
}

.pub__authors,
.pub__venue {
  opacity: 0.85;
}

/* An entry with a teaser image: thumbnail left, text beside it. */
.pub--figure {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pub__thumb {
  flex: 0 0 auto;
  width: 300px;
  /* Same two theme defaults the portrait has to override: a chunky 8px
     accent border, and `margin: 25px 0` on every img. */
  border-width: 3px;
  padding: 3px;
  margin: 0;
}

@media (max-width: 620px) {
  .pub--figure {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* Inline accent highlight, via the {{< hl >}} shortcode. */
.hl {
  color: var(--accent);
}

/* ---------------------------------------------------------------
   Publication matrix: applications x methodological categories
   --------------------------------------------------------------- */
.pubmatrix {
  /* Tables are the one thing allowed to scroll sideways on a phone. */
  overflow-x: auto;
  margin: 1.5rem 0;
}

.pubmatrix table {
  margin: 0;
  min-width: 640px;
}

.pubmatrix th {
  text-align: left;
  vertical-align: top;
}

/* Row labels are short; never break them mid-word. */
.pubmatrix tbody th {
  white-space: nowrap;
}

.pubmatrix td {
  vertical-align: top;
}

.pubmatrix__corner {
  border: none;
}

.pubmatrix__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two papers in one cell each wrap over several lines, so spacing alone
   does not separate them; give each entry a visible marker. */
.pubmatrix__list li {
  position: relative;
  padding-left: 1.1em;
}

.pubmatrix__list li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.pubmatrix__list li + li {
  margin-top: 0.75rem;
}

.pubmatrix__year {
  opacity: 0.7;
}

.pubmatrix__empty {
  opacity: 0.5;
}

.pubmatrix th {
  text-transform: none;
  letter-spacing: normal;
}
/* ---------------------------------------------------------------
   Typography: proportional body text, monospace kept for structure.

   The theme sets Fira Code on `body`, so every paragraph is monospace.
   That is fine for code but costs reading speed on running prose, so
   body text moves to IBM Plex Sans while headings, the logo, the nav
   and code stay monospace. Plex Sans and Plex Mono are a designed
   superfamily, so the mix reads as deliberate.

   Self-hosted: the theme makes no external font requests and this
   keeps it that way.
   --------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

/* Monospace stays where it carries the theme's character. */
h1, h2, h3, h4, h5, h6,
.logo, .logo__text,
.navigation-menu, .menu,
code, kbd, pre, pre code, samp {
  font-family: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace;
}

/* ---------------------------------------------------------------
   Measure: cap running text at a comfortable line length while
   letting wide elements (the matrix, publication lists) use the
   full column.
   --------------------------------------------------------------- */
/* The header stripe spans the container, so the prose spans it too --
   otherwise text stops around two-thirds of the way across and leaves a
   dead margin on the right. The container itself is what sets the
   measure, so it is narrower than the full window. */
.container.full {
  max-width: 1000px;
}

/* =================================================================
   PROPOSAL: modern refinements.
   Self-contained -- delete this whole block to restore the look above.
   ================================================================= */

/* 1. Palette. Warm near-black instead of neutral, a slightly warm
      off-white, and two new tones: `--muted` for metadata and
      `--hairline` for borders. `--radius` is a theme variable that
      rounds images, buttons and inputs everywhere at once. */
:root,
html[data-theme="dark"] {
  --background: #2a2525;
  --foreground: #e9e4db;
  --accent: #1aadf1; /*#ff6c0c*/
  --muted: #9b958c;
  --hairline: color-mix(in srgb, var(--foreground) 16%, transparent);
  --radius: 6px;
}

html[data-theme="light"] {
  --background: #fbfaf7;
  --foreground: #1e1b18;
  --accent: #2f96fc; /*lightblue 1aadf1   /* c24400 Caltech's own darker orange (their --primary) */
  --muted: #6f6a62;
  --hairline: color-mix(in srgb, var(--foreground) 14%, transparent);
}

/* With JavaScript off the init script never runs, so honour the OS
   setting here too. An explicit dark choice (data-theme="dark") wins. */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    --background: #ffffff;
    --foreground: #1e1b18;
    --accent: #2f96fc; /*lightblue 2f96fc   /* ed7739, c24400 Caltech's own darker orange (their --primary) */
    --muted: #6f6a62;
    --hairline: color-mix(in srgb, var(--foreground) 14%, transparent);
  }
}


/* 3. Links in body text: keep the accent, refine the underline. */
.content a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.content a:hover {
  text-decoration-color: var(--accent);
}

/* 4. Images: no frame, soft corners. */
.profile__photo,
.pub__thumb {
  border: none;
  padding: 0;
  border-radius: 8px;
}

/* 5. Metadata in the muted tone instead of reduced opacity. */
.pub__authors,
.pub__venue,
.pubmatrix__year,
.pubmatrix__empty {
  opacity: 1;
  color: var(--muted);
}

/* 6. Table: hairline borders instead of 2px solid foreground. */
.pubmatrix table,
.pubmatrix th,
.pubmatrix td {
  border: 1px solid var(--hairline);
}

.pubmatrix thead th {
  font-weight: 600;
}

.pubmatrix td.pubmatrix__corner {
  border: none;
}

/* 7. Theme toggle: lighter frame, muted until hovered. */
#theme-toggle {
  border-width: 1px;
  border-color: var(--hairline);
  color: var(--muted);
}

#theme-toggle:hover,
#theme-toggle:focus-visible {
  color: var(--background);
  background: var(--accent);
  border-color: var(--accent);
}

/* 8. A little more air above section headings. */
.content h2 {
  margin-top: 2.5rem;
}

/* ---------------------------------------------------------------
   Entry spacing on single pages (CV, Teaching). Entries are a bold
   header line followed by a bullet list; the theme's 25px margins on
   both p and ul make each entry float apart from its own bullets.
   Scoped to .post-content, so the home page is untouched.
   --------------------------------------------------------------- */
/* Adjacent vertical margins collapse to the LARGER one, so the header
   paragraph's own 25px bottom margin has to shrink too. */
.post-content p:has(+ ul),
.post-content p:has(+ ol) {
  margin-bottom: 0.3rem;
}

.post-content p + ul,
.post-content p + ol {
  margin-top: 0.3rem;     /* bullets hug their header line */
  margin-bottom: 1rem;
}

.post-content ul + p,
.post-content ol + p {
  margin-top: 1rem;       /* modest gap before the next entry */
}

.post-content h3 {
  margin-bottom: 0.5rem;  /* sub-headings (Grants, Honors…) sit closer to their list */
}

/* ---------------------------------------------------------------
   Publication entries: "Title, with A, B and C, VENUE YEAR." The venue
   is the emphasised element; a small accent marker leads each entry
   (not the thumbnail ones, where the image does that job).
   --------------------------------------------------------------- */
.pub__venue {
  font-style: italic;
  font-weight: 400;
  color: var(--foreground);
  opacity: 1;
}

.pubs__list > .pub:not(.pub--figure) {
  position: relative;
  padding-left: 1.3em;
}

.pubs__list > .pub:not(.pub--figure)::before {
  content: "\25B8";           /* ▸ */
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Two-line entries: title — authors, then venue + links beneath. */
.pub {
  margin-bottom: 0.9rem;
}

.pub__dash {
  color: var(--muted);
}

.pub__meta {
  margin-top: 0.1rem;
}

.pub__links {
  white-space: nowrap;      /* [paper] [code] never splits across lines */
}