/*
 * ardent.tools — consumer-side token override + component CSS.
 *
 * Loaded after typikon's static/css/style.css (templates/base.html shadow
 * adds this <link> — the documented AGENTIC.md override path; typikon's
 * config.toml `consumer_css` hook is referenced in a stale comment but not
 * actually wired, per typikon-capabilities.md §2). Two jobs:
 *   1. Redeclare the :root tokens this site's visual system changes
 *      (palette, fonts, radius) — everything else (--step-*, --space-*,
 *      --max-width) is typikon's scale, kept verbatim.
 *   2. New component CSS this site's markup needs that typikon has no
 *      convention for: terminal panels, catalog rows, maturity badges,
 *      claim/receipt pairs, the two-cluster+sibling footer.
 *
 * WHY: equal-specificity selectors here beat style.css's because this
 * stylesheet loads second — most overrides below reuse style.css's own
 * selectors rather than adding !important.
 */

:root {
  color-scheme: light;
  /* === Width tiers (§1.2, DESIGN-v1.1) — two-tier shell: prose keeps a
     reading measure, everything structural gets structural room. Replaces
     typikon's single 780px --max-width for nav/main/footer (see the shell
     rule + .prose below); --max-width itself is left untouched so any
     un-shadowed typikon partial that still reads it doesn't break. */
  --width-prose: 820px;   /* body copy: system-page prose, about, writing, faq answers */
  --width-wide:  1200px;  /* nav, footer, main shell, catalog, receipt tables,
                             terminal panels, demos stack, home composition, bands */

  /* === Palette — light ("bond paper") === Leatherworks family stock,
     worn professionally (DESIGN-v1.1 §5.1). --accent/--accent-aged/--warn
     unchanged from the pre-v1.1 palette (already the family's russet/ember
     thread); --bg/--bg-accent/--text-mid/--text-light/--rule/--ok are the
     resolved values from §5.1 + design-delta-dye.md §5. */
  --bg: #F7F3E8;
  --bg-accent: #EDE7D8;
  --text: #1C1917;
  --text-mid: #44403C;
  --text-light: #6B6661;
  --rule: #DDD7C8;

  --accent: #9E4A1E;
  --accent-aged: #7C3A18;
  --ok: #49704E;
  --warn: #8A6318;

  /* Catalog zone inks (replaces the six flat zone hexes) — theme-invariant,
     never redeclared in the dark block: the wash formula below mixes each
     ink over var(--bg), so dark derives automatically. Backgrounds only,
     never text/borders/badges (design-delta-dye.md §1's one-interactive-
     accent discipline is unaffected). */
  --zone-systems-ink:   #7C3A18;   /* = --accent-aged: the flagship zone wears the brand ink */
  --zone-libraries-ink: #4A4055;   /* muted violet, family nod to thanatochromia-aged */
  --zone-web-ink:       #4A7A5A;   /* sage, family nod to aporia-aged */

  /* Paper grain (§W7) — the kill switch: 0 removes the texture entirely. */
  --grain-opacity: 0.05;

  /* Terminal plate — theme-invariant across light/dark (§2.2, §2.3). */
  --term-bg: #16181A;
  --term-text: #D6D4CC;
  --term-dim: #8B8D8A;
  --panel-edge: var(--text);

  /* ANSI palette inside recordings — tuned once, same pixels in both
     themes. Bright variants are the base hues at +12% lightness. */
  --ansi-0: #16181A;  --ansi-8:  #191B1D;
  --ansi-1: #C96A55;  --ansi-9:  #D1816F;
  --ansi-2: #82A578;  --ansi-10: #95B38D;
  --ansi-3: #C9A44C;  --ansi-11: #D1B166;
  --ansi-4: #7A9BB8;  --ansi-12: #92ADC5;
  --ansi-5: #A98BA5;  --ansi-13: #B9A0B5;
  --ansi-6: #7FA8A0;  --ansi-14: #94B6B0;
  --ansi-7: #D6D4CC;  --ansi-15: #ECEBE8;

  /* Fonts — Cormorant Garamond dropped entirely; two families, hard
     split (§2.4). --font-display is re-pointed at --font-mono (not left
     at typikon's Cormorant default) so a future theme partial that
     reads var(--font-display) can't silently resurrect the third
     family this site never ships a rendered use for. */
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-body: 'Spectral', Georgia, serif;
  --font-display: var(--font-mono);

  /* Type-scale ceiling — extends typikon's 1.2-ratio scale one step past
     its own --step-4, home only. Interior h1 moves to --step-4 (typikon's
     prior ceiling); nothing below step-4 moves. */
  --step-5: 2.488rem;
}

