/* ============================================================
   TALBOT WEST DESIGN TOKENS: V5.2
   Supersedes V5.1, V5, and V4.6. Same firm, same brand.
   Source of truth: Talbot West: Brand Standards V5.2.
   ============================================================
   THESIS: reject the generative-design default.
   The lowest-effort output of a generative tool is cream paper,
   a literary serif, a muted earth accent, wide margins. The system
   differs deliberately on three variables:
       • ground             → COOL  (slate working surface is the field)
       • accent              → CYAN  (the signature accent; no warm paper)
       • signal color        → TWO hues, each encoding one meaning

   V5.2 removes the warm register entirely. There is no bone, no
   cream, no warm paper anywhere in the active system. The palette
   is cool monochrome (slate-mist ground, cool graphite + ink dark
   register, cool off-white on dark) plus the two role signals, with
   CYAN promoted to the signature accent: section numerals, chips,
   keylines, card borders, divider numerals. Orange stays reserved
   strictly for the outcome figure.

   CHANGELOG V4.6 → V5
   ────────────────────────────────────────────────────────────
   • Type: serif removed entirely. Newsreader → Archivo (display,
     grotesk). IBM Plex Sans → Hanken Grotesk (body). IBM Plex Mono
     → Spline Sans Mono (labels). No serif anywhere.
   • Color: warm paper, cool everything else. Bone shifted
     #F2EBDA → #EBE4D5. Neutrals are now cool (slate/graphite/rule).
     Single "Surveyor's Orange" replaced by the TWO-SIGNAL model:
        Diazo Cyan  #0F6E8E → METHOD  (process, structure, how)
        Marking     #D5731A → OUTCOME (the result, the number, what changed)
     Orange hue shifted #C7501A → #D5731A. Forest + copper retired.
   • Leading tightened: body 1.4–1.5, headings 1.0–1.05,
     captions + mono labels 1.3–1.35. (V4.6 body leading was too loose.)
   • Signals combined stay under ~12% of any surface.

   CHANGELOG V5 → V5.1
   ────────────────────────────────────────────────────────────
   • Ground raised. The page ground is the light slate-mist
     #DFE4E0; #CDD4D0 and #C4CCC8 are the secondary and inset
     steps. Bone (#EBE4D5) is retained as a deliberate warm
     accent surface, not the field.
   • Cool ramp added: --tw-cool / -2 / -3 (light working grounds)
     and --tw-graphite / -2 / -3 (the dark register, cooler and
     lighter than ink). --tw-method-lt for method marks on dark.
   • Semantic surfaces repointed: --tw-bg and --tw-bg-inset now
     resolve to cool; --tw-surface-paper carries bone for accents;
     --tw-bg-graphite carries the graphite panel.
   • Type, signals, leading, and floors are unchanged from V5.

   CHANGELOG V5.1 → V5.2
   ────────────────────────────────────────────────────────────
   • Warm register removed. Bone / cream retired from the active
     palette entirely. On-dark light is now a cool off-white
     (--tw-fog #E8EBE8); the light elevated "paper" card is a cool
     white (--tw-paper #F5F7F6). The legacy --tw-bone* names now
     alias these cool values so any remaining reference renders cool.
   • Cyan promoted to the signature accent. --tw-method-lt
     brightened #7FD0E6 → #4FB8DB so cyan reads on dark grounds.
     Cyan carries section numerals, chip fills, keylines, card
     top-borders, divider numerals. Orange stays outcome-only.
   • Ground, graphite, ink, type, floors unchanged from V5.1.

   SIZE FLOORS (unchanged intent):
       Slide deck (1920×1080):  18px minimum
       Web / UI:                14px minimum
       Mono caps labels:        14px minimum
   ------------------------------------------------------------ */

/* ---------- WEB FONTS: LOCAL, V5 ----------
   Three faces, each carrying a specific load. No serif.
   - Archivo         → display / headlines / thesis (grotesk, tracks tight)
   - Hanken Grotesk  → body / tables / descriptions (humanist grotesk)
   - Spline Sans Mono→ labels / kickers / title blocks (mono, opened up)

   Free faces are the listed defaults; the licensed targets are
   ABC Diatype (display) and Berkeley Mono (mono) once type is
   commissioned. Files live in /fonts/ as variable woff2 subsets
   (latin + latin-ext); one file spans the full weight range. */

