/* ============================================================
   BOMAtlas brand layer: the printed plate.

   One file re-skins every legacy token vocabulary (atlas ink/paper,
   design-tokens gold, homepage sand/rust/coal, admin inline vars)
   onto one system. The reference is a printed atlas plate: a warm
   paper ground, ink hairlines instead of cards and shadows, a mono
   running head, and exactly one accent.

   THREE COLOURS. Everything else is ink at an opacity.
     ink    #14110D   warm near-black: type, rules, the dark ground
     paper  #F2EDE3   warm paper: the light ground
     forge  #BF0A30   Old Glory red: the single accent, brand-locked

   Map segment hues are DATA, not chrome. Six categories need six
   separable inks, so they stay chromatic, but they are tuned to the
   plate (mid-dark, low chroma) rather than to a default chart palette.
   They must match map-globe.js.

   Type: Instrument Serif for display, Geist for UI, Geist Mono for
   data. All three are self-hosted; no Google Fonts request.

   Radius is 2px. Not 8, not a pill. The only exception is 50% on a
   true circle (a map dot, an avatar).

   Loaded via @import at the TOP of each token-source stylesheet.
   Imported rules cascade BEFORE the host file's own rules, so every
   override here uses :root:root (0,2,0) to beat the legacy :root
   definitions (0,1,0) regardless of source order. Do not "simplify"
   the doubled selector.

   Theme behavior matches the site: light/dark follows the OS, and
   the manual toggle pins it via html[data-theme] (theme-init reads
   localStorage 'ba-theme'). Admin pages set data-theme="dark".
   ============================================================ */

/* ---- Display: Instrument Serif (self-hosted, latin) ---- */
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif/InstrumentSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---- UI: Geist ---- */
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
  font-weight: 700 800;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500 700;
  font-display: swap;
}