/* Plex Mono 600 — the one new vendored font file (§2.4). Latin subset
   only (typikon's 400/500 cuts carry the Greek range for nav-hover
   mechanics this site never activates; this weight only ever renders
   English headlines). */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/plex-mono-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}



/* Explicit canvas layer (W7 grain sits above this) + overshoot clip for
   the full-bleed band/zone ::before layers below (W6) — each overshoots
   by half a scrollbar width via 50vw math; this trims it flush. */
html {
  background: var(--bg);
  overflow-x: clip;
}

/* Paper grain (§W7) — felt, not seen: 5% over the light paper is below
   deliberate-perception threshold at reading distance. File-based (CSP-
   clean by construction: img-src 'self', no data: URI), fixed + z-index:
   -1 so every opaque evidence surface (terminal, plate, band fill) sits
   above it automatically. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/img/grain.svg');
  background-size: 240px 240px;
  opacity: var(--grain-opacity);
}

@media print {
  body::before {
    display: none;   /* typikon's print pass whitens body; this layer follows */
  }
}

/* === Width tiers (§1.2) — two-tier shell replacing typikon's single
   780px --max-width. nav/main/footer (typikon's own selectors, equal
   specificity, this stylesheet loads second so it wins the cascade) move
   to the wide shell; below 1248px the shell is fluid (100% - gutters). */
nav,
main,
footer {
  max-width: min(var(--width-wide), 100% - 2 * var(--space-s));
}

/* Query container for the .prose > .receipt-table-wrap breakout below —
   lets a wide element nested inside a narrowed .prose column size itself
   against main's own resolved width via cqw units, without needing to
   know main's width in advance (it's fluid below 1248px). */
main {
  container-type: inline-size;
}

/* Prose blocks (§1.2) — markdown-body containers: system-page prose,
   about, colophon, contact, resume, writing, faq answers, consulting.
   Catalog, demos stack, home composition, and terminal panels stay
   unwrapped at shell width (DESIGN-v1.1 §1.2's own width-wide list). */
.prose {
  max-width: var(--width-prose);
  margin-inline: auto;
}

/* Receipt tables run full shell width even though they're markdown-body
   content nested inside .prose (§1.2: "the receipt-table drift —
   .receipt-table-wrap gets shell width, keeps its overflow-x: auto").
   100cqw resolves against main's own inline size (the container above),
   not .prose's — so this reaches main's width regardless of viewport;
   the margin-inline centers it back under the narrower .prose column
   (algebraically (main width − .prose width) / 2 on each side). Browsers
   without container query units support fall back to .prose's own width
   — narrower than intended but not broken (overflow-x: auto still works). */
.prose > .receipt-table-wrap {
  width: 100cqw;
  margin-inline: calc(50% - 50cqw);
}

/* === Radius discipline: 0 everywhere except badges (2px) === */
.ap-player,
div.ap-wrapper div.ap-player,
:focus-visible {
  border-radius: 0;
}

/* === Headings: mono 600, sentence case, never uppercase at display size === */
h1 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--step-4);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* h2 hierarchy repair (§1.3) — typikon's default renders h2 at
   --step--1 (13.3px) uppercase-tracked, smaller than the 16px body it
   introduces and its own 19.2px h3 children. Restored to the v1 table
   that never reached CSS: step-2 (23px), sentence case, mono 600. The
   top hairline + spacing (border-top/padding-top/margin) are already
   correct in typikon's own rule — only size/case/tracking override here. */
