styles.css

/* Subtle typography polish — keep this short, let the theme do the work */

/* ---------------------------------------------------------------------------
   Palette and type tokens.

   Dark mode is keyed off `body.quarto-dark`. Quarto switches themes by swapping
   the Bootstrap stylesheet and toggling that class on <body>; it never sets
   data-bs-theme on <html>. (The one data-bs-theme in the page is the static
   one Quarto puts on <nav>, which is why navbar rules can't use it either.)
   --------------------------------------------------------------------------- */
:root {
  --nb-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --nb-serif: "Spectral", Georgia, "Times New Roman", serif;
  --bs-body-font-family: "Newsreader", Georgia, "Times New Roman", serif;
  --bs-font-monospace: var(--nb-mono);

  /* "Lab notebook" palette — light */
  --nb-page: #faf8f3;
  --nb-paper: #f2f1ea;
  --nb-card: #ffffff;
  --nb-ink: #20242a;
  --nb-prose: #33383e;
  --nb-secondary: #4a4f55;
  --nb-muted: #5f6469;
  --nb-faint: #676c72;
  --nb-railval: #3a3f45;
  --nb-accent: #3d6d8c;
  --nb-dot: oklch(0.62 0.11 150);
  --nb-navbar-bg: #faf8f3;
  --nb-navbar-border: #20242a;
  --nb-rail-border: rgba(34, 38, 43, 0.22);
  --nb-sec-rule: rgba(34, 38, 43, 0.2);
  --nb-dotted: rgba(34, 38, 43, 0.28);
  --nb-fig-border: rgba(34, 38, 43, 0.22);
  --nb-figcap-border: rgba(34, 38, 43, 0.16);
  --nb-figcap-bg: #f2f1ea;
  --nb-photo-border: rgba(34, 38, 43, 0.25);
  --nb-card-border: transparent;

  /* Alias kept because reaction-diffusion/index.qmd consumes it. Defined
     literally in both modes: a var() alias would be substituted once against
     the light palette and never pick up the dark override. */
  --accent: #3d6d8c;
}

body.quarto-dark {
  --nb-page: #16181b;
  --nb-paper: #16181b;
  --nb-card: #ffffff;
  --nb-ink: #e8e6de;
  --nb-prose: #c9c7bf;
  --nb-secondary: #a7a59d;
  --nb-muted: #95938b;
  --nb-faint: #8a8880;
  --nb-railval: #b8b6ae;
  --nb-accent: #74a9cb;
  --nb-dot: #5cc08c;
  --nb-navbar-bg: #212529;
  --nb-navbar-border: rgba(232, 230, 222, 0.32);
  --nb-rail-border: rgba(232, 230, 222, 0.16);
  --nb-sec-rule: rgba(232, 230, 222, 0.18);
  --nb-dotted: rgba(232, 230, 222, 0.22);
  --nb-fig-border: rgba(232, 230, 222, 0.16);
  --nb-figcap-border: rgba(232, 230, 222, 0.12);
  --nb-figcap-bg: #1c1f22;
  --nb-photo-border: rgba(232, 230, 222, 0.18);
  --nb-card-border: rgba(232, 230, 222, 0.08);

  --accent: #74a9cb;
}

/* Warm off-white page background, light mode only — dark mode keeps darkly's. */
body.quarto-light {
  --bs-body-bg: var(--nb-page);
}

/* ---------------------------------------------------------------------------
   Site header — Quarto's navbar restyled as the monospace "lab notebook" bar.

   The bar's colours come from website.navbar background/foreground in
   _quarto.yml, not from here, so that Quarto compiles the search, theme-toggle
   and mobile-toggler icons to match: those are background-image SVGs with the
   fill baked in, which CSS cannot recolour. Only the dark-mode flip is done
   below.
   --------------------------------------------------------------------------- */
