@charset "UTF-8";
/* ==========================================================================
   Chukwudaalu & Co. — main.css
   The single stylesheet for the site. No build step, no imports, no external
   requests. System-resident serif only.

   Contents: 1 Tokens (light) · 2 Tokens (dark) · 3 Reset · 4 Base typography ·
   5 Links and focus · 6 Layout · 7 Utility classes · 8 Print

   ---------------------------------------------------------------------------
   UTILITY CLASSES AVAILABLE TO PAGE AGENTS
   ---------------------------------------------------------------------------
   .lede           Opening statement. Display serif, tight leading.
   .standfirst     One step down from .lede. The second paragraph of an opening.
   .section-label  Small, letter-spaced, secondary-grey label above a block. Set
                   the words in the markup; the rule uppercases them.
   .commitments    Ordered list with the numerals hung in the left margin in the
                   display serif. /firm/independence. Reads as a schedule to an
                   agreement, not as a bulleted web list.
   .principle      A values block: bold declarative line (.principle-line) then
                   body paragraphs.
   .capability     The "What we do" block on a practice page.
   .limitation     The paired "What we do not do" block. Set apart by a hairline
                   rule and a change of ink colour. Never a box, badge or fill.
   .record         Transaction record: .record-date stamp above three
                   .record-figure / .record-label pairs, accent hairline above,
                   .record-note beneath. GATED off the homepage (BRIEF.md §7.8);
                   the styles ship regardless so the format is fixed.
   .tombstone-grid Container for completed-transaction tombstones.
   .tombstone      One tombstone, field order per COPY-DECK 9.1, separated from
                   its neighbours by a hairline rule. Not a card.
   .placeholder    An unresolved fact. Brackets belong in the markup:
                   <span class="placeholder">[RC number]</span>
   .note           Provenance, disclosure and qualifying notes at 13px.
   .index-list     Perspectives listing: .index-item-title, .index-item-date,
                   .index-item-description, hairline rules between items.
   .subnav         Sibling navigation at the foot of <main> in a multi-page
                   section (The Firm, Practices, the legal pages). Small,
                   secondary grey, hairline-ruled. Never a call to action.
                   Use this — do not reuse .footer-legal inside <main>.

   Helpers: .page (container) · .measure · .stack-section · .rule-above ·
   .scroll-x · .visually-hidden · .skip-link · .site-header · .wordmark ·
   .site-nav · .site-footer · .footer-legal · .footer-meta · .theme-toggle
   ========================================================================== */


/* == 1. Tokens (light) =====================================================
   The complete palette is defined here, on bare :root. No colour has its only
   definition inside a media query. */

:root {
  /* IV.3 — two families and no third. The superfamily carries display and
     body; the utility grotesque carries labels, tabular data, figures and
     metadata. Both are system-resident, so nothing is fetched from a
     third-party origin — the strictest reading of the Charter's requirement
     that no visitor's presence is disclosed to any other party. Licensed
     self-hosted faces drop in at these two variables and nowhere else. */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter,
                "Book Antiqua", Georgia, "Liberation Serif", "Nimbus Roman",
                "Times New Roman", Times, serif;
  --font-utility: "Inter", "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans",
                  Arial, sans-serif;

  --t-display: clamp(1.75rem, 1.482rem + 1.19vw, 2.375rem);
  --t-h1: 1.75rem;
  --t-h2: 1.125rem;
  --t-body: 1.0625rem;
  --t-small: 0.8125rem;

  --leading-body: 1.65;
  --leading-display: 1.2;
  --leading-tight: 1.3;
  --tracking-label: 0.08em;
  --tracking-wordmark: 0.14em;

  --measure: 34rem;
  --measure-wide: 46rem;
  --rail: 11rem;

  --space-hair: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-block: 2.75rem;
  --space-section: 5.5rem;

  --page-max: 74rem;
  --page-start: clamp(1.5rem, 7vw, 6rem);
  --page-end: clamp(1.5rem, 4vw, 3.5rem);

  /* IV.2 — the identity green is the source of the palette, not a member of
     it. Every neutral is green-cast, so the identity is present in every
     character on every surface without ever appearing as a field of colour.
     Paper is a green-cast white; ink is a green-black, never black. */
  --green: #395723;
  --paper: #F8FAF4;
  --ink: #131711;
  --ink-secondary: #545A48;
  --rule: #D9DFCC;
  --brass: #7A5F27;

  --hairline: 1px solid var(--rule);
  color-scheme: light;
}