h2 {
  font-size: var(--step-2);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  position: relative;
}

/* h2 ink tick (§W5) — the two-tier hierarchy applied within one rule:
   typikon's full-width content hairline stays; a short chrome-ink tick
   anchors the section start on top of it. Same weight as the hairline,
   darker ink - hierarchy from ink, not thickness. */
h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  border-top: 1px solid var(--text);
}

/* Inside a band/zone the band edge already carries a hairline (W6); the
   first h2 drops its own top rule and keeps only the tick. */
.section-band > h2:first-child,
.catalog-group > h2:first-child {
  border-top: none;
  padding-top: 0;
}

/* === Typographic craft (progressive enhancements) === Free browser
   craft: balanced/pretty wrapping, hanging punctuation (Safari-only,
   ignored elsewhere), and the accent's wash tier doing selection work. */
h1, h2, h3 {
  text-wrap: balance;
}

.prose p, .page-lede, .catalog-row-desc, .term-caption {
  text-wrap: pretty;
}

.prose {
  hanging-punctuation: first allow-end;
}

::selection {
  background: color-mix(in oklab, var(--accent) 22%, var(--bg));
}

/* === Section band (§1.4) — a zone-shift primitive: --bg-accent spanning
   the wide shell, radius 0, no border, --space-l padding-block. Max 2-3
   per page; never nested, never two adjacent (DESIGN-v1.1 §1.4). Fill
   moves to the ::before layer below (full-bleed, no layout math); this
   rule keeps only the padding. */
.section-band {
  background: none;
  padding-block: var(--space-l);
}

/* Two bands placed back to back (home's Selected-work + Consulting
   bands, §2) would otherwise share one identical --bg-accent fill with
   no visible seam — the same color abutting itself reads as one merged
   band, not two (§1.4's "never two adjacent" rule). A plain-paper gap
   between them keeps each band legible as its own zone. */
.section-band + .section-band {
  margin-top: var(--space-l);
}

/* === Full-bleed band/zone fill (W6) — a background layer instead of
   layout padding: zone color runs to the viewport edge, content stays
   shell-aligned, no padding rebalancing or scrollbar-width risk. Paints
   above the grain (W7's body::before) — both sit at z-index: -1 in the
   root stacking context, tree order puts these later, so tinted zones
   read as opaque dye baths over the paper grain, which is correct. */
.section-band,
.catalog-group {
  position: relative;
}

.section-band::before,
.catalog-group[class*="zone-"]::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
}

.section-band::before {
  background: var(--bg-accent);
  border-block: 1px solid var(--rule);   /* the recessed panel's hairline edge */
}

/* Seam only where two dyed zones abut directly (the /systems/ catalog). */
.catalog-group[class*="zone-"] + .catalog-group[class*="zone-"]::before {
  border-top: 1px solid var(--rule);
}

/* Catalog zone washes (design-delta-dye.md §8, reworked as a Leatherworks
   dye-entry gradient — 145deg, 3 stops, peak 6% ink — instead of a flat
   hex). Mixing over var(--bg) means dark derives automatically; peak
   capped at 6% so --text-light copy stays AA on every zone (verified:
   the 6% peak stays lighter than the old flat hex's darkest point in
   every zone, both themes). Background lands on the ::before layer
   above, not the .catalog-group itself. */
.zone-systems::before {
  background: linear-gradient(145deg,
    color-mix(in oklab, var(--zone-systems-ink) 3%, var(--bg)) 0%,
    color-mix(in oklab, var(--zone-systems-ink) 6%, var(--bg)) 55%,
    color-mix(in oklab, var(--zone-systems-ink) 4%, var(--bg)) 100%);
}

