/* ==========================================================================
   oxagen.sh — blog
   Consumes the semantic tokens from oxagen.css. No hex, no gradient, 2px
   corners, texture only under solid panels. Long-form reading is the job:
   a 68ch measure, generous leading, references at the end.
   ========================================================================== */

/* ---- index hero ---- */
.blog-hero {
  padding: calc(var(--nav-h) + 72px) 0 64px;
  overflow: clip;
}
.blog-hero h1 {
  font-size: clamp(34px, 5vw, 58px);
  margin-top: 16px;
  max-width: 20ch;
}
.blog-hero-sub {
  margin-top: 20px;
  color: var(--ink-3);
  font-size: clamp(16px, 1.6vw, 18.5px);
  max-width: 60ch;
}

/* ---- pillars ---- */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .pillar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .pillar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 460px) {
  .pillar-grid {
    grid-template-columns: 1fr;
  }
}
.pillar-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition:
    border-color 0.2s,
    transform 0.2s var(--ease);
}
.pillar-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}
.pillar-card img {
  width: 100%;
  /* the height attribute is a presentational hint that would pin the box to
     480px and defeat the ratio; auto lets aspect-ratio set it */
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.pillar-card-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.pillar-card h3 {
  font-size: 16.5px;
  font-weight: 620;
}
.pillar-card p {
  color: var(--ink-3);
  font-size: 13.8px;
  line-height: 1.45;
}
.pillar-count {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---- chips ---- */
.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--raised);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
    border-color 0.2s,
    color 0.2s;
}
.chip:hover {
  border-color: var(--gold);
  color: var(--ink);
}

