/* ==========================================================================
   VISIONFI EDITORIAL LAYER  (visionfi.ai)
   usage: <link rel="stylesheet" href="/assets/visionfi-core.css">
          <link rel="stylesheet" href="/assets/visionfi-site.css">
          <link rel="stylesheet" href="/assets/learn.css">

   Reading styles for the education-focused site: the article page, the
   /learn index, the section heads and the footer helpers. Load AFTER
   visionfi-core.css — this file overrides a few of its defaults.

   The masthead nav is NOT here — it is chrome both sites share, so it lives
   in visionfi-site.css. This file is visionfi.ai's editorial layer only.

   NAMING. Every class here is prefixed `e-` (editorial). visionfi-core.css
   owns a lot of short generic names — .rail is a 2px animated conduit,
   .strip is a metrics grid, .cols/.legal belong to .site-footer, .statement
   is a full-bleed band. An unprefixed collision silently renders as
   something else. Classes deliberately reused from core, unprefixed:
   .wrap .wordmark .btn .statement .tagpill .callout .site-footer.

   v4 rule, inherited: black #0d0d0d carries all actions. Orange #F26334 is
   artwork and accent only, never a button.
   ========================================================================== */

body { color: var(--color-ink-cool); }
.site-nav .wordmark span { color: var(--color-scout-orange); }
a { text-decoration: none; }
.wrap { max-width: 1240px; padding: 0 40px; }

/* ---- Kicker: CATEGORY + read length ------------------------------------ */
.e-kicker { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-dim); }
.e-kicker b { color: var(--color-ink); font-weight: 600; }

/* ---- Section head: title left, "view all" right ------------------------ */
.e-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: 36px; }
.e-head h2 { font-weight: 600; font-size: 24px; letter-spacing: -.01em; margin: 0; }
.e-more { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-light); }
a.e-more:hover { color: var(--color-ink-cool); }

/* ---- Article ----------------------------------------------------------- */
.e-article { padding: 64px 0 96px; }
.e-article .wrap { max-width: 820px; }
.e-article h1 { font-weight: 600; font-size: clamp(30px, 4vw, 50px); line-height: 1.1;
  letter-spacing: -.025em; margin: 14px 0 0; }
.e-standfirst { font-size: 19px; line-height: 1.55; color: var(--color-text-light);
  margin: 18px 0 0; max-width: 60ch; }

.e-prose { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--color-border); }
.e-prose > * + * { margin-top: 20px; }
.e-prose p { font-size: 16.5px; line-height: 1.7; color: #40403c; margin-bottom: 0;
  max-width: 68ch; }
.e-prose h2 { font-weight: 600; font-size: 24px; letter-spacing: -.015em;
  margin: 44px 0 0; padding-top: 0; }
.e-prose h3 { font-weight: 600; font-size: 18px; margin: 32px 0 0; }
.e-prose ul, .e-prose ol { max-width: 68ch; padding-left: 22px; }
.e-prose li { font-size: 16.5px; line-height: 1.7; color: #40403c; margin-top: 8px; }
/* Tight horizontal padding: a wider box reads as a space before the comma
   that follows it. */
.e-prose code { font-family: var(--font-mono); font-size: .88em;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 3px; padding: 1px 3px; }
.e-prose pre { background: var(--color-dk-bg); color: #ececec; border-radius: var(--radius-md);
  padding: 18px 20px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px;
  line-height: 1.6; }
.e-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.e-prose blockquote { border-left: 3px solid var(--color-scout-orange);
  padding: 4px 0 4px 22px; margin: 36px 0; font-family: var(--font-heading);
  font-weight: 500; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.3;
  letter-spacing: -.02em; color: var(--color-ink-cool); max-width: none; }
/* Section break. The articles use `---` between movements; a full rule would
   shout, so this is a short centred hairline. */
.e-prose hr { border: 0; height: 1px; width: 96px; margin: 44px 0;
  background: var(--color-border); }
.e-prose figure { margin: 36px 0; }
.e-prose figure img { width: 100%; height: auto; display: block; border-radius: 10px; }
.e-prose figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--color-text-dim); }
.e-prose .callout { margin: 32px 0; }
.e-prose .callout p { max-width: none; }

/* ---- Next up: two related articles ------------------------------------- */
.e-next { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px;
  padding-top: 32px; border-top: 1px solid var(--color-border); }
.e-next a { display: grid; gap: 8px; align-content: start; }
.e-nexttitle { font-family: var(--font-heading); font-weight: 500; font-size: 18px;
  line-height: 1.3; letter-spacing: -.01em; color: var(--color-ink-cool); }
.e-next a:hover .e-nexttitle { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; }

/* ---- /learn index ------------------------------------------------------ */
.e-index { display: grid; }
.e-entry { display: grid; grid-template-columns: 150px 1fr 110px; gap: 24px;
  align-items: baseline; padding: 24px 0; border-top: 1px solid var(--color-border); }
.e-index .e-entry:last-child { border-bottom: 1px solid var(--color-border); }
.e-entry .e-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-dim); }
.e-entry .e-etitle { font-family: var(--font-heading); font-weight: 500; font-size: 18px;
  line-height: 1.35; letter-spacing: -.01em; color: var(--color-ink-cool); }
.e-entry .e-blurb { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.6;
  color: var(--color-text-light); max-width: 62ch; }
.e-entry .e-len { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-dim); text-align: right; }
a.e-entry:hover .e-etitle { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; }
/* An entry whose article is not published yet. Not a link. */
.e-entry.is-draft { opacity: .5; }
.e-entry.is-draft .e-len { text-transform: none; letter-spacing: .04em; }

/* ---- Footer helpers (core owns .site-footer / .cols / .legal) ---------- */
.site-footer .e-about { max-width: 320px; }
.site-footer .e-about p { margin: 12px 0 0; line-height: 1.6; color: inherit; }
.site-footer .e-aside { max-width: 260px; }
.site-footer .e-aside p { margin: 0; line-height: 1.6; color: inherit; }
.site-footer .e-aside a { color: var(--color-dk-text); }
.site-footer .e-flabel { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-dk-text); margin: 0 0 8px; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1000px) {
  .e-next { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 22px; }
  .e-article { padding: 40px 0 72px; }
  .e-entry { grid-template-columns: 1fr; row-gap: 8px; }
  .e-entry .e-len { text-align: left; }
}