/* =============================================================
   Nude Dog · Who we are? · Shared style system
   =============================================================
   Register: Tufte / Vignelli — forensic, calibrated, editorial.
   Two typefaces. Direct labels. Tabular numerics. One accent,
   reserved. Mobile-first; same facts at every width.

   This file is the binding visual contract for every panel.
   New palette roles, new typefaces, new size tokens do not
   enter here without sequence-contract amendment.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ===== Palette ============================================
     Encoding, not decoration. Hues earn roles or do not enter.
     ========================================================== */
  --paper:            #FAF7F2;  /* warm off-white, page ground       */
  --ink-primary:      #1A1715;  /* warm near-black, primary text     */
  --ink-secondary:    #6B635C;  /* warm gray, secondary text         */
  --rule:             #D8D2C8;  /* light warm gray, hairline rules   */
  --accent:           #A8421C;  /* deep red-orange — decision/output */
                                /*   reserved; sparing; II/III/IV     */
  --secondary-accent: #3D5A6C;  /* muted slate — considered/process   */
                                /*   reserved; rare                   */

  /* ===== Typography ========================================= */
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --size-nav:          0.75rem;
  --size-tag:          0.75rem;
  --size-headline:     1.625rem;
  --size-body:         1rem;
  --size-description:  1.0625rem;
  --size-form-name:    1.25rem;
  --size-form-frame:   0.9375rem;
  --size-ledger-value: 0.9375rem;
  --size-anchor:       1rem;
  --size-method:       0.875rem;

  /* ===== Spacing ============================================ */
  --baseline: 1.5rem;
  --gutter:   1.25rem;

  /* ===== Widths ============================================= */
  --content-max:   38rem;
  --container-pad: 1.25rem;
}

/* ===== Tablet ============================================== */
@media (min-width: 48rem) {
  :root {
    --size-headline:    2.125rem;
    --size-description: 1.125rem;
    --gutter:           2rem;
    --container-pad:    2rem;
  }
}

/* ===== Desktop ============================================= */
@media (min-width: 64rem) {
  :root {
    --size-headline: 2.5rem;
  }
}

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

html {
  background: var(--paper);
  color: var(--ink-primary);
  font-family: var(--serif);
  font-size: 100%;
  line-height: 1.5;
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { margin: 0; padding: 0; min-height: 100vh; }

main {
  max-width: calc(var(--content-max) + 2 * var(--container-pad));
  margin: 0 auto;
  padding: var(--container-pad);
}

p, h1, h2, h3, dl, dt, dd { margin: 0; }
dt, dd { font-family: inherit; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}

em { font-style: italic; }

/* ===== Top nav ============================================= */
.top-nav {
  font-family: var(--sans);
  font-size: var(--size-nav);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
  padding-block: var(--baseline);
  border-block-end: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: baseline;
}

.top-nav__brand {
  color: var(--accent);
  font-weight: 500;
}

.top-nav__sep { color: var(--rule); }

/* ===== Panel header ======================================== */
.panel-header {
  margin-block-start: calc(var(--baseline) * 1.5);
  margin-block-end:   calc(var(--baseline) * 2);
}

.tag {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
  margin-block-end: var(--baseline);
  font-variant-numeric: tabular-nums;
}

.headline {
  font-family: var(--serif);
  font-size: var(--size-headline);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink-primary);
  margin-block-end: var(--baseline);
  text-wrap: balance;
}

.description {
  font-family: var(--serif);
  font-size: var(--size-description);
  color: var(--ink-secondary);
  line-height: 1.45;
  text-wrap: pretty;
}

/* ===== Figure: three forms (Panel I) ======================= */
.figure {
  margin-block-end: calc(var(--baseline) * 2);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--baseline);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--baseline);
}

@media (min-width: 48rem) {
  .figure {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
  }
}

.form {
  padding-block-start: var(--baseline);
  border-block-start: 1px solid var(--rule);
}

.form:first-child {
  padding-block-start: 0;
  border-block-start: none;
}

@media (min-width: 48rem) {
  .form {
    padding-block-start: 0;
    border-block-start: none;
    border-inline-start: 1px solid var(--rule);
    padding-inline-start: var(--gutter);
  }
  .form:first-child {
    border-inline-start: none;
    padding-inline-start: 0;
  }
}