/* Archivo: variable grotesk, wght 400..900 */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts-bundle/3b9abab8-fa7d-4b7a-9766-d2b344f48ef6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts-bundle/bee34f16-66e2-48de-89a9-4118e0edc194.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hanken Grotesk: variable humanist grotesk, wght 400..700, roman + italic */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts-bundle/30db4fb5-5628-4c2a-8ddb-901ed4bb6f3f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts-bundle/cc077b15-9db4-40b7-8b05-54aa41c66a9a.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts-bundle/a030c97e-e978-4073-b4f0-9574af2b2f5f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts-bundle/e2e8fa79-3aa0-48ac-a468-57bb48e0a287.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Spline Sans Mono: variable mono, wght 400..700 */
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts-bundle/1207ecb6-abe3-45ee-9763-5a315d4984ee.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts-bundle/fb84c8b8-af00-486c-8c88-de28144d83cd.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ============== COLOR: CORE PALETTE (V5.2) ==============
     Cool monochrome ground + dark register; cyan is the signature
     accent; two signals encode meaning. No warm paper anywhere. */

  /* Cool working ground: the everyday page/plate surface.
     Ground is the light slate-mist; deeper steps carry insets/fields. */
  --tw-cool:           #DFE4E0;  /* slate-mist: the working ground */
  --tw-cool-2:         #CDD4D0;  /* cool slate: secondary ground / soft inset */
  --tw-cool-3:         #C4CCC8;  /* deeper cool field / inset */

  /* Cool graphite: the dark register, cooler and lighter than ink. */
  --tw-graphite:       #39433F;  /* graphite panel / card */
  --tw-graphite-2:     #2C3532;  /* deeper graphite */
  --tw-graphite-3:     #232A28;  /* deepest cool: dividers */

  /* Cool light: replaces the retired warm bone. On-dark text/elements
     and the light elevated "paper" card are now COOL, never cream. */
  --tw-fog:            #E8EBE8;  /* cool off-white: primary light on dark */
  --tw-fog-2:          #B7C0BC;  /* cool muted light: secondary text on dark */
  --tw-paper:          #F5F7F6;  /* cool white: light elevated / paper card */

  /* Retired warm register. Bone/cream removed from the active system;
     these names alias the cool values so stray references render cool.
     --tw-bone-warm kept for archival reference only, do not use. */
  --tw-bone:           var(--tw-fog);    /* retired: aliases cool off-white */
  --tw-bone-2:         var(--tw-fog-2);  /* retired: aliases cool muted light */
  --tw-bone-3:         var(--tw-fog);    /* retired: aliases cool off-white */
  --tw-soft:           var(--tw-cool-2); /* retired: aliases cool field */
  --tw-bone-warm:      #EBE4D5;          /* archival only: the retired warm bone */

  --tw-ink:            #1A1814;  /* primary text, primary dark surface */
  --tw-ink-2:          #23282A;  /* body text: cool, slightly softer than ink */
  --tw-slate:          #5E6A6D;  /* cool neutral: captions, meta, secondary text */
  --tw-ink-faint:      #97A0A0;  /* tertiary text (cool) */
  --tw-rule:           #B4BEBC;  /* cool hairlines / dividers */
  --tw-rule-soft:      #CBD1CD;  /* secondary dividers, field outlines */

  /* ============== SIGNALS: TWO HUES, ROLE-ENCODED ==============
     Each color carries ONE meaning. Never decorative. Keep the two
     signals combined under ~12% of any surface. */
  --tw-method:         #0F6E8E;  /* Diazo Cyan: METHOD + signature accent: process, structure, how */
  --tw-outcome:        #D5731A;  /* Marking: OUTCOME: the result, the number, what changed */
  --tw-method-lt:      #4FB8DB;  /* brighter cyan for dark grounds (graphite / ink) */

  /* Faint role tints: panels, thesis blocks (hairline + tint = elevation) */
  --tw-tint-method:    rgba(15, 110, 142, .06);
  --tw-tint-method-2:  rgba(15, 110, 142, .12);
  --tw-tint-outcome:   rgba(213, 115, 26, .06);
  --tw-tint-outcome-2: rgba(213, 115, 26, .12);
  --tw-tint-ink:       rgba(26, 24, 20, .03);
  --tw-tint-cool:      rgba(44, 53, 50, .05);   /* faint graphite tint on cool ground */

  /* ============== SEMANTIC COLORS ============== */
  --tw-bg:             var(--tw-cool);        /* page ground: slate-mist working surface (V5.2) */
  --tw-bg-2:           var(--tw-cool-2);      /* secondary cool ground / soft inset */
  --tw-bg-elevated:    rgba(255,255,255,.34); /* cards, panels: hairline + faint cool lift */
  --tw-bg-inset:       var(--tw-cool-3);      /* inset blocks: deeper cool field */
  --tw-surface-paper:  var(--tw-paper);      /* cool white elevated / paper card (no warm) */
  --tw-bg-graphite:    var(--tw-graphite-2);  /* cool graphite panel: the dark register */
  --tw-bg-dark:        var(--tw-ink);         /* darkest: ink panels (footer, terminal) */
  --tw-bg-dark-text:   var(--tw-fog);         /* cool off-white text on dark surfaces */

  --tw-fg-1:           var(--tw-ink);         /* primary text */
  --tw-fg-2:           var(--tw-ink-2);       /* body text */
  --tw-fg-3:           var(--tw-slate);       /* captions, secondary */
  --tw-fg-faint:       var(--tw-ink-faint);   /* tertiary, meta */
  --tw-fg-on-dark:     var(--tw-fog);         /* cool off-white text on ink */

  --tw-border:         var(--tw-ink);         /* 1pt solid borders */
  --tw-border-rule:    var(--tw-rule);        /* secondary divisions */
  --tw-border-dashed:  var(--tw-rule);        /* dashed clearspace marks */

  /* ============== TYPE: FAMILIES (V5, no serif) ============== */
  --tw-font-display:   "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tw-font-body:      "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --tw-font-mono:      "Spline Sans Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* ============== TYPE: TRACKING ============== */
  --tw-tracking-display:  -0.02em;  /* display tracks tight */
  --tw-tracking-body:      0;
  --tw-tracking-mono:      0.1em;   /* mono is uppercase, opened up */
  --tw-tracking-mono-wide: 0.12em;

  /* ============== TYPE: SIZES (print + screen) ==============
     HARD FLOORS: Web/UI 14px · Slides 18px · Mono caps 14px.
     If a label can't earn its space at the floor, remove the label. */
  --tw-fs-display-xl:  clamp(40px, 6.5vw, 84px);  /* @kind font */
  --tw-fs-display:     clamp(32px, 4.6vw, 56px);  /* @kind font */
  --tw-fs-h2:          clamp(26px, 3.0vw, 40px);  /* @kind font */
  --tw-fs-h3:          22px;                      /* card / module H3 (display) */
  --tw-fs-dek:         18px;                      /* italic deck under H2 */
  --tw-fs-lead:        17px;                      /* lead paragraph */
  --tw-fs-body:        15px;                      /* body copy */
  --tw-fs-body-tight:  14px;                      /* dense body: web floor */
  --tw-fs-mono:        14px;                      /* labels, kickers, status: floor */
  --tw-fs-mono-sm:     14px;                      /* deprecated: use --tw-fs-mono */

  /* ============== SLIDE-SPECIFIC SCALE (1920×1080) ==============
     The web scale is too small for projection. */
  --tw-slide-fs-min:        18px;   /* absolute floor on a slide */
  --tw-slide-fs-mono:       20px;   /* mono labels, foot, masthead */
  --tw-slide-fs-mono-lg:    22px;   /* kickers, section labels */
  --tw-slide-fs-caption:    22px;   /* body captions on slides */
  --tw-slide-fs-body:       24px;   /* body paragraphs on slides */
  --tw-slide-fs-dek:        32px;   /* italic dek */
  --tw-slide-fs-h3:         40px;   /* card titles */
  --tw-slide-fs-h2:         72px;   /* plate titles */
  --tw-slide-fs-display:    104px;  /* cover display */

  /* ============== TYPE: LINE HEIGHTS (V5, tightened) ==============
     Body 1.4–1.5 · Headings 1.0–1.05 · Captions + mono 1.3–1.35.
     Do not exceed these values. */
  --tw-lh-display:     1.0;   /* @kind font */
  --tw-lh-h2:          1.04;  /* @kind font */
  --tw-lh-h3:          1.05;  /* @kind font */
  --tw-lh-dek:         1.32;  /* @kind font */
  --tw-lh-body:        1.45;  /* @kind font */
  --tw-lh-caption:     1.32;  /* @kind font */
  --tw-lh-mono:        1.32;  /* @kind font */

  /* ============== SPACING (8pt soft grid) ============== */
  --tw-space-1:  4px;
  --tw-space-2:  8px;
  --tw-space-3:  12px;
  --tw-space-4:  16px;
  --tw-space-5:  20px;
  --tw-space-6:  24px;
  --tw-space-7:  32px;
  --tw-space-8:  40px;
  --tw-space-9:  56px;
  --tw-space-10: 72px;
  --tw-space-11: 96px;

  /* Page geometry (web) */
  --tw-page-margin:    clamp(20px, 4vw, 56px);
  --tw-page-max:       1280px;

  /* Optional faint drafting grid (plates / covers / diagrams only) */
  --tw-grid-size:      24px;
  --tw-grid-color:     rgba(94, 106, 109, .05);

  /* ============== BORDERS, RULES, RADII ============== */
  --tw-border-w:       1px;
  --tw-border-w-bold:  1.5px;       /* masthead bottom on plates */
  --tw-rule-double:    3px;         /* subhead double-rule */
  --tw-radius-0:       0;           /* default: Talbot West is square */
  --tw-radius-1:       2px;         /* the rare softening */
  --tw-radius-pill:    999px;       /* tags only, sparingly */

  /* ============== ELEVATION ==============
     Elevation = hairline border + faint tint. NOT a shadow.
     Shadows exist only for transient UI affordance (menus, focus). */
  --tw-shadow-1:   none;
  --tw-shadow-2:   0 2px 8px rgba(26, 24, 20, .06);
  --tw-shadow-3:   0 8px 24px rgba(26, 24, 20, .08);
  --tw-shadow-inset: inset 0 0 0 1px var(--tw-border);

  /* ============== MOTION ==============
     Restrained: no bounce, no overshoot. Brief, eased, intentional.
     Prefer opacity + small translation over scale. */
  --tw-ease:         cubic-bezier(.2, .6, .2, 1); /* @kind other */
  --tw-ease-in:      cubic-bezier(.4, .0, 1, 1); /* @kind other */
  --tw-ease-out:     cubic-bezier(.0, .0, .2, 1); /* @kind other */
  --tw-dur-fast:     120ms; /* @kind other */
  --tw-dur-base:     200ms; /* @kind other */
  --tw-dur-slow:     320ms; /* @kind other */

  /* ============== LEGACY ALIASES (V4.6 → V5) ==============
     Kept only so surfaces not yet regenerated still render in V5
     colors. New work must use the canonical tokens above. These map
     retired names to their nearest V5 role; they do NOT restore the
     old palette. Retire on next regeneration.
        --tw-orange  → outcome (hue shifted)
        --tw-copper  → slate   (retired; quiet neutral)
        --tw-forest  → method  (retired; deep counterweight → method)
        --tw-ash     → slate */
  --tw-orange:         var(--tw-outcome);
  --tw-copper:         var(--tw-slate);
  --tw-forest:         var(--tw-method);
  --tw-ash:            var(--tw-slate);
  --tw-accent:         var(--tw-method);   /* links / cross-refs = navigation = method */
  --tw-accent-quiet:   var(--tw-slate);
  --tw-accent-deep:    var(--tw-method);
  --tw-tint-orange:    var(--tw-tint-outcome);
  --tw-tint-orange-2:  var(--tw-tint-outcome-2);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Drop this file into a page and basic typography follows.
   ============================================================ */

html, body {
  background: var(--tw-bg);
  color: var(--tw-fg-2);
  font-family: var(--tw-font-body);
  font-size: var(--tw-fs-body);
  line-height: var(--tw-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--tw-font-display);
  font-weight: 600;
  color: var(--tw-fg-1);
  letter-spacing: var(--tw-tracking-display);
  margin: 0;
  text-wrap: pretty;
}

h1 { font-size: var(--tw-fs-display);    line-height: var(--tw-lh-display); }
h2 { font-size: var(--tw-fs-h2);         line-height: var(--tw-lh-h2); }
h3 { font-size: var(--tw-fs-h3);         line-height: var(--tw-lh-h3); }
h4 { font-size: 18px;                    line-height: 1.1; }
h5 { font-size: 16px;                    line-height: 1.15; }

