/* ==========================================================================
   FRONTLINE21 — BASE
   Reset, document surface, elemental typography, focus, reduced motion.

   Type roles are fixed by the brand system:
     Quantico Bold  declares  headlines, section titles, shield names, actions
     Poppins        explains  body, navigation, captions, controls, metadata
   Quantico never sets a paragraph.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  min-height: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The material surface: the owned Frontline21 black texture, laid over the
   whole document at low opacity so the carbon fields read as material. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image: url('../images/texture/grain-256.png');
  background-size: 256px 256px;
  opacity: 0.045;
  mix-blend-mode: overlay;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--f21-red);
  color: #fff;
}

/* --- Focus --------------------------------------------------------------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(18, 22, 22, 0.92);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 14px 20px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(-120%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* --- Declarations: Quantico Bold -----------------------------------------
   The measured hierarchy from the Wall of Truth type study, selected by the
   size the type actually renders at rather than by viewport alone:

     96 px and above   tracking -0.025em   leading 0.84   monumental
     56 to 95 px       tracking -0.018em   leading 0.87   intermediate
     36 to 55 px       tracking -0.010em   leading 0.90   compact
     below 36 px       tracking 0          leading 1.0    reflow

   The fluid sizes below are known at every breakpoint, so each role is set
   to the tier its size falls in at that breakpoint. Kerning is on, nothing
   is synthesised, and the roles are explicit so a headline's negative
   spacing never leaks into a control or a paragraph. */

.display,
.h2,
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis: none;
  font-kerning: normal;
  font-feature-settings: 'kern' 1;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
  line-height: var(--lead-compact, 0.9);
  letter-spacing: var(--track-compact, -0.01em);
  text-wrap: balance;
}

/* The display role: 31 to 50 px on a phone, 46 to 88 on a tablet, 68 to 128
   on a desktop. */
.display {
  font-size: var(--t-display);
}

@media (min-width: 721px) {
  .display {
    line-height: var(--lead-intermediate, 0.87);
    letter-spacing: var(--track-intermediate, -0.018em);
  }
}

@media (min-width: 1400px) {
  .display {
    line-height: var(--lead-monumental, 0.84);
    letter-spacing: var(--track-monumental, -0.025em);
  }
}

/* The h2 role: 26 to 38 px on a phone, 34 to 58 on a tablet, 44 to 74 on a
   desktop. */
.h2 {
  font-size: var(--t-h2);
}

@media (max-width: 720px) {
  .h2 {
    line-height: 0.94;
    letter-spacing: -0.005em;
  }
}

@media (min-width: 1024px) {
  .h2 {
    line-height: var(--lead-intermediate, 0.87);
    letter-spacing: var(--track-intermediate, -0.018em);
  }
}

/* The h3 role: 19 to 33 px. Below the compact tier: ordinary leading. */
.h3 {
  font-size: var(--t-h3);
  line-height: 1.06;
  letter-spacing: 0;
}

/* --- Explanations: Poppins ------------------------------------------------ */

.lead {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.55;
  color: var(--paper);
  max-width: 36ch;
}

.body {
  font-size: var(--t-body);
  color: var(--paper-dim);
  max-width: 62ch;
}

/* The reading size for an argument. Poppins at 18.5px on a desktop, a measure
   of about 60 characters, and the lifted grey. Every paragraph a man is meant
   to actually read on the homepage is set in this. */
.body--lg {
  font-size: var(--t-body-lg);
  line-height: 1.6;
  max-width: 58ch;
}

/* The deck: the first sentence after a headline, set large enough to be read
   from the headline's distance. It is the hinge of every text cluster on the
   page and always sits inside --cluster-gap of its headline. */
.deck {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--t-deck);
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--paper);
  max-width: 34ch;
  text-wrap: pretty;
}

/* A pull line: a sentence already in the copy, lifted to the scale of a small
   headline. Poppins, not Quantico, because it is still prose. */
.pull {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--t-pull);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--paper);
  max-width: 30ch;
  text-wrap: pretty;
  position: relative;
  padding-left: clamp(18px, 2vw, 30px);
  border-left: 2px solid var(--f21-red);
}

.pull--sm {
  font-size: var(--t-deck);
  max-width: 28ch;
}

/* --- Text clusters ----------------------------------------------------------
   Every headline owns its deck and its body. The pieces are stacked in one
   column with the cluster gap between the headline and what follows, so a
   reader never has to hunt across the grid for the sentence that belongs to
   the title above it. Negative space is spent around the cluster, never inside
   it. */
.cluster {
  display: flex;
  flex-direction: column;
  /* Stretch, not flex-start: a headline that shrinks to its content changes
     width by a fraction of a pixel while its glyphs are split for the resolve,
     and the motion package promises no box ever changes size. Controls opt
     back out below. */
  align-items: stretch;
}

.cluster > .actions,
.cluster > .btn,
.cluster > .download,
.cluster > .band-order__act {
  align-self: flex-start;
}

.cluster > .eyebrow {
  margin-bottom: var(--stack-md);
}

.cluster > .h2,
.cluster > .h3,
.cluster > .display {
  margin-top: 0;
}

.cluster > .deck,
.cluster > .body,
.cluster > .pull,
.cluster > .actions,
.cluster > .download,
.cluster > .notice {
  margin-top: var(--cluster-gap);
}

.cluster > .body + .body,
.cluster > .deck + .body,
.cluster > .pull + .body,
.cluster > .body + .pull {
  margin-top: var(--stack-md);
}

.cluster > .body + .actions,
.cluster > .deck + .actions {
  margin-top: var(--stack-lg);
}

.body strong,
.lead strong {
  color: var(--paper);
  font-weight: 500;
}

.body + .body {
  margin-top: var(--stack-md);
}

.micro,
.eyebrow,
.caption {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--t-micro);
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* Quantico ships no italic, so an <em> inside display type is set upright and
   given the red instead. A synthesised oblique is not the brand. */
.display em,
.h2 em,
.h3 em {
  font-style: normal;
  color: var(--f21-red);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--paper-dim);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--f21-red);
  flex: none;
}

.eyebrow b {
  font-weight: 500;
  color: var(--paper-faint);
}

.caption {
  letter-spacing: 0.16em;
}

.tag-pending {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--f21-red);
  padding: 4px 8px 3px;
  display: inline-block;
  line-height: 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mt-md { margin-top: var(--stack-md); }
.mt-lg { margin-top: var(--stack-lg); }
.measure-short { max-width: 32ch; }

/* --- Reduced motion ------------------------------------------------------
   Reduced motion receives the complete narrative. Every reveal, line event
   and formation state resolves to its final value rather than disappearing. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* A break that exists only on a phone, for phrase-based composition of a
   declaration that reads as two lines on a wide layout and three on a narrow
   one. The space around it stays in the markup, so a hidden break still reads
   as a word boundary to a screen reader and to selection. */
.br-phone { display: none; }

@media (max-width: 767px) {
  .br-phone { display: inline; }
}