@charset "UTF-8";
/* ==========================================================================
   INTEL FOCUS — THEME REFRESH
   An override layer for intel-focus-theme-v26. Loads *after* the theme's
   own style.css, so plain source order wins most ties; where the theme
   raises specificity (html[data-theme="light"] .nav.nav-brand) this file
   matches it exactly rather than reaching for !important.

   It changes no markup and no template. Deactivate the plugin and the
   site returns to v26 untouched.

   Design intent — the forensic dossier, not the SaaS landing page:
     · flat interactive surfaces, no gloss, no sheen, no gradient fills
     · shadows tinted to the ground, one light source, never to the accent
     · square-ish geometry: a case file, not an app icon
     · motion that reports progress through a document rather than decorates
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   The theme's own --accent-glow is threaded through nine different glow
   shadows. Re-pointing it at a ground-tinted value neutralises all of them
   at once; --accent-soft is left alone because focus rings still want blue.
   -------------------------------------------------------------------------- */
:root {
  /* Motion. The stock CSS easings are too weak to read as intentional. */
  --if-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --if-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --if-press: 140ms;
  --if-quick: 200ms;
  --if-settle: 320ms;
  --if-reveal: 720ms;

  /* Interactive fills. Brand blue #5271ff is 4.07:1 on white — it can carry
     rules, marks and large type, but never a white button label. These are
     the steps that do: #4763e8 = 4.98:1, #3d53e0 = 5.98:1, #2438c8 = 8.49:1. */
  --if-brand: #5271ff;
  --if-nav: #4763e8;
  --if-action: #3d53e0;
  --if-action-hover: #2f43c9;
  --if-action-press: #2438c8;

  /* Geometry. */
  --radius: 4px;
  --if-r-xs: 2px;
  --if-r-sm: 3px;

  /* Light falls from above, and lands on the page, not on the accent. */
  --accent-glow: rgba(0, 0, 0, 0.42);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 14px 40px rgba(0, 0, 0, 0.42);
  --if-shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.26);
  --if-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.28), 0 12px 28px rgba(0, 0, 0, 0.34);
  --if-hairline: rgba(255, 255, 255, 0.14);
}

html[data-theme="light"] {
  --accent-glow: rgba(20, 24, 40, 0.13);
  --shadow: 0 1px 2px rgba(20, 24, 40, 0.05), 0 12px 32px rgba(20, 24, 40, 0.08);
  --if-shadow-rest: 0 1px 2px rgba(20, 24, 40, 0.06);
  --if-shadow-lift: 0 2px 4px rgba(20, 24, 40, 0.07), 0 12px 28px rgba(20, 24, 40, 0.10);
  --if-hairline: rgba(34, 34, 34, 0.12);
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   Neo Sans Pro has no 600 weight, so hierarchy is carried by 500 / 700 / 800
   and by measure, never by italics.
   -------------------------------------------------------------------------- */
.hero h1,
.hero-headline,
.section-title,
.process-title,
.footer-cta,
.page-title,
.card-title,
h1, h2, h3 {
  text-wrap: balance;
}

.hero-dek,
.card-dek,
.footer-desc,
.process-step p,
p {
  text-wrap: pretty;
}

/* Figures in a dossier line up in columns. */
.hero-stat-num,
.process-step-num,
.stat-pop,
.card-meta,
.case-meta,
time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Small caps labels earn their tracking; display type gives some back. */
.hero h1,
.hero-headline { letter-spacing: -0.025em; }
.section-title { letter-spacing: -0.018em; }

/* --------------------------------------------------------------------------
   3. THE EYEBROW — removed site-wide.

   This is the blue kicker line that sat above a page's headline. It appeared
   in five places, all of them this one class:

     Homepage hero      "Open-Source Intelligence & Investigation"
     Homepage method    "The intelligence cycle"
     /reports/          "Intel Focus — Archive"
     /podcasts/         "Intel Focus — Archive"
     /about/            "Intel Focus"

   Hiding the element rather than just its text also drops its 22px bottom
   margin, so the headline closes the gap instead of leaving a hole. It takes
   the pulsing glow dot (.eyebrow::before) with it.

   Scope is deliberately narrow. Two neighbours look related and are not
   touched: .case-eyebrow, which wraps the "Report" category stamp at the top
   of an investigation, and .podcast-eyebrow, the red "Intel Focus Podcast"
   label on an episode. Different classes, different marks, still wanted.

   No !important is needed — the theme sets .eyebrow at (0,1,0) and this sheet
   loads after it. Nothing in the theme's JS reads the class.
   -------------------------------------------------------------------------- */
.eyebrow { display: none; }

/* Removing it takes 39px of vertical space with it — a 17px line box plus a
   22px bottom margin — which the headline underneath simply inherits. On the
   homepage that left the h1 sitting 20px under a fixed nav instead of 59px,
   which reads as cramped and nearly collides with the bar on scroll. Give the
   39px back to the hero's own top padding so the headline lands exactly where
   the layout was drawn for it. Only padding-top is set, so the theme's bottom
   padding is untouched.

   The homepage is the only template that needs this. The reports and podcasts
   archives set `padding:168px 0 50px` inline on their header, so they were
   never affected by the theme rule and still clear the nav by 50px. Pages
   using .page-hero were already hiding this element — the volunteers plugin
   ships `.page-hero .eyebrow{display:none}` — so nothing moves there either. */
.hero--tight { padding-top: 177px; }

@media (max-width: 600px) {
  .hero--tight { padding-top: 129px; }
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   The gloss came from three places at once: a 135deg gradient fill, a white
   sheen pseudo-element over the top half, and an accent-coloured drop glow
   that grew on hover while the button floated up two pixels. All four go.
   What replaces them is a flat accessible fill and a real press state.
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--if-r-sm);
  padding: 13px 24px;
  letter-spacing: 0.005em;
  transition:
    background-color var(--if-press) var(--if-ease-out),
    border-color var(--if-press) var(--if-ease-out),
    color var(--if-press) var(--if-ease-out),
    transform var(--if-press) var(--if-ease-out);
}