:root:root {
  /* ================= THE THREE ================= */
  --forge-red: #bf0a30;
  --atlas-ink: #14110d;
  --atlas-paper: #f2ede3;

  /* Red lifted for dark grounds. #bf0a30 on #14110d measures 2.99:1
     and fails AA, so the dark theme swaps in this one at 5.6:1. */
  --forge-red-lift: #f2536e;
  --forge-red-hover: #8a0722;
  --forge-red-deep: #8a0722;

  /* ---- BOMForge canon, restated on the plate ---- */
  --bf-black: #14110d;
  --bf-surface: #1c1813;
  --bf-elevated: #241f19;
  --bf-border: #322c24;
  --bf-text: #f2ede3;
  --bf-text-2: #b8b0a2;
  --bf-text-3: #968d7e;
  --bf-blue: #14110d;
  --bf-blue-bright: #4a443a;
  --bf-blue-soft: #6e6656;
  --forge-navy: #14110d;
  --forge-gold: #96621a;
  /* A flat ink, not a gradient. A gradient wordmark is the one thing
     that dates a mark fastest. */
  --bf-red-gradient: #bf0a30;

  /* ---- Type ---- */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family: var(--font-sans);
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-serif: var(--font-display);
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-data: var(--font-mono);

  /* ---- Radius: the plate is square ---- */
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --radius-2xl: 2px;
  --radius-full: 2px;
  --radius-pill: 2px;
  --radius: 2px;
  --border-radius: 2px;
  --header-radius: 2px;
  --header-radius-menu: 2px;

  /* ---- Elevation: hairlines, not shadows. A printed plate has no
     drop shadow. These stay defined because 40 stylesheets read them. ---- */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-2xl: none;
  --shadow-card: none;
  --shadow-glow: none;
  --header-menu-shadow: none;

  /* ---- design-tokens vocabulary ----
     These pages (careers, skills, admin, the product surfaces) ship dark
     in both OS modes, and --color-primary is read as a FOREGROUND on
     them: .stat-value is `color: var(--color-primary)`. So it is paper,
     it stays paper, and it does NOT follow the theme. Setting it to ink
     put the numbers on 992 careers pages in near-black on a near-black
     card, which every automated check passed and only a screenshot
     caught. ---- */
  --color-primary: #f2ede3;
  --color-primary-hover: #ffffff;
  --color-primary-dark: #b8b0a2;
  --color-primary-light: #ffffff;
  --color-primary-alpha-10: rgba(242, 237, 227, 0.1);
  --color-primary-alpha-15: rgba(242, 237, 227, 0.15);
  --color-primary-alpha-20: rgba(242, 237, 227, 0.2);
  --color-primary-alpha-40: rgba(242, 237, 227, 0.4);
  --color-primary-subtle: rgba(242, 237, 227, 0.06);
  --color-primary-muted: rgba(242, 237, 227, 0.12);
  --color-primary-glow: rgba(242, 237, 227, 0.28);
  /* Read as a foreground on the same dark product surfaces, so it is the
     lifted red (5.6:1 on ink) and it does not follow the theme either. No
     single red clears AA on both paper and ink, so a token consumed on one
     fixed ground is pinned to that ground. */
  --color-secondary: #f2536e;
  --color-secondary-hover: #ff7d92;
  --color-secondary-light: #ff7d92;
  --color-secondary-alpha-10: rgba(191, 10, 48, 0.1);
  --color-secondary-alpha-20: rgba(191, 10, 48, 0.2);
  --color-secondary-alpha-40: rgba(191, 10, 48, 0.4);
  --color-elite: #f2536e;
  --color-elite-hover: #ff7d92;
  --color-elite-light: #ff7d92;
  /* Also read as text on dark surfaces, so it stays light. As a filled
     button background under a white label it would fail AA, so the fill
     case derives its own darker value. */
  --color-info: #b8b0a2;
  --color-info-fill: #4a443a;
  --color-info-fill-hover: #14110d;
  --gradient-primary: #f2536e;
  --gradient-secondary: #14110d;
  --gradient-dark: #14110d;

  --gold-50: #faf6ed;
  --gold-100: #f2ede3;
  --gold-200: #e4dac6;
  --gold-300: #cdbd9c;
  --gold-400: #b09a72;
  --gold-500: #96621a;
  --gold-600: #7d5316;
  --gold-700: #644211;
  --gold-800: #4b320d;
  --gold-900: #322108;

  --bg-void: #0d0b08;
  --bg-base: #14110d;
  --bg-surface: #1c1813;
  --bg-elevated: #241f19;
  --bg-overlay-subtle: #241f19;
  --bg-primary: #14110d;
  --bg-secondary: #1c1813;
  --bg-tertiary: #241f19;
  --bg-card: #1c1813;
  --bg-hover: #241f19;
  --bg-modal: rgba(20, 17, 13, 0.95);

  --text-primary: #f2ede3;
  --text-secondary: #b8b0a2;
  --text-muted: #968d7e;
  --text-disabled: #6e6656;

  --border-subtle: rgba(242, 237, 227, 0.08);
  --border-default: rgba(242, 237, 227, 0.14);
  --border-strong: rgba(242, 237, 227, 0.26);
  --border-gold: rgba(191, 10, 48, 0.35);
  --border-gold-strong: rgba(191, 10, 48, 0.55);
  --border-color: #322c24;
  --border-focus: #f2ede3;

  --accent-hover: #241f19;

  /* ---- homepage / warm vocabulary, LIGHT values (default) ---- */
  --white: #f8f5ef;
  --gray-50: #f2ede3;
  --gray-100: #eae3d6;
  --gray-200: #ddd4c2;
  --gray-300: #c6bba4;
  --gray-400: #968d7e;
  --gray-500: #6e6656;
  --gray-600: #4a443a;
  --gray-700: #342f27;
  --gray-800: #221e19;
  --gray-900: #14110d;
  --sand-50: #f2ede3;
  --sand-100: #eae3d6;
  --sand-200: #ddd4c2;
  --coal-900: #14110d;
  --coal-800: #221e19;
  --coal-700: #342f27;
  --rust-500: #bf0a30;
  --rust-600: #8a0722;
  --blue-500: #14110d;
  --blue-600: #342f27;
  --blue-700: #4a443a;
  --blue-50: #eae3d6;
  --warm-rust-500: #bf0a30;
  --warm-rust-600: #8a0722;
  --warm-rust-400: #d4213f;

  /* ---- Map segment hues. DATA, not chrome: six categories need six
     separable inks. Tuned to the plate (mid-dark, low chroma) and
     checked for AA against paper and against ink, and for CVD
     separability. Must match map-globe.js. ---- */
  --seg-trade: #bf0a30;
  --seg-cc: #1f6f5c;
  --seg-pub: #234e8c;
  --seg-priv: #96621a;
  --seg-research: #5b3a82;
  --seg-business: #a32b62;

  /* ---- Status. Namespaced --status-* rather than --success, which
     industrial-theme.css declares at a plain :root and would race.
     All three clear AA against the paper they sit on. ---- */
  --status-ok: #1f6f5c;
  --status-warn: #96621a;
  --status-bad: #bf0a30;

  /* ---- atlas ink/paper vocabulary, LIGHT values (default) ---- */
  --ink: #14110d;
  --ink-2: #4a443a;
  --ink-3: #6e6656;
  --ink-meta: #6e6656;
  --line: rgba(20, 17, 13, 0.14);
  --line-strong: rgba(20, 17, 13, 0.28);
  --paper: #f2ede3;
  --paper-2: #eae3d6;
  --accent: #bf0a30;
  --accent-2: #8a0722;
  --glass: 242, 237, 227;
  --paper-rgb: 242, 237, 227;
  --ink-rgb: 20, 17, 13;
}

