/* Los Angeles Rams brand system for FO Hub.
 *
 * Two brand colours carry the whole thing: Rams Royal #003594 and Sol #FFA300.
 * They cannot be used interchangeably. Royal has a relative luminance of 0.03,
 * so on a dark interface it is a *surface* -- a band, a fill, a border -- and
 * never body text. Sol is the opposite: 9.9:1 on the page background, so it is
 * the accent, the focus ring and the primary action, and never a large field
 * behind white text.
 *
 * The tonal ramps below were generated in OKLab from those two hexes rather
 * than by hand, so the mid-tones stay chromatic instead of drifting grey, and
 * every foreground/background pair shipped here was checked against WCAG. The
 * worst text pair in the system is 4.81:1; the control border is the one
 * non-text token held to 1.4.11's 3:1, at 3.38:1 on its darkest surface.
 */

:root {
  /* --- brand ramp, OKLab-derived from #003594 --- */
  --royal-50:  #EFF3F9;
  --royal-100: #DCE4F3;
  --royal-200: #BACAE6;
  --royal-300: #96AED8;
  --royal-400: #6A8BC4;
  --royal-500: #3A63AE;
  --royal-600: #003594;  /* Rams Royal, PMS 287 C */
  --royal-700: #02276B;
  --royal-800: #031D4C;
  --royal-900: #031435;
  --royal-950: #030D21;

  /* --- and from #FFA300 --- */
  --sol-50:  #FFF5E8;
  --sol-100: #FFEAD1;
  --sol-200: #FFD8AA;
  --sol-300: #FFC681;
  --sol-400: #FFB350;
  --sol-500: #FFA300;  /* Sol, PMS 1235 C */
  --sol-600: #D58A1C;
  --sol-700: #A26C25;
  --sol-800: #714F26;
  --sol-900: #493622;

  /* --- semantic surfaces --- */
  --bg:        #040A18;
  --surface:   #0A1730;
  --surface-2: #0E2044;
  --surface-3: #12294F;
  --hairline:  #172C55;
  --control:   #4A72BC;   /* form-control boundary, 3:1 on every surface */

  /* --- semantic text --- */
  --bone:  #F4F7FC;
  --muted: #9DB2D4;
  --dim:   #6E86AC;

  /* --- state --- */
  --pos:  #5BE0A8;
  --neg:  #FF8898;
  --warn: #FFC681;

  --radius: 4px;
  --tap: 44px;

  --font-display: Oswald, Haettenschweiler, "Arial Narrow", system-ui, sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------- base --- */

body {
  background: var(--bg);
  color: var(--bone);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* A single royal wash bleeding down from the masthead. The club site leans on
 * large fields of royal; on a data tool a full royal page would wreck the
 * contrast budget, so it survives here only as atmosphere. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 340px;
  background: linear-gradient(180deg, rgba(0, 53, 148, 0.30) 0%,
                                      rgba(0, 53, 148, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* Focus is Sol everywhere, including on the royal masthead where it still
 * clears 5.4:1. Never removed -- this is a keyboard-heavy tool. */
:focus-visible {
  outline: 2px solid var(--sol-500);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--sol-500); color: var(--royal-900); }

/* Visible only once tabbed to. A keyboard user should not have to walk the
 * whole masthead on every page to reach the table they came for. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 0.5rem 0.875rem;
  background: var(--sol-500);
  color: var(--royal-900);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* Tailwind supplies this too, but it is load-bearing for screen readers and
 * must not depend on a CDN being reachable. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ------------------------------------------------------------ masthead --- */

.masthead {
  background: var(--royal-600);
  border-bottom: 3px solid var(--sol-500);
}

.masthead-inner {
  margin: 0 auto;
  max-width: 80rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 0.625rem 1rem;
}

.brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.brand-mark { flex: none; width: 34px; height: 34px; }
.brand-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sol-500);
  line-height: 1.15;
}
.brand-word {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
}

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem; }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.25rem 0.625rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--royal-200);
  text-decoration: none;
  transition: color 160ms ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.625rem;
  right: 0.625rem;
  bottom: 0;
  height: 2px;
  background: var(--sol-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active { color: #fff; font-weight: 600; }
.nav-link.is-active::after { transform: scaleX(1); }

.who {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--royal-200);
}
.who strong { color: #fff; font-weight: 600; }
.who .role {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
  color: var(--sol-300);
}

.page { margin: 0 auto; max-width: 80rem; padding: 1.5rem 1rem 4rem; }

/* ---------------------------------------------------------- typography --- */

.page-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #fff;
}
.page-sub { color: var(--muted); font-size: 0.875rem; }

/* The horn is a sweeping diagonal; that is the one piece of its geometry that
 * survives abstraction, so section rules are skewed rather than square. */
.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
}
.section-title::before {
  content: "";
  flex: none;
  width: 4px;
  height: 15px;
  background: var(--sol-500);
  transform: skewX(-12deg);
}
.section-title .count {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
}

