@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:200 800;
  font-display:swap;
  src:url('fonts/newsreader-italic-200_800.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('fonts/newsreader-normal-200_800.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('fonts/plexmono-italic-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/plexmono-normal-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/plexmono-normal-500.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/plexmono-normal-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Toby Lowe — portfolio
   Direction A · "Instrument"

   The palette rule: colour encodes epistemic status, not hierarchy.
   Findings and estimates are set in plain ink. The brass is reserved
   entirely for uncertainty — intervals, placebos, nulls, caveats, and the
   one falsification test that did not come back clean. The slate blue marks
   things that were committed to in advance.

   The consequence is that the most confident thing on the page is the
   quietest, and the apparatus of doubt is what carries the colour.
   ========================================================================== */

:root {
  --paper:   #EDEFF3;
  --surface: #E3E8EE;
  --ink:     #14202B;
  --muted:   #56646F;
  --rule:    #C6D0D9;
  --unc:     #7A5A16;   /* uncertainty: intervals, placebos, nulls, flags — 5.5:1 on paper */
  --commit:  #38567E;   /* pre-commitment */

  --serif: "Newsreader", Iowan Old Style, Palatino, Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 66ch;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sec-gap: clamp(3.5rem, 8vw, 6.5rem);

  --fs-micro: 0.688rem;
  --fs-label: 0.78rem;
  --fs-small: 0.875rem;
  --fs-body:  1rem;
  --fs-lead:  1.25rem;
  --fs-h3:    1.45rem;
  --fs-h2:    clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  --fs-h1:    clamp(1.9rem, 1.2rem + 2.9vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #12181E;
    --surface: #1A222A;
    --ink:     #E4E9ED;
    --muted:   #97A5B0;
    --rule:    #2E3A45;
    --unc:     #D6A94A;
    --commit:  #8AA9D0;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

@media (min-width: 40em) { body { font-size: 18px; } }

/* --- shared rhythm ------------------------------------------------------ */

.opening, .axis-section, .index-section, .cv-section,
.project > article, .p-next, .foot-grid, .masthead {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--gut);
}

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--unc); }

:focus-visible {
  outline: 2px solid var(--commit);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; z-index: 50;
  font-family: var(--mono); font-size: var(--fs-label);
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* --- masthead ----------------------------------------------------------- */

.masthead {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
  padding-block: 1.4rem 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.wordmark { text-decoration: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }
.wm-name { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.wm-role { font-family: var(--mono); font-size: var(--fs-micro); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.masthead nav { display: flex; gap: 1.25rem; font-family: var(--mono); font-size: var(--fs-label); }
.masthead nav a { color: var(--muted); text-decoration: none; padding-block: 0.15rem; border-bottom: 1px solid transparent; }
.masthead nav a:hover { color: var(--ink); border-bottom-color: var(--unc); }

/* --- opening ------------------------------------------------------------ */

.eyebrow {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.5rem;
}
.eyebrow a { color: inherit; }

.opening { padding-top: clamp(3rem, 8vw, 5.5rem); }
@media (min-width: 64em) {
  .opening { display: grid; grid-template-columns: minmax(0,1fr) 15rem; gap: 0 clamp(2rem,5vw,4.5rem); align-items: start; }
  .opening .eyebrow, .opening .standfirst { grid-column: 1 / -1; }
  .opening-body { grid-column: 1; }
  .at-a-glance  { grid-column: 2; }
}
.at-a-glance { margin: 2.5rem 0 0; border-top: 1px solid var(--ink); padding-top: 0.9rem; }
@media (min-width: 64em) { .at-a-glance { margin-top: 0.4rem; } }
.at-a-glance dt {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-top: 0.95rem;
}
.at-a-glance dd { margin: 0.1rem 0 0; font-size: var(--fs-small); line-height: 1.4; }
.at-a-glance dd a { color: inherit; }

.standfirst {
  font-size: var(--fs-h1);
  font-weight: 300;
  font-style: italic;
  line-height: 1.14;
  letter-spacing: -0.018em;
  max-width: 22ch;
  margin: 0 0 2rem;
  text-wrap: balance;
}

.opening-body { max-width: var(--measure); }
.opening-body p { margin: 0 0 1.15em; }
.opening-body p:first-child { font-size: var(--fs-lead); line-height: 1.5; }
.opening-body strong { font-weight: 600; }

/* --- section headings --------------------------------------------------- */

.section-h {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0 0 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.9rem;
  text-wrap: balance;
}
.sh-num {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); flex: none;
}

.axis-section, .index-section, .cv-section { margin-top: var(--sec-gap); }

/* --- the evidence axis (signature) -------------------------------------- */

.evidence-axis { margin: 0; }
.axis-scroll { overflow-x: auto; overflow-y: hidden; }
.axis-svg { display: block; width: 100%; min-width: 780px; height: auto; }

.axis-rule  { stroke: var(--rule); stroke-width: 1; }
.axis-zero  { stroke: var(--ink); stroke-width: 1.25; }
.axis-tick  { fill: var(--muted); font-family: var(--mono); font-size: 12px; }
.axis-unit  { fill: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

.row-label  { fill: var(--ink);   font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.row-sub    { fill: var(--muted); font-family: var(--mono); font-size: 10px; }
.row-value  { fill: var(--ink);   font-family: var(--mono); font-size: 13px; font-weight: 600; }
.row-note   { fill: var(--muted); font-family: var(--mono); font-size: 10.5px; }

.ci-bar, .ci-cap { stroke: var(--unc); stroke-width: 1.75; }
.pt { fill: var(--ink); }

.row-emph .pt { fill: var(--ink); }
.row-emph .row-label { font-weight: 600; }

.row-null .pt { fill: var(--muted); }
.row-null .row-label, .row-null .row-value { fill: var(--muted); }

/* the falsification that did not come back clean: same colour as
   uncertainty, because that is what it is — but dashed, so it reads. */
.row-flagged .ci-bar { stroke-dasharray: 4 3; stroke-width: 2.25; }
.row-flagged .pt { fill: var(--unc); }
.row-flagged .row-label, .row-flagged .row-value { fill: var(--unc); font-weight: 600; }
.row-flagged .row-sub { fill: var(--unc); }

.placebo-cloud { stroke: var(--unc); stroke-width: 1; fill: none; opacity: 0.22; }
.placebo-span { stroke: var(--unc); stroke-width: 1; opacity: 0.5; }

figcaption {
  font-size: var(--fs-small); color: var(--muted);
  max-width: 62ch; margin-top: 1.1rem; line-height: 1.5;
}
.fig-num { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-right: 0.5rem; }
.src { display: block; font-family: var(--mono); font-size: var(--fs-micro); color: var(--muted); margin-top: 0.55rem; opacity: 0.85; word-break: break-word; }

.axis-read { max-width: var(--measure); margin-top: 2rem; font-size: var(--fs-body); }
.flagmark { color: var(--unc); font-weight: 600; }

/* The Chanel rule: one thing removed before calling it done.
   What went was the figure's entrance animation — the placebo cloud wiping
   in, then the estimates landing. It made the most serious object on the
   page perform. A confidence interval that assembles itself is asking to be
   admired; the argument here is that the interval is ordinary and
   compulsory. The figure is simply already correct when you arrive.

   Motion preferences are still honoured below for the two hover transitions
   that remain, and the site ships with no JavaScript at all. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- the index ---------------------------------------------------------- */

.idx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.idx-subhead {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  font-weight: 500; margin: 3rem 0 0;
}
.idx-row { border-bottom: 1px solid var(--rule); }

.idx-link {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  gap: 0 1.25rem;
  align-items: start;
  padding: 1.9rem 0;
  text-decoration: none;
  transition: background-color .18s ease;
}
.idx-link:hover, .idx-link:focus-visible { background: var(--surface); }
.idx-link:hover .idx-go { transform: translateX(4px); color: var(--unc); }

.idx-num {
  font-family: var(--mono); font-size: var(--fs-label);
  color: var(--muted); padding-top: 0.45rem; font-variant-numeric: tabular-nums;
}
.idx-main { display: block; min-width: 0; }

.idx-q {
  display: block;
  font-size: clamp(1.22rem, 0.95rem + 1.1vw, 1.7rem);
  font-style: italic; font-weight: 300; line-height: 1.28;
  letter-spacing: -0.012em;
  max-width: 40ch; text-wrap: balance;
  margin-bottom: 0.5rem;
}
/* wide viewports: the question takes its own column, its answer takes the
   other. A contents page, not a card grid. */
.idx-body { display: block; }
@media (min-width: 62em) {
  .idx-main { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 0 clamp(2rem, 4vw, 3.75rem); align-items: start; }
  .idx-q { margin-bottom: 0; }
  .idx-title { padding-top: 0.3rem; margin-bottom: 0.55rem; }
  .idx-meta { padding-top: 0.9rem; }
}
.idx-minor .idx-q { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.22rem); max-width: 44ch; }

.idx-title {
  display: block; font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.005em; margin-bottom: 0.4rem;
}
.idx-finding {
  display: block; max-width: 58ch; color: var(--muted);
  font-size: var(--fs-small); line-height: 1.5;
}
.idx-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.idx-badges:empty { display: none; }

.badge {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.14rem 0.45rem; border: 1px solid currentColor; color: var(--muted);
}
.badge-pre   { color: var(--commit); }
.badge-award { color: var(--ink); }

.idx-meta {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
  font-family: var(--mono); font-size: var(--fs-micro);
  color: var(--muted); margin-top: 0.85rem; letter-spacing: 0.02em;
}
.idx-ctx { text-transform: uppercase; letter-spacing: 0.07em; }
.idx-tools { opacity: 0.8; }

.idx-go { font-size: 1.1rem; color: var(--muted); padding-top: 0.35rem; transition: transform .18s ease, color .18s ease; }

@media (max-width: 34em) {
  .idx-link { grid-template-columns: 2rem 1fr; }
  .idx-go { display: none; }
}

/* --- CV block ----------------------------------------------------------- */

.cv-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 62em) { .cv-grid { grid-template-columns: 1fr 1fr; } }

.cv-col { min-width: 0; }
.cv-col-h { font-size: var(--fs-h3); font-weight: 600; margin: 0 0 0.35rem; letter-spacing: -0.01em; }
.cv-span { font-family: var(--mono); font-size: var(--fs-label); font-weight: 400; color: var(--muted); margin-left: 0.5rem; }
.cv-note {
  font-size: var(--fs-small); color: var(--muted);
  border-left: 2px solid var(--unc); padding-left: 0.9rem; margin: 1rem 0 2rem; max-width: 52ch;
}
.cv-col h2 {
  font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em;
  margin: 2.4rem 0 0.2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
}
.cv-col h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.cv-col h3 { font-size: var(--fs-body); font-weight: 600; margin: 1.8rem 0 0.15rem; }
.cv-col p { margin: 0.5rem 0; max-width: 54ch; font-size: var(--fs-small); line-height: 1.55; }
.cv-col p strong { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; color: var(--muted); letter-spacing: 0.02em; }
.cv-col hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2rem 0; }

.looking { max-width: var(--measure); margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.looking p { margin: 0; font-size: var(--fs-lead); font-style: italic; font-weight: 300; line-height: 1.45; }

/* --- project page ------------------------------------------------------- */

.page-project .project > article { max-width: 78rem; }

.p-head { padding-top: clamp(2.5rem, 6vw, 4rem); }
.p-title {
  font-size: var(--fs-h1); font-weight: 400; line-height: 1.1;
  letter-spacing: -0.02em; margin: 0 0 1.25rem; max-width: 20ch; text-wrap: balance;
}
.p-question {
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.55rem);
  font-style: italic; font-weight: 300; line-height: 1.36;
  color: var(--ink); max-width: 40ch; margin: 0 0 2rem;
  padding-left: 1.1rem; border-left: 2px solid var(--commit);
}
.p-finding {
  max-width: var(--measure); margin: 0 0 2.5rem;
  font-size: var(--fs-body); line-height: 1.5;
}
.pf-label {
  display: block; font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.35rem;
}

.p-meta { margin: 0 0 3rem; padding: 1.3rem 0; border-block: 1px solid var(--rule); max-width: 72ch; }
.mrow { display: grid; grid-template-columns: 1fr; gap: 0.15rem 1.5rem; padding: 0.4rem 0; }
@media (min-width: 46em) { .mrow { grid-template-columns: 8.5rem 1fr; } }
.mrow dt {
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); padding-top: 0.2rem;
}
.mrow dd { margin: 0; font-size: var(--fs-small); line-height: 1.5; }

/* prose: single measure, with section numerals hung in the margin */
.prose { max-width: var(--measure); }
.prose > * { max-width: var(--measure); }

.sec-h {
  position: relative;
  font-size: var(--fs-h2); font-weight: 400; letter-spacing: -0.012em;
  line-height: 1.2; margin: 3.4rem 0 1.1rem;
  padding-top: 1.2rem; border-top: 1px solid var(--rule);
  text-wrap: balance;
}
.sec-h[data-num]::before {
  content: attr(data-num);
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.1em; color: var(--muted);
  position: absolute; top: 1.55rem; left: -4.5rem;
}
@media (max-width: 74em) {
  .sec-h[data-num]::before { position: static; display: block; margin-bottom: 0.4rem; }
}
@media (min-width: 74em) {
  .page-project .prose, .page-project .p-head > * { margin-left: 4.5rem; }
}

.prose h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.008em; margin: 2.2rem 0 0.6rem; }
.prose p { margin: 0 0 1.15em; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.prose li { margin-bottom: 0.55em; }
.prose li::marker { color: var(--muted); font-family: var(--mono); font-size: 0.85em; }
.prose strong { font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.6rem 0; }

.prose blockquote { margin: 1.8rem 0; padding-left: 1.2rem; border-left: 2px solid var(--unc); }
.prose blockquote p { font-size: var(--fs-small); color: var(--muted); font-style: italic; margin: 0; }

.prose code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--surface); padding: 0.1em 0.35em; border-radius: 2px;
}

