/* ==========================================================================
   FRONTLINE21 — THE HOMEPAGE, 8 September 2026.

   What the six-section homepage adds to movements.css: the hero descriptor
   and its meta line, the Field Manual as two pages and four facts, the Code
   in Action doors (three scenes, three days, the film poster), the practical
   questions under the declaration, and the legacy anchors. Loaded only by
   index.html, after scenes.css.
   ========================================================================== */

/* Two column spans the homepage needs that layout.css does not define. */
.gc-4-3 { --gc-lg: 4 / span 3; --gc-md: 4 / span 3; }
.gc-7-2 { --gc-lg: 7 / span 2; --gc-md: 1 / span 6; }

/* --- The hero descriptor ------------------------------------------------------
   One line that says what this is, the sentence under it that says where,
   and the meta line beside the action. The descriptor takes the lead's size
   and the sentence steps down, so the fold reads: headline, claim, action. */
.hero__descriptor { max-width: 24ch; }

.hero__sub {
  max-width: 40ch;
  color: var(--paper-dim);
  margin-top: calc(var(--stack-md) * -0.5);
}

.hero__copy .actions { align-items: center; gap: 12px 18px; }
.hero__meta { color: var(--paper-faint); letter-spacing: 0.14em; }

@media (max-width: 767px) and (max-height: 820px) {
  .hero__sub { display: none; }
}

/* --- The Field Manual ---------------------------------------------------------
   Namespaced "offer": .manual is the request dialog (manual-modal.css). */

.offer__head {
  row-gap: var(--stack-lg);
  align-items: end;
  margin-bottom: var(--stack-lg);
}

.offer__aside .pull { margin-top: var(--stack-md); }

.offer__pages {
  margin-top: var(--stack-xl);
  row-gap: var(--stack-lg);
  align-items: start;
}

.plate-media--page { aspect-ratio: 1584 / 1224; }

.offer__page .caption {
  display: block;
  margin-top: 10px;
  color: var(--paper-faint);
}

/* The four facts, as on field-manual.html (acquire.css, which the homepage
   does not load), stacked beside the pages here. */
.manual-facts {
  display: grid;
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}

.manual-facts > div { background: var(--ink); padding: 16px 18px; }

.manual-facts dt {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.manual-facts dd {
  display: block;
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  color: var(--paper);
}

.manual-facts--stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
  max-width: none;
}

@media (min-width: 1024px) {
  .manual-facts--stack { grid-template-columns: 1fr; }
}

.offer__act {
  margin-top: var(--stack-lg);
  display: grid;
  gap: var(--stack-sm);
}

.offer__act .offer__plain { max-width: 48ch; }

/* --- The Code in Action ------------------------------------------------------ */

.action__head { row-gap: var(--stack-md); margin-bottom: var(--stack-lg); }
.action__head .deck + .body { margin-top: var(--stack-sm); }

.action__journey,
.action__film {
  position: relative;
  margin-top: var(--stack-xl);
  padding-top: var(--stack-lg);
  border-top: 1px solid var(--ink-line);
  row-gap: var(--stack-lg);
  align-items: start;
}

.action__journey .h3 + .body,
.action__film .h3 + .body { margin-top: var(--stack-sm); }

/* The three days: the calendar's cells, with the calendar's rules. */
.journey-teaser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  list-style: none;
  margin: 0;
  padding: 0;
}

.journey-teaser li { background: var(--ink); min-width: 0; }
.journey-teaser .day { min-height: 128px; }

@media (max-width: 619px) {
  .journey-teaser { grid-template-columns: 1fr; }
  /* Stacked, each day reads as one row: number, title, mark — the calendar's
     own wide layout for Day 21, applied to all three here. */
  .journey-teaser .day {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: baseline;
    column-gap: 16px;
    min-height: 0;
  }
  .journey-teaser .day__n { grid-column: 1; grid-row: 1; }
  .journey-teaser .day__title { grid-column: 2; grid-row: 1; margin-top: 0; align-self: baseline; }
  .journey-teaser .day__value { grid-column: 2; grid-row: 2; }
  .journey-teaser .day__marks { grid-column: 3; grid-row: 1; align-self: center; padding-top: 0; }
}

