/* Northern Mile dashboard. Highway signage: paper, ink, one green sign.
   The spread rail is the sign on the home page. */

:root {
  /* Highway signage, approved 2026-10-08. One green sign per page, everything
     else quiet. Light only. Every text token clears 4.5:1 on paper. */
  --paper:   #F6F7F5;
  --raise:   #FFFFFF;
  --sink:    #EEF1EE;
  --ink:     #1F2421;
  --ink-2:   #3A413D;
  --muted:   #5B635E;
  --line:    #DADFDB;
  --line-2:  #E3E7E4;
  --field:   #C5CCC7;

  --signal:  #0E5A3B;   /* sign green */
  --signal-2:#0A4430;
  --on-sign: #D9EBE1;   /* quiet text on green */
  --wash:    #E8F1EC;
  --yellow:  #F2B91E;   /* fills only: slowest crossing, focus halo */
  --amber:   #8C6200;   /* yellow's text-safe partner */

  --up:      #B3261E;   /* cost rising */
  --up-wash: #FBECEA;
  --amber-wash:#FBF1D6;
  --down:    #0E5A3B;   /* cost falling */
  --down-wash:#E8F1EC;
  --heavy:   #C2410C;

  --focus:   #1F2421;

  --display: 'Overpass', ui-sans-serif, system-ui, sans-serif;
  --body:    'Overpass', ui-sans-serif, system-ui, sans-serif;
  --data:    'Overpass', ui-sans-serif, system-ui, sans-serif;
  --serif:   'Source Serif 4', Georgia, serif;

  --maxw: 1040px;
  --pad:  clamp(18px, 5vw, 44px);
  --v:    clamp(44px, 7vw, 80px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
* { font-variant-numeric: tabular-nums; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--raise); padding: 10px 14px; border: 2px solid var(--focus); }

/* ── Masthead ───────────────────────────────────────────────────────── */

.hd { border-bottom: 1px solid var(--line); background: var(--paper); }
.hd .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mark .logo { width: 32px; height: 32px; display: block; flex: none; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--sink); }
.seg-opt { padding: 5px 15px; border-radius: 999px; font-family: var(--body); font-size: .8125rem; font-weight: 600; line-height: 1.4; color: var(--muted); text-decoration: none; }
.seg-opt.is-on { background: var(--signal); color: #fff; }
.seg-opt:not(.is-on):hover { color: var(--ink); background: var(--line-2); }
.lane { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lane select { width: 100%; }
.links-list .why { display: block; font-size: .8125rem; color: var(--muted); margin-top: 3px; font-weight: 400; }
.mark .dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--signal);
  position: relative;
}
.mark .dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--signal); opacity: .35;
}
.mark b { font-family: var(--display); font-weight: 600; font-size: 1.125rem; letter-spacing: -.02em; }
.mark span { font-family: var(--data); font-size: .75rem; color: var(--muted); display: none; }
@media (min-width: 680px) { .mark span { display: inline; } }

.nav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
       background: var(--paper); position: sticky; top: 0; z-index: 20; }
.nav .wrap { display: flex; align-items: center; gap: 2px; }

/* Five groups, not thirteen peers. Each group is a link with a chevron; the group's
   children live in the strip below, so nothing needs a hover to be discoverable. */
.nav .ng { display: flex; align-items: center; gap: 6px; padding: 14px 15px 13px;
  font-family: var(--body); font-size: .875rem; font-weight: 500; line-height: 1;
  color: var(--ink-2); text-decoration: none; white-space: nowrap; position: relative; }
.nav .ng:hover { color: var(--ink); background: var(--line-2); }
.nav .ng.on { color: var(--signal); font-weight: 600; }
.nav .ng.on::after { content: ""; position: absolute; left: 15px; right: 15px;
  bottom: -1px; height: 2px; background: var(--signal); }
.nav .chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
  opacity: .5; }

/* The strip. One per group is emitted, the current one visible. Tinted so it reads as
   subordinate to the group row without needing a border. */
.strip { background: var(--wash); border-bottom: 1px solid var(--line); }
.strip[hidden] { display: none; }
.strip .wrap { display: flex; align-items: center; gap: 7px; padding: 9px var(--pad); }
.strip a { font-family: var(--body); font-size: .8125rem; font-weight: 500; line-height: 1;
  color: var(--signal); text-decoration: none; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.72); }
.strip a:hover { background: #fff; }
.strip a.on { background: var(--signal); color: #fff; }
.strip .hint { margin-left: auto; font-family: var(--data); font-size: .6875rem;
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #5f7d6c; }

/* The drawer button. Hidden on desktop, where the groups are already visible. */
.navbtn { display: none; width: 42px; height: 38px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--raise); cursor: pointer; align-items: center;
  justify-content: center; }
.navbtn .bars, .navbtn .bars::before, .navbtn .bars::after {
  display: block; width: 16px; height: 1.6px; background: var(--ink); content: ""; }
.navbtn .bars { position: relative; }
.navbtn .bars::before { position: absolute; top: -5px; }
.navbtn .bars::after { position: absolute; top: 5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 860px) {
  /* Below this the group row cannot hold five groups plus the controls, and a hover
     menu does not exist on touch. The drawer replaces it entirely. */
  .nav { display: none; }
  .strip { display: none; }
  .navbtn { display: inline-flex; }
}
/* ── Type ───────────────────────────────────────────────────────────── */

main { padding-bottom: var(--v); }

.eyebrow {
  font-family: var(--data); font-size: .8125rem; letter-spacing: .02em;
  color: var(--signal); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--signal); }

h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 5.5vw, 3rem); line-height: 1.08; letter-spacing: -.03em;
  margin: 0 0 16px; max-width: 18ch;
}
.stand { margin: 0 0 var(--v); font-size: 1.1875rem; color: var(--ink-2); max-width: 56ch; }

