/* ==========================================================================
   TGRALIN Intelligence — design system
   Character: institutional, technical, precise, quiet, credible, evidence-led.
   No third-party fonts, no external requests, no tracking.
   Contrast targets: WCAG 2.1 AA (4.5:1 body, 3:1 large text and UI borders).

   MEASURED, NOT ASSUMED. Every ratio below was verified against a rendered
   page by axe-core in Chromium, not computed in the abstract. An earlier
   version of this file carried computed figures for --paper only, while the
   affected elements (.eyebrow, .contrast span, .colophon h2) actually sit on
   --paper-sunk. That gap shipped 14 real AA failures. Each text token is now
   stated against ALL THREE backgrounds it can appear on, and the lowest of
   the three is what has to clear 4.5:1.
   ========================================================================== */

:root {
  /* Mineral palette (TGR-LAUNCH-001 visual refinement, 18 Oct 2026).
     Deep navy #10283f, copper #b7794b, mineral teal #257d79, warm ivory
     #f4f1e9, slate #667784. Copper and teal are used as accents and for
     non-text graphics; where a colour cannot carry text at 4.5:1 a darker tone
     of the same hue (--copper-deep, --accent) is used for text. */

  /* Ink and paper.
     Ratios: paper #ffffff / sunk (ivory) #f4f1e9 / inset #e9e4d6 */
  --ink:            #10283f;  /* navy   15.03 / 13.31 / 11.83 */
  --ink-muted:      #44566a;  /*  7.54 /  6.68 /  5.94 */
  --ink-faint:      #566878;  /*  5.76 /  5.10 /  4.53  — lowest clears 4.5 */
  --paper:          #ffffff;
  --paper-sunk:     #f4f1e9;
  --paper-inset:    #e9e4d6;

  /* Structure.
     --rule is DECORATIVE ONLY (separators, card outlines): no minimum claimed.
     --rule-strong is FUNCTIONAL (control and button boundaries, SC 1.4.11,
     3:1). It is the suggested slate #667784: 4.63 / 4.10 / 3.64. */
  --rule:           #d6d2c4;  /* decorative */
  --rule-strong:    #667784;  /* slate  4.63 / 4.10 / 3.64 */

  /* Accent: deep mineral teal for links and highlights (text-safe tone of
     #257d79): 6.81 / 6.04 / 5.36, and 5.81 on --accent-wash. */
  --accent:         #1d6560;
  --accent-deep:    #12433f;
  --accent-wash:    #e6efec;

  /* Copper. --copper #b7794b is a NON-TEXT accent (rules, markers) only:
     3.59 / 3.18 / 2.83, decorative. --copper-deep is the text-safe tone:
     6.57 / 5.82 / 5.18. */
  --copper:         #b7794b;
  --copper-deep:    #86502a;

  /* Signal colours are used ONLY for form validation feedback,
     never to rate a company. See evidence-state rules below.
     6.80 / 6.03 / 5.36, and 6.30 on --warn-wash. */
  --warn:           #8a4b00;
  --warn-wash:      #fdf5ec;

  /* Logo wordmark colours: the established branding, deliberately NOT part of
     the palette refinement. 17.82 / 5.44 on white. */
  --brand-ink:      #14181d;
  --brand-ink-sub:  #616b74;

  /* Type */
  --font-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  --measure: 64ch;
  --shell:   72rem;
}

/* --------------------------------------------------------------- reset -- */

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ------------------------------------------------------------- headings -- */

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 650;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.05vw, 1.95rem); margin-top: var(--s7); }
h3 { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); margin-top: var(--s6); }
h4 { font-size: 1rem; margin-top: var(--s5); }

p, ul, ol, dl { margin: 0 0 var(--s4); max-width: var(--measure); }
li { margin-bottom: var(--s2); }

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent-deep); text-decoration-thickness: 2px; }

strong { font-weight: 650; }

/* Small monospace label above a heading. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--s3);
  display: block;
}

.lede {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  color: var(--ink-muted);
  max-width: 58ch;
}

/* --------------------------------------------------------------- focus -- */

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

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -100%;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s3) var(--s4);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--s4); color: var(--paper); }

/* --------------------------------------------------------------- shell -- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s4);
}
@media (min-width: 40rem) { .shell { padding-inline: var(--s5); } }

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

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 4rem;
}

.wordmark {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--brand-ink); /* logo wordmark unchanged */
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  padding: var(--s2) 0;
}
.wordmark:hover { color: var(--brand-ink); }
.wordmark__mark { letter-spacing: 0.16em; }
.wordmark__sub {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0;
  color: var(--brand-ink-sub);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  padding: var(--s2) var(--s3);
  cursor: pointer;
  min-height: 2.75rem;
}
@media (min-width: 60rem) { .nav-toggle { display: none; } }