/* == 2. Tokens (dark) ======================================================
   Only the changed tokens are redefined, twice: once for the system
   preference, once for the explicit toggle. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* VII — dark is its own composition, not an inversion. The identity green
       fails contrast on a dark ground, so a lighter tint stands in: the
       identity is not permitted to be illegible in service of being literal
       (IV.2). Neutrals stay green-cast. */
    --green: #A6C486;
    --paper: #10140E;
    --ink: #E7ECDF;
    --ink-secondary: #99A388;
    --rule: #2A3025;
    --brass: #C3A15C;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
    /* VII — dark is its own composition, not an inversion. The identity green
       fails contrast on a dark ground, so a lighter tint stands in: the
       identity is not permitted to be illegible in service of being literal
       (IV.2). Neutrals stay green-cast. */
    --green: #A6C486;
    --paper: #10140E;
    --ink: #E7ECDF;
    --ink-secondary: #99A388;
    --rule: #2A3025;
    --brass: #C3A15C;
    color-scheme: dark;
}


/* == 3. Reset — modest, only what is needed ================================ */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; padding: 0; }
ol[class], ul[class] { list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
hr { border: 0; border-top: var(--hairline); margin: 0; }

/* No motion anywhere: no transform, no keyframes, no scroll-behaviour. The one
   permitted transition is link hover colour, declared in §5. */


/* == 4. Base typography ==================================================== */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-x: hidden; /* nothing scrolls the body sideways at any width */
}

h1, h2, h3 { font-weight: 400; line-height: var(--leading-tight); max-width: var(--measure); }
h1 { font-size: var(--t-h1); margin-block-end: var(--space-lg); }
h2 { font-size: var(--t-h2); margin-block: var(--space-block) var(--space-md); }
h3 { font-size: var(--t-body); font-weight: 700; margin-block: var(--space-lg) var(--space-sm); }

p, li, dt, dd, blockquote { max-width: var(--measure); }
p + p { margin-block-start: var(--space-md); }
strong, b { font-weight: 700; }
em, i { font-style: italic; }
small { font-size: var(--t-small); }
abbr[title] { text-decoration: none; border-block-end: 1px dotted var(--ink-secondary); }

blockquote {
  margin-block: var(--space-lg);
  padding-inline-start: var(--space-md);
  border-inline-start: var(--hairline);
}

/* Prose lists, kept plain. Bulleted lists are rare on this site. */
main ul:not([class]), main ol:not([class]) {
  max-width: var(--measure);
  padding-inline-start: 1.25rem;
  margin-block: var(--space-md);
}
main ul:not([class]) > li + li,
main ol:not([class]) > li + li { margin-block-start: var(--space-xs); }

/* Tables are rare. When used they scroll inside their own .scroll-x container. */
th, td {
  text-align: start;
  padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
  border-block-end: var(--hairline);
  vertical-align: top;
}
th {
  font-weight: 400;
  font-size: var(--t-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-secondary);
}


/* == 5. Links and focus ====================================================
   A visible 2px outline with offset on every interactive element.
   `outline: none` appears nowhere in this file. */

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 120ms linear; /* the only movement on the site */
}
a:hover { color: var(--green); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.skip-link {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-start: var(--space-md);
  z-index: 10;
  padding: var(--space-xs) var(--space-sm);
  background: var(--paper);
  border: var(--hairline);
}
.skip-link:not(:focus):not(:active),
.visually-hidden {
  position: absolute;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
}


/* == 6. Layout ============================================================= */

.page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-start) var(--page-end);
}

/* Header */
.site-header { padding-block: var(--space-block) 0; border-block-end: var(--hairline); }

