/*
  BEASTMODE DEVELOPMENT -- TYPE SYSTEM
  Owner: type/style lane. Self-hosted @font-face, the fluid scale, utility
  classes, and the label/tag/heading cluster patterns. Depends on
  tokens.css (color + spacing) being loaded first.

  FAMILIES (see docs/TYPE.md for the full rationale):
    Archivo Variable      -- display, headings, body. Variable on wght only
                              (100-900). Width axis pinned; "tight" comes
                              from negative letter-spacing at scale, the
                              same technique the reference site itself uses.
    Martian Mono Variable  -- [bracket tags], section indices, spec numbers.
                              Variable on wght only (100-800). Squarish,
                              blocky, slightly severe -- reads like a
                              part stencil, not a code editor.
*/

/* -----------------------------------------------------------------------
   FONT FACES -- self-hosted, woff2 only, font-display: swap.
----------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo Variable";
  src: url("../fonts/Archivo-Variable.subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Martian Mono Variable";
  src: url("../fonts/MartianMono-Variable.subset.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/*
  METRIC-MATCHED FALLBACKS -- computed numerically from the real font
  tables (fontTools, hhea + OS/2, xAvgCharWidth-based size-adjust), not
  eyeballed, against Liberation Sans / Liberation Mono (the metric-identical
  open twins of Arial and Courier New -- so this holds even when the actual
  Arial/Courier New aren't installed on the viewer's machine). This is what
  kills the swap-in layout shift: the fallback occupies the same box the
  webfont will occupy before it's even downloaded.

    Archivo vs Liberation Sans:  size-adjust 99.21%, ascent-override 88.50%,
                                   descent-override 21.17%, line-gap 0%.
    Martian Mono vs Liberation Mono: size-adjust 124.98%, ascent-override
                                   80.01%, descent-override 16.00%, line-gap 0%.
*/

@font-face {
  font-family: "Archivo Fallback";
  size-adjust: 99.21%;
  ascent-override: 88.5%;
  descent-override: 21.17%;
  line-gap-override: 0%;
  src: local("Arial");
}

@font-face {
  font-family: "Martian Mono Fallback";
  size-adjust: 124.98%;
  ascent-override: 80.01%;
  descent-override: 16%;
  line-gap-override: 0%;
  src: local("Courier New");
}

:root {
  --font-display: "Archivo Variable", "Archivo Fallback", Arial, Helvetica, sans-serif;
  --font-body: var(--font-display);
  --font-mono: "Martian Mono Variable", "Martian Mono Fallback", "Courier New", ui-monospace, "Cascadia Mono", monospace;

  /* variable-font weight instances actually used across the system */
  --w-thin: 100;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 900;

  /* -----------------------------------------------------------------------
     FLUID TYPE SCALE
     Utopia-style clamp(): each step is min-viewport-size at 375px fluidly
     interpolated to max-viewport-size at 1440px, then held constant past
     either edge. Two ratios generate every step -- not arbitrary numbers:

       ratio-min  = 1.2      restrained progression, anchors the 375px end.
                    Reading-size steps (label/mono-tag/body-s/body) use this
                    ratio at BOTH ends, so utility text stays calm and does
                    not "fluidly" grow just because the canvas does --
                    accessibility text should be predictable, not decorative.

       ratio-max  = sqrt(2)  ~1.41421, the ISO 216 drafting-paper ratio
                    (A4->A3->A2...). Only steps at or above h4 use this
                    ratio for their 1440px end -- the headline/display tier
                    is allowed to open up dramatically as the canvas grows,
                    which is where the "one giant word" effect lives.
                    Chosen deliberately for a mechanical-engineering brand:
                    it is literally the ratio on Dave's own drawing sheets.

     display-xl lands at ~15.3vw at 375px and ~14.1vw at 1440px -- inside
     the 12-18vw brief target at both ends, not just coincidentally at one.
  ----------------------------------------------------------------------- */

  --fs-label:        clamp(0.6944rem, 0.6639rem + 0.1304vw, 0.7812rem); /* 11.11 -> 12.5px */
  --fs-mono-tag:      clamp(0.8333rem, 0.7967rem + 0.1565vw, 0.9375rem); /* 13.3 -> 15px */
  --fs-body-s:        clamp(0.8333rem, 0.7967rem + 0.1565vw, 0.9375rem); /* 13.3 -> 15px */
  --fs-body:          clamp(1rem,      0.9560rem + 0.1878vw, 1.125rem);  /* 16 -> 18px */
  --fs-h4:            clamp(1.2rem,    1.0623rem + 0.5874vw, 1.5910rem); /* 19.2 -> 25.5px */
  --fs-h3:            clamp(1.44rem,   1.1548rem + 1.2169vw, 2.25rem);   /* 23 -> 36px */
  --fs-spec-number:   clamp(1.6416rem, 1.1552rem + 2.0752vw, 3.0229rem); /* 26.3 -> 48.4px */
  --fs-h2:            clamp(1.728rem,  1.2160rem + 2.1844vw, 3.182rem);  /* 27.6 -> 50.9px */
  --fs-h1:            clamp(2.0736rem, 1.2192rem + 3.6453vw, 4.5rem);    /* 33.2 -> 72px */
  --fs-display-m:     clamp(2.4883rem, 1.1237rem + 5.8226vw, 6.364rem);  /* 39.8 -> 101.8px */
  --fs-display-l:     clamp(2.986rem,  0.8684rem + 9.0351vw, 9rem);      /* 47.8 -> 144px */
  --fs-display-xl:    clamp(3.5832rem, 0.3632rem + 13.7386vw, 12.7279rem); /* 57.3 -> 203.6px */
}