/* ---- post cards ---- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 980px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition:
    border-color 0.2s,
    transform 0.2s var(--ease);
}
.post-card:hover {
  border-color: var(--rule);
  transform: translateY(-2px);
}
.post-card-shot {
  display: block;
  line-height: 0;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}
.post-card-shot img {
  width: 100%;
  height: auto; /* see .pillar-card img */
  aspect-ratio: 2 / 1;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.post-card:hover .post-card-shot img {
  transform: scale(1.03);
}
.post-card-meta {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.post-card h3 {
  font-size: 18px;
  font-weight: 620;
  line-height: 1.25;
}
.post-card h3 a:hover {
  color: var(--gold);
}
.post-card p {
  color: var(--ink-3);
  font-size: 14.6px;
  line-height: 1.5;
}
.byline {
  color: var(--ink-3);
  font-size: 13.2px;
}
.post-card .byline {
  margin-top: auto;
  padding-top: 6px;
}

/* ---- the hero art: a banner laid behind a page's title ----
   The picture fills the section. Its left is drawn quiet and its drawing
   sits right of centre, and a mask fades it out toward the words and into
   the page below, so the title reads on plain ink and the body starts on
   ground with nothing behind it. A mask is a shape, not a paint: the site's
   no-gradient rule is about surfaces, and this paints none. */
.hero-field {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  line-height: 0;
}
.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  /* the fade is measured from the page's centre, where the reading column
     is, so the words keep the same clear ink at every viewport width */
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent calc(50% - 80px),
      #000 calc(50% + 260px)
    ),
    linear-gradient(to top, transparent 0, #000 40%);
  mask-image:
    linear-gradient(
      to right,
      transparent calc(50% - 80px),
      #000 calc(50% + 260px)
    ),
    linear-gradient(to top, transparent 0, #000 40%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* The art is drawn on ink, and this one fades into the page instead of
   sitting in a frame, so on paper it is inverted: white ground, ink lines. The
   hue turn brings the gold back round to gold. */
:root[data-theme="light"] .hero-art img {
  filter: invert(1) hue-rotate(180deg);
}
/* Without script there is no data-theme, and the page follows the OS. A
   browser without light-dark() keeps the dark tokens, so the art stays as
   drawn there. */
@supports (color: light-dark(white, black)) {
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) .hero-art img {
      filter: invert(1) hue-rotate(180deg);
    }
  }
}
@media (max-width: 720px) {
  .hero-art img {
    object-position: 76% 0;
    -webkit-mask-image: linear-gradient(to top, transparent 24%, #000 66%);
    mask-image: linear-gradient(to top, transparent 24%, #000 66%);
  }
}

/* ---- pillar page ---- */
.pillar-hero {
  display: flex;
  align-items: flex-end;
  min-height: clamp(480px, 66vh, 680px);
  padding: calc(var(--nav-h) + 112px) 0 56px;
}
.pillar-hero-copy {
  max-width: 600px;
}
.pillar-hero-copy h1 {
  font-size: clamp(32px, 4.6vw, 52px);
  margin-top: 14px;
}
.pillar-tagline {
  margin-top: 12px;
  color: var(--ink);
  font-size: 19px;
}
.pillar-desc {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 16.5px;
  max-width: 64ch;
  line-height: 1.6;
}
.credit {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 12.5px;
}
.credit a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pillar-nav {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pillar-nav .mono {
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 6px;
}
.empty {
  color: var(--ink-3);
}
.empty a {
  color: var(--gold);
}
.eyebrow a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- post page ---- */
.post-head {
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 74vh, 760px);
  padding: calc(var(--nav-h) + 112px) 0 64px;
}
.post-head-in {
  max-width: 640px;
}
.post-head h1 {
  font-size: clamp(30px, 4.4vw, 50px);
  margin-top: 16px;
  text-wrap: balance;
}
.post-sub {
  margin-top: 18px;
  color: var(--ink-3);
  font-size: clamp(16.5px, 1.6vw, 19px);
  line-height: 1.55;
  max-width: 56ch;
}
.post-head .byline {
  margin: 18px 0 14px;
}
.post-body {
  display: grid;
  grid-template-columns: minmax(0, 68ch) minmax(200px, 260px);
  gap: 56px;
  align-items: start;
  padding: 56px 0 24px;
}
@media (max-width: 960px) {
  .post-body {
    grid-template-columns: minmax(0, 68ch);
    justify-content: start;
  }
}
.toc {
  order: 2;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}
@media (max-width: 960px) {
  .toc {
    order: 0;
    position: static;
  }
}
.toc .mono {
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.toc ol {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 13.6px;
  line-height: 1.5;
}
.toc li + li {
  margin-top: 6px;
}
.toc a:hover {
  color: var(--gold);
}

/* ---- prose ---- */
.prose {
  order: 1;
  color: var(--ink);
  font-size: 17.5px;
  line-height: 1.7;
}
.prose > * + * {
  margin-top: 1.1em;
}
.prose h2 {
  font-size: clamp(24px, 2.6vw, 30px);
  margin-top: 2.1em;
  padding-top: 0.8em;
  border-top: 1px solid var(--line);
}
.prose h3 {
  font-size: 20px;
  margin-top: 1.7em;
}
.prose h2 .anchor,
.prose h3 .anchor {
  float: left;
  margin-left: -1.1em;
  width: 1.1em;
  color: var(--faint);
  opacity: 0;
  font-weight: 400;
}
.prose h2:hover .anchor,
.prose h3:hover .anchor,
.prose .anchor:focus-visible {
  opacity: 1;
  color: var(--gold);
}
.prose p a,
.prose li a,
.prose td a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.prose p a:hover,
.prose li a:hover {
  text-decoration-color: var(--gold);
}
.prose strong {
  font-weight: 620;
  color: var(--ink);
}
.prose ul,
.prose ol {
  padding-left: 1.4em;
}
.prose li + li {
  margin-top: 0.4em;
}
.prose blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--gold);
  color: var(--ink-2);
}
.prose code {
  font-family:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1px 5px;
}
.prose pre {
  margin: 1.4em 0;
  padding: 16px 18px;
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-size: 13.6px;
  line-height: 1.6;
}
.prose pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}
.prose img {
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.prose hr {
  margin: 2em 0;
}
.table-wrap {
  overflow-x: auto;
  margin: 1.4em 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}
.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.prose th {
  background: var(--panel);
  font-weight: 620;
  color: var(--ink);
  white-space: nowrap;
}
.prose tr:last-child td {
  border-bottom: 0;
}

/* footnotes render as the references list */
.prose .footnotes {
  margin-top: 3em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
  font-size: 14.6px;
  color: var(--ink-2);
}
.prose .refs-title {
  font-size: 22px;
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.prose .footnotes ol {
  padding-left: 1.6em;
}
.prose .footnotes li {
  margin-top: 0.6em;
}
.prose .footnotes li p {
  display: inline;
}
.prose .footnotes a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.prose .footnotes a:hover {
  color: var(--gold);
}
.prose a[data-footnote-ref] {
  text-decoration: none;
  color: var(--gold);
  font-weight: 560;
  padding: 0 2px;
}
.prose a[data-footnote-ref]::before {
  content: "[";
}
.prose a[data-footnote-ref]::after {
  content: "]";
}
.prose a[data-footnote-backref] {
  text-decoration: none;
  margin-left: 4px;
}
.prose li:target,
.prose :target {
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

/* callouts */
.callout {
  margin: 1.6em 0;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-lg);
}
.callout-warn {
  border-left-color: var(--warn);
}
.callout-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.callout-warn .callout-title {
  color: var(--warn);
}
.callout-body > * + * {
  margin-top: 0.8em;
}
.callout-body p {
  font-size: 16px;
  color: var(--ink-2);
}
.figure {
  margin: 1.6em 0;
}
.figure figcaption {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 13.5px;
}

/* ---- figures ----
   The drawings a post carries in its body (scripts/lib/figures.mjs). A
   figure is a panel on a hairline. Marks are ink tones only: magnitude in
   one tone, the mark the prose is about in the brightest, and a second
   series told apart by stroke rather than hue. Gold stays out, because gold
   is identity and data is not. Every word is HTML, so labels stay readable
   at phone width; the figure is a container, and its parts rearrange on its
   own width rather than the viewport's. */
.fig {
  position: relative;
  container-type: inline-size;
  margin: 2em 0;
  padding: 18px 20px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-size: 14px;
  line-height: 1.45;
}
.fig-title {
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.fig figcaption {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 13px;
}
.fig ol,
.fig ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fig li + li {
  margin-top: 0;
}
.fig-sr {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.fig-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 12px;
  color: var(--ink-2);
  font-size: 13px;
}
.fig-key-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fig-key {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.fig-key-from {
  border: 2px solid var(--ink-3);
  background: var(--panel);
}
.fig-key-to {
  background: var(--ink);
}
.fig-key-line {
  width: 24px;
  height: 0;
  border-radius: 0;
  border-top: 2px solid var(--ink);
}
.fig-key-line.fig-series-1 {
  border-top: 2px dashed var(--ink-3);
}
.fig-key-line.fig-series-2 {
  border-top: 2px dotted var(--ink-3);
}

/* rows: bars, dumbbells and timelines share one label | track | value grid */
.fig-rows {
  display: grid;
  gap: 12px;
}
.fig-row {
  display: grid;
  grid-template-columns: minmax(0, 12.5em) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.fig-label {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.35;
}
.fig-row.is-emph .fig-label {
  color: var(--ink);
}
.fig-value {
  min-width: 4.5em;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-align: right;
  white-space: nowrap;
}
.fig-track {
  position: relative;
  height: 12px;
}
.fig-bars .fig-track {
  background: var(--raised);
  border-radius: 2px;
}
.fig-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ink-3);
  border-radius: 2px;
}
.fig-row.is-emph .fig-fill {
  background: var(--ink);
}
.fig-track-line::before,
.fig-timeline .fig-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--line);
}
.fig-span {
  position: absolute;
  top: calc(50% - 1px);
  height: 2px;
  background: var(--ink-3);
}
.fig-dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.fig-dot-from {
  background: var(--panel);
  border: 2px solid var(--ink-3);
}
.fig-dot-to {
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--panel);
}
.fig-axis {
  position: relative;
  height: 18px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
}
.fig-axis > span {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.fig-axis > .is-start {
  transform: none;
}
.fig-axis > .is-end {
  transform: translateX(-100%);
}
.fig-row-axis {
  margin-top: -6px;
}
@container (max-width: 520px) {
  .fig-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }
  .fig-row > .fig-label {
    grid-column: 1 / -1;
  }
  .fig-row-axis > .fig-label {
    display: none;
  }
}