/* Primary navigation. Six short items, no JavaScript, no hamburger: an inline
   flex row that wraps at narrow widths, and scrolls inside itself rather than
   pushing the body sideways in the event an item is ever long. Nothing to
   open, nothing to close. The current section carries aria-current="page". */
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  max-width: none;
  overflow-x: auto;
}
.site-nav li { max-width: none; }
.site-nav a { display: inline-block; padding-block: var(--space-hair); text-decoration: none; }
.site-nav a:hover,
.site-nav a[aria-current="page"],
.site-nav a[aria-current="true"] {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Section menus. The Firm carries seven pages and Practices three; a reader
   doing diligence on the firm should be able to see them without first landing
   on one. Opens on hover and on keyboard focus, with no JavaScript and no
   transition — it appears, it does not animate. On touch, where hover does not
   fire, tapping the parent goes to the section and the section bar below
   carries the same links, so nothing is unreachable. */
.site-nav .has-menu { position: relative; }
.site-nav .menu {
  display: none;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 20;
  min-width: 16rem;
  padding: var(--space-sm) 0;
  background: var(--paper);
  border: var(--hairline);
  font-size: var(--t-small);
}
.site-nav .has-menu:hover > .menu,
.site-nav .has-menu:focus-within > .menu { display: block; }
.site-nav .menu li { max-width: none; }
.site-nav .menu a {
  display: block;
  padding: var(--space-hair) var(--space-md);
  text-decoration: none;
  color: var(--ink-secondary);
}
.site-nav .menu a:hover,
.site-nav .menu a[aria-current="page"] { color: var(--ink); text-decoration: none; }
.site-nav .menu a[aria-current="page"] { border-inline-start: 2px solid var(--green); padding-inline-start: calc(var(--space-md) - 2px); }

@media (hover: none) {
  .site-nav .has-menu:hover > .menu { display: none; }
}

/* Section bar. A second row beneath the primary navigation carrying the pages
   of the section the reader is in. Always present, never a disclosure — the
   contents of a section are not something to be discovered. */
.section-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  max-width: none;
  border-block-start: var(--hairline);
  margin-block-start: var(--space-md);
  padding-block: var(--space-sm) var(--space-md);
  font-size: var(--t-small);
}
.section-bar li { max-width: none; }
.section-bar a { text-decoration: none; color: var(--ink-secondary); }
.section-bar a:hover { color: var(--green); }
.section-bar a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Main */
main { padding-block: var(--space-section); }
.stack-section { margin-block-start: var(--space-section); }
.rule-above { border-block-start: var(--hairline); padding-block-start: var(--space-lg); }
.measure { max-width: var(--measure); }
.scroll-x { overflow-x: auto; max-width: 100%; }

/* Footer — quiet and small. The utility layer lives here and nowhere else. */
.site-footer {
  border-block-start: var(--hairline);
  padding-block: var(--space-lg) var(--space-block);
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-secondary);
}
.site-footer p, .site-footer li { max-width: var(--measure-wide); }
.site-footer p + p { margin-block-start: var(--space-xs); }
.footer-legal, .footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}
.footer-legal { margin-block-start: var(--space-md); }
.footer-legal li { max-width: none; }
.footer-meta { justify-content: space-between; margin-block-start: var(--space-lg); }

/* A utility, not a feature. Labelled in words, never an icon. */
.theme-toggle {
  font-size: var(--t-small);
  color: var(--ink-secondary);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); }


/* == 7. Utility classes ==================================================== */

/* .lede / .standfirst — the opening statement. */
.lede {
  font-size: var(--t-display);
  line-height: var(--leading-display);
  max-width: 26rem; /* the display size reaches a readable measure sooner */
  text-wrap: balance;
}
.standfirst {
  font-size: var(--t-h2);
  line-height: 1.5;
  max-width: var(--measure);
  margin-block-start: var(--space-lg);
}

/* .section-label */
.section-label {
  display: block;
  max-width: none;
  font-size: var(--t-small);
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-block-end: var(--space-md);
}

/* .commitments — /firm/independence. A schedule to an agreement. The numerals
   hang in the left margin in the display serif, in secondary grey, with the
   row spacing of a printed instrument. */
.commitments {
  list-style: none;
  counter-reset: commitment;
  max-width: var(--measure-wide);
  margin-block: var(--space-block);
  padding: 0;
}
.commitments > li {
  counter-increment: commitment;
  position: relative;
  max-width: var(--measure);
  padding-inline-start: 3.5rem;
  margin-block-end: 2.5rem;
}
.commitments > li:last-child { margin-block-end: 0; }
.commitments > li::before {
  content: counter(commitment) ".";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -0.15em;
  font-size: var(--t-h1);
  line-height: var(--leading-display);
  color: var(--ink-secondary);
  font-variant-numeric: lining-nums;
}
@media (max-width: 30rem) {
  .commitments > li { padding-inline-start: 2.5rem; }
  .commitments > li::before { font-size: var(--t-h2); inset-block-start: 0.1em; }
}

