/* 047 version 5, "The Standard": the theme.
   Built the way the flag is made: cloth, light, stitching, discipline.
   Black ground. The flag's navy, red and white are materials that appear only where the light falls.
   One key light, high on the right. One stitched seam. Mona Sans capitals at calm sizes; Martian Mono for labels, numerals, dates.
   Colours: the version 2 tokens sampled from the approved mark (foundation/palette.json), unchanged. */

@font-face { font-family: "Mona BW"; src: url("/assets/mona-bw.73cccc83a9.woff2") format("woff2"); font-weight: 400 650; font-display: swap; }
@font-face { font-family: "Martian BW"; src: url("/assets/martian-mono-bw.7252bcfd21.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  /* version 2 palette, verbatim (foundation/tokens.css) */
  --bw-ground: #0a0b0c; --bw-ground-deep: #040405;
  --bw-union: #03071b; --bw-union-lit: #060d27; --bw-union-raised: #0d1735; --bw-union-line: #202c4d;
  --bw-gun-900: #111213; --bw-gun-800: #1c1d1e; --bw-gun-700: #292a2a; --bw-gun-600: #373838; --bw-gun-500: #4a4b4b;
  --bw-gun-400: #696a69; --bw-gun-350: #8a8a88; --bw-gun-300: #a7a7a4;
  --bw-silver: #dfdfdb; --bw-white: #fefefd;
  --bw-oxblood: #740e1d; --bw-oxblood-lit: #8d1927; --bw-oxblood-deep: #43050d;
  --bw-eye: #db0e23; --bw-eye-deep: #880413;

  /* the key light: cotton white at strengths, never a colour of its own */
  --light-1: rgba(254, 254, 253, .07); --light-2: rgba(254, 254, 253, .16); --light-3: rgba(254, 254, 253, .32); --light-4: rgba(254, 254, 253, .9);

  --sans: "Mona BW", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Martian BW", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: round(down, clamp(20px, 1rem + 3vw, 56px), 1px);
  --maxc: 1328px;
  --gap: round(down, clamp(40px, 5.5vw, 96px), 2px);
  --nav-h: 72px;
  --band-h: 64px;                                   /* the bar (56) and the seam (8) */
  --foot: 32px;                                     /* black under the seam: the next course begins */
  --ease-light: cubic-bezier(.22, .61, .2, 1);
}
@media (max-width: 899.98px) { :root { --nav-h: 64px; --band-h: 56px; --foot: 40px; } }

* { box-sizing: border-box; }
html { background: var(--bw-ground); color: var(--bw-silver); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-kerning: normal; }
img, svg { display: block; }
h1, h2, h3, p, figure, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bw-white); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the strict grid: content at most 1328 px, gutters on whole pixels, the wrap's left edge on a whole pixel */
.wrap { width: min(100%, calc(var(--maxc) + 2 * var(--gutter))); margin-left: max(0px, round(down, (100% - var(--maxc) - 2 * var(--gutter)) / 2, 1px)); padding-inline: var(--gutter); }

/* ------------------------------------------------------------------ type */
.display { font: 600 clamp(1.75rem, 1.2rem + 2vw, 3rem)/1.06 var(--sans); letter-spacing: .03em; text-transform: uppercase; color: var(--bw-white); text-wrap: balance; font-feature-settings: "case"; }
.h2 { font: 600 clamp(1.5rem, 1rem + 1.6vw, 2.375rem)/1.1 var(--sans); letter-spacing: .035em; text-transform: uppercase; color: var(--bw-white); text-wrap: balance; font-feature-settings: "case"; }
.h3 { font: 600 1.25rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--bw-white); font-feature-settings: "case"; }
.lead { font: 400 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.55 var(--sans); color: var(--bw-silver); }
.body { font: 400 1.0625rem/1.65 var(--sans); color: var(--bw-silver); max-width: 62ch; }
.label { font: 450 .75rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bw-gun-300); }
.quiet { color: var(--bw-gun-350); }
.note { font: 400 .9375rem/1.6 var(--sans); color: var(--bw-gun-300); max-width: 68ch; }
.meta { font: 400 .75rem/1.6 var(--mono); letter-spacing: .02em; color: var(--bw-gun-350); text-transform: none; }
.numeral { font: 400 clamp(2.5rem, 1.8rem + 2.4vw, 4rem)/1 var(--mono); letter-spacing: -.01em; color: var(--bw-white); font-variant-numeric: tabular-nums slashed-zero; }