.form__tag {
  font-family: var(--sans);
  font-size: var(--size-tag);
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  margin-block-end: 0.5rem;
}

.form__name {
  font-family: var(--serif);
  font-size: var(--size-form-name);
  font-weight: 500;
  line-height: 1.2;
  margin-block-end: 0.625rem;
}

.form__frame {
  font-family: var(--serif);
  font-size: var(--size-form-frame);
  color: var(--ink-secondary);
  line-height: 1.45;
  margin-block-end: var(--baseline);
}

.form__ledger { display: grid; gap: 0; }

.form__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 0.75rem;
  padding-block: 0.4375rem;
  border-block-end: 1px dotted var(--rule);
}

.form__row:last-child { border-block-end: none; }

.form__row dt {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
}

.form__row dd {
  font-family: var(--serif);
  font-size: var(--size-ledger-value);
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* ===== Anchor rows (label · qualifier · value) ============= */
.anchor {
  margin-block-end: calc(var(--baseline) * 2);
  padding-block-start: var(--baseline);
  border-block-start: 1px solid var(--rule);
}

.anchor__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.125rem;
  padding-block: 0.625rem;
  border-block-end: 1px dotted var(--rule);
}

.anchor__row:last-child { border-block-end: none; }

@media (min-width: 48rem) {
  .anchor__row {
    grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr) auto;
    align-items: baseline;
    gap: var(--gutter);
  }
}

.anchor__label {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
}

.anchor__qualifier {
  font-family: var(--serif);
  font-size: var(--size-form-frame);
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}

.anchor__value {
  font-family: var(--serif);
  font-size: var(--size-anchor);
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

@media (min-width: 48rem) {
  .anchor__value { text-align: end; }
}

/* ===== Method note ========================================= */
.method {
  font-size: var(--size-method);
  color: var(--ink-secondary);
  line-height: 1.55;
  margin-block-end: var(--baseline);
}

.method p { margin-block-end: 0.625rem; }
.method p:last-child { margin-block-end: 0; }

.method__prime {
  font-family: var(--sans);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-primary);
  margin-inline-end: 0.4em;
  font-weight: 500;
}

/* ===== Bottom nav ========================================== */
.bottom-nav {
  font-family: var(--sans);
  font-size: var(--size-nav);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
  padding-block: var(--baseline);
  border-block-start: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-block-start: calc(var(--baseline) * 2);
}

/* Muted prev/next when no neighbour panel exists: span form */
span.bottom-nav__prev,
span.bottom-nav__next { color: var(--rule); }
/* Active prev / next links share the same affordance */
a.bottom-nav__prev:hover,
a.bottom-nav__prev:focus,
a.bottom-nav__next:hover,
a.bottom-nav__next:focus { color: var(--ink-primary); }

/* ===== Reserved component classes ==========================
   Defined here for inheritance into panels II–V.
   Cowork: extend these classes rather than introduce new ones.
   ========================================================== */

/* ---- Headline modifier (Panel IV — the four-word load,
        Panel VI — the woven, not stacked load) -------------- */
.headline--display {
  font-style: italic;
  letter-spacing: -0.022em;
  font-size: calc(var(--size-headline) * 1.6);
  line-height: 1.05;
  border-block-start: 3px solid var(--ink-primary);
  padding-block-start: calc(var(--baseline) * 0.85);
  margin-block-start: calc(var(--baseline) * 0.5);
  text-wrap: balance;
}

/* ---- Dot-led inline annotation -----------------------------
   Matches the reference page's annotation pattern: italic
   --ink-secondary, leading with the · glyph. Sits between the
   panel's figure and its method note; reads as a quiet aside,
   not a callout. -------------------------------------------- */
.dot-annotation {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--size-form-frame);
  color: var(--ink-secondary);
  line-height: 1.5;
  margin-block-start: calc(var(--baseline) * 0.5);
  margin-block-end: 0.25rem;
}

.dot-annotation + .dot-annotation {
  margin-block-start: 0.25rem;
}

.dot-annotation--cluster {
  margin-block-start: var(--baseline);
}

