/* rnx.green — shared stylesheet
   System fonts only. No external resources. */

:root {
  --ink: #1b1f1d;
  --ink-muted: #4a524e;
  --paper: #fbfbf8;
  --paper-alt: #f1f2ee;
  --rule: #d5d8d2;
  --accent: #1f5a46;
  --accent-ink: #ffffff;
  --focus: #b3470f;
  /* Control bar in charts: at least 3:1 against paper and tonal band */
  --bar-control: #858c88;
  /* Caveat text size; measured figures on Evidence never exceed it */
  --caveat-size: 1.125rem;

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

  --measure: 42rem;
  --wide: 68rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

h1, h2, h3 {
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(1.875rem, 5vw, 2.75rem); max-width: 22ch; }
h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); }
h3 { font-size: 1.125rem; }

p, ul, ol, dl, table { margin: 0 0 var(--space-2); }
p, li { max-width: var(--measure); }

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

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

.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;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -3rem;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-1) var(--space-2);
  z-index: 10;
}
.skip-link:focus { top: var(--space-1); }

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

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-2);
}
.brand {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.brand span { color: var(--ink-muted); font-weight: 400; }

.lang-switch {
  font-size: 0.875rem;
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lang-switch a, .lang-switch [aria-current] {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--rule);
  text-decoration: none;
}
.lang-switch [aria-current] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.site-nav {
  flex-basis: 100%;
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-3);
}
.site-nav a {
  display: inline-block;
  padding-block: 0.375rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--rule); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }

/* ---------- Sections ---------- */

main { display: block; }

.section { padding-block: var(--space-5); }
/* Alternating tonal bands; no borders, no colour contrast. The dark header band
   is the first section, so the first light band stays on paper. */
main > .section:nth-of-type(odd) { background: var(--paper-alt); }

/* Report layout: section heading in a narrow left column, body on the right */
.section-head { margin-bottom: var(--space-3); }
.section-head h2 { margin-bottom: 0; }
.section-head .eyebrow { margin-bottom: var(--space-1); }
.section-head::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: var(--space-2);
  background: var(--ink);
}

.lead { font-size: 1.1875rem; color: var(--ink); }
.muted { color: var(--ink-muted); }

.eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: var(--space-1);
}

.checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}
.checklist li {
  padding-left: 1.25rem;
  position: relative;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.75em;
  width: 0.5rem; height: 1px;
  background: var(--ink);
}

/* ---------- Buttons / CTAs ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-3);
}
.button {
  display: inline-block;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.3;
}
.button:hover { background: var(--accent); color: var(--accent-ink); }
.button--primary { background: var(--accent); color: var(--accent-ink); }
.button--primary:hover { background: var(--ink); border-color: var(--ink); }

.text-link { font-weight: 500; }

/* ---------- Measured figures ---------- */

.figure-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-2);
}
.figure-pair div { margin: 0; }
.figure-pair dt {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.figure-pair dd { margin: 0; }
/* A measured figure is never set larger than its caveat: treated and control
   values share the caveat's size (--caveat-size), as on the home page. */
.figure-value {
  display: block;
  font-size: var(--caveat-size);
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.figure-pair { align-items: end; }
.figure-unit {
  font-size: 1em;
  font-weight: 400;
  margin-left: 0.25em;
}

.measure-block {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-2);
}
.measure-block + .measure-block { margin-top: var(--space-4); }
.measure-caption {
  font-size: 0.9375rem;
  color: var(--ink-muted);
  max-width: var(--measure);
}

.grid-2 {
  display: grid;
  gap: var(--space-4);
}

.caveat {
  border-left: 3px solid var(--ink);
  padding-left: var(--space-2);
  max-width: var(--measure);
  font-size: var(--caveat-size);
}

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; margin-bottom: var(--space-2); }
table {
  border-collapse: collapse;
  width: 100%;
  max-width: var(--wide);
  font-variant-numeric: tabular-nums;
}
caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: var(--space-1);
}
th, td {
  text-align: left;
  padding: 0.625rem 0.75rem 0.625rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
thead th {
  border-bottom: 2px solid var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
}
tbody th { font-weight: 400; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-4);
  font-size: 0.9375rem;
  color: var(--ink-muted);
}
.site-footer .wrap {
  display: grid;
  gap: var(--space-3);
}
.site-footer address { font-style: normal; }
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}
.site-footer a { color: var(--ink-muted); }