/* ---- Dark values: OS preference ---- */
@media (prefers-color-scheme: dark) {
  :root:root {
    --ink: #f2ede3;
    --ink-2: #b8b0a2;
    --ink-3: #968d7e;
    --ink-meta: #968d7e;
    --paper: #14110d;
    --paper-2: #1c1813;
    --paper-rgb: 20, 17, 13;
    --ink-rgb: 242, 237, 227;
    --glass: 20, 17, 13;
    --line: rgba(242, 237, 227, 0.14);
    --line-strong: rgba(242, 237, 227, 0.28);
    --accent: #f2536e;
    --accent-2: #ff7d92;
    --accent-hover: #ff7d92;

    --seg-trade: #f2536e;
    --seg-cc: #35a98e;
    --seg-pub: #6b9ae8;
    --seg-priv: #d2a044;
    --seg-research: #a98ad6;
    --seg-business: #e879b0;

    --status-ok: #35a98e;
    --status-warn: #d2a044;
    --status-bad: #f2536e;

    --white: #14110d;
    --gray-50: #1c1813;
    --gray-100: #241f19;
    --gray-200: #322c24;
    --gray-300: #433c31;
    --gray-400: #968d7e;
    --gray-500: #b8b0a2;
    --gray-600: #cfc7b9;
    --gray-700: #e0d9cc;
    --gray-800: #ebe5d9;
    --gray-900: #f2ede3;
    --sand-50: #1c1813;
    --sand-100: #241f19;
    --sand-200: #322c24;
    --coal-900: #f2ede3;
    --coal-800: #ebe5d9;
    --coal-700: #e0d9cc;
    --rust-500: #f2536e;
    --rust-600: #ff7d92;
    --warm-rust-500: #f2536e;
    --warm-rust-600: #ff7d92;
    --gold-500: #d2a044;
    --blue-50: rgba(242, 237, 227, 0.08);
    --blue-500: #f2ede3;
    --blue-600: #e0d9cc;
    --blue-700: #cfc7b9;
  }
}

/* ---- Manual toggle pins (beats the media query) ---- */
:root:root[data-theme='light'] {
  --ink: #14110d;
  --ink-2: #4a443a;
  --ink-3: #6e6656;
  --ink-meta: #6e6656;
  --paper: #f2ede3;
  --paper-2: #eae3d6;
  --paper-rgb: 242, 237, 227;
  --ink-rgb: 20, 17, 13;
  --glass: 242, 237, 227;
  --line: rgba(20, 17, 13, 0.14);
  --line-strong: rgba(20, 17, 13, 0.28);
  --accent: #bf0a30;
  --accent-2: #8a0722;
  --accent-hover: #8a0722;

  --seg-trade: #bf0a30;
  --seg-cc: #1f6f5c;
  --seg-pub: #234e8c;
  --seg-priv: #96621a;
  --seg-research: #5b3a82;
  --seg-business: #a32b62;

  --status-ok: #1f6f5c;
  --status-warn: #96621a;
  --status-bad: #bf0a30;

  --white: #f8f5ef;
  --gray-50: #f2ede3;
  --gray-100: #eae3d6;
  --gray-200: #ddd4c2;
  --gray-300: #c6bba4;
  --gray-400: #968d7e;
  --gray-500: #6e6656;
  --gray-600: #4a443a;
  --gray-700: #342f27;
  --gray-800: #221e19;
  --gray-900: #14110d;
  --sand-50: #f2ede3;
  --sand-100: #eae3d6;
  --sand-200: #ddd4c2;
  --coal-900: #14110d;
  --coal-800: #221e19;
  --coal-700: #342f27;
  --rust-500: #bf0a30;
  --rust-600: #8a0722;
  --warm-rust-500: #bf0a30;
  --warm-rust-600: #8a0722;
  --gold-500: #96621a;
  --blue-50: #eae3d6;
  --blue-500: #14110d;
  --blue-600: #342f27;
  --blue-700: #4a443a;
}