/* .principle — a values block. */
.principle { margin-block-end: var(--space-block); }
.principle + .principle { border-block-start: var(--hairline); padding-block-start: var(--space-block); }
.principle-line { font-weight: 700; max-width: var(--measure); margin-block-end: var(--space-md); }

/* .capability / .limitation — every capability claim is paired with a
   limitation on the same page. The limitation is distinguished by a hairline
   rule and a change of ink colour. No box, no badge, no background fill. */
.capability { margin-block-start: var(--space-block); }
.limitation {
  margin-block-start: var(--space-block);
  padding-block-start: var(--space-lg);
  border-block-start: var(--hairline);
  color: var(--ink-secondary);
}
.limitation h2, .limitation h3 { color: var(--ink-secondary); }
/* The padding above blocks margin collapse, so without this the limitation's
   heading sits lower beneath its rule than the capability's does beneath the
   text before it, and the pair reads as two unrelated blocks. The pairing is
   the credibility device; the two headings must sit at matching optical
   distance. */
.limitation > :first-child { margin-block-start: 0; }


/* .subnav — the quiet sibling navigation at the foot of <main> in a multi-page
   section: The Firm, Practices, the legal pages. Small, secondary grey, set
   below a hairline rule. It is a way back into the section, not a call to
   action, and it carries no descriptive text. The current page is marked with
   aria-current="page" and is not a link. */
.subnav { margin-block-start: var(--space-section); }
.subnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  max-width: none;
  border-block-start: var(--hairline);
  padding-block-start: var(--space-md);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-secondary);
}
.subnav li { max-width: none; }
.subnav a { color: var(--ink-secondary); }
.subnav a:hover { color: var(--green); }
.subnav [aria-current="page"] { color: var(--ink); }

/* .record — transaction record. GATED: absent from the homepage until the
   record reaches five completed transactions or ₦10bn aggregate advised
   value, whichever occurs first (BRIEF.md §7.8, COPY-DECK 6.2). The figures
   are static text: no count-up, no odometer, no motion of any kind. The date
   stamp is mandatory and sits above the figures. */
