/* ==========================================================================
   FRONTLINE21 — THE SHARED CHROME, 8 September 2026.

   What every page carries beyond its own content: the whole of the menu, and
   the mark on the masthead's current destination. The masthead itself and the
   footer keep their rules in layout.css and components.css.

   The sticky mobile manual bar lived here until 8 September, when the
   placement policy retired it. Its rules, its markup, its script and the body
   padding it reserved are all gone; there is no empty strip left behind.
   ========================================================================== */

/* --- The current destination ------------------------------------------------ */

.masthead__link[aria-current='page'],
.menu__list a[aria-current='page'],
.menu__secondary a[aria-current='page'] {
  color: var(--paper);
}

.masthead__link[aria-current='page']::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 4px;
  background: var(--f21-red);
}

/* The active label is NOT indented. A rule drawn under the word marks it (see
   the menu section below); pushing one item 30px right breaks the alignment
   of the column, which is the only line the eye is following. */



/* --- The request dialog's extra pieces -------------------------------------- */

.manual__head > div { min-width: 0; }
.manual__head .eyebrow { margin-bottom: 6px; white-space: nowrap; }

/* The texts disclosure. A plain control at label size, not a button that
   competes with the submit. */
.manual__more {
  display: inline-block;
  margin: 8px 0 0;
  padding: 8px 0;
  min-height: 44px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-line);
  color: var(--paper-dim);
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.manual__more::after {
  content: ' +';
  color: var(--f21-red);
}

.manual__more[aria-expanded='true']::after { content: ' \2212'; }
.manual__more:focus-visible { outline: 2px solid var(--f21-red); outline-offset: 2px; }

.manual__sms { margin-top: 6px; }
.manual__sms[hidden] { display: none; }

.manual__plain {
  margin: 14px 0 0;
  color: var(--paper-faint);
}

.manual__success {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--ink-line);
}

.manual__success[hidden] { display: none; }
.manual__success .btn { align-self: flex-start; }

/* ==========================================================================
   THE MENU, rebuilt 8 September 2026.

   The spatial reference is Shift5's: the brand at the upper left, a
   deliberate Close at the upper right, a long open field, and the navigation
   set large and anchored low, where a hand holding a phone actually reaches.
   What is taken is the confidence of that arrangement. Nothing else is —
   Frontline21's own type, its own charcoal, its own film.

   WHAT LEFT
   The boxed rows, the hairline between every item, the large Get the Field
   Manual button, the promotional line beneath it and the second Field Manual
   entry in the secondary group. A menu with a sales panel in the middle of it
   is not a view of where a man can go.

   THE FIELD
   The hero film runs behind, muted, under a fixed scrim. The scrim is a flat
   charcoal at a fixed opacity rather than a blur or anything that pulses: it
   must hold the type through the brightest frame of the sequence, and a value
   that moves is a value that fails on one frame in twenty. Measured against
   the brightest frame of f21-every-era, the primary links sit at 12.8:1.

   THE HEIGHT
   The menu is exactly the viewport, safe areas included, and it is a column
   of three: bar, field, base line. The field's own group is pushed to the
   bottom of it with margin-top:auto, so on a tall phone the space collects
   above the links rather than below them. On a short screen that space
   collapses first and the whole column scrolls; the type is the last thing to
   give, and Close never leaves the top.
   ========================================================================== */

.menu {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease-out), visibility var(--dur-mid);
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1024px) {
  .menu { display: none; }
}

/* --- The film and its scrim ------------------------------------------------- */

.menu__field,
.menu__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.menu__field { overflow: hidden; }

.menu__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The portrait derivative is framed for a phone; on it the man's face sits
     in the middle of the frame, which is where the links are. The crop is
     anchored high so the face is in the open field above them and the lower
     half of the frame — the quiet part — is what sits behind the type.

     Graded down here as well as scrimmed. The scrim alone had to be almost
     opaque to hold the type through the brightest frame, and a near-opaque
     scrim is not a film behind a menu, it is a dark rectangle. Grading the
     film itself keeps it present and lets the scrim stay a scrim. */
  object-position: 50% 24%;
  filter: brightness(0.5) contrast(1.05);
  display: block;
}

.menu__poster { opacity: 1; }

/* The film is laid over its own poster only once it can play, and it fades in
   rather than cutting. */