.navbar {
  font-family: var(--nb-mono);
  font-size: 13px;
  border-bottom: 1px solid var(--nb-navbar-border);
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.navbar-title {
  font-family: var(--nb-mono);
  font-size: 13px;
  font-weight: 600;
}
.navbar-brand:hover .navbar-title {
  color: var(--nb-accent);
}
.navbar .navbar-nav .nav-link {
  font-family: var(--nb-mono);
  font-size: 13px;
}
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover {
  color: var(--nb-accent) !important;
}

/* :not(.nb-home) keeps this clear of the homepage rule below, which wants the
   bar to blend into the notebook paper instead. The two selectors are mutually
   exclusive, so neither depends on source order or on which file loads first. */
body.quarto-dark:not(.nb-home) .navbar {
  background-color: var(--nb-navbar-bg) !important;
}
/* Homepage: the bar blends into the notebook paper, in both modes. */
body.nb-home .navbar {
  background-color: var(--nb-paper) !important;
}
body.quarto-dark .navbar .navbar-title,
body.quarto-dark .navbar .navbar-nav .nav-link,
body.quarto-dark .navbar .quarto-navbar-tools a {
  color: var(--nb-muted) !important;
}
/* Icon SVGs are compiled for the light bar; re-light them over the dark one. */
body.quarto-dark .navbar .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e8e6de' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
body.quarto-dark .navbar .aa-DetachedSearchButtonIcon {
  color: var(--nb-muted);
}
/* Baked-in fill, so inversion is the only lever. #4a4f55 inverts to a warm
   light grey that sits at ~7:1 on the dark bar. */
body.quarto-dark .navbar .quarto-color-scheme-toggle .bi::before {
  filter: invert(1);
}

a {
  color: var(--accent);
}
a:hover {
  color: var(--accent);
  filter: brightness(0.85);
}

main h2 {
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  padding-bottom: 0.3rem;
  margin-top: 2rem;
}

/* Category badges (blog listing, home "Latest post", post headers): the theme
   hardcodes a grey that doesn't adapt to dark and fails contrast there. Drive
   them from theme variables so they track light/dark. */
.listing-category,
.quarto-category {
  color: var(--bs-secondary-color);
  border-color: var(--bs-border-color);
}

/* Display headings in Spectral (the lab-notebook heading face); body prose
   stays Newsreader. */
h1, h2, h3, h4, h5, h6,
.quarto-title-block .title,
.about-entity .about-contents h1 {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* Slightly tighter measure for readability on wide screens */
.quarto-title-block .quarto-title .title {
  font-weight: 600;
}

main.content {
  max-width: 820px;
}

/* Code blocks: a touch more breathing room */
div.sourceCode {
  border-radius: 6px;
  padding: 0.25rem 0;
}

/* Listing cards on the blog page */
.quarto-listing-default .listing-item {
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Shared chrome for the interactive demos (Game of Life, reaction-diffusion).
   Driven by Bootstrap theme variables so the controls track light/dark and the
   manual color-scheme toggle, instead of each page hardcoding its own palette. */
.sim-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.sim-controls button,
.sim-controls select {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.sim-controls button:hover,
.sim-controls select:hover {
  border-color: var(--accent);
}
.sim-controls button:active {
  background: var(--bs-tertiary-bg);
}
.sim-canvas {
  width: 100%;
  height: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  touch-action: none;
}

/* ===========================================================================
   Trips — chronological plan entries emitted by the `stop` and `travel`
   shortcodes (_extensions/trips). Colours come from the shared --nb-* tokens.
   =========================================================================== */
.trip-stop {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  gap: 0.75rem;
  padding: 0.5rem 0;
  align-items: baseline;
}
.trip-icon {
  font-size: 0.95em;
  line-height: 1.5;
  text-align: center;
}
.trip-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.trip-place {
  font-weight: 600;
  text-decoration: none;
}
.trip-place:hover { text-decoration: underline; }
.trip-detail,
.trip-note {
  font-family: var(--nb-mono);
  font-size: 0.78em;
  color: var(--nb-muted);
}
.trip-note { font-style: italic; }

/* A leg is a connector between two stops, so it reads lighter than a stop and
   carries the rule that joins them. */
.trip-travel {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  gap: 0.75rem;
  align-items: center;
  margin: 0.1rem 0;
  padding-left: 0;
}
.trip-travel .trip-icon { font-size: 0.8em; opacity: 0.85; }
.trip-leg {
  font-family: var(--nb-mono);
  font-size: 0.75em;
  color: var(--nb-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--nb-dotted);
  align-self: center;
  justify-self: start;
}
.trip-leg:hover { color: var(--nb-accent); }

/* Day headings read as separators between days. */
.trips-day h2,
main h2 + .trip-stop { margin-top: 0; }

/* Trips listing */
.trip-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.trip-card-date {
  font-family: var(--nb-mono);
  font-size: 0.8rem;
  color: var(--nb-muted);
}
.trip-card-title { font-size: 1.3rem; margin: 0 0 0.3rem; }
.trip-card-title a { text-decoration: none; }
.trip-card-sub { margin: 0; color: var(--nb-secondary); }
.trip-empty {
  font-family: var(--nb-mono);
  font-size: 0.85rem;
  color: var(--nb-muted);
}
@media (max-width: 720px) {
  .trip-card { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* ===========================================================================
   Homepage — "Lab notebook" (1C) layout.
   Layout rules are scoped under .nb so they never leak to other pages; the
   colour tokens they consume live in :root / body.quarto-dark above, shared
   with the navbar. Layout, type and spacing are identical between modes.
   =========================================================================== */
.nb {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--nb-paper);
  color: var(--nb-ink);
  font-family: var(--nb-serif);
}

body.quarto-dark .nb {
  border: 1px solid var(--nb-card-border);
}

/* Body grid: fixed rail + main */
.nb-body {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
}

/* Left metadata rail */
.nb-rail {
  grid-column: 1;
  border-right: 1px solid var(--nb-rail-border);
  padding: 34px 30px;
  font-family: var(--nb-mono);
  font-size: 12.5px;
  line-height: 2;
  color: var(--nb-railval);
}
.nb-photo {
  width: 130px;
  height: 130px;
  border-radius: 5px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  border: 1px solid var(--nb-photo-border);
  margin-bottom: 24px;
  display: block;
}
.nb-k { color: var(--nb-faint); }
/* Values now run to full words rather than abbreviations, so several wrap;
   1.55 keeps a wrapped value reading as one block against the rail's airy
   line-height: 2, which the label spacing still uses. */
.nb-v { margin-bottom: 12px; color: var(--nb-railval); line-height: 1.55; }
/* Keeps a name from breaking across lines; the value wraps at the · instead. */
.nb-nowrap { white-space: nowrap; }
.nb-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
}
.nb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nb-dot);
  display: inline-block;
  flex: none;
}
.nb-links { display: flex; flex-direction: column; }
.nb-links a { color: var(--nb-accent); text-decoration: none; }
.nb-links a:hover { text-decoration: underline; }

/* Main column */
.nb-main { grid-column: 2; min-width: 0; padding: 42px 46px 50px; }
.nb-eyebrow {
  font-family: var(--nb-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nb-faint);
  margin-bottom: 10px;
}
.nb-name {
  font-family: var(--nb-serif);
  font-size: 56px;
  line-height: 1;
  margin: 0 0 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nb-ink);
}
.nb-tagline {
  font-family: var(--nb-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--nb-accent);
  margin: 0 0 6px;
  line-height: 1.35;
  max-width: 26em;
}
.nb-intro {
  font-family: var(--nb-serif);
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--nb-prose);
  margin: 16px 0 0;
  max-width: 40em;
}