.record {
  max-width: var(--measure-wide);
  margin-block-start: var(--space-section);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--green);
}
.record-date {
  max-width: none;
  font-size: var(--t-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-block-end: var(--space-lg);
}
.record-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin: 0;
}
.record-figures > div { max-width: none; }
.record-figure {
  display: block;
  max-width: none;
  font-size: var(--t-display);
  line-height: var(--leading-display);
}
.record-label {
  display: block;
  max-width: none;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--ink-secondary);
  margin-block-start: var(--space-xs);
}
.record-note {
  max-width: var(--measure-wide);
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-secondary);
  margin-block-start: var(--space-lg);
}
@media (max-width: 44rem) {
  .record-figures { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* .tombstone-grid / .tombstone — COPY-DECK 9.1: sector, transaction, our
   role, counterparty, value, year. Separated by hairline rules. Not cards. */
.tombstone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0 var(--space-section);
  max-width: var(--measure-wide);
  margin-block-start: var(--space-block);
}
.tombstone {
  max-width: none;
  border-block-start: var(--hairline);
  padding-block: var(--space-lg) var(--space-block);
}
.tombstone-year {
  display: block;
  font-size: var(--t-h2);
  color: var(--ink-secondary);
  margin-block-end: var(--space-md);
}
.tombstone dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-md);
  margin: 0;
}
.tombstone dt {
  max-width: none;
  font-size: var(--t-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.tombstone dd { max-width: none; font-size: var(--t-small); line-height: 1.5; margin: 0; }

/* .placeholder — the brackets belong in the markup. Nothing is invented. */
.placeholder { color: var(--ink-secondary); border-block-end: 1px dotted var(--ink-secondary); }

/* .note */
.note {
  max-width: var(--measure-wide);
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-secondary);
  margin-block-start: var(--space-md);
}

/* .index-list — the Perspectives listing. No call to action at the end of any
   listing (COPY-DECK Part X); the absence is the argument. */
.index-list { list-style: none; padding: 0; max-width: var(--measure-wide); margin-block-start: var(--space-block); }
.index-list > li { max-width: none; border-block-start: var(--hairline); padding-block: var(--space-lg); }
.index-list > li:last-child { border-block-end: var(--hairline); }
.index-item-title {
  font-size: var(--t-h2);
  line-height: var(--leading-tight);
  max-width: var(--measure);
  margin: 0 0 var(--space-xs);
}
.index-item-date {
  display: block;
  max-width: none;
  font-size: var(--t-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-block-end: var(--space-sm);
}
.index-item-description { max-width: var(--measure); color: var(--ink-secondary); margin: 0; }


/* == 8. Print — a partner will print these pages ===========================
   Black on white. No navigation, no footer utility links. */

@media print {
  :root {
    --bg: #FFFFFF;
    --ink: #000000;
    --ink-secondary: #000000;
    --rule: #000000;
    --accent: #000000;
  }
  body { background: #FFFFFF; color: #000000; font-size: 11pt; line-height: 1.5; }
  .page { max-width: none; padding-inline: 0; }
  .site-header, .site-nav, .skip-link, .footer-legal, .theme-toggle { display: none; }
  main { padding-block: 0; }
  .site-footer { border-block-start: 1px solid #000; font-size: 9pt; }
  .lede { font-size: 20pt; }
  a { text-decoration: none; }

  /* Expand external URLs only. Internal links are relative and expand to
     nothing useful on paper. */
  a[href^="http"]::after,
  a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }

  h1, h2, h3 { break-after: avoid; }
  .commitments > li, .principle, .record, .tombstone, .index-list > li { break-inside: avoid; }
}


/* == 9. Charter provisions =================================================
   Design Charter, Volume V. Each rule below cites the provision it derives
   from. A rule without a citation does not belong in this section.
   ========================================================================== */

/* IV.1 — The wordmark is the name set in capitals of the display face,
   letterspaced, in ink. It is NEVER enclosed in a container, box, badge,
   circle or rule frame: a container is what a mark does when the typography is
   not carrying it, and it sets a ceiling the firm cannot later exceed.
   "& Co." is the sole element in the identity green — the smallest possible
   application of the colour and therefore its most precise (IV.2). */
.wordmark {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  /* Clear space is not less than the cap height of the name on all sides. */
  padding: 0.72em 0;
  margin-block-end: var(--space-sm);
}
.wordmark-suffix {
  color: var(--green);
  text-transform: none;
  letter-spacing: 0.02em;
}
.wordmark:hover { color: var(--ink); }
.wordmark:hover .wordmark-suffix { color: var(--green); }

/* IV.1 — below the minimum reproduction width the name is set without
   letterspacing rather than allowed to break. */
@media (max-width: 26rem) {
  .wordmark { letter-spacing: 0.04em; font-size: 1rem; }
}

/* IV.3 — the utility grotesque carries labels, tabular data, figures and
   metadata, and nothing else. Argument is always the superfamily. */
.section-label,
.note,
.record-date, .record-label, .record-note,
.tombstone, .index-item-date,
.site-nav, .section-bar, .subnav, .site-footer,
.rail, caption, th {
  font-family: var(--font-utility);
}
.record-figure, .tombstone-year, td, th {
  font-variant-numeric: tabular-nums lining-nums;
}

/* IV.4 — the document grid is asymmetric: a narrow rail carrying position and
   section navigation, and a wide column carrying argument at the fixed
   measure. This is the structure of a legal instrument, which is the artifact
   vocabulary the firm actually works in. */
.layout {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--space-lg) var(--space-block);
  align-items: start;
}
.rail {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-secondary);
  padding-block-start: var(--space-section);
  position: sticky;
  top: var(--space-lg);
}
.rail-position { display: block; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.rail-position + .rail-nav { margin-block-start: var(--space-md); }
.rail-nav { list-style: none; max-width: none; }
.rail-nav li { max-width: none; margin-block-start: var(--space-xs); }
.rail-nav a { color: var(--ink-secondary); text-decoration: none; }
.rail-nav a:hover { color: var(--green); }
.rail-nav a[aria-current="page"] {
  color: var(--ink);
  border-inline-start: 2px solid var(--green);
  padding-inline-start: var(--space-xs);
  margin-inline-start: calc((var(--space-xs) + 2px) * -1);
}

/* VII — full function at 320px. The rail is a reading aid, not the argument;
   below the breakpoint it precedes the text rather than flanking it. */
@media (max-width: 60rem) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: static;
    padding-block: var(--space-lg) 0;
    border-block-end: var(--hairline);
    padding-block-end: var(--space-md);
  }
  .rail-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
  .rail-nav li { margin-block-start: 0; }
}

