/* ============================================================
   RAY DESIGN GRID — Müller-Brockmann
   Single source of truth for every measurement on this platform.
   12-column modular grid, 8px baseline. Nothing is placed by eye.
   ============================================================ */

:root {
  /* --- the one source --- */
  --cols: 12;
  --baseline: 8px;
  --gutter: 24px;
  --margin: 40px;
  --measure: 1360px;

  /* --- palette: paper, brand navy, brand orange. Values come from the logo. --- */
  --paper: #ffffff;
  --ink: #092850;
  --red: #D57D3B;            /* brand orange; the variable keeps its historical name */
  --accent: #D57D3B;
  --accent-strong: #A85A24;  /* darker orange for small text on paper (contrast) */
  --rule: rgba(9, 40, 80, 0.16);
  --rule-strong: rgba(9, 40, 80, 0.42);
  --quiet: rgba(9, 40, 80, 0.60);

  /* --- type: grotesque display + body, mono for folios and data --- */
  --sans: "Inter", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Space Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-folio: 11px;
  --t-caption: 12px;
  --t-body: 16px;
  --t-lead: 20px;
  --t-h3: 24px;
  --t-h2: 40px;
  --t-h1: 72px;
  --t-display: 112px;

  --lh-tight: 1.04;
  --lh-body: 1.5;

  /* baseline multiples — never write a raw pixel value in a component */
  --s-half: calc(var(--baseline) / 2);
  --s1: calc(var(--baseline) * 1);
  --s2: calc(var(--baseline) * 2);
  --s3: calc(var(--baseline) * 3);
  --s4: calc(var(--baseline) * 4);
  --s6: calc(var(--baseline) * 6);
  --s8: calc(var(--baseline) * 8);
  --s12: calc(var(--baseline) * 12);
  --s16: calc(var(--baseline) * 16);
}

@media (max-width: 900px) {
  :root { --cols: 6; --margin: 20px; --gutter: 16px; --t-display: 56px; --t-h1: 40px; --t-h2: 28px; }
}
@media (max-width: 560px) {
  :root { --cols: 4; --t-display: 40px; --t-h1: 32px; }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "tnum" 1, "cv05" 1;
  /* flush left, ragged right. No justification anywhere. */
  text-align: left;
  text-wrap: pretty;
}

/* ---------- the wrap and the grid ---------- */

.wrap {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--margin);
}

/* The guides overlay lives INSIDE .wrap so it inherits the exact same
   padding and max-width as the content it measures. Any other placement
   makes the overlay lie. */
.wrap > .guides {
  position: absolute;
  inset: 0 var(--margin);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gutter);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms linear;
  z-index: 9999;
}
.wrap > .guides span { background: rgba(228, 0, 43, 0.09); border-left: 1px solid rgba(228, 0, 43, 0.35); }
.wrap > .guides span:last-child { border-right: 1px solid rgba(228, 0, 43, 0.35); }

body.grid-on .wrap > .guides { opacity: 1; }
body.grid-on::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background: repeating-linear-gradient(to bottom, rgba(9,40,80,0.10) 0 1px, transparent 1px var(--baseline));
}

/* .band is the grid. Children are placed by column line, never by margin. */
.band {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gutter);
}
@supports (grid-template-columns: subgrid) {
  .band > .band { grid-template-columns: subgrid; grid-column: 1 / -1; }
}

/* column-line placement utilities: c<start>-<end> reads as "column line start to end" */
.c1-12 { grid-column: 1 / 13; } .c1-8 { grid-column: 1 / 9; } .c1-7 { grid-column: 1 / 8; }
.c1-6  { grid-column: 1 / 7; }  .c1-5 { grid-column: 1 / 6; } .c1-4 { grid-column: 1 / 5; }
.c1-3  { grid-column: 1 / 4; }
.c4-12 { grid-column: 4 / 13; } .c4-9 { grid-column: 4 / 10; }
.c5-12 { grid-column: 5 / 13; } .c5-9 { grid-column: 5 / 10; }
.c7-12 { grid-column: 7 / 13; } .c9-12 { grid-column: 9 / 13; }
.c3-11 { grid-column: 3 / 12; }
.c4-7  { grid-column: 4 / 7; }  .c7-10 { grid-column: 7 / 10; } .c10-13 { grid-column: 10 / 13; }