p {
  margin: 0;
  font-size: var(--tw-fs-body);
  line-height: var(--tw-lh-body);
  color: var(--tw-fg-2);
}

/* Links = cross-references = navigation = METHOD (cyan). */
a {
  color: var(--tw-method);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--tw-dur-fast) var(--tw-ease),
              border-color var(--tw-dur-fast) var(--tw-ease);
}
a:hover { color: var(--tw-ink); }

/* Load-bearing italic emphasis inside a heading. Neutral by default;
   the underline reads as a mark, not a signal-color spend. */
em {
  font-style: italic;
  border-bottom: 1.3px solid var(--tw-rule);
  padding-bottom: 1px;
}

code, kbd, samp, pre, .mono {
  font-family: var(--tw-font-mono);
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: 1px solid var(--tw-rule);
  margin: var(--tw-space-6) 0;
}

/* ============================================================
   NAMED PATTERNS: small, composable, optional
   ============================================================ */

/* Mono labels / kickers: neutral by default. A kicker names territory;
   it is not a signal. Use .tw-kicker--method / --outcome only when the
   label itself is about method or outcome. */
.tw-kicker,
.tw-label,
.tw-mono-caps {
  font-family: var(--tw-font-mono);
  font-size: var(--tw-fs-mono);
  line-height: var(--tw-lh-mono);
  letter-spacing: var(--tw-tracking-mono);
  text-transform: uppercase;
  color: var(--tw-ink);
  font-weight: 500;
}
.tw-kicker--method  { color: var(--tw-method); }
.tw-kicker--outcome { color: var(--tw-outcome); }

.tw-meta {
  font-family: var(--tw-font-mono);
  font-size: var(--tw-fs-mono);
  letter-spacing: var(--tw-tracking-mono);
  text-transform: uppercase;
  color: var(--tw-slate);
}

/* Italic dek: now grotesk italic (no serif). */
.tw-dek {
  font-family: var(--tw-font-body);
  font-style: italic;
  font-size: var(--tw-fs-dek);
  line-height: var(--tw-lh-dek);
  color: var(--tw-fg-2);
}

.tw-lead {
  font-size: var(--tw-fs-lead);
  line-height: 1.5;
  color: var(--tw-fg-2);
}

/* Pull-quote / load-bearing italic phrase inside a heading */
.tw-emphasis {
  font-style: italic;
  border-bottom: 1.3px solid var(--tw-rule);
  padding-bottom: 1px;
}

/* Signal marks: apply the role color deliberately. */
.tw-method  { color: var(--tw-method); }
.tw-outcome { color: var(--tw-outcome); }

/* Hairline divider treatments */
.tw-rule       { border-top: 1px solid var(--tw-rule); }
.tw-rule-ink   { border-top: 1px solid var(--tw-ink); }
.tw-rule-double{ border-top: 3px double var(--tw-ink); }

/* Card / panel surfaces: elevation is hairline + tint, never shadow. */
.tw-card {
  border: 1px solid var(--tw-border);
  background: var(--tw-bg-elevated);
  padding: var(--tw-space-4);
  border-radius: var(--tw-radius-0);
}

.tw-panel-dark {
  background: var(--tw-bg-dark);
  color: var(--tw-fg-on-dark);
  border: 1px solid var(--tw-bg-dark);
}
.tw-panel-dark p { color: var(--tw-bg-dark-text); }

/* Cool graphite panel: the dark register, lighter than ink. */
.tw-panel-graphite {
  background: var(--tw-bg-graphite);
  color: var(--tw-fg-on-dark);
  border: 1px solid var(--tw-bg-graphite);
}
.tw-panel-graphite p { color: var(--tw-bone-2); }
.tw-panel-graphite .tw-method { color: var(--tw-method-lt); }

/* Cool white elevated / paper card (no warm register in V5.2). */
.tw-surface-paper,
.tw-card--paper { background: var(--tw-surface-paper); }

/* Optional faint drafting grid: plates / covers / diagrams only.
   Never behind long-form text or dense tables. */
.tw-grid-bg {
  background-image:
    linear-gradient(var(--tw-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--tw-grid-color) 1px, transparent 1px);
  background-size: var(--tw-grid-size) var(--tw-grid-size);
}

/* Focus ring: operational, uses method (navigation), not outcome */
*:focus-visible {
  outline: 2px solid var(--tw-method);
  outline-offset: 2px;
}

::selection {
  background: var(--tw-method);
  color: var(--tw-bone);
}


/* ============================================================
   TALBOT WEST: WEBSITE UI KIT STYLES (V5.2)
   Imports the design tokens and adds website-specific layout.
   ------------------------------------------------------------
   V5.2 ground: the page ground is cool slate. There is no warm
   register: no bone, no cream. Cyan is the signature accent. The
   two signals stay role-locked: METHOD (cyan) on actions /
   navigation / architecture and as the accent, OUTCOME (orange)
   on the load-bearing result number. Combined signal area stays
   under ~12% of any surface.
   ============================================================ */

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--tw-bg);
  color: var(--tw-fg-2);
  font-family: var(--tw-font-body);
}

.tw-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--tw-page-margin);
}

/* ---------- HEADER ---------- */
.tw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--tw-bg);
  border-bottom: 1px solid var(--tw-ink);
}
.tw-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 14px 0;
}
.tw-header-logo { display: flex; align-items: center; }
.tw-header-logo img { height: 26px; width: auto; display: block; }

.tw-nav {
  display: flex;
  gap: 28px;
  justify-content: center;
}
.tw-nav a {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color var(--tw-dur-fast) var(--tw-ease),
              border-color var(--tw-dur-fast) var(--tw-ease);
}
.tw-nav a:hover {
  color: var(--tw-method);
  border-bottom-color: var(--tw-method);
}
.tw-nav a.is-active {
  color: var(--tw-method);
  border-bottom-color: var(--tw-method);
}

.tw-header-subhead {
  border-bottom: 3px double var(--tw-ink);
  padding: 6px 0;
}
.tw-header-subhead .tw-container {
  display: flex;
  justify-content: space-between;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-ink);
  white-space: nowrap;
}

/* ---------- BUTTONS ---------- */
.tw-btn {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid var(--tw-ink);
  background: var(--tw-ink);
  color: var(--tw-bone);
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: filter var(--tw-dur-fast) var(--tw-ease),
              background var(--tw-dur-fast) var(--tw-ease);
}
.tw-btn:hover { filter: brightness(0.92); }
.tw-btn:active { filter: brightness(0.86); }

.tw-btn--ghost {
  background: transparent;
  color: var(--tw-ink);
}
.tw-btn--ghost:hover { background: var(--tw-bg-inset); filter: none; }

/* Accent = the primary action color = METHOD (cyan). */
.tw-btn--accent {
  background: var(--tw-method);
  border-color: var(--tw-method);
  color: var(--tw-bone);
}
.tw-btn--accent:hover { filter: brightness(0.92); }

/* ---------- PLATE ---------- */
.tw-plate {
  padding: 72px 0;
  border-bottom: 1px solid var(--tw-rule);
}
.tw-plate--dark {
  background: var(--tw-ink);
  color: var(--tw-bone);
  border-bottom-color: var(--tw-ink);
}
.tw-plate--dark p { color: var(--tw-bone-2); }

/* Cool graphite plate: the dark register, lighter than ink. */
.tw-plate--graphite {
  background: var(--tw-bg-graphite);
  color: var(--tw-bone);
  border-bottom-color: var(--tw-bg-graphite);
}
.tw-plate--graphite p { color: var(--tw-bone-2); }

.tw-section-mark {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-slate);
}
/* Section numeral + tag are neutral ink; a kicker names territory, it is not a signal. */
.tw-section-mark .n,
.tw-section-mark .tag { color: var(--tw-ink); font-weight: 500; }
/* Role-tinted section tags, opt-in. */
.tw-section-mark .tag.is-method  { color: var(--tw-method); }
.tw-section-mark .tag.is-outcome { color: var(--tw-outcome); }
.tw-section-mark .r {
  border-top: 1px solid var(--tw-rule);
  height: 1px;
}
.tw-plate--dark .tw-section-mark { color: var(--tw-bone-2); }
.tw-plate--dark .tw-section-mark .n,
.tw-plate--dark .tw-section-mark .tag { color: var(--tw-bone); }
.tw-plate--dark .tw-section-mark .r { border-top-color: rgba(235,228,213,0.28); }