/* ---------- Wider screens ---------- */

@media (min-width: 48rem) {
  .section { padding-block: var(--space-6); }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .site-footer .wrap { grid-template-columns: 2fr 1fr; align-items: start; }
}

@media (min-width: 64rem) {
  .site-nav { flex-basis: auto; order: 2; }
  .lang-switch { order: 3; }
}

@media print {
  .site-nav, .lang-switch, .skip-link, .actions { display: none; }
  body { background: #fff; }
  a { color: inherit; }
}

.grid-2 + .caveat { margin-top: var(--space-4); }
.grid-2 > .measure-block + .measure-block { margin-top: 0; }

/* ---------- Photos ---------- */

.photo { margin: var(--space-3) 0; max-width: 50rem; }
.photo img { width: 100%; height: auto; background: var(--paper-alt); }
/* Documentary photos (Technology): full content width, whole frame shown */
.photo--doc { max-width: 100%; }
/* Landscape framing set in CSS only; the file is not cropped. Bottom-aligned
   (50% 100%): the sky drops out at the top, the vessel on the left and the
   measurement box on the right stay whole. */
.photo--3x2 img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 100%; }
.photo-caption {
  margin-top: var(--space-1);
  font-size: 0.9375rem;
  color: var(--ink-muted);
  text-align: left;
  max-width: var(--measure);
}

/* ---------- Definition lists (legal pages) ---------- */

