/* Wodonga Wire — Numbers subject pages. The page frame, then the exhibits. */
.ns-story { max-width: none; padding-bottom: clamp(40px, 6vw, 72px); }

/* ================================================================ exhibits
   A Numbers page is a sequence of data exhibits: topic label, one finding,
   the figures that carry it (value, plain label, period), the visual, at most
   one note that prevents a misreading, and the external source. Terracotta is
   Wodonga wherever Wodonga is drawn or counted; comparisons stay quiet.
   Every colour is a token or a mix of tokens. */
.ns-story { --nx-place: var(--accent); --nx-place-text: var(--accent-active);
  --nx-peer: color-mix(in oklab, var(--meta) 78%, var(--bg));
  --nx-grid: color-mix(in oklab, var(--fg) 8%, var(--bg));
  --nx-track: color-mix(in oklab, var(--fg) 5%, var(--bg));
  --nx-other: color-mix(in oklab, var(--fg) 58%, var(--bg));
  --nx-faint: color-mix(in oklab, var(--fg) 17%, var(--bg));
  --nx-second: var(--fg);
  --nx-s1: var(--accent);
  --nx-s2: color-mix(in oklab, var(--accent) 60%, var(--bg));
  --nx-s3: color-mix(in oklab, var(--accent) 30%, var(--bg));
  --nx-s4: color-mix(in oklab, var(--fg) 64%, var(--bg));
  --nx-s5: color-mix(in oklab, var(--fg) 38%, var(--bg));
  --nx-s6: color-mix(in oklab, var(--fg) 16%, var(--bg));
  --nx-motion: 560ms; --nx-ease: cubic-bezier(0.22, 0.61, 0.21, 1); }

/* one colour per role, read by every mark that carries the role */
.ns-story .is-place { --nx-c: var(--nx-place); }
.ns-story .is-peer { --nx-c: var(--nx-peer); }
.ns-story .is-second { --nx-c: var(--nx-second); }
.ns-story .is-other { --nx-c: var(--nx-other); }
.ns-story .is-faint { --nx-c: var(--nx-faint); }
.ns-story .is-s1 { --nx-c: var(--nx-s1); }
.ns-story .is-s2 { --nx-c: var(--nx-s2); }
.ns-story .is-s3 { --nx-c: var(--nx-s3); }
.ns-story .is-s4 { --nx-c: var(--nx-s4); }
.ns-story .is-s5 { --nx-c: var(--nx-s5); }
.ns-story .is-s6 { --nx-c: var(--nx-s6); }

.nx { border-top: 1px solid var(--border-soft); padding: 52px 0 60px; }
.ns-story > .nx:first-child, .nx-group + .nx { border-top: 0; }
.ns-story > .nx:first-child { padding-top: clamp(40px, 4vw, 58px); }
.nx-group { margin: 28px 0 0; padding-top: 14px; border-top: 1.5px solid var(--fg);
  font-family: var(--font-display); font-size: 15px; color: var(--fg-2); }
.ns-story > .nx-group:first-child { margin-top: clamp(40px, 4vw, 58px); }
.nx-group + .nx { padding-top: 26px; }
.nx-alias { position: relative; top: -1px; }
.nx-label { margin: 0 0 10px; font-size: 11px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--nx-place-text); }
.nx-finding { margin: 0 0 24px; max-width: 36ch; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(21px, 1.65vw, 26px); line-height: 1.22; letter-spacing: 0; color: var(--fg); text-wrap: balance; }

/* the ledger line: figures on a rule, the period stamped under each. The rules
   between cells are each cell's own left and top edge, and the first column's
   and first row's edges fall outside the clipped frame, so the grid reflows
   at any column count without per-position rules. */
.nx-stats { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  margin: 0 0 34px; padding: 0; list-style: none; overflow: hidden;
  border-top: 1.5px solid var(--fg); border-bottom: 1px solid var(--border-soft); }
.nx-stats.c1 { --cols: 1; } .nx-stats.c2 { --cols: 2; } .nx-stats.c4 { --cols: 4; } .nx-stats.c5 { --cols: 5; }
.nx-stat { min-width: 0; margin: -1px 0 0 -1px; padding: 15px 16px 16px 17px;
  border-left: 1px solid var(--border-soft); border-top: 1px solid var(--border-soft); }