.zone-libraries::before {
  background: linear-gradient(145deg,
    color-mix(in oklab, var(--zone-libraries-ink) 3%, var(--bg)) 0%,
    color-mix(in oklab, var(--zone-libraries-ink) 6%, var(--bg)) 55%,
    color-mix(in oklab, var(--zone-libraries-ink) 4%, var(--bg)) 100%);
}

.zone-web::before {
  background: linear-gradient(145deg,
    color-mix(in oklab, var(--zone-web-ink) 3%, var(--bg)) 0%,
    color-mix(in oklab, var(--zone-web-ink) 6%, var(--bg)) 55%,
    color-mix(in oklab, var(--zone-web-ink) 4%, var(--bg)) 100%);
}
/* In-design zone: no class, no ::before — plain --bg is the treatment. */

/* === Catalog groups (§3.2) — the /systems/ zone wrapper. Shared
   padding-block regardless of tint; .zone-* above supplies the
   background (or nothing, for the deliberately-undyed In-design zone —
   see design-delta-dye.md §4, distinct from --bg-accent bands elsewhere:
   this zone is plain paper, not the recessed neutral). Full shell width
   comes free from being a block child of main (§1.4). */
.catalog-group {
  padding-block: var(--space-l);
}

.catalog-group:target h2 {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.catalog-index,
.catalog-footnote,
.catalog-ownership {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-light);
}

.catalog-index {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.catalog-footnote {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.catalog-index a,
.catalog-footnote a,
.catalog-ownership a {
  color: var(--text-light);
}

.group-caption {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-light);
  max-width: 70ch;
  margin-top: var(--space-3xs);
}

/* === Ledger rows (§3.2 tiers 2-3) — Libraries/Web (grid) and In-design
   (register). Shares .catalog-row-desc / .catalog-row-meta with the
   flagship rows above (same one-liner and meta-line treatment; no reason
   to duplicate the rule). */
.ledger-grid {
  display: grid;
  gap: var(--space-s);
}

@media (min-width: 1024px) {
  .ledger-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.ledger-cell {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-xs);
}

.ledger-name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--step-0);
}

.ledger-name a {
  color: var(--text);
  text-decoration: none;
}

.ledger-name a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.ledger-gloss {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--step--1);
  color: var(--text-mid);
  margin: var(--space-3xs) 0;
}

h3 {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 600;
}

/* === Links + focus: --accent is the only interactive color === */
a:hover {
  text-decoration-color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Nav hover: kill the Leatherworks per-item dye-color cycle; one accent,
   underline offset 3px, 120ms (§3.7, §5.2). Matches style.css's
   `.nav-links a:nth-child(N):hover` specificity so the later stylesheet
   wins on the tie rather than needing !important. */
.nav-links a:nth-child(1):hover,
.nav-links a:nth-child(2):hover,
.nav-links a:nth-child(3):hover,
.nav-links a:nth-child(4):hover,
.nav-links a:nth-child(5):hover,
.nav-links a:nth-child(6):hover,
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text);
}

.nav-links a {
  transition: color 120ms ease-out;
  text-underline-offset: 3px;
}

/* Current-page indicator (§1.6) — the nav item whose URL prefixes the
   current path, per the shadowed partials/nav.html. --text color, no
   underline (v1 §3.7 specified this; it never shipped until now). */
.nav-links a[aria-current="page"] {
  color: var(--text);
}

/* The one button style (§3.7) — filled --text, radius 0. Nav's Resume
   entry (last by position in nav_items) plus /resume/'s own PDF link
   both use it. */
.nav-links a:last-child,
.button {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bg);
  background: var(--text);
  padding: var(--space-3xs) var(--space-s);
  text-decoration: none;
  border-radius: 0;
}

.nav-links a:last-child:hover,
.nav-links a:last-child:focus-visible,
.button:hover,
.button:focus-visible {
  background: var(--accent);
  color: var(--bg);
}

/* journal-list / faq accent fixes (style.css defaults to Leatherworks --aima) */
.products-list a:hover,
.journal-list a:hover,
.faq-anchor:hover {
  color: var(--accent);
}