.muted { color: var(--muted); }
.dim   { color: var(--dim); }
.num   { font-variant-numeric: tabular-nums; }
.pos   { color: var(--pos); }
.neg   { color: var(--neg); }

/* "Look here", not "this is good". A thin position group and a two-grade
 * disagreement between scouts are both prompts to act, and neither is a
 * success -- green would say the wrong thing. */
.hot { color: var(--sol-500); font-weight: 600; }

/* Native controls, tinted rather than rebuilt: a custom checkbox loses
 * keyboard and screen-reader behaviour that accent-color keeps for free. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--sol-500);
  width: 1rem;
  height: 1rem;
}
.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.link { color: var(--royal-300); text-decoration: none; transition: color 140ms ease; }
.link:hover { color: var(--sol-500); text-decoration: underline; text-underline-offset: 2px; }
.link-accent { color: var(--sol-500); text-decoration: none; }
.link-accent:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------ surfaces --- */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.875rem;
}
.card-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sol-500);
}

.note { font-size: 0.75rem; line-height: 1.6; color: var(--dim); }

.callout {
  border-left: 3px solid var(--sol-500);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--sol-200);
}
.callout-info { border-left-color: var(--royal-400); color: var(--royal-200); }
.callout-bad  { border-left-color: var(--neg); color: var(--neg); }

/* Stat strip: the hairline grid comes from a background bleed rather than
 * per-cell borders, so the outer edge stays clean. */
