/* ==========================================================================
   ARIC — UFV Advanced Research & Innovation Centre
   Proposal site stylesheet

   Contents
     01  Design tokens
     02  Reset
     03  Base typography
     04  Layout primitives
     05  Site nav
     06  Hero
     07  Stat band
     08  Section headers
     09  Cards & numbered features
     10  Callouts & figures
     11  Mini timeline
     12  Interior pages: head, subnav, scope, WBS, kill points, charts
     13  Buttons
     14  Footer
     15  Utilities & motion
     16  Print
   ========================================================================== */


/* 01  Design tokens ======================================================= */

:root {
  /* Brand green — built on UFV's own palette.
     #006D56 (upper navbar) and #17382B (lower navbar / buttons) are UFV's;
     #00A055 is their brighter graphic green. The rest are interpolated to
     fill out the ramp and to meet contrast where UFV's values fall short. */
  --green-950: #0C2219;   /* deeper than UFV dark — footer */
  --green-900: #17382B;   /* UFV dark — dark sections, stat band */
  --green-800: #006D56;   /* UFV primary — links, buttons, brand */
  --green-600: #007A54;   /* hover/fill (darkened: #00A055 fails on white) */
  --green-400: #00A055;   /* UFV bright — decorative fills only */
  --green-300: #5CC98E;   /* small text on dark greens */
  --green-100: #D6E8DF;
  --green-050: #EDF5F1;

  /* Neutrals — very slightly green-neutral so they sit with the teal ramp */
  --ink:       #121915;
  --slate:     #5A6B63;
  --paper:     #FAFAF8;
  --paper-alt: #EFF1ED;
  --rule:      #DFE2DC;

  /* Data accent — large figures and chart fills only, never small text */
  --amber:       #B4721E;
  --amber-light: #E3B26B;

  /* Negative accent — exclusions, "no-go" outcomes, high severity */
  --clay:       #A4432E;
  --clay-light: #E8B4A6;

  /* Type */
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale (320px → 1240px) */
  --step--2:   clamp(0.69rem, 0.67rem + 0.11vw, 0.75rem);
  --step--1:   clamp(0.83rem, 0.80rem + 0.16vw, 0.9375rem);
  --step-0:    clamp(1rem,    0.96rem + 0.22vw, 1.125rem);
  --step-1:    clamp(1.20rem, 1.14rem + 0.31vw, 1.35rem);
  --step-2:    clamp(1.44rem, 1.35rem + 0.44vw, 1.62rem);
  --step-3:    clamp(1.73rem, 1.60rem + 0.62vw, 1.94rem);
  --step-4:    clamp(2.07rem, 1.90rem + 0.86vw, 2.33rem);
  --step-5:    clamp(2.49rem, 2.25rem + 1.18vw, 2.80rem);
  --display:   clamp(2.4rem,  1.60rem + 3.40vw, 4.25rem);

  /* Space scale */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs:  0.75rem;
  --sp-s:   1rem;
  --sp-m:   1.5rem;
  --sp-l:   2.25rem;
  --sp-xl:  3.5rem;
  --sp-2xl: clamp(3.5rem, 2.8rem + 3.5vw, 6rem);
  --sp-3xl: clamp(5rem,   4rem   + 5vw,   8rem);

  /* Measure & layout */
  --measure:   68ch;
  --wrap:      72rem;
  --wrap-wide: 84rem;
  --nav-h:     4rem;

  --radius: 4px;
  --shadow-sm: 0 1px 2px rgba(20, 26, 30, 0.06), 0 2px 8px rgba(20, 26, 30, 0.04);
  --shadow-md: 0 2px 4px rgba(20, 26, 30, 0.06), 0 8px 24px rgba(20, 26, 30, 0.07);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* 02  Reset =============================================================== */

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

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }

:where(a) { color: inherit; }

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


/* 03  Base typography ===================================================== */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Thin brand rule across the very top of every page */
  border-top: 3px solid var(--green-800);
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