.faq-anchor:hover {
  border-bottom-color: var(--accent);
}

.faq-question {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--step-1);
}

/* === Up-link (§1.6) — system pages, above the prev/next row. Mono
   --step--1, same treatment as the rest of the site's small nav links. */
.up-link {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-light);
  margin-bottom: var(--space-xs);
}

/* === Wordmark: lowercase mono 600 + the flame mark (§5.2) ===
   config.extra.logo_path stays set (partials/ld-organization.html needs
   it — unconditional concat, errors the whole build if unset) but the
   nav's auto-rendered <img class="logo-mark"> is suppressed: DESIGN
   wants no crest, no icon system, mono wordmark + flame only. */
.logo-mark {
  display: none;
}

.logo {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--step-1);
  text-transform: none;
  letter-spacing: -0.01em;
}

/* The flame mark replaces the block-cursor ▌ as the site's one flourish
   (§5.2 — v1's §2.6 cursor language is retired: two flourishes is one
   too many now that the shared family mark carries the brand signal).
   mask-image + a solid background-color renders the multi-path source
   artwork (static/img/logo-flame.svg, fill:none/stroke-only) as a single
   --accent silhouette, ignoring its own internal stroke color entirely —
   the only reliable way to recolor an <img>-external SVG to one flat ink
   without touching the shared asset file. ~1em beside the wordmark, no
   animation. */
.logo::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.05em;
  order: 2;
  background-color: var(--accent);
  -webkit-mask-image: url('/img/logo-flame.svg');
  mask-image: url('/img/logo-flame.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* === Maturity badge (§3.3) — neutral ink always, never traffic-lit === */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 2px 8px;
  color: var(--text-mid);
  text-decoration: none;
}

a.badge:hover,
a.badge:focus-visible {
  color: var(--text);
  border-color: var(--text);
}

/* === Claim / receipt (§3.4) === */
.claim {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}

.receipt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-light);
}

/* Wraps every receipt table's rendered <table> (§6: "own overflow-x:
   auto; the page body never scrolls horizontally"). Markdown tables have
   no attribute syntax to put a class directly on <table>, so every rule
   below is scoped through this wrapper div instead.

   Receipt plate (§W5) — the matted-frame treatment extended to the
   third evidence artifact: terminal = screen under mat, diagram = paper
   plate, receipts = ledger plate. Reserved for terminal panels, diagram
   plates, and receipt tables only - never prose, catalogs, or FAQ items. */
.receipt-table-wrap {
  background: var(--bg-accent);
  border: 1px solid var(--panel-edge);
  padding: var(--space-s);
  overflow-x: auto;
}

.receipt-table-wrap table {
  margin: 0;   /* the plate owns the spacing now */
  font-variant-numeric: tabular-nums slashed-zero;
}

.receipt-table-wrap thead th {
  border-bottom: 3px double var(--text-mid);   /* the ledger's double rule; 3px is the minimum that renders as two lines */
}

.receipt-table-wrap .ok::before {
  content: "\2713 "; /* check glyph, --ok — the one call site outside terminal content */
  color: var(--ok);
}

/* === Fact row (system-page header, §4.2) === */
.fact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;   /* mono is inherently tabular; covers any serif span landing in a fact row */
  color: var(--text-light);
  margin-bottom: var(--space-l);
}

.fact-row .private-chip {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
}

.page-lede {
  font-family: var(--font-body);
  font-size: var(--step-1);
  color: var(--text-mid);
  max-width: 60ch;
}

/* === Terminal panel (§3.1) — the base primitive === */
.term-panel {
  margin: var(--space-l) 0;
}

.term-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3xs) var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-light);
  margin-bottom: var(--space-xs);
}

/* T6 (§7) — /demos/ passes heading=true so the meta line's system·action
   text is an <h3> (the missing per-figure heading-navigation landmark),
   not a <span>. Reset it back to the meta line's own typography so it
   renders identically to the span it replaces everywhere else. */
