/* ---------------------------------------------------------------------
   lab notebook — paper & ink stylesheet
   No JS. Fonts are self-hosted (Latin Modern) so this renders the same
   offline, on a bench PC with no internet access.
   --------------------------------------------------------------------- */

@font-face {
  font-family: "Lab Roman";
  src: url("../fonts/lmroman10-regular.otf") format("opentype");
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: "Lab Roman";
  src: url("../fonts/lmroman10-italic.otf") format("opentype");
  font-weight: 400; font-style: italic;
}
@font-face {
  font-family: "Lab Roman";
  src: url("../fonts/lmroman10-bold.otf") format("opentype");
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: "Lab Roman";
  src: url("../fonts/lmroman10-bolditalic.otf") format("opentype");
  font-weight: 700; font-style: italic;
}
@font-face {
  font-family: "Lab Mono";
  src: url("../fonts/lmmono10-regular.otf") format("opentype");
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: "Lab Mono";
  src: url("../fonts/lmmono10-italic.otf") format("opentype");
  font-weight: 400; font-style: italic;
}

:root {
  --paper:      #efece4;
  --paper-2:    #e8e4d9;   /* slightly deeper panels */
  --ink:        #14130f;   /* body text — near-black, faintly warm (~15.5:1 on paper) */
  --ink-soft:   #3d3a30;
  --text:       16px;      /* body reading size — the type equivalent of --max-w */
  --rule:       #a89f89;
  --rule-light: #cdc6b2;
  --navy:       #2b3a55;
  --oxblood:    #7a2e2e;
  /* Single reading column: text, figures, tables and headings all share this
     width and left edge — nothing breaks out wider. ~48rem of content once the
     side padding is subtracted. Widen for bigger figures + longer text lines,
     narrow for a tighter reading measure. */
  --max-w:      40rem;
  --serif:      "Lab Roman", "STIX Two Text", Cambria, Georgia, serif;
  --mono:       "Lab Mono", "IBM Plex Mono", Consolas, "SF Mono", monospace;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--rule); } */
a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--navy); }
/* a { color: var(--navy); text-decoration: none; border-bottom: none; } */
a:hover { color: var(--oxblood); border-bottom-color: var(--oxblood); }

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.6rem 1.4rem 5rem;
}

/* ---------------------------------------------------------------- header */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.6rem;
  margin-bottom: 0.35rem;
}
.masthead .mark {
  font-family: var(--mono);
  font-size: calc(var(--text) * 0.8);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.masthead .mark a { border: none; color: var(--ink-soft); }
.masthead .mark a:hover { color: var(--oxblood); }
.masthead .brand { font-size: calc(var(--text) * 0.95); }   /* the site title, as a nameplate */
.masthead .brand a { color: var(--ink); }
.masthead .brand-mark {           /* small logo mark before the site title */
  height: 3em;
  width: auto;
  vertical-align: middle;
  margin-right: 0.45rem;
  position: relative;
  top: -0.06em;
}

.subhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: calc(var(--text) * 0.72);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;   /* small; index/about titles add their own top gap below */
}
/* the tagline is the one piece of prose in the chrome — set it as a journal
   strapline (serif italic) rather than mono, while the nav stays mono/labelled */
.subhead > span {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--text) * 0.82);
  letter-spacing: 0;
}
.subhead a {
  border-bottom: none;
}
.subhead nav { display: flex; gap: 1.6rem; }
.subhead nav a {
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-underline-offset: 0.25em;   /* underline drawn via text-decoration: adds no box height */
}
.subhead nav a:hover { color: var(--oxblood); text-decoration: underline; text-decoration-color: var(--oxblood); }
.subhead nav a.current { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink); }

/* ---------------------------------------------------------------- titles */

h1.page-title {
  font-size: calc(var(--text) * 1.56);
  font-weight: 700;
  line-height: 1.25;
  margin: 1.3rem 0 0.3rem;   /* restores the index/about nav→title gap (subhead margin is small) */
}
p.deck {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 2rem;
  font-size: calc(var(--text) * 1.02);
}

.notfound {
  padding: 3rem 0 4rem;
}
.notfound .page-title {
  font-size: calc(var(--text) * 3);
  font-variant-numeric: lining-nums;
  margin: 0 0 0.4rem;
}

h2.section {
  font-size: calc(var(--text) * 0.78);
  font-family: var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.35rem;
  margin: 2.6rem 0 1.1rem;
}