a {
  color: var(--green-800);
  text-decoration-color: color-mix(in srgb, var(--green-800) 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  transition: color 0.15s var(--ease), text-decoration-color 0.15s var(--ease);
}

a:hover {
  color: var(--green-600);
  text-decoration-color: currentColor;
}

strong { font-weight: 650; }

/* Tabular figures for anything numeric */
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}


/* 04  Layout primitives =================================================== */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.wrap--wide { width: min(100% - 2.5rem, var(--wrap-wide)); }
.wrap--narrow { width: min(100% - 2.5rem, 46rem); }

.section {
  padding-block: var(--sp-3xl);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.section--tight { padding-block: var(--sp-2xl); }
.section--tint  { background: var(--paper-alt); }

.section--dark {
  background: var(--green-900);
  color: var(--paper);
}

.section--dark h2,
.section--dark h3 { color: #fff; }

.section--dark a { color: var(--green-100); }
.section--dark a:hover { color: #fff; }

.prose { max-width: var(--measure); }

.prose > * + * { margin-top: var(--sp-s); }

.prose p { font-size: var(--step-0); }

/* Two-column prose/aside split that collapses on narrow screens */
.split {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 60rem) {
  .split { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-2xl); }
  .split--even { grid-template-columns: 1fr 1fr; }
}

.hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: var(--sp-xl);
}


/* 05  Site nav ============================================================ */

.skip-link {
  position: absolute;
  left: var(--sp-s);
  top: var(--sp-s);
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--green-800);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.18s var(--ease);
}

.skip-link:focus { transform: translateY(0); color: #fff; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.site-nav[data-scrolled="true"] {
  border-bottom-color: var(--rule);
  box-shadow: var(--shadow-sm);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
  min-height: var(--nav-h);
}

.site-nav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  flex: none;
}

.site-nav__mark {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--green-800);
}

.site-nav__sub {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--slate);
  white-space: nowrap;
}

@media (max-width: 34rem) { .site-nav__sub { display: none; } }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.2vw, 1.75rem);
  /* No hamburger: the list simply scrolls horizontally when cramped */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 0.5rem;
}

.site-nav__links::-webkit-scrollbar { display: none; }

.site-nav__links a {
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  color: var(--slate);
  white-space: nowrap;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}

.site-nav__links a:hover { color: var(--ink); }

.site-nav__links a[aria-current="page"] {
  color: var(--green-800);
  font-weight: 600;
  border-bottom-color: var(--green-800);
}


/* 06  Hero ================================================================ */

/* Height is capped so the stat band always peeks above the fold — that sliver
   of dark green is what tells a first-time visitor there is more below. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(80vh, 44rem);
  min-height: min(80svh, 44rem);
  padding-block: clamp(2.5rem, 1.2rem + 5vw, 4.5rem) var(--sp-m);
  overflow: hidden;
}

/* Faint green wash behind the headline — adds depth without an image */
.hero::before {
  content: "";
  position: absolute;
  inset: -35% 35% 20% -25%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--green-600) 14%, transparent), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.hero > * { position: relative; z-index: 1; }

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xl);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
    gap: var(--sp-2xl);
  }
}

.hero__content { min-width: 0; } /* keeps long words from blowing out the grid column */

.hero__eyebrow {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--green-800);
  margin-bottom: var(--sp-m);
}

.hero__title {
  font-size: var(--display);
  line-height: 1.03;
  letter-spacing: -0.025em;
  max-width: 16ch;
}

.hero__rule {
  width: 5rem;
  height: 3px;
  background: var(--amber);
  border: 0;
  margin-block: var(--sp-l) var(--sp-m);
}

.hero__lede {
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 52ch;
  color: color-mix(in srgb, var(--ink) 88%, var(--paper));
}

/* Proposal summary panel — fills the right of the hero with the cover-sheet
   facts a real capital bid leads with, rather than with decoration. */
.spec {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--green-800);
  border-radius: var(--radius);
  padding: var(--sp-l) var(--sp-m);
  box-shadow: var(--shadow-sm);
}

.spec__title {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--green-800);
  margin-bottom: var(--sp-m);
}

.spec__list { display: grid; gap: 0; }