.nx-v { display: block; font-family: var(--font-display); font-size: clamp(24px, 2vw, 31px); line-height: 1.02;
  color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-v.is-long { font-size: clamp(19px, 1.45vw, 22px); line-height: 1.2; white-space: normal; }
.nx-v small { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.01em; color: var(--muted); margin-left: 3px; }
.nx-stat.is-place .nx-v { color: var(--nx-place-text); }
.nx-stat.is-comp .nx-v { color: var(--muted); }
.nx-l { display: block; margin-top: 9px; max-width: 28ch; font-size: 13px; line-height: 1.35; color: var(--fg-2); }
.nx-p { display: block; margin-top: 6px; font-size: 10.5px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--meta); font-variant-numeric: tabular-nums; }
.nx-c { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--muted); max-width: 30ch; }
.nx-path { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 0; }
.nx-path-step .nx-v { font-size: clamp(19px, 1.5vw, 23px); }
.nx-path-step .nx-p { margin-top: 5px; }
.nx-path-step:last-child .nx-v { color: var(--nx-place-text); }
.nx-path-arrow { align-self: flex-start; margin: 1px 7px 0; color: var(--meta); font-size: 17px; line-height: 1.2; }
.nx-stat.is-path .nx-l { margin-top: 8px; }

/* the chart frame keeps one footprint whatever state it shows */
.nx-chart { margin: 0; }
.nx-chart + .nx-chart { margin-top: 40px; }
.nx-chart-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  min-height: 32px; margin-bottom: 10px; }
.nx-chart-title { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.nx-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-soft); border-radius: 6px;
  background: var(--surface); }
.nx-seg[hidden] { display: none; }
.nx-seg button { appearance: none; border: 0; background: transparent; margin: 2px; border-radius: 4px; cursor: pointer;
  font: 600 12px/1 var(--font-body); color: var(--muted); padding: 7px 11px; font-variant-numeric: tabular-nums;
  transition: var(--transition-feedback); }
.nx-seg button:hover { color: var(--fg); }
.nx-seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.nx-seg button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.nx-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 14px; padding: 0; list-style: none;
  font-size: 12px; line-height: 1.4; color: var(--fg-2); }
.nx-legend li::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 7px;
  vertical-align: -1px; background: var(--nx-c, var(--nx-other)); }
.nx-legend li.is-line::before { width: 16px; height: 0; vertical-align: middle; background: none;
  border-top: 2.5px solid var(--nx-c, var(--nx-other)); }
.nx-legend li.is-dash::before { width: 16px; height: 0; vertical-align: middle; background: none;
  border-top: 2px dashed var(--nx-c, var(--nx-other)); }
.nx-legend li.is-dot::before { border-radius: 50%; }
.nx-legend li.is-rule::before { width: 0; height: 13px; vertical-align: -2px; background: none;
  border-left: 1.5px dashed var(--nx-c, var(--fg)); }
.nx-legend li.is-tick::before { width: 0; height: 13px; vertical-align: -2px; background: none;
  border-left: 2px solid var(--nx-c, var(--fg)); }
.nx-legend li.is-open::before { background: none; outline: 1.25px dashed var(--fg); outline-offset: -1.5px; }

.nx-plot { position: relative; height: 380px; }
.nx-plot.is-short { height: 300px; }
.nx-area, .nx-gridwrap, .nx-ends { position: absolute; left: 52px; right: 132px; top: 10px; bottom: 30px; }
.nx-plot.is-flush .nx-area, .nx-plot.is-flush .nx-gridwrap, .nx-plot.is-flush .nx-ends { right: 18px; }
.nx-ends { pointer-events: none; }
.nx-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nx-area { z-index: 1; }
.nx-mark, .nx-tag, .nx-ends { z-index: 2; }
.nx-series { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke: var(--nx-c, var(--nx-other)); stroke-width: 2;
  transition: stroke 320ms var(--ease-standard), stroke-width 320ms var(--ease-standard); }