.facts { display: grid; gap: var(--space-2); max-width: var(--measure); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }
@media (min-width: 48rem) {
  .facts { grid-template-columns: 14rem 1fr; gap: var(--space-2) var(--space-3); max-width: var(--wide); }
  .facts dd { max-width: var(--measure); }
}
.placeholder { background: #fff3c4; color: var(--ink); padding: 0 0.25em; }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }

/* ---------- Comparison bars (decorative; values are in the text) ---------- */

.bars {
  display: grid;
  gap: 0.375rem;
  margin: var(--space-3) 0 var(--space-4);
  max-width: 44rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.bar-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr 4.5rem;
  align-items: center;
  gap: 0.75rem;
}
.bar-track {
  display: block;
  height: 0.875rem;
  border-left: 1px solid var(--ink);
}
.bar {
  display: block;
  height: 100%;
  background: var(--ink);
}
.bar--control { background: var(--bar-control); }
/* Widths are proportional to the measured values, zero-based */
.bar--w100 { width: 100%; }
.bar--w34 { width: 34.17%; }  /* 1.36 / 3.98 */
.bar--w77 { width: 77.17%; }  /* 39.2 / 50.8 */

/* ---------- Diagram (inline SVG) ---------- */

.diagram { margin: var(--space-3) 0 0; max-width: 56rem; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram .diagram--v { max-width: 22rem; }
.diagram .diagram--h { display: none; }
@media (min-width: 40rem) {
  .diagram .diagram--h { display: block; }
  .diagram .diagram--v { display: none; }
}
.diagram figcaption { margin-top: var(--space-1); }
.d-line { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.d-box { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.d-device { fill: none; stroke: var(--accent); stroke-width: 3; }
.d-head { fill: var(--ink); }
.d-text { fill: var(--ink); font-family: var(--font-sans); font-size: 17px; }
.d-small { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 14px; }
.d-strong { font-weight: 600; }
.d-accent { fill: var(--accent); }

/* ---------- FAQ ---------- */

.faq-item {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-2);
}
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item h3 { margin-bottom: var(--space-1); }
.faq-item p { margin-bottom: 0; }

/* ---------- Topic line (all pages) ---------- */

.topic {
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* ---------- Charts (inline SVG) ---------- */

.chart { display: block; width: 100%; height: auto; }
.chart--wide { display: none; }
@media (min-width: 40rem) {
  .chart--wide { display: block; }
  .chart--narrow { display: none; }
}
.c-grid { stroke: var(--rule); stroke-width: 1; }
.c-zero { stroke: var(--ink); stroke-width: 2; }
.c-bar { fill: var(--ink); }
.c-bar--control { fill: var(--bar-control); }
.c-tick, .c-axis { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 18px; }
.c-label, .c-value { fill: var(--ink); font-family: var(--font-sans); font-size: 22px; }
.c-label-n { fill: var(--ink); font-family: var(--font-sans); font-size: 15px; }
.c-tick-n { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 13px; }

/* ---------- Shared frame: scale, dark bands, buttons ---------- */

/* Dark surfaces: text tints are taken from the paper, not grey */
:root {
  --on-dark: #f4f5f1;
  --on-dark-accent: #a9d8c1;
  --focus-on-dark: #f5a66e;
}

main h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
main h3 { font-size: 1.25rem; line-height: 1.3; }
.section-head h2 { margin-bottom: 0; }
.button { padding: 0.8125rem 1.375rem; font-size: 1.0625rem; }
.text-link { font-size: 1.0625rem; }

.page-hero,
.home-hero,
.closing {
  background: var(--ink);
  color: var(--on-dark);
}
.page-hero :focus-visible,
.home-hero :focus-visible,
.closing :focus-visible { outline-color: var(--focus-on-dark); }
.page-hero a:not(.button),
.closing a:not(.button) { color: var(--on-dark); }
.page-hero .topic,
.home-hero .topic {
  color: var(--on-dark-accent);
  border-bottom-color: var(--on-dark-accent);
  margin-bottom: var(--space-3);
}
.page-hero h1,
.home-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 650;
  margin-bottom: var(--space-3);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.button--light {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--ink);
}
.button--light:hover {
  background: var(--on-dark-accent);
  border-color: var(--on-dark-accent);
  color: var(--ink);
}
.button--outline-light {
  background: transparent;
  border-color: var(--on-dark);
  color: var(--on-dark);
}
.button--outline-light:hover { background: var(--on-dark); color: var(--ink); }

/* Sub-page header band: topic line, page name, introduction. No photo. */
.page-hero { padding-block: var(--space-5); }
.page-hero h1 { max-width: 16ch; }
.page-hero .lead {
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--on-dark);
  max-width: 40rem;
}
.page-hero p,
.page-hero address { max-width: var(--measure); }
.page-hero address { font-style: normal; font-size: 1.375rem; line-height: 1.5; }
.page-hero .actions { margin-top: var(--space-4); }
.page-hero > .wrap > :last-child { margin-bottom: 0; }

/* Closing band */
.closing { padding-block: var(--space-5); text-align: center; }
.closing__text {
  font-size: clamp(1.75rem, 4.2vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  max-width: 26ch;
  margin: 0 auto;
  text-wrap: balance;
}
.closing .actions { justify-content: center; margin-top: var(--space-4); }
.closing .actions:first-child { margin-top: 0; }

/* ---------- Home ---------- */

.home {
  /* The measured values and their caveat share one size: the result is never
     set larger than its limitation. */
  --signal-size: clamp(1.25rem, 2.4vw, 1.5rem);
}
.home-link { margin: var(--space-3) 0 0; }

/* 1. Header band: text, then the field photo, bleeding to the viewport edge */
.home-hero { display: grid; }
.home-hero__text {
  padding: var(--space-5) var(--gutter) var(--space-4);
}
.home-hero__lead {
  font-size: 1.375rem;
  line-height: 1.5;
  max-width: 36rem;
  margin-bottom: 0;
}
.home-hero .actions { margin-top: var(--space-4); }
/* Mobile: photo below the text at a fixed 4:3; the vessel stays whole. */
.home-hero__photo { display: block; }
.home-hero__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 40%;
}

/* 2–5. Light bands */
.home-band { padding-block: var(--space-5); }
.home-band--alt { background: var(--paper-alt); }

/* 2. The signal */
.signal { max-width: 100%; }
.signal-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0 0 var(--space-3);
  font-size: var(--signal-size);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.signal-values div { display: flex; gap: 0.5em; align-items: baseline; }
.signal-values dt { font-weight: 400; }
.signal-values dd { margin: 0; font-weight: 600; }
.signal .chart { margin-bottom: var(--space-3); }
.signal-caveat {
  font-size: var(--signal-size);
  line-height: 1.45;
  color: var(--ink);
  max-width: 46rem;
  padding-top: var(--space-3);
  border-top: 2px solid var(--ink);
}

/* 3. Why it matters */
.home-matters p {
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.4;
  max-width: 44rem;
  margin: 0;
  text-wrap: pretty;
}

/* 4. What it is: text, then the Technology schematic across the full width
   (the desktop variant needs the width to stay legible) */
.home-what { display: grid; gap: var(--space-4); }
.home-what__lead { font-size: 1.375rem; line-height: 1.5; }
.home-what__list { font-size: 1.125rem; gap: 0.375rem; margin-top: var(--space-3); }
.home-what__list li::before { top: 0.8em; }
.home-what__diagram { margin: 0; }

/* 5. Who we are looking for: three blocks of equal length */
.home-who { display: grid; gap: var(--space-4); }
.home-who article {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--ink);
  padding-top: var(--space-2);
}
.home-who h3 { font-size: 1.375rem; margin-bottom: var(--space-1); }
.home-who p { font-size: 1.125rem; margin-bottom: 0; }
.home-who .home-link { margin-top: auto; padding-top: var(--space-3); }

@media (min-width: 48rem) {
  .page-hero { padding-block: var(--space-6); }
  .home-band { padding-block: var(--space-6); }
  .closing { padding-block: 7rem; }
  .home-who { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}

@media (min-width: 64rem) {
  /* Text about 56 %, photo about 44 % of the content width */
  .home-hero {
    grid-template-columns:
      minmax(var(--gutter), 1fr)
      minmax(0, calc((var(--wide) - 2 * var(--gutter)) * 0.56))
      minmax(0, calc((var(--wide) - 2 * var(--gutter)) * 0.44))
      minmax(var(--gutter), 1fr);
  }
  .home-hero__text {
    grid-column: 2;
    padding: var(--space-5) var(--space-4) var(--space-5) 0;
  }
  /* The title wraps freely (text-wrap: balance) inside its column, so a wider
     system font adds a line instead of running into the photo. */
  .home-hero h1 { font-size: clamp(2.5rem, 4.4vw, 3.75rem); }
  /* The text sets the height of the band, never the photo: the photo is taken
     out of the flow and fills whatever height the text needs. */
  .home-hero { min-height: clamp(460px, 62vh, 620px); }
  .home-hero__text { align-self: center; }
  .home-hero__photo { grid-column: 3 / -1; position: relative; }
  .home-hero__photo img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    /* Vessel whole, hose connections on the left kept */
    object-position: 60% 45%;
  }
  .home-matters {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: baseline;
  }
}

/* Table caveats sit outside the scroll box so they always wrap within the viewport */
.table-note {
  max-width: var(--measure);
  margin: calc(-1 * var(--space-1)) 0 var(--space-3);
  font-size: var(--caveat-size);
  color: var(--ink);
}
caption { max-width: min(100%, calc(100vw - 2 * var(--gutter))); }
@media (max-width: 40rem) {
  th, td { padding-right: 0.5rem; }
}

/* Print: photos at most 9 cm high, whole frame, never split across pages.
   Kept last so it overrides the screen rules above. */
@media print {
  .photo img,
  .home-hero__photo img {
    position: static;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 9cm;
    aspect-ratio: auto;
    object-fit: contain;
  }
  figure, .photo, .home-hero__photo { break-inside: avoid; }
}