/* =========================================================
   OECC — Om Engineering Construction Company
   One family (Archivo, variable width + weight), self-hosted.
   Palette taken from the OECC logo: blue gear, orange arrow.
   ========================================================= */

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour */
  --concrete: #EDEFEC;      /* page */
  --paper: #F7F8F6;         /* raised surfaces, chart plots */
  --ink: #102A3C;           /* text — a navy from the logo blue */
  --ink-2: #44535C;         /* secondary text */
  --ink-3: #56656D;         /* captions, sources */
  --line: #C6CDCF;          /* hairlines, gridlines */
  --oecc-blue: #0078B0;     /* logo blue: linework, nuclear in charts */
  --link: #00649A;          /* AA-safe blue for text */
  --blueprint: #0A3550;     /* projects section */
  --blueprint-ink: #CFE6F3;
  --blueprint-ink-2: #9DBFD3;
  --orange: #E07818;        /* logo arrow: actions and site markers */
  --orange-hover: #F08A2C;
  --bar-muted: #7E8A90;     /* non-highlighted bars (3.3:1 on paper) */
  --on-ink: #FFFFFF;        /* text on ink-filled controls and tooltips */
  --on-orange: #102A3C;     /* text on orange buttons, same in both modes */
  --nav-glass: rgba(237, 239, 236, 0.94);
  --hover-wash: rgba(16, 42, 60, 0.08);
  --gen-2: #B85A08;         /* second-generation bar */
  --gen-2-text: #9a4c05;
  --footer-bg: #102A3C;
  --footer-edge: transparent;
  --placeholder-filter: grayscale(1);
  color-scheme: light;

  /* type */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem);
  --step-4: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem);
  --step-5: clamp(2.6rem, 1.2rem + 5.4vw, 5.6rem);

  /* layout */
  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 76rem;
  --nav-h: 4.25rem;
}