.nx-series.is-place { stroke-width: 2.75; }
.nx-series.is-peer { stroke-width: 1.75; stroke-dasharray: 5 4; }
.nx-series.is-faint { stroke-width: 1.25; }
.nx-series.is-dashed { stroke-dasharray: 5 4; }
.nx-col { fill: var(--nx-c, var(--nx-other)); transition: fill 320ms var(--ease-standard); }
.nx-col.is-open { fill: none; stroke: var(--fg); stroke-width: 1.25; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.nx-layer { position: absolute; inset: 0; transition: opacity 260ms var(--ease-standard); }
.nx-layer.is-leaving, .nx-layer.is-entering { opacity: 0; }
.nx-gridline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--nx-grid); }
.nx-gridline.is-zero { border-top-color: color-mix(in oklab, var(--fg) 30%, var(--bg)); }
.nx-gridline b { position: absolute; right: calc(100% + 10px); top: 0; transform: translateY(-50%); font-weight: 400;
  font-size: 11px; color: var(--meta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-xl { position: absolute; top: calc(100% + 10px); transform: translateX(-50%); font-size: 11px; color: var(--meta);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-xl.is-first { transform: none; }
.nx-xl.is-last { transform: translateX(-100%); }
.nx-plot.is-flush .nx-xl.is-first, .nx-plot.is-flush .nx-xl.is-last { transform: translateX(-50%); }
.nx-xl.is-crowded { visibility: hidden; }
.nx-mark { position: absolute; width: 0; height: 0; }
.nx-mark i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--nx-c, var(--fg)); box-sizing: border-box; }
.nx-mark em { position: absolute; left: 0; bottom: 10px; transform: translateX(-50%); padding: 1px 4px;
  background: color-mix(in oklab, var(--bg) 88%, transparent); font-style: normal; font-size: 11.5px; line-height: 1.25;
  color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-mark.is-start em { transform: translateX(-8px); }
.nx-mark.is-end em { transform: translateX(calc(-100% + 8px)); }
.nx-tag { position: absolute; transform: translate(-50%, calc(-100% - 5px)); font-size: 11px; line-height: 1.2;
  color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-tag.is-below { transform: translate(-50%, 5px); }
.nx-tag.is-quiet { color: var(--meta); font-size: 10px; letter-spacing: 0.02em; }
.nx-end { position: absolute; left: calc(100% + 12px); transform: translateY(-50%); white-space: nowrap;
  font-size: 11.5px; line-height: 1.15; color: var(--fg-2); transition: top var(--nx-motion) var(--nx-ease); }
.nx-end b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 17px; font-variant-numeric: tabular-nums; }
.nx-end.is-place { color: var(--nx-place-text); }
.nx-end.is-peer { color: var(--muted); }
.nx-dot { position: absolute; left: 100%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--nx-place); box-shadow: 0 0 0 3px var(--bg);
  transition: top var(--nx-motion) var(--nx-ease), left var(--nx-motion) var(--nx-ease); }

/* bars and dot strips: one fixed set of rows; a state changes positions and
   lengths, never the number of rows, so the frame's height cannot change */
.nx-bars, .nx-dots { --nx-name: 210px; --nx-val: 92px; --nx-gap: 16px;
  --nx-tl: calc(var(--nx-name) + var(--nx-gap)); --nx-tr: calc(var(--nx-val) + var(--nx-gap));
  position: relative; display: grid; grid-template-columns: var(--nx-name) minmax(0, 1fr) var(--nx-val);
  align-items: center; column-gap: var(--nx-gap); row-gap: 11px; }
.nx-bar, .nx-dotrow { display: contents; }
.nx-bar-name, .nx-dotrow-name { font-size: 13px; line-height: 1.3; color: var(--fg-2); }
.nx-bar-name small { margin-left: 6px; font-size: 11.5px; color: var(--meta); white-space: nowrap; }
.nx-bars.is-field .nx-bar.is-place .nx-bar-name { color: var(--nx-place-text); font-weight: 600; }
.nx-bar-track { position: relative; height: 22px; background: var(--nx-track); }
.nx-bar-fill, .nx-bar-seg { position: absolute; top: 0; bottom: 0; left: calc(var(--x, 0) * 1%); width: calc(var(--w, 0) * 1%);
  background: var(--nx-c, var(--nx-other));
  transition: left var(--nx-motion) var(--nx-ease), width var(--nx-motion) var(--nx-ease), background-color 320ms var(--ease-standard); }
.nx-bar-seg { overflow: hidden; box-shadow: inset -1.5px 0 0 var(--bg); }
.nx-bar-seg em { display: block; padding-left: 7px; font-style: normal; font-size: 11px; line-height: 22px; white-space: nowrap;
  color: var(--bg); font-variant-numeric: tabular-nums; }
.nx-bar-seg.is-s3 em, .nx-bar-seg.is-s5 em, .nx-bar-seg.is-s6 em, .nx-bar-seg.is-faint em, .nx-bar-seg.is-peer em { color: var(--fg); }
.nx-bar-ghost { position: absolute; top: -4px; bottom: -4px; left: calc(var(--g, 0) * 1%); width: 0;
  border-left: 2px solid var(--fg); transition: left var(--nx-motion) var(--nx-ease); }
.nx-bar-ghost[hidden] { display: none; }
.nx-bar.is-missing .nx-bar-track { background: repeating-linear-gradient(135deg, var(--nx-track) 0 5px, transparent 5px 10px); }
.nx-bar-v { position: relative; height: 22px; font-family: var(--font-display); font-size: 17px; line-height: 22px;
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-bars.is-field .nx-bar.is-place .nx-bar-v { color: var(--nx-place-text); }
.nx-bar-v span { position: absolute; right: 0; top: 0; transition: opacity 220ms var(--ease-standard), transform 320ms var(--nx-ease); }
.nx-bar-v span.is-leaving { opacity: 0; transform: translateY(-6px); }
.nx-bar-v span.is-entering { opacity: 0; transform: translateY(6px); }
/* a reference rule across every row, placed on the track's own scale */
.nx-bars.has-marker { padding-top: 24px; }
.nx-bar-marker { position: absolute; top: 18px; bottom: -6px; width: 0; pointer-events: none;
  left: calc(var(--nx-tl) + (100% - var(--nx-tl) - var(--nx-tr)) * var(--m, 0) / 100);
  border-left: 1.5px dashed var(--fg); transition: left var(--nx-motion) var(--nx-ease), opacity 240ms; }
.nx-bar-marker em { position: absolute; bottom: 100%; left: 0; transform: translateX(-50%); padding-bottom: 3px;
  font-style: normal; font-size: 11px; line-height: 1.2; color: var(--fg-2); white-space: nowrap; }
.nx-bar-marker[hidden] { display: block; opacity: 0; }

.nx-dotrow-track { position: relative; height: 26px; }
.nx-dotrow-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--nx-grid); }
.nx-dotrow-dot { position: absolute; top: 50%; left: calc(var(--p, 0) * 1%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--nx-c, var(--nx-peer)); transition: left var(--nx-motion) var(--nx-ease), opacity 240ms; }
.nx-dotrow-dot.is-peer, .nx-dotrow-dot.is-other { background: color-mix(in oklab, var(--nx-peer) 70%, var(--bg)); }
.nx-dotrow-dot.is-place { z-index: 1; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; box-shadow: 0 0 0 2.5px var(--bg); }
.nx-dotrow-dot[hidden] { display: none; }
.nx-dotrow-median { position: absolute; top: 3px; bottom: 3px; left: calc(var(--p, 0) * 1%); border-left: 2px solid var(--fg);
  transition: left var(--nx-motion) var(--nx-ease); }