/* Featured figure — stays on white in both modes */
.nb-fig {
  margin: 30px 0 0;
  border: 1px solid var(--nb-fig-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--nb-card);
}
/* margin:0 also cancels Bootstrap's .figure-img bottom margin, which Quarto
   adds to this img during post-processing. */
.nb-fig img { display: block; width: 100%; height: auto; margin: 0; }
/* Portrait variant. A conference poster is ~1.4x taller than it is wide, so
   at full column width it fills the viewport on its own and pushes §01 below
   the fold. Cap the height and centre it; the readable detail is in the PDF
   the figure links to. */
.nb-fig-tall img { width: auto; max-width: 100%; max-height: 520px; margin: 0 auto; }
.nb-fig-tall { padding: 18px 18px 0; }
.nb-fig figcaption {
  font-family: var(--nb-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--nb-muted);
  padding: 11px 14px;
  border-top: 1px solid var(--nb-figcap-border);
  background: var(--nb-figcap-bg);
}
.nb-figmeta { color: var(--nb-faint); }

/* Section header pattern (§01 / §02 / §03). These are <h2>s, so the global
   `main h2` rule and the heading font rule both need neutralising. */
.nb-sec {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 36px 0 8px;
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
}
.nb-sec-num {
  font-family: var(--nb-mono);
  font-size: 13px;
  color: var(--nb-accent);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.nb-sec-label {
  font-family: var(--nb-mono);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--nb-muted);
}
.nb-sec-rule {
  flex: 1;
  height: 1px;
  background: var(--nb-sec-rule);
}