/* the last section is the one that earns trust — mark it, quietly */
.prose h2#what-this-doesn-t-show { border-top-color: var(--unc); }
.prose h2#what-this-doesn-t-show::after {
  content: ""; display: block; width: 2.5rem; height: 2px;
  background: var(--unc); margin-top: 0.9rem;
}

/* --- tables ------------------------------------------------------------- */

/* the prose keeps its measure; the evidence in it is allowed to run wider.
   Narrow argument, wide evidence. */
.prose > .table-wrap { max-width: min(52rem, 100%); }

.table-wrap { overflow-x: auto; margin: 1.8rem 0 2rem; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
thead th {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 0 0.9rem 0.6rem 0; border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
tbody td, tbody th {
  padding: 0.62rem 0.9rem 0.62rem 0; border-bottom: 1px solid var(--rule);
  vertical-align: top; font-weight: 400; text-align: left;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td:not(:first-child), th:not(:first-child) { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table strong { font-weight: 600; }

/* --- figure-with-uncertainty (inline component) ------------------------- */

.fig { white-space: nowrap; }
.fig-v { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.fig-ci, .fig-n {
  font-family: var(--mono); font-size: 0.82em; color: var(--unc);
  font-variant-numeric: tabular-nums; margin-left: 0.35em;
}

/* --- pre-registration ledger -------------------------------------------- */

/* the paper trail is a full-width component, not body copy: let it out of
   the prose measure */
.prose > .ledger { max-width: none; }

.ledger {
  margin: 3.5rem 0; padding: 2rem 0 0;
  border-top: 2px solid var(--commit);
  max-width: min(62rem, 100%);
}
@media (min-width: 74em) { .page-project .ledger { margin-left: 4.5rem; } }
.ledger-h { font-size: var(--fs-h3); font-weight: 600; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.ledger-intro { font-size: var(--fs-small); color: var(--muted); max-width: 56ch; margin: 0 0 1.6rem; }

table.led { font-size: var(--fs-small); }
table.led .led-item { font-weight: 400; padding-right: 1.4rem; width: 38%; }
table.led .led-status { white-space: nowrap; }
table.led .led-outcome { color: var(--muted); font-family: var(--mono); font-size: var(--fs-label); line-height: 1.45; }

.chip {
  display: inline-block; font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.12rem 0.45rem; border: 1px solid currentColor; color: var(--muted);
}
.chip.st-ran { color: var(--muted); }
.chip.st-flagged, .chip.st-noverdict { color: var(--unc); }
.chip.st-tripped { color: var(--unc); background: var(--unc); color: var(--paper); border-color: var(--unc); font-weight: 600; }
.chip.st-notrun { color: var(--muted); border-style: dashed; }

tr.st-tripped .led-item { font-weight: 600; }
tr.st-notrun .led-item, tr.st-notrun .led-outcome { opacity: 0.62; }
tr.st-flagged .led-outcome { color: var(--unc); }

.dev-h { font-size: var(--fs-body); font-weight: 600; margin: 2.6rem 0 0.9rem; }
.devs { list-style: none; margin: 0; padding: 0; }
.devs li {
  display: grid; gap: 0.1rem 1rem; grid-template-columns: 2.5rem 1fr;
  padding: 0.7rem 0; border-bottom: 1px solid var(--rule);
}
.dev-id { font-family: var(--mono); font-size: var(--fs-label); color: var(--commit); font-weight: 500; }
.dev-what { font-size: var(--fs-small); }
.dev-why { grid-column: 2; font-size: var(--fs-small); color: var(--muted); }

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

.p-next { margin-top: var(--sec-gap); border-top: 1px solid var(--rule); }
.p-next a { display: block; padding: 2rem 0; text-decoration: none; }
.p-next a:hover .pn-q { text-decoration: underline; text-decoration-color: var(--unc); }
.pn-label { display: block; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.pn-q { display: block; font-size: var(--fs-lead); font-style: italic; font-weight: 300; max-width: 40ch; line-height: 1.3; }

.site-foot { margin-top: var(--sec-gap); border-top: 1px solid var(--rule); padding-block: 2.5rem 4rem; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 48em) { .foot-grid { grid-template-columns: repeat(3, 1fr); } }
.foot-lead { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.7rem; }
.site-foot p { font-size: var(--fs-small); margin: 0; line-height: 1.65; }
.foot-note { color: var(--muted); max-width: 34ch; }

/* ==========================================================================
   Print — the page has to come out of a printer as a usable CV
   ========================================================================== */

@media print {
  :root {
    --paper: #fff; --surface: #fff; --ink: #000; --muted: #333;
    --rule: #bbb; --unc: #6a5010; --commit: #223;
    --sec-gap: 1.4rem; --gut: 0;
  }
  @page { margin: 14mm 13mm; }

  body { font-size: 9.6pt; line-height: 1.42; background: #fff; }

  .skip, .masthead nav, .idx-go, .p-next, .axis-read,
  .idx-badges, .foot-note, .idx-tools, .at-a-glance,
  .idx-subhead, .idx-minor, .site-foot .foot-grid > div:nth-child(3) { display: none !important; }

  .masthead { border-bottom: 1.5px solid #000; padding-block: 0 0.5rem; margin-bottom: 0.8rem; }
  .wm-name { font-size: 15pt; }
  .wordmark { gap: 0.5rem; }

  /* contact details have to be on the printed page */
  .masthead::after {
    content: "tobyjohnlowe@gmail.com · +44 7497 441376 · Manchester, UK";
    font-family: var(--mono); font-size: 7.6pt; color: #000;
    flex-basis: 100%; margin-top: 0.2rem;
  }

  .opening { padding-top: 0.4rem; display: block !important; }
  .standfirst { font-size: 12pt; margin-bottom: 0.6rem; max-width: none; }
  .opening-body p:first-child { font-size: 9.6pt; }
  .opening-body, .prose, .idx-finding, .cv-col p { max-width: none; }

  .section-h { font-size: 11pt; margin: 0 0 0.7rem; padding-top: 0.5rem; }
  .axis-section, .index-section, .cv-section { margin-top: 1rem; }
  .cv-section { break-before: page; }

  .axis-svg { min-width: 0; max-height: 58mm; }
  .axis-scroll { overflow: visible; }
  figcaption { font-size: 7.4pt; margin-top: 0.4rem; }
  .src { display: none; }

  .idx-link { padding: 0.42rem 0; grid-template-columns: 1.9rem 1fr; }
  .idx-main { display: block !important; }
  .idx-q { font-size: 10.5pt; margin-bottom: 0.15rem; max-width: none; }
  .idx-title { font-size: 9pt; margin-bottom: 0.15rem; }
  .idx-finding { font-size: 8.4pt; color: #222; }
  .idx-meta { margin-top: 0.25rem; font-size: 7.2pt; }

  .cv-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .cv-col h2 { font-size: 10.5pt; margin: 1rem 0 0.15rem; padding-top: 0.5rem; }
  .cv-col h3 { font-size: 9.6pt; margin: 0.7rem 0 0.1rem; }
  .cv-col p { font-size: 8.6pt; margin: 0.25rem 0; }
  .cv-note { font-size: 8pt; margin: 0.5rem 0 0.9rem; }
  .looking { margin-top: 1rem; padding-top: 0.6rem; }
  .looking p { font-size: 10pt; }

  .site-foot { border-top: 1px solid #000; padding-block: 0.5rem 0; margin-top: 0.9rem; break-before: avoid; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .site-foot p { font-size: 8pt; }

  a { text-decoration: none; color: #000; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-family: var(--mono); font-size: 7pt; color: #444; }

  h1, h2, h3, .idx-row, .devs li, .mrow, tr { break-inside: avoid; page-break-inside: avoid; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }
  .index-section, .cv-section { break-before: auto; }
  .ledger { break-before: page; }
  * { animation: none !important; transition: none !important; }
}