:root:root[data-theme='dark'] {
  --ink: #f2ede3;
  --ink-2: #b8b0a2;
  --ink-3: #968d7e;
  --ink-meta: #968d7e;
  --paper: #14110d;
  --paper-2: #1c1813;
  --paper-rgb: 20, 17, 13;
  --ink-rgb: 242, 237, 227;
  --glass: 20, 17, 13;
  --line: rgba(242, 237, 227, 0.14);
  --line-strong: rgba(242, 237, 227, 0.28);
  --accent: #f2536e;
  --accent-2: #ff7d92;
  --accent-hover: #ff7d92;

  --seg-trade: #f2536e;
  --seg-cc: #35a98e;
  --seg-pub: #6b9ae8;
  --seg-priv: #d2a044;
  --seg-research: #a98ad6;
  --seg-business: #e879b0;

  --status-ok: #35a98e;
  --status-warn: #d2a044;
  --status-bad: #f2536e;

  --white: #14110d;
  --gray-50: #1c1813;
  --gray-100: #241f19;
  --gray-200: #322c24;
  --gray-300: #433c31;
  --gray-400: #968d7e;
  --gray-500: #b8b0a2;
  --gray-600: #cfc7b9;
  --gray-700: #e0d9cc;
  --gray-800: #ebe5d9;
  --gray-900: #f2ede3;
  --sand-50: #1c1813;
  --sand-100: #241f19;
  --sand-200: #322c24;
  --coal-900: #f2ede3;
  --coal-800: #ebe5d9;
  --coal-700: #e0d9cc;
  --rust-500: #f2536e;
  --rust-600: #ff7d92;
  --warm-rust-500: #f2536e;
  --warm-rust-600: #ff7d92;
  --gold-500: #d2a044;
  --blue-50: rgba(242, 237, 227, 0.08);
  --blue-500: #f2ede3;
  --blue-600: #e0d9cc;
  --blue-700: #cfc7b9;
}

/* ============================================================
   THE PLATE: rules the whole site inherits.
   ============================================================ */

/* Font only. Deliberately NOT background or color: page families pin
   their own theme (careers and skills ship dark in both OS modes, the
   directories ship light), and forcing var(--paper) here put a light
   ground under cards that are still painted dark, which hid the numbers
   on 992 careers pages. The grounds come from each family's own CSS,
   which the plate sweep already re-inked. */
html body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: var(--accent);
  color: var(--paper);
}

/* Display type is the serif. Every page heading, everywhere. The
   selector stays off h1/h2/h3 inside chrome (a header, a nav, a card
   control) because those are labels, not display. */
h1,
h2,
h3,
.hero-title,
.page-title,
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.08;
  text-wrap: balance;
}

:is(header, nav, .bomatlas-header, .hp-nav, footer) :is(h1, h2, h3) {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
}

/* Instrument Serif is a display face. Below about 22px it loses its
   contrast and reads as a generic serif, so small headings stay in
   Geist where they are legible. */
h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Numbers are data. Data is tabular so columns line up. */
.stat-value,
.stat-number,
.metric-value,
.kpi-value,
.count,
[data-stat],
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---- Ornament: the plate's furniture ----
   A hatch, a grid and a dot screen, all drawn in ink at low opacity so
   they re-colour with the theme. Use as a background on a hero, a
   footer, or an empty state. */
.plate-hatch {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(var(--ink-rgb), 0.07) 0,
    rgba(var(--ink-rgb), 0.07) 1px,
    transparent 1px,
    transparent 7px
  );
}

