/*
 * Shared writeup styles. Every writeup page (engineering-the-loop,
 * calculator-writeup, conference) links tokens.css + this file and nothing else,
 * so the three articles render with one identical style. Each page uses the
 * subset of classes it needs; a shared element (.page, .flow, .masthead, code,
 * h2, .margin, .pull, .colophon, …) is defined exactly once here and never
 * restyled per page.
 *
 * Shared design tokens (colors, spacing, radii, type families, layout) live in
 * tokens.css, globally available here — never re-imported. The custom
 * properties below are page-local values with no shared-token equivalent
 * (fluid type clamps, unitless line-heights, reading measures, one-off insets),
 * named to the stylelint custom-property-pattern so strict-value and the unit
 * allow-list see a token, not a raw magic number.
 */
:root {
  color-scheme: dark;

  /* Radii not in the shared scale */
  --radius-xs: 0.125rem;
  --radius-hairline: 0.1875rem;
  --radius-chip: 0.25rem;

  /* Page-specific spacing (rem) */
  --space-nudge: 0.2rem;
  --space-stamp-y: 0.28rem;
  --space-2xs: 0.3rem;
  --space-tight: 0.35rem;
  --space-snug: 0.4rem;
  --space-label: 0.5rem;
  --space-meta-gap-row: 0.6rem;
  --space-cozy: 0.7rem;
  --space-json-x: 0.8rem;
  --space-callout: 0.9rem;
  --space-card-top: 1.05rem;
  --space-inline: 1.1rem;
  --space-card-x: 1.15rem;
  --space-card-bottom: 1.2rem;
  --space-meta-gap-col: 1.2rem;
  --space-quote: 1.3rem;
  --space-flow: 1.4rem;
  --space-kicker: 2.2rem;
  --space-mast-bottom: 1.7rem;
  --space-h2: 2rem;
  --space-mast-gap: 2.6rem;
  --space-flow-section: 2.8rem;
  --space-section: 3.2rem;
  --space-colophon: 3.5rem;
  --space-page-bottom: 5rem;

  /* Page-specific spacing (em, type-relative) */
  --space-code-y: 0.08em;
  --space-code-x: 0.34em;
  --space-notes-pad: 0.55rem 0 0.55rem 1.4rem;

  /* Auto keyword, tokenized so strict-value accepts centered margins */
  --space-auto: auto;

  /* Gaps */
  --space-stamp-gap: 0.4rem;
  --space-byline-gap: 1.4rem;

  /* Line heights (unitless) */
  --font-lh-body: 1.62;
  --font-lh-h1: 1.05;
  --font-lh-h2: 1.15;
  --font-lh-margin: 1.55;
  --font-lh-json: 1.5;
  --font-lh-quote: 1.25;
  --font-lh-verdict: 1.5;
  --font-lh-colophon: 1.6;

  /* Font sizes not in the shared scale (rem) */
  --font-json: 0.68rem;
  --font-label-xs: 0.66rem;
  --font-label-2xs: 0.68rem;
  --font-dialogue: 0.7rem;
  --font-caption: 0.7rem;
  --font-meta: 0.74rem;
  --font-mono-label: 0.72rem;
  --font-mono-link: 0.75rem;
  --font-stamp: 0.78rem;
  --font-colophon: 0.78rem;
  --font-margin: 0.82rem;
  --font-verdict: 0.86rem;
  --font-table: 0.92rem;
  --font-margin-quote: 1.02rem;
  --font-stamp-big: 1.05rem;
  --font-h2-small: 1.2rem;

  /* Font sizes (em, type-relative) */
  --font-code-rel: 0.86em;
  --font-cell-mono: 0.82em;
  --font-footnote: 0.9em;
  --font-callout: 0.95em;
  --font-lead: 1.12em;

  /* Fluid font-size ramps */
  --font-body-fluid: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);
  --font-h1-fluid: clamp(1.9rem, 1.3rem + 2.8vw, 3.4rem);
  --font-sub-fluid: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  --font-h2-fluid: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
  --font-pull-fluid: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);

  /* Layout widths */
  --layout-page: 78rem;
  --layout-margin-col: 20rem;
  --layout-table-min: 30rem;
  --layout-gutter-fluid: clamp(1.5rem, 4vw, 3.5rem);
  --layout-page-pad-block: clamp(1.4rem, 4vw, 4rem);
  --layout-page-pad-inline: clamp(1.1rem, 4vw, 3.5rem);

  /*
   * Reading measure (article body column) and per-block caps for the masthead
   * lines and pull quote. ch has no gate-legal unit and no exact rem/em
   * equivalent; converted to em using Inter's ~0.5em-per-ch advance. Column
   * width may drift sub-pixel.
   */
  --layout-conf-measure: 33em;
  --layout-measure-h1: 11em;
  --layout-measure-sub: 20em;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--background-paper), var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-family-sans);
  font-size: var(--font-body-fluid);
  line-height: var(--font-lh-body);
  font-feature-settings: "kern", "liga";
  text-rendering: optimizelegibility;
}

