/* ==========================================================================
   FRONTLINE21 — THE DESTINATION PAGES, 8 September 2026.

   What the pages that are not the homepage share: a head that sits under
   the masthead, a jump row for a long page, a closing action row, and the
   section rhythm that the homepage's movements had and these pages inherit
   from movements.css without carrying a movement number.

   Loaded after chrome.css on 21-days, code-in-action, about and field-supply.
   The homepage does not load it.
   ========================================================================== */

.page__main { background: var(--ink); }

/* The head. Room under the fixed masthead, the movement rhythm below. */
.page__head {
  padding-top: clamp(112px, 16vh, 190px);
  padding-bottom: var(--stack-xl);
  border-bottom: 1px solid var(--ink-line);
}

.page__head .grid { row-gap: var(--stack-md); }
.page__head .movement__title { margin-top: var(--stack-sm); }
.page__head .deck + .body { margin-top: var(--stack-md); }

/* --- The jump row ------------------------------------------------------------
   Anchors into a long page. Utility type, a hairline over the row, and the
   same wrap behaviour at every width: it is a row of words, not a toolbar. */
.page__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: var(--stack-lg);
  padding-top: 14px;
  border-top: 1px solid var(--ink-line);
}

.page__jump a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-decoration: none;
  padding-block: 6px;
  transition: color var(--dur-fast) var(--ease-out);
}

.page__jump a:hover,
.page__jump a:focus-visible { color: var(--paper); }

/* --- A section on About ------------------------------------------------------- */

.about__section {
  padding-block: var(--movement-pad);
  border-top: 1px solid var(--ink-line);
}

.about__section .grid { row-gap: var(--stack-lg); }
.about__section .deck + .body { margin-top: var(--stack-md); }
.about__section .body + .body { margin-top: var(--stack-md); }

.ranks--about { margin-top: var(--stack-xl); }

.about__section .brotherhood__wide,
.about__section .reports__table { margin-top: var(--stack-xl); }

/* --- The close ---------------------------------------------------------------- */

.page__close {
  padding-block: var(--stack-xl);
  border-top: 1px solid var(--ink-line);
}

/* --- The film, on its own page ---------------------------------------------- */

.film-page { border-top: 1px solid var(--ink-line); }

/* --- The closing action row ------------------------------------------------- */

.action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

.action-row .link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  border-bottom: 1px solid var(--f21-red);
  padding-bottom: 2px;
}

.action-row .link:hover,
.action-row .link:focus-visible { border-bottom-color: var(--paper); }

/* ==========================================================================
   THE MANIFESTO, and the passage that closes the code.

   Two pieces of the Field Manual brought onto the site without redesigning
   them: page seven, which is the manifesto, and page twelve, which is the
   Solzhenitsyn passage. Both are set here the way the manual sets them —
   the display face, the identity red, a wide left-aligned measure, and a
   ground that does not compete — rather than in a generic pull-quote.

   ON THE NAME "FS60P"
   The brief asks for the gravitas of the established FS60P type treatment.
   There is no font, preset or component of that name in this project.
   FS60P is the Phalanx sequence: assets/js/fs60p.js, whose own header reads
   "FRONTLINE21 — FS60P, the Phalanx sequence", and every other reference in
   the source is to the five shields. Rather than invent a typeface to match
   a name, what is reused here is the treatment the manual actually uses on
   page twelve and the site's own monumental declaration recipe — Quantico
   Bold, the printed ink of ink.css, oblique for the quotation as the manual
   sets it. The discrepancy is reported in the handoff rather than papered
   over.
   ========================================================================== */

/* --- The manifesto page ----------------------------------------------------- */

.manifesto-hero {
  padding-block: clamp(72px, 12vh, 150px) clamp(28px, 5vh, 56px);
  border-bottom: 1px solid var(--ink-line);
}

.manifesto-hero__title {
  margin-top: var(--stack-sm);
}

/* MAN in the identity red and the rest in paper, which is the manual's own
   title device inverted for a dark ground. It is deliberately not set in the
   printed ink: that treatment paints a whole heading red, and the whole point
   of this one is that three of its letters are.

   The accessible name is the word, once: this is one text node split for
   colour, not two. */
.manifesto-hero__title { color: var(--paper); }

.manifesto-hero__man {
  font-style: normal;
  color: var(--f21-red);
}

.manifesto-hero__deck {
  margin-top: var(--stack-md);
  max-width: 46ch;
  color: var(--paper-dim);
}

.manifesto {
  padding-block: clamp(40px, 8vh, 96px) clamp(56px, 10vh, 128px);
}

/* 8 September, evening. This container carried max-width: 64ch, and .shell
   has no centring of its own, so the whole article sat in a 500 px column at
   the left edge of a 1,900 px page. The cap is gone from the container: the
   measure belongs to the paragraph inside a movement, not to the article, and
   the composition belongs to the grid. */
.manifesto__shell {
  max-width: none;
}

/* Each movement of the argument is its own row of the page grid, so blocks
   stack in the order they are written however they are placed across the
   canvas. A reader goes straight down; nothing sends him back up a column. */
.manifesto__row + .manifesto__row {
  margin-top: clamp(34px, 5.5vh, 76px);
}

.manifesto__row--stand + .manifesto__row,
.manifesto__row + .manifesto__row--stand {
  margin-top: clamp(44px, 7vh, 104px);
}