/* a headline lit from the top right (rest state of the light) */
.lit { color: var(--bw-white); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .lit { background-image: linear-gradient(105deg, #e1e1dd 0%, #efefec 45%, var(--bw-white) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* ------------------------------------------------------------------ the star: the smallest quiet mark */
.star { width: 9px; height: 9px; flex: none; fill: currentColor; }

/* ------------------------------------------------------------------ actions */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; white-space: nowrap;
  font: 600 .8125rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--bw-white);
  border: 1px solid transparent; border-radius: 0; cursor: pointer; transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s; }
/* primary: oxblood cloth, its top and right edges catching the light */
.btn--primary { background: linear-gradient(200deg, var(--bw-oxblood-lit) 0%, var(--bw-oxblood) 55%); box-shadow: inset 0 1px 0 var(--light-3), inset -1px 0 0 var(--light-1); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--bw-oxblood-lit); box-shadow: inset 0 1px 0 rgba(254, 254, 253, .46), inset -1px 0 0 var(--light-2); }
.btn--primary:active, .btn--primary.is-pressed { background: var(--bw-oxblood-deep); box-shadow: inset 0 1px 0 var(--light-1); }
/* secondary: ruled, a control boundary in gun-400 (3:1 on every ground); turns into the light on hover */
.btn--ruled { background: transparent; border-color: var(--bw-gun-400); }
.btn--ruled:hover, .btn--ruled.is-hover { border-color: var(--bw-gun-300); box-shadow: inset 0 1px 0 var(--light-3), inset -1px 0 0 var(--light-2); }
.btn--ruled:active, .btn--ruled.is-pressed { background: var(--bw-gun-900); }
.btn.is-focus { outline: 2px solid var(--bw-white); outline-offset: 3px; }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: .75rem; letter-spacing: .16em; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ------------------------------------------------------------------ the header */
.nav { position: absolute; inset: 0 0 auto 0; height: var(--nav-h); z-index: 10; }
.nav__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--bw-white); }
.wordmark__name { font: 600 .9375rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; margin-right: -.26em; }
.wordmark__rule { width: 1px; height: 14px; background: var(--bw-gun-500); }
.wordmark__usa { font: 450 .6875rem/1 var(--mono); letter-spacing: .22em; color: var(--bw-gun-300); }
.links { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.links a:not(.btn) { font: 500 .75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--bw-gun-300); transition: color .2s; }
.links a:not(.btn):hover { color: var(--bw-white); }
.links .btn { margin-left: clamp(4px, 1vw, 12px); }
.menu-btn { display: none; align-items: center; gap: 12px; min-height: 44px; padding: 0; background: none; border: 0; color: var(--bw-white); cursor: pointer;
  font: 450 .75rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.menu-btn::after { content: ""; width: 20px; height: 7px; border-block: 1px solid var(--bw-white); }
.menu { margin: 0; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; padding: 0; background: var(--bw-ground); color: var(--bw-white); }
.menu__in { min-height: 100%; display: grid; align-content: start; gap: 0; padding: 20px var(--gutter) 40px; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: 44px; margin-bottom: 32px; }
.menu__in nav a { display: block; padding: 16px 0; font: 600 1.375rem/1.1 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--bw-gun-800); }
.menu__in > .btn { margin-top: 32px; justify-self: start; }
.menu-close { background: none; border: 0; color: var(--bw-white); font: 450 .75rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; min-height: 44px; cursor: pointer; }
@media (max-width: 899.98px) { .links { display: none; } .menu-btn { display: inline-flex; } }

/* ------------------------------------------------------------------ the hero: words left, the plate right; the bar and the seam beneath */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bw-ground); padding-bottom: var(--foot); }
/* the key light on the black ground: an ellipse high on the right; the far corner falls to the deepest black */
.hero__light { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(46% 64% at 86% -6%, rgba(223, 223, 219, .085) 0%, rgba(223, 223, 219, .03) 42%, transparent 72%),
              radial-gradient(60% 70% at -4% 104%, rgba(4, 4, 5, .95) 0%, rgba(4, 4, 5, 0) 70%); }
.hero__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--P); column-gap: var(--gap);
  --hh: max(calc(var(--P) + 96px), round(down, 100svh - var(--nav-h) - var(--band-h) - var(--foot), 1px));
  padding-top: var(--nav-h); min-height: calc(var(--nav-h) + var(--hh)); }
.hero__words { align-self: center; display: grid; justify-items: start; gap: 26px; max-width: 700px; padding-block: 40px; }
.hero__words .actions { margin-top: 8px; }
.badge { display: inline-flex; align-items: center; gap: 12px; font: 450 .75rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bw-gun-300); }
.badge .star { color: rgba(254, 254, 253, .82); }
.display { max-width: 14.2em; }                     /* three lines on a desktop: INTELLIGENT GROWTH / SYSTEMS FOR THE / BACKBONE OF AMERICA. */

