/* =============================================================================
   FACTORY INVESTIGATOR — Complete CSS  ·  v1.0
   Date: 2026-05-31
   Design system: "Investigation Workshop, restrained"
   -----------------------------------------------------------------------------
   ONE FILE. Paste into  Appearance → Customize → Additional CSS
   (Ctrl+A → Delete → Paste → Publish). Replaces everything there.

   Stack: WordPress + GeneratePress (FREE) + Yoast + LiteSpeed + Cloudflare.
   Web-font @font-face lives in /wp-content/fonts/fonts.css (loaded by Snippet 1),
   NOT here — this file only declares the CLS-fix metric fallbacks + all styling.

   READING ORDER (mirrors ivristech v7.3's architecture):
     CLS-fix @font-face  →  :root tokens  →  numbered component sections  →
     consolidated responsive  →  print  →  reduced-motion  →  dark scaffold.

   HARDENING above the HTML samples (the quality bar this file must clear):
     • WCAG AA on every text/background pair (brass is large/UI-only by token rule).
     • :focus-visible rings on every interactive element + a skip link.
     • GeneratePress integration: GP's own header/footer are hidden because we
       inject our own masthead (Snippet/Artifact 5) and footer (Snippet 12); the
       single-post .site-main is turned into the 3-column investigation shell.
     • Print styles (manufacturers print articles for procurement meetings).
     • prefers-reduced-motion honored.
     • Re-skinning = edit :root. Dark mode = uncomment ONE block (§29).

   CLASS-NAME POLICY: component/content classes match the locked samples verbatim
   (.summary, .methodology, .compare, .faq, .pullquote, .sidenote, .masthead,
   .footer …) so patterns + samples + production render identically. GeneratePress
   free does NOT use .masthead/.footer/.container as class names, so no collision.
   ============================================================================= */


/* =============================================================================
   CLS FIX — metric-matched fallback @font-face (×4)
   -----------------------------------------------------------------------------
   With font-display:swap, the fallback paints first. These overrides make the
   fallback occupy the SAME box as the real face, so the swap shifts NOTHING
   (Cumulative Layout Shift → 0). Method: capsize dataset
   (github.com/seek-oss/capsize).

   ⚠ TUNING: the DM Sans→Arial numbers are ivristech's PROVEN live values. The
   three serif/mono sets are capsize-derived starting points computed from each
   family's published metrics; after you self-host the exact WOFF2, re-run capsize
   against your files and replace the four numbers per block if a CLS audit shows
   any residual shift. They are close enough to ship.
   ============================================================================= */

/* Fraunces → Georgia (old-style serif fallback; high x-height match) */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 105.00%;
  ascent-override: 92.00%;
  descent-override: 24.00%;
  line-gap-override: 0%;
}
/* Source Serif 4 → Georgia */
@font-face {
  font-family: "Source Serif Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 98.00%;
  ascent-override: 96.50%;
  descent-override: 28.00%;
  line-gap-override: 0%;
}
/* DM Sans → Arial  (PROVEN — ivristech live capsize values) */
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial");
  size-adjust: 104.53%;
  ascent-override: 94.90%;
  descent-override: 29.66%;
  line-gap-override: 0%;
}
/* IBM Plex Mono → Consolas/monospace */
@font-face {
  font-family: "IBM Plex Mono Fallback";
  src: local("Consolas"), local("Menlo"), local("Courier New");
  size-adjust: 100.00%;
  ascent-override: 92.00%;
  descent-override: 26.00%;
  line-gap-override: 0%;
}

html { scroll-behavior: smooth; }


/* =============================================================================
   :root — DESIGN TOKENS  (re-skinning happens HERE and only here)
   ============================================================================= */
:root {
  /* — Palette (locked: Investigation Workshop, restrained) —
     Contrast on --paper #F5F1E8 noted for accessibility:               */
  --ink:        #1A1712;   /* body text / dark surfaces      ~14:1  AAA  */
  --paper:      #F5F1E8;   /* page background                            */
  --card:       #FBF9F3;   /* raised surfaces / blocks                   */
  --steel:      #1F3A5F;   /* structural accent: links, H3   ~9:1   AAA  */
  --brass:      #A67C2E;   /* LARGE/UI/graphical ONLY        ~3.4:1 (≥24px
                              or ≥19px bold, rules, numerals — never body) */
  --brass-text: #7A5A1E;   /* AA-safe small brass text       ~5:1   AA   */
  --oxide:      #8B3A2F;   /* flags only: FRICTION/errors    ~6:1   AA   */
  --grey:       #5C564C;   /* secondary text / meta          ~5.6:1 AA   */
  --lead:       #2A2620;   /* lead paragraph                 ~12:1  AAA  */
  --hair:       #E3DCCB;   /* table + block hairlines                    */
  --rule:       #D8CBB8;   /* slightly stronger rule / input borders     */

  /* — Surfaces used by the dark footer/nav (kept as tokens so dark mode is easy) */
  --on-dark:        #D9D2C6;  /* link text on ink            ~9:1 on ink  */
  --on-dark-soft:   #B9B1A4;  /* muted text on ink           ~5.3:1 AA    */
  --on-dark-faint:  #8A8170;  /* copyright on ink            ~3.3:1 (large) */
  --dark-field-bg:  #262019;
  --dark-field-bd:  #3A3128;
  --dark-rule:      #342C22;
  --row-zebra:      #F3EEE4;  /* even-row table tint                      */

  /* — Typography —
     The "<family> Fallback" entry is the CLS metric-match; it sits BETWEEN the
     real face and the generic so the swap is shift-free. */
  --display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --read:    "Source Serif 4", "Source Serif Fallback", Georgia, serif;
  --ui:      "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — Layout — */
  --measure:   68ch;     /* max reading line length                       */
  --nav-h:     62px;
  --gutter:    24px;
  --maxw:      1200px;
  --max-text:  720px;

  /* — Radius / motion (restrained: 2–4px, not SaaS-curved) — */
  --radius-sm: 2px;
  --radius-md: 4px;
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* — Focus ring (single source of truth for a11y) — */
  --focus-ring: 0 0 0 3px rgba(31, 58, 95, .45);   /* steel @ 45% */
}


/* =============================================================================
   1. GLOBAL  (reset, base type, links, GeneratePress integration)
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 18px;          /* audience skews older — 18px UI is a floor */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; height: auto; }
button { font: inherit; }
hr { border: none; border-top: 1px solid var(--hair); margin: 2rem 0; }

/* Headings — Fraunces; opsz auto gives display cuts contrast for free */
h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .5em;
  letter-spacing: 0;
}
h1 { font-size: 52px; line-height: 1.08; }
h2 { font-size: 34px; line-height: 1.15; }
h3 { font-size: 24px; line-height: 1.25; color: var(--steel); letter-spacing: 0; }
h4 { font-family: var(--ui); font-weight: 600; font-size: 19px; line-height: 1.3; margin: 0 0 .5em; }

p { margin: 0 0 1.1em; }
a { color: var(--steel); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brass-text); }

/* GeneratePress integration ------------------------------------------------ *
 * We render our OWN masthead (Artifact 5) and footer (Snippet 12), so GP's
 * default chrome is suppressed to avoid a double header/footer. We keep GP's
 * content containers and re-skin them. !important is used only where GP's inline
 * /enqueued specificity requires it. */