.nx-dotrow-median[hidden] { display: none; }
.nx-dotrow-ticks b, .nx-dots-axis b { position: absolute; left: calc(var(--p, 0) * 1%); transform: translateX(-50%);
  font-weight: 400; font-size: 10.5px; color: var(--meta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nx-dotrow-ticks b { top: calc(100% - 2px); }
.nx-dotrow-ticks b:first-child, .nx-dots-axis b:first-child { transform: none; }
.nx-dotrow-ticks b:last-child, .nx-dots-axis b:last-child { transform: translateX(-100%); }
.nx-dotrow-ticks:empty { display: none; }
.nx-dots:has(.nx-dotrow-ticks b) { row-gap: 26px; }
.nx-dots-axis { grid-column: 2; position: relative; height: 16px; }
.nx-dots-axis:empty { display: none; }
.nx-dotrow.is-place .nx-bar-v { color: var(--nx-place-text); }

.nx-legacy { margin-top: 4px; }
.nx-note { margin: 18px 0 0; max-width: 62ch; font-size: 13px; line-height: 1.55; color: var(--muted); }
.nx-source { margin: 14px 0 0; font-size: 12px; line-height: 1.55; color: var(--meta); }
.nx-source + .nx-source { margin-top: 4px; }
.nx-source > span:first-child { display: inline-block; min-width: 58px; margin-right: 6px; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.nx-source + .nx-source > span:first-child { visibility: hidden; }
.nx-source a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--fg) 25%, var(--bg)); }
.nx-source a:hover { text-decoration-color: var(--accent); }
.nx-cross { margin: 16px 0 0; font-size: 13px; }
.nx-cross a { color: var(--fg); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--accent); }