/* IV.4 — a section boundary is marked by a rule bearing the firm's mark at the
   left margin. The mark is the identity green at hairline weight; it is not
   permitted on surfaces where it does no work (Principle 1). */
.stack-section {
  border-block-start: var(--hairline);
  padding-block-start: var(--space-lg);
  position: relative;
}
.stack-section::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 2.5rem;
  border-block-start: 1px solid var(--green);
}

/* IV.7 — tables carry hairline rules and no fill. Zebra striping is refused;
   it is a substitute for the correct row height. The caption sits ABOVE the
   table: a reader must know what he is looking at before he looks. */
table { width: 100%; font-size: var(--t-small); }
caption {
  caption-side: top;
  text-align: left;
  color: var(--ink-secondary);
  font-size: var(--t-small);
  padding-block-end: var(--space-sm);
  border-block-end: var(--hairline);
  margin-block-end: var(--space-sm);
}
th, td { text-align: left; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-block-end: var(--hairline); }
th { font-weight: 400; color: var(--ink-secondary); letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: 0.75rem; }

/* IV.2 — the brass accent, at hairline weight and small sizes only, and only
   where it distinguishes a class of information the reader must not confuse
   with another. Here: an unresolved fact, which is not yet a firm statement. */
.placeholder {
  color: var(--ink-secondary);
  border-block-end: 1px dotted var(--brass);
}

/* IV.5 — ONE orchestrated sequence on first load, and nothing else. No
   scroll-triggered reveal, no parallax, no counter, no carousel, no ambient
   movement. The page settles once, on arrival, and is then still.
   Principle 5: the reader is anxious and will not say so; nothing may move
   that he did not ask to move. */
@keyframes settle {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.site-header, .layout, .site-footer {
  animation: settle 420ms ease-out both;
}
.layout      { animation-delay: 90ms; }
.site-footer { animation-delay: 180ms; }

/* VII — reduced-motion is honoured completely rather than partially. */
@media (prefers-reduced-motion: reduce) {
  .site-header, .layout, .site-footer { animation: none; }
  *, *::before, *::after { transition: none !important; }
}

/* V — corner radii above zero are refused permanently. Stated as a rule so a
   future addition inherits it rather than reintroducing them. */
* { border-radius: 0; }


/* == 10. Print, revisited ==================================================
   Part VII: "Print output that reproduces the document without loss."

   The original print block sits above the Charter section and therefore never
   saw the asymmetric grid, the rail, or the load sequence. This block comes
   last so it does.

   The load sequence is the dangerous one. `animation: settle ... both` holds
   the from-state, which is opacity 0. A print renderer that applies the
   animation but never runs it prints a blank page — the document lost
   entirely, in the one medium the Charter treats as the test of whether a
   surface is a structure or an effect (Part VI, test two).
   ========================================================================== */

@media print {
  /* Nothing may be hidden by a sequence that will never play. */
  .site-header, .layout, .site-footer {
    animation: none !important;
    opacity: 1 !important;
  }

  /* IV.4 — the rail carries position and navigation. Position is meaningful on
     paper; navigation is not, because paper has no links to follow. */
  .layout { display: block; }
  .rail {
    position: static;
    padding: 0;
    border: 0;
    margin-block-end: var(--space-md);
  }
  .rail-nav { display: none; }
  .rail-position { color: #000; }

  /* The wordmark prints as the name. Ink is ink on paper. */
  .wordmark, .wordmark-suffix { color: #000; }

  /* The section mark is a hairline in green on screen; on paper it is a rule. */
  .stack-section::before { border-block-start-color: #000; }
}