/* Current-focus rows */
.nb-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 26px;
  padding: 13px 0;
  border-bottom: 1px dotted var(--nb-dotted);
}
.nb-key {
  font-family: var(--nb-mono);
  font-size: 13px;
  color: var(--nb-ink);
}
.nb-row p {
  font-family: var(--nb-serif);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--nb-secondary);
  margin: 0;
}

/* §02 Now */
.nb-now {
  font-family: var(--nb-serif);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--nb-prose);
  margin: 0;
  max-width: 44em;
}

/* §03 Latest post */
.nb-post {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 26px;
  align-items: baseline;
}
.nb-post-date {
  font-family: var(--nb-mono);
  font-size: 12.5px;
  color: var(--nb-faint);
}
.nb-post-title {
  font-family: var(--nb-serif);
  font-size: 22px;
  margin: 0 0 7px;
  font-weight: 600;
}
.nb-post-title a { color: var(--nb-ink); text-decoration: none; }
.nb-post-title a:hover { color: var(--nb-accent); }
.nb-post-desc {
  font-family: var(--nb-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--nb-secondary);
  margin: 0 0 8px;
}
.nb-post-tags {
  font-family: var(--nb-mono);
  font-size: 11.5px;
  color: var(--nb-faint);
}

/* Easter-egg terminal prompt + walking glider */
.nb-egg {
  margin-top: 42px;
  padding-top: 15px;
  border-top: 1px dotted var(--nb-dotted);
}
.nb-egg a {
  font-family: var(--nb-mono);
  font-size: 12.5px;
  color: var(--nb-faint);
  text-decoration: none;
}
.nb-egg a:hover { color: var(--nb-accent); }
.nb-glider {
  margin-left: 8px;
  vertical-align: -3px;
  fill: currentColor;
}
/* Each group is one Game of Life generation; the negative delays advance the
   cycle so the generations show in order 1 → 2 → 3 → 4. */
.nb-glider .nb-gp { animation: nb-glider 0.9s linear infinite; }
.nb-glider .nb-gp:nth-child(1) { animation-delay: 0s; }
.nb-glider .nb-gp:nth-child(2) { animation-delay: -0.675s; }
.nb-glider .nb-gp:nth-child(3) { animation-delay: -0.45s; }
.nb-glider .nb-gp:nth-child(4) { animation-delay: -0.225s; }
@keyframes nb-glider {
  0% { opacity: 1; }
  25% { opacity: 1; }
  25.01% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-glider .nb-gp { animation: none; opacity: 0; }
  .nb-glider .nb-gp:nth-child(1) { opacity: 1; }
}

/* Responsive: collapse to a single column below ~720px */
@media (max-width: 720px) {
  .nb-body { grid-template-columns: 1fr; }
  .nb-rail {
    border-right: none;
    border-bottom: 1px solid var(--nb-rail-border);
  }
  .nb-main { padding: 30px 26px 40px; }
  .nb-name { font-size: 40px; }
  .nb-row { grid-template-columns: 1fr; gap: 6px; }
  .nb-post { grid-template-columns: 1fr; gap: 6px; }
}