.site-header,            /* GP default header — replaced by .masthead       */
.main-navigation,        /* GP nav — our nav lives in the masthead          */
.site-footer,            /* GP footer bar — replaced by .footer             */
.generate-back-to-top { display: none !important; }

.site-content { padding: 0; }
.site-main    { margin: 0; }
/* Full-width container for our custom layouts; GP wraps content in
   .grid-container — let our sections control their own width. */
body.page .site-main,
body.home .site-main { max-width: none; padding: 0; }

/* The custom homepage supplies its own spacing and surfaces. GeneratePress's
   separate-container defaults otherwise leave a white, padded article panel
   behind the dark cinematic palette. */
body.home .inside-article {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}
body.home .entry-content { margin: 0; }

/* Skip link (a11y: keyboard users jump past the masthead) ------------------ */
.skip-link, a.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  font-family: var(--ui); font-weight: 600; font-size: 15px;
  padding: 12px 18px; text-decoration: none;
}
.skip-link:focus {
  left: 8px; top: 8px; color: var(--paper);
  box-shadow: var(--focus-ring);
}

/* Global focus-visible — visible keyboard focus everywhere (WCAG 2.4.7).
   Mouse clicks don't trigger :focus-visible, so this is non-intrusive. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* =============================================================================
   2. NAVIGATION & MASTHEAD  (publication nameplate; sticky-collapse on scroll)
   -----------------------------------------------------------------------------
   Markup is injected by Artifact 5 (header snippet) at wp_body_open. The
   sticky/hamburger JS toggles .masthead--stuck (scroll) and .is-open (mobile).
   ============================================================================= */
.masthead { position: sticky; top: 0; z-index: 60; background: var(--paper); }
.masthead__inner {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
  display: flex; flex-direction: column; gap: 6px; padding: 14px 0 0;
}
.masthead__bar { display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; }
.masthead__wordmark {
  font-family: var(--display); font-weight: 600; font-size: 30px;
  letter-spacing: 0; color: var(--ink); text-decoration: none; line-height: 1;
  transition: font-size .2s ease;
  display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto;
  white-space: nowrap;
}
.masthead__wordmark img,
.masthead__seal { width: 46px; height: 46px; display: block; flex: 0 0 auto; }
.masthead__nav { display: flex; gap: 20px; margin-left: auto; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.masthead__nav a { font-family: var(--ui); font-weight: 500; font-size: 16px; color: var(--ink); text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.masthead__nav a:hover { color: var(--steel); }
.masthead__nav a[aria-current="page"] { color: var(--brass-text); }
.masthead__cta { white-space: nowrap; }
.masthead__issue {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; line-height: 1.35;
  text-transform: uppercase; color: var(--grey); padding-bottom: 12px;
  overflow: hidden; max-height: 32px;
  transition: max-height .2s ease, opacity .2s ease, padding .2s ease;
}
.masthead__toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--rule);
  color: var(--ink); width: 42px; height: 42px; cursor: pointer; font-size: 18px; line-height: 1;
}
/* Collapsed (scrolled) state: shrink wordmark, hide the issue line — keeps the
   CTA reachable for conversion without the full nameplate eating viewport. */
.masthead--stuck .masthead__inner { padding-top: 10px; }
.masthead--stuck .masthead__wordmark { font-size: 22px; }
.masthead--stuck .masthead__issue { max-height: 0; opacity: 0; padding-bottom: 0; }

/* The brass double-rule that closes the nameplate */
.rule-double {
  height: 4px;
  background:
    linear-gradient(var(--brass), var(--brass)) 0 0   / 100% 2px no-repeat,
    linear-gradient(var(--brass), var(--brass)) 0 100% / 100% 1px no-repeat;
}


/* =============================================================================
   3. HERO  (homepage: typography-led masthead + framed patent inset)
   ============================================================================= */
.hero { padding: 46px 0 4px; }
.hero__grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: 48px; align-items: center; }
.hero h1 { margin: 14px 0 18px; max-width: 15ch; }
.hero__lede { max-width: 46ch; margin-bottom: 24px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__figure { border: 1px solid var(--hair); background: var(--card); padding: 24px; }
.hero__figure .patent { max-width: 340px; margin-inline: auto; }
.hero__figcap { font-family: var(--mono); font-size: 12px; color: var(--grey); margin-top: 12px; letter-spacing: .04em; text-align: center; }


/* =============================================================================
   4. EDITORIAL GRID  (homepage broadsheet front page + bands)
   ============================================================================= */
.frontpage {
  display: grid; grid-template-columns: 2fr 1fr; gap: 44px;
  border-top: 3px solid var(--ink); padding-top: 30px; margin-top: 40px;
}
.lead-story .duo-block { min-height: 300px; margin-bottom: 18px; }
.lead-story h2 { font-size: 36px; margin: .25em 0 .35em; }
.lead-story .card__excerpt { font-size: 18px; }
.secondary { display: grid; gap: 24px; align-content: start; border-left: 1px solid var(--hair); padding-left: 34px; }
.secondary__head,
.band__title { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); }
.sec-item { padding-bottom: 22px; border-bottom: 1px solid var(--hair); }
.sec-item:last-child { border-bottom: none; padding-bottom: 0; }
.sec-item h3 { font-family: var(--display); color: var(--ink); font-size: 20px; line-height: 1.2; margin: .35em 0 .3em; }
.sec-item h3 a { color: inherit; text-decoration: none; }
.sec-item h3 a:hover { color: var(--steel); }

.band { border-top: 1px solid var(--hair); margin-top: 52px; padding-top: 30px; }
.band__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.guides { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.guide { border: 1px solid var(--hair); background: var(--card); padding: 26px; }
.guide h3 { font-family: var(--display); color: var(--ink); font-size: 22px; margin: .4em 0 .35em; line-height: 1.2; }

.morewrap { display: grid; grid-template-columns: 2fr 1fr; gap: 44px; margin-top: 52px; }
.fieldnotes { border-left: 1px solid var(--hair); padding-left: 34px; }
.fieldnote { padding-bottom: 18px; border-bottom: 1px solid var(--hair); margin-bottom: 18px; }
.fieldnote:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.fieldnote p { font-family: var(--read); font-size: 16px; line-height: 1.5; margin: .3em 0 .4em; }

.interview { display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--hair); background: var(--card); padding: 24px; margin-top: 22px; }
.interview__q { font-family: var(--display); font-style: italic; font-size: 20px; line-height: 1.35; color: var(--steel); margin: .1em 0 .5em; }

/* Bridge band: the ONE publication→service pivot (dark, after editorial proof) */
.bridge { background: var(--ink); color: var(--paper); margin-top: 64px; }
.bridge__inner { padding: 56px 0; display: grid; grid-template-columns: 1.4fr auto; gap: 36px; align-items: center; }
.bridge h2 { color: var(--paper); max-width: 20ch; margin: .2em 0 .3em; }
.bridge p { color: var(--on-dark); max-width: 52ch; margin: 0; }
.bridge .cat { color: var(--brass); }


/* =============================================================================
   5. ARTICLE SHELL  (3-column: meta rail / reading column / sticky TOC rail)
   -----------------------------------------------------------------------------
   PRODUCTION (GeneratePress): the left rail is injected at
   generate_before_main_content and the right rail at generate_after_main_content
   (Snippet 7-equivalents). body.single-post .site-main becomes the 3-col grid.
   The standalone .article-* classes also work for the block-editor preview and
   match the article.html sample 1:1.
   ============================================================================= */