/* timeline: validity intervals, a hollow one no longer holds */
.fig-timeline .fig-row {
  grid-template-columns: minmax(0, 12.5em) minmax(0, 1fr);
}
.fig-timeline .fig-track {
  height: 16px;
}
.fig-when {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.fig-interval {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--ink-3);
  border-radius: 2px;
}
.fig-interval.is-ended {
  background: var(--panel);
  border: 1.5px solid var(--ink-3);
}
.fig-marker {
  position: absolute;
  top: -8px;
  bottom: -8px;
  border-left: 2px solid var(--ink);
}
.fig-axis > .fig-marker-label {
  color: var(--ink);
}
@container (max-width: 520px) {
  .fig-timeline .fig-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* curve: an SVG stretched to its box, words laid over it in HTML */
.fig-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
}
.fig-yaxis {
  position: relative;
  min-width: 3.2em;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
}
.fig-yaxis span {
  position: absolute;
  right: 0;
  transform: translateY(50%);
}
.fig-plot {
  position: relative;
  aspect-ratio: 16 / 9;
  border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.fig-chart > .fig-axis {
  grid-column: 2;
  margin-top: 6px;
}
.fig-grid {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
}
.fig-plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fig-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fig-line.fig-series-1 {
  stroke: var(--ink-3);
  stroke-dasharray: 7 5;
}
.fig-line.fig-series-2 {
  stroke: var(--ink-3);
  stroke-dasharray: 1.5 5;
}
.fig-plot .fig-dot {
  top: auto;
  transform: translate(-50%, 50%);
}
.fig-end {
  position: absolute;
  padding: 0 4px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  transform: translate(calc(-100% - 6px), calc(100% + 6px));
}
.fig-axis-title {
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 12.5px;
  text-align: center;
}
@container (max-width: 520px) {
  .fig-plot {
    aspect-ratio: 4 / 3;
  }
}

/* flow: numbered steps, a column when narrow and a row when there is room */
.fig-flow {
  display: grid;
  gap: 22px;
}
.fig-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.fig-step.is-emph {
  border-color: var(--ink-3);
}
.fig-step-n {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.fig-step-label {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
.fig-step-detail {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.4;
}
.fig-step + .fig-step::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -16px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translateX(-50%) rotate(45deg);
}
.fig-loop {
  margin-top: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.fig-loop::before {
  content: "\21BA\00A0";
}
@container (min-width: 600px) {
  .fig-flow {
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: 28px;
  }
  .fig-step + .fig-step::before {
    left: -19px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
  /* the return: a rail from the last step's centre back to the first's */
  .fig-loop {
    position: relative;
    height: 24px;
    margin: 8px calc((100% - (var(--n) - 1) * 28px) / var(--n) / 2) 10px;
    border: 1.5px solid var(--rule);
    border-top: 0;
    border-radius: 0 0 var(--r) var(--r);
  }
  .fig-loop::before {
    content: "";
    position: absolute;
    left: -5.5px;
    top: -1px;
    width: 8px;
    height: 8px;
    border-left: 1.5px solid var(--rule);
    border-top: 1.5px solid var(--rule);
    transform: rotate(45deg);
  }
  .fig-loop span {
    position: absolute;
    left: 50%;
    bottom: 0;
    padding: 0 10px;
    background: var(--panel);
    white-space: nowrap;
    transform: translate(-50%, 50%);
  }
}

/* ladder: rungs that rise, bottoms aligned whatever the labels wrap to */
.fig-ladder {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.fig-rung {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: calc((var(--n) - var(--i)) * 26px);
}
.fig-rung-bar {
  height: calc(var(--i) * 26px);
  background: var(--raised);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink-3);
  border-radius: 2px;
}
.fig-rung:last-child .fig-rung-bar {
  border-top-color: var(--ink);
}
.fig-rung-label {
  margin-top: 4px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.fig-rung-detail {
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.4;
}
.fig-ladder-axis {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fig-ladder-axis::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}

/* schema: class, relation on an arrow, class */
.fig-schema {
  display: grid;
  gap: 14px;
}
.fig-edge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
}
.fig-node {
  padding: 10px 12px;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}
.fig-rel {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  row-gap: 5px;
  padding: 0 12px;
}
.fig-rel-name {
  align-self: end;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.fig-rel-line {
  position: relative;
  justify-self: stretch;
  margin: 0 -12px;
  border-top: 1.5px solid var(--ink-3);
}
.fig-rel-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -5.5px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg);
}
.fig-rel-notes {
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 10px;
  color: var(--ink-3);
  font-size: 12px;
  text-align: center;
}
@container (max-width: 520px) {
  .fig-edge {
    grid-template-columns: minmax(0, 1fr);
  }
  .fig-rel {
    grid-template-rows: auto;
    justify-items: start;
    padding: 10px 0 10px 24px;
  }
  .fig-rel-line {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: 0;
    border-top: 0;
    border-left: 1.5px solid var(--ink-3);
  }
  .fig-rel-line::after {
    left: -5.25px;
    right: auto;
    top: auto;
    bottom: 1px;
    transform: rotate(45deg);
  }
  .fig-rel-notes {
    justify-content: flex-start;
    text-align: left;
  }
}

/* generations: stacks of real (solid) and generated (hollow) data */
.fig-generations .fig-key-to {
  background: var(--ink-3);
  border-radius: 2px;
}
.fig-generations .fig-key-from {
  border-width: 1.5px;
  border-radius: 2px;
}
.fig-gen-rows {
  display: grid;
  gap: 18px;
}
.fig-gen-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  margin-bottom: 8px;
}
.fig-gen-label {
  color: var(--ink);
  font-weight: 600;
}
.fig-gen-outcome {
  color: var(--ink-3);
  font-size: 13px;
}
.fig-gens {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
}
.fig-gen {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fig-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  min-height: calc(var(--max) * 17px);
}
.fig-block {
  height: 14px;
  border-radius: 2px;
}
.fig-block-real {
  background: var(--ink-3);
}
.fig-block-synthetic {
  border: 1.5px solid var(--ink-3);
}
.fig-gen-n {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}

/* ---- post footer ---- */
.post-foot {
  padding: 24px 0 88px;
}
.tags {
  color: var(--ink-3);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  margin-bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.post-foot .sec-head {
  margin-bottom: 28px;
}