.btn-primary {
  background: var(--if-action);
  background-image: none;
  color: #fff;
  border-color: var(--if-action);
  box-shadow: none;
}

/* The sheen. */
.btn-primary::after { content: none; }

.btn-primary:hover {
  background: var(--if-action-hover);
  background-image: none;
  border-color: var(--if-action-hover);
  transform: none;
  box-shadow: none;
}

.btn-primary:active {
  background: var(--if-action-press);
  border-color: var(--if-action-press);
  transform: scale(0.97);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  border-radius: var(--if-r-sm);
}

.btn-ghost:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.btn-ghost:active { transform: scale(0.97); }

/* The theme's .case-content a rule (0,2,0) outranks .btn-primary's own
   colour (0,1,0), which renders any in-content button blue on blue. Restate
   at 0,3,0. <button> elements are unaffected; only anchors need this. */
.case-content a.btn.btn-primary,
.case-content a.btn.btn-primary:hover {
  color: #fff;
  text-decoration: none;
}
.case-content a.btn.btn-ghost,
.case-content a.btn.btn-ghost:hover {
  color: var(--text);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   5. THE BRAND BAR
   Stays Intel Focus blue in both themes so the white logo never changes —
   that identity decision is kept. What changes is that it is now one flat
   colour instead of a three-stop vertical gradient with a sheen over it,
   and the flat colour is the gradient's own bottom stop, #4763e8, which is
   the first step on the ramp where white nav links reach 4.5:1.
   -------------------------------------------------------------------------- */
.nav.nav-brand,
html[data-theme="light"] .nav.nav-brand {
  background: var(--if-nav);
  background-image: none;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.nav-gloss { display: none; }

.nav.nav-brand.scrolled,
html[data-theme="light"] .nav.nav-brand.scrolled {
  background: rgba(71, 99, 232, 0.93);
  background-image: none;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* A logo does not need a drop shadow to sit on its own brand colour. */
.nav.nav-brand .nav-logo img,
html[data-theme="light"] .nav.nav-brand .nav-logo img {
  filter: brightness(0) invert(1);
}
.nav.nav-brand .nav-logo:hover { transform: none; }

/* --------------------------------------------------------------------------
   6. CARDS
   Removed: the white sheen across the top 40%, the cursor-tracking radial
   wash, the five-pixel hover float and the blue glow beneath it. The card
   now moves two pixels, borrows a ground shadow, and lets its image do the
   moving — which is the part a reader actually reads as responsive.
   -------------------------------------------------------------------------- */
.card {
  border-radius: var(--radius);
  box-shadow: var(--if-shadow-rest);
  transition:
    transform var(--if-settle) var(--if-ease-out),
    box-shadow var(--if-settle) var(--if-ease-out),
    border-color var(--if-settle) var(--if-ease-out);
}

.card::before { content: none; }
.card::after { content: none; }

.card-img {
  background: var(--bg-elevated);
  background-image: none;
}

.card-img img {
  transition: transform 620ms var(--if-ease-out);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--if-shadow-lift);
    border-color: var(--border-strong);
  }
  .card:hover .card-img img { transform: scale(1.035); }
}

.card:active { transform: translateY(0) scale(0.995); }

/* Category tags: a filed label, squared off. */
.tag {
  border-radius: var(--if-r-xs);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   7. REMAINING GLOSS
   -------------------------------------------------------------------------- */
.podcast-feature::after,
.evidence-frame::after { content: none; }

.podcast-feature { border-radius: var(--radius); }
.podcast-art { background-image: none; background: var(--bg-elevated); }

.podcast-play {
  border-radius: var(--if-r-sm);
  box-shadow: var(--if-shadow-rest);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform var(--if-press) var(--if-ease-out);
}
.podcast-play:active { transform: scale(0.97); }

.newsletter-btn {
  background: var(--if-action);
  background-image: none;
  box-shadow: none;
  border-radius: var(--if-r-sm);
  transition:
    background-color var(--if-press) var(--if-ease-out),
    transform var(--if-press) var(--if-ease-out);
}
.newsletter-btn:hover {
  background: var(--if-action-hover);
  background-image: none;
  transform: none;
  box-shadow: none;
}
.newsletter-btn:active {
  background: var(--if-action-press);
  transform: scale(0.97);
}

.newsletter-input { border-radius: var(--if-r-sm); }

.search-submit {
  background: var(--if-action);
  background-image: none;
  box-shadow: none;
  border-radius: var(--if-r-sm);
}
.search-submit:hover { transform: translateY(-50%); background: var(--if-action-hover); }
.search-submit:active { transform: translateY(-50%) scale(0.94); }

.search-input:focus {
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-color: var(--accent);
}

/* Circles are an avatar convention; this is a monogram brand. */
.footer-social a { border-radius: var(--if-r-xs); }
.about-pill { border-radius: var(--if-r-xs); }

/* The partner mark does not need to glow to be seen. */
.pantheon-svg { filter: none; opacity: 1; }

/* Share row: keep the platform colours, drop the coloured glows. */
.share-btn {
  border-radius: var(--if-r-sm);
  background-image: none;
  transition:
    background-color var(--if-press) var(--if-ease-out),
    border-color var(--if-press) var(--if-ease-out),
    transform var(--if-press) var(--if-ease-out);
}
.share-btn:hover { box-shadow: none; }
.share-btn:active { transform: scale(0.94); }

/* --------------------------------------------------------------------------
   8. FOCUS
   The theme ships no visible focus indicator. Two rings are needed, because
   a blue ring is invisible against the blue brand bar.
   -------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--if-r-xs);
}

.nav.nav-brand :where(a, button):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   9. SCROLL STORYTELLING
   Everything below is additive: new classes the JS layer attaches. Nothing
   here depends on markup the theme does not already ship, and every piece
   is inert until its element exists.
   -------------------------------------------------------------------------- */

/* 9a. Read progress — a hairline of brand blue pinned under the fixed nav.
       On a report it answers "how much is left", which is the single most
       useful thing a long investigation can tell a reader. */
.if-progress {
  position: fixed;
  left: 0;
  top: var(--if-nav-h, 118px);
  height: 2px;
  width: 100%;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}

.if-progress-bar {
  height: 100%;
  width: 100%;
  background: var(--if-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* 9b. Section rail — a vertical index down the left margin. Each tick is a
       section; the current one fills and takes its label. Desktop only, and
       only where there is margin to spare. */
.if-rail {
  position: fixed;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 14px;
  pointer-events: auto;
}

/* The content wrap is max 1240px + 32px padding, so at 1560px the first
   column of text starts at 192px. The rail plus its widest label must
   finish before that or it sits on top of the page. */
@media (min-width: 1560px) {
  .if-rail { display: flex; }
}

.if-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  color: var(--text-faint);
  font-family: 'Neo Sans Pro', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: color var(--if-quick) var(--if-ease-out);
}

.if-rail-tick {
  display: block;
  width: 14px;
  height: 2px;
  flex: none;
  background: currentColor;
  opacity: 0.5;
  transition:
    width var(--if-settle) var(--if-ease-out),
    opacity var(--if-settle) var(--if-ease-out);
}

.if-rail-label {
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--if-quick) var(--if-ease-out),
    transform var(--if-quick) var(--if-ease-out);
  white-space: nowrap;
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.if-rail-item:hover,
.if-rail-item:focus-visible { color: var(--text-dim); }

.if-rail-item:hover .if-rail-label,
.if-rail-item:focus-visible .if-rail-label,
.if-rail-item[aria-current="true"] .if-rail-label {
  opacity: 1;
  transform: none;
}

.if-rail-item[aria-current="true"] { color: var(--accent); }
.if-rail-item[aria-current="true"] .if-rail-tick { width: 26px; opacity: 1; }

/* 9c. Reveals. The theme fades and lifts; adding a short blur closes the
       gap between the two states so the element resolves rather than
       slides. Stagger index is set once per element by the JS. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity var(--if-reveal) var(--if-ease-out),
    transform var(--if-reveal) var(--if-ease-out),
    filter var(--if-reveal) var(--if-ease-out);
  transition-delay: calc(var(--if-i, 0) * 60ms);
}

.reveal.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* 9d. Section heads draw their own rule as the section arrives — the
       dossier equivalent of a page break. */
.if-ruled { position: relative; }

.if-ruled::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 1px;
  background: var(--if-hairline);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 900ms var(--if-ease-in-out);
}

.if-ruled.in::after { transform: scaleX(1); }

/* 9e. Scrubbed stat figures. */
.if-count { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   10. REDUCED MOTION
   Fewer and gentler, not none: opacity still carries comprehension, movement
   and blur do not.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none;
    filter: none;
    transition: opacity 200ms ease;
    transition-delay: 0ms;
  }
  .if-ruled::after { transition: none; transform: scaleX(1); }
  .if-progress { display: none; }
  .card-img img { transition: none; }
  .card:hover { transform: none; }
  .card:hover .card-img img { transform: none; }
  .btn-primary:active,
  .btn-ghost:active,
  .share-btn:active,
  .newsletter-btn:active { transform: none; }
}