/* ---- Substrate spine quote (Panel VI) ---------------------
   Italic, indented, --ink-secondary, no quote marks. Sits
   below the figure as the substrate's own sentence. Reuses
   the same hairline-spine vocabulary as .inversion__quote. */
.spine-quote {
  margin-block: calc(var(--baseline) * 0.75) calc(var(--baseline) * 1.25);
  padding-inline-start: var(--gutter);
  border-inline-start: 2px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--size-description);
  color: var(--ink-secondary);
  line-height: 1.5;
}

/* =============================================================
   II / V — placement_outside_frame
   -------------------------------------------------------------
   Geometry enacts the headline: a hairline rectangle bounds the
   three orthodox forms (considered ground, --secondary-accent
   strokes); the Nude Dog mark sits in the panel's negative space
   across from them; four tethers are short --accent rules that
   physically cross the rectangle's boundary at named anchor
   points inside. Desktop: rectangle on the left, Nude Dog mark
   and tethers on the right; tether rules cross the rectangle's
   right border. Mobile: rectangle on top, tethers crossing its
   bottom border, Nude Dog mark below. Same inflection at every
   width.
   ============================================================= */
.placement {
  margin-block-end: calc(var(--baseline) * 2);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--baseline);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}

@media (min-width: 48rem) {
  .placement {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "frame    outside-mark"
      "frame    tethers";
    align-items: stretch;
    gap: 0;
  }
  .placement__frame        { grid-area: frame; }
  .placement__outside-mark { grid-area: outside-mark; }
  .placement__tethers      { grid-area: tethers; }
}

.placement__frame {
  border: 1px solid var(--rule);
  padding: var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  position: relative;
  background: var(--paper);
  z-index: 1;
  align-content: start;
}

.placement__frame-tag {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  margin-block-end: 0.375rem;
}

/* Inside forms — considered ground (--secondary-accent strokes).
   This panel is the only place --secondary-accent enters. */
.placement__form {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--secondary-accent);
  background: var(--paper);
}

.placement__form-tag {
  font-family: var(--sans);
  font-size: var(--size-tag);
  letter-spacing: 0.06em;
  color: var(--secondary-accent);
  font-variant-numeric: tabular-nums;
}

.placement__form-name {
  font-family: var(--serif);
  font-size: var(--size-form-frame);
  color: var(--secondary-accent);
  font-weight: 400;
}

/* The Nude Dog mark — past the rectangle's edge, in negative
   space, across from the inside contents. */
.placement__outside-mark {
  position: relative;
  z-index: 2;
  padding-block: var(--baseline) calc(var(--baseline) * 0.75);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 48rem) {
  .placement__outside-mark {
    padding-inline-start: calc(var(--gutter) * 1.5);
    padding-block-start: 0;
  }
}

.placement__outside-tag {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
}

.placement__outside-name {
  font-family: var(--serif);
  font-size: calc(var(--size-form-name) * 1.05);
  font-weight: 500;
  color: var(--accent);
  line-height: 1.1;
}

/* Tethers — short rules that physically cross the rectangle's
   boundary at named anchor points on the inside frame.
   Desktop: horizontal rules crossing the right border.
   Mobile: vertical bars crossing the bottom border. */
.placement__tethers {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .placement__tethers {
    padding-inline-start: calc(var(--gutter) * 1.5);
    align-self: stretch;
    align-content: space-evenly;
    row-gap: 0;
  }
}

.placement__tether {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  align-items: baseline;
  column-gap: 0.625rem;
  padding-block: 0.5rem;
  border: 0;
}

/* Mobile crossing geometry: a vertical accent bar at the row's
   left edge, extending UPWARD above the row. The first tether's
   bar physically crosses the rectangle's bottom border; the
   remaining bars echo the crossing pattern at every width. */
.placement__tether::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: -0.85rem;
  width: 1px;
  height: 1.5rem;
  background: var(--accent);
  z-index: 3;
}

.placement__tether::after {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: -0.95rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  z-index: 3;
}

/* Desktop crossing geometry: a horizontal accent rule that
   extends LEFT of the tether row's content area, physically
   crossing the rectangle's right border. The rule's right end
   stops short of the tether mark; its left end terminates at a
   small dot inside the rectangle — the named anchor. */