@media (prefers-reduced-motion: no-preference) {
  body {
    background-attachment: fixed;
  }
}

.page {
  max-width: var(--layout-page);
  margin-block: 0;
  margin-inline: auto;
  padding-block: var(--layout-page-pad-block) var(--space-page-bottom);
  padding-inline: var(--layout-page-pad-inline);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.site-link {
  display: inline-flex;
  font-family: var(--font-family-mono);
  font-size: var(--font-mono-link);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.canonical-link {
  text-decoration-color: var(--color-violet);
}

/* ---- Masthead ---- */
.masthead {
  padding-block: var(--space-gutter) var(--space-mast-bottom);
  padding-inline: 0;
  margin-bottom: var(--space-mast-gap);
  text-align: center;
}

.eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-mono-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-block: 0 var(--space-inline);
  margin-inline: 0;
}

.masthead h1 {
  font-size: var(--font-h1-fluid);
  line-height: var(--font-lh-h1);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-block: 0;
  margin-inline: auto;
  max-width: var(--layout-measure-h1);
}

.masthead .sub {
  font-style: normal;
  color: var(--color-muted);
  font-size: var(--font-sub-fluid);
  max-width: var(--layout-measure-sub);
  margin-block: var(--space-md) 0;
  margin-inline: auto;
  text-wrap: balance;
}

.byline {
  font-family: var(--font-family-mono);
  font-size: var(--font-mono-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: var(--space-gutter);
  display: flex;
  gap: var(--space-byline-gap);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Column + marginalia grid ---- */
.col {
  display: grid;
  grid-template-columns:
    minmax(0, var(--layout-conf-measure))
    minmax(0, var(--layout-margin-col));
  gap: var(--layout-gutter-fluid);
  align-items: start;
  justify-content: start;
}

.flow {
  min-width: 0;
}

/* A writeup with no marginalia has .flow as a direct child of .page (not inside
   the .col grid). Center its reading column so the body is not stranded on the
   left with the sidebar's empty space to the right. */
.page > .flow {
  max-width: var(--layout-conf-measure);
  margin-inline: auto;
}

.flow > * + * {
  margin-top: var(--space-card-x);
}

p {
  margin: 0;
}

.flow p {
  max-width: var(--layout-conf-measure);
}

.lead {
  font-size: var(--font-lead);
}

a {
  color: inherit;
  text-decoration-color: var(--color-violet);
  text-underline-offset: 0.125rem;
}

a:focus-visible,
summary:focus-visible {
  outline: 0.125rem solid var(--color-violet);
  outline-offset: 0.1875rem;
  border-radius: var(--radius-xs);
}

strong {
  font-weight: 600;
}

code,
.mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-code-rel);
}

.flow code {
  background: var(--color-panel);
  padding-block: var(--space-code-y);
  padding-inline: var(--space-code-x);
  border-radius: var(--radius-hairline);
  border: 0.0625rem solid var(--color-line-soft);
  overflow-wrap: break-word;
}

/* ---- Section headings ---- */
h2 {
  font-size: var(--font-h2-fluid);
  line-height: var(--font-lh-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.section {
  scroll-margin-top: var(--space-md);
}

.section + .section {
  margin-top: var(--space-flow);
}

.section-offset {
  margin-top: var(--space-flow);
}

.flow-section-offset {
  margin-top: var(--space-flow-section);
}

.flow-offset {
  margin-top: var(--space-flow);
}

.flow-offset-tight {
  margin-top: var(--space-meta-gap-col);
}

.paragraph-offset {
  margin-top: var(--space-flow);
}

.h2-offset {
  margin-top: var(--space-h2);
}

.h2-small {
  font-size: var(--font-h2-small);
}

.paper-head {
  margin-bottom: var(--space-snug);
}

.paper-meta {
  font-family: var(--font-family-mono);
  font-size: var(--font-meta);
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin-block: 0.55rem var(--space-card-bottom);
  margin-inline: 0;
  display: flex;
  gap: var(--space-meta-gap-row) var(--space-meta-gap-col);
  flex-wrap: wrap;
}

.paper-meta span {
  white-space: nowrap;
}

.paper-kicker {
  font-family: var(--font-family-mono);
  font-size: var(--font-mono-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-violet);
  display: block;
  margin-bottom: var(--space-label);
}

.paper-head em {
  color: var(--color-muted);
  font-weight: 600;
}

.kicker {
  font-family: var(--font-family-mono);
  font-size: var(--font-mono-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-violet);
  display: block;
  margin-top: var(--space-kicker);
  margin-bottom: var(--space-sm);
}

/* ---- Verdict stamps ---- */
.stamp {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-stamp-gap);
  font-family: var(--font-family-mono);
  font-weight: 700;
  font-size: var(--font-stamp);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-violet);
  border: 0.125rem solid var(--color-violet);
  background: var(--color-line);
  padding-block: var(--space-stamp-y);
  padding-inline: var(--space-meta-gap-row);
  border-radius: var(--radius-chip);
  transform: rotate(-2.5deg);
  white-space: nowrap;
}

.stamp .big {
  font-size: var(--font-stamp-big);
  letter-spacing: 0.02em;
}

/* ---- Marginalia (sidebars) ---- */
.margin {
  grid-column: 2;
  font-family: var(--font-family-mono);
  background: var(--color-panel);
  border: 0.0625rem solid var(--color-line-soft);
  border-top: 0.1875rem solid var(--color-muted);
  padding-block: var(--space-card-top) var(--space-card-bottom);
  padding-inline: var(--space-card-x);
  font-size: var(--font-margin);
  line-height: var(--font-lh-margin);
  color: var(--color-ink);
  position: sticky;
  top: var(--space-md);
}

.margin > * + * {
  margin-top: var(--space-cozy);
}

.margin .label {
  font-size: var(--font-label-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 700;
  display: block;
  margin-bottom: var(--space-2xs);
}

.margin .margin-json {
  font-family: var(--font-family-mono);
  font-size: var(--font-json);
  line-height: var(--font-lh-json);
  color: var(--color-muted);
  background: var(--color-panel);
  border: 0.0625rem solid var(--color-line-soft);
  border-radius: var(--radius-sm);
  padding-block: var(--space-cozy);
  padding-inline: var(--space-json-x);
  margin: 0;
  overflow-x: auto;
  white-space: pre;
}

.margin .margin-json .k {
  color: var(--color-violet);
}

.margin .margin-quote {
  font-family: var(--font-family-sans);
  font-size: var(--font-margin-quote);
  line-height: var(--font-lh-quote);
  font-weight: 600;
  margin: 0;
}

.margin p {
  max-width: none;
}

.margin code {
  overflow-wrap: break-word;
}

.margin-empty {
  background: none;
  border: none;
  padding: 0;
}

/* On narrow screens marginalia falls inline under its anchor */
@media (width <= 40em) {
  .col {
    grid-template-columns: var(--layout-grid-single);
  }

  .margin {
    grid-column: 1;
    position: static;
    max-width: var(--layout-conf-measure);
    margin-block: var(--space-snug) var(--space-nudge);
    margin-inline: 0;
  }
}

/* ---- Errata / verdict callouts ---- */
.errata {
  border-left: 0.1875rem solid var(--color-violet);
  background: var(--color-line);
  padding-block: var(--space-callout);
  padding-inline: var(--space-inline);
  font-size: var(--font-callout);
}

.errata .label {
  font-family: var(--font-family-mono);
  font-size: var(--font-label-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-violet);
  font-weight: 700;
  display: block;
  margin-bottom: var(--space-tight);
}

blockquote {
  margin: 0;
  padding-block: var(--space-nudge);
  padding-inline: var(--space-quote) 0;
  border-left: 0.125rem solid var(--color-line-soft);
  color: var(--color-ink);
  font-style: normal;
  max-width: var(--layout-conf-measure);
}

/* Pull quotes are emphasized copy that stays in the reading column, left
   aligned like the body text around them. */
.pull {
  font-style: normal;
  border-left: none;
  padding: 0;
  text-align: left;
  margin-block: var(--space-snug);
  margin-inline: 0;
}

.pull p {
  font-size: var(--font-pull-fluid);
  line-height: var(--font-lh-quote);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-block: 0;
  margin-inline: 0;
  text-wrap: balance;
}

.plain-quote {
  font-style: normal;
}

/* Article figures (diagrams). They fill the reading column at full width. They
   deliberately do NOT break out into the marginalia track the way pull quotes
   do, because most figures sit in sections that have a populated sticky sidebar
   and a rightward breakout would overlap it. */
.figure {
  margin-block: var(--space-flow-section);
  margin-inline: 0;
  width: 100%;
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 0.0625rem solid var(--color-line-soft);
  border-radius: var(--radius-sm);
  background: var(--color-panel);
}

.figure figcaption {
  margin-top: var(--space-cozy);
  font-family: var(--font-family-mono);
  font-size: var(--font-label-xs);
  letter-spacing: 0.04em;
  color: var(--color-muted);
  text-align: center;
}

.dialogue > * + * {
  margin-top: var(--space-callout);
}

.dialogue .who {
  font-family: var(--font-family-mono);
  font-size: var(--font-dialogue);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-violet);
  display: block;
  margin-bottom: var(--space-nudge);
}

/* ---- Notes list (em-dash bullets) ---- */
.notes {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--layout-conf-measure);
}