.article-head { width: min(100% - 48px, 900px); margin: 34px auto 6px; text-align: center; }
.article-head .cat { margin-bottom: 16px; }
.article-head h1 { margin: 0 0 18px; }
.article-head .meta { justify-content: center; display: flex; }

.article-shell { width: min(100% - 48px, 1440px); margin: 22px auto 0; display: grid; grid-template-columns: 1fr; gap: 40px; }
.rail-left, .rail-right { display: none; }   /* hidden until ≥1080px (§27) */
.article-body { max-width: 68ch; margin-inline: auto; }
.article-body p { font-family: var(--read); font-size: 19px; line-height: 1.7; color: var(--ink); }
.article-body .lede { font-size: 22px; color: var(--lead); line-height: 1.55; }
.article-body h2 { font-size: 34px; margin: 1.5em 0 .5em; }
.article-body > .tablewrap, .article-body > .figure { max-width: 1000px; }   /* evidence breaks wide */

.rail-left .cat { margin-bottom: 14px; }
.rail-block { margin-bottom: 24px; }
.rail-block__label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin-bottom: 10px; }
.share { display: grid; gap: 8px; }
.share a { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--steel); text-decoration: none; }
.share a:hover { color: var(--brass-text); }
.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.toc a { font-family: var(--ui); font-size: 14px; color: var(--ink); text-decoration: none; line-height: 1.3; display: block; border-left: 2px solid var(--hair); padding-left: 12px; }
.toc a:hover, .toc a.is-active { color: var(--steel); border-left-color: var(--brass); }
.related { display: grid; gap: 14px; }
.related a { font-family: var(--display); font-size: 16px; line-height: 1.25; color: var(--ink); text-decoration: none; display: block; }
.related a:hover { color: var(--steel); }
.related .meta { margin-top: 4px; }

/* GeneratePress single-post mapping (production). The injected rails are direct
   children of .site-main alongside the GP <article>. */
body.single-post .site-main { width: min(100% - 48px, 1440px); margin: 22px auto 0; display: grid; grid-template-columns: 1fr; gap: 40px; }
body.single-post .inside-article { max-width: 68ch; margin-inline: auto; }
body.single-post .entry-content > p { font-family: var(--read); font-size: 19px; line-height: 1.7; color: var(--ink); }


/* =============================================================================
   6. TYPOGRAPHY  (shared utilities + the lede + double-rule already in §2)
   ============================================================================= */
.container { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; }
.mono { font-family: var(--mono); }
.measure { max-width: var(--measure); }
.section { padding: 56px 0; }
.section--tight { padding: 36px 0; }
.lede { font-family: var(--read); font-size: 22px; line-height: 1.55; color: var(--lead); }

/* category labels — type-only "hand-stamped ink" (NEVER rotary nameplates) */
.cat { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); display: inline-block; line-height: 1.2; }
.cat--oxide { color: var(--oxide); }
.cat--bullet::before { content: "• "; }

/* metadata row — editorial/technical, NOT avatar + "5 min read" pill */
.meta { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); line-height: 1.3; }


/* =============================================================================
   7. EXECUTIVE SUMMARY BLOCK  ("The Findings" — prime AI-citation real estate)
   ============================================================================= */
.summary { background: var(--card); border: 1px solid var(--hair); border-left: 4px solid var(--brass); padding: 24px 28px; margin: 32px 0; }
.summary__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 14px; }
.summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.summary li { position: relative; padding-left: 1.4em; font-family: var(--read); font-size: 17px; line-height: 1.55; color: var(--ink); }
.summary li::before { content: "—"; position: absolute; left: 0; color: var(--brass-text); font-weight: 600; }


/* =============================================================================
   8. KEY FINDINGS  (end-of-article numbered variant; mono numerals)
   -----------------------------------------------------------------------------
   The summary's bookend: same brass framing, but an ORDERED list with mono
   tabular numerals — "key takeaways" at article end per design direction Q4.
   ============================================================================= */
.findings { background: var(--card); border: 1px solid var(--hair); border-left: 4px solid var(--steel); padding: 24px 28px; margin: 40px 0; }
.findings__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 14px; }
.findings ol { list-style: none; counter-reset: find; margin: 0; padding: 0; display: grid; gap: 13px; }
.findings li { position: relative; counter-increment: find; padding-left: 2.4em; font-family: var(--read); font-size: 17px; line-height: 1.55; color: var(--ink); }
.findings li::before {
  content: counter(find, decimal-leading-zero);
  position: absolute; left: 0; top: .05em;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--brass-text); font-variant-numeric: tabular-nums;
}


/* =============================================================================
   9. METHODOLOGY BLOCK + SEAL  (signature element — the ONE allowed skeuomorphism)
   ============================================================================= */
.methodology { position: relative; background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--brass); padding: 28px 30px; margin: 40px 0; }
.methodology__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 6px; }
.methodology__title { font-family: var(--display); font-size: 24px; color: var(--ink); margin: 0 0 18px; }
.methodology__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 36px; }
.methodology dt { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--grey); margin-bottom: 3px; }
.methodology dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.methodology dd a { color: var(--steel); }
.methodology__seal { position: absolute; top: 20px; right: 22px; }
.seal { width: 88px; height: 88px; color: var(--brass); transform: rotate(-5deg); }
.seal text { font-family: var(--mono); fill: currentColor; }
.seal__arc  { font-size: 7px; font-weight: 600; letter-spacing: 1.4px; }
.seal__est  { font-size: 7px; font-weight: 600; letter-spacing: 1px; }
.seal__year { font-size: 9px; font-weight: 600; letter-spacing: 1px; }
.seal__star { font-size: 8px; }


/* =============================================================================
   10. LEDGER STAT STRIP  (3-up "instrument panel" reading)
   ============================================================================= */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--card); border: 1px solid var(--hair); margin: 32px 0; }
.stat { padding: 24px; }
.stat + .stat { border-left: 1px solid var(--hair); }
.stat__num { font-family: var(--display); font-weight: 600; font-size: 48px; line-height: 1; color: var(--brass); font-variant-numeric: tabular-nums; }
.stat__label { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--grey); margin-top: 10px; line-height: 1.35; }


/* =============================================================================
   11. STAT CALLOUT  (single big number; gauge-reading treatment)
   ============================================================================= */
.stat-callout { display: flex; align-items: baseline; gap: 24px; max-width: var(--measure); border-top: 2px solid var(--brass); border-bottom: 1px solid var(--brass); padding: 22px 0; margin: 32px 0; }
.stat-callout__num { font-family: var(--display); font-weight: 600; font-size: 72px; line-height: .95; color: var(--brass); font-variant-numeric: tabular-nums; }
.stat-callout__label { font-family: var(--read); font-size: 18px; line-height: 1.45; color: var(--ink); max-width: 34ch; }


/* =============================================================================
   12. PULL QUOTE  (restrained typography, NOT a card)
   ============================================================================= */
.pullquote { border-left: 3px solid var(--brass); padding-left: 24px; margin: 34px 0; max-width: var(--measure); }
.pullquote p { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.35; color: var(--steel); margin: 0; }
.pullquote cite { display: block; margin-top: 14px; font-family: var(--mono); font-style: normal; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); }


