/*
  /manifesto — the manifesto.

  Same tokens, same top bar, same footer, same two faces as the homepage, but a
  different job: this page is read from the top to the bottom in one pass. So
  there is one column and nothing beside it — no index, no numbers, no titles,
  nothing to scan. The structure the reader gets is rhythm: how much air sits
  between one movement and the next, and which lines are set large.

  Loaded after tokens.css and base.css; home.css is not loaded on this page.
*/

:root {
  /*
    Two widths. The container is the page's frame, and the reading column is
    narrower inside it, because 780px at ~19px lands around 68 characters a line.
  */
  --mf-shell: 1180px;
  --mf-measure: 780px;

  /*
    Movement to movement. The page's only structural signal — and it has to stay
    a signal rather than a gap the reader falls into. It was up to 180px, which
    on a laptop meant a screen and a half of white between two paragraphs of the
    same argument; the reading broke every time. This is still far more air than
    the paragraph spacing inside a movement, which is all it has to be.
  */
  --mf-gap: clamp(56px, 5vw, 76px);
}

.mf-shell {
  max-width: var(--mf-shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ═══ HERO ═══════════════════════════════════════════════════════════════ */

/*
  White, and a title card only in its first line: the name of the manifesto, what
  the company is for, and then the text itself starting immediately underneath.

  It is not a full-screen hero and it must not become one again. It held 86vh open
  and centred itself in that, which left a screenful of white between the last
  line of the opening and the first paragraph of the argument — the reader hit a
  wall in the middle of one continuous text. No minimum height, no bottom padding:
  the opening runs straight into the body, and the only space between them is the
  movement gap that separates every other pair of movements.
*/
.mf-hero {
  padding: calc(var(--topbar-h) + clamp(64px, 10vh, 132px)) 0 0;
  background: var(--bg);
  color: var(--fg);
}

.mf-hero .eyebrow {
  margin-bottom: clamp(22px, 3vw, 34px);
}

.mf-hero h1 {
  max-width: 17em;
  /* Title to mission: a pairing, so closer than movement spacing. */
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

/*
  The mission, directly under the name of the manifesto: what the company is for,
  before the reader is asked to read the argument for it. It closed the page on
  its own black section until it moved up here.

  Statement scale, well below the title: the title is the largest line on the
  page and this is a whole sentence, so it is set to be read rather than to
  compete. Wider measure than a statement too — 22em would break this one across
  four lines. One ink: "AI", "human judgment" and "orchestrate" were coloured
  here, and that treatment is not used on this page.
*/
.mf-hero-mission {
  font-size: clamp(23px, 2.5vw, 33px);
  line-height: 1.14;
  max-width: 26em;
  margin-bottom: clamp(30px, 3.6vw, 46px);
}

.mf-hero-lines {
  /* Set apart by a rule rather than by a box, as on the homepage. */
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line-strong);
}

/* ═══ BODY ═══════════════════════════════════════════════════════════════ */

/*
  The opening and the body are one text, so the seam between them is spaced like
  any other seam in it: `--mf-gap`, the same distance that separates two
  movements. Nothing marks the boundary — there is no boundary to mark.
*/
.mf-body {
  padding: var(--mf-gap) 0 clamp(72px, 8vw, 104px);
  background: var(--bg);
  color: var(--fg);
}

/*
  The movements. Spacing carries the structure, so it is stated once here and
  the blocks inside a movement are then close enough together to read as one
  thought.
*/
.mf-move + .mf-move {
  margin-top: var(--mf-gap);
}

.mf-move {
  display: grid;
  gap: clamp(16px, 1.4vw, 20px);
  max-width: var(--mf-measure);
  /* Clears the fixed bar when arrived at from an old /vision deep link. */
  scroll-margin-top: calc(var(--topbar-h) + 40px);
}

/* Long-form body copy: larger and looser than the homepage's, in full ink. */
.mf-p {
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.65;
  letter-spacing: -0.003em;
  color: var(--fg);
  max-width: var(--mf-measure);
}

/*
  Deliberate line breaks from the original text, one per row. Not a list: no
  bullets, no counters, no markers — these are sentences that happen to be
  short, and marking them up as items would change what they say.
*/
.mf-lines {
  display: grid;
  gap: 8px;
  max-width: var(--mf-measure);
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.45;
  color: var(--fg);
}

.mf-line {
  display: block;
}

/*
  The three refusals, and the crescendo. Set larger than the copy around them and
  smaller than a statement, which is the whole point of the step: body, these,
  statement — three sizes, in that order.
*/
.mf-lines[data-tone='contrast'],
.mf-lines[data-tone='crescendo'] {
  gap: 9px;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -0.014em;
}

/* The two refusals step back; the line they make room for does not. */
.mf-lines[data-tone='contrast'] .mf-line:not(:last-child) {
  color: var(--fg-sub);
}

/*
  The load-bearing claims. Large, tight, and given room on both sides — but they
  are sentences inside a text, not slides: at 44px a statement was taller than the
  paragraph it belonged to and forced the movement apart to carry it.
*/
.mf-statement {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 22em;
  text-wrap: balance;
}

/* The turn, alone in its movement: the one line the page pivots on. */
.mf-statement[data-tone='turn'] {
  font-size: clamp(26px, 2.9vw, 38px);
  max-width: 18em;
}

/* Where the company names itself. The largest line in the body. */
.mf-statement[data-tone='prominent'] {
  font-size: clamp(25px, 2.7vw, 36px);
  max-width: 20em;
}

/* ═══ CLOSING CTA AND FOOTER ═════════════════════════════════════════════ */

/*
  The footer is shared with the homepage, where the measure is 1240px. Here it has
  to stand in the same column as everything above it, so it takes the manifesto's
  measure and its own gutter: 1240 centred inside a gutter-padded section put its
  logo ~94px to the left of the text it sits under.
*/
.footer {
  padding-inline: 0;
}

.footer .shell {
  max-width: var(--mf-shell);
  padding-inline: var(--gutter);
}


.mf-cta h2 {
  max-width: 20em;
  margin-bottom: 22px;
}

.mf-cta-body {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--fg-sub);
  max-width: 30em;
  margin-bottom: 34px;
}

.mf-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  :root {
    /* Narrower column, shorter lines, so a movement needs less air to read as one. */
    --mf-gap: clamp(44px, 8vw, 56px);
  }

  .mf-hero {
    padding-top: calc(var(--topbar-h) + 56px);
  }

  .mf-hero-mission,
  .mf-statement,
  .mf-statement[data-tone='turn'],
  .mf-statement[data-tone='prominent'] {
    max-width: none;
  }
}