@media (max-width: 900px) {
  .c1-12, .c1-8, .c1-7, .c1-6, .c1-5, .c1-4, .c1-3,
  .c4-12, .c4-9, .c5-12, .c5-9, .c7-12, .c9-12, .c3-11,
  .c4-7, .c7-10, .c10-13 { grid-column: 1 / -1; }
}

/* ---------- type ---------- */

.display, h1, h2, h3 { font-weight: 700; letter-spacing: -0.022em; line-height: var(--lh-tight); margin: 0; }
.display { font-size: var(--t-display); letter-spacing: -0.035em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.012em; }

p { margin: 0 0 var(--s2); max-width: 62ch; }
.lead { font-size: var(--t-lead); line-height: 1.4; max-width: 54ch; }

.folio, .caption, .datum, th, .eyebrow {
  font-family: var(--mono);
  font-size: var(--t-folio);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--quiet);
}
.caption { text-transform: none; letter-spacing: 0.02em; font-size: var(--t-caption); }
.eyebrow { color: var(--red); }
.datum { font-size: var(--t-body); letter-spacing: 0; text-transform: none; color: var(--ink); }

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--red); }
a:hover { color: var(--red); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--red); outline-offset: 3px;
}

/* ---------- rules and rhythm ---------- */

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; grid-column: 1 / -1; }
.rule-strong { border-top-color: var(--ink); }
.section { padding-block: var(--s12); }
.section + .section { border-top: 1px solid var(--rule); }
.stack > * + * { margin-top: var(--s2); }

/* ---------- components ---------- */

.tag {
  display: inline-block; font-family: var(--mono); font-size: var(--t-folio);
  letter-spacing: 0.08em; text-transform: uppercase; padding: 2px var(--s1);
  border: 1px solid var(--rule-strong);
}
.tag-red { color: var(--paper); background: var(--red); border-color: var(--red); }
.tag-ink { color: var(--paper); background: var(--ink); border-color: var(--ink); }

.btn {
  display: inline-block; font-family: var(--sans); font-size: var(--t-body); font-weight: 600;
  padding: var(--s1) var(--s3); border: 1px solid var(--ink); background: var(--ink);
  color: var(--paper); cursor: pointer; border-radius: 0;
}
.btn:hover { background: var(--red); border-color: var(--red); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--s1) var(--s2) var(--s1) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 400; padding-bottom: var(--s1); }
td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.field { display: block; margin-bottom: var(--s3); }
.field label { display: block; font-family: var(--mono); font-size: var(--t-folio); letter-spacing: 0.10em; text-transform: uppercase; color: var(--quiet); margin-bottom: var(--s1); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: var(--t-body); color: var(--ink);
  padding: var(--s1) 0; border: 0; border-bottom: 1px solid var(--ink);
  background: transparent; border-radius: 0;
}

.note { border-left: 2px solid var(--red); padding-left: var(--s2); }
.figure-number { font-family: var(--mono); font-size: var(--t-display); line-height: 0.85; letter-spacing: -0.04em; font-weight: 400; }

/* score readout — the one place colour carries meaning */
.verdict { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.10em; font-size: var(--t-folio); }
.verdict-block { color: var(--red); font-weight: 700; }

/* skip link */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--margin); top: var(--s1); background: var(--ink); color: var(--paper); padding: var(--s1) var(--s2); z-index: 10000; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .guides, .site-nav { display: none !important; }
  body { font-size: 11pt; }
}