.stats {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat { background: var(--surface); padding: 0.5rem 0.75rem; }
.stat dt {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
}
.stat dd {
  margin-top: 0.125rem;
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Default colour is set at zero specificity so a state class on the element
 * itself -- .pos, .neg -- still wins. The WHOLE selector has to sit inside
 * :where(); wrapping only the tail still scores the leading class and
 * silently swallows every modifier. */
:where(.stat dd) { color: var(--bone); }
.stat dd.small { font-size: 0.875rem; color: var(--muted); }

/* ---------------------------------------------------------------- data --- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
table.data { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table.data thead { background: var(--surface-2); }
table.data th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--royal-200);
  white-space: nowrap;
}
table.data td {
  padding: 0.4375rem 0.75rem;
  border-top: 1px solid var(--hairline);
}
/* Same reasoning as .stat dd: zero specificity so <td class="muted"> and
 * <td class="dim"> actually take effect. The column hierarchy in these tables
 * is the whole point of them. */
:where(table.data td) { color: var(--bone); }
table.data tbody tr { background: var(--surface); transition: background 120ms ease; }
table.data tbody tr:hover { background: var(--surface-3); }
table.data tbody tr.is-subject { background: var(--royal-800); }
/* Numeric columns never wrap -- a height breaking into "6-" / "6" across two
 * lines is unreadable, and the wrapper already scrolls. */
table.data .r {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.data .empty { padding: 1.25rem; text-align: center; color: var(--dim); }

/* ---------------------------------------------------------------- bits --- */

.pill {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  border-radius: 2px;
  border: 1px solid var(--control);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--royal-200);
  white-space: nowrap;
}
.pill-sol   { border-color: var(--sol-600); color: var(--sol-300); }
.pill-solid { background: var(--sol-500); border-color: var(--sol-500); color: var(--royal-900); font-weight: 600; }

/* Grades carry a colour *and* the value, never colour alone. */
.grade {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0.0625rem 0.25rem;
  border-radius: 2px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.grade-hi  { background: rgba(91, 224, 168, 0.16); color: var(--pos); }
.grade-mid { background: var(--surface-3); color: var(--bone); }
.grade-lo  { background: rgba(255, 136, 152, 0.16); color: var(--neg); }

/* -------------------------------------------------------------- controls - */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 34px;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius);
  border: 1px solid var(--control);
  background: transparent;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn:hover { background: var(--surface-3); border-color: var(--royal-300); }

/* Sol behind royal text is the club's own CTA treatment, and clears 5.4:1. */
.btn-primary {
  background: var(--sol-500);
  border-color: var(--sol-500);
  color: var(--royal-900);
  font-weight: 600;
}
.btn-primary:hover { background: var(--sol-400); border-color: var(--sol-400); color: var(--royal-900); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn-sm { min-height: 28px; padding: 0.125rem 0.5rem; font-size: 0.75rem; letter-spacing: 0.05em; }
.btn-block { width: 100%; }

.field { display: block; }
.field > span, .field-label {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.input, .select, .textarea {
  width: 100%;
  min-height: 36px;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--control);
  background: var(--royal-950);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 0.875rem;
}
.textarea { min-height: 5rem; line-height: 1.6; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--dim); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--royal-300); }
.select {
  appearance: none;
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%239DB2D4' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 10px;
}
.req { color: var(--sol-500); }

/* Grade inputs sit in a dense grid; keep them tappable regardless. */
.grade-input { min-height: var(--tap); text-align: center; font-variant-numeric: tabular-nums; }

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

/* ================================================================ rams-fo =
 * Everything below is new for rams-fo; everything above is the fo-hub system
 * ported unchanged. Additions follow the same rules: colour comes only from
 * the ramp variables (tints are color-mix() over existing tokens, so no new
 * hex enters the system), and every fg/bg pair used here was contrast-checked:
 *
 *   pos  on surface / surface-3 / 16% pos tint(surface / surface-3)
 *        10.8 / 8.7 / 7.6 / 6.1
 *   neg  on surface / surface-3 / 16% neg tint(surface / surface-3)
 *        7.8 / 6.3 / 6.1 / 4.9   <- 4.90:1 is the new floor, still > 4.5
 *   warn on surface 11.6
 *   royal-200 on royal-800 (subnav/drawer inactive)  9.9
 *   white on royal-800 (subnav/drawer active)       16.4
 *   sol-500 on royal-800 (active underline, non-text) 8.2 vs 3.0 needed
 */

/* ------------------------------------------------------------- metrics --- */
/* A model output is a value *and* its uncertainty. The interval and the
 * confidence chip travel with the number so a point estimate is never quoted
 * naked. Everything numeric is tabular so columns of these align. */

.metric { display: flex; flex-direction: column; gap: 0.1875rem; align-items: flex-start; }
.metric-value {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Zero specificity, same trap as .stat dd: .pos/.neg/.hot on the element
 * itself must still win. */
:where(.metric-value) { color: var(--bone); }
.metric-value .unit { font-size: 0.75em; font-weight: 400; color: var(--muted); }
.metric-interval {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.metric-conf {
  display: inline-block;
  padding: 0 0.3125rem;
  border: 1px solid var(--control);
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Beside-variant for table cells and tight rows. */
.metric-row { display: inline-flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap; }
.metric-value-sm { font-size: 0.875rem; }

/* ------------------------------------------------------------ verdicts --- */
/* Four states, three channels each: the label text, the glyph (set in markup,
 * aria-hidden -- filled triangle = confident, outline = uncertain; up = good,
 * down = bad), and the border (solid + tinted fill = confident, dashed on a
 * bare surface = uncertain). Colour is reinforcement, never the only signal. */

.verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.0625rem 0.4375rem;
  border: 1px solid;
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.verdict-glyph { font-family: var(--font-body); font-weight: 400; line-height: 1; font-size: 0.625rem; }
.verdict-benefit {
  color: var(--pos);
  border-color: var(--pos);
  background: color-mix(in srgb, var(--pos) 16%, transparent);
}
.verdict-hurt {
  color: var(--neg);
  border-color: var(--neg);
  background: color-mix(in srgb, var(--neg) 16%, transparent);
}
.verdict-uncertain-good { color: var(--pos); border-color: var(--pos); border-style: dashed; }
.verdict-uncertain-bad  { color: var(--neg); border-color: var(--neg); border-style: dashed; }

/* ----------------------------------------------------------- freshness --- */
/* Feed health for the status page. The word is the primary channel (the
 * macro always prints it); the marker shape is the second -- filled disc =
 * fresh, hollow ring = stale, solid diamond = failed -- so the states
 * survive greyscale. */

.freshness {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.freshness::before { content: ""; flex: none; width: 9px; height: 9px; }
.freshness-fresh  { color: var(--pos); }
.freshness-fresh::before  { background: var(--pos); border-radius: 50%; }
.freshness-stale  { color: var(--warn); }
.freshness-stale::before  { border: 2px solid var(--warn); border-radius: 50%; }
.freshness-failed { color: var(--neg); }
.freshness-failed::before { background: var(--neg); border-radius: 1px; transform: rotate(45deg); }

/* ----------------------------------------------------------- nav shell --- */
/* Seven sections is too many to hang sub-pages off one row, so the shell is
 * masthead (sections) + a royal-800 subnav ribbon carrying the *current*
 * section's children. On narrow screens the section row swaps for a <details>
 * drawer -- native disclosure keeps keyboard and screen-reader semantics for
 * free -- and the ribbon stays, scrolling horizontally instead of wrapping. */

.masthead { position: relative; } /* anchors the drawer panel */

.subnav {
  background: var(--royal-800);
  border-bottom: 1px solid var(--hairline);
}
.subnav-inner {
  margin: 0 auto;
  max-width: 80rem;
  padding: 0 1rem;
  display: flex;
  gap: 0.125rem;
  overflow-x: auto;
}
.subnav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 32px;
  padding: 0.25rem 0.625rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--royal-200);
  text-decoration: none;
  transition: color 160ms ease;
}
.subnav-link::after {
  content: "";
  position: absolute;
  left: 0.625rem;
  right: 0.625rem;
  bottom: 0;
  height: 2px;
  background: var(--sol-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}
.subnav-link:hover { color: #fff; }
.subnav-link:hover::after { transform: scaleX(1); }
.subnav-link.is-active { color: #fff; font-weight: 600; }
.subnav-link.is-active::after { transform: scaleX(1); }

/* Mobile drawer. Hidden on wide screens; the desktop section row hides on
 * narrow ones, so no link ever exists twice in the tab order. */
.nav-drawer { display: none; }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--tap);
  padding: 0.25rem 0.625rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  list-style: none;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-drawer[open] .nav-toggle { color: var(--sol-300); }
.nav-drawer-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 40;
  background: var(--royal-800);
  border-bottom: 3px solid var(--sol-500);
  padding: 0.75rem 1rem 1rem;
  display: grid;
  gap: 0.75rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.drawer-label {
  display: block;
  margin-bottom: 0.125rem;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sol-300);
}
.drawer-link {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0.125rem 0.375rem;
  border-left: 2px solid transparent;
  font-size: 0.875rem;
  color: var(--royal-200);
  text-decoration: none;
}
.drawer-link:hover { color: #fff; }
.drawer-link.is-active { color: #fff; font-weight: 600; border-left-color: var(--sol-500); }

@media (max-width: 47.99rem) {
  .nav-desktop { display: none; }
  .nav-drawer { display: block; }
}


/* The horn mark inherits colour so it stays correct on any surface, rather
   than pinning Sol and going invisible the moment it moves. */
/* PMS 1235 C, the brand value itself - the horn is a graphic, so the
   3:1 non-text threshold applies, not 4.5:1 */
.brand-mark      { color: var(--sol-500); }
.nav-toggle-icon { vertical-align: -0.2em; margin-right: 0.35rem; }