/* the evidence region: the sources this page used, linked to their publishers */
.nx-evidence { list-style: none; margin: var(--space-8) 0 0; padding: 0; border-top: 1px solid var(--dark-border);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
.nx-evidence li { padding: 14px 0 15px; border-bottom: 1px solid var(--dark-border); }
.nx-evidence a { color: var(--surface); text-decoration: underline; text-underline-offset: 3px; font-size: 15px;
  line-height: 1.4; text-decoration-color: color-mix(in oklab, var(--surface) 35%, var(--fg)); }
.nx-evidence a:hover { text-decoration-color: var(--dark-accent); }
.nx-evidence .nx-evidence-t { color: var(--surface); font-size: 15px; line-height: 1.4; }
.nx-evidence span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--on-dark-quiet); }

@media (max-width: 900px) {
  .nx-stats.c4, .nx-stats.c5 { --cols: 3; }
  .nx-evidence { grid-template-columns: minmax(0, 1fr); }
  .nx-bars, .nx-dots { --nx-name: 160px; --nx-val: 80px; --nx-gap: 12px; }
}
@media (max-width: 640px) {
  .nx { padding: 36px 0 44px; }
  .nx-stats.c3, .nx-stats.c4, .nx-stats.c5 { --cols: 2; }
  .nx-stat { padding: 13px 12px 14px 13px; }
  .nx-stat.is-path { grid-column: 1 / -1; }
  .nx-plot { height: 300px; }
  .nx-plot.is-short { height: 240px; }
  .nx-area, .nx-gridwrap { left: 40px; right: 8px; top: 40px; bottom: 28px; }
  .nx-plot.is-flush .nx-area, .nx-plot.is-flush .nx-gridwrap { top: 10px; }
  .nx-ends { left: 40px; right: 8px; top: 0; bottom: auto; display: flex; flex-wrap: wrap; gap: 2px 16px; }
  .nx-end { position: static; transform: none; font-size: 12px; }
  .nx-end b { display: inline; margin-left: 4px; font-size: 15px; }
  .nx-end::before { content: ""; display: inline-block; width: 14px; margin-right: 6px; vertical-align: middle;
    border-top: 2px solid var(--nx-c, var(--nx-other)); }
  .nx-end.is-place::before { border-top-width: 2.5px; }
  .nx-end.is-peer::before { border-top: 1.5px dashed var(--nx-peer); }
  .nx-dot { display: none; }
  .nx-mark em { font-size: 10.5px; }
  .nx-plot.is-dense .nx-tag:not(.is-quiet) { display: none; }
  .nx-bars, .nx-dots { grid-template-columns: minmax(0, 1fr) 64px; row-gap: 4px; --nx-tl: 0px; --nx-tr: 76px; }
  .nx-bar-name, .nx-dotrow-name { grid-column: 1 / -1; margin-top: 8px; }
  .nx-dots-axis { grid-column: 1; }
  .nx-source > span:first-child { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-layer, .nx-end, .nx-dot, .nx-series, .nx-col, .nx-bar-fill, .nx-bar-seg, .nx-bar-ghost, .nx-bar-v span,
  .nx-bar-marker::before, .nx-bar-marker em, .nx-dotrow-dot, .nx-dotrow-median { transition: none; }
}