/* ============================================================================
   /manifesto/ · The AI Business Manifesto.

   A long-read landing page. It arrived as a standalone HTML file with its own
   palette, its own fonts and its own header; this file is that design put onto
   the site chassis. Three things changed and each one is a rule, not a taste:

   1. FONTS. The original pulled Space Grotesk and Newsreader from
      fonts.googleapis.com. css/fonts.css exists specifically to get the site
      off that origin — a render-blocking stylesheet that has to resolve before
      the browser even learns which font files it needs. Body type is Archivo
      (the site's sans, already self-hosted) and the editorial serif is a
      system stack, which costs zero bytes and is on every machine that will
      read this. Nothing here loads from a third-party origin.

   2. THEME. The original was paper-only. The site is dark by default with a
      working toggle in the header, so a light-only page would ignore a choice
      the visitor already made. Everything below is expressed in two surface
      roles — the PAGE and the FEATURE (the hero, the pull-quote panels, the
      "start the record" fork) — and each theme fills them. In light that is
      the manifesto exactly as authored: dark panels on paper. In dark the page
      is the site's ground and the feature panels are raised off it, with the
      accent orbs carrying the same visual weight the inversion used to.

   3. NAMESPACE. Every class here is prefixed `mf-`. The original used `.wrap`,
      `.btn` and `.callout`, all of which already mean something else in
      site.css. Buttons are the exception and are deliberately NOT namespaced:
      they use the site's own .btn/.btn-primary/.btn-ghost, because a CTA on
      this page should be the same object as a CTA anywhere else.

   Loaded after theme.css so the light-mode overrides can sit beside the dark
   rules they answer. Drop the <link> and the page loses its layout but keeps
   every word in reading order.
   ============================================================================ */

/* ---- the two surface roles ----------------------------------------------
   Dark is the default because the site's :root is dark. FEATURE is the raised
   panel; in light it inverts to near-black, which is the authored design. */
.mf{
  --mf-page:var(--bg);
  --mf-card:var(--bg-2);
  --mf-line:var(--line);
  --mf-line-2:var(--line-2);

  --mf-feature:var(--bg-3);
  --mf-feature-ink:var(--ink);
  --mf-feature-ink-2:var(--ink-2);
  --mf-feature-ink-3:var(--ink-3);
  --mf-feature-ink-4:var(--ink-4);
  --mf-feature-line:var(--line);

  /* The editorial serif. Not downloaded: a system serif is on every machine
     that will read this, and the manifesto's argument does not depend on
     which one. */
  --mf-serif:ui-serif,'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;

  background:var(--mf-page);
  color:var(--ink);
}

:root[data-theme="light"] .mf{
  /* The authored palette: dark panels on paper. These are literals rather than
     tokens because they are the *inverse* of the light theme — the one place
     on the site where a dark surface is correct in light mode. */
  --mf-feature:#0E0F12;
  --mf-feature-ink:#F4F2EE;
  --mf-feature-ink-2:#B8B5AF;
  --mf-feature-ink-3:#9C9A96;
  --mf-feature-ink-4:#6E6C68;
  --mf-feature-line:#1C1D22;
}

/* Every other page on the site scrolls a light ground under the light-mode
   header, so its 78%-opaque paper reads as paper. This page scrolls a dark
   hero under it, and 22% of near-black through a blur is a muddy grey band
   rather than a header. Solid on this page only. */
:root[data-theme="light"] .mf header{background:var(--bg)}

/* Controls that sit ON the inverted hero, not on the page ground. In light
   mode .btn-ghost is a white pill, which is the right answer everywhere the
   ground is paper and the wrong one here.

   The selector carries the theme prefix in both branches so it outweighs
   theme.css's own `:root[data-theme="light"] .btn-ghost`, which is three
   class-level parts and would otherwise win. */
.mf .mf-hero .btn-ghost,
:root[data-theme="light"] .mf-hero .btn-ghost{
  background:transparent;color:var(--mf-feature-ink-2);border-color:var(--mf-feature-line)}
.mf .mf-hero .btn-ghost:hover,
:root[data-theme="light"] .mf-hero .btn-ghost:hover{
  border-color:var(--accent-bright);color:var(--accent-bright)}

/* ---- reading progress ---- */
/* Under the fixed header rather than over it: the header is already the top
   edge of the page and a second bar above it reads as a loading state. */