/* ---------- HERO ---------- */
.tw-hero { padding: 88px 0 96px; }
.tw-hero-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 56px;
  align-items: start;
}
.tw-hero h1 {
  font-family: var(--tw-font-display);
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--tw-ink);
  margin: 0 0 24px;
  text-wrap: balance;
}
.tw-hero .tw-dek {
  margin-bottom: 32px;
  max-width: 36em;
}
.tw-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.tw-hero-aside {
  border: 1px solid var(--tw-ink);
  background: var(--tw-bg-elevated);
  padding: 0;
}
.tw-aside-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--tw-ink);
  padding: 12px 16px;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-slate);
}
.tw-aside-head .lab { color: var(--tw-ink); font-weight: 500; }
.tw-aside-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  border-bottom: 1px solid var(--tw-rule);
  padding: 12px 16px;
  gap: 10px;
}
.tw-aside-row:last-child { border-bottom: 0; }
.tw-aside-row b {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-ink);
  font-weight: 500;
}
.tw-aside-row span {
  font-size: 14px;
  line-height: 1.4;
  color: var(--tw-ink-2);
}

/* ---------- FRAME ---------- */
.tw-frame-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--tw-ink);
  margin-top: 32px;
}
.tw-frame-cell {
  padding: 22px 22px 26px;
  border-right: 1px solid var(--tw-rule);
  position: relative;
  background: var(--tw-bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
}
.tw-frame-cell:last-child { border-right: 0; }
/* Step labels describe METHOD (the sequence of how it is built). */
.tw-frame-cell .step {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-method);
}
.tw-frame-cell h3 {
  font-family: var(--tw-font-display);
  font-size: 26px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--tw-ink);
  margin: 0;
  font-weight: 600;
}
.tw-frame-cell p {
  font-size: 14px;
  line-height: 1.4;
  color: var(--tw-ink-2);
  margin: 0;
}

/* ---------- SERVICES GRID ---------- */
.tw-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.tw-service {
  border: 1px solid var(--tw-ink);
  background: var(--tw-bg-elevated);
  padding: 20px 22px 22px;
  min-height: 196px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: background var(--tw-dur-base) var(--tw-ease);
  cursor: pointer;
}
.tw-service:hover { background: var(--tw-tint-ink); }
.tw-service .num {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--tw-ink);
  font-weight: 500;
  text-transform: uppercase;
}
.tw-service h3 {
  font-family: var(--tw-font-display);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tw-ink);
  font-weight: 600;
  margin: 0;
}
.tw-service p {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  color: var(--tw-ink-2);
}
/* "Read scope →" is a navigation affordance = METHOD. */
.tw-service .arrow {
  margin-top: auto;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-method);
}

/* ---------- CHAI PANEL (dark, architecture = METHOD) ---------- */
.tw-chai-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
.tw-chai-grid h2 {
  font-family: var(--tw-font-display);
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.02;
  color: var(--tw-bone);
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 20px;
}
.tw-chai-grid .tw-dek { color: var(--tw-bone-2); max-width: 32em; }

.tw-hive {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(235,228,213,0.18);
  border: 1px solid rgba(235,228,213,0.28);
  padding: 1px;
}
.tw-hive-cell {
  background: var(--tw-ink);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 100px;
}
.tw-hive-cell.is-on {
  background: rgba(15,110,142,0.20);
  border-left: 2px solid var(--tw-method);
}
.tw-hive-cell .h {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-method);
}
.tw-hive-cell .l {
  font-family: var(--tw-font-display);
  font-size: 15px;
  line-height: 1.16;
  font-weight: 600;
  color: var(--tw-bone);
}

/* ---------- CASE STUDY ---------- */
.tw-case {
  border: 1px solid var(--tw-ink);
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: stretch;
  background: var(--tw-bg-elevated);
  margin-top: 28px;
}
/* The load-bearing result number = OUTCOME (orange). This is the one place
   marking is spent on this plate. */
.tw-case .num {
  border-right: 1px solid var(--tw-ink);
  padding: 24px 26px;
  display: flex;
  align-items: center;
  font-family: var(--tw-font-display);
  font-size: 52px;
  line-height: 0.96;
  font-weight: 700;
  color: var(--tw-outcome);
  letter-spacing: -0.02em;
}
.tw-case .body { padding: 22px 26px; }
.tw-case h3 {
  font-family: var(--tw-font-display);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tw-ink);
  font-weight: 600;
  margin: 0 0 8px;
}
.tw-case p { font-size: 14.5px; line-height: 1.45; color: var(--tw-ink-2); margin: 0; }
.tw-case .read {
  border-left: 1px solid var(--tw-rule);
  padding: 22px 24px;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-method);
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* ---------- INSIGHTS LIST ---------- */
.tw-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--tw-ink);
  margin-top: 32px;
}
.tw-insight {
  padding: 22px 24px 28px;
  border-right: 1px solid var(--tw-rule);
  border-bottom: 1px solid var(--tw-rule);
  background: var(--tw-bg-elevated);
  cursor: pointer;
  transition: background var(--tw-dur-base) var(--tw-ease);
}
.tw-insight:last-child { border-right: 0; }
.tw-insight:hover { background: var(--tw-tint-ink); }
.tw-insight .kicker {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-ink);
  font-weight: 500;
  margin-bottom: 12px;
}
.tw-insight h3 {
  font-family: var(--tw-font-display);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tw-ink);
  font-weight: 600;
  margin: 0 0 10px;
  text-wrap: pretty;
}
/* Dek is now grotesk italic (no serif). */
.tw-insight p {
  font-family: var(--tw-font-body);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--tw-ink-2);
  margin: 0;
}

/* ---------- FLOOR BLOCK ---------- */
.tw-floor {
  margin-top: 36px;
  border: 1px solid var(--tw-ink);
  background: var(--tw-tint-ink);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  align-items: center;
}
.tw-floor b {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-ink);
  font-weight: 500;
}
/* Grotesk italic close (no serif). */
.tw-floor p {
  font-family: var(--tw-font-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.32;
  color: var(--tw-ink-2);
  margin: 0;
}

/* ---------- FOOTER ---------- */
.tw-footer {
  background: var(--tw-ink);
  color: var(--tw-bone);
  padding: 56px 0 32px;
}
.tw-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  border-bottom: 1px solid rgba(235,228,213,0.20);
  padding-bottom: 32px;
}
.tw-footer-logo img { height: 32px; width: auto; }
.tw-footer-tag {
  font-family: var(--tw-font-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.35;
  color: var(--tw-bone-2);
  margin-top: 16px;
  max-width: 22em;
}
.tw-footer-col h4 {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-bone);
  margin: 0 0 12px;
  font-weight: 500;
}
.tw-footer-col a {
  display: block;
  font-family: var(--tw-font-body);
  font-size: 14px;
  color: var(--tw-bone-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  transition: color var(--tw-dur-fast) var(--tw-ease);
}
.tw-footer-col a:hover { color: var(--tw-method); }
.tw-footer-bot {
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-ink-faint);
}
.tw-footer-bot b { color: var(--tw-bone-2); font-weight: 500; }

/* ---------- INTERACTIVE STATES ---------- */
.tw-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--tw-ink);
  margin-bottom: 28px;
}
.tw-tab {
  padding: 12px 22px;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-slate);
  border: 1px solid transparent;
  border-bottom: 0;
  background: transparent;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--tw-dur-fast) var(--tw-ease);
}
.tw-tab:hover { color: var(--tw-ink); }
.tw-tab.is-active {
  color: var(--tw-ink);
  border-color: var(--tw-ink);
  background: var(--tw-bg);
  border-bottom: 1px solid var(--tw-bg);
}

/* ---------- CONTACT MODAL ---------- */
.tw-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,24,20,0.62);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  animation: tw-fade 200ms var(--tw-ease) both;
}
.tw-modal {
  width: min(560px, 92vw);
  background: var(--tw-bg-2);
  border: 1px solid var(--tw-ink);
  box-shadow: var(--tw-shadow-3);
}
.tw-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px double var(--tw-ink);
  padding: 14px 22px;
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-ink);
}
.tw-modal-head .x {
  background: none; border: 0; cursor: pointer;
  font-family: var(--tw-font-mono); font-size: 18px; color: var(--tw-method);
  padding: 0; line-height: 1;
}
.tw-modal-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.tw-field { display: flex; flex-direction: column; gap: 6px; }
.tw-field-label {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tw-ink);
  font-weight: 500;
}
.tw-field input, .tw-field select, .tw-field textarea {
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--tw-ink);
  padding: 9px 12px;
  font-family: var(--tw-font-body);
  font-size: 14px;
  color: var(--tw-ink);
  outline: 0;
  border-radius: 0;
  width: 100%;
}
/* Focus = navigation affordance = METHOD. */
.tw-field input:focus, .tw-field select:focus, .tw-field textarea:focus {
  border-color: var(--tw-method);
}
.tw-field textarea { resize: vertical; min-height: 100px; font-family: var(--tw-font-body); }
.tw-modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--tw-rule);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.tw-sent {
  text-align: center;
  padding: 36px 22px;
  font-family: var(--tw-font-body);
  font-size: 22px;
  line-height: 1.2;
  color: var(--tw-ink);
  font-style: italic;
}