.menu__field video.menu__film {
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.menu__field video.menu__film.is-ready { opacity: 1; }

/* Fixed values, not a blur and not anything that moves. A scrim whose opacity
   pulses is a scrim that fails on one frame in twenty, and the one it fails on
   is the one somebody screenshots. Measured against the brightest frame of
   f21-every-era through this stack, the primary links clear 12:1. */
.menu__scrim {
  background:
    linear-gradient(to bottom, rgba(9, 11, 11, 0.62) 0%, rgba(9, 11, 11, 0.82) 58%, rgba(9, 11, 11, 0.92) 100%),
    rgba(9, 11, 11, 0.34);
}

/* --- The bar ---------------------------------------------------------------- */

.menu__bar,
.menu__scroll,
.menu__foot {
  position: relative;
  z-index: 1;
}

.menu__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  padding: max(10px, env(safe-area-inset-top, 0px)) var(--margin) 10px;
}

.menu__brand {
  display: block;
  width: min(46vw, 190px);
  color: var(--paper);
}

.menu__brand svg { width: 100%; height: auto; display: block; }

.menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--paper);
  font-size: 20px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.menu__close:hover,
.menu__close:focus-visible { color: var(--f21-red-hi); }

/* --- The field -------------------------------------------------------------- */

.menu__scroll {
  flex: 1 1 auto;
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--margin);
}

/* The open field. auto above the group, a fixed measure below it: the space
   is deliberately over the links, and the links stay where the hand is. */
.menu__group {
  width: 100%;
  margin-top: auto;
  padding-bottom: clamp(16px, 5vh, 44px);
}

.menu__list {
  display: flex;
  flex-direction: column;
}

/* No rule between items, and no indent on any of them. The alignment of the
   column is the point: an active item that steps 30px to the right breaks the
   only line the eye is following. */
.menu__list a {
  display: block;
  padding: clamp(7px, 1.1vh, 12px) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 9vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--paper-dim);
  transition: color var(--dur-fast) var(--ease-out);
}

.menu__list a > span { display: inline-block; }

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

/* The current destination is marked in red on the label itself, and by a rule
   drawn under it. Neither moves the label. */
.menu__list a[aria-current='page'] { color: var(--paper); }

.menu__list a[aria-current='page'] > span {
  box-shadow: inset 0 -2px 0 0 var(--f21-red);
}

.menu__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: clamp(20px, 4vh, 40px);
  padding-top: clamp(14px, 2.4vh, 22px);
  border-top: 1px solid rgba(244, 245, 244, 0.14);
}

.menu__secondary a {
  display: block;
  padding: 8px 0;
  min-height: 40px;
  font-family: var(--font-text);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--paper-faint);
  transition: color var(--dur-fast) var(--ease-out);
}

.menu__secondary a:hover,
.menu__secondary a:focus-visible,
.menu__secondary a[aria-current='page'] { color: var(--paper); }

.menu__foot {
  flex: 0 0 auto;
  padding: 12px var(--margin) calc(14px + env(safe-area-inset-bottom, 0px));
}

.menu__foot .micro { color: var(--paper-mute); }

/* A short screen, or a phone held sideways. The open field goes first, then
   the space around the group, and the type last. Close stays in the bar and
   the bar stays at the top. */
@media (max-height: 620px) {
  .menu__bar { min-height: 58px; }
  .menu__brand { width: min(40vw, 160px); }
  /* The open field goes first — margin-top:auto still puts the group at the
     bottom, it simply has less to give away — then the space around it, then
     the type. The links stay where the hand is at every height. */
  .menu__group { padding-bottom: 12px; }
  .menu__list a { font-size: clamp(22px, 6vw, 30px); padding: 6px 0; }
  .menu__secondary { margin-top: 16px; padding-top: 12px; }
}

/* 320px. The type steps down before anything wraps to two lines. */
@media (max-width: 359px) {
  .menu__list a { font-size: 27px; }
  .menu__secondary { gap: 6px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu__field video.menu__film { transition: none; }
}

/* The masthead sits over the menu (z 80 over 75). While the menu is open its
   contents step out of the way, so the menu's own bar is the only thing at
   the top. The toggle's state is still kept in sync by nav.js.

   pointer-events matters as much as visibility: the header box still covered
   the top 72px of the menu, and every tap on the menu's own Close landed on
   an invisible masthead instead. It was reachable by keyboard and not by
   thumb, which is the worst way for a control to fail. */
html.is-menu-open .masthead {
  pointer-events: none;
}

html.is-menu-open .masthead > * { visibility: hidden; }

/* The scroll lock. The document is fixed at the offset it was at, and nav.js
   puts it back on close, which is what keeps a phone from returning a reader
   to the top of the page after they close the menu without choosing. */
html.is-menu-open body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}