@media (min-width: 48rem) {
  .placement__tether {
    padding-block: 0.75rem;
    padding-inline-start: 0;
  }

  .placement__tether::before {
    top: 50%;
    left: calc(var(--gutter) * -3);          /* abs: tether-pad (1.5×gutter) − 3×gutter = −1.5×gutter inside the frame */
    width: calc(var(--gutter) * 2);          /* abs end: −1.5×gutter + 2×gutter = +0.5×gutter outside the frame */
    height: 1px;
    transform: translateY(-50%);
  }

  .placement__tether::after {
    top: 50%;
    left: calc(var(--gutter) * -3 - 0.15rem);
    width: 5px;
    height: 5px;
    transform: translateY(-50%);
  }
}

.placement__tether-mark {
  font-family: var(--sans);
  font-size: var(--size-tag);
  letter-spacing: 0.06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.placement__tether-label {
  font-family: var(--serif);
  font-size: var(--size-form-frame);
  color: var(--accent);
  font-style: italic;
  line-height: 1.4;
}

/* ---- Founder ledger (below the placement figure) ---- */
.founder-ledger {
  margin-block-end: calc(var(--baseline) * 2);
  padding-block-start: var(--baseline);
  border-block-start: 1px solid var(--rule);
}

.founder-ledger__heading {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
  margin-block-end: var(--baseline);
}

.founder-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.125rem;
  padding-block: 0.75rem;
  border-block-end: 1px dotted var(--rule);
}

.founder-row:last-of-type { border-block-end: none; }

@media (min-width: 48rem) {
  .founder-row {
    grid-template-columns: minmax(11rem, 0.9fr) minmax(0, 1.4fr) minmax(0, 1.9fr);
    align-items: baseline;
    column-gap: var(--gutter);
  }
}

.founder-row__name {
  font-family: var(--serif);
  font-size: var(--size-form-frame);
  font-weight: 500;
  color: var(--ink-primary);
}

.founder-row__line {
  font-family: var(--serif);
  font-size: var(--size-form-frame);
  font-style: italic;
  color: var(--ink-secondary);
  line-height: 1.4;
}

.founder-row__anchors {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
}

/* =============================================================
   III / V — engine_and_instances
   -------------------------------------------------------------
   Geometry enacts the headline: a single vertical --accent rule
   runs from the Investability Module block downward, crossing
   each engagement row at its left edge. The engine is not at
   the head of a list — it runs THROUGH the instances. One
   structural accent placement on the panel; the rule IS the
   mark. Engine name takes display-optical weight via the Source
   Serif 4 variable-font axis (opsz + wght). Same through-line
   at every width.
   ============================================================= */
.engine {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: calc(var(--gutter) * 0.875);
  padding-block-start: 0.125rem;
  margin-block-end: calc(var(--baseline) * 1.25);
  position: relative;
}

.engine__tag {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  margin-block-end: 0.5rem;
}

.engine__name {
  font-family: var(--serif);
  font-size: calc(var(--size-form-name) * 1.25);
  font-weight: 600;
  font-variation-settings: "opsz" 48, "wght" 600;
  color: var(--ink-primary);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin-block-end: 0.625rem;
}

@media (min-width: 48rem) {
  .engine__name {
    font-size: calc(var(--size-form-name) * 1.5);
    font-variation-settings: "opsz" 56, "wght" 600;
  }
}

.engine__frame {
  font-family: var(--serif);
  font-size: var(--size-form-frame);
  font-style: italic;
  color: var(--ink-secondary);
  line-height: 1.45;
  margin-block-end: calc(var(--baseline) * 0.75);
}

.engine__instances {
  display: grid;
  grid-template-columns: 1fr;
  margin-block-end: 0;
}

/* Each instance is a horizontal segment terminating at the
   vertical accent on the left (provided by .engine's border).
   The dotted hairline runs from the rule's inside edge across
   the row. No per-instance left padding — content sits flush
   against the rule. */
.instance {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.625rem;
  row-gap: 0.25rem;
  padding-block: 0.875rem;
  border-block-end: 1px dotted var(--rule);
  position: relative;
}

.instance:first-of-type {
  border-block-start: 1px dotted var(--rule);
}