/* ---------- Dark mode ----------
   Follows the device setting; the menu switch overrides it (stored per visitor). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --concrete: #0F1820;
    --paper: #16222C;
    --ink: #E4EAEE;
    --ink-2: #B4C0C7;
    --ink-3: #97A4AC;
    --line: #2C3B46;
    --oecc-blue: #3AA3DE;
    --link: #79C3EE;
    --bar-muted: #6E7C84;
    --on-ink: #0F1820;
    --nav-glass: rgba(15, 24, 32, 0.92);
    --hover-wash: rgba(228, 234, 238, 0.08);
    --gen-2: #E8893A;
    --gen-2-text: #F0A060;
    --footer-bg: #0A1218;
    --footer-edge: #2C3B46;
    --placeholder-filter: grayscale(1) invert(1);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --concrete: #0F1820;
  --paper: #16222C;
  --ink: #E4EAEE;
  --ink-2: #B4C0C7;
  --ink-3: #97A4AC;
  --line: #2C3B46;
  --oecc-blue: #3AA3DE;
  --link: #79C3EE;
  --bar-muted: #6E7C84;
  --on-ink: #0F1820;
  --nav-glass: rgba(15, 24, 32, 0.92);
  --hover-wash: rgba(228, 234, 238, 0.08);
  --gen-2: #E8893A;
  --gen-2-text: #F0A060;
  --footer-bg: #0A1218;
  --footer-edge: #2C3B46;
  --placeholder-filter: grayscale(1) invert(1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--concrete);
  font-stretch: 100%;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

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

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-stretch: 125%;
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.15; }

p { text-wrap: pretty; }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--on-ink);
}
.skip-link:focus { top: 1rem; }

/* Placeholders the client must fill before launch */
.fill-in {
  background: rgba(224, 120, 24, 0.14);
  box-shadow: inset 0 -2px 0 var(--orange);
  padding: 0 0.15em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.7rem 1.35rem;
  border-radius: 2px;
  font-weight: 650;
  font-stretch: 112%;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.btn-primary { background: var(--orange); color: var(--on-orange); }
.btn-primary:hover { background: var(--orange-hover); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.btn-ghost-dark { border-color: var(--ink); color: var(--ink); }
.btn-ghost-dark:hover { background: var(--ink); color: var(--on-ink); }
.btn-small { min-height: 2.4rem; padding: 0.45rem 1rem; font-size: var(--step--1); }
.btn-large { min-height: 3.4rem; padding: 0.9rem 1.8rem; font-size: var(--step-1); }

/* ---------- Navigation ---------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  color: #fff;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.site-nav.is-solid {
  background: var(--nav-glass);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  height: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
}
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.brand-name {
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-left: auto;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  color: inherit;
  background: none;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  cursor: pointer;
  opacity: 0.9;
}
.theme-toggle:hover { opacity: 1; background: var(--hover-wash); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
/* show the moon in light mode (switch to dark), the sun in dark mode */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
.nav-menu a:not(.btn) {
  color: inherit;
  text-decoration: none;
  font-weight: 560;
  font-size: var(--step--1);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.nav-menu a:not(.btn):hover { border-bottom-color: var(--orange); }
.nav-toggle {
  display: none;
  font: inherit;
  font-weight: 600;
  font-size: var(--step--1);
  color: inherit;
  background: none;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-block; order: 3; }
  .theme-toggle { order: 2; margin-left: auto; }
  .nav-menu {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--concrete);
    color: var(--ink);
    box-shadow: 0 12px 24px rgba(16, 42, 60, 0.18);
    display: none;
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu a:not(.btn) {
    font-size: var(--step-1);
    padding-block: 0.8rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-menu .btn { margin-top: 1rem; }
}

/* ---------- 1. Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  color: #fff;
  background: #0b1a26;
  overflow: hidden;
  isolation: isolate;
}
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  background: #0b1a26;
}
/* never show a play button over the footage (iOS shows one when battery saver blocks autoplay) */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}
.hero-video { pointer-events: none; }
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(8, 20, 30, 0.86) 0%, rgba(8, 20, 30, 0.62) 34%, rgba(8, 20, 30, 0.12) 64%, rgba(8, 20, 30, 0) 100%),
    linear-gradient(0deg, rgba(8, 20, 30, 0.82) 0%, rgba(8, 20, 30, 0) 34%),
    linear-gradient(180deg, rgba(8, 20, 30, 0.55) 0%, rgba(8, 20, 30, 0) 22%);
}
.hero-content {
  align-self: center;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
}
.hero-title {
  font-size: clamp(2.5rem, 1rem + 3.6vw, 4.25rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 12ch;
  text-wrap: initial;
}
.hero-title .line { display: block; }
.hero-lede {
  margin-top: 1.5rem;
  max-width: 34rem;
  font-size: var(--step-1);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Drawing title block */
.title-block {
  display: grid;
  grid-template-columns: 1.6fr 1.6fr 0.8fr 0.8fr 1.4fr;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(8, 20, 30, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.tb-cell {
  padding: 0.55rem 0.85rem 0.65rem;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.tb-cell:first-child { border-left: 0; }
.title-block dt {
  font-size: 0.75rem;
  font-stretch: 87%;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}
.title-block dd {
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .title-block { grid-template-columns: 1fr 1fr; }
  .tb-wide { grid-column: 1 / -1; }
  .tb-cell { border-top: 1px solid rgba(255, 255, 255, 0.3); }
  .tb-cell:first-child { border-top: 0; }
  .tb-cell:nth-child(2), .tb-cell:nth-child(4) { border-left: 0; }
  .tb-cell:last-child { grid-column: 1 / -1; border-left: 0; }
}
@media (max-width: 700px) {
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(8, 20, 30, 0.72) 0%, rgba(8, 20, 30, 0.58) 45%, rgba(8, 20, 30, 0.9) 100%);
  }
  .hero-video { object-position: 38% 50%; }
}

/* One orchestrated moment: the hero assembles on load */
@media (prefers-reduced-motion: no-preference) {
  .hero-title .line,
  .hero-lede,
  .hero-actions,
  .title-block {
    animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .hero-title .line:nth-child(2) { animation-delay: 0.18s; }
  .hero-lede { animation-delay: 0.36s; }
  .hero-actions { animation-delay: 0.48s; }
  .title-block { animation-delay: 0.7s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(4.5rem, 10vw, 8rem); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head-sub { margin-top: clamp(4rem, 8vw, 6rem); }
.section-head-sub h3 { font-size: var(--step-3); }
.section-lede {
  margin-top: 1.1rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 40rem;
}

/* ---------- 2. Sustainability: charts ---------- */
.viz {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
}
.viz-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.viz-title {
  font-stretch: 112%;
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.25;
}
.viz-sub {
  margin-top: 0.25rem;
  font-size: var(--step--1);
  color: var(--ink-3);
}
.viz-plot {
  position: relative;
  margin-top: 1.25rem;
  min-height: 12rem;
}
.viz-plot svg { width: 100%; height: auto; overflow: visible; }
.viz-source {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 62rem;
}
.viz-source cite { font-style: italic; }

/* segmented control */
.seg {
  display: inline-flex;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 2px;
  gap: 2px;
}
.seg button {
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 1px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}
.seg button[aria-selected="true"] { background: var(--ink); color: var(--on-ink); }
.seg button:not([aria-selected="true"]):hover { background: var(--hover-wash); }

/* chart marks (SVG) */
.c-grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.c-axis-text { fill: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.c-cat-text { fill: var(--ink); font-size: 14px; font-weight: 500; }
.c-cat-text.is-focus { font-weight: 750; }
.c-val-text { fill: var(--ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.c-val-text.is-focus { fill: var(--ink); font-weight: 750; }
.c-bar { fill: var(--bar-muted); transition: opacity 0.15s ease; }
.c-bar.is-focus { fill: var(--oecc-blue); }
.c-hit { fill: transparent; cursor: default; outline: none; }
.c-row:hover .c-bar, .c-row:focus-within .c-bar { opacity: 0.82; }
.c-row .c-hit:focus-visible + .c-bar { outline: none; }
.c-row:focus-within .c-cat-text { text-decoration: underline; }
.c-line { fill: none; stroke: var(--oecc-blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-area { fill: var(--oecc-blue); opacity: 0.1; }
.c-dot { fill: var(--oecc-blue); stroke: var(--paper); stroke-width: 2; }
.c-cross { stroke: var(--ink-3); stroke-width: 1; }
.c-col { fill: var(--oecc-blue); }
.c-col-target { fill: rgba(0, 120, 176, 0.12); stroke: var(--oecc-blue); stroke-width: 2; }
.c-note { fill: var(--ink-2); font-size: 13px; }

@media (prefers-reduced-motion: no-preference) {
  .c-bar.is-entering { animation: grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-box: fill-box; transform-origin: left center; }
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 8rem;
  padding: 0.5rem 0.7rem;
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--step--1);
  line-height: 1.35;
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(16, 42, 60, 0.25);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 10px));
  transition: opacity 0.12s ease;
  white-space: nowrap;
}
.tooltip.is-on { opacity: 1; }
.tooltip strong { display: block; font-size: var(--step-0); font-weight: 700; }
.tooltip span { color: var(--on-ink); opacity: 0.75; }

.viz-table { margin-top: 1rem; font-size: var(--step--1); }
.viz-table summary {
  cursor: pointer;
  color: var(--link);
  font-weight: 600;
  width: fit-content;
}
.viz-table table {
  margin-top: 0.75rem;
  border-collapse: collapse;
  width: 100%;
  max-width: 36rem;
}
.viz-table th, .viz-table td {
  text-align: left;
  padding: 0.35rem 0.75rem 0.35rem 0;
  border-bottom: 1px solid var(--line);
}
.viz-table td.num, .viz-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.viz-table-wrap { max-height: 18rem; overflow: auto; }

/* impact figures (Kharecha & Hansen) */
.impact {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1.5px solid var(--ink);
}
.impact-intro {
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 40rem;
}
.impact-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 1.5rem;
}
.figure { display: flex; flex-direction: column; gap: 0.35rem; }
.figure-value {
  font-size: clamp(2.8rem, 1.6rem + 4.5vw, 5rem);
  font-weight: 760;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--oecc-blue);
}
.figure-label { font-size: var(--step-1); font-weight: 500; }
@media (max-width: 620px) { .impact-figures { grid-template-columns: 1fr; } }

/* water-vapour clip: kept near its native size, the source footage is small */
.vapour {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(4rem, 8vw, 6rem);
}
.vapour-media {
  max-width: 40rem;
  aspect-ratio: 16 / 9;
  background: #2a2526;
  overflow: hidden;
}
.vapour-video { width: 100%; height: 100%; object-fit: cover; }
.vapour-copy h3 { font-size: var(--step-3); margin-bottom: 0.9rem; }
.vapour-copy p { color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; max-width: 30rem; }
@media (max-width: 760px) { .vapour { grid-template-columns: 1fr; } }

.viz-pair {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (max-width: 860px) { .viz-pair { grid-template-columns: 1fr; } }

/* ---------- 3. Legacy ---------- */
.section-legacy { background: var(--paper); border-block: 1px solid var(--line); }

.dimension {
  --dim-ink: var(--ink);
  position: relative;
  margin-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem);
  padding-inline: 1px;
}
/* extension lines at both ends */
.dimension::before,
.dimension::after {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 1.4rem;
  width: 0;
  border-left: 1px solid var(--dim-ink);
}
.dimension::before { left: 0; }
.dimension::after { right: 0; }

.dim-overall {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 1.1rem;
  margin-bottom: 0.6rem;
}
.dim-overall::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1.5px solid var(--dim-ink);
}
.dim-tick {
  position: absolute;
  top: 100%;
  width: 22px;
  height: 0;
  border-top: 2.5px solid var(--dim-ink);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.dim-tick:first-child { left: 0; }
.dim-tick:last-child { left: 100%; }
.dim-label {
  position: relative;
  font-size: clamp(2.6rem, 1rem + 7vw, 6.5rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.dim-label strong { font-weight: inherit; }

/* Generation rows under the overall dimension. Both bars run to today;
   --start (2014) and --lead (2022, as a share of the second bar) are set by script.js. */
.dim-rows { position: relative; --start: 71.43%; --lead: 66.67%; }
.dim-row { position: relative; height: 3.6rem; }
.dim-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.9rem;
  height: 6px;
  background: var(--dim-ink);
}
.dim-row-2 .dim-bar { left: var(--start); background: var(--gen-2); }
.dim-row-label {
  position: absolute;
  left: 0;
  bottom: 1.45rem;
  font-size: var(--step-0);
  font-weight: 650;
  font-stretch: 112%;
  line-height: 1.2;
  white-space: nowrap;
}
/* second label sits just left of its bar, level with it */
.dim-row-2 .dim-row-label {
  left: auto;
  right: calc(100% - var(--start) + 0.75rem);
  bottom: 0.55rem;
  color: var(--gen-2-text);
}
.dim-mark {
  position: absolute;
  left: var(--lead);
  bottom: -6px;
  height: 22px;
  border-left: 2px solid var(--dim-ink);
}
.dim-mark span {
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateX(-50%);
  padding-bottom: 0.15rem;
  font-size: var(--step--1);
  font-weight: 650;
  white-space: nowrap;
}
/* extension line dropping from the 2014 start to the year row */
.dim-rows::after {
  content: "";
  position: absolute;
  left: var(--start);
  top: 3.6rem;
  bottom: 0.2rem;
  border-left: 1px solid var(--dim-ink);
}
.dim-years { position: relative; height: 1.6rem; }
.dim-years span {
  position: absolute;
  top: 0.15rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.dim-years span:nth-child(1) { left: 0.5rem; }
.dim-years span:nth-child(2) { left: calc(var(--start) + 0.5rem); }
.dim-years span:nth-child(3) { right: 0.5rem; }

.generations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
}
.gen h3 { font-size: var(--step-3); margin-bottom: 1rem; }
.gen p { max-width: 36rem; color: var(--ink-2); }
.gen-points {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 0;
  list-style: none;
  max-width: 46rem;
  border-top: 1.5px solid var(--ink);
}
.gen-points li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.gen-year { font-weight: 750; font-stretch: 112%; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .generations { grid-template-columns: 1fr; }
  .dim-row-label { font-size: var(--step--1); }
}

/* ---------- Leadership ---------- */
.section-leadership { background: var(--concrete); }
.people { border-top: 1.5px solid var(--ink); }
.people-group {
  font-size: var(--step-1);
  font-stretch: 112%;
  font-weight: 700;
  color: var(--ink-3);
  padding: 1.75rem 0 0.25rem;
}
.person {
  display: grid;
  grid-template-columns: 9.5rem 13rem minmax(0, 1fr);
  grid-template-areas: "photo id quote";
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  margin: 0;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.person-photo {
  grid-area: photo;
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
}
/* until a photo is added: the OECC mark, greyed back */
.person-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/img/logo-192.png") center / 46% no-repeat;
  filter: var(--placeholder-filter);
  opacity: 0.28;
}
.person-photo.has-photo::before { display: none; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-id { grid-area: id; display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.15rem; }
.person-name {
  font-size: var(--step-2);
  font-weight: 750;
  font-stretch: 112%;
  line-height: 1.15;
}
.person-role { font-size: var(--step--1); color: var(--ink-3); }
.person-quote { grid-area: quote; margin: 0; }
.person-quote p {
  max-width: 40rem;
  font-size: var(--step-1);
  line-height: 1.5;
  text-indent: -0.42em; /* hang the opening quote mark */
}
@media (max-width: 760px) {
  .person {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    grid-template-areas: "photo id" "quote quote";
    gap: 1rem 1.25rem;
  }
  .person-quote p { font-size: var(--step-0); }
}

/* ---------- 5. Projects ---------- */
.section-projects {
  background-color: var(--blueprint);
  /* drafting grid, as on a blueprint sheet */
  background-image:
    linear-gradient(rgba(157, 191, 211, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 191, 211, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--blueprint-ink);
}
.section-projects h2 { color: #fff; }
.section-projects .section-lede { color: var(--blueprint-ink-2); }

.projects {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.map {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}
.map svg { width: 100%; height: auto; max-height: calc(100vh - var(--nav-h) - 3rem); margin-inline: auto; }
.map-land {
  fill: rgba(207, 230, 243, 0.05);
  stroke: var(--blueprint-ink-2);
  stroke-width: 1.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.map-site { cursor: pointer; }
.map-site circle {
  fill: var(--orange);
  stroke: var(--blueprint);
  stroke-width: 5;
  transition: r 0.2s ease;
}
.map-site .map-ring {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.map-site text {
  fill: #fff;
  font-size: 30px;
  font-weight: 650;
  font-stretch: 112%;
  paint-order: stroke;
  stroke: var(--blueprint);
  stroke-width: 7px;
  stroke-linejoin: round;
}
.map-site.is-active circle:not(.map-ring) { r: 15; }
.map-site.is-active .map-ring { opacity: 1; }
.map-site:focus-visible { outline: none; }
.map-site:focus-visible .map-ring { opacity: 1; stroke: #fff; }

.site-list { display: grid; gap: 1rem; }
.site {
  position: relative;
  padding: 1.25rem 1.35rem 1.35rem;
  border: 1px solid rgba(157, 191, 211, 0.32);
  background: rgba(6, 30, 46, 0.55);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.site.is-active { border-color: var(--orange); background: rgba(6, 30, 46, 0.85); }
.site h3 {
  color: #fff;
  font-size: var(--step-2);
}
.site h3 button {
  all: unset;
  cursor: pointer;
}
.site h3 button:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.site-where { margin-top: 0.3rem; color: var(--blueprint-ink-2); font-size: var(--step--1); }
.site-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.25rem;
  margin-top: 1rem;
  font-size: var(--step--1);
}
.site-facts dt { color: var(--blueprint-ink-2); }
.site-facts dd { color: var(--blueprint-ink); }
.unit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.unit-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
}
.unit-name strong { font-weight: 650; color: #fff; }
.unit-status {
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.5;
  padding: 0 0.45rem;
  border-radius: 2px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.unit-operating { background: rgba(207, 230, 243, 0.16); color: var(--blueprint-ink); }
.unit-fuel { border-color: var(--orange); color: #FFC48C; }
.unit-construction { border-color: rgba(207, 230, 243, 0.55); color: var(--blueprint-ink); }
.unit-refurb { border-color: rgba(255, 196, 140, 0.55); color: #FFC48C; }
.unit-shutdown { color: var(--blueprint-ink-2); border-color: rgba(157, 191, 211, 0.3); }
.unit-asof { margin-top: 0.45rem; font-size: 0.75rem; color: var(--blueprint-ink-2); }

@media (max-width: 860px) {
  .map-site text { font-size: 44px; stroke-width: 9px; }
  .map-site circle { r: 16; }
  .map-site.is-active circle:not(.map-ring) { r: 19; }
  .map-site .map-ring { r: 32; }
  .projects { grid-template-columns: 1fr; }
  .map { position: relative; top: 0; max-width: 26rem; margin-inline: auto; }
  .map svg { max-height: none; }
}

/* ---------- 5. Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.contact-details { border-top: 1.5px solid var(--ink); }
.contact-details > div {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.contact-details dt { color: var(--ink-3); font-size: var(--step--1); padding-top: 0.15rem; }
.contact-details dd { font-weight: 550; }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; } }

/* Google Form dialog */
.form-dialog {
  width: min(46rem, calc(100vw - 1.5rem));
  height: min(52rem, calc(100vh - 2rem));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(8, 20, 30, 0.45);
}
.form-dialog[open] { display: flex; flex-direction: column; }
.form-dialog::backdrop { background: rgba(8, 20, 30, 0.7); }
.form-dialog-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
}
.form-dialog-bar h2 { font-size: var(--step-1); margin-right: auto; }
.form-dialog-newtab { font-size: var(--step--1); font-weight: 600; }
.form-dialog-close {
  font: inherit;
  font-weight: 650;
  font-size: var(--step--1);
  padding: 0.45rem 0.9rem;
  color: var(--on-ink);
  background: var(--ink);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.form-dialog-body { flex: 1; min-height: 0; }
.form-dialog-body iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-edge);
  color: rgba(255, 255, 255, 0.8);
  padding-block: 2.5rem;
  font-size: var(--step--1);
}
.footer-inner { display: grid; gap: 0.5rem; }
.footer-art { margin-bottom: 1.25rem; }
.footer-art img { width: min(100%, 24rem); height: auto; }
.footer-contact { color: rgba(255, 255, 255, 0.86); }
.site-footer a { color: #fff; }
.footer-small { color: rgba(255, 255, 255, 0.58); font-size: 0.8125rem; max-width: 60rem; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .site-nav, .form-dialog { display: none !important; }
  .hero { min-height: auto; color: var(--ink); background: none; }
  .hero-video, .hero-shade { display: none; }
  .title-block { color: var(--ink); background: none; border-color: var(--ink); }
  .section-projects { background: none; color: var(--ink); }
}

/* ---------- 404 ---------- */
.not-found {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding-block: 4rem;
}
.not-found h1 { font-size: var(--step-4); max-width: 18ch; }
.brand-dark { color: var(--ink); margin-bottom: 1.5rem; }