@keyframes tw-fade { from { opacity: 0 } to { opacity: 1 } }

/* ============================================================
   RESPONSIVE (V5.2 homepage)
   Fixed 1280 grids collapse gracefully on narrow viewports.
   ============================================================ */
/* Keep the logo off the very left edge on wide screens.
   .tw-header-inner's `padding: 14px 0` was zeroing the container's
   horizontal page-margin, pinning the logo to the edge. Restore it. */
.tw-header .tw-header-inner {
  padding-left: var(--tw-page-margin);
  padding-right: var(--tw-page-margin);
}

@media (max-width: 1024px) {
  .tw-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .tw-frame-row { grid-template-columns: 1fr 1fr; }
  .tw-frame-cell:nth-child(2) { border-right: 0; }
  .tw-frame-cell:nth-child(1), .tw-frame-cell:nth-child(2) { border-bottom: 1px solid var(--tw-rule); }
  .tw-services, .tw-insights { grid-template-columns: 1fr 1fr; }
  .tw-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .rgrid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 640px) {
  .tw-plate { padding: 48px 0; }
  .tw-hero { padding: 56px 0 64px; }
  .tw-header-inner { grid-template-columns: 1fr auto; gap: 14px; }
  .tw-nav { display: none; }
  .tw-header-subhead .tw-container { font-size: 12px; letter-spacing: .08em; }
  .tw-frame-row { grid-template-columns: 1fr; }
  .tw-frame-cell { border-right: 0; border-bottom: 1px solid var(--tw-rule); min-height: 0; }
  .tw-frame-cell:last-child { border-bottom: 0; }
  .tw-services, .tw-insights { grid-template-columns: 1fr; }
  .tw-footer-grid { grid-template-columns: 1fr; }
  .rgrid { grid-template-columns: 1fr !important; }
  .tw-case { grid-template-columns: 1fr; }
  .tw-case .num { border-right: 0; border-bottom: 1px solid var(--tw-ink); padding: 18px 22px; }
  .tw-case .read { border-left: 0; border-top: 1px solid var(--tw-rule); }
}



  html { scroll-behavior: smooth; }
  a { color: var(--tw-method); }
  a:hover { color: var(--tw-method-lt); }
  .tw-btn, .tw-btn:hover { text-decoration: none; }


  .frm-two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.frm-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.frm-acro { display: grid; grid-template-columns: repeat(var(--acro-count, 3), 1fr); border: 1px solid rgba(232,235,232,0.28); margin-top: clamp(40px,6vw,64px); }
.frm-acro-cell { padding: 22px 20px; background: rgba(232,235,232,0.04); border-right: 1px solid rgba(232,235,232,0.16); }
.frm-acro-cell:last-child { border-right: 0; }
.frm-two > *, .frm-compare > *, .frm-acro-cell { min-width: 0; max-width: 100%; }
@media (max-width: 1024px) { .frm-two { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 640px) { .frm-compare { grid-template-columns: 1fr; } .frm-acro { grid-template-columns: 1fr; } .frm-acro-cell { border-right: 0; border-bottom: 1px solid rgba(232,235,232,0.16); } .frm-acro-cell:last-child { border-bottom: 0; } }
/* ===== Mobile responsiveness fix: inline-styled grids lacking breakpoints ===== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .disc-row { grid-template-columns: 1fr 1fr !important; }
  .disc-row .disc-cell:nth-child(2n) { border-right: 0 !important; }
  .disc-row .disc-cell:nth-child(1), .disc-row .disc-cell:nth-child(2) { border-bottom: 1px solid rgba(79,184,219,.35); }
}
@media (max-width: 640px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .disc-row { grid-template-columns: 1fr !important; }
  .disc-row .disc-cell { border-right: 0 !important; border-bottom: 1px solid rgba(79,184,219,.35); min-height: 0 !important; }
  .disc-row .disc-cell:last-child { border-bottom: 0; }
}
/* ---------- TEAM / EXPERTS ---------- */
.tw-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--tw-cool);
}
.tw-person {
  display: flex;
  flex-direction: column;
  background: var(--tw-ink);
  border-top: 3px solid var(--tw-method);
  text-decoration: none;
  color: inherit;
  transition: background .2s cubic-bezier(.2,.6,.2,1);
}
.tw-person:hover { background: #23201b; }
.tw-person:hover .tw-person-go { color: var(--tw-method-lt); }
.tw-person-portrait { aspect-ratio: 4 / 5; overflow: hidden; }
.tw-person-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.02);
}
.tw-person-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px 26px;
  flex-grow: 1;
}
.tw-person-role {
  font-family: var(--tw-font-mono);
  font-size: var(--tw-fs-mono);
  letter-spacing: var(--tw-tracking-mono);
  text-transform: uppercase;
  color: var(--tw-method-lt);
  font-weight: 600;
}
.tw-person-name {
  font-family: var(--tw-font-display);
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--tw-fog);
  font-weight: 600;
  margin: 0;
}
.tw-person-blurb {
  font-family: var(--tw-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tw-fog-2);
  margin: 0;
}
.tw-person-go {
  font-family: var(--tw-font-mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-method-lt);
  margin-top: auto;
  padding-top: 14px;
}

.tw-bio-crumbs {
  font-family: var(--tw-font-mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-fog-2);
  margin-bottom: 40px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tw-bio-crumbs a { color: var(--tw-fog-2); text-decoration: none; }
.tw-bio-crumbs a:hover { color: var(--tw-method-lt); }
.tw-bio-crumbs [aria-current="page"] { color: var(--tw-fog); }

.tw-bio-head {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
}
.tw-bio-portrait { aspect-ratio: 4 / 5; overflow: hidden; border-top: 3px solid var(--tw-method); }
.tw-bio-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.02);
}

.tw-bio-body { max-width: 40em; }
.tw-bio-body p {
  font-family: var(--tw-font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--tw-ink-2);
  margin: 0 0 1.25rem;
}
.tw-bio-body a { color: var(--tw-method); text-decoration: underline; text-underline-offset: .15em; }

@media (max-width: 1024px) {
  .tw-team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tw-team-grid { grid-template-columns: 1fr; }
  .tw-bio-head { grid-template-columns: 1fr; gap: 32px; }
  .tw-bio-portrait { max-width: 260px; }
}


/* ============================================================
   EXPERT PAGE  .tw-xp-*   (V5.2 template)
   Ink hero, elastic fact rail, pull plate, graphite floor.
   Supersedes the .tw-bio-* rules; those are now unused.
   ============================================================ */

.tw-xp {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--tw-cool);
  border-left: 1px solid var(--tw-ink);
  border-right: 1px solid var(--tw-ink);
}

/* Breadcrumb strip */
.tw-xp-crumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px 32px;
  border-bottom: 1px solid var(--tw-rule);
  font-family: var(--tw-font-mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-slate);
}
.tw-xp-crumbs a { color: var(--tw-slate); text-decoration: none; }
.tw-xp-crumbs a:hover { color: var(--tw-method); }
.tw-xp-crumbs [aria-current="page"] { color: var(--tw-ink); }

/* Hero */
.tw-xp-hero {
  display: grid;
  grid-template-columns: 420px 1fr;
  background: var(--tw-ink);
  color: var(--tw-fog);
}
.tw-xp-portrait {
  border-top: 4px solid var(--tw-method-lt);
  background: rgba(232, 235, 232, 0.06);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.tw-xp-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
}
.tw-xp-headline {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px;
}
.tw-xp-role {
  margin: 0;
  font-family: var(--tw-font-mono);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-method-lt);
}
.tw-xp-name {
  margin: 16px 0 0 -3px;
  font-family: var(--tw-font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 88px);
  line-height: .94;
  letter-spacing: -.03em;
  color: var(--tw-fog);
}
.tw-xp-dek {
  margin: 26px 0 0;
  font-size: 21px;
  line-height: 1.45;
  max-width: 32em;
  color: var(--tw-fog);
}
.tw-xp-social { margin: 32px 0 0; }
.tw-xp-social a {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-method-lt);
  text-decoration: none;
}
.tw-xp-social a:hover { color: var(--tw-fog); }