h2 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 4px; }
h3 { font-family: var(--display); font-weight: 500; font-size: 1.0625rem; letter-spacing: -.01em; margin: 0 0 4px; }

.sec { margin-top: var(--v); }
.sec > .lead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.sec > .lead p { margin: 0; color: var(--muted); font-size: .9375rem; }

.note { color: var(--muted); font-size: .9375rem; max-width: 66ch; margin: 16px 0 0; }
.note a { color: var(--signal); text-underline-offset: 2px; }
.reading p { margin: 0 0 14px; max-width: 62ch; }

/* ── Hero figure ────────────────────────────────────────────────────── */

/* Two peer national figures. The homepage promised both countries in its H1 and
   then showed only the Canadian index, unlabelled — which read as a Canada-only
   site. Each country gets its own figure, change and source line. */
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin: 0 0 18px; }
.figures .fg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.figures .cn { font-family: var(--data); font-size: .8125rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.figures .fsrc { font-family: var(--data); font-size: .8125rem; color: var(--muted);
  line-height: 1.35; }
@media (max-width: 640px) {
  /* Stacked: two number blocks side by side do not fit a phone. */
  .figures { grid-template-columns: 1fr; gap: 14px; }
}
.hero { padding-top: var(--v); }

.figure { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 10px; }
.figure .n {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(3rem, 10vw, 4.5rem); line-height: .9; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.figure .u { font-family: var(--data); font-size: 1rem; color: var(--muted); }
.figure .d {
  font-family: var(--data); font-size: .9375rem; padding: 5px 10px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 5px;
}
.figure .d.up { color: var(--up); background: var(--up-wash); }
.figure .d.down { color: var(--down); background: var(--down-wash); }
.figure .d.flat { color: var(--muted); background: var(--sink); }
.figure .d.up::before { content: "▲"; font-size: .7em; }
.figure .d.down::before { content: "▼"; font-size: .7em; }

.meta { font-family: var(--data); font-size: .8125rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 30px; }
.meta b { color: var(--ink-2); font-weight: 500; }

/* ── Signature: spread rail ─────────────────────────────────────────── */

.rail {
  background: var(--raise); border: 1px solid var(--line); border-radius: 10px;
  padding: 26px 26px 20px; margin: 0;
  box-shadow: 0 1px 2px rgba(26,26,23,.03), 0 8px 24px rgba(26,26,23,.04);
}
.rail .cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.rail .cap h3 { margin: 0; }
.rail .cap .sp { font-family: var(--data); font-size: .8125rem; color: var(--muted); }
.rail .cap .sp b { color: var(--signal); font-weight: 600; }

.rail .row { display: grid; grid-template-columns: 2.75rem 1fr 4.5rem; align-items: center; gap: 14px; padding: 7px 0; text-decoration: none; }
.rail .row:hover .code { color: var(--ink); }
.rail .row .code { font-family: var(--data); font-size: .8125rem; color: var(--muted); transition: color .15s; }
.rail .row .track { position: relative; height: 12px; }
.rail .row .track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; border-radius: 2px; background: var(--line); }
.rail .row .fill {
  position: absolute; top: 50%; left: 0; height: 2px; border-radius: 2px;
  background: var(--signal); transform: translateY(-50%);
  transform-origin: left center;
}
.rail .row .dot {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  background: var(--raise); border: 2px solid var(--signal);
  transform: translate(-50%, -50%);
}
.rail .row .val { font-family: var(--data); font-size: .9375rem; text-align: right; }
.rail .row .val.up { color: var(--up); }
.rail .row .val.down { color: var(--down); }

.rail .mean-wrap { position: relative; height: 0; }
.rail .mean {
  position: absolute; top: -8px; width: 2px; background: var(--amber);
  transform: translateX(-1px);
}
.rail .mean .lab {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-family: var(--data); font-size: .75rem; color: var(--amber); white-space: nowrap;
}

/* Draw-on-load: rows fade up in sequence, tracks fill left-to-right. */
@media (prefers-reduced-motion: no-preference) {
  .rail .row { opacity: 0; transform: translateY(6px); animation: rise .5s var(--ease) forwards; }
  .rail .row:nth-child(1){animation-delay:.05s}
  .rail .row:nth-child(2){animation-delay:.10s}
  .rail .row:nth-child(3){animation-delay:.15s}
  .rail .row:nth-child(4){animation-delay:.20s}
  .rail .row:nth-child(5){animation-delay:.25s}
  .rail .row:nth-child(6){animation-delay:.30s}
  .rail .row:nth-child(7){animation-delay:.35s}
  .rail .row:nth-child(8){animation-delay:.40s}
  .rail .row:nth-child(9){animation-delay:.45s}
  .rail .row:nth-child(10){animation-delay:.50s}
  .rail .row .fill { transform: translateY(-50%) scaleX(0); animation: grow .6s var(--ease) forwards; animation-delay: inherit; }
  .rail .row .dot { opacity: 0; animation: pop .3s var(--ease) forwards; }
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@keyframes grow { to { transform: translateY(-50%) scaleX(1); } }
@keyframes pop { to { opacity: 1; } }

/* ── Citation ───────────────────────────────────────────────────────── */

.cite { margin-top: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--wash); padding: 20px 22px; }
.cite .cl { font-family: var(--data); font-size: .8125rem; color: var(--signal); margin-bottom: 10px; }
.cite q { display: block; quotes: none; max-width: 64ch; font-family: var(--data); font-size: .875rem; line-height: 1.7; color: var(--ink-2); }
.cite .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.btn { font: inherit; font-family: var(--data); font-size: .875rem; padding: 9px 16px; border-radius: 7px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--raise); color: var(--ink); transition: border-color .15s, transform .1s; }
.btn:hover { border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn--brand { background: var(--signal); border-color: var(--signal); color: var(--raise); }
.btn--brand:hover { background: var(--signal-2); border-color: var(--signal-2); }

/* ── Stat strip ─────────────────────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 26px; }
.stat { background: var(--raise); padding: 16px 18px; text-decoration: none; transition: background .15s; }
.stat:hover { background: var(--sink); }
.stat .l { font-family: var(--data); font-size: .75rem; color: var(--muted); }
.stat .v { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; margin-top: 4px; }
.stat .v.up { color: var(--up); } .stat .v.down { color: var(--down); }
.stat .s { font-family: var(--data); font-size: .75rem; color: var(--muted); margin-top: 2px; }

/* ── Rows / lists ───────────────────────────────────────────────────── */

.two { display: grid; gap: var(--v); }
@media (min-width: 820px) { .two { grid-template-columns: 1fr 1fr; gap: 44px; } }

.rows .r { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; }
.rows .r:last-child { border-bottom: 0; }
.rows .r:hover { background: var(--sink); }
.rows .r .k { font-size: .9375rem; }
.rows .r .k small { display: block; font-family: var(--data); color: var(--muted); font-size: .75rem; }
.rows .r .v { font-family: var(--data); font-size: .9375rem; white-space: nowrap; }
.rows .r .v.up { color: var(--up); } .rows .r .v.down { color: var(--down); }

.links-list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; font-size: .9375rem; }
.links-list a:last-child { border-bottom: 0; }
.links-list a:hover { color: var(--signal); }
.links-list .src { font-family: var(--data); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-right: 10px; }