.nav {
  display: none;
  padding-bottom: var(--s4);
}
.nav[data-open="true"] { display: block; }
@media (min-width: 60rem) {
  .nav { display: block; padding-bottom: 0; }
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 60rem) {
  .nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s3) var(--s4);
    border-top: 0;
    align-items: center;
  }
}

.nav__list li { margin: 0; }

.nav__link {
  display: block;
  padding: var(--s3) 0;
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 60rem) {
  .nav__link { border-bottom: 0; padding: var(--s4) 0; }
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 2.75rem;
  padding: var(--s3) var(--s5);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  box-shadow: inset 0 -3px 0 var(--copper);
  transition: background-color 120ms ease;
}
.btn:hover { background: var(--accent-deep); color: var(--paper); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn--secondary {
  background: var(--paper);
  box-shadow: none;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--secondary:hover { background: var(--accent-wash); color: var(--accent-deep); }

.btn--quiet {
  background: transparent;
  color: var(--accent);
  border-color: transparent;
  box-shadow: none;
  padding-inline: 0;
}
.btn--quiet:hover { background: transparent; color: var(--accent-deep); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: var(--s5) 0 0;
}

/* ---------------------------------------------------------- page intro -- */

.page-head {
  padding: var(--s7) 0 var(--s6);
  background: var(--paper-sunk);
  border-bottom: 2px solid var(--copper);
}
.page-head .eyebrow { color: var(--copper-deep); }
.page-head p:last-child { margin-bottom: 0; }

.hero {
  padding: var(--s8) 0 var(--s7);
  background: var(--paper-sunk);
  border-top: 4px solid var(--ink);
  border-bottom: 3px solid var(--copper);
}
.hero h1 { max-width: 20ch; }
.hero .eyebrow { color: var(--copper-deep); }
@media (max-width: 37.99rem) { .hero { padding: var(--s7) 0 var(--s6); } .hero .actions .btn:not(.btn--quiet) { width: 100%; } }

/* -------------------------------------------------------------- blocks -- */

.band { padding: var(--s7) 0; border-bottom: 1px solid var(--rule); }
.band--sunk { background: var(--paper-sunk); }
.band--sunk .card { border-top: 3px solid var(--copper); }
.band:last-of-type { border-bottom: 0; }
.band > :last-child { margin-bottom: 0; }

.prose > :first-child { margin-top: 0; }

.grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
  max-width: none;
}
@media (min-width: 38rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.grid li { margin: 0; }

.card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: var(--s4);
}
.card h3 { margin: 0 0 var(--s2); font-size: 1rem; }
.card p { margin: 0; font-size: 0.92rem; color: var(--ink-muted); max-width: none; }

/* Decorative accent on a non-interactive card. Not a control boundary, so
   SC 1.4.11 does not apply; it uses --rule-strong for visual weight only. */
.role-card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--copper);
  background: var(--paper);
  padding: var(--s3) var(--s4);
  font-size: 0.92rem;
  font-weight: 600;
}

/* Definition-style list for concept pairs. */
.deflist { margin: var(--s5) 0 0; max-width: none; }
.deflist div {
  display: grid;
  gap: var(--s1);
  padding: var(--s4) 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 46rem) {
  .deflist div { grid-template-columns: 14rem 1fr; gap: var(--s5); align-items: start; }
}
.deflist dt {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.deflist dd { margin: 0; color: var(--ink-muted); max-width: var(--measure); }

/* Claim/evidence contrast pairs, e.g. "ADVERTISEMENT is not CURRENT AVAILABILITY" */
.contrast {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  max-width: none;
  border-top: 1px solid var(--rule);
}
.contrast li {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.contrast b { font-weight: 600; color: var(--ink); }
.contrast span {
  color: var(--ink-faint);
  font-family: var(--font-text);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: none;
  white-space: nowrap;
}

/* Process / ladder steps */
.steps {
  list-style: none;
  counter-reset: step;
  margin: var(--s5) 0 0;
  padding: 0;
  max-width: none;
  border-top: 1px solid var(--rule);
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--copper-deep);
  font-weight: 600;
}
.steps__label { font-weight: 600; }
.steps__note { display: block; font-size: 0.88rem; color: var(--ink-muted); font-weight: 400; }

/* Evidence states.
   Deliberately typographic. No traffic-light pills, no company badges.
   These describe the status of ONE claim and never rate a participant. */
.states { margin: var(--s5) 0 0; max-width: none; border-top: 1px solid var(--rule); }
.states div {
  display: grid;
  gap: var(--s1);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 46rem) {
  .states div { grid-template-columns: 11rem 1fr; gap: var(--s5); align-items: baseline; }
}
.states dt {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--accent);
}
.states dd { margin: 0; color: var(--ink-muted); max-width: var(--measure); }

.callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
  max-width: var(--measure);
}
.callout > :last-child { margin-bottom: 0; }
.callout p { max-width: none; }

.note {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* ------------------------------------------------- action cards (hub) -- */

.action-card { display: flex; flex-direction: column; gap: var(--s3); }
.action-card h3 { font-size: 1.15rem; margin: 0; }
.action-card p { margin: 0; }
.action-card__note {
  font-size: 0.88rem;
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
}
.action-card .btn { margin-top: auto; align-self: flex-start; }
.callout h3 { margin: 0 0 var(--s2); font-size: 1.05rem; }

/* --------------------------------------------------------------- forms -- */

.form { margin: var(--s6) 0 0; max-width: 46rem; }

.fieldset {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 var(--s6);
  padding: var(--s5) 0 0;
  min-width: 0;
}
.fieldset > legend {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0;
  margin: 0 0 var(--s4);
}
.fieldset__note {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-top: -0.5rem;
}

.field { margin-bottom: var(--s5); }

.field > label,
.field__label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--s2);
}

.field__hint {
  display: block;
  font-size: 0.86rem;
  color: var(--ink-muted);
  font-weight: 400;
  margin-bottom: var(--s2);
}

.field__optional {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: var(--s3);
  min-height: 2.75rem;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
select { appearance: none; background-image: none; }

input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); }

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--warn);
  border-width: 2px;
  background: var(--warn-wash);
}

.field__error {
  display: block;
  margin-top: var(--s2);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--warn);
}
.field__error:empty { display: none; }

/* Radio and checkbox groups */
.choices { display: grid; gap: var(--s2); margin: 0; padding: 0; border: 0; }
.choice {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: var(--s3);
  align-items: start;
  padding: var(--s3);
  border: 1px solid var(--rule);
  background: var(--paper);
  cursor: pointer;
  font-size: 0.95rem;
}
.choice:hover { background: var(--paper-sunk); }
.choice input { margin: 0.28rem 0 0; width: 1.1rem; height: 1.1rem; min-height: 0; }
.choice__text { display: block; }
.choice__note { display: block; font-size: 0.86rem; color: var(--ink-muted); margin-top: var(--s1); }

.choices--inline { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

/* Conditional blocks revealed by CURRENT MATERIAL STATUS.
   Hidden with the `hidden` attribute so non-JS clients still submit a valid
   form and assistive technology is not shown dead fields. */
[hidden] { display: none !important; }

.conditional {
  border-left: 3px solid var(--accent);
  padding-left: var(--s4);
  margin-top: var(--s5);
}

.form__status {
  margin: var(--s5) 0 0;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
}
.form__status:empty { display: none; }
.form__status > :last-child { margin-bottom: 0; }
.form__status h2 { margin-top: 0; font-size: 1.1rem; }
.form__status[data-state="error"] {
  border-left-color: var(--warn);
  background: var(--warn-wash);
}

.consent {
  border: 1px solid var(--rule);
  background: var(--paper-sunk);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
}
.consent ul { margin-bottom: var(--s3); font-size: 0.92rem; color: var(--ink-muted); }
.consent > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- table -- */

.table-wrap { overflow-x: auto; margin: var(--s5) 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; border-bottom: 2px solid var(--rule-strong); }

/* -------------------------------------------------------------- footer -- */

.colophon {
  border-top: 1px solid var(--rule);
  background: var(--paper-sunk);
  padding: var(--s7) 0 var(--s6);
  margin-top: var(--s8);
  font-size: 0.9rem;
}

.colophon__cols {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .colophon__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .colophon__cols { grid-template-columns: repeat(4, 1fr); } }

.colophon h2 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--s3);
  font-weight: 600;
}
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { margin-bottom: var(--s2); }
.colophon a { color: var(--ink-muted); text-decoration: none; }
.colophon a:hover { color: var(--accent-deep); text-decoration: underline; }