.manifesto__movement {
  position: relative;
}

/* The index sits in the margin beside its movement on a desktop and above it
   on a phone, which is what gives the outer columns something structural to
   do rather than leaving them as blank canvas. It is decoration for a
   screen reader: the argument is not numbered in the manual. */
.manifesto__index {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--f21-red);
  margin-bottom: var(--stack-sm);
}

/* The index hangs in the margin beside its movement only where there is a
   margin to hang it in. A movement on the right of the canvas ends at the
   page's own edge, so at 1024 its index was six pixels off the side of the
   document; both sides now hang inward from the movement's own left edge,
   which every movement has. */
@media (min-width: 1024px) {
  .manifesto__index {
    position: absolute;
    top: 0.35em;
    left: calc(var(--gutter) * -1 - 34px);
    margin: 0;
  }
}

.manifesto__p {
  margin-top: clamp(20px, 3vh, 34px);
  font-family: var(--font-text);
  font-size: clamp(17px, 1.15vw + 14px, 21px);
  line-height: 1.62;
  color: var(--paper-dim);
  /* The canvas is used by the composition. A line of body copy is still a
     line of body copy: 58 to 62 characters, at every width. */
  max-width: 60ch;
}

.manifesto__movement .manifesto__p:first-of-type { margin-top: 0; }

/* The three sentences the manual sets alone. They are not pull quotes lifted
   out of the argument; they are the paragraphs that are one line long, and
   they carry the weight of the turn.

   8 September, evening: they were white, and they are the identity red now,
   at a size that lets them break wide across the canvas and carry the printed
   material rather than sit in the reading column as bold body copy. */
.manifesto__p--stand {
  margin-top: 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw + 12px, 62px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-transform: none;
}

.manifesto__break {
  height: 1px;
  margin: clamp(44px, 7vh, 104px) 0 0;
  border: 0;
  background: var(--ink-line);
}

/* THE CLOSING PROCLAMATION.

   9 September: the page's decisive moment, and it was reading as the last
   paragraph of the argument. Three changes, in this order:

     * the two sentences are one line each, authored, and centred on the
       canvas rather than set from the left of a six column block;
     * the block takes all eight columns, which is where the width for the
       larger type comes from — the type grew forty percent and the measure
       grew thirty four, so the sentence is not being squeezed to fit;
     * the desktop size is exactly forty percent over what it was. The ramp
       was clamp(30px, 5.2vw + 10px, 96px), which measured 84.88px at 1440 and
       96px at 1920; this measures 118.8px and 134.4px at the same widths.

   The silence around it is part of the statement, so the row keeps the widest
   gap on the page above it and the section's own padding below. */
.manifesto__called {
  font-family: var(--font-display);
  font-weight: 700;
  /* The ramp is the old one multiplied by 1.4, so 1440 and 1920 land on
     exactly forty percent more than they did. The min() beside it is a fit
     guard, not a second opinion about scale: "YOU'VE BEEN CALLED." is 10.28
     ems wide in this face, the canvas is about 0.90 of the viewport, and
     8.4vw is the largest size that keeps that sentence on one line with room
     to spare. It binds only between about 768 and 1250, where the canvas is
     narrower than the ramp assumes; from 1250 up the ramp is smaller and
     wins, which is why the two review widths are untouched by it. */
  font-size: clamp(42px, min(7.28vw + 14px, 8.4vw), 134.4px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-align: center;
}

/* Each sentence is a line. Not a <br>, because the ink surface measures its
   own rendered lines and a block gives it a box to measure. */
.manifesto__called .ink > span {
  display: block;
}

.manifesto__row + .manifesto__row--called {
  margin-top: clamp(56px, 9vh, 132px);
}

/* A phone is one reading column with proper gutters: every movement and every
   declaration runs the full measure, the index sits above its movement, and
   the declarations step down in size without losing their weight. */
@media (max-width: 767px) {
  .manifesto__p--stand { font-size: clamp(24px, 7.2vw, 34px); }
  /* A phone keeps the two sentences and the hierarchy; the size is set from
     the width the longer of the two needs, not from the desktop ramp. The
     canvas is between 0.875 and 0.91 of the viewport across the phone widths
     and the longer sentence is 10.28 ems, so 8.3vw is the largest ramp that
     keeps it on one line at 320 as well as at 430 — and it is large enough at
     390 and above for the printed ink to reach its third tier and show the
     worn character. Below that the type is too small to hold the print, which
     is what the tiers are for. */
  .manifesto__called { font-size: clamp(24px, 8.3vw, 40px); }
  .manifesto__p { max-width: none; }
}

.manifesto-code {
  padding-block: clamp(48px, 9vh, 110px);
  border-top: 1px solid var(--ink-line);
  background: var(--ink-deep);
}

/* THE DISPATCH. Its own line, under the name, in the voice the 8 September
   direction sets: what it is, for whom, in one sentence. It is a positioning
   line rather than a promise about cadence, because no cadence has been set
   and the site does not invent one. */
.dispatch__line {
  margin-top: var(--stack-sm);
  max-width: 26ch;
  font-family: var(--font-text);
  font-size: clamp(15px, 1vw + 12px, 17px);
  line-height: 1.5;
  color: var(--paper-dim);
}