.mf-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:var(--accent-bright);transition:width .1s linear}
@media (prefers-reduced-motion:reduce){ .mf-progress{transition:none} }

/* ---- measures ---- */
/* Two columns: prose at 760 and the full-bleed exhibits at 1040. Named
   `mf-col` because `.wrap` is the site's 1120px page shell and this is not it. */
.mf-col{max-width:760px;margin:0 auto;padding:0 var(--pad)}
.mf-col-wide{max-width:1040px;margin:0 auto;padding:0 var(--pad)}
.mf-col-flush{padding:0}

.mf-ml{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase}

/* ---- hero ---- */
/* The top padding clears the fixed header (64px) and then some — this is the
   first thing anyone sees and it should not start against the nav. */
.mf-hero{background:var(--mf-feature);color:var(--mf-feature-ink);
  position:relative;overflow:hidden;padding:150px 0 84px}
.mf-orb{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--accent),transparent 64%);opacity:.3}
/* Lift the content above the orb. `:not(.mf-orb)` is load-bearing: these
   selectors and `.mf-orb` carry the same specificity, so a bare `> *` would
   win on source order, turn the orb into a relative 520px block and shove the
   whole panel down by its height. */
.mf-hero>*:not(.mf-orb){position:relative}
.mf-hero h1{font-family:var(--sans);font-weight:800;
  font-size:clamp(38px,6vw,62px);letter-spacing:-.035em;line-height:1.0;
  max-width:820px;margin:22px 0 26px}
.mf-hero h1 .mf-em{color:var(--accent-bright)}
.mf-sub{font-family:var(--mf-serif);font-size:clamp(17px,2.2vw,20px);line-height:1.55;
  color:var(--mf-feature-ink-2);max-width:620px}
.mf-byline{margin-top:38px}
.mf-byline .mf-who{font-weight:700;font-size:13.5px;color:var(--mf-feature-ink)}
.mf-byline .mf-role{font-size:12.5px;color:var(--mf-feature-ink-3);margin-top:2px}
.mf-metarow{display:flex;gap:26px;margin-top:26px;padding-top:20px;
  border-top:1px solid var(--mf-feature-line);flex-wrap:wrap}
.mf-metarow span{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase;
  font-size:9px;color:var(--mf-feature-ink-4)}

/* ---- chapters ---- */
.mf-chap{padding:64px 0 8px}
.mf-kicker{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase;
  font-size:10.5px;color:var(--accent-bright);margin-bottom:16px;display:block}
.mf-title{font-family:var(--sans);font-weight:800;font-size:clamp(27px,4vw,36px);
  letter-spacing:-.028em;line-height:1.05;max-width:640px;margin-bottom:26px;color:var(--ink)}
.mf-prose p{font-size:15.5px;line-height:1.72;color:var(--ink-2);margin-bottom:18px;max-width:680px}
.mf-prose p.mf-lead{font-size:17px;color:var(--ink)}
.mf-prose strong{font-weight:700;color:var(--ink)}
.mf-prose .mf-big{font-family:var(--sans);font-weight:800;font-size:clamp(19px,2.4vw,21px);
  letter-spacing:-.015em;line-height:1.3;color:var(--ink);margin:26px 0;max-width:620px}
.mf-cite{font-family:var(--mono);font-size:8.5px;color:var(--ink-4);letter-spacing:.1em}

/* ---- contents ---- */
.mf-tocrow{display:flex;align-items:baseline;gap:22px;padding:14px 0;
  border-top:1px solid var(--mf-line)}
.mf-tocrow:last-of-type{border-bottom:1px solid var(--mf-line)}
.mf-tocrow .n{font-family:var(--sans);font-weight:800;font-size:15px;
  color:var(--accent-bright);width:34px;flex-shrink:0}
.mf-tocrow .t{font-weight:700;font-size:15.5px;color:var(--ink)}
.mf-tocrow:hover .t{color:var(--accent-bright)}
.mf-tocrow .dots{flex:1;border-bottom:1px dotted var(--mf-line-2)}
.mf-tocrow .m{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;
  font-size:9.5px;color:var(--ink-4);white-space:nowrap}

/* ---- bullets ---- */
.mf-dots{list-style:none;margin:20px 0 26px;padding:0}
.mf-dots li{font-size:14.5px;line-height:1.62;color:var(--ink-2);padding-left:18px;
  position:relative;margin-bottom:12px;max-width:660px}