.empty { padding: 20px 0; color: var(--muted); font-size: .9375rem; }
.empty b { display: block; font-family: var(--display); color: var(--ink); font-weight: 500; margin-bottom: 3px; }

/* ── Subscribe ──────────────────────────────────────────────────────── */

.sub { margin-top: var(--v); padding: 30px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--wash), var(--raise)); }
.sub .e { font-family: var(--data); font-size: .8125rem; color: var(--signal); margin-bottom: 8px; }
.sub h2 { margin-bottom: 8px; }
.sub p { margin: 0 0 18px; color: var(--ink-2); max-width: 54ch; }
.sub-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--data); font-size: .9375rem; color: var(--raise); background: var(--signal); padding: 12px 22px; border-radius: 8px; text-decoration: none; transition: background .15s; }
.sub-btn:hover { background: var(--signal-2); }
.sub .fine { font-family: var(--data); font-size: .75rem; color: var(--muted); margin-top: 10px; }

/* ── Footer ─────────────────────────────────────────────────────────── */

.ft { margin-top: var(--v); padding: 32px 0 40px; border-top: 1px solid var(--line); }
.ft .wrap { display: grid; gap: 16px; }
.ft .brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  min-width: 0; }  /* must be shrinkable: it shares the row with the toggle */
.ft .brand .name { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; color: var(--ink); text-decoration: none; }
.ft .brand .name:hover { color: var(--signal); }
.ft .brand .tag { font-family: var(--data); font-size: .8125rem; color: var(--muted); }
.ft .flinks { display: flex; gap: 8px 22px; flex-wrap: wrap; }
.ft .flinks a { color: var(--ink-2); text-decoration: none; font-size: .9375rem; }
.ft .flinks a:hover { color: var(--signal); }
.ft .bottom { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-family: var(--data); font-size: .75rem; color: var(--muted); }
.ft .bottom a { color: var(--muted); text-decoration: none; }
.ft .bottom a:hover { color: var(--signal); }
.ft .bottom > * + *::before { content: "\00B7"; margin-right: 8px; color: var(--muted); }

