/* ============================================================
   DIRECTION C skin: "Signal Flags". White water, the boldest
   type of the three, and each project section flies ONE
   maritime flag color: on the overview card's flag bar, the
   status glyph, and that section's rail tick. Text stays ink
   (flags never carry body text, so contrast holds).
   Synth flies signal blue, which is also the site accent.
   ============================================================ */

/* per-section flag colors (rotating set; synth = signal blue) */
.card[data-sec="0"]  { --flag: #2451b8; }  /* synth: signal blue */
.card[data-sec="1"]  { --flag: #d9482b; }
.card[data-sec="2"]  { --flag: #0e8a6d; }
.card[data-sec="3"]  { --flag: #e8a013; }
.card[data-sec="4"]  { --flag: #6b3fa0; }
.card[data-sec="5"]  { --flag: #d9482b; }
.card[data-sec="6"]  { --flag: #0e8a6d; }
.card[data-sec="7"]  { --flag: #e8a013; }
.card[data-sec="8"]  { --flag: #2451b8; }
.card[data-sec="9"]  { --flag: #6b3fa0; }
.card[data-sec="10"] { --flag: #d9482b; }
.card[data-sec="11"] { --flag: #0e8a6d; }
.card[data-sec="12"] { --flag: #2451b8; }

.headline, .headline--sm {
  font-family: var(--font-display);
  font-weight: 780;
  letter-spacing: -0.02em;
}
/* the boldest direction: push display size further */
.headline { font-size: clamp(46px, 8vw, 104px); }

/* flag bar under overview headlines (only where a section flag exists) */
.headline:not(.headline--sm)::after {
  content: '';
  display: block; width: 76px; height: 10px;
  margin-top: 20px; border-radius: 3px;
  background: var(--flag, transparent);
}

/* flags carry marks, never text */
.glyph { stroke: var(--flag, var(--accent)); stroke-width: 2; }
.rail-tick { background: var(--text-muted); }
.deck-rail-fill { background: var(--accent); }
.chart .bar { fill: var(--accent); }

/* intro/journey/close fly the site's own signal blue */
.card[data-sec="intro"], .card[data-sec="journey"], .card[data-sec="close"] { --flag: var(--accent); }
.bignum { color: var(--accent); }

/* the fleet on the close card: every section's flag in its color */
.fleet-flag[data-fsec="0"]  { color: #2451b8; }
.fleet-flag[data-fsec="1"]  { color: #d9482b; }
.fleet-flag[data-fsec="2"]  { color: #0e8a6d; }
.fleet-flag[data-fsec="3"]  { color: #e8a013; }
.fleet-flag[data-fsec="4"]  { color: #6b3fa0; }
.fleet-flag[data-fsec="5"]  { color: #d9482b; }
.fleet-flag[data-fsec="6"]  { color: #0e8a6d; }
.fleet-flag[data-fsec="7"]  { color: #e8a013; }
.fleet-flag[data-fsec="8"]  { color: #2451b8; }
.fleet-flag[data-fsec="9"]  { color: #6b3fa0; }
.fleet-flag[data-fsec="10"] { color: #d9482b; }
.fleet-flag[data-fsec="11"] { color: #0e8a6d; }
.fleet-flag[data-fsec="12"] { color: #2451b8; }

/* section rhythm: whisper-tint alternation */
.card[data-sec="1"], .card[data-sec="4"], .card[data-sec="7"], .card[data-sec="10"] { background-color: var(--bg-alt); }

/* the ONE highlight: synth, oversized in its own flag color */
.card[data-highlight] .headline { color: var(--flag); font-size: clamp(50px, 8.6vw, 112px); }
.card[data-highlight] .headline--sm { color: var(--flag); }

.proof { box-shadow: var(--shadow-card); }
.btn, .navbtn--next { background: var(--accent); color: #ffffff; }