/* blog-index.css: the blog index only (blog.html). Posts keep blog.css alone.

   Every post leads with the one number it is about (27 CF in a yard, 500 psi
   before the blankets come off). Calm on purpose: no scroll motion, only a
   headline colour change on hover. Colours come from base.css tokens so the
   light and dark themes both work without a second set of values. */

.fn { max-width: 1240px; }
.fn .blog-card { color: var(--text); text-decoration: none; }

/* ── masthead ─────────────────────────────────────────── */
.fn-hero { padding: 56px 0 20px; }
.fn-eyebrow,
.fn .fn-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text3);
}
.fn-hero h1 {
  margin: 10px 0 14px;
  font-family: var(--font-sans);
  font-size: clamp(42px, 7vw, 104px);
  line-height: .94;
  letter-spacing: -.05em;
  font-weight: 800;
  color: var(--text);
  max-width: 12ch;
  text-wrap: balance;
}
.fn-hero h1 em { font-style: normal; color: var(--accent-ink, var(--accent)); }
.fn-hero p { margin: 0; max-width: 52ch; font-size: 18px; color: var(--text2); }
.fn .bx-tools { border-bottom: 0; }

/* ── featured guide ───────────────────────────────────── */
.fn .fn-feat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  margin: 12px 0 36px;
  padding: clamp(28px, 4vw, 56px);
  border: 0;
  border-radius: 28px;
  background: var(--accent);
  color: #fff;            /* 4.95:1 on --accent, per base.css */
}
.fn-big {
  position: absolute;
  right: -.06em;
  bottom: -.2em;
  z-index: -1;
  font-size: clamp(220px, 32vw, 500px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.08em;
  color: rgba(0, 0, 0, .14);
}
.fn .fn-feat .fn-meta { color: #fff; }
.fn .fn-feat h2 {
  margin: 10px 0 12px;
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.3vw, 44px);
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
}
.fn .fn-feat:hover h2 { color: #fff; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.fn .fn-feat p { margin: 0 0 22px; max-width: 46ch; color: rgba(255, 255, 255, .92); }
.fn .fn-feat .fn-btn { background: #fff; color: #2f50c4; }
.fn .fn-feat .fn-dia { padding: 18px; border-radius: 18px; transform: rotate(-2deg); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .6); }

/* ── rows ─────────────────────────────────────────────── */
.fn .fn-list { display: block; }
.fn .fn-row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) 220px;
  gap: 32px;
  align-items: center;
  padding: 32px 0;
  border: 0;
  border-top: 1.5px solid var(--border);
}
.fn-fig { display: grid; gap: 6px; min-width: 0; }
.fn-fig b {
  font-size: clamp(60px, 8.6vw, 140px);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.06em;
  white-space: nowrap;
  color: var(--accent-ink, var(--accent));
}
.fn-fig.fn-ink b { color: var(--text); }
.fn-fig span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text3);
}
.fn .fn-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.fn .fn-meta .cat { font-weight: 600; }
.fn .fn-row h2 {
  margin: 8px 0;
  font-family: var(--font-sans);
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 800;
  text-wrap: balance;
}
.fn .fn-row p { margin: 0; max-width: 52ch; color: var(--text2); }
.fn-dia {
  aspect-ratio: 5 / 3;
  padding: 10px;
  border-radius: 14px;
  background: var(--surface);
}
.fn-dia svg { display: block; width: 100%; height: 100%; }

/* ── closing pitch ────────────────────────────────────── */
.fn-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.fn-blue { background: var(--accent); color: #fff; }
.fn-ghost { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); }
.fn-closer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 24px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.fn-closer h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 800;
  color: var(--text);
}
.fn-closer p { margin: 10px 0 0; max-width: 48ch; color: var(--text2); }
.fn-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 899px) {
  .fn .fn-feat { grid-template-columns: 1fr; }
  .fn .fn-row { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .fn .fn-row .fn-dia { display: none; }
  .fn-closer { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fn-hero { padding-top: 32px; }
  .fn-hero p { font-size: 16px; }
}

/* The search and category filter hide cards with .hidden; keep that winning
   over the display rules above. */
.fn .blog-card.hidden { display: none; }

/* Big blue words use the real brand blue in dark too (Jared, 2026-10-09).
   Large text, so 3:1 is the bar; small blue text keeps the lighter ink. */
html[data-theme="dark"] .fn-hero h1 em,
html[data-theme="dark"] .fn-fig b { color: #3a62e0; }