/* The film's door: the poster frame, a play mark, and a hover that lifts
   the mark rather than the whole plate. */
.action__poster {
  position: relative;
  display: block;
  color: var(--paper);
}

.action__poster .plate-media {
  display: block;
  overflow: hidden;
  background: var(--ink-raised);
  aspect-ratio: 16 / 9;          /* the film's own frame, at every width */
}
.action__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }

.action__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 1px solid var(--paper);
  background: rgba(12, 15, 15, 0.55);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.action__play svg { width: 22px; height: 22px; margin-left: 3px; }

.action__poster:hover .action__play,
.action__poster:focus-visible .action__play {
  background: var(--f21-red);
  border-color: var(--f21-red);
}

.action__poster:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* --- Begin: the practical questions ------------------------------------------ */

.begin__qa {
  display: grid;
  gap: 1px;
  margin: var(--stack-xl) 0 0;
  max-width: 880px;
  background: var(--ink-line);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}

.begin__qa > div {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  background: var(--ink);
}

@media (min-width: 721px) {
  .begin__qa > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gutter); }
}

.begin__qa dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
}

.begin__qa dd {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--paper-dim);
}

.declaration__foot .actions { align-items: center; gap: 12px 18px; margin: 0; }
.declaration__foot .actions .micro { color: var(--paper-faint); letter-spacing: 0.14em; }

/* --- Legacy anchors -----------------------------------------------------------
   Real elements with the old ids, so a saved link resolves to the section
   its content moved out of. Offset under the fixed masthead, no box. */
.compat-anchor {
  position: absolute;
  top: calc(-1 * var(--masthead-h, 72px));
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* THE FILM ON THE HOMEPAGE, 8 September, second pass. The feature player
   stands where the poster link stood, five columns of eight. Once a person
   has asked for the film — restart, with sound — the native controls take
   over and the overlay control steps aside, so there is one set of controls
   and it is the platform's. */
.action__film .film__stage { margin: 0; }
.film__frame--home { max-height: none; border-bottom: 0; }
.film__frame.is-watching .film__controls { display: none; }
.film__frame.is-watching .film__play { display: none; }

/* A button that reads as the site's text link, for the one control in copy. */
.link--btn {
  appearance: none;
  background: none;
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ==========================================================================
   THE ONE MILLION MAN INITIATIVE, 8 September, evening.

   The vision, in the Field Manual's own composition, immediately above the
   invitation it explains. It is one statement and one line of copy: the point
   is the relationship between the vision and the action, and a chain of
   promotional sections would break exactly that.

   It carries no control of its own. The Get the Field Manual button beneath
   it is the step, and the copy says so.
   ========================================================================== */

.initiative {
  margin-top: clamp(56px, 9vh, 120px);
  padding-top: clamp(28px, 4vh, 48px);
  border-top: 1px solid var(--ink-line);
  row-gap: var(--stack-lg);
  align-items: start;
  position: relative;
}

/* The red length at the head of the rule, the same device the About page's
   million section uses, so the two read as one idea in two places. */
.initiative::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: clamp(88px, 12vw, 200px);
  height: 3px;
  background: var(--f21-red);
}

.initiative__title {
  margin-top: var(--stack-sm);
  font-size: clamp(34px, 5.4vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.initiative__title em {
  font-style: normal;
  display: inline-block;
}

.initiative__body .body--lg {
  max-width: 52ch;
}

.initiative__step {
  margin-top: var(--stack-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.5vw + 13px, 27px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

/* The invitation sits directly under the vision, not a movement away from it. */
.initiative + .offer__act {
  margin-top: clamp(28px, 4vh, 52px);
}

@media (max-width: 767px) {
  .initiative { margin-top: clamp(40px, 7vh, 72px); }
  .initiative__title { font-size: clamp(30px, 9vw, 46px); }
}