.spec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  padding-block: var(--sp-xs);
  border-top: 1px solid var(--rule);
}

.spec__row:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 26rem) {
  .spec__row {
    grid-template-columns: 7.5rem 1fr;
    gap: var(--sp-s);
    align-items: baseline;
  }
}

.spec__row dt {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--slate);
}

.spec__row dd {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.45;
  font-weight: 500;
}

.spec__row dd .num { font-weight: 600; }

.spec__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.spec__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-400);
  flex: none;
}

/* Scroll cue — sits at the foot of the hero, pointing at the stat band */
.hero__cue {
  margin-top: var(--sp-xl);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--slate);
  text-decoration: none;
  width: max-content;
}

.hero__cue:hover { color: var(--green-800); }

.hero__cue span[aria-hidden] {
  display: inline-block;
  animation: cue-nudge 2.4s var(--ease) infinite;
}

@keyframes cue-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* Button row — used in the hero and anywhere else a pair of CTAs appears */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
  margin-top: var(--sp-xl);
}


/* 07  Stat band =========================================================== */

.statband {
  background: var(--green-900);
  color: var(--paper);
}

.statband__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: color-mix(in srgb, var(--green-300) 24%, transparent);
  border-block: 1px solid color-mix(in srgb, var(--green-300) 24%, transparent);
}

@media (min-width: 48rem) {
  .statband__grid { grid-template-columns: repeat(3, 1fr); }
}

.stat {
  background: var(--green-900);
  padding: var(--sp-l) var(--sp-m);
}

.stat__value {
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1.05;
  color: var(--amber-light);
}

.stat__label {
  margin-top: var(--sp-2xs);
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--paper) 72%, var(--green-900));
  line-height: 1.4;
}


/* 08  Section headers ===================================================== */

.sec-head { max-width: 58ch; margin-bottom: var(--sp-xl); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--green-800);
  margin-bottom: var(--sp-s);
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* --green-400 is only 3.8:1 on --green-900, so small text uses --green-300 */
.section--dark .eyebrow { color: var(--green-300); }
.section--dark .eyebrow::after { background: color-mix(in srgb, var(--green-300) 30%, transparent); }

.sec-lede {
  margin-top: var(--sp-m);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--slate);
  max-width: 50ch;
}

.section--dark .sec-lede { color: color-mix(in srgb, var(--paper) 78%, var(--green-900)); }


/* 09  Cards & numbered features =========================================== */

.card-grid {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 56rem) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-l);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--green-600) 35%, var(--rule));
  transform: translateY(-2px);
}

.card__num {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: var(--sp-xs);
}

.card__title { margin-bottom: var(--sp-2xs); }

.card__body {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--slate);
}

/* Borderless variant for dark sections */
.section--dark .card {
  background: color-mix(in srgb, var(--green-950) 55%, transparent);
  border-color: color-mix(in srgb, var(--green-400) 22%, transparent);
}

.section--dark .card:hover {
  border-color: color-mix(in srgb, var(--green-400) 45%, transparent);
}

.section--dark .card__body { color: color-mix(in srgb, var(--paper) 74%, var(--green-900)); }
.section--dark .card__num  { color: var(--amber-light); }


/* 10  Callouts & figures ================================================== */

.callout {
  border-left: 3px solid var(--amber);
  background: var(--paper-alt);
  padding: var(--sp-m) var(--sp-l);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.callout__figure {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.15;
  color: var(--green-800);
  /* proportional figures — tabular-nums reads loose at display sizes */
}

.callout__text {
  margin-top: var(--sp-2xs);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--slate);
}

.figure { margin: 0; }

.figure img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}

.figure figcaption {
  margin-top: var(--sp-xs);
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--slate);
}

.figure figcaption cite { font-style: normal; }


/* 11  Mini timeline ======================================================= */

.timeline {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: 1fr;
  position: relative;
}

.timeline__item {
  position: relative;
  padding-left: var(--sp-l);
}

/* Vertical connector on small screens */
.timeline__item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.6rem;
  bottom: -1.5rem;
  width: 1px;
  background: color-mix(in srgb, var(--green-400) 45%, transparent);
}