/* -----------------------------------------------------------------------
   BASE TEXT ELEMENTS
----------------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: 1.3; /* brief: tight leading, 1.15-1.3 */
  color: var(--bmd-white);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -----------------------------------------------------------------------
   UTILITY CLASSES -- one per scale step. Every step owns its own
   line-height and letter-spacing (optical, not linear): tight and
   negative at the huge end, loose and positive at the tiny end.
----------------------------------------------------------------------- */

.u-display-xl,
.u-display-l,
.u-display-m {
  font-family: var(--font-display);
  color: var(--bmd-white);
  margin: 0;
  text-wrap: balance;
  /* safety net, not a style choice: at 12-18vw a single unbroken word
     LONGER than ~8-9 characters (e.g. a full "BEASTMODE" set solid) can
     exceed even a 1440px container. overflow-wrap lets the rare long word
     break onto a second line at full size instead of bleeding past the
     viewport edge -- never shrink display type to fit a long word, wrap it. */
  /* break-word, not anywhere: only breaks a word that genuinely cannot fit,
     instead of breaking at any character the moment a line runs long. */
  overflow-wrap: break-word;
}

.u-display-xl {
  font-size: var(--fs-display-xl);
  font-weight: var(--w-black);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.u-display-l {
  font-size: var(--fs-display-l);
  font-weight: var(--w-black);
  line-height: 1.0;
  letter-spacing: -0.028em;
}

.u-display-m {
  font-size: var(--fs-display-m);
  font-weight: var(--w-bold);
  line-height: 1.02;
  letter-spacing: -0.024em;
}

.u-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--w-bold);
  line-height: 1.02;
  letter-spacing: -0.018em;
}

.u-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--w-semibold);
  line-height: 1.04;
  letter-spacing: -0.012em;
}

.u-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--w-semibold);
  line-height: 1.1;
  letter-spacing: -0.008em;
}

.u-h4 {
  font-size: var(--fs-h4);
  font-weight: var(--w-medium);
  line-height: 1.18;
  letter-spacing: -0.004em;
}

.u-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--bmd-mist); /* never --bmd-steel: fails 4.5:1 at body size */
  max-width: var(--content-max-w);
  margin: 0;
}

.u-body-s {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: var(--w-regular);
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--bmd-mist);
  margin: 0;
}

.u-label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--w-semibold);
  line-height: 1.15;
  letter-spacing: 0.12em; /* brief spec: +0.12em */
  text-transform: uppercase;
  color: var(--bmd-mist);
  margin: 0;
}

.u-mono-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
  font-weight: var(--w-medium);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bmd-mist); /* large/UI-scale mono chrome, not running body text */
  margin: 0;
  white-space: nowrap;
}

.u-mono-tag--accent {
  color: var(--bmd-red);
}

.u-spec-number {
  font-family: var(--font-mono);
  font-size: var(--fs-spec-number);
  font-weight: var(--w-medium);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--bmd-white);
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0;
}

.u-spec-number small {
  font-size: 0.36em;
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  color: var(--bmd-mist);
  vertical-align: 0.42em;
  margin-left: 0.15em;
}

/* -----------------------------------------------------------------------
   BRACKET TAG -- the `[AAV]` treatment. A real character-bracketed mono
   tag, not an image, not a pseudo-element cage -- the brackets ARE glyphs.
----------------------------------------------------------------------- */

.u-bracket-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
  font-weight: var(--w-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bmd-red);
  white-space: nowrap;
}

.u-bracket-tag::before { content: "["; }
.u-bracket-tag::after  { content: "]"; }

/* -----------------------------------------------------------------------
   HEADLINE CLUSTERS -- how a label / tag / heading group stacks.
   Two patterns, both real, both used across the site:

   .type-cluster--ref   "the Anduril way": giant word first, tiny tracked
                         label + mono tag stacked directly beneath it.

   .type-cluster--bmd   "our way": a drawing-title-block frame -- the mono
                         spec tag sits ABOVE the word like a part number,
                         a hairline closes the block under the word, and
                         the descriptive label reads last, like a caption
                         on a real engineering drawing. This is the
                         "authenticity and craft" advantage from the brief
                         made typographic: it looks like it came off a
                         drafting table, because on this site, it did.
----------------------------------------------------------------------- */

.type-cluster {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.type-cluster--ref .type-cluster__word {
  order: 1;
}
.type-cluster--ref .type-cluster__meta {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.type-cluster--bmd .type-cluster__tag {
  order: 1;
}
.type-cluster--bmd .type-cluster__word {
  order: 2;
}
.type-cluster--bmd .type-cluster__rule {
  order: 3;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--bmd-hairline);
  margin: var(--space-2) 0;
}
.type-cluster--bmd .type-cluster__label {
  order: 4;
}

/* -----------------------------------------------------------------------
   NUMBERED STEPPER -- 01 / 06 style section index, mono, tabular.
----------------------------------------------------------------------- */

.u-stepper {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-tag);
  font-weight: var(--w-medium);
  letter-spacing: 0.04em;
  color: var(--bmd-steel);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.u-stepper strong {
  color: var(--bmd-white);
  font-weight: var(--w-medium);
}

/* -----------------------------------------------------------------------
   RESPONSIVE NOTE: the scale is fluid by design (clamp handles 375px to
   1440px continuously). No breakpoint overrides should be necessary for
   type size; if a component needs a different STACK direction at a
   breakpoint, that's layout.css's job (lead lane), not this file's.
----------------------------------------------------------------------- */