.term-meta h3 {
  display: inline;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  margin: 0;
}

.term-meta a {
  color: var(--text-light);
}

.term-mat {
  background: var(--bg);
  border: 1px solid var(--panel-edge);
  padding: var(--space-s);
}

@media (max-width: 480px) {
  .term-mat {
    padding: var(--space-xs);
  }
}

.term-screen {
  background: var(--term-bg);
  min-height: 12rem;
}

/* Architecture-diagram variant (ergon-tools, nosologia — §4.2): the same
   matted-frame treatment, paper-toned instead of a dark screen — a
   diagram is not a running session. */
.diagram-plate {
  background: var(--bg-accent);
}

.diagram-img {
  display: block;
  width: 100%;
  height: auto;
}

.term-screen .ap-player {
  --term-color-background: var(--term-bg);
  --term-color-foreground: var(--term-text);
  --term-color-0: var(--ansi-0);
  --term-color-1: var(--ansi-1);
  --term-color-2: var(--ansi-2);
  --term-color-3: var(--ansi-3);
  --term-color-4: var(--ansi-4);
  --term-color-5: var(--ansi-5);
  --term-color-6: var(--ansi-6);
  --term-color-7: var(--ansi-7);
  --term-color-8: var(--ansi-8);
  --term-color-9: var(--ansi-9);
  --term-color-10: var(--ansi-10);
  --term-color-11: var(--ansi-11);
  --term-color-12: var(--ansi-12);
  --term-color-13: var(--ansi-13);
  --term-color-14: var(--ansi-14);
  --term-color-15: var(--ansi-15);
  --term-font-family: var(--font-mono), monospace;
  width: 100%;
}

/* Fallback <pre> — visible until site.js swaps in the player, and always
   visible to no-JS visitors, feed readers, and crawlers (§3.1). */
.term-fallback {
  margin: 0;
  padding: var(--space-s);
  color: var(--term-text);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Honest placeholder (§3.6) — same slot the real recording will occupy. */
.term-placeholder {
  background: var(--bg-accent);
  border: 1px solid var(--panel-edge);
  padding: var(--space-l) var(--space-s);
  text-align: center;
}

.term-placeholder p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* text-mid, not text-light: clears 7.5:1+ on bg-accent in both themes,
     the wider margin for uppercase small text (pa11y only gates the
     light render; dark is the manual pass §8.4 calls for). The v1.1
     dark --text-light (design-delta-dye.md §5) now also clears AA on
     bg-accent (4.58:1) — the pre-v1.1 failure this comment used to warn
     about is resolved at the token level; text-mid is kept for margin,
     not to route around a failure. */
  color: var(--text-mid);
}

.term-caption {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--text-mid);
  margin-top: var(--space-xs);
}

.term-transcript {
  margin-top: var(--space-xs);
}

.term-transcript summary {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-light);
  cursor: pointer;
}

.term-transcript pre {
  margin-top: var(--space-xs);
  padding: var(--space-s);
  background: var(--bg-accent);
  border: 1px solid var(--rule);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
}

/* Placard-without-panel — a demo that cannot exist, honestly (§4.3). */
.term-placard {
  border: 1px solid var(--rule);
  padding: var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-light);
}

.term-placard a {
  color: var(--text-light);
}

/* === Catalog row (§3.2) — a ledger row, not a card === */
.catalog {
  list-style: none;
  margin: var(--space-m) 0;
  padding: 0;
}

.catalog-row {
  display: block;
  border-top: 1px solid var(--rule);
  padding-block: var(--space-s);
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease-out, box-shadow 120ms ease-out;
}

.catalog-row:last-child {
  border-bottom: 1px solid var(--rule);
}

.catalog-row:has(a:hover),
.catalog-row:has(a:focus-visible) {
  background: color-mix(in oklab, var(--accent) 4%, transparent);
  box-shadow: inset 2px 0 0 var(--accent);   /* the ledger-margin tick */
}