/* Body: fact rail + profile */
.tw-xp-body {
  display: grid;
  grid-template-columns: 260px 1fr;
}
.tw-xp-rail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 56px 32px;
  border-right: 1px solid var(--tw-rule);
}
.tw-xp-rail-group + .tw-xp-rail-group {
  padding-top: 24px;
  border-top: 1px solid var(--tw-rule);
}
.tw-xp-rail-label {
  margin: 0;
  font-family: var(--tw-font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tw-slate);
}
.tw-xp-rail-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--tw-ink);
}

.tw-xp-main { padding: 56px 64px; }
.tw-xp-prose {
  max-width: 34em;
  font-size: 19px;
  line-height: 1.5;
  color: var(--tw-ink-2);
}
.tw-xp-prose > :first-child { margin-top: 0; }
.tw-xp-prose p { margin: 0 0 1.15em; }
.tw-xp-prose p:last-child { margin-bottom: 0; }
.tw-xp-prose a { color: var(--tw-method); }

/* Opt-in two-column profile for short bios */
.tw-xp-main[data-cols="2"] .tw-xp-prose {
  max-width: none;
  column-count: 2;
  column-gap: 48px;
}
.tw-xp-main[data-cols="2"] .tw-xp-prose p { break-inside: avoid; }

/* Pull statement plate */
.tw-xp-pull {
  margin: 44px 0 0;
  padding: 34px 38px;
  background: var(--tw-paper);
  border-top: 3px solid var(--tw-method);
  border-right: 1px solid var(--tw-rule);
  border-bottom: 1px solid var(--tw-rule);
  border-left: 1px solid var(--tw-rule);
}
.tw-xp-pull p {
  margin: 0;
  font-family: var(--tw-font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--tw-ink);
}

.tw-xp-back { margin: 40px 0 0; }
.tw-xp-back a {
  font-family: var(--tw-font-mono);
  font-size: 13.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tw-method);
  text-decoration: none;
}
.tw-xp-back a:hover { color: var(--tw-ink); }

/* Floor */
.tw-xp-floor {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  padding: 44px 56px;
  background: var(--tw-bg-graphite);
  color: var(--tw-fog);
}
.tw-xp-floor-head {
  margin: 0;
  font-family: var(--tw-font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.tw-xp-floor-cta {
  padding: 15px 26px;
  background: var(--tw-fog);
  color: var(--tw-ink);
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.tw-xp-floor-cta:hover { background: var(--tw-fog-2); }

@media (max-width: 1024px) {
  .tw-xp-hero { grid-template-columns: 340px 1fr; }
  .tw-xp-headline { padding: 40px; }
  .tw-xp-body { grid-template-columns: 220px 1fr; }
  .tw-xp-main { padding: 44px 40px; }
}

@media (max-width: 860px) {
  .tw-xp { border-left: 0; border-right: 0; }
  .tw-xp-crumbs { padding: 14px 24px; }
  .tw-xp-hero { grid-template-columns: 1fr; }
  .tw-xp-headline { padding: 32px 24px 40px; }
  .tw-xp-body { grid-template-columns: 1fr; }
  .tw-xp-rail {
    padding: 32px 24px;
    border-right: 0;
    border-bottom: 1px solid var(--tw-rule);
  }
  .tw-xp-main { padding: 36px 24px; }
  .tw-xp-main[data-cols="2"] .tw-xp-prose { column-count: 1; }
  .tw-xp-pull { padding: 26px 24px; }
  .tw-xp-floor {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 36px 24px;
  }
  .tw-xp-floor-cta { justify-self: start; }
}

/* ------------------------------------------------------------
   Expert page floor: explicit text colour.
   The floor heading inherited its colour from .tw-xp-floor, so a
   global element-level rule won over the inheritance and painted
   dark ink on graphite. Declare the colour on the element itself.
   ------------------------------------------------------------ */
.tw-xp-floor-head { color: var(--tw-paper); }
.tw-xp-prose p { color: var(--tw-ink-2); }

/* ==========================================================================
   Shared assessment band
   One visual definition used by the experts hub and every person page.
   Every text element declares its own color: this sits on a dark plate and
   a global element-level rule will otherwise win over inheritance.
   ========================================================================== */

.tw-band {
  background: var(--tw-bg-graphite);
  padding: clamp(32px, 4vw, 44px) clamp(24px, 4vw, 48px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.tw-band--hub { margin-top: 56px; }
.tw-band--xp  { margin-top: 72px; }

.tw-band-kicker {
  font-family: var(--tw-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tw-fog-2);
  margin: 0 0 10px;
}

.tw-band-head {
  font-family: var(--tw-font-display);
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--tw-fog);
  margin: 0 0 8px;
}

.tw-band-body {
  font-family: var(--tw-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tw-fog-2);
  margin: 0;
}

.tw-band-cta {
  font-family: var(--tw-font-mono);
  font-size: 13.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tw-ink);
  background: var(--tw-method-lt);
  padding: 16px 26px;
  white-space: nowrap;
  text-decoration: none;
}

@media (max-width: 860px) {
  .tw-band { flex-direction: column; align-items: flex-start; gap: 26px; }
  .tw-band-cta { width: 100%; text-align: center; }
}

/* ============================================================
   TW CAROUSEL  .tw-carousel__*   (V5.2 graphite ledger)
   Generic horizontal rail. Used by src/components/Carousel.astro
   and available to any surface: authored writing, sectors,
   services, podcast episodes, case notes.
   Native scroll-snap rail; arrows and progress are progressive
   enhancement and stay hidden until the script runs.
   ============================================================ */
.tw-carousel {
  background: var(--tw-graphite);
  border: 1px solid var(--tw-ink);
  padding: 44px 0 36px;
  --tw-c-pad: 40px;
  --tw-c-line: rgba(232, 235, 232, .34);
  --tw-c-line-soft: rgba(232, 235, 232, .22);
}
.tw-carousel--ink { background: var(--tw-ink); }

.tw-carousel__title {
  margin: 0 0 26px;
  padding: 0 var(--tw-c-pad);
  font-family: var(--tw-font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tw-fog);
}

.tw-carousel__rail {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--tw-c-line);
  border-bottom: 1px solid var(--tw-c-line);
  scrollbar-width: none;
}
.tw-carousel__rail::-webkit-scrollbar { width: 0; height: 0; }
.tw-carousel__rail:focus-visible { outline: 2px solid var(--tw-method-lt); outline-offset: -2px; }
.tw-carousel__track { display: flex; width: max-content; min-width: 100%; }

.tw-carousel__card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 262px;
  min-height: 268px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px 24px;
  border-right: 1px solid var(--tw-c-line-soft);
  color: var(--tw-fog);
  text-decoration: none;
  transition: background var(--tw-dur-base) var(--tw-ease);
}
.tw-carousel__card:last-child { border-right: 0; }
.tw-carousel__card:hover { background: var(--tw-graphite-2); }
.tw-carousel--ink .tw-carousel__card:hover { background: var(--tw-graphite); }
.tw-carousel__card:focus-visible { outline: 2px solid var(--tw-method-lt); outline-offset: -2px; }

.tw-carousel__num {
  font-family: var(--tw-font-mono);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--tw-method-lt);
}
.tw-carousel__cat,
.tw-carousel__date,
.tw-carousel__all {
  font-family: var(--tw-font-mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.32;
}
.tw-carousel__cat { color: var(--tw-fog-2); }
.tw-carousel__card h3 {
  margin: 0;
  font-family: var(--tw-font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--tw-fog);
  text-wrap: pretty;
}
.tw-carousel__date {
  margin-top: auto;
  padding-top: 18px;
  color: var(--tw-method-lt);
}

.tw-carousel__controls {
  padding: 26px var(--tw-c-pad) 0;
  display: flex;
  align-items: center;
  gap: 20px;
}
.tw-carousel__nav { display: flex; gap: 10px; }
.tw-carousel__nav[hidden], .tw-carousel__progress[hidden] { display: none; }
.tw-carousel__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(232, 235, 232, .4);
  border-radius: 0;
  color: var(--tw-fog);
  font-family: var(--tw-font-mono);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--tw-dur-base) var(--tw-ease), color var(--tw-dur-base) var(--tw-ease);
}
.tw-carousel__btn:hover { background: var(--tw-fog); color: var(--tw-graphite); }
.tw-carousel__btn[disabled] { opacity: .35; cursor: default; }
.tw-carousel__btn[disabled]:hover { background: transparent; color: var(--tw-fog); }