.timeline__item:last-child::before { display: none; }

.timeline__dot {
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--green-600);
}

.timeline__item--gate .timeline__dot {
  background: var(--amber);
  border-color: var(--amber);
}

.timeline__when {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.timeline__what {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  margin-top: 0.1rem;
}

.timeline__note {
  font-size: var(--step--1);
  color: var(--slate);
  margin-top: var(--sp-3xs);
  line-height: 1.55;
}

@media (min-width: 56rem) {
  .timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-m);
    padding-top: var(--sp-m);
  }

  .timeline__item { padding-left: 0; padding-top: var(--sp-m); }

  /* Horizontal connector on wide screens */
  .timeline__item::before {
    left: 0;
    right: 0;
    top: 5px;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .timeline__item:last-child::before { display: block; right: 50%; }
  .timeline__item:first-child::before { left: 50%; }

  .timeline__dot { top: 0; left: calc(50% - 5.5px); }

  .timeline__item { text-align: center; }
}


/* 12  Interior pages ====================================================== */

/* --- Page head: the interior-page counterpart to the landing hero -------- */
.page-head {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.page-head::before {
  content: "";
  position: absolute;
  inset: -45% 45% 15% -25%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--green-600) 12%, transparent), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.page-head > * { position: relative; z-index: 1; }

.page-head__title {
  font-size: var(--step-5);
  letter-spacing: -0.022em;
  max-width: 18ch;
}

.page-head__lede {
  margin-top: var(--sp-m);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--slate);
  max-width: 58ch;
}

/* --- Jump-to chips ------------------------------------------------------- */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--sp-l);
}

.subnav a {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: #fff;
  color: var(--slate);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}

.subnav a:hover {
  border-color: var(--green-600);
  color: var(--green-800);
  background: var(--green-050);
}

/* --- Objective statement ------------------------------------------------- */
.statement {
  background: var(--green-900);
  color: var(--paper);
  border-left: 4px solid var(--green-400);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-l) clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

.statement__label {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--green-300);
  margin-bottom: var(--sp-s);
}

.statement__text {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.32;
  color: #fff;
  max-width: 54ch;
}

/* --- Marked lists -------------------------------------------------------- */
.list-mark {
  display: grid;
  gap: 0.45rem;
  list-style: none;
  padding: 0;
}

.list-mark li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--step--1);
  line-height: 1.5;
}

.list-mark li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-400);
}

/* Exclusions — same rhythm, negative marker */
.list-x li::before {
  content: "\00d7";
  width: auto;
  height: auto;
  top: 0;
  background: none;
  color: var(--clay);
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1.5;
}

.panel {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-l);
}

.panel--exclude { border-left: 4px solid var(--clay); }

.panel__title { margin-bottom: var(--sp-s); }

.panel__note {
  margin-top: var(--sp-m);
  padding-top: var(--sp-s);
  border-top: 1px solid var(--rule);
  font-size: var(--step--2);
  color: var(--slate);
  line-height: 1.55;
}

/* --- Work breakdown structure -------------------------------------------- */
.wbs-grid {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.wbs-pkg {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--green-800);
  border-radius: var(--radius);
  padding: var(--sp-m);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.wbs-pkg:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.wbs-pkg__id {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  color: var(--green-100);
  float: right;
  margin-left: var(--sp-xs);
}

.wbs-pkg__title {
  font-size: var(--step-1);
  margin-bottom: var(--sp-s);
  padding-right: 2rem;
}

.wbs-pkg__tasks {
  display: grid;
  gap: 0.3rem;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-s);
}

.wbs-pkg__tasks li {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0.3rem;
  font-size: var(--step--1);
  line-height: 1.45;
}

.wbs-pkg__tasks b {
  font-weight: 600;
  color: var(--green-800);
  font-variant-numeric: tabular-nums;
}