/* --------------------------------------------------------------- page head */

.page-head { padding: 0 0 1.8rem; }
.page-head .page-title { margin: 1.3rem 0 0.3rem; }
.page-head .byline {
  font-style: italic;
  color: var(--ink-soft);
  font-size: calc(var(--text) * 0.82);
  margin: 0;
}

/* home-page avatar — a floated, round portrait */
.avatar { float: right; margin: 0.2rem 0 1rem 1.6rem; }
.avatar img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
}

/* project entry: title on the left, year pushed to the right edge */
.prose p.project {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 1.6rem 0 0.2rem;
}
.prose p.project .year {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: calc(var(--text) * 0.8);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
/* resource links (a PDF you wrote, code, data …) — a labelled block above the
   abstract, one link per line, sharing the abstract's left-rule style */
.materials {
  margin: 0 0 2rem;
}
.materials .label {
  display: block;
  font-family: var(--mono);
  font-size: calc(var(--text) * 0.7);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}
.materials .item {
  display: block;
  width: fit-content;
  font-family: var(--mono);
  font-size: calc(var(--text) * 0.82);
  color: var(--ink);
  margin: 0.3rem 0;
}
.materials .item a { border: none; color: var(--navy); }
.materials .item a:hover { color: var(--oxblood); text-decoration: underline; text-underline-offset: 0.2em; }


.abstract-block {
  margin: 0 0 2.4rem;
  padding: 0.15rem 0 0.15rem 1.15rem;
  border-left: 3px solid var(--rule);
}
.abstract-block .label {
  display: block;
  text-align: left;
  font-family: var(--mono);
  font-size: calc(var(--text) * 0.7);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.7rem;
}
.abstract-block p {
  margin: 0;
  text-align: justify;
  hyphens: auto;
  color: var(--ink);
}

/* ------------------------------------------------------------------- toc */

nav.toc {
  margin: 0 0 2.4rem;
  padding: 0 0 1.4rem;   /* no top padding: the element above sets the gap */
  border-bottom: 1px solid var(--rule);
}
nav.toc .label {
  display: block;
  text-align: left;
  font-family: var(--mono);
  font-size: calc(var(--text) * 0.7);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
nav.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: calc(var(--text) * 0.98);
}
nav.toc li {
  display: flex;
  gap: 0.7rem;
  margin: 0.32rem 0;
}
nav.toc li .num {
  flex: 0 0 2.4rem;
  text-align: right;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
nav.toc li a {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* depth-based indentation: a float nested in a subchapter (1.1) sits one level
   deeper than one in a chapter (1) */
nav.toc li.toc-l1 { margin-left: 1.9rem; font-size: calc(var(--text) * 0.9); }
nav.toc li.toc-l2 { margin-left: 3.8rem; font-size: calc(var(--text) * 0.9); }
nav.toc li.float { color: var(--ink-soft); }
nav.toc a { border: none; color: var(--ink); }
nav.toc a:hover { color: var(--oxblood); }

figure {
  margin: 1.6rem 0 2.2rem;
  padding: 1.1rem 1.1rem 0.9rem;
  border: 1px solid var(--rule);
  /* figures and tables share the page background — the ruled border does the
     framing, so the fill stays ink-on-paper rather than a lifted panel. */
  background: var(--paper);
}
figure img, figure object, figure svg { width: 100%; height: auto; display: block; }
figcaption {
  font-size: calc(var(--text) * 0.86);
  color: var(--ink-soft);
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule-light);
}
figcaption .fig-num { font-family: var(--mono); color: var(--ink); font-style: normal; }
/* a table already closes with its own bottom rule, so drop the caption's
   hairline for table figures — no double rule */
figure.tabular figcaption { border-top: none; padding-top: 0; margin-top: 0.7rem; }

/* -------------------------------------------------------------------- footer */

footer.colophon {
  margin-top: 4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: calc(var(--text) * 0.72);
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
}
/* footer.colophon a { text-decoration: underline; border: none; } */
footer.colophon a { border: none; }
footer.colophon a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* ------------------------------------------------------------ posts / markdown */

article.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1rem; text-align: justify; hyphens: auto; }

/* optional chapter numbers ("1.", "1.1") on numbered posts */
.post-h2 .sec-num, .post-h3 .sec-num { color: var(--ink-soft); font-weight: 400; }

/* abstract: allow more than one paragraph */
.abstract-block p + p { margin-top: 0.8rem; }

/* headings: h2 is a chapter (ruled), h3 a subchapter, h4 a minor head */
h2.post-h2 {
  font-family: var(--serif);
  font-size: calc(var(--text) * 1.3);
  font-weight: 700;
  margin: 2.6rem 0 1.1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
h3.post-h3 {
  font-family: var(--serif);
  font-size: calc(var(--text) * 1.12);
  font-weight: 700;
  margin: 2rem 0 0.8rem;
}
h4.post-h4 {
  font-family: var(--mono);
  font-size: calc(var(--text) * 0.8);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.8rem 0 0.7rem;
}

.prose ul, .prose ol { margin: 0 0 1.1rem; padding-left: 1.5rem; }
.prose li { margin: 0.25rem 0; }
.prose li > ul, .prose li > ol { margin: 0.3rem 0 0.2rem; }   /* nested lists sit snug */

.prose blockquote {
  margin: 1.3rem 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-soft);
  font-style: italic;
}

/* code: plain mono, no highlighting, on a quiet panel */
.prose pre {
  font-family: var(--mono);
  font-size: calc(var(--text) * 0.85);
  line-height: 1.5;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 1px;
  padding: 0.8rem 1rem;
  margin: 0 0 1.3rem;
  overflow-x: auto;
}
.prose code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: rgba(0, 0, 0, 0.045);
  padding: 0.05rem 0.3rem;
  border-radius: 1px;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }

/* markdown tables reuse the quiet, ink-on-paper look */
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: calc(var(--text) * 0.82);
  margin: 0 0 1.4rem;
}
.prose th {
  text-align: left;
  font-weight: 400;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink);
  padding: 0.3rem 0.7rem 0.45rem;
}
.prose td { padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--rule-light); }
.prose tbody tr:last-child td { border-bottom: 1px solid var(--rule); }

.prose img { max-width: 100%; height: auto; }

/* heavy inlined figures (big flamegraphs) collapse behind a click, so the
   browser doesn't render them until asked — pure HTML <details>, no JS */
figure > details.heavy > summary {
  display: block;
  cursor: pointer;
  list-style: none;
  text-align: center;
  font-family: var(--mono);
  font-size: calc(var(--text) * 0.78);
  color: var(--navy);
  padding: 1.3rem;
  border: 1px dashed var(--rule);
  background: var(--paper-2);
  transition: color 0.1s ease;
}
figure > details.heavy > summary:hover { color: var(--oxblood); }
figure > details.heavy > summary::-webkit-details-marker { display: none; }
figure > details.heavy > summary::before { content: "▸  "; }
figure > details.heavy[open] > summary {
  text-align: left;
  padding: 0 0 0.8rem;
  border: none;
  background: none;
}
figure > details.heavy[open] > summary::before { content: "▾  "; }

/* citations: [n] superscript links; brackets drawn in CSS so Markdown never
   mistakes them for a link */
/* citation markers read as an inline literal [1] in the body serif, not a
   raised footnote — body size, blended into the text */
.cite { white-space: nowrap; }
.cite a { border: none; color: var(--navy); }
.cite a:hover { color: var(--oxblood); text-decoration: underline; text-underline-offset: 0.15em; }
.cite::before { content: "["; color: var(--ink-soft); }
.cite::after  { content: "]"; color: var(--ink-soft); }

/* per-section footnotes (rendered at the end of each chapter/subchapter) */
.prose .footnote {
  margin-top: 2rem;
  padding-top: 0.2rem;
  border-top: 1px solid var(--rule-light);
  font-size: calc(var(--text) * 0.82);
  color: var(--ink-soft);
}
.prose .footnote hr { display: none; }
.prose .footnote ol { padding-left: 1.3rem; margin: 0.6rem 0 0; }
.prose .footnote li { margin: 0.3rem 0; }
.prose .footnote p { text-align: left; margin: 0; }
.footnote-backref { border: none; margin-left: 0.3rem; }

/* page-level bibliography */
section.references { margin-top: 3rem; }
section.references .reflist {
  padding-left: 1.7rem;
  font-size: calc(var(--text) * 0.92);
  color: var(--ink);
}
section.references .reflist li { margin: 0.4rem 0; padding-left: 0.3rem; }

@media (max-width: 640px) {
  .subhead { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
  .avatar { float: none; margin: 0 0 1rem; }
}