/* Self-hosted webfonts (no third-party requests -- house rule). */
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;
  font-display:swap;src:url("fonts/LibreCaslonText-400.woff2") format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:700;
  font-display:swap;src:url("fonts/LibreCaslonText-700.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;
  font-display:swap;src:url("fonts/PublicSans-var.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:italic;font-weight:100 900;
  font-display:swap;src:url("fonts/PublicSans-italic-var.woff2") format("woff2")}
:root{
  --ground:#FFFFFF; --raised:#F2F5F9; --rule:#D8DEE9;
  --text:#1B2A41; --dim:#5A6B82; --faint:#5F7089;
  --bar:#0A3161; --signal:#B31942; --warn:#8F5B00;
  --display:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --body:"Public Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",ui-monospace,monospace;
}
/* Alias tokens: the sibling sites' historical variable names, pinned to
   this sheet's values -- one file themes every site on the domain. */
:root{
  --bg:var(--ground); --card:var(--raised); --edge:var(--rule);
  --ink:var(--text); --pink:var(--signal); --gold:#7A5E15;
}
/* Shared data-table treatment for the sibling sites (this site has no
   bare tables; dense data stays quiet). */
table{border-collapse:collapse;width:100%}
th{background:var(--bar);color:#FFFFFF;text-align:left;
  padding:8px 12px;font-weight:600;font-size:14px}
td{padding:7px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:nth-child(even){background:var(--raised)}
*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px 96px}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
::selection{background:#0A3161;color:#FFFFFF}

/* --- masthead ------------------------------------------------------ */
.top{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;padding:22px 20px 16px;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 8l3.3 10.2h10.7l-8.6 6.2 3.3 10.2L36 28.4l-8.7 6.2 3.3-10.2-8.6-6.2h10.7z' fill='%23FFFFFF' fill-opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#0A3161,#061E3F);
  border-bottom:3px solid transparent;
  border-image:linear-gradient(180deg,#B31942 0 1px,#FFFFFF 1px 2px,#B31942 2px 3px) 1;
  margin-top:18px;
}
.top b{color:#FFFFFF;font-weight:700;font-family:var(--display)}
.back{text-decoration:none;color:#FFFFFF}
.back:hover{color:#F2F5F9}

.top .method{color:#FFFFFF;text-decoration:none}
.top .method:hover{color:#F2F5F9;text-decoration:underline;text-underline-offset:3px}

/* --- section strip -------------------------------------------------- */
/* The nav is pill rows, the same idiom as the story-page filter tabs:
   every entry is a contained unit, everything is visible, nothing
   scrolls. A hanging caption column labels each row, so a "Health"
   section and a "Health" topic read as different things. */
.navs{
  margin-top:20px;padding:14px 0 6px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.sections{
  display:grid;grid-template-columns:64px 1fr;column-gap:14px;
  align-items:baseline;padding:0 0 10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;
}
.sections.topics{font-size:10px}
.nav-cap{
  font-size:9px;letter-spacing:.16em;color:var(--dim);
  padding-top:5px;
}
.nav-links{display:flex;flex-wrap:wrap;gap:8px}
.sections a{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:4px 10px;border:1px solid var(--rule);border-radius:3px;
  color:var(--dim);text-decoration:none;white-space:nowrap;
}
.sections a:hover{border-color:var(--faint);color:var(--text)}
.sections a.here{
  background:var(--raised);border-color:var(--dim);color:var(--text);
  font-weight:600;
}
.sections a span{color:var(--faint)}
.sections a:hover span{color:var(--dim)}
/* The hole badge echoes .bar.void: an outlined box is the site's mark
   for silence, so the nav's only color is, as everywhere, absence.
   A bare number - the phrase lives in the tooltip. */
.sections .hole{
  color:var(--signal);font-weight:600;
  border:1px solid var(--signal);border-radius:2px;padding:0 3px;
  font-size:9px;
}

.hero{
  padding:44px 0 34px;border-bottom:3px solid transparent;
  border-image:linear-gradient(180deg,#B31942 0 1px,#FFFFFF 1px 2px,#B31942 2px 3px) 1;
}
.hero h1{
  margin:0;font-family:var(--display);font-weight:600;
  /* Upper bound is the house maximum, 52px -- the size of the NFFV h1.
     It was 88px, which only ever showed on wide screens because the
     middle term is viewport-relative; that is also why a font audit
     scanning for `font-size:<number><unit>` never saw it. The floor and
     the scaling rate are unchanged, so narrow screens look identical and
     the heading simply stops growing at the cap. */
  font-size:clamp(30px,5vw,40px);line-height:1.04;
  letter-spacing:-.015em;text-transform:uppercase;
}
.hero h1 u{text-decoration:none;color:var(--signal)}
.hero p{margin:18px 0 0;max-width:52ch;color:var(--dim);font-size:15px}

.legend{display:flex;align-items:flex-end;gap:38px;margin-top:34px;flex-wrap:wrap}
.legend .axis{display:flex;gap:6px;margin-top:7px;font-family:var(--mono);
  font-size:10px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.legend .axis span{width:14px;text-align:center}
.legend .note{margin:0;font-family:var(--mono);font-size:11px;
  color:var(--dim);letter-spacing:.06em;line-height:1.9}
.legend .note span{display:block;white-space:nowrap}
.legend .note i{display:inline-block;width:8px;height:12px;
  vertical-align:-2px;margin-right:9px}
.k-void{border:1px solid var(--signal);border-radius:2px}
.k-thin{background:var(--warn)}

/* --- meter --------------------------------------------------------- */
.meter{display:flex;align-items:flex-end;gap:6px;height:38px}
.bar{width:14px;display:block;border-radius:1px}
.bar.on{background:var(--bar)}
.bar.on.thin{background:var(--warn)}
.bar.off{height:3px;background:var(--faint)}
.bar.void{
  height:38px;background:transparent;border:1px solid var(--signal);
  border-radius:2px;box-shadow:inset 0 0 0 1px rgba(179,25,66,.14);
}

/* --- feed grid ----------------------------------------------------- */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(304px,1fr));
  gap:30px 26px;padding:36px 0 0;
}
.card{
  display:flex;flex-direction:column;
  animation:rise .5s cubic-bezier(.2,.7,.3,1) both;
}
.card .hit{text-decoration:none;display:block}
.shot{
  aspect-ratio:16/9;border:1px solid var(--rule);
  border-radius:3px;overflow:hidden;
}
/* The stripes sit under every thumbnail, not only the declared-empty
   box: a copy that 404s shows through as the same empty frame, with no
   script needed to swap classes. */
.shot,.shot.empty{
  background:
    repeating-linear-gradient(135deg,#F2F5F9 0 11px,#E6EBF2 11px 22px);
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot.wide{aspect-ratio:21/9;margin:22px 0 0}
.card-body{padding:14px 0 0}
.card h2{
  margin:0;font-family:var(--display);font-weight:500;
  font-size:19px;line-height:1.26;letter-spacing:-.004em;
}
.card .hit:hover h2{color:#B31942;text-decoration:underline;
  text-decoration-color:var(--faint);text-underline-offset:3px}
.card.silent h2,.card.thin h2{font-weight:600}
.card-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:16px;
}
.card-foot .count{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--dim);text-transform:uppercase;text-align:right;
}

.flag{
  margin:0 0 9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;
}
.flag.silent{color:var(--signal)}
.flag.thin{color:var(--warn)}
.empty-note{padding:60px 0;color:var(--dim)}

/* --- story page ---------------------------------------------------- */
.story-page{max-width:1120px}
.story-head{
  padding:30px 0 26px;border-bottom:3px solid transparent;
  border-image:linear-gradient(180deg,#B31942 0 1px,#FFFFFF 1px 2px,#B31942 2px 3px) 1;
}
/* Title and hero image are doors to their source - same ink, no new
   color; the underline on hover is the only tell. */
.story-head h1 a{color:inherit;text-decoration:none}
.story-head h1 a:hover{text-decoration:underline}
.shot-link{display:block}
.story-head h1{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(24px,3.8vw,34px);line-height:1.1;letter-spacing:-.01em;
}
.split{display:flex;height:26px;margin:26px 0 0;border-radius:3px;overflow:hidden}
.seg{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;min-width:0;
}
.seg b{font-weight:600;opacity:.9}
.seg-left{background:#3D6DB5;color:#FFFFFF}
.seg-center{background:#66738C;color:#FFFFFF}
.seg-right{background:#B54040;color:#FFFFFF}
.split-key{
  margin:10px 0 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--dim);
}

/* --- how each side titled it --------------------------------------- */
.framing{padding:30px 0 0}
.framing h2{
  margin:0 0 18px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.frames{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.frame{border-left:2px solid var(--rule);padding-left:16px}
.frame-left{border-left-color:#3D6DB5}
.frame-right{border-left-color:#B54040}
.frame-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;
}
.frame-head b{font-family:var(--body);font-size:13px;letter-spacing:0;
  text-transform:none;font-weight:600}
.frame h3{
  margin:8px 0 0;font-family:var(--display);font-weight:500;
  font-size:20px;line-height:1.3;
}
.frame h3 a{text-decoration:none}
.frame h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.frame-void{
  border:1px dashed var(--signal);border-radius:3px;
  padding:14px 16px;display:flex;align-items:center;
}
.frame-void p{
  margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--signal);
}
.frames-key{
  margin:12px 0 0;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;color:var(--faint);
}

/* --- who got there first ------------------------------------------- */
.timeline{padding:30px 0 0}
.timeline h2{
  margin:0 0 16px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
/* Side by shape, color as reinforcement only: the muted tints are too
   close to tell apart on a 3px line. Left rises above the track, right
   hangs below, center spans it. */
.track{
  position:relative;height:12px;margin:12px 2px 12px;
  background:var(--raised);border:1px solid var(--rule);border-radius:3px;
}
.tick{position:absolute;width:3px;border-radius:1px;background:var(--bar)}
.tick.side-left{top:-10px;height:14px;background:#3D6DB5}
.tick.side-right{bottom:-10px;height:14px;background:#B54040}
.tick.side-center{top:-4px;bottom:-4px;background:var(--dim)}
.timeline-legend{
  margin:0 0 10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;color:var(--dim);
}
.timeline-key{
  margin:0;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--dim);
}
.timeline-key b{color:var(--text);font-weight:600}
.timeline-order{
  margin:8px 0 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--dim);line-height:1.9;
}
.timeline-order i{font-style:normal;color:var(--faint)}

/* --- what each side is saying -------------------------------------- */
.says{padding:30px 0 4px}
.says h2{
  margin:0 0 20px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.says ul{margin:0;padding:0;list-style:none;display:grid;gap:18px}
.say{
  padding-left:17px;border-left:2px solid var(--rule);
  transition:border-color .16s;
}
.say:hover{border-left-color:var(--dim)}
.say-hit{display:block;text-decoration:none}
.say-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.say-head b{font-size:13px;font-weight:600}
.say-hit:hover .say-head b{text-decoration:underline;text-underline-offset:3px}
.say p{margin:7px 0 0;color:#1B2A41;font-size:15px;line-height:1.55}
.say-go{
  display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
}
.say-hit:hover .say-go{color:var(--dim)}
.says-key{
  margin:22px 0 0;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;color:var(--faint);
}

/* --- all-stories list ---------------------------------------------- */
.more{margin:38px 0 0;text-align:right}
.more a{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);text-decoration:none;
}
.more a:hover{color:var(--text)}
.mark{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;
}
.mark.silent{color:var(--signal)}
.mark.thin{color:var(--warn)}

/* --- listings: Top 10, Latest, all/section/topic - one card grid ---- */
/* Held back from the front page (all.html) - dimmed, never hidden. */
.card.held h2{color:var(--dim)}
/* "on X" rides inside an existing metadata line: same size, same color. */
a.onx{color:inherit;text-decoration:underline;text-underline-offset:2px}
a.onx:hover{color:var(--text)}
.top10 h2,.latest-cap{
  margin:0;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
}
.latest-cap{margin:44px 0 0}

/* --- about / methodology ------------------------------------------- */
.about h2{
  margin:36px 0 8px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.about p{max-width:64ch;color:#1B2A41;font-size:15px;line-height:1.65;margin:10px 0}
.about .rule-num{color:var(--text);font-weight:600}
.lean-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;margin-top:16px;
}
.lean-col{border-left:2px solid var(--rule);padding-left:13px}
.lean-col h3{
  margin:0 0 7px;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
}
.lean-col h3 b{color:var(--text)}
.lean-col ul{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.85}
.lean-col a{text-decoration:none;color:#1B2A41}
.lean-col a:hover{text-decoration:underline;text-underline-offset:3px}
.lean-col .fact{
  font-family:var(--mono);font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;font-style:normal;color:var(--faint);
  margin-left:5px;
}
/* Ownership: a quiet sub-line, context not verdict. */
.lean-col .own{
  display:block;font-size:11px;line-height:1.5;color:var(--faint);
  margin:-2px 0 4px;
}
/* Provenance: the raters' own labels, verbatim, mono like the rules. */
.lean-col .prov{
  display:block;font-family:var(--mono);font-size:9px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
  margin:-2px 0 6px;
}
.foot a{color:#F2F5F9}
.foot a:hover{color:#FFFFFF}

.feed{padding:26px 0 0}
.f{position:absolute;opacity:0;pointer-events:none}
.feed-key{
  margin:0 0 12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--dim);
}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tab{
  display:inline-flex;align-items:baseline;gap:7px;padding:7px 13px;
  border:1px solid var(--rule);border-radius:3px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);
}
.tab b{color:var(--faint);font-weight:600}
.tab:hover{border-color:var(--faint);color:var(--text)}
.f-all:checked~.tabs .tab[for="f-all"],
.f-left:checked~.tabs .tab[for="f-left"],
.f-center:checked~.tabs .tab[for="f-center"],
.f-right:checked~.tabs .tab[for="f-right"]{
  background:var(--raised);border-color:var(--dim);color:var(--text);
}
.f-left:checked~.sources .src:not(.side-left),
.f-center:checked~.sources .src:not(.side-center),
.f-right:checked~.sources .src:not(.side-right){display:none}
/* Second and third filter dimensions - factuality and location. Each
   checked non-All radio contributes its own display:none rule, so the
   dimensions compose by intersection with zero script. An ungraded row
   has no fact- class and is honestly hidden by every specific tab. */
.g-high:checked~.sources .src:not(.fact-high),
.g-mixed:checked~.sources .src:not(.fact-mixed),
.g-low:checked~.sources .src:not(.fact-low),
.l-us:checked~.sources .src:not(.loc-us),
.l-uk:checked~.sources .src:not(.loc-uk){display:none}
.g-all:checked~.tabs .tab[for="g-all"],
.g-high:checked~.tabs .tab[for="g-high"],
.g-mixed:checked~.tabs .tab[for="g-mixed"],
.g-low:checked~.tabs .tab[for="g-low"],
.l-all:checked~.tabs .tab[for="l-all"],
.l-us:checked~.tabs .tab[for="l-us"],
.l-uk:checked~.tabs .tab[for="l-uk"]{
  background:var(--raised);border-color:var(--dim);color:var(--text);
}
.tabs-sub{margin-top:-12px}
.tab-cap{
  align-self:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  margin-right:4px;
}
.f:focus-visible~.tabs .tab{outline:none}
.f-all:focus-visible~.tabs .tab[for="f-all"],
.f-left:focus-visible~.tabs .tab[for="f-left"],
.f-center:focus-visible~.tabs .tab[for="f-center"],
.f-right:focus-visible~.tabs .tab[for="f-right"]{
  outline:2px solid var(--signal);outline-offset:2px;
}

.src{padding:18px 0;border-top:1px solid var(--rule)}
.src-head{
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;
}
.src-head b{font-family:var(--body);font-size:13px;letter-spacing:0;
  text-transform:none;font-weight:600}
.src-head time{color:var(--faint)}
.tag{padding:2px 7px;border:1px solid var(--rule);border-radius:2px;color:var(--dim)}
.tag-left{color:#3D6DB5}
.tag-right{color:#B54040}
.src h3{
  margin:9px 0 0;font-family:var(--display);font-weight:500;
  font-size:19px;line-height:1.3;
}
.src h3 a{text-decoration:none}
.src h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.read{
  display:inline-block;margin-top:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  text-decoration:none;
}
.read:hover{color:var(--text)}

.foot{
  padding:26px 20px;margin-top:34px;background:#061E3F;
  font-family:var(--mono);font-size:11px;color:#FFFFFF;
  letter-spacing:.04em;line-height:1.75;
}
.foot::after{content:"\2605";display:block;margin-top:10px;color:#C9A227}

@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

@media (max-width:720px){
  .wrap{padding:0 18px 72px}
  .grid{grid-template-columns:1fr;gap:26px}
  .shot.wide{aspect-ratio:16/9}
  .frames{grid-template-columns:1fr}
  .sections{grid-template-columns:1fr;row-gap:7px}
  .nav-cap{padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .card{animation:none}
  *{transition:none!important}
}