.tw-carousel__progress {
  flex: 1;
  height: 1px;
  background: rgba(232, 235, 232, .26);
  position: relative;
}
.tw-carousel__progress span {
  position: absolute;
  top: -1px;
  left: 0;
  height: 3px;
  width: 8%;
  display: block;
  background: var(--tw-method-lt);
  transition: width var(--tw-dur-fast, 120ms) linear;
}
.tw-carousel__all {
  color: var(--tw-method-lt);
  white-space: nowrap;
  text-decoration: none;
  margin-left: auto;
}
.tw-carousel__all:hover { color: var(--tw-fog); }

/* Expert page placement: the rail sits below the pull statement. */
.tw-xp .tw-carousel { margin: 56px 0 0; }

@media (max-width: 700px) {
  .tw-carousel { --tw-c-pad: 22px; }
  .tw-carousel__card { width: 240px; }
  .tw-carousel__title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-carousel__rail { scroll-behavior: auto; }
  .tw-carousel__card, .tw-carousel__btn { transition: none; }
}

/* ---------- FOOTER: social + podcast (identity-driven) ---------- */
.tw-footer-identity {
  margin-top: 32px;
}
.tw-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.tw-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(232, 235, 232, 0.28);
  color: var(--tw-bone-2, #c8cfc9);
  text-decoration: none;
  transition: color var(--tw-dur-fast, 120ms) var(--tw-ease, ease),
    border-color var(--tw-dur-fast, 120ms) var(--tw-ease, ease);
}
.tw-footer-social-link:hover,
.tw-footer-social-link:focus-visible {
  color: var(--tw-method-lt, #4fb8db);
  border-color: var(--tw-method-lt, #4fb8db);
  outline: none;
}
.tw-footer-social-link svg {
  width: 16px;
  height: 16px;
  display: block;
}
.tw-footer-podcast {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
  gap: 20px 40px;
  align-items: end;
}
.tw-footer-podcast-kicker {
  margin: 0 0 6px;
  font-family: var(--tw-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tw-method-lt, #4fb8db);
}
.tw-footer-podcast-title {
  margin: 0 0 8px;
  font-family: var(--tw-font-display);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--tw-fog, #e8ebe8);
}
.tw-footer-podcast-body {
  margin: 0;
  max-width: 34em;
  font-family: var(--tw-font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tw-bone-2, #c8cfc9);
}
.tw-footer-podcast-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: flex-end;
}
.tw-footer-podcast-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--tw-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tw-fog, #e8ebe8);
  border: 1px solid rgba(232, 235, 232, 0.28);
  padding: 8px 12px;
  transition: color var(--tw-dur-fast, 120ms) var(--tw-ease, ease),
    border-color var(--tw-dur-fast, 120ms) var(--tw-ease, ease);
}
.tw-footer-podcast-link:hover,
.tw-footer-podcast-link:focus-visible {
  color: var(--tw-method-lt, #4fb8db);
  border-color: var(--tw-method-lt, #4fb8db);
  outline: none;
}
@media (max-width: 860px) {
  .tw-footer-podcast {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .tw-footer-podcast-links {
    justify-content: flex-start;
  }
}

/* ------------------------------------------------------------
   Expert page: contain the carousel.
   .tw-xp-main is a grid item, so its default min-width:auto is the
   min-content of the 262px card track (5 cards = 1310px). That floor
   widened the 1fr column past the 1200px shell and spilled the pull
   plate and the rail off the right edge. min-width:0 lets the column
   shrink, which is what activates the rail's own overflow-x:auto.
   ------------------------------------------------------------ */
.tw-xp-main { min-width: 0; }

/* ============================================================
   TW-ARTICLE-FLOOR v1

   Article bodies are exempt from the shared design layer by
   doctrine, and that exemption is correct: aesthetics vary per
   article. Collapse behavior does not. At 375px a two-column
   editorial split has exactly one right answer, so it lives here,
   once, instead of being re-derived in every component.

   Inline style declarations beat any selector on specificity, so
   these overrides are !important by necessity. They are confined
   to the article namespace and to narrow viewports. A component
   that needs a different phone arrangement overrides upward with
   a more specific rule.

   Added 08-01-2026 after two articles shipped with 115 inline grid
   declarations and zero breakpoints between them.
   ============================================================ */
@media (max-width: 640px) {
	.tw-article [style*="grid-template-columns"]:not([data-floor="off"]):not([data-floor="off"] *) {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.tw-article [style*="grid-template-columns: 34px"]:not([data-floor="off"]):not([data-floor="off"] *),
	.tw-article [style*="grid-template-columns: 40px"]:not([data-floor="off"]):not([data-floor="off"] *) {
		grid-template-columns: 34px minmax(0, 1fr) !important;
	}

	.tw-article [data-r="wrap"]:not([data-floor="off"] *),
	.tw-article [data-r="masthead"]:not([data-floor="off"] *) {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.tw-article [data-r="masthead"]:not([data-floor="off"] *) {
		gap: 34px !important;
	}

	.tw-article [data-r="side-dark"]:not([data-floor="off"] *),
	.tw-article [data-r="lead-aside"]:not([data-floor="off"] *),
	.tw-article [data-r="hero-rail"]:not([data-floor="off"] *) {
		border-left: 0 !important;
		padding-left: 0 !important;
	}

	.tw-article [data-r="hero"]:not([data-floor="off"] *) > div:first-child {
		padding-right: 0 !important;
	}

	.tw-article figure:not([data-floor="off"] *),
	.tw-article img:not([data-floor="off"] *),
	.tw-article table:not([data-floor="off"] *) {
		max-width: 100% !important;
	}
}



/* ============================================================
   TW-LAYOUT LIBRARY v1

   Canonical structural primitives for article bodies, per NAI:
   Article Layout Taxonomy (Draft). Nine families collapse the 35
   layout recipes and 31 data-r names observed across five hand-built
   articles. New article components should compose these classes
   instead of hand-writing grid-template-columns and a bespoke phone
   breakpoint per component.

   Each family owns its complete phone behavior. This is deliberate:
   TW-ARTICLE-FLOOR v1 (below, in this same file) is a shape-matching
   safety net for hand-built layout that forgot responsiveness. A
   component built entirely from .tw-layout-* classes declares no
   inline grid-template-columns, so the floor has nothing to match and
   never fires on it. That is correct: the library replaces the need
   for the net rather than depending on it.

   Parameters are passed as CSS custom properties on the element
   carrying the class, e.g. style="--rail-w: 300px". Do not hardcode
   one-off widths into a new modifier class; add a custom property
   instead.

   THREE REFLOW MOMENTS. Standardized 08-02-2026. Every family in
   this block reflows at 460, 640, or 960 and at no other width.
     460 -- collapse a narrow marker or icon gutter.
     640 -- the general collapse to a single column.
     960 -- step a wide multi-column grid to an intermediate count.
   No family may introduce a fourth number. Three families
   previously reflowed at 680, 40px from 640, with no rationale
   recorded and no content characteristic justifying the gap. Two
   adjacent components could therefore reflow at different widths,
   which reads as a stutter rather than a page changing state once.
   CSS cannot use a custom property in a media query condition, so
   these cannot be tokens. They are enforced by being stated here.

   TWO GAP VARIABLES, NOT ONE. Split 08-02-2026. --tw-layout-gap is
   a real gutter between content columns. --tw-layout-divider is a
   hairline the parent background shows through, used by col-4,
   col-5, and stats. One name previously carried both meanings plus
   a third, which made it unsafe to set on any container holding
   mixed families. Every shipped default is numerically unchanged.

   Added 08-02-2026, first consumer: CognitiveHiveAiArticle.astro.
   One genuinely new family was required beyond the nine drafted in
   the taxonomy (tw-layout-col-5), plus two parametrized variants of
   already-drafted families (tw-layout-rail's second rail track, and
   tw-layout-step's horizontal flow modifier). See the scaffold
   Decision Log for the disclosure and the faq shape-mismatch note.
   ============================================================ */

/* 1. tw-layout-col-2 -- equal two-column split.
   Retired synonyms: two, pair, split, row */
.tw-layout-col-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tw-layout-gap, 24px);
}
@media (max-width: 640px) {
	.tw-layout-col-2 { grid-template-columns: 1fr; }
}

/* 2. tw-layout-col-3 -- equal three-column split.
   Retired synonyms: row3, three */
.tw-layout-col-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tw-layout-gap, 24px);
}
@media (max-width: 640px) {
	.tw-layout-col-3 { grid-template-columns: 1fr; }
}

/* 3. tw-layout-col-4 -- equal four-column split, e.g. small card rows.
   Retired synonyms: row4, chips */
.tw-layout-col-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--tw-layout-divider, 1px);
}
@media (max-width: 960px) {
	.tw-layout-col-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
	.tw-layout-col-4 { grid-template-columns: 1fr; }
}

/* 3b. tw-layout-col-5 -- equal five-column split.
   NOT in the drafted taxonomy. Added as the smallest workable
   extension of the col-N pattern rather than a bespoke one-off, first
   needed by a 4-item numbered takeaway grid that read oddly at 4
   without a 5th colophon cell. Flagged for Jacob: fold into col-4 as
   a --cols custom property, or keep as its own class. Either is a
   two-line change once decided. */
.tw-layout-col-5 {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--tw-layout-divider, 1px);
}
@media (max-width: 960px) {
	.tw-layout-col-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.tw-layout-col-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
	.tw-layout-col-5 { grid-template-columns: 1fr; }
}