.plate-grid {
  background-image:
    linear-gradient(rgba(var(--ink-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

.plate-dots {
  background-image: radial-gradient(rgba(var(--ink-rgb), 0.12) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* A rule above a heading, the way a plate labels a section. */
.plate-rule {
  border-top: 1px solid var(--ink);
  padding-top: 10px;
}

/* ---- Duotone: a photograph reduces to ink and paper, with the accent
   carrying the midtones. Wrap an <img> in .duotone. ---- */
.duotone {
  position: relative;
  background: var(--ink);
  isolation: isolate;
}
.duotone > img {
  display: block;
  width: 100%;
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: luminosity;
  opacity: 0.92;
}
.duotone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--accent), var(--ink));
  mix-blend-mode: color;
  pointer-events: none;
}

/* ---- Wordmark: "BOM" in ink, the second word in forge red. Flat.
   The gradient-clipped text this replaced dated the mark.

   The header ground is dark on most families and paper on the trade
   school family, independently of the root theme, so the mark cannot use
   a theme-following token. It takes the kit red #bf0a30 on both grounds,
   as the kit's own dark lockup does; a lighter tint used here before made
   the wordmark two different reds across the site. ---- */
.hp-logo span:last-child,
.hp-footer-logo span:last-child,
.nav-brand span:last-child,
.logo span:last-child,
.bomatlas-logo-accent {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #bf0a30;
  color: #bf0a30;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   THE BASEMAP, INKED.

   The raster tiles are OpenStreetMap's own (CARTO's keyless endpoint
   started returning tiles with API KEY REQUIRED burned into the image;
   scripts/plate-basemap.mjs swapped 2,357 URLs). OSM's default style is
   a colourful road map, which fights everything else on the page, so the
   whole tile pane is re-inked here: desaturated, warmed to the paper's
   own hue, and flattened so the data markers sitting on top of it are
   the only saturated thing on screen.

   This is the duotone treatment applied to a map instead of a photo.
   Filtering the pane rather than the container leaves markers, popups
   and controls untouched.
   ============================================================ */
.leaflet-tile-pane {
  filter: grayscale(1) sepia(0.42) saturate(0.65) brightness(1.06) contrast(0.78);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .leaflet-tile-pane {
    filter: grayscale(1) invert(1) sepia(0.32) saturate(0.55) brightness(0.52) contrast(1.08);
  }
}

:root[data-theme='dark'] .leaflet-tile-pane {
  filter: grayscale(1) invert(1) sepia(0.32) saturate(0.55) brightness(0.52) contrast(1.08);
}

:root[data-theme='light'] .leaflet-tile-pane {
  filter: grayscale(1) sepia(0.42) saturate(0.65) brightness(1.06) contrast(0.78);
}

/* Leaflet paints its own white ground behind the tiles. */
.leaflet-container {
  background: var(--paper-2);
}

/* ---- Leaflet chrome on the plate ----
   The zoom box, the attribution strip and the popup all ship as white
   rounded boxes with a drop shadow, which is the one look this whole
   overhaul is getting rid of. The default marker is a blue PNG. */

.leaflet-container .leaflet-control-zoom a,
.leaflet-container .leaflet-bar a {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-strong);
  border-radius: 2px;
  font-family: var(--font-sans);
}
.leaflet-container .leaflet-control-zoom a:hover,
.leaflet-container .leaflet-bar a:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.leaflet-container .leaflet-bar {
  border-radius: 2px;
  box-shadow: none;
  border: 1px solid var(--line-strong);
}

.leaflet-container .leaflet-control-attribution {
  /* Solid, not a var()-composed rgba: rgba(var(--paper-rgb), a) fell back
     to Leaflet's own white strip on pages whose root theme and map ground
     disagree, and put dark-theme ink on a white bar at 2.15:1. A solid
     token and its matching ink cannot come apart. */
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  border-radius: 0;
}
.leaflet-container .leaflet-control-attribution a {
  color: var(--ink-2);
}

.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-popup-tip {
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  box-shadow: none;
  border: 1px solid var(--line-strong);
}

/* Leaflet's default pin is a blue PNG shipped with the library, so it
   cannot be re-coloured with a variable. Rotating its hue to the forge
   red is the one place in this system where a filter stands in for a
   token, and it is here because the alternative is replacing a marker
   icon in 2,350 files. */
.leaflet-marker-icon[src*='marker-icon'] {
  filter: hue-rotate(158deg) saturate(1.9) brightness(0.92);
}

/* A catalogue code under a headline, the way a plate prints its plate
   number. This is where the SOC major group went when the eyebrow above
   the headline was removed. */
.plate-code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 6px 0 0;
}

/* ============================================================
   PLATE FURNITURE

   The recurring structures across the site were all the same shape: a
   rounded card with a border, a soft ground and a drop shadow, repeated
   in a grid. A printed plate does not box its figures, it rules them.
   These rewrite the three that appear most (the scorecard band on 802
   trade school pages, the stat grid on the careers and skills pages, and
   the glassy hero) into ruled bands with mono labels and serif figures.
   ============================================================ */

/* ---- Scorecard: one ruled band, not six boxes ---- */
.scorecard-grid.scorecard-grid {
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
  background: transparent;
}
.scorecard-item.scorecard-item {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  padding: 18px 14px;
}
/* The first cell of each row carries no rule, so the band reads as
   columns rather than as a stack of bordered boxes. */
.scorecard-grid.scorecard-grid > .scorecard-item.scorecard-item:first-child {
  border-left: 0;
}
.scorecard-value.scorecard-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.scorecard-label.scorecard-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- The same treatment wherever the pattern repeats ---- */
.hero-stats.hero-stats,
.stats-grid.stats-grid {
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
}
.hero-stats.hero-stats > .hero-stat.hero-stat,
.stats-grid.stats-grid > .stat-card.stat-card,
.stats-grid.stats-grid > .stat-item.stat-item {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
}
.hero-stats.hero-stats > .hero-stat.hero-stat:first-child,
.stats-grid.stats-grid > .stat-card.stat-card:first-child,
.stats-grid.stats-grid > .stat-item.stat-item:first-child {
  border-left: 0;
}
.stat-label.stat-label,
.scorecard-label.scorecard-label,
.metric-label.metric-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Hero: a rule and a hatch, not a pane of frosted glass ---- */
.listicle-hero.listicle-hero {
  background: transparent;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(var(--ink-rgb), 0.045) 0,
    rgba(var(--ink-rgb), 0.045) 1px,
    transparent 1px,
    transparent 9px
  );
  border: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 28px 24px 26px;
}
.listicle-hero.listicle-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.listicle-hero.listicle-hero .hero-meta.hero-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ── Scale tokens ────────────────────────────────────────────
   These lived in design-tokens.css, which NOTHING on the atlas shell ever
   loaded: the map pages pull exactly two stylesheets, and both of them
   @import this file and nothing else. So the space, radius and text scales
   declared and unreachable, and every rule in atlas-shell.css and
   filter-panel.css was written as a raw literal — 16 distinct font sizes, 25
   spacing values and 11 radii, none of them on a scale. Publishing the scale
   HERE is what makes the token the cheaper thing to reach for next time.
   Values are copied verbatim from design-tokens.css; this is a second
   doorway onto the same scale, not a second scale. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* Radius tokens are declared once, above. */

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;

  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
}

