/* =========================================================
   R&A URETHANE — Design System v2 (brand-derived)
   Tokens per docs/11-v2-design-system.md
   Layer 1/3: tokens · reset · base type · primitives
   ========================================================= */

:root {
  /* brand */
  --navy: #00173C;
  --navy-2: #0B2E4F;          /* gradient partner / hover navy */
  --ink: #0F1221;
  --lime: #8DC63F;            /* signature accent — action + verification only */
  --lime-deep: #79B22C;       /* lime hover */
  --green-text: #A8DB63;      /* lime for text/links on dark (9.9:1) */
  --leaf: #5BAD5C;            /* logo secondary green — decorative */
  --sky: #3396D1;             /* brand info blue — data */
  --sky-text: #7FC4EF;        /* sky for text on dark */
  --sky-bright: #5FB2E3;      /* links on navy */

  /* THE ENGINE — cinematic dark-luxe (deep space navy, glass, light) */
  --canvas: #050D1A;               /* body — near-black navy */
  --canvas-2: #071226;             /* gradient partner */
  --paper: rgb(255 255 255 / 5%);  /* glass card surface */
  --paper-solid: #0B1830;          /* solid raised panel where blur unwanted */
  --surface: #081124;              /* section alternation */
  --surface-2: #0C1A33;
  --ink: #F2F6FA;                  /* primary text on dark */
  --muted: #9FB0C3;                /* secondary text (7.9:1 on canvas) */
  --hairline: rgb(255 255 255 / 11%);
  --field-border: rgb(255 255 255 / 28%);
  --on-dark: #F2F5F8;
  --on-dark-muted: #A9B6C6;
  --dark-line: #1B3355;
  --glow-lime: rgb(141 198 63 / 45%);
  --glow-sky: rgb(51 150 209 / 40%);

  /* status — distinct from brand accent */
  --success: #1E7A5C;
  --warning: #B96F06;
  --error: #B3261E;
  --info: #3396D1;

  /* type — THE ENGINE: Outfit (geometric, premium, full weight range) */
  --font-display: "Outfit", system-ui, -apple-system, sans-serif;
  --font-sans: "Outfit", system-ui, -apple-system, sans-serif;
  --font-cond: "Outfit", system-ui, sans-serif;
  /* .mono kept for compatibility — a letter-spaced label with tabular figures */
  --font-mono: "Outfit", system-ui, sans-serif;

  /* structure */
  --wrap: 1280px;
  --radius: 3px;
  --shadow-1: 0 10px 24px rgb(0 23 60 / 10%);
  --shadow-2: 0 18px 48px rgb(0 23 60 / 18%);
  --ease: cubic-bezier(.25, .1, .25, 1);
  --header-h: 132px; /* announcement + utility + nav */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: linear-gradient(180deg, var(--canvas) 0%, var(--canvas-2) 60%, var(--canvas) 100%);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, blockquote, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
[hidden] { display: none !important; }
a { color: var(--green-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; }

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

/* Visually hidden until keyboard focus — clip pattern, no off-canvas offsets
   (offsets break RTL scroll width and can flash on slow CSS loads). */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  background: var(--navy);
  color: #fff;
  z-index: 200;
}
.skip-link:focus {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: .6rem 1rem;
  clip: auto;
  overflow: visible;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
/* .mono kept for markup compatibility — rendered as a letter-spaced label
   (tabular figures), NOT monospace. Breaks the spec-sheet/register genre. */
.mono { font-family: var(--font-sans); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- type scale — THE ENGINE (Outfit, cinematic) ---------- */
h1, .h1 { font-family: var(--font-display); font-size: clamp(2.7rem, 5.6vw, 4.8rem); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
h2, .h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.06; font-weight: 700; letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
/* gradient light accent for emphasised words */
.grad, h1 em, h2 em { font-style: normal; background: linear-gradient(92deg, var(--lime) 10%, #C6E98E 45%, var(--sky) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
h3, .h3 { font-family: var(--font-sans); font-size: 1.22rem; font-weight: 600; line-height: 1.28; letter-spacing: -.015em; color: var(--ink); }
h4, .h4 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.65; max-width: 40rem; color: #C3D0DF; }
.small { font-size: .875rem; }
/* signature editorial mark: a small lime square + spaced label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: 1.1rem;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px 2px var(--glow-lime); flex: none; }
/* lime underline mark on a key word inside a heading */
.mark { box-shadow: inset 0 -.28em 0 rgb(141 198 63 / 55%); }
p + p { margin-top: .8em; }
.section--navy .eyebrow, .section--lime .eyebrow { color: inherit; }

/* ---------- sections ---------- */
.section { padding-block: clamp(3.25rem, 6.5vw, 5.5rem); }
.section--surface { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border-block: 1px solid var(--hairline); }
.section--navy { background: linear-gradient(160deg, #0A1E42, #0B2E4F); color: var(--on-dark); border-block: 1px solid var(--hairline); }
.section--navy :is(h1,h2,h3,h4) { color: #fff; }
.section--navy .eyebrow { color: #fff; }
.section--navy .eyebrow::before { background: var(--lime); }
.section--navy a:not(.btn) { color: var(--sky-bright); }
/* lime color-block band — navy ink on the brand accent */
.section--lime { background: var(--lime); color: var(--navy); }
.section--lime :is(h1,h2,h3,h4) { color: var(--navy); }
.section--lime .eyebrow { color: var(--navy); }
.section--lime .eyebrow::before { background: var(--navy); }
.section--lime .section-sub { color: #123; }
.section-head { max-width: 52rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.75rem); }
.section-sub { max-width: 44rem; color: var(--muted); margin-top: .6rem; }
.section--navy .section-sub { color: var(--on-dark-muted); }
.section-head--row {
  max-width: none;
  display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap;
}

/* ---------- chips (evidence system) ---------- */
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  padding: .18rem .5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--muted);
  white-space: nowrap;
}
.chip--proof { border-color: var(--success); color: var(--success); }
.chip--code {
  border-color: var(--navy); color: var(--navy);
  font-size: .8rem; font-weight: 500; padding: .22rem .6rem;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.chip--lime { border-color: var(--green-text); color: var(--green-text); }
.section--navy .chip, .on-dark .chip { border-color: var(--dark-line); color: var(--on-dark-muted); }
.section--navy .chip--proof { border-color: #4FBF97; color: #4FBF97; }
.section--navy .chip--lime, .on-dark .chip--lime { border-color: var(--lime); color: var(--lime); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  padding: .78rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: linear-gradient(120deg, var(--lime), #A5D96A); color: #06240B; border-color: transparent; box-shadow: 0 6px 24px var(--glow-lime); font-weight: 700; }
.btn--primary:hover { background: linear-gradient(120deg, #9BD64F, #B9E687); box-shadow: 0 8px 32px var(--glow-lime); }
.btn--outline { background: rgb(255 255 255 / 4%); color: var(--ink); border-color: rgb(255 255 255 / 25%); backdrop-filter: blur(6px); }
.btn--outline:hover { background: rgb(255 255 255 / 12%); border-color: rgb(255 255 255 / 45%); color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--navy); }
.btn--sm { padding: .5rem 1rem; font-size: .85rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.link-arrow { font-family: var(--font-cond); font-weight: 600; letter-spacing: .03em; }
.link-arrow::after { content: " →"; display: inline-block; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-quiet { color: var(--muted); font-size: .9rem; }
.link-quiet:hover { color: var(--green-text); }

/* ---------- reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal:nth-child(2) { transition-delay: .04s; }
  .reveal:nth-child(3) { transition-delay: .08s; }
  .reveal:nth-child(4) { transition-delay: .12s; }
  .reveal:nth-child(5) { transition-delay: .16s; }
  .reveal:nth-child(6) { transition-delay: .2s; }
  /* signal hatch draws in on reveal (scaleX so the 26px hatch keeps its size) */
  .section-head.reveal .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease) .15s; }
  .section-head.reveal.is-in .eyebrow::before { transform: scaleX(1); }
}

/* ---------- print ---------- */
@media print {
  .announce, .utility, .header, .footer__bar, .breadcrumbs + .page-hero .btn,
  .cta-band, .nav-toggle, .ruler { display: none !important; }
  * { background: transparent !important; color: #000 !important; box-shadow: none !important; }
  body { background: #fff; }
}

/* soft secondary text on the dark theme (light theme restyles via theme-light.css) */
.txt-soft { color: #C3D0DF; }