.mf-dots li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--accent-bright)}
.mf-dots.mf-neutral li::before{background:var(--ink-4)}
.mf-dots strong{font-weight:700;color:var(--ink)}

/* ---- the no-invoice notice ---- */
.mf-notice{display:flex;align-items:center;gap:16px;background:var(--mf-card);
  border:1px solid var(--mf-line);border-radius:14px;padding:20px 26px;max-width:680px}
.mf-notice::before{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--accent-bright);flex-shrink:0}
.mf-notice p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0}

/* ---- feature panel (pull quotes) ---- */
.mf-panel{background:var(--mf-feature);color:var(--mf-feature-ink);border-radius:16px;
  padding:32px clamp(22px,4vw,36px);position:relative;overflow:hidden}
.mf-panel>*:not(.mf-orb){position:relative}
.mf-panel .mf-cap{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase;
  font-size:9.5px;color:var(--accent-bright);margin-bottom:12px;display:block}
.mf-pull{font-family:var(--mf-serif);font-size:clamp(18px,2.4vw,21px);line-height:1.5;
  color:var(--mf-feature-ink);max-width:600px;margin:0}

/* ---- the old game / new game table ---- */
.mf-tbl{border:1px solid var(--mf-line);border-radius:16px;overflow:hidden;
  background:var(--mf-card);margin:30px 0 10px}
.mf-tbl .mf-thead{display:grid;grid-template-columns:150px 1fr 1fr;gap:18px;
  background:var(--mf-feature);color:var(--mf-feature-ink);padding:13px 22px}
.mf-tbl .mf-thead span{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;
  font-size:9px;color:var(--mf-feature-ink-3)}
.mf-tbl .mf-thead span.win{color:var(--accent-bright)}
.mf-tbl .mf-row{display:grid;grid-template-columns:150px 1fr 1fr;gap:18px;padding:14px 22px;
  border-top:1px solid var(--mf-line);align-items:start}
.mf-tbl .mf-row:nth-child(even){background:var(--mf-page)}
.mf-tbl .lab{font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;
  font-size:8.5px;color:var(--ink-4);padding-top:4px}
/* The old column is deliberately quieter than the new one — the contrast is
   the argument, so it is carried by colour and not only by the words. */
.mf-tbl .old{font-size:12.5px;line-height:1.58;color:var(--ink-4)}
.mf-tbl .new{font-size:12.5px;line-height:1.58;color:var(--ink-2)}
.mf-tbl .new strong{font-weight:700;color:var(--ink)}
.mf-method-note{font-size:10.5px;line-height:1.5;color:var(--ink-4);margin:8px 2px 0}

/* ---- the six channels ---- */
.mf-chanrow{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:30px 0}
.mf-chan{border:1px solid var(--mf-line);border-radius:14px;padding:16px 15px;background:var(--mf-card)}
.mf-chan .n{font-family:var(--sans);font-weight:800;font-size:15px;color:var(--accent-bright)}
.mf-chan .t{font-weight:700;font-size:12.5px;margin-top:7px;line-height:1.35;color:var(--ink)}
.mf-chan .d{font-size:10.5px;line-height:1.5;color:var(--ink-3);margin-top:5px}

/* ---- the four-step method ---- */
.mf-methodrow{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:26px 0}
.mf-mcard{border:1px solid var(--mf-line);border-radius:14px;padding:18px;background:var(--mf-card)}
.mf-mcard .mf-cap{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;
  font-size:9px;color:var(--accent-bright);margin-bottom:9px;display:block}
.mf-mcard .d{font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.mf-mcard .d strong{color:var(--ink);font-weight:700}

/* ---- the record / honesty pair ---- */
.mf-callpair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.mf-callout{border-left:3px solid var(--accent);background:var(--mf-card);
  border-radius:0 14px 14px 0;padding:20px 24px}
.mf-callout.mf-ink{border-left-color:var(--ink)}
.mf-callout .mf-cap{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase;
  font-size:9.5px;color:var(--ink-4);margin-bottom:9px;display:block}
.mf-callout p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0}

/* ---- the three moves ---- */
.mf-moves{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0 8px}
.mf-move{border:1px solid var(--mf-line);border-radius:16px;padding:22px;
  background:var(--mf-card);display:flex;flex-direction:column}