.notes li {
  position: relative;
  padding: var(--space-notes-pad);
}

.notes li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--color-violet);
  font-family: var(--font-family-mono);
}

/* ---- Audit checklist (checkmark bullets) ---- */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--layout-conf-measure);
}

.checklist li {
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
}

.checklist li::before {
  content: "\2713";
  position: absolute;
  left: var(--space-nudge);
  top: var(--space-sm);
  font-family: var(--font-family-mono);
  font-weight: 700;
  color: var(--color-violet);
}

/* ---- Results table ---- */
.table-wrap {
  overflow-x: auto;
  margin-block: var(--space-2xs);
  margin-inline: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-table);
  min-width: var(--layout-table-min);
}

caption {
  text-align: left;
  font-family: var(--font-family-mono);
  font-size: var(--font-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: var(--space-label);
}

th,
td {
  text-align: left;
  padding-block: var(--space-meta-gap-row);
  padding-inline: var(--space-json-x);
  border-bottom: 0.0625rem solid var(--color-line-soft);
  vertical-align: top;
}

th {
  font-family: var(--font-family-mono);
  font-size: var(--font-label-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 0.125rem solid var(--color-ink);
  font-weight: 700;
}

td .m {
  font-family: var(--font-family-mono);
  font-size: var(--font-cell-mono);
  color: var(--color-violet);
  overflow-wrap: break-word;
}

.rule {
  border: none;
  border-top: 0.0625rem solid var(--color-line-soft);
  margin-block: var(--space-section) 0;
  margin-inline: 0;
}

.colophon {
  font-family: var(--font-family-mono);
  font-size: var(--font-colophon);
  line-height: var(--font-lh-colophon);
  color: var(--color-muted);
  margin-top: var(--space-colophon);
  padding-top: var(--space-gutter);
  max-width: var(--layout-conf-measure);
  margin-inline: auto;
}

.colophon strong {
  color: var(--color-ink);
  font-weight: 700;
}

.footnote {
  font-size: var(--font-footnote);
  color: var(--color-muted);
  margin-top: var(--space-flow);
  padding-top: var(--space-md);
  max-width: var(--layout-conf-measure);
}

.footnote .fn-label {
  font-family: var(--font-family-mono);
  font-size: var(--font-label-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: block;
  margin-bottom: var(--space-tight);
}

/* verdict line under each paper */
.verdict-line {
  font-family: var(--font-family-mono);
  font-size: var(--font-verdict);
  line-height: var(--font-lh-verdict);
  color: var(--color-ink);
  border-top: 0.0625rem solid var(--color-line-soft);
  padding-top: var(--space-callout);
  margin-top: var(--space-snug);
}

.verdict-line strong {
  color: var(--color-violet);
}

@media (prefers-reduced-motion: no-preference) {
  .stamp {
    transition: transform 200ms ease;
  }

  .stamp:hover {
    transform: rotate(0deg) scale(1.03);
  }
}