/* --- Wide figure that scrolls rather than shrinking to illegibility ------ */
.figure--scroll .figure__scroller {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.figure--scroll img {
  min-width: 54rem;
  border: 0;
  border-radius: 0;
}

.figure__hint {
  font-size: var(--step--2);
  color: var(--slate);
  margin-top: var(--sp-xs);
}

/* --- Kill points --------------------------------------------------------- */
.kp-list {
  display: grid;
  gap: var(--sp-m);
  list-style: none;
  padding: 0;
}

.kp {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-l);
}

.kp__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-s);
  flex-wrap: wrap;
  margin-bottom: var(--sp-s);
}

.kp__num {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
}

.kp__title { font-size: var(--step-2); }

.kp__body { max-width: var(--measure); }

.kp__body > * + * { margin-top: var(--sp-s); }

.kp__body p { font-size: var(--step--1); line-height: 1.6; }

.kp__decision {
  display: grid;
  gap: var(--sp-s);
  grid-template-columns: 1fr;
  margin-top: var(--sp-m);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--rule);
}

@media (min-width: 42rem) {
  .kp__decision { grid-template-columns: 1fr 1fr; gap: var(--sp-m); }
}

.kp__outcome {
  font-size: var(--step--1);
  line-height: 1.5;
}

.kp__outcome dt {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.kp__outcome dd { margin: 0; color: var(--slate); }

.kp__outcome--go dt { color: var(--green-800); }
.kp__outcome--no dt { color: var(--clay); }


/* --- Charts -------------------------------------------------------------
   Chart colours are NOT the brand tokens. --green-800 (#006D56) fails the
   categorical chroma floor (0.093, reads gray), and green-vs-amber collides
   under deuteranopia (ΔE 5.6). Validated with the dataviz palette checker
   against a #FFFFFF surface:

     single-series bars  #006D56  — contrast 6.1:1, no categorical check needed
     planned / reserve   #00A055 + #A4432E  — ΔE 10.2 deutan, all checks pass

   Re-run the validator before changing either.
   ---------------------------------------------------------------------- */

:root {
  --chart-bar:     #006D56;  /* single series */
  --chart-planned: #00A055;  /* categorical slot 1 */
  --chart-reserve: #A4432E;  /* categorical slot 2 */
  --chart-track:   #E8EBE7;  /* one step off surface */
}

/* Hero figure — sans, proportional figures (tabular looks loose at size) */
.figure-hero {
  font-family: var(--font-sans);
  font-size: clamp(2.75rem, 2rem + 3.5vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* Two-segment allocation bar: planned vs contingency ---------------------- */
.alloc__bar {
  display: flex;
  gap: 2px;              /* the surface gap does the separating, not a border */
  height: 22px;
  margin-bottom: var(--sp-m);
}

.alloc__seg {
  flex: 0 0 calc(var(--pct) * 1%);
  border-radius: 0;      /* square at the baseline */
  min-width: 2px;
}

.alloc__seg:last-child { border-radius: 0 4px 4px 0; }  /* rounded data-end */

.alloc__seg--planned { background: var(--chart-planned); }
.alloc__seg--reserve { background: var(--chart-reserve); }

.alloc__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s) var(--sp-l);
  list-style: none;
  padding: 0;
  font-size: var(--step--1);
}

.alloc__legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.alloc__legend b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex: none;
}

.swatch--planned { background: var(--chart-planned); }
.swatch--reserve { background: var(--chart-reserve); }

/* Budget table with inline bars ------------------------------------------
   The table IS the chart's table view — every value is readable as text, so
   no tooltip is needed and none is used. */
.budget-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.budget-table caption {
  text-align: left;
  font-size: var(--step--2);
  color: var(--slate);
  padding-bottom: var(--sp-s);
}

.budget-table th,
.budget-table td {
  padding: 0.7rem var(--sp-s) 0.7rem 0;
  border-bottom: 1px solid var(--rule);   /* hairline, solid, recessive */
  vertical-align: middle;
  text-align: left;
}

.budget-table thead th {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--slate);
  white-space: nowrap;
}

.budget-table tbody th {
  font-weight: 500;
  line-height: 1.4;
  padding-right: var(--sp-m);
}

