/* CTS design tokens: the paper system.

   Palette is the light half of the CTS print system, carried from the Welcome
   Packet PDF (values sampled from its content streams) and reconciled with the
   capability one-pager, which is the approved client-facing sheet. */

/* Metric-matched fallbacks.
   Lighthouse measured CLS 0.143 on mobile and the trace named the cause: the
   hero rewraps when Barlow swaps in over the fallback. Measured on the live
   page at 60px/700, Barlow Condensed is 720.1px wide where Arial is 1045.6px,
   so the fallback must be scaled to 68.87% to occupy the same space. Barlow is
   274.6px where Arial is 309.4px, giving 88.75%.

   Width was only half of it. With line-height:normal both Barlow faces give a
   120% line box where the unadjusted fallback gives 79%, a 34% difference that
   changed every block height on swap. The overrides below reproduce 100 + 20
   + 0 = 120%. The percentages look odd because ascent-override is applied
   after size-adjust, so each is divided by the size-adjust factor to land a
   120% box: 120 / 0.6887 = 174.2, split 100:20 as 145.2 and 29.

   One face per family, both keyed to Arial, because Arial is the font that
   actually resolves. An earlier attempt declared a second face against Arial
   Narrow; the Arial face won the cascade and the adjustment was computed
   against the wrong base, which made the fallback wider rather than narrower. */
@font-face {
  font-family: 'Barlow Fallback';
  src: local('Arial');
  size-adjust: 88.75%;
  ascent-override: 112.7%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow Condensed Fallback';
  src: local('Arial');
  size-adjust: 68.87%;
  ascent-override: 145.2%;
  descent-override: 29.0%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* Brand */
  --gold:        #be9648;   /* accent, rules, kickers */
  --gold-hi:     #d8b870;   /* lighter gold, on dark only */
  --gold-deep:   #8a6a2a;   /* text-weight gold. Measured 4.81:1 on --paper;
                              the previous #8f6f2f was 4.33:1 and failed AA. */

  /* Ink */
  --navy:        #131a2c;
  --ink:         #131a2c;
  --ink-2:       #39435c;
  --muted:       #5b6880;
  --faint:       #8a93a5;

  /* Paper */
  --paper:       #ffffff;
  --desk:        #f5f6f8;
  --desk-2:      #eef1f6;
  --wash:        #fbf8f1;   /* warm panel, for the argument blocks */
  --line:        #dde2e9;
  --line-2:      #c9d1dd;

  /* Chart. One measure across three jurisdictions, so bars are a single hue;
     the CTS reference is an annotation in gold, distinguished by mark type and
     a direct label rather than by colour alone. */
  --chart-bar:    #2f4a7a;
  --chart-accent: #a06c00;
  --chart-grid:   #e4e8ef;

  /* Type */
  --f-display: 'Barlow Condensed', 'Barlow Condensed Fallback', Arial, sans-serif;
  --f-body:    'Barlow', 'Barlow Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Motion. One spring and two eases, shared by every interaction so the whole
     site feels like one object. */
  --spring: linear(
    0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017,
    1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.98 57.1%,
    0.998 69.8%, 1.004 76.9%, 1
  );
  --ease:     cubic-bezier(.22, .61, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
  --bar-h: 64px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: .96;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0;
  color: var(--navy);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }

::selection { background: var(--gold); color: var(--navy); }

.kicker {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(11px, .82vw, 13px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0;
}
.kicker .idx {
  font-weight: 700;
  font-size: 1.5em;
  letter-spacing: 0;
  margin-right: .55em;
  vertical-align: -0.06em;
  /* gold-deep, not gold: #be9648 lands at 2.5:1 on paper. The dark bands
     override this back to --gold, where it has the contrast to spare. */
  color: var(--gold-deep);
}
.dot { opacity: .5; margin-inline: .35em; }

/* Lockup ------------------------------------------------------------------ */
.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.lockup-mark { display: block; width: 26px; color: var(--gold); flex: none; }
.lockup-mark svg { display: block; }
.lockup-type { display: flex; align-items: stretch; gap: 8px; }
.lockup-cts {
  font-family: var(--f-display);
  font-weight: 700; font-size: 30px; line-height: .84;
  letter-spacing: -.01em; color: var(--gold); align-self: center;
}
.lockup-rule { width: 1px; background: var(--line-2); }
.lockup-words {
  display: flex; flex-direction: column; justify-content: center;
  font-family: var(--f-display);
  font-weight: 600; font-size: 9px; line-height: 1.18;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2);
}
.lockup-words i { font-style: normal; }

/* Focus: visible, gold, never removed. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff;
  padding: 10px 16px;
  font-family: var(--f-display);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

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

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