.mf-move .when{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;
  font-size:9px;color:var(--accent-bright);margin-bottom:11px;display:block}
.mf-move h3{font-family:var(--sans);font-weight:800;font-size:17.5px;letter-spacing:-.015em;
  line-height:1.15;margin-bottom:12px;color:var(--ink)}
.mf-move p{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin-bottom:12px}
.mf-move p strong{color:var(--ink);font-weight:700}
.mf-move ol{list-style:none;counter-reset:s;margin:2px 0 12px;padding:0}
.mf-move ol li{counter-increment:s;font-size:11.5px;line-height:1.55;color:var(--ink-2);
  padding-left:22px;position:relative;margin-bottom:8px}
.mf-move ol li::before{content:counter(s);position:absolute;left:0;top:1px;
  font-family:var(--sans);font-weight:800;font-size:11px;color:var(--accent-bright)}
/* Pinned to the bottom so the three "Proves:" lines sit on one rule across the
   row — they are the payoff of each move and they read as a set. */
.mf-move .proves{margin-top:auto;padding-top:12px;border-top:1px solid var(--mf-line);
  font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;
  font-size:8.5px;color:var(--ink-4);line-height:1.9}

/* ---- the fork ---- */
.mf-forkrow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:32px 0}
.mf-fork{border:1px solid var(--mf-line);border-radius:16px;padding:26px 28px;background:var(--mf-card)}
.mf-fork .mf-cap{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase;
  font-size:9.5px;color:var(--ink-4);margin-bottom:12px;display:block}
.mf-verdict{font-family:var(--sans);font-weight:800;font-size:clamp(24px,3.2vw,28px);
  letter-spacing:-.03em;margin-bottom:16px;color:var(--ink)}
.mf-verdict small{font-size:14px;color:var(--ink-4);font-weight:800;letter-spacing:-.01em}
.mf-fork .mf-dots li{font-size:12.5px}
/* The chosen direction. In light it is the authored near-black card; in dark
   it cannot be "the dark one", so the accent border does the choosing. */
.mf-fork-yes{background:var(--mf-feature);color:var(--mf-feature-ink);
  border-color:var(--accent);position:relative;overflow:hidden}
.mf-fork-yes>*:not(.mf-orb){position:relative}
.mf-fork-yes .mf-cap{color:var(--accent-bright)}
.mf-fork-yes .mf-verdict{color:var(--mf-feature-ink)}
.mf-fork-yes .mf-verdict small{color:var(--mf-feature-ink-3)}
.mf-fork-yes .mf-dots li{color:var(--mf-feature-ink-2)}
.mf-fork-note{font-size:11px;line-height:1.6;color:var(--mf-feature-ink-3);margin-top:14px}

.mf-rule{border:none;border-top:1px solid var(--mf-line);margin:56px 0 0}

/* ---- footer evidence row ---- */
.mf-evidence{font-family:var(--mono);font-size:8.5px;color:var(--accent-bright);letter-spacing:.1em}

/* ---- scroll reveal ---- */
.mf-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.mf-reveal.in{opacity:1;transform:none}
/* No-JS and reduced-motion both need the content visible, and for opposite
   reasons: one never gets the class, the other should never see the move. */
@media (prefers-reduced-motion:reduce){ .mf-reveal{opacity:1;transform:none;transition:none} }

@media (max-width:900px){
  .mf-chanrow{grid-template-columns:repeat(2,1fr)}
  .mf-methodrow{grid-template-columns:repeat(2,1fr)}
  .mf-moves{grid-template-columns:1fr}
  .mf-forkrow{grid-template-columns:1fr}
  .mf-callpair{grid-template-columns:1fr}
}
@media (max-width:860px){
  .mf-hero{padding:120px 0 64px}
  /* The table becomes stacked pairs: the row label disappears and the old
     value sits above the new one, separated by a dotted rule, so the
     old-versus-new comparison survives losing its columns. */
  .mf-tbl .mf-thead,.mf-tbl .mf-row{grid-template-columns:1fr;gap:0}
  .mf-tbl .mf-thead span:first-child,.mf-tbl .lab{display:none}
  .mf-tbl .mf-thead span{margin-bottom:4px}
  .mf-tbl .old{padding-bottom:6px;border-bottom:1px dotted var(--mf-line-2);margin-bottom:6px}
  .mf-metarow{gap:14px}
  .mf-tocrow .m{display:none}
}