/* ==========================================================================
   FAME base — element defaults built on tokens.css
   --------------------------------------------------------------------------
   Loaded only on FAME templates, where the parent theme's 967 KB stylesheet is
   dequeued. Plain element selectors are therefore safe: nothing is competing.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-normal);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Headings ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-head);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); line-height: 1.32; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

/* --- Links --------------------------------------------------------------- */

/* --accent-text, not --indigo. The two differ by one step of the ramp and by
   whether the result is legible: brand-600 measures 4.06:1 on paper, under the
   4.5 a link at 14 or 15 pixels needs, and the token sheet says as much in its
   own header. --accent-text is brand-700 at 5.82:1, and it is redefined on
   every dark surface, so a link in a hero or the footer stays light without a
   rule of its own. */
/* Wrapped in :where(), which contributes no specificity at all.
   A bare `a:hover` outranks a single class, so it was quietly overriding every
   component that paints its own links: the "Partner with us" button's label
   turned dark blue on its own teal fill the moment the pointer touched it, and
   became unreadable. With :where() the default applies to any link that has not
   been given a colour, and loses to every one that has — which is the only
   behaviour that scales past a handful of components. */
:where(a) {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

:where(a:hover) { color: var(--accent-text-hover); }

/* --- Figures -------------------------------------------------------------- */

img, picture, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

figure { margin: 0; }

/* --- Tables --------------------------------------------------------------- */
/* Tables, not cards, for records. Cards imply marketing; tables imply records. */

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;

  /* Was #9BA0C2, which measures 2.56:1 on white — a column header nobody can
     read is a column header that is not doing its job. --muted is 5.9:1. */
  color: var(--muted);
  padding: 0 var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}

td {
  padding: 17px var(--s-3) 17px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: var(--t-sm);
}

/* --- Forms ---------------------------------------------------------------- */

input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.fame-wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.fame-section { padding-block: var(--section-y); }

/* Alternating backgrounds create rhythm without adding page length. */
.fame-section--mist {
  background: var(--mist);
  border-block: 1px solid var(--line);
}

.fame-section--ink {
  background: var(--ink);
  color: var(--on-dark);
}

.fame-section--ink h1,
.fame-section--ink h2,
.fame-section--ink h3 { color: var(--on-dark); }

.fame-section--ink p { color: var(--on-dark-2); }

/* ==========================================================================
   Typographic utilities
   ========================================================================== */

/* Monospace metadata is most of what makes this read as a research firm
   rather than a consultancy. Used for eyebrows, labels, dates and figures. */
.fame-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--s-2);
}

.fame-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--muted);
}

/* Every figure on the site. Keeps columns of numbers aligned. */
.fame-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.fame-lead {
  font-size: var(--t-lead);
  max-width: 56ch;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* WCAG 2.1 AA is a non-negotiable in the brief. A visible focus ring on every
   interactive element is the single highest-value part of that. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.fame-section--ink :focus-visible { outline-color: var(--cyan); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fame-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--on-dark);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
}

.fame-skip-link:focus {
  left: var(--s-4);
  top: var(--s-4);
  color: var(--on-dark);
}

/* ==========================================================================
   Editor prose
   --------------------------------------------------------------------------
   For the handful of pages whose body is written in the editor rather than
   assembled by a template — the privacy notice, and anything an editor adds
   later. Without it those pages fall back to the browser's own type, which on
   a site built entirely from a type scale reads as a page from another site.
   ========================================================================== */

.fame-prose { max-width: 72ch; }

.fame-prose > * + * { margin-top: var(--s-4); }

.fame-prose h2 {
  margin-top: var(--s-7);
  font-size: var(--t-h3);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-head);
}

.fame-prose h3 {
  margin-top: var(--s-6);
  font-size: var(--t-h4);
  font-weight: var(--w-medium);
}

.fame-prose p,
.fame-prose li {
  font-size: var(--t-body);
  line-height: var(--lh-long);
}

.fame-prose ul,
.fame-prose ol { padding-left: var(--s-5); }

.fame-prose li + li { margin-top: var(--s-2); }

.fame-prose blockquote {
  margin: var(--s-5) 0;
  padding-left: var(--s-5);
  border-left: 3px solid var(--brand-500);
  color: var(--muted);
}

.fame-prose img { border-radius: var(--r-md); }

.fame-prose table { width: 100%; border-collapse: collapse; }
.fame-prose th,
.fame-prose td { padding: var(--s-3); border-bottom: 1px solid var(--line); text-align: left; }