/* ============================================================
   Base styles — minimal foundation implementing the token system.
   CSS Grid/flex only. No Foundation, no floats, no !important.
   Claude Code: extend this per the v2 kit's component specs; every
   value must trace to tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font: var(--type-body);
  letter-spacing: 0;
  color: var(--ink-900);
  background: var(--neutral-50);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--space-4); }
h1 { font: var(--type-h1); letter-spacing: -0.018em; }
h2 { font: var(--type-h2); letter-spacing: -0.014em; }
h3 { font: var(--type-h3); letter-spacing: -0.008em; }
h4 { font: var(--type-h4); letter-spacing: 0; }
p  { margin: 0 0 var(--space-4); max-width: var(--measure); }
small, .small { font: var(--type-small); }
/* Gold, not marine, since 2026-08-18 (maintainer: "Stop using that blue
   color for buttons and text"). --gold-700 is the ONLY gold legal as text
   on white — 5.52:1 measured, AA for normal text. Do not reach for
   gold-500 or gold-300 here; both fail as body-sized text on a light
   surface and are licensed for rules, numerals and icons only.

   The hover DARKENS to ink rather than brightening, because there is no
   legal gold darker than gold-700 to move to. On dark surfaces this rule
   is already overridden by `.section--dark a:not(.button)` below, which
   has been gold-300 all along. */
a  { color: var(--gold-700); }
a:hover { color: var(--ink-900); }

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

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 64em) { .container { padding-inline: 32px; } }

/* Halved 2026-08-17 (maintainer, to cut vertical scroll): --space-16 ->
   --space-8 and --space-24 -> --space-12, i.e. 64->32 and 96->48. Both
   halves land exactly on existing steps of the scale, so the rhythm is
   still token-derived rather than an ad-hoc number.

   The hero is deliberately NOT affected even though it carries .section:
   pages.css §5.1 overrides its padding-block outright, so it keeps its
   full height and only the sections below it tighten — which is what was
   asked for. Do not "fix" that inconsistency by halving the hero too.

   This is site-wide, not homepage-only: .section is also used by
   /responsibility/ (4), the brand pages and 404. */
.section { padding-block: var(--space-8); }
@media (min-width: 64em) { .section { padding-block: var(--space-12); } }

.section--dark { background: var(--ink-900); color: var(--neutral-200); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: var(--gold-300); }
/* `:not(.button)` is load-bearing. This rule is for INLINE links in dark
   copy; a .button already sets its own label colour and must keep it.
   Without the exclusion, `.section--dark a` (0,1,1) outranks
   `.button--on-dark` (0,1,0) and repaints the label gold-300 — on a
   gold-300 button, i.e. an invisible label on a blank gold slab. Found
   exactly that way when the Our Story CTA became a button on 2026-08-17. */
.section--dark a:not(.button) { color: var(--gold-300); }
.section--muted { background: var(--neutral-100); }

/* Layout primitives (kit §4.8/§4.10): 4-up degrades to 2-up at tablet,
   1-up at mobile; 3-up degrades to 2-up at tablet, 1-up at mobile. */
.grid { display: grid; gap: var(--space-8); }
@media (min-width: 40em) { .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 40em) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: var(--space-2);
}

/* Reading measure. Fact rows and specs may run full width.
   NO centered paragraph blocks — the old site centered everything
   and it fights scanning. */
.prose p, .prose li { max-width: var(--measure); }
.prose p, .prose li, .prose h2, .prose h3 { text-align: left; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-900); color: var(--gold-300);
  padding: var(--space-2) var(--space-4); z-index: 100;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Buttons: 44px minimum height on every control --- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--space-6);
  border-radius: var(--radius-md); border: 1px solid transparent;
  font: var(--type-h4); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