/* ── Data visuals (server-rendered SVG) ───────────────────────────── */
.viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 18px 0; }
.viz-card { background: var(--raise); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.viz-title { font-family: var(--display); font-weight: 600; font-size: 1rem; margin: 0 0 2px; color: var(--ink); }
.viz-sub { font-family: var(--data); font-size: .75rem; color: var(--muted); margin: 0 0 14px; }
.viz { width: 100%; height: auto; display: block; }
.viz.viz-donut { max-width: 170px; margin: 0 auto; }
.viz-bar.down { fill: var(--down); }
.viz-bar.up { fill: var(--up); }
.viz-col { fill: var(--amber); }
.viz-ref { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 4 3; }
.viz-axis { stroke: var(--line); stroke-width: 1; }
.viz-lab { fill: var(--muted); font-family: var(--data); font-size: 11px; }
.viz-val { fill: var(--ink); font-family: var(--data); font-size: 12px; }
.viz-reflab { fill: var(--amber); font-family: var(--data); font-size: 10px; }
.viz-donut-a { stroke: var(--amber); }
.viz-donut-b { stroke: var(--focus); }
.viz-donut-num { fill: var(--ink); font-family: var(--display); font-weight: 600; font-size: 28px; }
.viz-donut-lab { fill: var(--muted); font-family: var(--data); font-size: 11px; }
.viz-line { stroke: var(--muted); stroke-width: 1.2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.viz-ma { stroke: var(--signal); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.viz-gridline { stroke: var(--line-2); stroke-width: 1; }
.viz-dot { fill: var(--signal); }
.viz-track { fill: var(--sink); }
.viz-marker { stroke: var(--ink); stroke-width: 1.5; }
.viz-marker-dot { fill: var(--signal); }
.viz-marker-ring { fill: none; stroke: var(--ink); stroke-width: 2; }
.viz-seg { stroke: var(--line); stroke-width: 1; }
.viz-seg-noise { fill: var(--down); }
.viz-seg-notable { fill: var(--amber); }
.viz-seg-material { fill: #C07A1A; }
.viz-seg-alert { fill: var(--up); }
.viz-hist { fill: var(--sink); }
.viz-hist.active { fill: var(--signal); }
.fx-num { font-family: var(--data); font-size: 1.5rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Diesel chart (home + fuel only) ─────────────────────────────────── */
.chart-card { background: var(--raise); border: 1px solid var(--line); border-radius: 12px; padding: 22px 22px 14px; margin-top: 24px; box-shadow: 0 1px 2px rgba(26,26,23,.03), 0 8px 24px rgba(26,26,23,.04); }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.chart-head h3 { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; margin: 0; }
.chart-head .sub { font-family: var(--data); font-size: .8125rem; color: var(--muted); }
.chart-svg { width: 100%; height: 320px; display: block; touch-action: pan-y; cursor: grab; }
.chart-svg.grabbing { cursor: grabbing; }
.chart-svg .axis text { font-family: var(--data); font-size: 11px; fill: var(--muted); }
.chart-svg .axis path, .chart-svg .axis line { stroke: var(--line); }
.chart-svg .grid line { stroke: var(--line-2); }
.chart-svg .grid path { stroke: none; }
.chart-svg .line { fill: none; stroke: var(--signal); stroke-width: 1.75; }
.chart-svg .area { fill: var(--wash); opacity: .6; }
.chart-svg .hover-dot { fill: var(--signal); stroke: var(--raise); stroke-width: 2; }
.chart-svg .hover-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-card .tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); font-family: var(--data); font-size: 12px; padding: 7px 10px; border-radius: 6px; opacity: 0; transition: opacity .1s; white-space: nowrap; z-index: 5; }
.chart-card .tip .v { font-weight: 600; font-size: 13px; }
.chart-card .tip .d { color: var(--line); font-size: 11px; }
.chart-card .hint { font-family: var(--data); font-size: .75rem; color: var(--ink-2); margin: 10px 2px 0; text-align: left; }
.chart-card .foot-note { font-family: var(--data); font-size: .7rem; color: var(--muted); margin-top: 8px; }
.chart-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 14px 0 4px; }
.cstat { background: var(--raise); padding: 10px 14px; text-align: center; }
.cstat .l { display: block; font-family: var(--data); font-size: .6875rem; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.cstat b { display: block; font-family: var(--data); font-size: 1.0625rem; font-weight: 500; color: var(--ink); margin-top: 2px; }
.cstat .s { display: block; font-family: var(--data); font-size: .6875rem; color: var(--muted); margin-top: 1px; min-height: 1em; }
.story { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.story .sl { font-family: var(--data); font-size: .75rem; color: var(--muted); margin-right: 4px; }
.story button { font: inherit; font-family: var(--data); font-size: .75rem; letter-spacing: .01em; color: var(--muted); background: none; border: 1px dashed var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer; transition: all .12s; }
.story button:hover { border-color: var(--muted); color: var(--ink); border-style: solid; }
.story button.on { background: var(--wash); border-color: var(--signal); color: var(--signal); border-style: solid; }
.ann-line { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; }
.ann-dot { stroke: var(--raise); stroke-width: 1.5; }
.ann-low .ann-dot { fill: var(--down); }
.ann-high .ann-dot { fill: var(--up); }
.ann-today .ann-dot { fill: var(--signal); }
.ann-label { font-family: var(--data); font-size: 10px; fill: var(--muted); }
@media (prefers-reduced-motion: reduce) { .chart-svg .line { transition: none; } }

/* ── Overflow & alignment safety ─────────────────────────────────────
   Long unbreakable strings (URLs in citations, external links, incident
   sources) must wrap inside their container rather than push past its
   padding. And flex/grid children default to min-width:auto, which lets a
   wide child stretch the parent past the viewport — reset it so tracks and
   values stay inside their cells. */

/* Long strings wrap instead of overflowing. */
.cite q,
.cite .cl,
.links-list a,
.rows .r .k,
.rows .r .k small,
.inc .h,
.inc .m,
.inc-detail,
.foot-note,
.meta,
.mark span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* The citation URL specifically: keep it on the line but let it break. */
.cite q { hyphens: none; }

/* Flex/grid children can shrink below content width (min-width:auto trap). */
.two > *,
.rail .row,
.rail .row .track,
.rows .r,
.stat,
.calc > *,
.chart-card {
  min-width: 0;
}

/* Values in rows should never wrap awkwardly or overflow their cell; they
   stay right-aligned and shrink the label instead. */
.rows .r { gap: 12px; }
.rows .r .v { flex-shrink: 0; }

/* Rail value column holds its width; the track flexes. */
.rail .row .val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Nothing horizontally overflows the page. */
html, body { overflow-x: hidden; }
main.wrap, .hd .wrap, .nav .wrap, .ft .wrap { max-width: min(var(--maxw), 100%); }

/* ── Road incidents page ─────────────────────────────────────────────
   The incidents template ports markup that needs these styles. Without
   them the map has no height, the list has no structure, and the detail
   panel is unstyled. */

/* Map container — needs an explicit height or Leaflet renders 0px tall. */
.incmap {
  height: 380px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 8px 0 20px;
  overflow: hidden;
  background: var(--sink);
}

/* The scrollable list of incidents. */
.panel-list {
  border: 1px solid var(--line);
  border-radius: 10px;
  max-height: 520px;
  overflow-y: auto;
  background: var(--raise);
}

/* Each incident row. */
.inc {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  transition: background .12s;
}
.inc:last-child { border-bottom: 0; }
.inc:hover, .inc:focus-visible { background: var(--sink); outline: none; }
.inc .h {
  font-size: .9375rem; font-weight: 500; color: var(--ink);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 3px;
}
.inc .m {
  font-family: var(--data); font-size: .8125rem; color: var(--muted); line-height: 1.5;
}
.inc .inc-time {
  font-family: var(--data); font-size: .8125rem; font-weight: 600; color: var(--ink);
  letter-spacing: .01em; margin: 0 0 4px;
}
.inc .inc-time .t-lab {
  font-weight: 400; font-size: .6875rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
}

/* Severity pill. */
.pill {
  flex-shrink: 0;
  font-family: var(--data); font-size: .6875rem; letter-spacing: .02em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 100px;
  background: var(--down-wash); color: var(--down);
}
.pill.closed { background: var(--up-wash); color: var(--up); }
.pill.heavy { background: var(--amber-wash); color: var(--amber); }

/* Active row highlight (synced with the open popup). */
.inc.active { background: var(--wash); box-shadow: inset 3px 0 0 var(--signal); }

/* Incident detail popup on the map marker. */
.inc-popup .leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: 0 6px 24px rgba(26,26,23,.16); }
.inc-popup .leaflet-popup-content { margin: 14px 16px; font-family: var(--body); }
.ipop-h { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--ink); margin-bottom: 8px; letter-spacing: -.01em; }
.ipop-closed { display: inline-block; font-family: var(--data); font-size: .7rem; font-weight: 600; color: var(--up); background: var(--up-wash); padding: 3px 9px; border-radius: 100px; margin-bottom: 8px; }
.ipop-sev { margin-bottom: 10px; }
.ipop-what { font-size: .875rem; line-height: 1.5; color: var(--ink-2); margin-bottom: 12px; overflow-wrap: anywhere; }
.ipop-rows { border-top: 1px solid var(--line-2); padding-top: 10px; }
.ipop-rows div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 3px 0; font-size: .8125rem; color: var(--ink-2); }
.ipop-rows span { font-family: var(--data); font-size: .6875rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.ipop-src { display: inline-block; margin-top: 12px; font-family: var(--data); font-size: .8125rem; color: var(--signal); font-weight: 500; text-decoration: none; }
.ipop-src:hover { text-decoration: underline; }

/* Scheduled roadwork rows: road + dates on a header line, description below.
   Reads cleanly on mobile instead of cramming everything into one flex row. */
.rw { padding: 14px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background .12s; }
.rw:last-child { border-bottom: 0; }
.rw:hover, .rw:focus-visible { background: var(--sink); outline: none; }
.rw.active { background: var(--wash); box-shadow: inset 3px 0 0 var(--signal); }
.rw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.rw-road { font-family: var(--data); font-size: .8125rem; font-weight: 500; color: var(--ink); letter-spacing: .02em; }
.rw-when { font-family: var(--data); font-size: .8125rem; font-weight: 600; color: var(--ink); flex-shrink: 0; letter-spacing: .02em; }
.rw-what { font-size: .9375rem; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .lane { grid-template-columns: 1fr; }
  .inp input, .inp select { min-height: 44px; }
  .calc .out { margin-top: 20px; }
  /* The tagline is the first thing to go when the row has to share with the
     currency toggle. The brand mark stays. */
  .brand .tag { display: none; }
  .fxtog button { padding: 9px 13px; min-height: 40px; }
}

/* Sponsor slot. The <!--OPTIONAL:sponsor_*--> blocks in the templates had no
   styling at all, because nothing read data/sponsors.json so the blocks were
   always stripped and nobody ever saw one render. Deliberately quiet: this is
   a footnote to the data, not a banner. Scoped with aside. so it cannot touch
   the .rail .cap .sp caption span above. */
aside.sp {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 30px 0; padding: 13px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--signal);
  border-radius: 3px; background: var(--paper);
}
aside.sp .t {
  font-family: var(--data); font-size: .6875rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
aside.sp .n { font-weight: 600; color: var(--ink); font-size: .9375rem; }
aside.sp .l { flex: 1 1 100%; color: var(--muted); font-size: .875rem; line-height: 1.5; }
aside.sp .c {
  font-weight: 600; color: var(--signal); text-decoration: none;
  font-size: .875rem; white-space: nowrap;
}
aside.sp .c:hover { text-decoration: underline; }
@media (max-width: 560px) {
  aside.sp .c { flex: 1 1 100%; }
  aside.sp .c { min-height: 32px; display: inline-flex; align-items: center; }
}

/* ── Currency toggle ───────────────────────────────────────────────────────
   The site publishes Canadian diesel in CAD cents/litre and US diesel in USD
   dollars/gallon, and both used to render as a bare "$". This lets a reader pick
   the currency they think in. Sized to sit inside the sticky nav without pushing
   the links, and to stay a comfortable tap target at 360px. */
/* A real flex item beside .nv, not a sticky overlay. No overlap is possible and
   it sits on the content column's inner right edge, same as the header and
   footer content. */
.fxtog { display: inline-flex; align-items: center; gap: 0;
  flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; background: var(--raise); }
.fxtog button { appearance: none; border: 0; background: transparent; cursor: pointer;
  font: 700 11px/1 var(--data); letter-spacing: 0;
  color: var(--muted); padding: 7px 11px; min-height: 30px; }
.fxtog button:hover { color: var(--ink); background: var(--sink); }
.fxtog button.on { background: var(--signal); color: #fff; }
.fxtog button:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.fxtog.off { opacity: .45; }
.fxtog.off button { cursor: not-allowed; }
.fxnote { font: 400 11px/1.4 "Inter", system-ui, sans-serif; color: var(--muted); }
@media (max-width: 560px) {
  .fxtog button { padding: 8px 10px; min-height: 34px; }
}

/* Two rails: Canadian provinces beside US districts. Each keeps its own unit and
   its own scale, so neither is restated in the other country's unit. */
.railset { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rail .railnote {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--data); font-size: .75rem; color: var(--muted); line-height: 1.45;
}
@media (max-width: 900px) { .railset { grid-template-columns: 1fr; } }

/* The country chooser at /. Two cards, then the cross-border figures. */
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 18px; }
.pickcard {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px;
  background: var(--raise); border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; transition: border-color .15s, transform .15s;
}
.pickcard:hover { border-color: var(--signal); transform: translateY(-1px); }
.pickcard .pflag { font-family: var(--data); font-size: .8125rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.pickcard .pval { font-size: 2.25rem; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.pickcard .pval em { font-style: normal; font-size: 1rem; color: var(--muted); margin-left: 6px; }
.pickcard .pmeta { font-size: .8125rem; color: var(--muted); line-height: 1.45; }
.pickcard .pgo { margin-top: 8px; font-weight: 600; color: var(--signal); }
.stat .v .u2 { font-size: .875rem; color: var(--muted); margin-left: 4px; font-weight: 400; }
@media (max-width: 640px) { .pick { grid-template-columns: 1fr; } }
/* one rail when a country page shows only its own */
.railset.one { grid-template-columns: 1fr; }

/* Two injected controls now share the header with the brand. Below 640px the brand
   mark was wrapping to two lines, which reads as broken rather than tight. The
   class is .mark, not .brand — the first version of this rule targeted .brand and
   silently did nothing. */
.hd .wrap { flex-wrap: nowrap; }
.hd .mark { white-space: nowrap; }
@media (max-width: 640px) {
  .hd .mark span { display: none; }          /* keep the mark, drop the tagline */
  .hd .mark b { font-size: .9375rem; white-space: nowrap; }
  .hd .seg-opt { padding: 5px 8px; font-size: .75rem; }
  .hd .fxtog button { padding: 5px 8px; }
}

/* The drawer. Replaces the sideways-scrolling nav under 860px, where thirteen links
   clipped mid-word against the controls. */
.drawer { border-bottom: 1px solid var(--line); background: var(--raise); }
.drawer[hidden] { display: none; }
.drawer .wrap { padding-top: 4px; padding-bottom: 18px; }
.dgrp b { display: block; font-family: var(--data); font-size: .6875rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 14px 0 6px; }
.dgrp .dg { display: block; padding: 11px 2px; border-bottom: 1px solid var(--line-2);
  font-family: var(--body); font-size: .9375rem; font-weight: 500; line-height: 1.2;
  color: var(--ink); text-decoration: none; }
.dgrp .dg.on { color: var(--signal); font-weight: 600; }

/* The header's two controls were spread apart because .wrap is space-between with
   three children, so the middle one floated to the centre. The brand takes the slack
   instead and the controls sit together at the right, which is where a reader looks
   for a switch and a toggle. */
.hd .wrap { justify-content: flex-start; }
.hd .mark { margin-right: auto; }

/* The answer to the question the hero asks. The cards show each country in its own unit,
   which is right, but it means a reader cannot compare them without doing the sum. */
.pickgap { margin: 18px 0 0; font-family: var(--body); font-size: 1rem; line-height: 1.5;
  color: var(--muted); }
.pickgap b { font-family: var(--data); font-size: 1.125rem; color: var(--ink);
  font-weight: 600; }

/* Border rows carry both directions: into Canada (CBSA) and into the US (CBP). */
.rows .r .v .dir { display: block; text-align: right; line-height: 1.4; }
.rows .r .v .dir small { margin-left: 6px; color: var(--muted); font-size: .75rem; }
.rows .r .v .dir.heavy { color: var(--up); }
.rows .r .v .dir.na { color: var(--muted); }

/* ── Highway signage layer (2026-10-08) ─────────────────────────────────
   Restyles the parts above without changing markup. Overpass for headings,
   labels and numbers; Source Serif 4 for reading text; pill controls; one
   green sign per page; no capitalised labels. Keep this block last. */

* { font-variant-numeric: tabular-nums lining-nums; }
body { font-size: 1.0625rem; letter-spacing: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 7px var(--yellow); border-radius: 8px; }

/* Labels: sentence case everywhere. */
.strip .hint, .figures .cn, .links-list .src, .cstat .l, .pickcard .pflag,
.ipop-rows span { text-transform: none !important; letter-spacing: 0 !important; }

/* Masthead and nav: white bar, ink text, green for the current place. */
.hd, .nav { background: var(--raise); }
.mark b { font-weight: 800; font-size: 1.1875rem; letter-spacing: -.01em; }
.mark span { font-weight: 600; font-size: .9375rem; }
.nav .ng { font-weight: 600; font-size: .9375rem; color: var(--ink-2); }
.nav .ng.on { color: var(--signal); font-weight: 700; }
.nav .ng.on::after { height: 3px; border-radius: 3px 3px 0 0; }
.strip { background: var(--paper); }
.strip a { font-weight: 600; font-size: .875rem; padding: 7px 14px; background: var(--raise); border: 1px solid var(--line); }
.strip a.on { border-color: var(--signal); }
.strip .hint { font-family: var(--body); font-size: .8125rem; font-weight: 600; color: var(--muted); }
.navbtn { width: 44px; height: 44px; border-radius: 999px; border-color: var(--field); }
.seg { background: var(--raise); border-color: var(--field); }
.seg-opt { font-weight: 700; font-size: .875rem; padding: 6px 16px; }

/* Type. */
.eyebrow { font-family: var(--body); font-weight: 700; font-size: .9375rem; letter-spacing: 0; color: var(--signal); }
.eyebrow::before { display: none; }
h1 { font-weight: 700; letter-spacing: -.025em; line-height: 1.06; max-width: 20ch; }
h2 { font-weight: 700; letter-spacing: -.015em; }
h3 { font-weight: 700; letter-spacing: -.005em; }
.stand { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.55; color: var(--ink-2); }
.reading p, .note { font-family: var(--serif); line-height: 1.65; }
.reading p { font-size: 1.125rem; color: #262B28; }
.sec > .lead { border-bottom-color: var(--line); }

/* Hero figures: two white panels, one per country. */
.figures { gap: 16px; }
.figures .fg { background: var(--raise); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.figures .cn { font-family: var(--body); font-weight: 700; font-size: 1rem; color: var(--ink); }
.figures .fsrc { font-family: var(--body); font-size: .875rem; }
.figure .n { font-weight: 700; letter-spacing: -.03em; }
.figure .u { font-family: var(--body); font-weight: 600; font-size: 1.125rem; }
.figure .d { font-family: var(--body); font-weight: 700; font-size: .875rem; padding: 4px 11px; }
.meta { font-family: var(--body); font-size: .875rem; }
.meta b { font-weight: 700; }

/* The sign. The spread rail is the one green element on the page. */
.rail {
  background: var(--signal); color: #FFFFFF; border: 0; border-radius: 18px;
  padding: 30px 30px 24px;
  box-shadow: inset 0 0 0 7px var(--signal), inset 0 0 0 9px rgba(255,255,255,.92);
}
.rail .cap h3 { color: #FFFFFF; font-size: 1.25rem; }
.rail .cap .sp { font-family: var(--body); font-size: .9375rem; color: var(--on-sign); }
.rail .cap .sp b { color: #FFFFFF; font-weight: 700; }
.rail .row { color: #FFFFFF; }
.rail .row .code { font-family: var(--body); font-weight: 700; font-size: .9375rem; color: var(--on-sign); }
.rail .row:hover .code { color: #FFFFFF; }
.rail .row .track::before { background: rgba(255,255,255,.22); }
.rail .row .fill { background: #FFFFFF; }
.rail .row .dot { background: var(--signal); border-color: #FFFFFF; }
.rail .row .val { font-family: var(--body); font-weight: 700; font-size: 1rem; color: #FFFFFF; }
.rail .row .val.up { color: #FFD3C4; }
.rail .row .val.down { color: #C3E6D2; }
.rail .mean { background: var(--yellow); }
.rail .mean .lab { font-family: var(--body); font-weight: 700; color: var(--yellow); }

/* Panels: white, hairline, 16px corners. */
.cite, .stats, .viz-card, .chart-stats, .sub { border-radius: 16px; }
.cite { background: var(--raise); }
.cite .cl { font-family: var(--body); font-weight: 700; font-size: .9375rem; }
.cite q { font-family: var(--serif); font-size: 1rem; color: var(--ink-2); }
.stat .l, .stat .s, .cstat .l, .cstat .s { font-family: var(--body); font-size: .8125rem; }
.stat .l { font-weight: 600; color: var(--ink-2); }
.stat .v, .cstat b { font-weight: 700; }
.sub { background: var(--raise); padding: 32px; }
.sub .e { font-family: var(--body); font-weight: 700; font-size: .9375rem; }
.sub p { font-family: var(--serif); font-size: 1.0625rem; }
.sub .fine { font-family: var(--body); }

/* Buttons: pills. */
.btn, .sub-btn { font-family: var(--body); font-weight: 700; border-radius: 999px; min-height: 44px; padding: 0 20px; }
.btn { border-color: var(--field); font-size: .9375rem; }
.sub-btn { font-size: 1rem; min-height: 50px; padding: 0 24px; }
.story button { font-family: var(--body); font-weight: 600; font-size: .8125rem; border-radius: 999px; padding: 6px 12px; }

/* Rows: numbers in Overpass, keys in ink. */
.rows .r { padding: 13px 4px; border-bottom-color: var(--line-2); }
.rows .r .k { font-weight: 600; }
.rows .r .k small { font-family: var(--body); font-weight: 400; font-size: .8125rem; }
.rows .r .v { font-family: var(--body); font-weight: 700; font-size: 1rem; }
.links-list a { font-weight: 600; }
.links-list .src { font-family: var(--body); font-size: .8125rem; font-weight: 700; color: var(--signal); }

/* Forms. */
input, select, textarea { font-family: var(--body); }
select, input[type="number"], input[type="text"], input[type="email"] { border-radius: 12px; border-color: var(--field); }

/* Footer. */
.ft { background: var(--raise); }
.ft .brand .name { font-weight: 800; }
.ft .brand .tag, .ft .bottom { font-family: var(--body); }

/* Charts. */
.chart-svg .line { stroke-width: 2.25; }
.chart-svg .axis text, .ann-label { font-family: var(--body); }
.chart-card .tip { font-family: var(--body); background: var(--ink); border-radius: 10px; }

/* Home chooser: two white panels, then the gap as the page's sign. */
.pickcard { border-radius: 16px; padding: 22px 24px 20px; }
.pickcard .pflag { font-family: var(--body); font-weight: 700; font-size: 1rem; color: var(--ink); }
.pickcard .pval { font-family: var(--display); font-weight: 700; font-size: clamp(2.75rem, 7vw, 3.5rem); line-height: 1; letter-spacing: -.03em; }
.pickcard .pval em { font-weight: 600; font-size: 1.125rem; letter-spacing: 0; }
.pickcard .pmeta { font-size: .875rem; }
.pickcard .pgo { font-weight: 700; }
.pickgap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 16px 0 22px; padding: 24px 30px; border-radius: 18px;
  background: var(--signal); color: #FFFFFF;
  box-shadow: inset 0 0 0 7px var(--signal), inset 0 0 0 9px rgba(255,255,255,.92);
}
.pickgap .gl { font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.pickgap .gl small { display: block; font-weight: 400; font-size: .9375rem; color: var(--on-sign); margin-top: 4px; }
.pickgap b { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 6vw, 2.75rem); color: #FFFFFF; white-space: nowrap; }
.stat .v .u2 { font-weight: 600; }
.dgrp b { font-family: var(--body); font-size: .875rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.dgrp .dg { font-weight: 600; }
.rows .r .v .dir small { font-weight: 400; }
.rows .r .v .dir.heavy { color: var(--heavy); }

/* ============ editorial blog index ============ */

.nm-mast{padding:clamp(28px,5vw,56px) 0 clamp(18px,2.5vw,28px);border-bottom:3px solid #1d2b23}
.nm-mast h1{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(40px,7vw,76px);line-height:0.98;
  letter-spacing:-0.02em;margin:0 0 14px;font-weight:600;color:#12201a}
.nm-mast .dek{font-size:clamp(15px,1.6vw,18px);line-height:1.5;color:#4a5c51;max-width:62ch;margin:0}
.nm-mast .dek b{color:#1d2b23;font-weight:600}

/* hero */
.nm-hero{display:block;text-decoration:none;color:inherit;padding:clamp(26px,4vw,44px) 0;
  border-bottom:1px solid #d8ded9;transition:background .15s}
.nm-hero:hover{background:#F5F8F4}
.nm-kicker{display:flex;gap:10px;align-items:center;font-family:'Overpass',system-ui,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#25663f;margin-bottom:14px}
.nm-kicker i{font-style:normal;color:#8fa197;font-weight:500;letter-spacing:.08em}
.nm-hero h2{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(26px,3.6vw,42px);line-height:1.1;
  letter-spacing:-0.015em;margin:0 0 14px;font-weight:600;color:#12201a;max-width:26ch}
.nm-hero p{margin:0;font-size:clamp(15px,1.5vw,17px);line-height:1.55;color:#4a5c51;max-width:58ch}
.nm-hero .go{display:inline-block;margin-top:16px;font-family:'Overpass',system-ui,sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.04em;color:#25663f}

/* the ruled list */
.nm-list{margin:0;padding:0;list-style:none}
.nm-list li{border-bottom:1px solid #e2e7e3}
.nm-list a{display:grid;grid-template-columns:132px 1fr;gap:clamp(12px,2vw,28px);
  padding:clamp(16px,2.2vw,24px) 0;text-decoration:none;color:inherit}
.nm-list a:hover .hl{color:#25663f}
.nm-list .when{font-family:'Overpass',system-ui,sans-serif;font-size:12px;letter-spacing:.05em;
  color:#7c8f84;padding-top:4px;text-transform:uppercase}
.nm-list .cat{display:block;color:#25663f;font-weight:700;font-size:10.5px;letter-spacing:.12em;margin-bottom:5px}
.nm-list .hl{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(18px,2.1vw,22px);line-height:1.25;
  font-weight:600;color:#12201a;margin:0 0 7px;transition:color .12s;letter-spacing:-0.01em}
.nm-list .blurb{margin:0;font-size:14.5px;line-height:1.5;color:#5d6f64;max-width:70ch}
.nm-secttl{font-family:'Overpass',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#7c8f84;padding:clamp(22px,3vw,34px) 0 0}

@media(max-width:680px){
  .nm-list a{grid-template-columns:1fr;gap:6px}
  .nm-list .when{padding-top:0}
  .nm-hero h2{max-width:none}
}

/* ═══ EDITORIAL LAYER ══════════════════════════════════════════════════════
   Restyles the whole dashboard in place. CSS only: no markup, no class names,
   no JS hooks change. Keep this block last. */

/* 1. Headings are a publication, not an app header. */
h1, h2, h3, .lead h1, .lead h2, .sec h2, .chart-head h3, .figures .cn {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.02em;
}
h1 { line-height: 1.02; max-width: 24ch; }
h2 { line-height: 1.12; }
h3 { line-height: 1.2; letter-spacing: -0.015em; }
.figure .n, .cstat b, .pickgap b, .rows .r .v b { letter-spacing: -0.03em; }

/* 2. Square everything. This is the Material tell. */
*, *::before, *::after { border-radius: 0 !important; }
:focus-visible { border-radius: 0 !important; outline-offset: 3px; }

/* 3. Panels become ruled sections, not tiles in a grid. */
.figures .fg, .chart-card, .calc, .inc, .links-list, .rows, .pickcard, .dgrp,
.ipop, .drawer, .cstat {
  border: 0;
  border-top: 2px solid var(--ink);
  background: transparent;
  padding-top: 18px;
}
.figures { gap: 0; }
.figures .fg { padding: 18px 24px 0 0; }
.figures .fg + .fg { border-left: 1px solid var(--line); padding-left: 24px; }

/* A single heavy rule under the page head. */
.sec > .lead { border-bottom: 2px solid var(--ink); padding-bottom: 14px; }

/* 4. One accent, used for wayfinding only. */
.eyebrow { color: var(--signal); font-weight: 700; font-size: .8125rem;
  letter-spacing: .12em; text-transform: uppercase; }
.nav .ng.on { color: var(--signal); }
.nav .ng.on::after { background: var(--signal); height: 2px; }
.strip a { padding: 6px 0; background: transparent; border: 0;
  border-bottom: 2px solid transparent; font-weight: 600; }
.strip a.on { border-bottom-color: var(--signal); }
.strip a:hover { border-bottom-color: var(--line); }

/* 5. More air. Dense grids read as software; spaced rules read as a page. */
body { font-size: 1.0625rem; line-height: 1.62; }
.sec { padding-top: clamp(28px, 4vw, 46px); }
.reading p { font-size: 1.1875rem; line-height: 1.7; color: #23282A; max-width: 68ch; }
.stand { font-size: 1.25rem; line-height: 1.6; }
.note, .meta { font-size: .875rem; color: var(--muted); }

/* The hero figures carry the page. Give the number real scale. */
.figures .fg .figure .n, .figure .n { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; }

/* Tables and rows: rules, not boxes. */
.rows .r { border-bottom: 1px solid var(--line); }
.rows .r:last-child { border-bottom: 0; }

/* Buttons: flat, square, and obvious. */
.btn, .btn--brand, .strip a, .seg, .seg-opt, .navbtn, .fxtog a, .ch a {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.btn, .btn--brand { border: 1px solid var(--ink); padding: 11px 20px; font-weight: 700; }
.btn--brand { background: var(--ink); color: var(--paper); }

/* Charts lose their frames too. */
.chart-svg, .incmap { border: 0; }

/* Small labels stay uppercase and small, but stop shouting in green. */
.pickcard .pflag, .links-list .src, .cstat .l { color: var(--muted); font-weight: 700;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }