/* ============================================================================
   VFC WEB DESIGN SYSTEM  v1, 2026-07-26
   Companion to the newsprint social-graphics system, NOT a replacement.
   Same locked palette. Same three fonts. Web-scale type and page components.

   The social kit is calibrated to a 1080px canvas with a 22px floor. That is
   correct for Instagram and impossible for a web page. This file is the web
   half. Load it once; never write an inline style again.
   ========================================================================= */

:root {
  /* ---- palette: locked, from the newsprint system ---- */
  --paper:       #F0F1F0;
  --paper-edge:  #E6E7E6;
  --ink:         #222222;
  --ink-soft:    #3A3A3A;
  --ink-deep:    #161616;
  --red:         #B8202E;
  --red-dk:      #94182A;

  /* ---- functional additions the web surface genuinely needs ----
     These were already in use, unnamed and drifting. Naming them stops
     the drift; leaving them unnamed is how you end up with 18 colors. */
  --ink-mute:    #8A8F88;   /* de-emphasized metadata, source IDs, dates */
  --rule:        #CFD0CE;   /* hairline dividers */
  --warn:        #8A5A00;   /* citation-pending / unverified. The one warm tone with a job. */
  --warn-bg:     #F6EFE0;

  /* ---- type ---- */
  --font-display: 'Big Shoulders Display', sans-serif;  /* headlines, big numbers */
  --font-serif:   'Newsreader', Georgia, serif;         /* body, lede, quotes */
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace; /* kickers, labels, dates, URLs */

  /* ---- web type scale: nine steps, no others ----
     Anchored to sizes already in the build so applying it does not reflow
     the pages you spent five days tuning. */
  --fs-micro: 12px;   /* source chips, dates, footnotes */
  --fs-label: 13px;   /* kickers, eyebrow labels, table headers */
  --fs-body:  16px;   /* default body */
  --fs-lede:  19px;   /* section lede, the plain line */
  --fs-h4:    20px;
  --fs-h3:    22px;
  --fs-h2:    clamp(20px, 1.9vw, 26px);
  --fs-h1:    clamp(26px, 2.7vw, 36px);
  --fs-stat:  clamp(38px, 5vw, 64px);  /* the number an argument turns on */

  /* ---- spacing: six steps ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 14px;
  --sp-4: 22px; --sp-5: 36px; --sp-6: 56px;

  --measure: 68ch;        /* body line length ceiling */
  --content: 1080px;      /* content column */
}

/* ============================ FOUNDATIONS ============================ */

.vfc-page   { background: var(--paper); color: var(--ink); font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.6; }
.vfc-wrap   { max-width: var(--content); margin: 0 auto; padding: 0 var(--sp-4); }
.vfc-body   { font-size: var(--fs-body); line-height: 1.6; max-width: var(--measure); margin: 0 0 var(--sp-3); }
.vfc-lede   { font-size: var(--fs-lede); line-height: 1.5; max-width: var(--measure); margin: 0 0 var(--sp-3); }
.vfc-micro  { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-mute); }
.vfc-hr     { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-5) 0; }

/* ============================ MASTHEAD / NAV ============================ */

.vfc-masthead      { border-bottom: 3px double var(--ink); padding: var(--sp-3) 0; }
.vfc-masthead__name{ font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2);
                     text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.vfc-masthead__meta{ font-family: var(--font-mono); font-size: var(--fs-micro);
                     text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.vfc-nav           { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding: var(--sp-2) 0; }
.vfc-nav__item     { font-family: var(--font-display); font-weight: 700; font-size: 15px;
                     text-transform: uppercase; letter-spacing: .02em; color: var(--ink);
                     text-decoration: none; padding-bottom: 3px;
                     border-bottom: 2px solid transparent; white-space: nowrap; }
.vfc-nav__item:hover.vfc-nav__item[aria-current] { color: var(--red); border-bottom-color: var(--red); }

/* ============================ THE SECTION BLOCK ============================
   The single most important component. Fixed order, every time:
     kicker (what this section is)  →  headline (the editorial line)
     →  chip (evidence class)  →  plain line  →  body  →  collapsed detail
   Orienting context first. Never last. This is a structural guarantee,
   not an editorial habit, the DOM order enforces it.
   ========================================================================= */

.vfc-section          { margin: var(--sp-6) 0; scroll-margin-top: var(--sp-5); }
.vfc-section__kicker  { font-family: var(--font-mono); font-size: var(--fs-label);
                        text-transform: uppercase; letter-spacing: .12em; color: var(--red);
                        border-top: 1px solid var(--ink); padding-top: var(--sp-2);
                        margin: 0 0 var(--sp-2); display: block; }
.vfc-section__headline{ font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2);
                        line-height: 1.12; letter-spacing: .01em; margin: 0 0 var(--sp-2);
                        max-width: 24ch; }
.vfc-section__plain   { font-size: var(--fs-lede); line-height: 1.5; font-style: italic;
                        color: var(--ink-soft); max-width: var(--measure); margin: 0 0 var(--sp-3); }
.vfc-section__body    { max-width: var(--measure); }

/* ============================ EVIDENCE CHIPS ============================ */

.vfc-chip        { display: inline-block; font-family: var(--font-mono); font-size: 11px;
                   font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
                   white-space: nowrap; padding: 3px 7px; margin: 0 var(--sp-1) var(--sp-1) 0; }
.vfc-chip--fact  { background: var(--ink);  color: var(--paper); }
.vfc-chip--analysis { background: transparent; color: var(--ink-soft); border: 1px solid var(--ink-soft); }
.vfc-chip--pending  { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); }
.vfc-chip--source   { background: transparent; color: var(--red); border: 1px solid var(--red);
                      text-decoration: none; }
.vfc-chip--source:hover { background: var(--red); color: var(--paper); }

/* ============================ STAT CARD ============================
   Anatomy, always: label → number → context → source chip → as-of date.
   No naked numbers. If it has no claim_id it does not ship.
   ========================================================================= */

.vfc-stat        { border-top: 2px solid var(--ink); padding: var(--sp-3) 0; }
.vfc-stat__label { font-family: var(--font-mono); font-size: var(--fs-micro);
                   text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft);
                   margin: 0 0 var(--sp-1); }
.vfc-stat__value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-stat);
                   line-height: .95; margin: 0 0 var(--sp-1); }
.vfc-stat__value--accent { color: var(--red); }
.vfc-stat__context { font-size: var(--fs-body); line-height: 1.4; margin: 0 0 var(--sp-2); }
.vfc-stat__meta  { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.vfc-stat-row    { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
                   gap: var(--sp-4); }

/* ============================ RECEIPT FIGURE ============================
   The load-bearing component for documentary work. A claim next to a
   screenshot of the primary source is the difference between asserting
   and showing. Every receipt gets identical treatment so the eye reads
   them as one evidence class.
   ========================================================================= */

.vfc-receipt        { margin: var(--sp-4) 0; border: 1px solid var(--rule);
                      background: #fff; padding: var(--sp-3); }
.vfc-receipt--wide  { max-width: 100%; }
.vfc-receipt--half  { max-width: 520px; }
.vfc-receipt__img   { display: block; width: 100%; height: auto; object-fit: contain;
                      border: 1px solid var(--rule); background: var(--paper-edge); }
.vfc-receipt__cap   { font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
                      color: var(--ink-soft); margin: var(--sp-2) 0 0; }
.vfc-receipt__cap b { color: var(--ink); font-weight: 600; }
.vfc-receipt__what  { font-size: var(--fs-body); line-height: 1.45; margin: 0 0 var(--sp-2);
                      font-weight: 600; }
.vfc-receipt-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                      gap: var(--sp-4); }

/* ============================ MYTH BLOCK ============================
   "What you've heard" vs "what the record says." The recurring device
   for the debunk layer. Deploy as a section OR inline as a chip link.
   ========================================================================= */

.vfc-myth        { border-left: 4px solid var(--red); padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
                   margin: var(--sp-4) 0; scroll-margin-top: var(--sp-5); }
.vfc-myth__heard { font-family: var(--font-mono); font-size: var(--fs-label);
                   text-transform: uppercase; letter-spacing: .1em; color: var(--red);
                   margin: 0 0 var(--sp-1); }
.vfc-myth__claim { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lede);
                   color: var(--ink-soft); margin: 0 0 var(--sp-3); max-width: var(--measure); }
.vfc-myth__record{ font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);
                   line-height: 1.2; margin: 0 0 var(--sp-2); max-width: 30ch; }
.vfc-myth-link   { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
                   letter-spacing: .06em; color: var(--red); text-decoration: none;
                   border-bottom: 1px solid var(--red); }

/* ============================ TIMELINE ============================ */

.vfc-spine       { display: flex; align-items: stretch; height: 34px; margin: var(--sp-3) 0 var(--sp-5);
                   border: 1px solid var(--ink); font-family: var(--font-mono); font-size: 10px; }
.vfc-spine__seg  { flex: 1; display: flex; align-items: center; justify-content: center;
                   border-right: 1px solid var(--rule); color: var(--ink-mute);
                   text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.vfc-spine__seg:last-child { border-right: 0; }
.vfc-spine__seg[aria-current] { background: var(--red); color: var(--paper); font-weight: 600; }

.vfc-node        { display: grid; grid-template-columns: 104px 1fr; gap: var(--sp-2) var(--sp-4);
                   padding: var(--sp-3) 0; border-top: 1px solid var(--rule); }
.vfc-node__date  { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600;
                   text-transform: uppercase; letter-spacing: .04em; color: var(--red); }
.vfc-node__title { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; margin: 0 0 var(--sp-1); }
.vfc-node__body  { font-size: var(--fs-body); line-height: 1.55; margin: 0; }

/* ============================ TABLE ============================ */

.vfc-table       { width: 100%; border-collapse: collapse; font-size: var(--fs-body); margin: var(--sp-3) 0; }
.vfc-table th    { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
                   text-transform: uppercase; letter-spacing: .06em; text-align: left;
                   border-bottom: 2px solid var(--ink); padding: var(--sp-2); }
.vfc-table td    { border-bottom: 1px solid var(--rule); padding: var(--sp-2); vertical-align: top; line-height: 1.5; }
.vfc-table tr:hover td { background: var(--paper-edge); }

/* ============================ QUOTE / CALLOUT ============================ */

.vfc-quote       { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
                   padding: var(--sp-4) 0; margin: var(--sp-5) 0; }
.vfc-quote__text { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-h3);
                   line-height: 1.35; margin: 0 0 var(--sp-2); max-width: 40ch; }
.vfc-quote__text em { font-style: italic; color: var(--red); }
.vfc-quote__attr { font-family: var(--font-mono); font-size: var(--fs-micro);
                   text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }

.vfc-callout     { background: var(--paper-edge); border-left: 4px solid var(--ink);
                   padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; }

/* ============================ PROGRESSIVE DISCLOSURE ============================ */

.vfc-details            { border-top: 1px solid var(--rule); margin: var(--sp-3) 0; }
.vfc-details > summary  { font-family: var(--font-mono); font-size: var(--fs-label);
                          text-transform: uppercase; letter-spacing: .08em; color: var(--red);
                          padding: var(--sp-2) 0; cursor: pointer; list-style: none; }
.vfc-details > summary::after { content: " +"; }
.vfc-details[open] > summary::after { content: " −"; }
.vfc-details__body      { padding: 0 0 var(--sp-3); max-width: var(--measure); }

/* ============================ FOOTER ============================ */

.vfc-footer      { border-top: 3px double var(--ink); margin-top: var(--sp-6);
                   padding: var(--sp-4) 0; font-family: var(--font-mono); font-size: var(--fs-micro);
                   line-height: 1.7; color: var(--ink-soft); }
.vfc-footer a    { color: var(--ink); }

/* ============================ ACCESSIBILITY ============================ */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.vfc-skip { position: absolute; left: -9999px; }
.vfc-skip:focus { left: var(--sp-3); top: var(--sp-3); background: var(--ink); color: var(--paper);
                  padding: var(--sp-2) var(--sp-3); z-index: 100; }
:where(a, button, summary):focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

@media print {
  .vfc-nav.vfc-spine { display: none; }
  .vfc-details[open] .vfc-details__body { display: block; }
  .vfc-receipt { break-inside: avoid; }
}

/* ============================ POSITION SCALE ============================
   Separate from the brand palette. The accountability tracker needs to
   differentiate members, and hue alone should not carry that meaning:

   1. A green/amber/red traffic light reads as partisan scoring. This is a
      public-record project; the tracker documents POSITIONS ON THE RECORD,
      not good guys and bad guys. Scoring invites the deflection that the
      whole campaign is a partisan attack.
   2. ~8% of men have red/green colour deficiency. Hue-only status fails them.
   3. Green and gold are off-palette for newsprint.

   So: position is carried by BORDER TREATMENT first, hue second, and a
   text label always. Colourblind-safe, on-brand, and it reads as
   documentation instead of a scorecard.
   ========================================================================= */

.vfc-pos            { border-left: 6px solid var(--rule); padding: var(--sp-3) var(--sp-4);
                      margin: 0 0 var(--sp-3); background: #fff; }
.vfc-pos__label     { font-family: var(--font-mono); font-size: 11px; font-weight: 600;
                      text-transform: uppercase; letter-spacing: .1em; margin: 0 0 var(--sp-1); }
.vfc-pos__name      { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4);
                      margin: 0 0 var(--sp-1); }
.vfc-pos__body      { font-size: var(--fs-body); line-height: 1.5; margin: 0 0 var(--sp-2); }
.vfc-pos__cite      { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }

/* on record, acting, solid ink, filled marker */
.vfc-pos--acting    { border-left-color: var(--ink); border-left-style: solid; }
.vfc-pos--acting  .vfc-pos__label { color: var(--ink); }
.vfc-pos--acting  .vfc-pos__label::before { content: "\25A0\00A0"; }

/* on record, supportive, not yet acting */
.vfc-pos--stated    { border-left-color: var(--ink-soft); border-left-style: double; }
.vfc-pos--stated  .vfc-pos__label { color: var(--ink-soft); }
.vfc-pos--stated  .vfc-pos__label::before { content: "\25A3\00A0"; }

/* on record, opposed / advanced a pay-for off veterans */
.vfc-pos--opposed   { border-left-color: var(--red); border-left-style: solid; }
.vfc-pos--opposed .vfc-pos__label { color: var(--red); }
.vfc-pos--opposed .vfc-pos__label::before { content: "\25B2\00A0"; }

/* contacted, no response on the record */
.vfc-pos--silent    { border-left-color: var(--ink-mute); border-left-style: dashed; }
.vfc-pos--silent  .vfc-pos__label { color: var(--ink-mute); }
.vfc-pos--silent  .vfc-pos__label::before { content: "\25CB\00A0"; }

/* not yet approached */
.vfc-pos--none      { border-left-color: var(--rule); border-left-style: dotted; }
.vfc-pos--none    .vfc-pos__label { color: var(--ink-mute); }
.vfc-pos--none    .vfc-pos__label::before { content: "\00B7\00A0"; }

.vfc-pos-key        { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
                      font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
                      letter-spacing: .06em; color: var(--ink-soft);
                      border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
                      padding: var(--sp-2) 0; margin: 0 0 var(--sp-3); }

/* ---- inline myth chip, links any stereotype back to its rebuttal ---- */
.vfc-myth-chip { margin: 0 0 var(--sp-3); }
.vfc-myth-chip .vfc-myth-link { display: inline-block; padding: 3px 0; }


/* ============================ KEY FINDING ============================
   Reading-priority signal. One per section, ideally one per page. Sits at the
   TOP of its section, directly after the headline and the plain line and before
   the evidence, so the finding leads and the reader never hunts for it. Marks
   the sentence a reader should take away if they take nothing else. Never used for
   epistemic status: it always carries a content label chip as well, so the
   signal is carried by words and by shape, not by colour alone (WCAG 1.4.1).
   Crimson on white is 5.65:1, AA for body text; the 8px bar is 5.65:1 against
   the card and 4.99:1 against the page, both above the 3:1 non-text minimum
   (WCAG 1.4.11). Red-green colour vision deficiency does not affect luminance,
   so the bar stays a dark bar for the ~8% of men with CVD.
   Competing red left bars are demoted to ink so this stays unique.
   ==================================================================== */
.vfc-key-finding { background:#ffffff; border-left:8px solid #B8202E; padding:20px 22px 22px; margin:16px 0 0; color:#222222; }
.vfc-key-finding__head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
.vfc-key-finding__label { font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#B8202E; margin:0; }
.vfc-key-finding__body { font-family:'Newsreader',Georgia,serif; font-size:17.5px; line-height:1.55; margin:0; color:#222222; text-wrap:pretty; }
.vfc-key-finding__body + .vfc-key-finding__body { margin-top:12px; }


/* ============================ SECTION OPENER ============================
   Structural divider. Wraps a section's existing kicker, headline, evidence
   chip and plain line in a block closed by an ink rule above and below, so a
   long page scans as discrete sections instead of one run of copy. Deliberately
   quiet: ink rules, no fill, no label of its own, because it repeats many times
   per page and must never compete with the one KEY FINDING. Crimson is not used
   here for the same reason. Changes nothing about the elements inside it.
   ======================================================================= */
.vfc-section-open { border-top:3px solid #222222; border-bottom:1px solid #222222; padding:15px 0 14px; margin:0 0 24px; }
.vfc-section-open > :first-child { margin-top:0; border-top:none; padding-top:0; }  /* the opener supplies the rule; ruled kicker classes must not add a second */
.vfc-section-open > :last-child { margin-bottom:0; }
.vfc-section-open__meta { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:10px 0 0; }
/* the opener now supplies the break, so the hero does not also need a closing rule */
.vfc-ruled-073:has(+ section > .vfc-section-open:first-child) { border-bottom:none; }
@media print { .vfc-section-open { break-after:avoid; page-break-after:avoid; } }