/* =============================================================================
   13. TUFTE SIDENOTES  (3-tier responsive: inline → footnote → true margin note)
   -----------------------------------------------------------------------------
   Mobile-first base = an inline footnote under the paragraph. ≥1400px (§27) it
   becomes a true Tufte margin note. This is the publication's distinctive rigor
   signal; it degrades gracefully and never hides content from any viewport.
   ============================================================================= */
.has-sidenote { margin: 0 0 1.1em; }
.sidenote-ref { font-family: var(--mono); font-size: .68em; font-weight: 600; color: var(--brass-text); vertical-align: super; line-height: 0; }
.sidenote { display: block; font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--grey); border-top: 1px solid var(--hair); margin-top: 12px; padding-top: 10px; }
.sidenote__num { color: var(--brass-text); font-weight: 600; margin-right: 6px; }


/* =============================================================================
   14. COMPARISON TABLE  (core IP; tabular pricing aligns; mobile horizontal-scroll)
   ============================================================================= */
.tablewrap { margin: 32px 0; }
.tablewrap__hint { display: none; font-family: var(--mono); font-size: 12px; color: var(--grey); letter-spacing: .04em; margin-bottom: 8px; }
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.compare { width: 100%; border-collapse: collapse; background: var(--card); font-family: var(--ui); font-size: 15px; min-width: 640px; }
table.compare thead th { background: var(--steel); color: var(--paper); font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 12px 14px; text-align: left; white-space: nowrap; }
table.compare tbody th { text-align: left; font-weight: 700; color: var(--ink); padding: 12px 14px; border-top: 1px solid var(--hair); vertical-align: top; }
table.compare td { padding: 12px 14px; border-top: 1px solid var(--hair); vertical-align: top; color: var(--ink); }
table.compare tbody tr:nth-child(even) th,
table.compare tbody tr:nth-child(even) td { background: var(--row-zebra); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.yes { color: var(--steel); font-weight: 700; }
.no  { color: var(--grey); }
/* sticky first column when the table scrolls horizontally on narrow screens */
table.compare th[scope=row], table.compare td.rowhead { position: sticky; left: 0; background: var(--card); box-shadow: 1px 0 0 var(--hair); }
table.compare tbody tr:nth-child(even) th[scope=row] { background: var(--row-zebra); }


/* =============================================================================
   15. CASE FILE CARD  (portfolio entries presented AS investigations)
   ============================================================================= */
.casefile { position: relative; background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--brass); padding: 26px; }
.casefile__no { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 8px; }
.casefile__title { font-family: var(--display); font-size: 23px; color: var(--ink); margin: 0 0 16px; line-height: 1.2; }
.casefile dl { display: grid; gap: 12px; margin: 0; }
.casefile dt { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); margin-bottom: 2px; }
.casefile dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.casefile__result dd { color: var(--steel); font-weight: 600; }


/* =============================================================================
   16. FAQ BLOCK  (native <details>; marked up with FAQPage schema by Snippet 21)
   ============================================================================= */
.faq { margin: 32px 0; max-width: var(--measure); }
.faq__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 6px; }
.faq__item { border-top: 1px solid var(--hair); }
.faq__item:last-child { border-bottom: 1px solid var(--hair); }
.faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; padding: 16px 0; font-family: var(--ui); font-weight: 600; font-size: 18px; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--mono); color: var(--brass-text); font-weight: 600; }
.faq__item[open] summary::after { content: "\2013"; }
.faq__answer { padding: 0 0 18px; font-family: var(--read); font-size: 17px; line-height: 1.65; color: var(--ink); }


/* =============================================================================
   17. SOURCES & NOTES  (every claim → real outbound link + access date)
   ============================================================================= */
.sources { border-top: 1px solid var(--hair); margin-top: 48px; padding-top: 24px; }
.sources__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 14px; }
.sources ol { font-family: var(--mono); font-size: 14px; line-height: 1.5; color: var(--grey); padding-left: 1.7em; margin: 0; display: grid; gap: 10px; }
.sources a { color: var(--steel); }
.verify { color: var(--steel); white-space: nowrap; }


/* =============================================================================
   18. CATEGORY LABELS + STATUS BADGES
   ============================================================================= */
.badge { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); display: inline-flex; align-items: center; line-height: 1.2; }
.badge::before { content: ""; width: 18px; height: 1px; background: var(--brass); display: inline-block; margin-right: 8px; }
.badge--oxide { color: var(--oxide); }
.badge--oxide::before { background: var(--oxide); }
a.badge { text-decoration: none; }
a.badge:hover { color: var(--ink); }


/* =============================================================================
   19. MINI CTA CARDS  ("From the Research Desk" — article rail + inline)
   ============================================================================= */
.cta-card { background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--brass); padding: 22px; }
.cta-card__label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 8px; }
.cta-card__title { font-family: var(--display); font-size: 20px; color: var(--ink); margin: 0 0 8px; line-height: 1.2; }
.cta-card p { font-size: 14px; color: var(--grey); line-height: 1.5; margin: 0 0 16px; }


/* =============================================================================
   20. NEWSLETTER SIGNUP  ("The Dispatch")  — inline form + footer mini-form
   ============================================================================= */
.newsletter { background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--brass); padding: 36px; margin: 40px 0; max-width: 560px; }
.newsletter .cat { margin-bottom: 6px; }
.newsletter h3 { margin: .2em 0 .3em; }
.newsletter p { font-size: 15px; color: var(--grey); max-width: 44ch; }
/* AJAX status line (Snippet 16 toggles .is-ok / .is-err) */
.fi-form-msg { font-family: var(--mono); font-size: 13px; margin-top: 12px; min-height: 1.2em; }
.fi-form-msg.is-ok  { color: var(--steel); }
.fi-form-msg.is-err { color: var(--oxide); }


/* =============================================================================
   21. LEAD FORM (intake)  — "commission an investigation", ledger feel via type
   ============================================================================= */
.field { margin-bottom: 20px; }
.field__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); display: block; margin-bottom: 8px; }
.field__label .req { color: var(--oxide); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--ui); font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); padding: 12px 14px;
  min-height: 48px; border-radius: 0;            /* ledger feel = hairlines, not rounding */
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%),
                    linear-gradient(135deg, var(--grey) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px;
}
/* Steel focus ring — meets WCAG 2.4.7 AND 1.4.11 non-text contrast */
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--steel); box-shadow: var(--focus-ring); }
.field--error input, .field--error textarea, .field--error select { border-color: var(--oxide); }
.field__error { font-family: var(--mono); font-size: 12px; color: var(--oxide); margin-top: 6px; letter-spacing: .03em; }
.field__hint { font-family: var(--mono); font-size: 12px; color: var(--grey); margin-top: 6px; }
.radio-set { display: grid; gap: 10px; margin: 0; padding: 0; border: none; }
.radio { display: flex; align-items: flex-start; gap: 10px; font-family: var(--ui); font-size: 16px; cursor: pointer; }
.radio input { width: 18px; height: 18px; min-height: 0; margin-top: 3px; accent-color: var(--steel); }

.form-card { background: var(--card); border: 1px solid var(--hair); border-top: 3px solid var(--brass); padding: 34px; }
.fieldset { margin: 0; padding: 0; border: none; }
.fieldset__legend { display: flex; align-items: baseline; gap: 12px; width: 100%; margin: 6px 0 18px; }
.fieldset:not(:first-of-type) .fieldset__legend { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--hair); }
.fieldset__no { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--brass-text); }
.fieldset__name { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.fieldset__rule { flex: 1; height: 1px; background: var(--hair); align-self: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }


/* =============================================================================
   22. SERVICE PAGES  ("written by the same investigators": problem→method→proof)
   -----------------------------------------------------------------------------
   No separate marketing skin: reuses the article reading column + the blocks
   above. These are layout helpers for the service template.
   ============================================================================= */
.service { width: min(100% - 48px, var(--maxw)); margin-inline: auto; padding: 40px 0; }
.service__intro { max-width: var(--measure); }
.service__intro h1 { margin-bottom: 16px; }
.service-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 40px 0; }
.service-step { border-top: 2px solid var(--brass); padding-top: 16px; }
.service-step__no { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--brass-text); letter-spacing: .06em; }
.service-step h3 { font-family: var(--display); color: var(--ink); font-size: 21px; margin: .3em 0 .35em; }
.service-step p { font-family: var(--read); font-size: 16px; line-height: 1.55; color: var(--ink); }
/* "What you get" checklist */
.deliverables { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 12px; max-width: var(--measure); }
.deliverables li { position: relative; padding-left: 1.8em; font-family: var(--read); font-size: 17px; line-height: 1.5; color: var(--ink); }
.deliverables li::before { content: "✓"; position: absolute; left: 0; color: var(--steel); font-weight: 700; }


/* =============================================================================
   23. RATE CARD  (publish prices — a brand-truth issue; ledger-style numerals)
   ============================================================================= */
.ratecard { width: 100%; border-collapse: collapse; background: var(--card); border-top: 2px solid var(--brass); border-bottom: 2px solid var(--brass); margin: 32px 0; max-width: var(--measure); }
.ratecard th { text-align: left; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.ratecard td { padding: 16px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.ratecard tr:last-child td { border-bottom: none; }
.ratecard__tier { font-family: var(--display); font-size: 19px; color: var(--ink); }
.ratecard__desc { font-family: var(--read); font-size: 15px; color: var(--grey); line-height: 1.5; }
.ratecard__price { font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; text-align: right; }
.ratecard__note { font-family: var(--mono); font-size: 12px; color: var(--grey); margin-top: 8px; }


/* =============================================================================
   24. PATENT FIGURE / ARCHIVE DRAWING  (brand's native imagery; vector, tiny)
   ============================================================================= */
.figure { margin: 32px 0; }
.figure__frame { border: 1px solid var(--hair); background: var(--card); padding: 22px; display: flex; justify-content: center; }
.figure__frame .patent { color: var(--ink); width: 100%; height: auto; max-width: 420px; }
.patent text { font-family: var(--mono); fill: currentColor; font-size: 13px; }
.figure figcaption { display: flex; gap: 14px; align-items: baseline; margin-top: 10px; flex-wrap: wrap; }
.figure__tag { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--brass-text); white-space: nowrap; }
.figure__cap { font-family: var(--mono); font-size: 13px; color: var(--grey); line-height: 1.4; }

/* duotone media — unifies disparate archive photos into ONE look (Ink + Paper) */
.duotone { filter: grayscale(1) contrast(1.1); }
.duo-block { position: relative; background: var(--ink); overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 200px; }
.duo-block .patent { color: var(--paper); opacity: .9; width: 78%; }
.duo-block__tag { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #cfc7b8; }
.headshot { width: 64px; height: 64px; border: 1px solid var(--brass); background: var(--ink); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.headshot .patent { width: 80%; color: var(--paper); }

/* generic editorial card (homepage + archives) */
.card { display: flex; flex-direction: column; }
.card__title { font-family: var(--display); font-weight: 600; line-height: 1.18; margin: .4em 0 .35em; color: var(--ink); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--steel); }
.card__excerpt { font-family: var(--read); font-size: 16px; line-height: 1.55; color: var(--ink); margin: 0 0 12px; }


/* =============================================================================
   BUTTONS  (kept with the components they trigger; defined once here)
   ============================================================================= */
.btn {
  display: inline-block; font-family: var(--ui); font-weight: 700; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; padding: 13px 22px; cursor: pointer;
  border: 1px solid transparent; text-decoration: none; line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--steel); color: var(--paper); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--brass); }
.btn--secondary:hover { background: var(--brass); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--steel); border-color: transparent; padding-inline: 2px; }
.btn--ghost:hover { color: var(--brass-text); text-decoration: underline; text-underline-offset: 4px; }
.btn--block { display: block; width: 100%; text-align: center; }
.btn--on-dark { background: transparent; color: var(--paper); border-color: var(--brass); }
.btn--on-dark:hover { background: var(--brass); color: var(--ink); }
.btn[disabled], .btn--disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }


/* =============================================================================
   25. FOOTER  (dark; 3 columns + newsletter; rendered by Snippet 12)
   ============================================================================= */
.footer { background: var(--ink); color: var(--paper); padding: 56px 0 28px; margin-top: 72px; }
.footer a { color: var(--on-dark); text-decoration: none; }
.footer a:hover { color: var(--brass); }
.footer__grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.4fr; gap: 40px; }
.footer__col h4 { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); margin-bottom: 14px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.footer__brand { font-family: var(--display); font-size: 24px; color: var(--paper); margin-bottom: 10px; }
.footer__about { font-size: 14px; color: var(--on-dark-soft); line-height: 1.55; max-width: 30ch; }
.footer__news label { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-soft); display: block; margin-bottom: 10px; }
.footer__news .field-row { display: flex; gap: 0; }
.footer__news input { flex: 1; min-width: 0; background: var(--dark-field-bg); border: 1px solid var(--dark-field-bd); color: var(--paper); padding: 12px 14px; font-family: var(--ui); font-size: 15px; }
.footer__news input:focus { outline: none; border-color: var(--brass); }
.footer__news button { background: var(--brass); color: var(--ink); border: none; padding: 0 18px; font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.footer__copy { font-family: var(--mono); font-size: 12px; color: var(--on-dark-faint); letter-spacing: .03em; border-top: 1px solid var(--dark-rule); margin-top: 40px; padding-top: 20px; }


/* =============================================================================
   26. UTILITY  (a11y helpers + small shared bits)
   ============================================================================= */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }


/* =============================================================================
   27. RESPONSIVE  (consolidated; ≤1080 article breaks, then ≤900, ≤768)
   -----------------------------------------------------------------------------
   Mobile-first base above; here we ADD desktop article columns and STEP DOWN the
   homepage/component grids. Mirrors ivristech's consolidated-media-query model.
   ============================================================================= */

/* ≥1080px — the 3-column investigation shell appears (desktop reading) */
@media (min-width: 1080px) {
  .article-shell { grid-template-columns: 200px minmax(0, 1fr) 280px; align-items: start; }
  .rail-left, .rail-right { display: block; position: sticky; top: 80px; }
  .article-body { max-width: none; margin: 0; }
  .article-body > p, .article-body > h2, .article-body > h3, .article-body > .summary,
  .article-body > .findings, .article-body > .pullquote, .article-body > .faq,
  .article-body > .stat-callout, .article-body > .sources { max-width: 64ch; }

  /* GeneratePress production mapping of the same shell */
  body.single-post .site-main { grid-template-columns: 200px minmax(0, 1fr) 280px; align-items: start; }
  body.single-post .inside-article { max-width: none; margin: 0; }
  body.single-post .fi-rail-left, body.single-post .fi-rail-right { display: block; position: sticky; top: 80px; }
}

