/* ==========================================================================
   FRONTLINE21 — LAYOUT
   The eight column grid, the header, the movement shell.
   ========================================================================== */

.shell {
  padding-inline: var(--margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* --- Column spans --------------------------------------------------------
   Mobile is 4 columns and everything runs full width by default. The medium
   and large maps are declared per class and applied at their breakpoints. */

[class*='gc-'] {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (min-width: 721px) and (max-width: 1023px) {
  [class*='gc-'] {
    grid-column: var(--gc-md, 1 / -1);
  }
}

@media (min-width: 1024px) {
  [class*='gc-'] {
    grid-column: var(--gc-lg, 1 / -1);
  }
}

.gc-full     { --gc-lg: 1 / -1;       --gc-md: 1 / -1; }
.gc-hero-head{ --gc-lg: 1 / span 5;   --gc-md: 1 / span 5; }
.gc-hero-copy{ --gc-lg: 6 / span 3;   --gc-md: 1 / span 5; }
.gc-1-3      { --gc-lg: 1 / span 3;   --gc-md: 1 / span 6; }
.gc-4-2      { --gc-lg: 4 / span 2;   --gc-md: 1 / span 3; }
.gc-foot-3   { --gc-lg: 6 / span 3;   --gc-md: 4 / span 3; }
.gc-1-4      { --gc-lg: 1 / span 4;   --gc-md: 1 / span 3; }
.gc-1-5      { --gc-lg: 1 / span 5;   --gc-md: 1 / span 6; }
.gc-1-6      { --gc-lg: 1 / span 6;   --gc-md: 1 / span 6; }
.gc-2-6      { --gc-lg: 2 / span 6;   --gc-md: 1 / span 6; }
.gc-3-5      { --gc-lg: 3 / span 5;   --gc-md: 2 / span 5; }
.gc-4-5      { --gc-lg: 4 / span 5;   --gc-md: 1 / span 6; }
.gc-5-3      { --gc-lg: 5 / span 3;   --gc-md: 4 / span 3; }
.gc-5-4      { --gc-lg: 5 / span 4;   --gc-md: 4 / span 3; }
.gc-6-3      { --gc-lg: 6 / span 3;   --gc-md: 1 / span 6; }

/* --- Movements ------------------------------------------------------------ */

.movement {
  position: relative;
  padding-block: var(--movement-pad);
}

.movement + .movement::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--margin);
  right: var(--margin);
  height: 1px;
  background: var(--ink-line);
}

.movement--flush {
  padding-block: 0;
}

.movement__head {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--stack-md);
  align-items: start;
  margin-bottom: var(--stack-lg);
}

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

/* --- Fixed rails ----------------------------------------------------------
   Retired 8 September 2026 with the eleven-movement homepage. The progress
   hairline and the right-hand index it drove are gone; the masthead alone
   carries position now (progress.js). */

/* --- Header ---------------------------------------------------------------- */

.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  padding: 16px var(--margin);
  transition: background var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.masthead.is-stuck {
  background: rgba(18, 22, 22, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--ink-line);
}

@media (min-width: 721px) {
  .masthead {
    padding-block: 20px;
  }
}

/* The wordmark is the authentic outlined mark, not type. font-size survives as
   the sizing handle so every place that set it still works, and colour survives
   because FRONTLINE inherits currentColor from here. The 21 carries its own red
   inside the symbol. */
.wordmark {
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
}

/* 0.82em is the old cap height. Matching it means the masthead rhythm, the
   colophon and every alignment around the mark are unchanged by the swap. */
.wordmark__mark {
  display: block;
  height: 0.82em;
  width: auto;
}

.masthead__nav {
  display: none;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}

@media (min-width: 1024px) {
  .masthead__nav {
    display: flex;
  }
}

.masthead__link {
  font-family: var(--font-text);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-dim);
  padding-block: 6px;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}

.masthead__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--f21-red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-mid) var(--ease-out);
}

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

.masthead__link:hover::after,
.masthead__link:focus-visible::after,
.masthead__link.is-current::after {
  transform: scaleX(1);
}

.masthead__end {
  display: flex;
  align-items: center;
  gap: 14px;
}

.masthead__end .btn {
  display: none;
}

@media (min-width: 1024px) {
  .masthead__end .btn {
    display: inline-flex;
  }
}

/* --- The menu control ------------------------------------------------------
   One glyph from the supplied icon set, in a 44px target, hidden on a desktop
   where the five destinations are in the masthead itself. The three bars that
   folded into an X are retired: the menu now carries its own Close, at the
   top right where the Shift5 reference puts it, and two close controls that
   both animate is one more than the page needs. */

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

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

.menu-toggle__glyph { display: inline-flex; }

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

/* --- Full bleed helper ------------------------------------------------------- */

.bleed {
  width: 100%;
}

.rule {
  height: 1px;
  background: var(--ink-line);
  border: 0;
}

.rule--f21-red {
  background: var(--f21-red);
}