/* the plate: the mark, contained, cut at exact device pixels (plate.css sets --P per screen, the <picture> picks the file) */
.plate { position: relative; width: var(--P); height: var(--P); align-self: start; margin-top: round(down, (var(--hh) - var(--P)) / 2, 1px);
  box-shadow: -22px 30px 64px -12px rgba(0, 0, 0, .9), -3px 4px 0 0 rgba(0, 0, 0, .55); }
.plate img { width: var(--P); height: var(--P); }
/* a hairline all round, outside the image's pixels */
.plate::before { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(254, 254, 253, .06); pointer-events: none; }
/* the lit edge: the top and right edges catch the key light, brightest at the corner nearest the lamp */
.plate__edge { position: absolute; inset: -1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--light-1) 30%, var(--light-4) 100%) top / 100% 1px no-repeat,
              linear-gradient(180deg, var(--light-4) 0%, var(--light-2) 40%, transparent 85%) right / 1px 100% no-repeat; }
.plate__shade, .plate__sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; }

/* ------------------------------------------------------------------ the seam: a red stripe stitched to a white one, lit toward the lamp */
.seam { position: relative; height: 8px; overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)) 0 4px / 100% 1px no-repeat,
              linear-gradient(90deg, #2e2f2f 0%, #8f8f8c 42%, var(--bw-silver) 78%, var(--bw-white) 100%) 0 5px / 100% 3px no-repeat,
              linear-gradient(90deg, #2a0309 0%, var(--bw-oxblood-deep) 18%, var(--bw-oxblood) 58%, var(--bw-oxblood-lit) 100%) 0 0 / 100% 4px no-repeat; }
/* the stitches: 1 px, 6 on 4 off (measured in the mark: 15 px pitch at 2048, dash to gap 3 to 2), catching more light to the right */
.seam::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(254, 254, 253, .55) 0 6px, transparent 6px 10px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15), #000 85%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15), #000 85%); }
.seam::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent 0%, rgba(254, 254, 253, .0) 40%, rgba(254, 254, 253, .85) 50%, rgba(254, 254, 253, 0) 60%, transparent 100%) 0 0 / 300% 100% no-repeat; }

/* ------------------------------------------------------------------ the bar: the service workers ride on the seam. One bar, scrolling, no control. */
.band { position: relative; height: calc(var(--band-h) - 8px); display: flex; align-items: center; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.band__track { display: flex; width: max-content; }
.band__list { display: flex; align-items: center; flex: none; }
.band__list li { display: flex; align-items: center; font: 500 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bw-gun-300); white-space: nowrap; }
.band__list .star { width: 7px; height: 7px; margin-inline: 34px; color: rgba(254, 254, 253, .34); }
@media (prefers-reduced-motion: no-preference) {
  .band__track { animation: band 52s linear infinite; }
  .band:hover .band__track { animation-play-state: paused; }
  @keyframes band { to { transform: translateX(-50%); } }
}