.colophon__legal {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.6;
  max-width: 78ch;
}
.colophon__legal p { max-width: none; }
.colophon__legal p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ utilities -- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stack > * + * { margin-top: var(--s4); }
.mono { font-family: var(--font-mono); font-size: 0.9em; }
.no-wrap { white-space: nowrap; }

/* Spacing utilities.
   These exist because the Content-Security-Policy is `style-src 'self'`,
   which blocks inline style attributes outright. Inline styles did not
   merely lint badly here — Chromium refused to apply them, so the spacing
   silently vanished in production while jsdom (which enforces no CSP)
   reported everything fine. Any new spacing adjustment belongs here, never
   in a style="" attribute. A test in test/pages.test.js enforces this. */
.mt-5 { margin-top: var(--s5) !important; }
.mt-6 { margin-top: var(--s6) !important; }
.mb-0 { margin-bottom: 0 !important; }

/* Spacing for a note that follows a grid or step list. */
.grid + .note, .steps + .note { margin-top: var(--s5); }

/* ------------------------------------------------------- Market Watch -- */

.market-layout { display: grid; gap: var(--s6); margin-top: var(--s5); }
@media (min-width: 62rem) {
  .market-layout { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .market-layout > .market-side { grid-column: 2; grid-row: 1; position: sticky; top: var(--s4); }
  .market-layout > .market-main { grid-column: 1; grid-row: 1; }
}
.market-main > section, .market-main > .news-panel { margin-bottom: var(--s7); }
.market-main h2, .market-side h2 { margin-top: 0; }

.market-side { border: 1px solid var(--rule); background: var(--paper-sunk); padding: var(--s4); }
.market-side__banner {
  border-left: 3px solid var(--warn);
  background: var(--warn-wash);
  padding: var(--s3) var(--s4);
  font-size: 0.9rem;
  margin: var(--s3) 0;
  max-width: none;
}

.quote { border: 1px solid var(--rule); background: var(--paper); padding: var(--s4); margin: 0 0 var(--s4); }
.quote__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); flex-wrap: wrap; }
.quote h3 { margin: 0; font-size: 1.05rem; }
.quote p { max-width: none; }
.quote__tags { margin: 0; display: flex; gap: var(--s2); flex-wrap: wrap; }
.quote__price { margin: var(--s3) 0 var(--s1); }
.quote__value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.quote__unit { font-size: 0.85rem; color: var(--ink-muted); }
.quote__change { margin: 0 0 var(--s2); font-size: 0.9rem; }
.quote--none p { margin: var(--s2) 0 0; }
.quote__meta { margin: var(--s3) 0 0; font-size: 0.82rem; color: var(--ink-muted); }
.quote__meta div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s2); padding: var(--s1) 0; border-top: 1px solid var(--rule); }
.quote__meta dt { font-weight: 600; color: var(--ink); }
.quote__meta dd { margin: 0; }

.pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  white-space: nowrap;
}
.pill--fixture { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-wash); }
.pill--timing { border-color: var(--rule-strong); }
.pill--cached, .pill--stale, .pill--withheld { border-color: var(--warn); color: var(--warn); background: var(--warn-wash); }

.spark { display: block; width: 100%; height: 2.5rem; }
.spark__line { stroke: var(--accent); stroke-width: 1.6; }

.chart-card { margin: 0 0 var(--s6); border: 1px solid var(--rule); padding: var(--s4); background: var(--paper); }
.chart-card h3 { margin: 0 0 var(--s1); font-size: 1.05rem; }
.chart-card figcaption p { margin: 0 0 var(--s3); }
.chart { display: block; width: 100%; height: auto; max-width: 40rem; }
.chart__line { stroke: var(--accent); stroke-width: 2.2; }
.chart__axis { stroke: var(--rule-strong); stroke-width: 1; }
.chart__label { fill: var(--ink-muted); font-size: 15px; font-family: var(--font-text); }
.chart-card__data { margin-top: var(--s3); }
.chart-card__data summary { cursor: pointer; font-weight: 600; }

.news-item { border-top: 1px solid var(--rule); padding: var(--s4) 0; }
.news-item h3 { margin: 0 0 var(--s2); font-size: 1.05rem; }
.news-item p { margin: 0 0 var(--s2); max-width: none; }
.news-item__meta { font-size: 0.85rem; color: var(--ink-muted); }
.news-status { border: 1px solid var(--rule); background: var(--paper-sunk); padding: var(--s4); margin: var(--s4) 0; }
.news-status[data-state="stale"] { border-left: 3px solid var(--warn); }
.news-status h3 { margin: 0 0 var(--s2); font-size: 1rem; }