/* 4. tw-layout-rail -- fixed sidebar rail plus flexible content.
   Retired synonyms: side, side-dark, rail, hero-rail, lead-aside, body

   Two usage modes:
   - Border-edge mode (no data-grid attribute): the bordered vertical
     rule and inset padding used for a masthead's second column. Not a
     grid itself; pairs with tw-layout-masthead or any parent grid.
   - Grid mode (data-grid="1"): rail plus content, two tracks.
   - Grid-both mode (data-grid="both"): rail, content, second rail.
     Parametrized variant added for a three-column source/table row
     (label column, body column, meta column) that the drafted rail
     family did not cover. Same family, one more custom property
     (--rail-w-2), not a new top-level family. */
.tw-layout-rail {
	border-left: 1px solid var(--tw-rule, rgba(232, 235, 232, .28));
	padding-left: var(--rail-gap, 40px);
}
@media (max-width: 640px) {
	.tw-layout-rail { border-left: 0; padding-left: 0; }
}
.tw-layout-rail[data-grid] {
	display: grid;
	border-left: 0;
	padding-left: 0;
	gap: var(--rail-gap, 24px);
}
.tw-layout-rail[data-grid="1"] {
	grid-template-columns: var(--rail-w, 260px) minmax(0, 1fr);
}
.tw-layout-rail[data-grid="both"] {
	grid-template-columns: var(--rail-w, 260px) minmax(0, 1fr) var(--rail-w-2, 200px);
}
@media (max-width: 640px) {
	.tw-layout-rail[data-grid] { grid-template-columns: 1fr; }
}

/* 5. tw-layout-masthead -- asymmetric proportional editorial split.
   Retired synonyms: masthead, hero, hidehead
   Ratio is a parameter: set --split-a / --split-b to change it.
   Default 1.05fr / .95fr matches the ratio already shared by two
   independently generated articles (measured 08-02-2026). */
.tw-layout-masthead {
	display: grid;
	grid-template-columns: minmax(0, var(--split-a, 1.05fr)) minmax(0, var(--split-b, .95fr));
	gap: var(--tw-layout-gap, 72px);
}
@media (max-width: 960px) {
	.tw-layout-masthead { grid-template-columns: 1fr; gap: 40px; }
}

/* 6. tw-layout-step -- fixed marker gutter plus content, single row.
   Retired synonyms: srow, ask, prow, arrow, flow, faq (see note below)
   Marker width is a parameter: set --marker-w (default 34px).

   Note on "faq": the taxonomy draft listed faq under this family, but
   the faq grid actually shipped in this article is an equal two-
   column dt/dd grid, not a marker-plus-content row. Classed here as
   tw-layout-col-2 instead, by shape rather than by name. Flagged for
   Jacob: the retired-synonym list may have been built from a
   different article's faq treatment; worth reconciling once a second
   faq instance exists to compare against. */
.tw-layout-step {
	display: grid;
	grid-template-columns: var(--marker-w, 34px) minmax(0, 1fr);
	gap: var(--tw-layout-gap, 20px);
}
@media (max-width: 460px) {
	.tw-layout-step { grid-template-columns: 1fr; }
}

/* 6b. tw-layout-step--flow -- horizontal step sequence with connectors.
   Parametrized variant of tw-layout-step for a left-to-right process
   diagram (content cell, connector, content cell, ...), not a single
   marker+content row. Same family concept, applied along a row
   instead of down a column. Set --flow-template to the full track
   list; connector cells take .tw-layout-step__arrow. */
.tw-layout-step--flow {
	display: grid;
	grid-template-columns: var(--flow-template, minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr));
	align-items: stretch;
}
@media (max-width: 640px) {
	.tw-layout-step--flow { grid-template-columns: 1fr; }
	.tw-layout-step--flow > .tw-layout-step__arrow { transform: rotate(90deg); padding: 4px 0; }
}

/* 7. tw-layout-stats -- weighted three-part centered bar or stats row.
   Retired synonyms: stats, diagram, bar
   Proportions are parameters: set --w1 / --w2 / --w3. Defaults are
   equal thirds; a content-shaped bar (e.g. a severity split) sets its
   own numbers per instance rather than hardcoding them in CSS. */
.tw-layout-stats {
	display: grid;
	grid-template-columns: var(--w1, 1fr) var(--w2, 1fr) var(--w3, 1fr);
	gap: var(--tw-layout-divider, 1px);
}
@media (max-width: 640px) {
	.tw-layout-stats { grid-template-columns: 1fr; }
}

/* 8. tw-layout-wrap -- constrained max-width wrapper with edge padding.
   Retired synonyms: wrap, floor
   Width is a parameter: set --wrap-w (default 1180px). */
.tw-layout-wrap {
	max-width: var(--wrap-w, 1180px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wrap-pad, 40px);
	padding-right: var(--wrap-pad, 40px);
}
@media (max-width: 640px) {
	.tw-layout-wrap { padding-left: 20px; padding-right: 20px; }
}

/* 9. tw-layout-proportional -- variable weighted row where the ratios
   are the content (e.g. a 10/20/70 severity bar). Set --p1 / --p2 /
   --p3 per instance; there is no sensible shared default. */
.tw-layout-proportional {
	display: grid;
	grid-template-columns: var(--p1, 1fr) var(--p2, 1fr) var(--p3, 1fr);
}
@media (max-width: 640px) {
	.tw-layout-proportional { grid-template-columns: 1fr; }
}


/* ============================================================
   TW-TYPE ROLES v1

   Added 08-02-2026. Purely additive. Nothing in the repository
   consumes these yet, so applying this block cannot change how any
   page renders today.

   Companion to TW-LAYOUT LIBRARY v1, one axis over. The site has a
   token layer and a layout layer; between them, tokens were still
   being reassembled by hand on nearly every paragraph, span, heading,
   and caption in every article. These roles name the combinations
   that already recur throughout the corpus.

   NO ROLE DECLARES A LAYOUT PROPERTY. This is a hard rule, not a
   convention. TW-ARTICLE-FLOOR v1 matches inline grid declarations,
   so typography is invisible to it and moving type off the element
   cannot affect the safety net. That stops being true the moment a
   role sets display, grid, flex, width, or padding. Do not add one.

   PROVENANCE. Two roles are transcribed verbatim from combinations
   measured across the live articles on 08-02-2026: .tw-type-body and
   .tw-type-label. The remaining six are derived from those two plus
   the existing token scale, and should be treated as proposals until
   the first article consumes them. Adjust on first use rather than
   defending the numbers.
   ============================================================ */

.tw-type-lede {
	font-family: var(--tw-font-body);
	font-size: 23px;
	line-height: 1.45;
	color: var(--tw-ink);
}

/* Measured verbatim from the live corpus 08-02-2026. */
.tw-type-body {
	font-family: var(--tw-font-body);
	font-size: 19px;
	line-height: 1.5;
	color: var(--tw-ink-2);
}

.tw-type-body-sm {
	font-family: var(--tw-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--tw-ink-2);
}

/* Measured verbatim from the live corpus 08-02-2026. */
.tw-type-label {
	font-family: var(--tw-font-mono);
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--tw-slate);
}

.tw-type-h2 {
	font-family: var(--tw-font-display);
	font-size: 34px;
	line-height: 1.15;
	color: var(--tw-ink);
}

.tw-type-h3 {
	font-family: var(--tw-font-display);
	font-size: 24px;
	line-height: 1.2;
	color: var(--tw-ink);
}

.tw-type-pull {
	font-family: var(--tw-font-display);
	font-size: 27px;
	line-height: 1.3;
	color: var(--tw-ink);
}

.tw-type-caption {
	font-family: var(--tw-font-mono);
	font-size: 13px;
	line-height: 1.4;
	color: var(--tw-ink-faint);
}