.instance:last-of-type { border-block-end: none; }

@media (min-width: 48rem) {
  .instance {
    grid-template-columns: 2rem minmax(11rem, 1fr) minmax(0, 1.7fr) auto;
    align-items: baseline;
    column-gap: var(--gutter);
  }
}

.instance__tag {
  font-family: var(--sans);
  font-size: var(--size-tag);
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}

.instance__name {
  font-family: var(--serif);
  font-size: var(--size-form-frame);
  font-weight: 500;
  color: var(--ink-primary);
}

.instance__note {
  font-family: var(--serif);
  font-size: var(--size-form-frame);
  font-style: italic;
  color: var(--ink-secondary);
  line-height: 1.4;
  grid-column: 2 / -1;
}

@media (min-width: 48rem) {
  .instance__note { grid-column: auto; }
}

.instance__status {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  grid-column: 2 / -1;
  margin-block-start: 0.125rem;
}

@media (min-width: 48rem) {
  .instance__status {
    grid-column: auto;
    margin-block-start: 0;
    text-align: end;
    white-space: nowrap;
  }
}

.instance__status-mark {
  margin-inline-end: 0.4em;
  color: var(--ink-secondary);
}

/* =============================================================
   IV / V — inversion
   ============================================================= */
.inversion {
  display: grid;
  gap: calc(var(--gutter) * 1.25);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--baseline);
  margin-block-end: calc(var(--baseline) * 1.25);
}

@media (min-width: 48rem) {
  .inversion {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--gutter) * 1.5);
  }
}

.inversion__column {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.inversion__header {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
  padding-block-end: 0.625rem;
  border-block-end: 1px solid var(--rule);
  margin-block-end: 0.5rem;
}

.inversion__row {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  column-gap: 0.625rem;
  padding-block: 0.625rem;
  border-block-end: 1px dotted var(--rule);
  align-items: baseline;
}

.inversion__row:last-of-type { border-block-end: none; }

.inversion__ordinal {
  font-family: var(--sans);
  font-size: var(--size-tag);
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}

.inversion__phrase {
  font-family: var(--serif);
  font-size: var(--size-form-frame);
  color: var(--ink-primary);
  line-height: 1.4;
}

.inversion__terminal--collapse { color: var(--accent); }
.inversion__terminal--compounds { color: var(--ink-primary); }

.inversion__quote {
  margin-block: calc(var(--baseline) * 0.5) calc(var(--baseline) * 1.5);
  padding-inline-start: var(--gutter);
  border-inline-start: 2px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--size-description);
  color: var(--ink-secondary);
  line-height: 1.5;
}

/* =============================================================
   V / V — mirrored_ledger
   -------------------------------------------------------------
   Geometry enacts the headline: outward column stays
   left-aligned; inward column flips to right-aligned. Text
   mirrors. The rule between the two columns is the spine each
   inward sentence reads back toward. No accent on this panel —
   the honesty register asks for restraint, not punctuation.
   Mobile: rows stack into pairs; outward sentence left-aligned,
   inward sentence right-aligned within the row. The eye turns
   inward at every width.
   ============================================================= */
.mirrored {
  margin-block-end: calc(var(--baseline) * 1.5);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--baseline);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.mirrored__headers {
  display: none;
}

@media (min-width: 48rem) {
  .mirrored__headers {
    display: grid;
    grid-template-columns: 2.5rem 1fr 1fr;
    column-gap: var(--gutter);
    padding-block-end: 0.625rem;
    border-block-end: 1px solid var(--rule);
    margin-block-end: 0.5rem;
  }
}

.mirrored__headers-spacer {
  display: block;
}

.mirrored__header {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
}

@media (min-width: 48rem) {
  .mirrored__header:last-of-type { text-align: end; }
}

.mirrored__row {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: 0.625rem;
  row-gap: 0.625rem;
  padding-block: 0.875rem;
  border-block-end: 1px dotted var(--rule);
}

.mirrored__row:last-of-type { border-block-end: none; }

@media (max-width: 47.9375rem) {
  .mirrored__outward,
  .mirrored__inward {
    grid-column: 2 / -1;
  }
}