/* Deep-link landing gets the same mark as a hovered row. */
.faq-item:target {
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Aged-accent ladder (§W8) — Leatherworks' rest -> base -> aged
   progression, on click. box-shadow: inset (not border-left) so the
   tick causes zero layout shift; the 120ms transitions collapse under
   typikon's global reduced-motion rule for free. */
a:active {
  text-decoration-color: var(--accent-aged);
}

.button:active,
.nav-links a:last-child:active {
  background: var(--accent-aged);
}

/* --accent-aged's dark value (#B96534) under --bg text drops to 3.86:1,
   below AA's 4.5:1 floor for this filled button's normal-size label
   (verified: WCAG relative-luminance formula, both dark tokens as
   declared above). Dark keeps the already-AA hover fill (5.08:1)
   instead of stepping to aged on press; light's aged step is unaffected
   (7.65:1, comfortably AA). */


.catalog-row-name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--step-1);
}

.catalog-row-name a {
  color: var(--text);
  text-decoration: none;
}

.catalog-row:has(a:hover) .catalog-row-name a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.catalog-row-desc {
  font-family: var(--font-body);
  color: var(--text-mid);
  margin: var(--space-3xs) 0;
  max-width: 70ch;
}

.catalog-row-meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-light);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-xs);
}

.catalog-row-meta a {
  color: var(--text-light);
}

/* === Home === */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: var(--space-s);
}

.home-h1 {
  font-size: var(--step-5);
  line-height: 1.1;
  letter-spacing: -0.015em;    /* mono 600 tightens slightly at display size */
  max-width: 16ch;
}

.home-lede {
  font-family: var(--font-body);
  font-size: var(--step-1);
  color: var(--text-mid);
  max-width: 60ch;
  margin-bottom: var(--space-l);
}

.selected-work-close {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-light);
  margin-top: var(--space-s);
}

.practice-paragraph {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--text-mid);
  max-width: 70ch;
  margin: var(--space-xl) 0;
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
}

.consulting-line {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--text-mid);
  max-width: 60ch;
  margin: 0;
}

.home-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-items: baseline;
  margin: var(--space-m) 0 var(--space-l);
}

.home-ctas a {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* === Footer (§3.7, §W9) — three mono clusters + sibling line, closed
   out with a designed sign-off: kicker labels, links lifted one ink
   tier above their labels, a top rule, and the flame's second and
   final appearance per page (masthead, then here — never per-section). */
.site-footer-clusters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m) var(--space-xl);
  margin-bottom: var(--space-s);
}

.site-footer-cluster {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light);
}

.footer-kicker {
  display: block;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-bottom: var(--space-3xs);
}

.site-footer-cluster a {
  color: var(--text-mid);   /* links lift one ink tier above their labels */
}

.site-footer-cluster a:hover {
  color: var(--accent);
}

.site-footer-sibling {
  margin-bottom: var(--space-s);
}

.site-footer-sibling a {
  color: var(--text-light);
}

.site-footer-colophon {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-light);
  text-transform: none;
  letter-spacing: normal;
  border-top: 1px solid var(--rule);
  padding-top: var(--space-s);
  margin-top: var(--space-s);
}

/* The seal: the flame's second and final appearance per page. Same mask
   technique as the masthead (.logo::before above). */
.site-footer-colophon::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.4em;
  vertical-align: -0.08em;
  background-color: var(--accent);
  -webkit-mask: url('/img/logo-flame.svg') no-repeat center / contain;
  mask: url('/img/logo-flame.svg') no-repeat center / contain;
}

footer {
  padding-block: var(--space-m) var(--space-l);   /* the close gets room to land */
}

/* === Consulting (§Addendum) === */
.engagement-shapes {
  display: grid;
  gap: var(--space-m);
  margin: var(--space-m) 0 var(--space-l);
}

.engagement-shape h3 {
  margin-bottom: var(--space-3xs);
}

.engagement-shape p {
  margin-bottom: 0;
  color: var(--text-mid);
}