:root {
  --bg: #faf8f3;
  --fg: #191813;
  --muted: #6b6558;
  --line: #e4ded1;
  --accent: oklch(0.48 0.07 150);
  --card: #f4f1e8;
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration: none; }
::selection { background: var(--accent); color: var(--bg); }

/* Contact form */
input:focus, textarea:focus { border-color: var(--accent); }
#contact-form button:hover { opacity: 0.85; }
#contact-form button:disabled { opacity: 0.55; cursor: default; }

/* Honeypot — hidden from people, reachable by bots that fill every field. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* List rows on the experience + projects index pages.
   Layout is inline on each <a>; this is the hover state, plus the mobile
   collapse — which needs !important precisely because the grid is inline. */
.row:hover { background: var(--card); }

/* Project screenshots */
.shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}

/* Résumé / CV download buttons */
.dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 9px 14px;
}
.dl:hover { color: var(--fg); border-color: var(--muted); }


/* Equation block — free-throw project. Plain HTML rather than a maths library:
   one more CDN dependency for six formulas is not worth it, and this stays
   readable with styles off. */
.eqs { margin: 22px 0 6px; display: grid; gap: 14px; }
.eq {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px;
  align-items: baseline;
}
.eq > .n {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  color: var(--muted); padding-top: 2px;
}
.eq > .b {
  font-family: 'IBM Plex Mono', monospace; font-size: 14.5px;
  color: var(--fg); line-height: 1.9; overflow-x: auto;
}
.eq .where { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.6; }
.eqhead {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin: 26px 0 2px;
}
/* stacked fraction */
.frac { display: inline-flex; flex-direction: column; vertical-align: middle;
        text-align: center; margin: 0 2px; }
.frac > span { padding: 0 5px; }
.frac > span:first-child { border-bottom: 1px solid var(--muted); }
.sqrt { border-top: 1px solid var(--muted); padding: 0 3px; margin-left: -2px; }

/* Pi status banner — hidden until a health check fails. */
#pi-status[hidden] { display: none; }
#pi-status {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  /* sticky, not fixed: it holds the top of the viewport while scrolling but
     still occupies layout space, so it never covers the header underneath. */
  position: sticky; top: 0; z-index: 100;
  background: #ddbc8a; border-bottom: 1px solid #c9a674; color: #4a3418;
  padding: 11px 28px; font-size: 14px; line-height: 1.5;
}
#pi-status a { color: #4a3418; text-decoration: underline; text-underline-offset: 2px; }
#pi-status a:hover { color: #241a0b; }
#pi-status .t { font-family: 'IBM Plex Mono', monospace; font-size: 11px;
                letter-spacing: 0.12em; text-transform: uppercase; flex: none;
                color: #5c4320; }

/* Nothing should ever force a horizontal scrollbar. */
img, canvas, iframe { max-width: 100%; }

@media (max-width: 760px) {
  /* The nav was squeezing itself against the right edge next to the wordmark
     and social icons. Give it its own full-width line instead. */
  header nav {
    margin-left: 0 !important;
    justify-content: flex-start !important;
    width: 100%;
    gap: 16px !important;
  }
}

@media (max-width: 640px) {
  h1 { font-size: 28px !important; }
  h2 { font-size: 19px !important; }

  /* 28px gutters eat a tenth of a 375px screen on each side. */
  header > div, main, footer > div, #pi-status {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Index rows: date | title+blurb | read → collapses to one column. */
  .row { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }

  /* Screenshot grids stack rather than shrinking to ~110px thumbnails. */
  .shots { grid-template-columns: minmax(0, 1fr) !important; }

  /* 44px between the form and the contact card is a canyon once wrapped. */
  .contact-row { gap: 24px !important; }
  .contact-row aside { width: 100%; flex: 1 1 100% !important; }

  /* A 1000px-tall PDF box is most of a phone screen scrolled twice. */
  #pdf-native { height: 78vh !important; }

  /* Publications: the 64px year gutter is wasted width at this size. */
  #publications > div > div { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; }

  /* Equations can be wide; let them scroll inside their own row. */
  .eq { grid-template-columns: 38px minmax(0, 1fr) !important; gap: 10px !important; }
}