/* ------------------------------------------------------------------ the light comes up once: it enters at the plate (nearest the lamp), crosses the words, runs along the seam, and settles. Nothing flies. */
@media (prefers-reduced-motion: no-preference) {
  .light .hero__light { animation: light-up 1.8s var(--ease-light) both; }
  .light .plate__shade { background: #000; animation: shade-off 1.25s var(--ease-light) .05s both; }
  .light .plate__sweep { mix-blend-mode: screen; animation: sweep-band 1.25s var(--ease-light) .05s both;
    background: linear-gradient(110deg, transparent 0%, transparent 36%, rgba(254, 254, 253, .2) 46%, rgba(254, 254, 253, .06) 52%, transparent 62%, transparent 100%) 0 0 / 300% 100% no-repeat; }
  .light .plate__edge { animation: edge-catch .9s var(--ease-light) .35s both; }
  .light .sweep { background-image: linear-gradient(105deg, #333435 0%, #333435 30%, #ffffff 38%, #ffffff 41%, #ececE9 50%, #e1e1dd 66.7%, #efefec 82%, var(--bw-white) 100%);
    background-size: 300% 100%; background-position: 0 0; animation: sweep-text 1.5s var(--ease-light) .55s both; }
  .light .hero__words > :not(h1) { animation: come-up 1.1s var(--ease-light) both; }
  .light .hero__words > .badge { animation-delay: .7s; }
  .light .hero__words > .lead { animation-delay: 1s; }
  .light .hero__words > .actions { animation-delay: 1.15s; }
  .light .cloth { animation: cloth-up 1.6s var(--ease-light) .2s both; }
  .light .seam::after { animation: seam-run 1.4s var(--ease-light) 1s both; }
  @keyframes light-up { from { opacity: 0; } to { opacity: 1; } }
  @keyframes shade-off { from { opacity: .62; } to { opacity: 0; } }
  @keyframes sweep-band { 0% { opacity: 1; background-position: 0 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: 100% 0; } }
  @keyframes edge-catch { from { clip-path: inset(0 0 100% 100%); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
  @keyframes sweep-text { from { background-position: 0 0; } to { background-position: 100% 0; } }
  @keyframes come-up { from { opacity: .18; } to { opacity: 1; } }
  @keyframes cloth-up { from { opacity: .15; } to { opacity: 1; } }
  @keyframes seam-run { 0% { opacity: 1; background-position: 0 0; } 90% { opacity: 1; } 100% { opacity: 0; background-position: 100% 0; } }
}

/* ------------------------------------------------------------------ hero 2, "Colours": the flag's navy cloth on the left, lit at its top right, falling into black.
   The cloth is the mark's own canton (stars pressed to faint). Its falloff is a mask on the image itself, so no edge of the cloth can ever show;
   the key light raises it toward union-raised where it lands. */
.cloth { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: calc(var(--gutter) + var(--P) + var(--gap) / 2); overflow: hidden; pointer-events: none; }
.cloth img { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: none; filter: brightness(1.8) saturate(1.1);
  /* light centred behind the headline's right end; falls off left and down; the cloth emerges below the header (the nav stays clean) */
  -webkit-mask-image: radial-gradient(82% 62% at 80% 40%, #000 0%, rgba(0, 0, 0, .8) 28%, rgba(0, 0, 0, .34) 60%, transparent 97%), linear-gradient(270deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, transparent 8%, #000 26%);
  -webkit-mask-composite: source-in, source-in;
  mask-image: radial-gradient(82% 62% at 80% 40%, #000 0%, rgba(0, 0, 0, .8) 28%, rgba(0, 0, 0, .34) 60%, transparent 97%), linear-gradient(270deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, transparent 8%, #000 26%);
  mask-composite: intersect, intersect; }
@media (max-width: 899.98px) {
  .cloth { right: 0; bottom: auto; height: 460px; }
  .cloth img { height: 100%;
    -webkit-mask-image: radial-gradient(110% 80% at 92% 34%, #000 0%, rgba(0, 0, 0, .7) 30%, rgba(0, 0, 0, .26) 62%, transparent 97%), linear-gradient(180deg, transparent 0, transparent 12%, #000 34%); -webkit-mask-composite: source-in;
    mask-image: radial-gradient(110% 80% at 92% 34%, #000 0%, rgba(0, 0, 0, .7) 30%, rgba(0, 0, 0, .26) 62%, transparent 97%), linear-gradient(180deg, transparent 0, transparent 12%, #000 34%); mask-composite: intersect; }
}

/* ------------------------------------------------------------------ phones and narrow windows: the badge, the H1, the plate (the wolf), the sub-line, the buttons
   (the Captain, 2026-10-12). The words block dissolves into the stage's grid (display: contents) so the plate can stand between the H1
   and the sub-line; the badge and the H1 above it are rounded up to whole pixels, so the plate still lands on a whole device pixel.
   A browser without :has() keeps the plate first. Desktop is untouched. */
@media (max-width: 899.98px) {
  .hero__stage { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 40px; min-height: 0; }
  .hero__words { align-self: start; gap: 22px; height: calc-size(auto, round(up, size, 1px)); }
  .plate { margin-top: 0; order: -1; margin-bottom: 16px; }
  .hero__stage:has(> .plate) { row-gap: 22px; }
  .hero__stage:has(> .plate) > .hero__words { display: contents; }
  .hero__stage:has(> .plate) > .hero__words > * { justify-self: start; }
  .hero__stage:has(> .plate) > .hero__words > .badge { order: 1; height: calc-size(auto, round(up, size, 1px)); }
  .hero__stage:has(> .plate) > .hero__words > h1 { order: 2; height: calc-size(auto, round(up, size, 1px)); line-height: round(up, 1.06em, 1px); }   /* whole lines too: WebKit has no calc-size() */
  .hero__stage:has(> .plate) > .plate { order: 3; margin-block: 4px 6px; }
  .hero__stage:has(> .plate) > .hero__words > .lead { order: 4; }
  .hero__stage:has(> .plate) > .hero__words > .actions { order: 5; margin-top: 0; }
  .btn { min-height: 48px; padding: 0 22px; }
}