/* ≥1400px — TRUE Tufte margin sidenotes (the distinctive desktop win) */
@media (min-width: 1400px) {
  .article-body .has-sidenote,
  body.single-post .entry-content .has-sidenote {
    display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: 36px; align-items: start;
  }
  .article-body .has-sidenote > p,
  body.single-post .entry-content .has-sidenote > p { max-width: 64ch; margin: 0 0 1.1em; }
  .article-body .has-sidenote .sidenote,
  body.single-post .entry-content .has-sidenote .sidenote { grid-column: 2; border-top: none; margin-top: 0; padding-top: 4px; }
}

/* ≤900px — homepage broadsheet collapses to a single column */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .frontpage { grid-template-columns: 1fr; gap: 30px; }
  .secondary { border-left: none; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 24px; }
  .guides { grid-template-columns: 1fr; }
  .morewrap { grid-template-columns: 1fr; }
  .fieldnotes { border-left: none; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 24px; }
  .bridge__inner { grid-template-columns: 1fr; gap: 24px; }
  .service-steps { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
  .masthead__bar { gap: 14px; }
  .masthead__wordmark { font-size: 27px; }
  .masthead__nav { gap: 16px; }
  .masthead__nav a { font-size: 15px; }
  .masthead__cta { padding-left: 18px; padding-right: 18px; }
  .fi-theme-toggle { margin-left: 8px; }
}

/* ≤768px — tablet/phone: collapse masthead nav to hamburger, stack blocks */
@media (max-width: 768px) {
  body { font-size: 17px; }

  h1 { font-size: 38px; }
  h2 { font-size: 30px; }
  h3 { font-size: 22px; }
  h4 { font-size: 18px; }
  .lead-story h2 { font-size: 32px; }
  .article-body h2 { font-size: 30px; }
  .lede { font-size: 20px; }
  .stat__num { font-size: 42px; }
  .stat-callout__num { font-size: 56px; }
  .pullquote p { font-size: 23px; }
  .casefile__title { font-size: 21px; }
  .fi-static-page > h1 + p { font-size: 20px; }
  .newsletter { padding: 28px; }
  .form-card { padding: 26px; }

  .masthead__bar { flex-wrap: wrap; gap: 10px 14px; }
  .masthead__nav, .masthead__cta { display: none; }
  .masthead__issue { font-size: 11px; line-height: 1.35; max-height: 46px; padding-bottom: 10px; }
  .masthead__toggle { display: block; }
  .masthead.is-open .masthead__nav { display: flex; flex-direction: column; gap: 0; margin: 8px 0 4px; width: 100%; flex-basis: 100%; order: 3; border-top: 1px solid var(--hair); }
  .masthead.is-open .masthead__nav a { padding: 13px 2px; border-bottom: 1px solid var(--hair); }
  .masthead.is-open .masthead__cta { display: inline-block; margin: 10px 0 4px; order: 4; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .methodology__grid { grid-template-columns: 1fr; gap: 14px; }
  .methodology__seal { position: static; margin-bottom: 14px; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--hair); }
  .stat-callout { flex-direction: column; gap: 10px; }
  .grid-2 { grid-template-columns: 1fr; }
  .tablewrap__hint { display: block; }     /* show "scroll →" hint on touch */
  table.compare { min-width: 560px; }
  .article-head { width: min(100% - 36px, 900px); }
}


/* =============================================================================
   28. SMALL PHONE OVERRIDES (≤480px)
   ============================================================================= */
@media (max-width: 480px) {
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  .fi-static-page > h1 + p { font-size: 19px; }
  .masthead__wordmark { font-size: 21px; }
  .masthead__wordmark img,
  .masthead__seal { width: 42px; height: 42px; }
  .summary, .methodology, .findings { padding-left: 18px; padding-right: 18px; }
  .article-body p { font-size: 18px; }
  table.compare { min-width: 460px; font-size: 14px; }
  .ratecard__price { font-size: 16px; }
}

@media (max-width: 360px) {
  .masthead__inner { width: min(100% - 32px, var(--maxw)); }
  .masthead__wordmark { font-size: 20px; gap: 8px; }
  .masthead__wordmark img,
  .masthead__seal { width: 38px; height: 38px; }
  .fi-theme-toggle { font-size: 10px; padding: 6px; }
}


/* =============================================================================
   29. PRINT  +  REDUCED-MOTION  (+ AI-citation helpers)
   -----------------------------------------------------------------------------
   Dark mode is NOT scaffolded here anymore — it ships LIVE in the cinematic layer
   (cinematic/factory-investigator-cinematic.css, tokens = design doc 09 §4),
   defaulting to dark. A second, differently-valued dark scaffold here would only
   risk drift, so it was removed on 2026-06-01.
   ============================================================================= */

/* --- PRINT — manufacturers print investigations for procurement meetings ---- *
 * Goal: clean black-on-white reading copy; keep evidence (methodology, tables,
 * sources, findings); drop chrome (masthead, footer, rails, CTAs, forms); expose
 * link URLs so a printed page is still verifiable. */