.budget-table tbody tr { transition: background 0.15s var(--ease); }
.budget-table tbody tr:hover { background: var(--green-050); }

.budget-table .ta-r { text-align: right; font-variant-numeric: tabular-nums; }

.budget-table__bar { width: 38%; min-width: 7rem; }

@media (max-width: 44rem) {
  .budget-table__bar { display: none; }  /* values still carry the data */
}

.bar-track {
  display: block;
  height: 10px;                 /* thin mark, well under the 24px cap */
  background: var(--chart-track);
  border-radius: 0 2px 2px 0;
}

.bar-fill {
  display: block;
  height: 100%;
  width: calc(var(--pct) * 1%);
  background: var(--chart-bar);
  border-radius: 0 4px 4px 0;   /* rounded data-end, square at baseline */
}

.budget-table tfoot th,
.budget-table tfoot td {
  font-weight: 600;
  border-bottom: 0;
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-s);
}

.budget-table tfoot .is-total th,
.budget-table tfoot .is-total td {
  border-top: 2px solid var(--ink);
  font-size: var(--step-0);
}

.budget-table__note {
  font-size: var(--step--2);
  color: var(--slate);
  margin-top: var(--sp-s);
  line-height: 1.55;
}

/* Cost justification cards ------------------------------------------------ */
.cost-card { border-left: 4px solid var(--green-800); }

.cost-card__amount {
  font-family: var(--font-sans);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--green-800);
  line-height: 1;
}

.cost-card__title {
  font-size: var(--step-1);
  margin-top: var(--sp-2xs);
  margin-bottom: var(--sp-s);
}

.cost-card__body { font-size: var(--step--1); line-height: 1.6; }

.cost-card__source {
  display: block;
  margin-top: var(--sp-m);
  padding-top: var(--sp-s);
  border-top: 1px solid var(--rule);
  font-size: var(--step--2);
  color: var(--slate);
  line-height: 1.5;
}

/* Metric definitions ------------------------------------------------------ */
.metric-grid {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.metric {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-m);
}

.metric__abbr {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--green-800);
}

.metric__name {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  margin-top: 0.1rem;
}

.metric__formula {
  display: inline-block;
  margin-top: var(--sp-xs);
  padding: 0.25rem 0.6rem;
  background: var(--green-050);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--green-800);
  font-variant-numeric: tabular-nums;
}

.metric__reads {
  margin-top: var(--sp-s);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--slate);
}

/* Numbered process steps -------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--sp-m);
  counter-reset: step;
  list-style: none;
  padding: 0;
}

@media (min-width: 52rem) {
  .steps { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-top: var(--sp-m);
  border-top: 2px solid var(--green-100);
  font-size: var(--step--1);
  line-height: 1.55;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: -0.9rem;
  left: 0;
  width: 1.65rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-800);
  color: #fff;
  font-size: var(--step--2);
  font-weight: 700;
}

.steps b {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  margin-bottom: var(--sp-2xs);
  color: var(--ink);
}


/* --- SWOT ---------------------------------------------------------------- */
.swot {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: 1fr;
}

@media (min-width: 50rem) {
  .swot { grid-template-columns: 1fr 1fr; }
}

.swot__q {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-l);
  background: #fff;
}

.swot__q--pos { border-top: 3px solid var(--green-800); }
.swot__q--neg { border-top: 3px solid var(--clay); }

.swot__axis {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 0.15rem;
}

.swot__q h3 { margin-bottom: var(--sp-s); }

.list-mark--neg li::before { background: var(--clay); }


/* --- Risk matrix ---------------------------------------------------------
   Severity x probability. Cell tint is an ORDERED ramp of a single hue
   (--clay at 3 opacities), so it is monotonic by construction and safe for
   every form of CVD. Each cell also carries its level as text, so the tint
   is never the only signal. The risk cards below are the table view.
   ---------------------------------------------------------------------- */
.matrix {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 2px;                      /* surface gap, not borders */
  align-items: stretch;
}

.matrix__corner { background: transparent; }

.matrix__colhead,
.matrix__rowhead {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--slate);
  display: flex;
  align-items: center;
  padding: var(--sp-xs) var(--sp-2xs);
}