/* ── Wordmark lockup: one form on every page ─────────────────────────────
   Kit: Geist Bold, BOM in the page ink, Atlas in brand red #bf0a30, the tile
   mark to the left at a fixed gap. Page stylesheets had each set their own
   weight (400, 700, 800), size, tracking and red, some pages carried the mark
   and some did not, and the home header set no gap, so the mark touched the
   B. The `html a.` prefix outranks those page rules without !important. */
html a.bomatlas-logo,
html button.bomatlas-logo,
html a.hp-logo,
html a.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family:
    'Geist',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
html a.footer-logo {
  font-family:
    'Geist',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
html a.bomatlas-logo > .bomatlas-logo-accent,
html button.bomatlas-logo > .bomatlas-logo-accent,
html a.hp-logo > span,
html a.footer-logo > span,
html a.nav-brand > .nav-brand-accent,
html a.nav-brand > span + span {
  background: none;
  color: #bf0a30;
  -webkit-text-fill-color: #bf0a30;
}
html a.bomatlas-logo:not(:has(img, svg))::before,
html button.bomatlas-logo:not(:has(img, svg))::before,
html a.hp-logo:not(:has(img, svg))::before,
html a.nav-brand:not(:has(img, svg))::before {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 2px;
  background: url('/favicon.svg?v=20260911b') center / contain no-repeat;
}
html a.hp-logo > img,
html a.bomatlas-logo > img,
html a.nav-brand > img {
  flex: none;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 2px;
}