@media print {
  :root { --paper: #fff; --card: #fff; --ink: #000; --grey: #222; --steel: #000; --hair: #999; }
  body { background: #fff; color: #000; font-size: 11.5pt; }

  .masthead, .footer, .rail-left, .rail-right, .fi-rail-left, .fi-rail-right,
  .cta-card, .bridge, .newsletter, .form-card, .masthead__toggle, .skip-link,
  .tablewrap__hint, #fi-progress { display: none !important; }

  /* let the reading column use the full page */
  .article-shell, body.single-post .site-main { display: block; width: auto; margin: 0; }
  .article-body, body.single-post .inside-article { max-width: 100%; }

  a { color: #000; text-decoration: underline; }
  /* print the destination of editorial links (skip in-page anchors + the verify glyph) */
  .article-body a[href^="http"]::after,
  .sources a[href^="http"]::after { content: " <" attr(href) ">"; font-family: monospace; font-size: 9pt; color: #333; word-break: break-all; }

  .summary, .findings, .methodology, .stat-strip, .stat-callout, .pullquote,
  table.compare, .figure, .casefile { break-inside: avoid; border-color: #999 !important; background: #fff !important; }
  table.compare thead th { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; }
  h1, h2, h3 { break-after: avoid; }
  .seal { color: #000; }
}

/* --- REDUCED MOTION — honor the user's OS setting ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- DARK MODE: lives in the cinematic layer -------------------------------- *
 * The live [data-theme="dark"] token overrides + Peaky-Blinders atmospherics are
 * in cinematic/factory-investigator-cinematic.css (authoritative hex = design doc
 * 09 §4), enqueued by factory-investigator-snippets-cinematic.php, defaulting to
 * dark with a localStorage-persisted manual toggle. Intentionally NOT duplicated
 * here, so there is exactly one source of truth for the dark palette. */

/* --- AI-CITATION / SCHEMA HELPERS -------------------------------------------- *
 * Visual hooks that reinforce machine-readable structure. The actual JSON-LD is
 * emitted server-side (Artifact 6). These keep citable extracts scannable. */
.summary, .findings { scroll-margin-top: 90px; }       /* anchor-jump offset under sticky masthead */
.faq__item summary { scroll-margin-top: 90px; }
[id] { scroll-margin-top: 90px; }                        /* all heading anchors clear the masthead */

/* --- WORDPRESS PAGE FOUNDATION ------------------------------------------------ *
 * IVRIS live-page QA confirmed that GeneratePress otherwise leaves a duplicate
 * page title, sidebar allocation, and container padding around custom page HTML.
 * Snippet 32 prevents those at render time; these rules are the visual fallback. */
body.page:not(.home) .site-content {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
}
body.page:not(.home) #primary {
  width: 100%;
}
body.page:not(.home) #right-sidebar,
body.page:not(.home) .entry-header {
  display: none;
}
body.page:not(.home) .inside-article {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}
body.page:not(.home) .entry-content {
  margin: 0;
}
body.page:not(.home) .entry-content p:empty {
  display: none;
}
body.page:not(.home) .entry-content > br {
  display: none;
}

/* =============================================================================
   30. STATIC PAGES  (.fi-static-page — editorial-policy, about, terms, write-for-us)
   -----------------------------------------------------------------------------
   A centered long-form reading container for the publication's static pages
   (each pasted as raw HTML in WordPress Code Editor). Reuses §1 base type + the token
   system; defines NO new tokens. Paragraphs/lists take the Source-Serif reading
   feel; headings stay Fraunces; section rules give the "dossier" rhythm.
   Added 2026-06-01 (Artifacts 7-8 depend on it).
   ============================================================================= */
.fi-static-page {
  width: min(100% - (var(--gutter) * 2), var(--max-text));
  margin: 40px auto 72px;
}
/* optional mono kicker above the H1 (e.g. "PUBLICATION · POLICY") */
.fi-static-page .fi-page-kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brass-text); margin-bottom: 10px;
}
.fi-static-page > h1 { margin-bottom: 10px; }
/* the intro paragraph immediately after the H1 reads as a lede */
.fi-static-page > h1 + p {
  font-family: var(--read); font-size: 21px;
  line-height: 1.6; color: var(--lead); margin-bottom: 6px;
}
/* each H2 opens a section with a hairline rule (the ledger/dossier divider) */
.fi-static-page h2 { margin: 1.7em 0 .5em; padding-top: 1.2em; border-top: 1px solid var(--hair); }
.fi-static-page h3 { margin: 1.3em 0 .4em; }
.fi-static-page p { font-family: var(--read); font-size: 18px; line-height: 1.7; color: var(--ink); }
.fi-static-page ul, .fi-static-page ol {
  font-family: var(--read); font-size: 18px; line-height: 1.6; color: var(--ink);
  padding-left: 1.3em; margin: 0 0 1.1em;
}
.fi-static-page li { margin-bottom: .5em; }
.fi-static-page a { color: var(--steel); }
.fi-static-page a:hover { color: var(--brass-text); }

/* brass-ruled signature + "last updated" line used to close the pages */
.fi-signature {
  margin-top: 40px; padding-top: 20px; border-top: 2px solid var(--brass);
  font-family: var(--mono); font-size: 13px; letter-spacing: .03em; color: var(--grey);
}
.fi-signature strong { color: var(--ink); font-weight: 600; }
.fi-updated { display: block; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--grey); letter-spacing: .03em; }

/* About-page specifics: the recurring-character slot + a 2-up split (service vs publication) */
.about-page .fi-investigator-slot {
  margin: 30px 0; padding: 26px; border: 1px solid var(--hair); background: var(--card);
  text-align: center; font-family: var(--mono); font-size: 13px; color: var(--grey); line-height: 1.5;
}
.about-page .fi-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 24px 0; }
.about-page .fi-twocol h3 { margin-top: 0; }
@media (max-width: 768px) { .about-page .fi-twocol { grid-template-columns: 1fr; } }


/* =============================================================================
   31. ARCHIVES, SEARCH & EMPTY STATES
   -----------------------------------------------------------------------------
   Adapted from the proven ivristech archive behavior. The structure stays simple:
   one readable intro, a responsive evidence-card grid, and useful empty states.
   ============================================================================= */
body.archive .site-content,
body.search .site-content,
body.error404 .site-content {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
  padding: 44px 0 72px;
}
body.archive #primary,
body.search #primary,
body.error404 #primary {
  width: 100%;
}
body.archive #right-sidebar,
body.search #right-sidebar,
body.error404 #right-sidebar {
  display: none;
}
body.archive .site-main,
body.search .site-main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
body.archive .site-main > .fi-archive-head,
body.search .site-main > .fi-archive-head,
body.archive .site-main > .paging-navigation,
body.search .site-main > .paging-navigation,
body.archive .site-main > .no-results,
body.search .site-main > .no-results,
body.search .site-main > .fi-empty-state {
  grid-column: 1 / -1;
}
body.archive .site-main > .page-header:not(.fi-archive-head),
body.search .site-main > .page-header:not(.fi-archive-head),
body.search .site-main > .no-results,
body.error404 .site-main > :not(.fi-empty-state) {
  display: none;
}
body.archive .site-main > article,
body.search .site-main > article {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--hair);
  border-top: 3px solid var(--brass);
  background: var(--card);
}
body.archive .site-main > article .inside-article,
body.search .site-main > article .inside-article {
  padding: 22px;
  background: transparent;
}
body.archive .site-main > article .post-image,
body.search .site-main > article .post-image {
  margin: -22px -22px 20px;
}
body.archive .site-main > article .post-image img,
body.search .site-main > article .post-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}
body.archive .site-main > article .entry-title,
body.search .site-main > article .entry-title {
  font-size: 23px;
  margin: 8px 0 10px;
}
body.archive .site-main > article .entry-summary,
body.search .site-main > article .entry-summary {
  font-family: var(--read);
  font-size: 16px;
  line-height: 1.55;
}
.fi-archive-head {
  max-width: var(--max-text);
  margin-bottom: 34px;
  padding-bottom: 24px;
  border-bottom: 3px solid var(--ink);
}
.fi-archive-head .fi-page-kicker {
  font-family: var(--mono);
  color: var(--brass-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fi-archive-head h1 {
  margin: 8px 0 10px;
}
.fi-archive-head p {
  max-width: 62ch;
  color: var(--grey);
}
.fi-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.fi-archive-card {
  border: 1px solid var(--hair);
  background: var(--card);
  min-width: 0;
}
.fi-archive-card__media {
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
}
.fi-archive-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}
.fi-archive-card__body {
  padding: 22px;
}
.fi-archive-card h2 {
  font-size: 23px;
  margin: 8px 0 10px;
}
.fi-archive-card h2 a {
  color: inherit;
  text-decoration: none;
}
.fi-archive-card h2 a:hover {
  color: var(--steel);
}
.fi-archive-card p {
  font-family: var(--read);
  font-size: 16px;
  line-height: 1.55;
}
.fi-empty-state {
  max-width: var(--max-text);
  padding: 38px;
  border: 1px solid var(--hair);
  border-top: 3px solid var(--brass);
  background: var(--card);
}
.fi-empty-state .patent {
  width: 180px;
  color: var(--grey);
  margin-bottom: 24px;
}
.paging-navigation,
.nav-links {
  margin-top: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-numbers {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
}
.page-numbers.current,
.page-numbers:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}


/* =============================================================================
   32. CONTACT & INVESTIGATION INTAKE PAGES
   -----------------------------------------------------------------------------
   Reuses the live IVRIS two-column contact layout, translated into the locked
   Factory Investigator ledger/form language. Used by /contact/ and the primary
   /manufacturer-website-investigation/ lead page.
   ============================================================================= */
.fi-contact-page {
  width: min(100% - (var(--gutter) * 2), 980px);
  margin: 42px auto 80px;
}
.fi-page-hero {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}
.fi-page-hero .fi-page-kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-text);
}
.fi-page-hero h1 {
  margin: 10px 0 12px;
}
.fi-page-hero p {
  font-family: var(--read);
  font-size: 21px;
  line-height: 1.6;
  color: var(--lead);
}
.fi-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 42px;
  align-items: start;
}
.fi-form-card {
  border: 1px solid var(--hair);
  border-top: 3px solid var(--brass);
  background: var(--card);
  padding: 30px;
}
.fi-form-card h2 {
  font-size: 27px;
  margin-bottom: 8px;
}
.fi-form-card > p {
  font-family: var(--read);
  color: var(--grey);
}
.fi-form-group {
  margin-top: 20px;
}
.fi-form-group label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grey);
}
.fi-form-group input,
.fi-form-group select,
.fi-form-group textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
}
.fi-form-group textarea {
  min-height: 140px;
  resize: vertical;
}
.fi-form-group input:focus,
.fi-form-group select:focus,
.fi-form-group textarea:focus {
  outline: none;
  border-color: var(--steel);
  box-shadow: var(--focus-ring);
}
.fi-form-help,
.fi-form-consent {
  margin-top: 8px;
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey);
}
.fi-form-submit {
  margin-top: 24px;
  width: 100%;
}
.fi-contact-sidebar {
  display: grid;
  gap: 20px;
}
.fi-info-card {
  border: 1px solid var(--hair);
  background: var(--card);
  padding: 24px;
}
.fi-info-card h2,
.fi-info-card h3 {
  color: var(--ink);
  font-size: 21px;
}
.fi-info-card p,
.fi-info-card li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--grey);
}
.fi-info-card ul,
.fi-checklist {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.fi-checklist li {
  position: relative;
  padding-left: 22px;
}
.fi-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brass-text);
  font-family: var(--mono);
  font-weight: 600;
}