.brief { border: 1px solid var(--rule); background: var(--paper); padding: var(--s4) var(--s5); }
.brief h3 { font-size: 1rem; margin: var(--s4) 0 var(--s2); }
.work-panel > p { max-width: var(--measure); }

/* Homepage market panel: compact tiles, then headlines. */
.home-market > h2 { margin-top: 0; }
.home-market__sub { font-size: 1rem; margin: var(--s5) 0 var(--s3); }
.tiles { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { border: 1px solid var(--rule); background: var(--paper); padding: var(--s3) var(--s4); }
.tile h3 { margin: 0; font-size: 1rem; }
.tile p { margin: var(--s1) 0; max-width: none; }
.tile__change { font-size: 0.88rem; color: var(--ink-muted); }
.tile__details { margin-top: var(--s2); border-top: 1px solid var(--rule); padding-top: var(--s2); }
.tile__details summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--accent-deep); }
.tile__details .quote__meta { margin-top: var(--s2); }
@media (max-width: 39.99rem) {
  .tile { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s3); align-items: baseline; }
  .tile > h3 { grid-column: 1; }
  .tile > .tile__price { grid-column: 2; grid-row: 1; text-align: right; }
  .tile > .tile__change { grid-column: 1 / -1; }
  .tile > .quote__tags, .tile > .tile__details { grid-column: 1 / -1; }
}
.headlines { list-style: none; margin: 0; padding: 0; max-width: none; }
.headlines li { border-top: 1px solid var(--rule); padding: var(--s3) 0; display: grid; gap: var(--s1); }
.headlines__topic { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.headlines__title { font-weight: 600; }
.headlines__meta { font-size: 0.85rem; color: var(--ink-muted); }

/* Live-news switch: sentences that are true only with, or only without, the automatic news check. */
[data-live-news-only][hidden], [data-fixture-only][hidden] { display: none !important; }

/* Text-only advertising and sponsorship. Always labelled; never styled to
   look like editorial content. */
.ad-slot {
  border: 1px solid var(--rule-strong);
  background: var(--paper-sunk);
  padding: var(--s3) var(--s4);
  margin: 0 0 var(--s5);
  font-size: 0.95rem;
}
.ad-slot[hidden] { display: none !important; }
.ad-slot__label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.2rem;
}
.ad-slot a { text-decoration: underline; }

/* Local demonstration pages */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem var(--s5); margin: 0 0 var(--s5); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }
.btn--danger { background: #8c1d18; border-color: #8c1d18; color: #fff; }
.btn--danger:hover { background: #6e1612; }
@media (max-width: 600px) { .facts { grid-template-columns: 1fr; } }

.mail-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-link { overflow-wrap: anywhere; word-break: break-all; }
#mail-shown { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#mail-shown ul { padding-left: 1.2rem; }

/* Placeholders that stand for legal information not yet approved. They are
   deliberately conspicuous, and `npm run launch:check` refuses a build that
   still contains one. */
.legal-todo {
  color: var(--ink);
  background: var(--accent-wash);
  font-weight: 600;
  border-bottom: 2px dashed var(--ink);
}

/* Cloudflare Turnstile mounts here when it is configured. Empty otherwise. */
.turnstile-slot:not(:empty) { margin: var(--s4) 0; }

.company-facts { margin: 0 0 var(--s5); }
.company-facts > div { margin: 0 0 var(--s4); }
.company-facts dt { font-weight: 600; }
.company-facts dd { margin: 0; overflow-wrap: anywhere; }

/* Ivory hero followed directly by a sunk band: keep the band white so the two do not merge. */
.hero + .band--sunk { background: var(--paper); }

/* Permanent page-specific mineral photographs. */
.mineral-heading{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.85fr);gap:clamp(24px,4vw,64px);align-items:center}.mineral-heading__copy{min-width:0}.page-mineral{margin:0;padding:14px;background:#102d40;color:#fff;box-shadow:12px 12px 0 #d8c7ad}.page-mineral img{width:100%;height:clamp(220px,25vw,360px);object-fit:contain;background:#fff}.page-mineral figcaption{padding:12px 4px 2px;font-size:12px;line-height:1.6}.page-mineral figcaption strong,.page-mineral figcaption span,.page-mineral figcaption small{display:block}.page-mineral figcaption strong{font-size:16px;margin-bottom:4px}.page-mineral a{color:#fff;text-decoration:underline}@media(max-width:760px){.mineral-heading{grid-template-columns:1fr}.page-mineral{max-width:460px;width:calc(100% - 12px)}.page-mineral img{height:280px}}