.matrix__colhead { justify-content: center; text-align: center; }

.matrix__rowhead {
  writing-mode: horizontal-tb;
  max-width: 6.5rem;
  line-height: 1.3;
}

.matrix__cell {
  padding: var(--sp-m);
  border-radius: var(--radius);
  min-height: 8.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.matrix__cell--moderate { background: color-mix(in srgb, var(--clay) 8%,  #fff); }
.matrix__cell--elevated { background: color-mix(in srgb, var(--clay) 17%, #fff); }
.matrix__cell--critical { background: color-mix(in srgb, var(--clay) 30%, #fff); }

.matrix__level {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--clay);
}

.risk-chip {
  display: block;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  font-size: var(--step--1);
  line-height: 1.35;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.risk-chip:hover {
  border-color: var(--green-600);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}

.risk-chip b {
  display: block;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  color: var(--clay);
  font-weight: 700;
}

@media (max-width: 40rem) {
  .matrix { grid-template-columns: 1fr; }
  .matrix__corner { display: none; }
  .matrix__colhead { justify-content: flex-start; text-align: left; }
  .matrix__rowhead { max-width: none; }
  .matrix__cell { min-height: 0; }
}


/* --- Risk register cards ------------------------------------------------- */
.risk-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--clay);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-l);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

.risk-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-s);
  flex-wrap: wrap;
  margin-bottom: var(--sp-s);
}

.risk-card__id {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--clay);
}

.risk-card__title { font-size: var(--step-2); }

.risk-card__mitigation {
  font-size: var(--step--1);
  line-height: 1.6;
  max-width: var(--measure);
}

.risk-card__mitigation strong { color: var(--green-800); }

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin-bottom: var(--sp-m);
}

.badge {
  font-size: var(--step--2);
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 100px;
  background: var(--paper-alt);
  color: var(--slate);
  white-space: nowrap;
}

.badge--high { background: color-mix(in srgb, var(--clay) 15%, #fff); color: var(--clay); }
.badge--med  { background: color-mix(in srgb, var(--amber) 16%, #fff); color: #8A5615; }


/* --- Inline citation marker ---------------------------------------------- */
.cite-ref {
  font-size: 0.74em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  color: var(--green-800);
  padding-inline: 0.12em;
  white-space: nowrap;
}

.cite-ref:hover { text-decoration: underline; color: var(--green-600); }

.section--dark .cite-ref { color: var(--green-300); }


/* --- Team members -------------------------------------------------------- */
.member__initials {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--green-800);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-s);
}

.member__name { font-size: var(--step-2); }

.member__role {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--green-800);
  margin-top: 0.15rem;
  margin-bottom: var(--sp-s);
}

.member__body {
  font-size: var(--step--1);
  line-height: 1.6;
}


/* --- Generic data table (deliverables, etc.) ----------------------------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.data-table th,
.data-table td {
  padding: 0.7rem var(--sp-s) 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--slate);
  white-space: nowrap;
}

.data-table tbody th {
  font-weight: 500;
  line-height: 1.4;
  padding-right: var(--sp-m);
}

.data-table tbody tr { transition: background 0.15s var(--ease); }
.data-table tbody tr:hover { background: var(--green-050); }

.data-table td:last-child { white-space: nowrap; }


/* --- References ---------------------------------------------------------- */
.refs {
  display: grid;
  gap: var(--sp-m);
  list-style: none;
  padding: 0;
  counter-reset: none;
}

.refs li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--sp-s);
  font-size: var(--step--1);
  line-height: 1.55;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
  border-radius: 2px;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* Landing on a reference from an inline citation highlights it */
.refs li:target {
  background: var(--green-050);
  box-shadow: 0 0 0 0.75rem var(--green-050);
}

.ref__num {
  font-weight: 700;
  color: var(--green-800);
  font-variant-numeric: tabular-nums;
}

.ref__body cite { font-style: italic; }

.ref__url {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--step--2);
  color: var(--slate);
  word-break: break-word;
}