/* =============================================================================
   33. SERVICE HUB & SERVICE DETAIL PAGES
   -----------------------------------------------------------------------------
   The information architecture mirrors IVRIS's proven service pages, while the
   presentation remains an investigation dossier: evidence, method, deliverables,
   rate card, then a single commissioning CTA.
   ============================================================================= */
.fi-service-page {
  width: min(100% - (var(--gutter) * 2), 1040px);
  margin: 42px auto 80px;
}
.fi-service-section {
  padding: 42px 0;
  border-top: 1px solid var(--hair);
}
.fi-service-section:first-of-type {
  border-top: 3px solid var(--ink);
}
.fi-service-section__head {
  max-width: var(--max-text);
  margin-bottom: 28px;
}
.fi-service-section__head .cat {
  margin-bottom: 8px;
}
.fi-service-section__head p {
  font-family: var(--read);
  font-size: 18px;
  color: var(--grey);
}
.fi-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.fi-service-card {
  border: 1px solid var(--hair);
  border-top: 3px solid var(--brass);
  background: var(--card);
  padding: 26px;
}
.fi-service-card .cat {
  margin-bottom: 12px;
}
.fi-service-card h3 {
  color: var(--ink);
  font-size: 23px;
}
.fi-service-card p {
  font-family: var(--read);
  font-size: 16px;
  line-height: 1.55;
  color: var(--grey);
}
.fi-service-card a {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.fi-process {
  counter-reset: process;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.fi-process__step {
  counter-increment: process;
  border-top: 2px solid var(--brass);
  padding-top: 18px;
}
.fi-process__step::before {
  content: "0" counter(process);
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--brass-text);
}
.fi-process__step h3 {
  color: var(--ink);
}
.fi-process__step p {
  font-family: var(--read);
  font-size: 16px;
  color: var(--grey);
}
.fi-service-cta {
  background: var(--ink);
  color: var(--paper);
  padding: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}
.fi-service-cta h2 {
  color: var(--paper);
  margin-bottom: 8px;
}
.fi-service-cta p {
  color: var(--on-dark);
  margin: 0;
}


/* =============================================================================
   34. LEGAL & POLICY PAGES
   -----------------------------------------------------------------------------
   Uses the same readable static-page foundation, plus a compact contents box and
   table treatment for privacy/terms pages.
   ============================================================================= */
.fi-legal-page {
  width: min(100% - (var(--gutter) * 2), var(--max-text));
  margin: 40px auto 72px;
}
.fi-legal-page .fi-page-kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-text);
}
.fi-legal-page .fi-legal-updated {
  display: inline-block;
  margin: 4px 0 24px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grey);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fi-legal-page .fi-legal-toc {
  margin: 24px 0 34px;
  padding: 22px 24px;
  border: 1px solid var(--hair);
  border-left: 4px solid var(--brass);
  background: var(--card);
}
.fi-legal-page .fi-legal-toc strong {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.fi-legal-page .fi-legal-toc ol {
  margin: 0;
  padding-left: 20px;
}
.fi-legal-page h2 {
  margin: 1.7em 0 .5em;
  padding-top: 1.2em;
  border-top: 1px solid var(--hair);
}
.fi-legal-page p,
.fi-legal-page li {
  font-family: var(--read);
  font-size: 18px;
  line-height: 1.7;
}
.fi-legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  background: var(--card);
  font-size: 15px;
}
.fi-legal-table th,
.fi-legal-table td {
  padding: 13px 14px;
  border: 1px solid var(--hair);
  text-align: left;
  vertical-align: top;
}
.fi-legal-table th {
  background: var(--steel);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}


/* =============================================================================
   35. IMAGE LIGHTBOX
   -----------------------------------------------------------------------------
   Adapted from the live IVRIS UCSS-resistant lightbox. Article images remain
   evidence-first; the lightbox simply makes diagrams/screenshots inspectable.
   ============================================================================= */
.fi-lightboxable {
  cursor: zoom-in;
}
.fi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(10, 8, 6, .92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.fi-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.fi-lightbox__image {
  max-width: min(94vw, 1500px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 18px 70px rgba(0, 0, 0, .45);
}
.fi-lightbox__close {
  position: fixed;
  top: 18px;
  right: 20px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-family: var(--mono);
  font-size: 20px;
  cursor: pointer;
}


@media (max-width: 900px) {
  body.archive .site-main,
  body.search .site-main,
  .fi-archive-grid,
  .fi-service-grid,
  .fi-process {
    grid-template-columns: 1fr 1fr;
  }
  .fi-contact-layout,
  .fi-service-cta {
    grid-template-columns: 1fr;
  }
  .fi-contact-sidebar {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  body.archive .site-main,
  body.search .site-main,
  .fi-archive-grid,
  .fi-service-grid,
  .fi-process,
  .fi-contact-sidebar {
    grid-template-columns: 1fr;
  }
  .fi-form-card,
  .fi-service-card,
  .fi-service-cta,
  .fi-empty-state {
    padding: 22px;
  }
  .fi-page-hero {
    text-align: left;
  }
  .fi-page-hero p {
    font-size: 19px;
  }
}


/* =============================================================================
   END factory-investigator.css v1.2
   v1.2 ports proven IVRIS non-homepage structures without changing the locked
   Factory Investigator fonts, cinematic layer, dark-default behavior, homepage,
   logo, investigation components, or design tokens.
   ============================================================================= */