/* .button--primary is defined WITH .button--gold below — they were merged
   on 2026-08-18 when marine came off buttons, and they are now the same
   solid-gold-on-light treatment. The class survives because five templates
   use it (contact, expertise, brand pages, brand dialogs); it is not a
   second style.

   .button--secondary is the gold OUTLINE button: gold-700 label on a
   transparent surface, 5.52:1 on white. Hover fills with gold-100 and
   promotes the border from neutral to gold — 4.70:1 label on that fill,
   still AA. It was marine-500 with a marine-100 hover fill until
   2026-08-18.

   Only the LIGHT-surface case is here. pages.css §hero/§error already
   override .button--secondary to gold-300 on ink-700 for the two dark
   surfaces that use it, and always did — nothing there changed. */
.button--secondary { background: transparent; color: var(--gold-700); border-color: var(--neutral-300); }
/* Deliberately does NOT restate `color`. The label is already gold-700 from
   the rest state, and re-declaring it here would tie at (0,2,0) with
   pages.css's `.hero .button--secondary { color: gold-300 }` — the dark
   surfaces would then depend on file load order to keep their gold-300
   label through a hover. Leaving colour out means both dark overrides win
   outright, as they did when this rule was marine. */
.button--secondary:hover { border-color: var(--gold-700); background: var(--gold-100); }
.button--on-dark { background: var(--gold-300); color: var(--ink-900); }
.button--on-dark:hover { background: var(--gold-100); }
/* Gold fill on a LIGHT surface — the Who We Are CTA (maintainer, 2026-08-17,
   "like the About Beyond79 button on the hero"). The REST state is exactly
   .button--on-dark: gold-300 with an ink label, 11.7:1.

   The HOVER deliberately does not match, and must not. --on-dark brightens
   to gold-100, which reads as a lift on ink-900 but on this page's
   --neutral-50 is 1.12:1 against the background — the button would
   effectively dissolve into the page on hover. This darkens to gold-500
   instead (ink on gold-500 = 6.4:1). Use --on-dark on dark surfaces and
   --gold on light ones; do not merge them.

   .button--primary JOINED THIS RULE on 2026-08-18, when the maintainer took
   marine off buttons. It used to be flat marine-500 with a white label. The
   two are now one treatment — solid gold on a light surface — and both
   names are kept only because templates use both. If you are adding a
   button, reach for --gold; --primary exists for the five templates that
   already say it. */
.button--primary, .button--gold { background: var(--gold-300); color: var(--ink-900); }
.button--primary:hover, .button--gold:hover { background: var(--gold-500); color: var(--ink-900); }
.button[aria-disabled="true"], .button:disabled {
  background: var(--neutral-200); color: var(--neutral-500); cursor: not-allowed;
}

/* Kit §4.2's form-field rules (.field / .field__help / .field__error) were
   deleted 2026-08-14: the site has no form and, by maintainer decision, is
   not getting one. They had no markup to style. If a form is ever
   reinstated, take the rules from the kit rather than from git history —
   the kit is the spec, this was a copy of it. */

/* --- Fact-discipline placeholder hatch (kit convention) --- */
.tbd {
  background: repeating-linear-gradient(45deg, var(--neutral-100), var(--neutral-100) 8px, var(--neutral-200) 8px, var(--neutral-200) 16px);
  border: 1px dashed var(--neutral-400);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--neutral-600);
  font: var(--type-small);
  display: inline-block;
}

/* Tabular lining figures wherever a number is data (kit §02). `.stat` and
   `.timeline__year` are laid out in components.css, which sets its own
   font-variant-numeric directly on `.stat__value`/`.timeline__year` — the
   `.stat` entry here is belt-and-braces for the wrapper element itself.

   `.brand-dialog__meta dd` joined the list on 2026-08-25 and carries the
   founding and acquisition years the dormant `.fact-rows dd` used to.
   That entry stays: the rules it belongs to are retained, so restoring
   them must not also mean remembering this line. */
.stat, .stat__value, .timeline__year, time, .fact-rows dd, .fact-grid dd,
.brand-dialog__meta dd, address {
  font-variant-numeric: tabular-nums lining-nums;
}

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