.ref__url:hover { color: var(--green-800); }


/* --- Stakeholders & departments ------------------------------------------ */
.stake-card__role {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--green-800);
  margin-bottom: 0.2rem;
}

.stake-card__name {
  font-size: var(--step-1);
  margin-bottom: var(--sp-2xs);
}

.stake-card__body {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--slate);
}


/* 13  Buttons ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.45rem;
  font-size: var(--step--1);
  font-weight: 550;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease), transform 0.18s var(--ease);
}

.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: var(--green-800);
  color: #fff;
}

.btn--primary:hover { background: var(--green-600); color: #fff; }

.btn--ghost {
  border-color: var(--rule);
  color: var(--ink);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--green-600);
  color: var(--green-800);
  background: var(--green-050);
}

.btn__arrow { transition: transform 0.18s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Standalone inline "more" link */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  font-weight: 550;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  padding-bottom: 2px;
}

.link-more:hover { border-bottom-color: currentColor; }


/* 14  Footer ============================================================== */

.site-footer {
  background: var(--green-950);
  color: color-mix(in srgb, var(--paper) 72%, var(--green-950));
  padding-block: var(--sp-2xl) var(--sp-xl);
  font-size: var(--step--1);
}

.site-footer a {
  color: color-mix(in srgb, var(--paper) 86%, var(--green-950));
  text-decoration: none;
}

.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer__top {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: 1fr;
  padding-bottom: var(--sp-l);
}

@media (min-width: 52rem) {
  .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-2xl); }
}

.site-footer__mark {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 700;
  color: #fff;
}

.site-footer__tagline { margin-top: var(--sp-2xs); max-width: 34ch; }

.site-footer h2 {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--green-300);
  margin-bottom: var(--sp-s);
}

.site-footer ul { display: grid; gap: var(--sp-2xs); }

.site-footer__bottom {
  border-top: 1px solid color-mix(in srgb, var(--green-400) 22%, transparent);
  padding-top: var(--sp-m);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-m);
  justify-content: space-between;
  font-size: var(--step--2);
  line-height: 1.6;
}

.site-footer__disclaimer { max-width: 62ch; }


/* 15  Utilities & motion ================================================== */

.mt-xl { margin-top: var(--sp-xl); }
.mb-m  { margin-bottom: var(--sp-m); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The site's single motion primitive. JS adds .is-visible on intersection. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children */
.reveal[data-delay="1"] { transition-delay: 0.07s; }
.reveal[data-delay="2"] { transition-delay: 0.14s; }
.reveal[data-delay="3"] { transition-delay: 0.21s; }

/* No JS? Never leave content invisible. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
}


/* 16  Print =============================================================== */

@media print {
  :root { --paper: #fff; --paper-alt: #fff; }

  body { border-top: 0; font-size: 10.5pt; background: #fff; }

  .site-nav, .skip-link, .actions, .btn, .link-more,
  .subnav, .hero__cue, .figure__hint { display: none !important; }

  .section, .hero, .page-head { padding-block: 1.2rem; break-inside: avoid; }

  .section--dark, .statband, .site-footer, .statement {
    background: #fff !important;
    color: #000 !important;
  }

  .section--dark h2, .section--dark h3,
  .site-footer__mark, .stat__value,
  .statement__text, .statement__label { color: #000 !important; }

  .statement { border-left: 3px solid #666; }

  .stat__label, .card__body, .site-footer { color: #333 !important; }

  .page-head::before { display: none; }

  .kp, .wbs-pkg, .panel { break-inside: avoid; border-color: #ccc; }

  /* Wide diagrams must print whole rather than clipped at the scroll edge */
  .figure--scroll .figure__scroller { overflow: visible; border-color: #ccc; }
  .figure--scroll img { min-width: 0; width: 100%; }

  .statband__grid { background: none; border-color: #ccc; }
  .stat { background: #fff; border: 1px solid #ccc; }

  .card, .figure img { break-inside: avoid; border-color: #ccc; }

  .hero::before { display: none; }

  /* Expose destinations for anything still linked in body copy */
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }
}