@media (min-width: 48rem) {
  .mirrored__row {
    grid-template-columns: 2.5rem 1fr 1fr;
    column-gap: var(--gutter);
    row-gap: 0;
    align-items: baseline;
  }
}

/* Roman-numeral row indices down the left edge — cadence, not
   decoration. Display-weight sans, tabular, ink-primary; scaled
   ~1.4× the row body so the column reads as the panel's spine
   beat. */
.mirrored__numeral {
  font-family: var(--sans);
  font-size: calc(var(--size-form-frame) * 1.4);
  font-weight: 500;
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: 0.02em;
  align-self: start;
}

@media (min-width: 48rem) {
  .mirrored__numeral {
    align-self: baseline;
  }
}

.mirrored__cell-tag {
  font-family: var(--sans);
  font-size: var(--size-tag);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
  margin-block-end: 0.25rem;
}

@media (min-width: 48rem) {
  .mirrored__cell-tag { display: none; }
}

.mirrored__outward {
  font-family: var(--serif);
  font-size: var(--size-form-frame);
  color: var(--ink-primary);
  line-height: 1.45;
  text-align: start;
}

/* Inward column mirrors back toward the spine — right-aligned
   text at every width. */
.mirrored__inward {
  font-family: var(--serif);
  font-size: var(--size-form-frame);
  color: var(--ink-primary);
  line-height: 1.45;
  text-align: end;
}

@media (min-width: 48rem) {
  .mirrored__outward { padding-inline-end: 0.75rem; }
  .mirrored__inward  { padding-inline-start: 0.75rem; border-inline-start: 1px solid var(--rule); }
}

@media (max-width: 47.9375rem) {
  .mirrored__inward .mirrored__cell-tag { text-align: end; }
}

/* =============================================================
   VI / VI — woven_lattice
   -------------------------------------------------------------
   Geometry enacts the headline: five rows, each carrying one
   human capability and one technology capability joined by an
   em-dash. The LEAD POSITION (left column, serif weight 500
   --ink-primary) alternates category down the panel — human,
   tech, human, tech, human. The FOLLOW POSITION (right column,
   serif italic weight 400 --ink-secondary) carries the partner
   capability. Reading the lead column top-to-bottom registers
   the alternation; the alternation IS the weave. No literal
   scaffold drawn, no decorative weave-marks between rows. Same
   inflection at every width — on mobile the pair flows inline,
   on desktop the pair sits in two columns separated by the
   em-dash.
   ============================================================= */
.woven {
  margin-block-end: calc(var(--baseline) * 1.5);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--baseline);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.woven__row {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  column-gap: 0.625rem;
  padding-block: 1.05rem;
  border-block-end: 1px dotted var(--rule);
  align-items: baseline;
}

.woven__row:first-of-type {
  border-block-start: 1px dotted var(--rule);
}

.woven__row:last-of-type { border-block-end: none; }

@media (min-width: 48rem) {
  .woven__row {
    grid-template-columns: 2.25rem 1fr;
    column-gap: var(--gutter);
    padding-block: 1.25rem;
  }
}

.woven__ordinal {
  font-family: var(--sans);
  font-size: var(--size-tag);
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  align-self: baseline;
}

/* The pair flows inline as a single statement at every width:
   [lead, weight 500 ink-primary] — [follow, italic ink-secondary].
   No internal grid — that would render the figure as a two-column
   table and lose the weave. The em-dash is the only connector;
   type-weight contrast is the only encoding. Stacking five such
   statements with the lead's category alternating row-to-row
   (human, tech, human, tech, human) IS the weave. */
.woven__pair {
  font-family: var(--serif);
  font-size: calc(var(--size-form-frame) * 1.08);
  line-height: 1.55;
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .woven__pair {
    font-size: calc(var(--size-form-frame) * 1.15);
    line-height: 1.5;
  }
}

.woven__lead {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink-primary);
}

.woven__dash {
  color: var(--ink-secondary);
}

.woven__follow {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  color: var(--ink-secondary);
}

/* =============================================================
   Authored-headline flag (Panels III and V)
   ============================================================= */
.headline__flag {
  font-family: var(--sans);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
  vertical-align: super;
  margin-inline-start: 0.3em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}