/* GECO — style v4: "Pontic Chart"
   A hydrographic chart and an HVDC cable cross-section, set by a Swiss office.
   Cool mineral chart paper, abyssal ink, copper conductor as the single brand accent.
   Signatures: isobaths behind dark heads, a graduated chart neatline around the route
   schematic and the status register, kilometre-point (KP) section numbers, and the
   cable cross-section ring (copper → XLPE → screen → lead) used in four places only.
   No shadows, no glow, corners 0. Same 12-column grid and breakpoints as v1 (style.css, retired)
   (40em, 64em; header and navigation switch to desktop at 72em). English-only portal.

   Fonts — self-hosted in assets/fonts (woff2, font-display:swap), the same variable files and
   unicode-range subsets Google Fonts serves, latin + latin-ext only (no other scripts are used):
     Roboto Flex (opsz, wdth 100–151, wght 400–700) — display, UI, figures (OFL 1.1)
     Source Serif 4 (opsz, wght 400–600 + italic 400) — leads, prose, chart water names (OFL 1.1)
     Roboto Mono 400 — registry codes, TYNDP numbers, spec values only (OFL 1.1)
   Licence texts sit next to the fonts (assets/fonts/OFL-*.txt) and are published with them.
   Each page preloads the Roboto Flex latin file.
   If Georgian-script content is ever added, append Noto Sans/Serif Georgian to the stacks. */

/* ==========================================================================
   0. Fonts
   ========================================================================== */
/* Roboto Flex — latin-ext */
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:400 700;font-stretch:100% 151%;font-display:swap;
  src:url(../assets/fonts/roboto-flex-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Roboto Flex — latin */
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:400 700;font-stretch:100% 151%;font-display:swap;
  src:url(../assets/fonts/roboto-flex-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Source Serif 4 — latin-ext */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../assets/fonts/source-serif-4-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Source Serif 4 — latin */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../assets/fonts/source-serif-4-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Source Serif 4 italic — latin-ext */
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;
  src:url(../assets/fonts/source-serif-4-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Source Serif 4 italic — latin */
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;
  src:url(../assets/fonts/source-serif-4-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Roboto Mono — latin-ext */
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/roboto-mono-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Roboto Mono — latin */
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/roboto-mono-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   1. Reset
   ========================================================================== */
*,
*::before,
*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
}

body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class],nav ul{list-style:none;margin:0;padding:0}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
address{font-style:normal}
abbr[title]{text-decoration:none}
table{border-collapse:collapse;border-spacing:0}
[hidden]{display:none !important}

/* ==========================================================================
   2. Tokens
   ========================================================================== */
:root{
  /* chart paper: cool mineral, not cream, not pure white */
  --paper:#F3F4F1;
  --paper-2:#E7EAE6;
  --surface:#FAFBF9;
  --land:var(--paper-2);       /* land tint on the schematic */
  --shelf:#DCE8EA;             /* shallow water: tinted; deep water stays white */

  /* abyssal ink */
  --ink:#0D1B24;
  --ink-2:#2A3B45;
  --muted:#5A6A72;
  --rule:#C9D0CF;
  --rule-strong:#0D1B24;

  /* copper conductor — the one brand accent (≤5% of any view) */
  --copper:#9A4E24;            /* text-safe on paper */
  --copper-bright:#D27A45;     /* on abyssal surfaces */

  /* chart layers */
  --pontic:#1F5F78;
  --pontic-bright:#7FB3C6;     /* Link 2 swatch on ink */
  --chart-magenta:#8A3A66;     /* cable-route convention: selected link's submarine section + cable notes */
  --link-1:var(--copper);
  --link-2:var(--pontic);
  --link-3:#6F7F86;

  /* cable cross-section */
  --xlpe:#E4DDC8;              /* insulation, ivory */
  --screen:#0D1B24;            /* semiconducting screen */
  --lead:#6F7F86;              /* lead sheath */

  --on-copper:#FFFFFF;
  --ok:#2F6B4A;
  --error:#A8261D;

  /* abyssal surfaces */
  --dark:#0D1B24;
  --dark-2:#132733;
  --on-dark:#ECEFEA;
  --on-dark-muted:#9FB0B5;
  --on-dark-faint:rgb(159 176 181 / .5);
  --rule-dark:rgb(236 239 234 / .16);
  --ok-dark:#8CC4A2;

  /* print */
  --print-paper:#FFFFFF;
  --print-ink:#000000;
  --print-ink-2:#333333;
  --print-rule:#999999;

  /* type */
  --f-sans:"Roboto Flex",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --f-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"Roboto Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --wd-display:112%;           /* H1/H2 width; widened at 40em/64em */
  --wd-figure:118%;

  --fs-body:clamp(1rem, .96rem + .15vw, 1.0625rem);
  --fs-prose:clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  --fs-lead:clamp(1.125rem, 1rem + .45vw, 1.375rem);
  --fs-h1:clamp(2.05rem, 1.25rem + 3.4vw, 4.25rem);
  --fs-h2:clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --fs-h3:clamp(1.125rem, 1.04rem + .4vw, 1.375rem);
  --fs-figure:clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  --fs-meta:.75rem;
  --lh-caps:1.35;              /* caps labels, incl. the hero kicker */
  --lh-h1:1.02;

  /* Roboto Flex vertical metrics (hhea / OS/2, units ÷ 2048) — used to find the
     cap-height line of H1 where text-box-trim is unsupported */
  --sans-ascent:.9277;
  --sans-descent:.2441;
  --sans-cap:.7109;
  --track-caps:.1em;

  /* space & layout */
  --gutter:clamp(20px, 4vw, 48px);
  --col-gap:clamp(16px, 2vw, 32px);
  --section:clamp(56px, 4rem + 4vw, 128px);
  --wrap:1320px;
  --radius:0;
  --ease:cubic-bezier(.2,.6,.3,1);
  --t:.18s;

  /* motifs */
  --ring:radial-gradient(circle closest-side,
      var(--copper) 0 36%, var(--xlpe) 38% 60%, var(--screen) 62% 75%, var(--lead) 77% 96%, transparent 100%);
  --icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9l6-6M4.5 3H9v4.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  --icon-replay:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 9.5A5.5 5.5 0 1 1 11.6 4M12.2 1.2v3.3H8.9' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --isobaths:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cstyle%3Epath{vector-effect:non-scaling-stroke}%3C/style%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.4'%3E%3Cpath d='M-80 -158C-51 -147 37 -110 96 -91S213 -55 272 -41S389 -17 448 -4S565 22 624 40S741 82 800 103S917 149 976 166S1093 197 1152 207S1269 221 1328 226S1445 234 1504 239S1651 252 1680 254'/%3E%3Cpath d='M-80 -133C-51 -122 37 -88 96 -68S213 -33 272 -15S389 21 448 42S565 89 624 113S741 166 800 185S917 220 976 229S1093 238 1152 241S1269 242 1328 245S1445 255 1504 261S1651 279 1680 283'/%3E%3Cpath d='M-80 -82C-51 -70 37 -32 96 -10S213 29 272 49S389 88 448 108S565 151 624 168S741 196 800 210S917 242 976 251S1093 259 1152 263S1269 268 1328 277S1445 308 1504 320S1651 344 1680 349'/%3E%3Cpath d='M-80 -50C-51 -39 37 -6 96 15S213 55 272 77S389 125 448 147S565 192 624 208S741 233 800 244S917 269 976 276S1093 281 1152 289S1269 313 1328 324S1445 347 1504 355S1651 371 1680 374'/%3E%3Cpath d='M-80 -2C-51 10 37 45 96 69S213 120 272 144S389 194 448 213S565 248 624 261S741 281 800 289S917 303 976 312S1093 333 1152 344S1269 370 1328 380S1445 400 1504 407S1651 422 1680 425'/%3E%3Cpath d='M-80 81C-51 92 37 125 96 149S213 202 272 224S389 267 448 282S565 304 624 313S741 327 800 339S917 367 976 384S1093 424 1152 440S1269 470 1328 479S1445 489 1504 492S1651 498 1680 499'/%3E%3Cpath d='M-80 171C-51 182 37 217 96 239S213 285 272 304S389 338 448 352S565 376 624 390S741 421 800 439S917 480 976 498S1093 534 1152 545S1269 562 1328 567S1445 571 1504 574S1651 583 1680 585'/%3E%3Cpath d='M-80 272C-51 287 37 335 96 361S213 411 272 429S389 457 448 470S565 493 624 506S741 535 800 550S917 582 976 594S1093 615 1152 623S1269 635 1328 643S1445 662 1504 673S1651 703 1680 709'/%3E%3Cpath d='M-80 381C-51 395 37 442 96 467S213 512 272 531S389 565 448 583S565 622 624 640S741 679 800 692S917 714 976 720S1093 723 1152 726S1269 731 1328 740S1445 765 1504 778S1651 813 1680 820'/%3E%3Cpath d='M-80 514C-51 525 37 561 96 582S213 619 272 638S389 678 448 699S565 745 624 764S741 800 800 811S917 826 976 831S1093 837 1152 844S1269 862 1328 874S1445 904 1504 915S1651 937 1680 941'/%3E%3Cpath d='M-80 641C-51 651 37 682 96 702S213 740 272 760S389 802 448 821S565 861 624 876S741 902 800 912S917 928 976 938S1093 959 1152 972S1269 1002 1328 1014S1445 1040 1504 1047S1651 1057 1680 1059'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.6' font-family='Georgia,serif' font-style='italic' font-size='14'%3E%3C/g%3E%3C/svg%3E");
  --isobath-alpha:.28;         /* × stroke-opacity .4 in the SVG ≈ 11% lines; depth figures live on the seabed profile */
  /* sea contours inside the schematic; stroke colour mirrors --pontic (data URIs cannot read tokens) */
  --sea-isobaths:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 290 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%231F5F78' stroke-opacity='.2' vector-effect='non-scaling-stroke'%3E%3Cpath d='M30 0C34 40 26 80 33 120S28 175 32 200' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M48 0C56 50 44 95 55 140S47 180 52 200' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M262 0C258 45 266 90 259 130S264 180 260 200' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M246 0C238 40 250 85 240 125S247 175 243 200' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M78 0C96 30 84 70 100 100S88 165 104 200' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M214 0C200 40 214 80 196 110S208 170 190 200' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  /* seabed profile Constanța → Anaklia, depth axis and end labels (masks, colour from token) */
  --profile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 90' preserveAspectRatio='none'%3E%3Cstyle%3E*{vector-effect:non-scaling-stroke}%3C/style%3E%3Cg stroke='%23fff' fill='none'%3E%3Cpath d='M0 6H1000' stroke-opacity='.35' stroke-dasharray='2 4'/%3E%3Cpath d='M0 22H1000' stroke-opacity='.35' stroke-dasharray='2 4'/%3E%3Cpath d='M0 48H1000' stroke-opacity='.35' stroke-dasharray='2 4'/%3E%3Cpath d='M0 82H1000' stroke-opacity='.35' stroke-dasharray='2 4'/%3E%3Cpath d='M0 6L60 9.2L120 12.4L175 15.6L195 22L215 35L240 53.7L265 67.8L290 74.9L330 78.6L420 80.6L520 81.7L600 82L690 81.2L780 80.3L860 78.9L910 73.5L935 56.5L950 38.3L962 23.6L975 15.6L1000 6' stroke-width='1.25'/%3E%3C/g%3E%3Cpath d='M0 6L60 9.2L120 12.4L175 15.6L195 22L215 35L240 53.7L265 67.8L290 74.9L330 78.6L420 80.6L520 81.7L600 82L690 81.2L780 80.3L860 78.9L910 73.5L935 56.5L950 38.3L962 23.6L975 15.6L1000 6V90H0Z' fill='%23fff' fill-opacity='.22'/%3E%3C/svg%3E");
  --profile-axis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='90'%3E%3Cg fill='%23fff' font-family='Arial,sans-serif' font-size='9' text-anchor='end'%3E%3Ctext x='52' y='9.0'%3E0%3C/text%3E%3Ctext x='52' y='25.0'%3E%E2%88%92200%3C/text%3E%3Ctext x='52' y='51.0'%3E%E2%88%921000%3C/text%3E%3Ctext x='52' y='85.0'%3E%E2%88%922200 m%3C/text%3E%3C/g%3E%3C/svg%3E");
  --profile-west:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='12'%3E%3Ctext x='0' y='9' fill='%23fff' font-family='Arial,sans-serif' font-size='9' letter-spacing='1.5' text-anchor='start'%3ECONSTAN%C8%9AA%3C/text%3E%3C/svg%3E");
  --profile-east:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='12'%3E%3Ctext x='90' y='9' fill='%23fff' font-family='Arial,sans-serif' font-size='9' letter-spacing='1.5' text-anchor='end'%3EANAKLIA%3C/text%3E%3C/svg%3E");
  --profile-h:90px;
  --tick:9px;                  /* neatline graduation step */
  --nl:var(--ink);             /* neatline colour */
  --nl-light:rgb(13 27 36 / .55);
  --nl-dark:rgb(159 176 181 / .7);
}

/* ==========================================================================
   2a. Motifs
   ========================================================================== */

/* Isobaths — depth contours behind dark heads. The SVG is a mask, so the
   colour comes from a token; one tile with `cover`, never repeated. */
.hero,.page-head{position:relative;isolation:isolate}
.hero::before,.page-head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--on-dark);opacity:var(--isobath-alpha);
  -webkit-mask:var(--isobaths) 62% 40% / cover no-repeat;mask:var(--isobaths) 62% 40% / cover no-repeat}
.page-head{--isobath-alpha:.22}

/* Chart neatline — 1px outer rule, 3px graduated band (alternating divisions),
   1px inner rule, corner ticks. Drawn on a pseudo-element 6px outside the box so the
   outer rule sits on the element edge and the ticks run past the corners. */
.route__figure,.hero__status{position:relative}
.route__figure::before,.hero__status::before{content:"";position:absolute;inset:-6px;pointer-events:none;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
  background:
    /* outer rule */
    linear-gradient(var(--nl),var(--nl)) 6px 6px / calc(100% - 12px) 1px,
    linear-gradient(var(--nl),var(--nl)) 6px calc(100% - 6px) / calc(100% - 12px) 1px,
    linear-gradient(var(--nl),var(--nl)) 6px 6px / 1px calc(100% - 12px),
    linear-gradient(var(--nl),var(--nl)) calc(100% - 6px) 6px / 1px calc(100% - 12px),
    /* graduated band, 3px */
    repeating-linear-gradient(90deg, var(--nl) 0 var(--tick), transparent 0 calc(var(--tick) * 2)) 7px 7px / calc(100% - 14px) 3px,
    repeating-linear-gradient(90deg, var(--nl) 0 var(--tick), transparent 0 calc(var(--tick) * 2)) 7px calc(100% - 7px) / calc(100% - 14px) 3px,
    repeating-linear-gradient(180deg, var(--nl) 0 var(--tick), transparent 0 calc(var(--tick) * 2)) 7px 7px / 3px calc(100% - 14px),
    repeating-linear-gradient(180deg, var(--nl) 0 var(--tick), transparent 0 calc(var(--tick) * 2)) calc(100% - 7px) 7px / 3px calc(100% - 14px),
    /* inner rule */
    linear-gradient(var(--nl),var(--nl)) 10px 10px / calc(100% - 20px) 1px,
    linear-gradient(var(--nl),var(--nl)) 10px calc(100% - 10px) / calc(100% - 20px) 1px,
    linear-gradient(var(--nl),var(--nl)) 10px 10px / 1px calc(100% - 20px),
    linear-gradient(var(--nl),var(--nl)) calc(100% - 10px) 10px / 1px calc(100% - 20px),
    /* corner ticks */
    linear-gradient(var(--nl),var(--nl)) 0 6px / 5px 1px,
    linear-gradient(var(--nl),var(--nl)) 6px 0 / 1px 5px,
    linear-gradient(var(--nl),var(--nl)) 100% 6px / 5px 1px,
    linear-gradient(var(--nl),var(--nl)) calc(100% - 6px) 0 / 1px 5px,
    linear-gradient(var(--nl),var(--nl)) 0 calc(100% - 6px) / 5px 1px,
    linear-gradient(var(--nl),var(--nl)) 6px 100% / 1px 5px,
    linear-gradient(var(--nl),var(--nl)) 100% calc(100% - 6px) / 5px 1px,
    linear-gradient(var(--nl),var(--nl)) calc(100% - 6px) 100% / 1px 5px;
  background-repeat:no-repeat}
.route__figure{--nl:var(--nl-light)}
.hero__status{--nl:var(--nl-dark)}

/* Seabed profile — a section along the cable from Constanța to Anaklia, drawn as
   masks above the key figures: dashed depth guides 0 / −200 / −1000 / −2200 m.
   Vertical scale is broken (shelf exaggerated) so the −200 m step stays legible. */
.telemetry{position:relative}
.telemetry::before{content:"";position:absolute;bottom:calc(100% + 28px);height:calc(var(--profile-h) + 14px);pointer-events:none;
  left:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));right:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background:var(--on-dark);opacity:.25;
  -webkit-mask:var(--profile-west) 60px 0 / 90px 12px no-repeat, var(--profile-east) 100% 0 / 90px 12px no-repeat,
    var(--profile-axis) 0 14px / 56px var(--profile-h) no-repeat, var(--profile) 60px 14px / calc(100% - 60px) var(--profile-h) no-repeat;
  mask:var(--profile-west) 60px 0 / 90px 12px no-repeat, var(--profile-east) 100% 0 / 90px 12px no-repeat,
    var(--profile-axis) 0 14px / 56px var(--profile-h) no-repeat, var(--profile) 60px 14px / calc(100% - 60px) var(--profile-h) no-repeat}

/* Cable cross-section ring — used only for: KP section marker, .state marks,
   timeline "next" marker and the footer divider. */
.section__no,.footer__base::before{background-image:var(--ring);background-repeat:no-repeat}

/* ==========================================================================
   3. Base
   ========================================================================== */
body{background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.6 var(--f-sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.utility :focus-visible,.hero :focus-visible,.page-head :focus-visible,.footer :focus-visible,.skip-link:focus-visible{outline-color:var(--copper-bright)}
main:focus{outline:none}
h1,h2,h3{font-family:var(--f-sans);font-weight:600;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;hyphens:auto}
h1,h2{font-stretch:var(--wd-display);font-weight:620}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:-.018em;hyphens:manual}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.2}
p{max-width:68ch}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--gutter);top:-100px;z-index:100;padding:.7em 1.1em;background:var(--ink);color:var(--on-dark);font-weight:600;text-decoration:none}
.skip-link:focus{top:8px}

/* caps labels: Roboto Flex, not mono */
.kicker,.section__no,.dash__label,.bulletin__meta,.register dt,.telemetry dt,.hero__status-title,.route__panel dt,.spec dt,.people__meta dt,.minor-h,.footer__h,.doclist__type,.ledger thead th,.route__btn,.crumbs ol,.nav-toggle,.ledger--links td[data-label]::before{
  font-family:var(--f-sans);font-size:var(--fs-meta);font-weight:600;font-stretch:100%;letter-spacing:var(--track-caps);text-transform:uppercase;line-height:var(--lh-caps)}

/* actions */
.btn{display:inline-flex;align-items:center;min-height:48px;padding:.7em 1.5em;border:1px solid currentColor;border-radius:var(--radius);font-family:var(--f-sans);font-weight:600;font-stretch:108%;font-size:1rem;letter-spacing:.01em;text-decoration:none;transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
.btn--light{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
.btn--light:hover{background:var(--copper-bright);border-color:var(--copper-bright)}
.textlink{display:inline-flex;align-items:center;gap:.6em;min-height:44px;font-family:var(--f-sans);font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat;transition:color var(--t) var(--ease)}
.textlink::after{content:"";flex:none;width:14px;height:10px;background:currentColor;-webkit-mask:var(--arrow) center / contain no-repeat;mask:var(--arrow) center / contain no-repeat;transition:transform var(--t) var(--ease)}
.textlink:hover::after{transform:translateX(3px)}
.textlink:hover{color:var(--copper)}
.textlink--light{color:var(--on-dark)}
.textlink--light:hover{color:var(--copper-bright)}

/* status marks — cable section: done = filled conductor, active = copper core
   with screen ring, planned = outline only */
.state{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-sans);font-size:var(--fs-meta);font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.state::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;border:1.5px solid currentColor}
.state--done::before{background:currentColor}
.state--active::before{border-color:currentColor;background:radial-gradient(circle closest-side, var(--copper-bright) 0 55%, transparent 60%)}

/* ==========================================================================
   4. Masthead
   ========================================================================== */
.utility{background:var(--dark);color:var(--on-dark-muted);font-size:var(--fs-meta)}
.utility__inner{display:flex;align-items:center;min-height:36px;padding-block:6px}
.utility__status{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 24px;width:100%;max-width:none}
.utility__label{display:inline-flex;align-items:center;gap:10px;color:var(--on-dark);font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase}
.utility__label::before{content:"";width:2px;height:11px;background:var(--copper-bright)}
.utility__basis{display:none;font-family:var(--f-serif);font-style:italic;font-size:.875rem;letter-spacing:.01em;color:var(--on-dark-muted)}

/* Corridor band (variant A: flags above the title), replaces the .utility bar on every page.
   Not sticky; same container and gutters as the header. The side texts carry over the utility
   bar's label and agreement line and are hidden below 1280px. Photo: assets/banner/gec-band(-mobile).jpg */
.gec-band{position:relative;overflow:hidden;color:#fff;background:#4a5a92 url(../assets/banner/gec-band.jpg) center 52% / cover no-repeat}
.gec-band::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,27,36,.30),rgba(13,27,36,.10) 45%,rgba(13,27,36,.35))}
.gec-band__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0 24px;min-height:118px;padding-block:16px 14px}
.gec-band__center{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.gec-band__flags{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.gec-band__flags img{display:block;width:42px;height:28px;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.gec-band__title{font-family:var(--f-sans);font-weight:600;font-size:18px;line-height:1.3;letter-spacing:.01em;text-shadow:0 1px 6px rgba(13,27,36,.5)}
.gec-band__line{white-space:nowrap}
.gec-band__br{display:none}
.gec-band__label,.gec-band__basis{display:none;text-shadow:0 1px 4px rgba(13,27,36,.6)}
.gec-band__label{grid-column:1;justify-self:start;align-items:center;gap:10px;color:var(--on-dark);font-family:var(--f-sans);font-size:var(--fs-meta);font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;line-height:var(--lh-caps)}
.gec-band__label::before{content:"";flex:none;width:2px;height:11px;background:var(--copper-bright)}
.gec-band__basis{grid-column:3;justify-self:end;text-align:right;white-space:nowrap;font-family:var(--f-serif);font-style:italic;font-size:.875rem;letter-spacing:.01em;color:var(--on-dark)}
@media (min-width:80em){
  .gec-band__label{display:inline-flex}
  .gec-band__basis{display:block}
}
@media (max-width:37.5em){
  .gec-band{background-image:url(../assets/banner/gec-band-mobile.jpg);background-position:42% 52%}
  .gec-band__in{min-height:96px;padding-block:12px}
  .gec-band__center{gap:9px}
  .gec-band__flags{gap:16px}
  .gec-band__flags img{width:33px;height:22px}
  .gec-band__title{font-size:13.5px}
  .gec-band__br{display:inline}
}
@media (forced-colors: active){
  .gec-band{background:Canvas;color:CanvasText}
  .gec-band::before{display:none}
  .gec-band__label::before{background:CanvasText}
}

.masthead{background:var(--paper)}
.masthead__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;border-bottom:2px solid var(--rule-strong)}
.logo{display:flex;align-items:center;min-height:44px;padding-block:14px;text-decoration:none}
.logo picture,.logo__img{display:block}
.logo__img{width:auto;height:40px}            /* mark only below 40em */

.nav-toggle{display:none;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 0 0 12px;background:none;border:0;color:var(--ink)}
.js .nav-toggle{display:inline-flex}
.nav-toggle__icon{position:relative;display:block;width:22px;height:10px}
.nav-toggle__icon::before,
.nav-toggle__icon::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform var(--t) var(--ease)}
.nav-toggle__icon::before{top:0}
.nav-toggle__icon::after{bottom:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before{transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after{transform:translateY(-4px) rotate(-45deg)}

.primary-nav{flex-basis:100%}
.js .primary-nav:not(.is-open){display:none}
.primary-nav ul{border-top:1px solid var(--rule)}
.primary-nav li + li{border-top:1px solid var(--rule)}
.primary-nav a{display:flex;align-items:baseline;gap:16px;min-height:52px;padding:14px 0;font-family:var(--f-sans);font-weight:600;font-stretch:108%;font-size:1.125rem;text-decoration:none;color:var(--ink);transition:color var(--t) var(--ease)}
.primary-nav a:hover,.primary-nav a[aria-current="page"]{color:var(--copper)}
.primary-nav a[aria-current="page"]{background:linear-gradient(var(--copper),var(--copper)) 0 0 / 3px 100% no-repeat;padding-left:14px}

/* ==========================================================================
   5. Hero, status register, telemetry
   ========================================================================== */
.hero{background:var(--dark);color:var(--on-dark)}
.hero__grid{display:grid;gap:56px;padding-block:clamp(48px, 3rem + 4vw, 120px) calc(var(--profile-h) + clamp(84px, 4rem + 2vw, 112px))}
.hero{--hero-gap:24px}
.hero__main{display:grid;gap:var(--hero-gap);align-content:start}
.kicker{color:var(--copper-bright)}
.hero h1{max-width:18ch}
.hero__lead{font-family:var(--f-serif);font-size:var(--fs-lead);line-height:1.5;color:var(--on-dark-muted);max-width:50ch}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:8px}

/* project passport, framed as a chart */
.hero__status{padding:20px 20px 12px;background:var(--dark)}
.hero__status-title{color:var(--on-dark);padding-bottom:12px}
.register__row{display:grid;gap:4px;padding-block:14px;border-top:1px solid var(--rule-dark)}
.register dt{color:var(--on-dark-muted)}
.register dd{display:grid;gap:4px}
.register__value{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-weight:600;font-size:1.0625rem;line-height:1.3}
.register__meta{font-size:.875rem;color:var(--on-dark-muted);font-variant-numeric:tabular-nums}
.hero .state--done{color:var(--ok-dark)}
.hero .state--active{color:var(--copper-bright)}

/* key figures, read like an instrument scale */
.telemetry{border-top:1px solid var(--rule-dark);background:var(--dark-2)}
.telemetry__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.telemetry__cell{display:flex;flex-direction:column;gap:12px;padding:22px 16px 24px 0;min-width:0;border-bottom:1px solid var(--rule-dark)}
.telemetry__cell:nth-child(2n){padding-left:16px;border-left:1px solid var(--rule-dark)}
.telemetry__cell:last-child{grid-column:1 / -1;border-left:0;padding-left:0;border-bottom:0}
.telemetry dt{color:var(--on-dark-muted)}
.telemetry dd{font-weight:600;font-stretch:var(--wd-figure);font-size:var(--fs-figure);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.telemetry__cell::after{content:"";width:20px;height:2px;margin-top:auto;background:var(--copper-bright)}
.telemetry dd abbr,.telemetry__unit{font-size:.44em;font-weight:500;font-stretch:100%;letter-spacing:.04em;margin-left:.25em;color:var(--on-dark-muted)}
.telemetry__unit{display:block;margin:.6em 0 0;font-size:.75rem;font-weight:600;letter-spacing:.1em}

/* ==========================================================================
   6. Sections
   ========================================================================== */
.section{padding-block:var(--section)}
.section--rule{padding-top:0}
.section--rule .section__head{margin-top:0}

/* KP marker: the head rule is the cable route; a tick drops to the section ring */
.section__head{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:10px 20px;padding-top:18px;border-top:1px solid var(--rule-strong);margin-bottom:clamp(28px, 2rem + 1vw, 48px)}
.section__no{display:inline-flex;align-items:center;gap:.45em;min-height:14px;padding-left:24px;background-size:14px 14px;background-position:0 50%;
  color:var(--copper);font-size:1rem;font-weight:650;font-stretch:125%;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1;margin-top:.3em}
.section__no::before{content:"KP" / "";font-size:.6875rem;font-weight:600;font-stretch:100%;letter-spacing:.1em;color:var(--muted)}
.section__more{justify-self:start}

/* --- route schematic --- */
.route{display:grid;gap:20px}
.route__controls{display:none;flex-wrap:wrap;border:1px solid var(--rule-strong);justify-self:start}
.js .route__controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule-strong);justify-self:stretch}
.route__btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;background:var(--paper);border:0;border-radius:var(--radius);color:var(--ink);transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.route__btn:hover{background:var(--paper-2)}
.route__btn[aria-pressed="true"]{background:var(--ink);color:var(--on-dark)}
/* swatches repeat colour AND stroke weight, so links never differ by colour alone */
.key{display:inline-block;width:20px;height:4px;vertical-align:middle}
.key--l1{background:var(--link-1)}
.key--l2{height:3px;background:var(--link-2)}
.key--l3{height:2px;background:var(--link-3)}
.route__btn[aria-pressed="true"] .key--l1{background:var(--copper-bright)}
.route__btn[aria-pressed="true"] .key--l2{background:var(--pontic-bright)}
.route__btn[aria-pressed="true"] .key--l3{background:var(--on-dark-muted)}

.route__figure{margin:6px;padding:14px;background:var(--land);min-width:0}
.route__scroll{overflow-x:auto}
.route__figure .map__hint{margin-bottom:10px}
/* deep water: white with contours, placed exactly under the sea rect (x 352–642, y 40–240 of 1000×300) */
.route__svg{width:100%;min-width:720px;height:auto;
  background:var(--sea-isobaths) 49.58% 40% / 29% 66.67% no-repeat, linear-gradient(var(--surface),var(--surface)) 49.58% 40% / 29% 66.67% no-repeat}
.route__legend{display:flex;flex-wrap:wrap;gap:8px 24px;padding:12px 4px 4px;border-top:1px solid var(--rule);font-size:.8125rem;color:var(--ink-2)}
.route__legend span{display:inline-flex;align-items:center;gap:8px}
.route__legend span:last-child{order:2;margin-left:auto;font-family:var(--f-serif);font-style:italic;color:var(--muted)}
.route__legend::before{content:"Submarine cable";order:1;padding-left:28px;background:repeating-linear-gradient(90deg, var(--chart-magenta) 0 7px, transparent 7px 10px) 0 50% / 20px 2px no-repeat}
/* "All links": submarine sections keep their link colours, so the key is a neutral dash */
.route[data-active="all"] .route__legend::before{background-image:repeating-linear-gradient(90deg, var(--muted) 0 7px, transparent 7px 10px)}

/* chart conventions inside the schematic */
.s-grid{stroke:var(--rule);stroke-width:.5;opacity:.7}
.s-hatch{stroke:var(--pontic);stroke-width:.5;opacity:.2}
.s-sea{fill:none;stroke:var(--shelf);stroke-width:30;stroke-dasharray:0 290 200 290 200 0;clip-path:inset(0) fill-box}
.s-sea-edge{fill:none;stroke:var(--pontic);stroke-width:1;stroke-dasharray:0 290 200 290 200 0}
.s-border{stroke:var(--muted);stroke-width:1;stroke-dasharray:6 3 1 3}
.s-zone{fill:var(--muted);font:600 11px var(--f-sans);letter-spacing:.16em}
.s-zone[x="497"]{fill:var(--pontic);font:italic 400 13px var(--f-serif);letter-spacing:.3em}
.s-place{fill:var(--ink);font:600 11px var(--f-sans);letter-spacing:.06em;paint-order:stroke;stroke:var(--land);stroke-width:3px;stroke-linejoin:round}
.s-chain{fill:var(--chart-magenta);font:italic 400 12px var(--f-serif);letter-spacing:.08em}
.s-cap{fill:var(--ink-2);font:600 11px var(--f-sans);letter-spacing:.04em;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--land);stroke-width:3px;stroke-linejoin:round}
.s-line{fill:none;stroke-linecap:butt}
.s-l1{stroke:var(--link-1);stroke-width:4}
.s-l2{stroke:var(--link-2);stroke-width:3}
.s-l3{stroke:var(--link-3);stroke-width:2}
/* submarine sections: dashed in the link colour; the selected link switches to the
   chart-magenta cable symbol (2px). Dash patterns differ per link. */
.s-l1.s-sub{stroke-dasharray:10 5}
.s-l2.s-sub{stroke-dasharray:6 4}
.s-l3.s-sub{stroke-dasharray:2 4}
.route[data-active="1"] [data-link="1"] .s-sub,
.route[data-active="2"] [data-link="2"] .s-sub,
.route[data-active="3"] [data-link="3"] .s-sub{stroke:var(--chart-magenta)}   /* keeps the link's land weight (4 / 3 / 2) */
.s-conv{fill:var(--ink)}
.s-node{fill:var(--surface);stroke:var(--ink);stroke-width:1.5;rx:50%}
.s-land{fill:var(--copper);stroke:var(--screen);stroke-width:2.5}
.s-link{transition:opacity .2s var(--ease)}
.route[data-active="1"] .s-link:not([data-link="1"]),
.route[data-active="2"] .s-link:not([data-link="2"]),
.route[data-active="3"] .s-link:not([data-link="3"]){opacity:.12}
@media (prefers-reduced-motion: no-preference){
  .route[data-active="1"] [data-link="1"] .s-sub,
  .route[data-active="2"] [data-link="2"] .s-sub,
  .route[data-active="3"] [data-link="3"] .s-sub{animation:geco-flow 3.2s linear infinite}
}
@keyframes geco-flow{to{stroke-dashoffset:-30}}

/* information panel, set like a chart legend */
.route__info{border-top:2px solid var(--rule-strong);align-self:start}
.route__panel{display:grid}
.route__panel div{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--rule)}
.route__panel dt{color:var(--muted)}
.route__panel dd{font-size:.9375rem;line-height:1.4;font-variant-numeric:tabular-nums}
.route__panel + .route__panel{border-top:2px solid var(--rule-strong)}

/* --- programme overview: asymmetric dashboard --- */
.dash{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule-strong)}
.dash__item{position:relative;display:grid;gap:16px;align-content:start;padding:clamp(20px, 1rem + 1.5vw, 40px);background:var(--paper);min-width:0;transition:background-color var(--t) var(--ease)}
.dash__item::after{content:"";position:absolute;top:calc(clamp(20px, 1rem + 1.5vw, 40px) + 2px);right:clamp(20px, 1rem + 1.5vw, 40px);width:16px;height:11px;background:var(--copper);-webkit-mask:var(--arrow) center / contain no-repeat;mask:var(--arrow) center / contain no-repeat;transition:transform var(--t) var(--ease)}
.dash__item:hover{background:var(--surface)}
.dash__item:hover::after{transform:translateX(3px)}
.dash__item:focus-within{outline:2px solid var(--copper);outline-offset:-2px}
/* primary tile: a longitudinal cut through the cable along its top edge */
/* primary tile: abyssal panel with faint isobaths (~6%) */
.dash__item--primary{isolation:isolate;overflow:hidden;background:var(--dark);color:var(--on-dark);border-top:3px solid var(--copper-bright);padding-top:calc(clamp(20px, 1rem + 1.5vw, 40px) - 3px)}
.dash__item--primary::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--on-dark);opacity:.15;
  -webkit-mask:var(--isobaths) 30% 50% / cover no-repeat;mask:var(--isobaths) 30% 50% / cover no-repeat}
.dash__item--primary:hover{background:var(--dark-2)}
.dash__item--primary:focus-within{outline-color:var(--copper-bright)}
.dash__item--primary :focus-visible{outline-color:var(--copper-bright)}
.dash__item--primary::after{background:var(--copper-bright)}
.dash__item--primary .dash__label{color:var(--copper-bright)}
.dash__item--primary .ledger{margin-top:8px}
.dash__item--primary .ledger th,.dash__item--primary .ledger td{border-top-color:var(--rule-dark)}
.dash__item--primary .ledger thead th{color:var(--on-dark-muted);border-top-color:var(--on-dark-muted)}
.dash__item--primary .ledger .state{color:var(--on-dark-muted)}
.dash__item.dash__item--primary:hover .dash__link{text-decoration-color:var(--copper-bright)}
.dash__label{color:var(--copper);padding-right:2.5em}
.dash__item h3{max-width:24ch}
.dash__item--primary h3{font-size:clamp(1.75rem, 1.2rem + 2vw, 3rem);font-stretch:var(--wd-display);line-height:1.04;letter-spacing:-.015em;max-width:16ch}
.dash__item > p:not(.dash__label){font-family:var(--f-serif);color:var(--ink-2)}
.dash__item--primary > p:not(.dash__label){font-size:var(--fs-prose);max-width:52ch;color:var(--on-dark-muted)}
.dash__link{text-decoration:none}
.dash__link::after{content:"";position:absolute;inset:0}
.dash__link:focus-visible{outline:none}
.dash__item:hover .dash__link{text-decoration:underline;text-decoration-color:var(--copper);text-decoration-thickness:2px}

.ledger{width:100%;font-size:.9375rem;margin-top:auto;font-variant-numeric:tabular-nums}
.ledger th,.ledger td{padding:10px 12px 10px 0;text-align:left;vertical-align:baseline;border-top:1px solid var(--rule)}
.ledger thead th{color:var(--muted);border-top:1px solid var(--rule-strong)}
.ledger tbody th{font-weight:500}
.ledger td{font-size:.875rem}
.ledger td:last-child,.ledger th:last-child{padding-right:0;text-align:right}
.ledger .num{font-variant-numeric:tabular-nums lining-nums}
.ledger .state{color:var(--ink-2);white-space:normal;text-align:left}

/* --- announcements, as log entries --- */
.bulletin{border-bottom:1px solid var(--rule)}
.bulletin__item article{display:grid;gap:10px;padding-block:24px;border-top:1px solid var(--rule)}
.bulletin__item:first-child article{border-top:0;padding-top:0}
.bulletin__meta{display:flex;flex-wrap:wrap;gap:4px 0;color:var(--muted)}
.bulletin__meta > * + *::before{content:"·";margin-inline:10px;color:var(--muted)}
.bulletin__meta time{color:var(--ink);font-size:.875rem;font-stretch:115%;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.bulletin h3{font-size:clamp(1.15rem, 1rem + .6vw, 1.5rem);max-width:42ch}
.bulletin h3 a{text-decoration:none;transition:text-decoration-color var(--t) var(--ease)}
.bulletin h3 a:hover{text-decoration:underline;text-decoration-color:var(--copper);text-decoration-thickness:2px}
.bulletin article > p:last-child{font-family:var(--f-serif);color:var(--ink-2);max-width:68ch}
.bulletin__thumb{width:min(100%, 240px);height:auto;aspect-ratio:16 / 9;background:var(--dark)}

/* --- overview video (media.html) --- */
.film{display:grid;gap:18px}
.film__dek{font-family:var(--f-serif);font-size:var(--fs-lead);line-height:1.4;color:var(--ink-2);max-width:58ch}
.film__figure{display:grid;gap:14px;margin:0;min-width:0}
.film__video{width:100%;height:auto;aspect-ratio:16 / 9;background:var(--dark)}
.film__caption{display:grid;gap:12px;padding-top:14px;border-top:1px solid var(--rule)}
.film__meta{font-size:.8125rem;color:var(--muted)}
.film__caption .textlink{justify-self:start}

/* ==========================================================================
   6b. Map — geographic corridor map (project.html), built by tools/map/build-map.mjs
   Rules between the map-svg markers are also baked into assets/maps/geco-corridor-map.svg.
   ========================================================================== */
.map{display:grid;gap:14px;margin:0;min-width:0}
.map__hint{font-family:var(--f-serif);font-style:italic;font-size:.875rem;color:var(--muted)}
.map__scroll{overflow-x:auto;background:var(--paper);
  -webkit-mask:linear-gradient(to right, transparent 0, var(--ink) var(--map-fade-l), var(--ink) calc(100% - var(--map-fade-r)), transparent 100%);
  mask:linear-gradient(to right, transparent 0, var(--ink) var(--map-fade-l), var(--ink) calc(100% - var(--map-fade-r)), transparent 100%)}
/* the edge fade follows the scroll position where scroll-driven animations exist; otherwise only the right edge fades */
@property --map-fade-l{syntax:"<length>";inherits:false;initial-value:0px}
@property --map-fade-r{syntax:"<length>";inherits:false;initial-value:48px}
@supports (animation-timeline: scroll()){
  .map__scroll{animation:map-fade linear both;animation-timeline:scroll(self inline)}
}
@keyframes map-fade{from{--map-fade-l:0px;--map-fade-r:48px}8%{--map-fade-l:48px}92%{--map-fade-r:48px}to{--map-fade-l:48px;--map-fade-r:0px}}
.map__svg{display:block;width:100%;min-width:760px;height:auto}
.map__caption{display:grid;gap:12px;padding-top:14px;border-top:1px solid var(--rule)}
.map__legend{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.8125rem;color:var(--ink-2)}
.map__legend li{display:inline-flex;align-items:center;gap:8px}
.map__key--sub{width:20px;height:2px;background:repeating-linear-gradient(90deg, var(--ink-2) 0 5px, transparent 5px 8px)}
.map__note{font-family:var(--f-serif);font-size:.9375rem;line-height:1.5;color:var(--ink-2);max-width:72ch}
.map__note a{text-decoration-color:var(--copper)}
.map__source{font-size:.8125rem;color:var(--muted)}
.map__caption .textlink{justify-self:start}

/* map-svg:start */
.map__svg .m-shelf{fill:var(--shelf)}
.map__svg .m-sea{fill:var(--surface)}
.map__svg .m-iso{fill:none;stroke:var(--pontic);stroke-width:.6;stroke-opacity:.3}
.map__svg .m-iso--200{stroke-opacity:.35}
.map__svg .m-grid{fill:none;stroke:var(--pontic);stroke-width:.4;stroke-opacity:.16}
.map__svg .m-land{fill:var(--paper-2)}
.map__svg .m-land--focus{fill:var(--paper)}
.map__svg .m-lake{fill:var(--shelf);stroke:var(--ink-2);stroke-width:.5}
.map__svg .m-border{fill:none;stroke:var(--muted);stroke-width:.7;stroke-dasharray:3 2}
.map__svg .m-coast{fill:none;stroke:var(--ink-2);stroke-width:.75}
.map__svg .m-depth{fill:var(--pontic);font:italic 400 9px var(--f-serif);paint-order:stroke;stroke:var(--surface);stroke-width:2.5px}
.map__svg .m-country{fill:var(--muted);font:600 9px var(--f-sans);letter-spacing:.2em}
.map__svg .m-country--focus{fill:var(--ink-2)}
.map__svg .m-sea-label{fill:var(--pontic);font:italic 400 13px var(--f-serif);letter-spacing:.32em}
.map__svg .m-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.map__svg .m-l1{stroke:var(--link-1);stroke-width:2.2}
.map__svg .m-l2{stroke:var(--link-2);stroke-width:2}
.map__svg .m-l3{stroke:var(--link-3);stroke-width:1.8}
.map__svg .m-l1.m-sub{stroke-dasharray:7 3.5}
.map__svg .m-l2.m-sub{stroke-dasharray:4 3}
.map__svg .m-l3.m-sub{stroke-dasharray:1.5 3}
.map__svg .m-conv{fill:var(--ink);stroke:var(--surface);stroke-width:1}
.map__svg .m-gridnode{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.map__svg .m-landfall{fill:var(--copper);stroke:var(--screen);stroke-width:2}
.map__svg .m-place{fill:var(--ink);font:600 10px var(--f-sans);letter-spacing:.08em;paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.map__svg .m-note,.map__svg .m-scale-label,.map__svg .m-scale-note{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.map__svg .m-note{fill:var(--ink-2);font:italic 400 10px var(--f-serif)}
.map__svg .m-scale-fill{fill:var(--ink)}
.map__svg .m-scale-box{fill:none;stroke:var(--ink);stroke-width:.75}
.map__svg .m-scale-label{fill:var(--ink-2);font:500 9px var(--f-sans);font-variant-numeric:tabular-nums}
.map__svg .m-scale-note{fill:var(--muted);font:italic 400 9px var(--f-serif)}
.map__svg .m-frame-rule{fill:none;stroke:var(--nl-light);stroke-width:1}
.map__svg .m-frame-band-ground{fill:none;stroke:var(--surface);stroke-width:3}
.map__svg .m-frame-band{fill:none;stroke:var(--nl-light);stroke-width:3;stroke-dasharray:9 9}
.map__svg .m-coord{fill:var(--muted);font:400 9px var(--f-mono)}
.map__svg .m-cap{font:600 10px var(--f-sans);letter-spacing:.04em;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.map__svg .m-cap--l1{fill:var(--link-1)}
.map__svg .m-legend-bg{fill:var(--surface);stroke:var(--nl-light);stroke-width:1}
.map__svg .m-legend-text{fill:var(--ink-2);font:500 10px var(--f-sans)}
.map__svg .m-key-sub{stroke:var(--muted);stroke-width:2;stroke-dasharray:4 3}
@media (forced-colors: active){
  .map__svg{forced-color-adjust:none;background:Canvas}
  .map__svg .m-shelf,.map__svg .m-sea,.map__svg .m-lake{fill:GrayText;fill-opacity:.25}
  .map__svg .m-land,.map__svg .m-land--focus{fill:Canvas}
  .map__svg .m-iso,.map__svg .m-grid,.map__svg .m-border{stroke:GrayText}
  .map__svg .m-coast,.map__svg .m-lake{stroke:CanvasText}
  .map__svg .m-line{stroke:CanvasText}
  .map__svg .m-conv{fill:CanvasText;stroke:Canvas}
  .map__svg .m-gridnode,.map__svg .m-landfall{fill:Canvas;stroke:CanvasText}
  .map__svg text[class]{fill:CanvasText;stroke:Canvas;paint-order:stroke}
  .map__svg .m-frame-rule,.map__svg .m-frame-band,.map__svg .m-scale-box{stroke:CanvasText}
  .map__svg .m-frame-band-ground{stroke:Canvas}
  .map__svg .m-scale-fill{fill:CanvasText}
}
/* map-svg:end */

@media (min-width:64em){
  .map__hint{display:none}
  .map__scroll{-webkit-mask:none;mask:none;animation:none}
  .map__svg{min-width:0}
}

/* ==========================================================================
   6c. Corridor (homepage) — animated map (plan) + seabed profile (section)
   data-variant="map" | "plan-section" on .corridor. Without JS, or with reduced
   motion, the markup is the final frame; main.js adds .is-animating while playing.
   ========================================================================== */
.corridor__figure{display:grid;gap:24px;margin:0}
.corridor__plan{display:grid;align-content:start;min-width:0}
.corridor .map__svg{min-width:0}
.corridor__profile{display:block;width:100%;height:auto;margin-top:-1px}
.corridor__profile--wide{display:none}
.corridor .corridor__profile--tall .pf-depth--minor{display:inline}
.corridor[data-variant="map"] .corridor__profile.corridor__profile,
.corridor[data-variant="map"] .corridor__depth,
.corridor[data-variant="map"] .m-probe{display:none}

/* readout */
.corridor__panel{display:grid;gap:20px;align-content:start}
.corridor__readout{border-top:2px solid var(--rule-strong)}
.corridor__readout div{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--rule)}
.corridor__readout dt{font-size:var(--fs-meta);font-weight:600;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--muted)}
.corridor__readout dd{font-weight:600;font-stretch:118%;font-size:1.5rem;line-height:1.1;font-variant-numeric:tabular-nums lining-nums}
.corridor__readout dd.corridor__section{font-size:1rem;font-stretch:100%;line-height:1.3}
.corridor__phases{display:grid;border-top:1px solid var(--rule-strong)}
.corridor__phases li{display:grid;grid-template-columns:4.5rem minmax(0,1fr);align-items:baseline;gap:2px 8px;padding:10px 0 10px 12px;border-bottom:1px solid var(--rule);color:var(--muted);transition:color var(--t) var(--ease),background-color var(--t) var(--ease)}
.corridor__year{font-weight:650;font-stretch:118%;font-variant-numeric:tabular-nums}
.corridor__step{grid-column:2;font-size:.875rem;font-variant-numeric:tabular-nums}
.corridor__phases li.is-on{color:var(--ink)}
.corridor__phases li.is-on .corridor__year{color:var(--copper)}
.corridor__phases li.is-active{background:linear-gradient(var(--copper),var(--copper)) 0 0 / 3px 100% no-repeat}
.corridor__note{font-family:var(--f-serif);font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.corridor__readout dd.is-empty .corridor__unit{display:none}
.corridor__qual{margin-left:.35em;font-size:.6875rem;font-weight:600;font-stretch:100%;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--muted);vertical-align:.3em}
/* Replay: a text action with a circular-arrow icon, same family as .textlink */
.corridor__replay{justify-self:start;padding:0;border:0;background-color:transparent;color:var(--ink);cursor:pointer}
.corridor__replay::after{width:14px;height:14px;-webkit-mask-image:var(--icon-replay);mask-image:var(--icon-replay)}
.corridor__replay:hover::after{transform:rotate(-40deg)}

/* animation states (only while main.js plays) */
.corridor .m-reveal{fill:none;stroke:#fff;stroke-width:12}   /* mask luminance, not a colour */
.corridor.is-animating .m-link{opacity:.38;transition:opacity .45s var(--ease)}
.corridor.is-animating .m-link.is-built{opacity:1}
.corridor.is-animating .m-stop{opacity:0;transition:opacity .25s var(--ease)}
.corridor.is-animating .m-stop.is-on{opacity:1}
.corridor .m-probe,.corridor .pf-probe{display:none}
.corridor.is-probing .m-probe,.corridor.is-probing .pf-probe{display:inline}
.corridor .m-probe-line,.corridor .pf-probe-line{stroke:var(--chart-magenta);stroke-width:1;stroke-dasharray:2 2}
.corridor .m-probe-dot,.corridor .pf-probe-dot{fill:var(--chart-magenta);stroke:var(--surface);stroke-width:1.5}

/* seabed section */
.corridor .pf-guide{fill:none;stroke:var(--pontic);stroke-opacity:.4;stroke-width:.75;stroke-dasharray:2 3}
.corridor .pf-depth{fill:var(--muted);font:400 9px var(--f-mono)}
.corridor .pf-land{fill:none;stroke:var(--ink-2);stroke-width:1.5}
.corridor .pf-seabed-fill{fill:var(--paper-2)}
.corridor .pf-seabed{fill:none;stroke:var(--ink-2);stroke-width:1.25}
.corridor .pf-label{fill:var(--muted);font:600 9px var(--f-sans);letter-spacing:.12em}
.corridor .pf-end{fill:var(--ink-2);font:600 9px var(--f-sans);letter-spacing:.08em}

/* small screens: the whole map fits the width, so drop minor labels and enlarge the rest */
.corridor .m-country,.corridor .m-sea-label,.corridor .m-depth,.corridor .m-coord,.corridor .m-scale,.corridor .m-note,.corridor .m-place--minor,
.corridor .pf-label,.corridor .pf-depth--minor{display:none}
.corridor .m-place{font-size:30px;stroke-width:7px}
.corridor .m-gridnode,.corridor .m-landfall{r:9px}
.corridor .m-conv{transform:scale(1.9);transform-box:fill-box;transform-origin:center}
.corridor .m-l1{stroke-width:5}
.corridor .m-l2{stroke-width:4.5}
.corridor .m-l3{stroke-width:4}
.corridor .pf-depth,.corridor .pf-end{font-size:26px}
.corridor .pf-probe-dot,.corridor .m-probe-dot{r:9px}

/* the homepage profile replaces the one under the hero */
body:has(.corridor[data-variant="plan-section"]) .telemetry::before{display:none}
body:has(.corridor[data-variant="plan-section"]) .hero__grid{padding-bottom:clamp(48px, 2.5rem + 3vw, 96px)}

@media (min-width:40em){
  .corridor__profile--wide{display:block}
  .corridor__profile--tall{display:none}
  .corridor .m-place{font-size:16px;stroke-width:4px}
  .corridor .m-place--minor{display:inline}
  .corridor .m-gridnode,.corridor .m-landfall{r:6px}
  .corridor .m-conv{transform:scale(1.3)}
  .corridor .m-l1{stroke-width:3}
  .corridor .m-l2{stroke-width:2.75}
  .corridor .m-l3{stroke-width:2.5}
  .corridor .pf-depth,.corridor .pf-end{font-size:14px}
  .corridor .pf-depth--minor{display:inline}
  .corridor .pf-probe-dot,.corridor .m-probe-dot{r:6px}
}
@media (min-width:64em){
  .corridor__figure{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .corridor__plan{grid-column:1 / 10}
  .corridor__panel{grid-column:10 / -1}
  .corridor .m-country,.corridor .m-sea-label,.corridor .m-depth,.corridor .m-coord,.corridor .m-scale,.corridor .m-note,.corridor .pf-label{display:inline}
  .corridor .m-place{font-size:11px;stroke-width:3px}
  .corridor .m-gridnode,.corridor .m-landfall{r:4.5px}
  .corridor .m-conv{transform:none}
  .corridor .m-l1{stroke-width:2.2}
  .corridor .m-l2{stroke-width:2}
  .corridor .m-l3{stroke-width:1.8}
  .corridor .pf-depth,.corridor .pf-end{font-size:9px}
  .corridor .pf-probe-dot,.corridor .m-probe-dot{r:4px}
}
@media (forced-colors: active){
  .corridor__profile{forced-color-adjust:none;background:Canvas}
  .corridor .pf-guide,.corridor .pf-land,.corridor .pf-seabed{stroke:CanvasText}
  .corridor .pf-seabed-fill{fill:GrayText;fill-opacity:.3}
  .corridor .pf-depth,.corridor .pf-label,.corridor .pf-end{fill:CanvasText}
  .corridor .m-probe-line,.corridor .pf-probe-line{stroke:Highlight}
  .corridor .m-probe-dot,.corridor .pf-probe-dot{fill:Highlight}
  .corridor__phases li.is-active{outline:2px solid Highlight;outline-offset:-2px}
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
.footer{background:var(--dark);color:var(--on-dark-muted);font-size:.9375rem}
.footer a{color:var(--on-dark);text-decoration:none}
.footer a:hover{color:var(--copper-bright);text-decoration:underline}
.footer__grid{display:grid;gap:40px;padding-block:clamp(48px, 3rem + 2vw, 88px)}
.footer__name{margin-bottom:16px}
.footer__logo{display:block;width:auto;height:40px}
/* registration card */
.footer__reg{display:grid;margin-top:24px;border:1px solid var(--rule-dark);max-width:30rem}
.footer__reg div{display:grid;gap:2px;padding:9px 12px;border-top:1px solid var(--rule-dark)}
.footer__reg div:first-child{border-top:0}
.footer__reg dt{font-size:var(--fs-meta);font-weight:600;letter-spacing:.08em;text-transform:uppercase;align-self:center}
.footer__reg dd{font-family:var(--f-mono);font-size:.8125rem;color:var(--on-dark)}
/* social profiles: text links with an external-link mark, no logos */
.footer__social{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:20px}
.footer__social a{display:inline-flex;align-items:center;gap:.45em;min-height:44px;font-weight:600;letter-spacing:.01em}
.footer__social a::after{content:"";width:10px;height:10px;background:currentColor;-webkit-mask:var(--icon-external) center / contain no-repeat;mask:var(--icon-external) center / contain no-repeat;transition:transform var(--t) var(--ease)}
.footer__social a:hover::after{transform:translate(2px,-2px)}
.footer__h{color:var(--on-dark-muted);padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--rule-dark)}
.footer__col ul{display:grid;gap:2px}
.footer__col a{display:inline-flex;align-items:center;min-height:36px}
/* shareholders on a 0–100% scale, 25% each */
.footer__owners{gap:12px !important}
.footer__owners li{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;color:var(--on-dark);
  background:
    linear-gradient(var(--copper-bright),var(--copper-bright)) 0 100% / 25% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--rule-dark) 0 1px, transparent 1px 25%) 0 100% / 100% 7px no-repeat,
    linear-gradient(var(--rule-dark),var(--rule-dark)) 0 100% / 100% 1px no-repeat}
.footer__owners span{font-size:.8125rem;font-weight:600;letter-spacing:.08em;color:var(--on-dark-muted)}
/* shareholder names link to their websites; keep the row height of plain text (no 36px footer link box) */
.footer__owners a{display:inline;min-height:0}
.footer__base{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:22px 24px;border-top:1px solid var(--rule-dark);font-size:var(--fs-meta);letter-spacing:.04em}
.footer__base::before{content:"";position:absolute;top:-8px;left:var(--gutter);width:15px;height:15px}

/* ==========================================================================
   7a. Inner pages
   ========================================================================== */

.page-head{background:var(--dark);color:var(--on-dark)}
.page-head__inner{display:grid;gap:18px;padding-block:clamp(28px, 1.5rem + 2vw, 56px) clamp(44px, 2rem + 3vw, 88px)}
.page-head h1{font-size:clamp(2rem, 1.3rem + 2.8vw, 3.6rem);max-width:20ch}
.page-head__lead{font-family:var(--f-serif);font-size:var(--fs-lead);line-height:1.5;color:var(--on-dark-muted);max-width:58ch}
.crumbs ol{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 12px;padding:0;color:var(--on-dark-muted)}
.crumbs li{display:flex;align-items:center;min-height:44px}
.crumbs li + li::before{content:"/";margin-inline:10px;color:var(--on-dark-faint)}
.crumbs a{color:var(--on-dark-muted);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat}
.crumbs a:hover{color:var(--on-dark)}
.crumbs [aria-current]{color:var(--on-dark)}

.section--rule:first-of-type{padding-top:var(--section)}
.page-head + .section--rule{padding-top:var(--section)}
.prose{display:grid;gap:18px;align-content:start;font-family:var(--f-serif);font-size:var(--fs-prose);line-height:1.65}
.prose p{max-width:68ch}
.prose a{text-decoration-color:var(--copper)}
.prose__dek{font-size:var(--fs-lead);line-height:1.4;color:var(--ink-2)}
.prose h2{font-size:var(--fs-h2);margin-top:24px;padding-top:18px;border-top:1px solid var(--rule-strong)}
.prose h3{font-size:1.125rem;font-stretch:108%;margin-top:14px;padding-top:16px;border-top:1px solid var(--rule-strong)}
.prose ul{display:grid;gap:10px;max-width:68ch;margin:0;padding-left:1.25em}
.prose li::marker{color:var(--copper)}
.footnote{font-family:var(--f-serif);font-style:italic;font-size:.9375rem;line-height:1.5;color:var(--muted);margin-top:16px;max-width:80ch}
.minor-h{color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--rule-strong)}
/* notice: a key date or fact set off by a copper rule, like a cable-route callout (pmi.html) */
.notice{display:grid;gap:8px;max-width:68ch;padding:4px 0 4px 20px;border-left:3px solid var(--copper)}
.notice__title{font-family:var(--f-sans);font-size:var(--fs-h3);font-weight:600;font-stretch:108%;line-height:1.3;color:var(--ink)}

/* news article (news-*.html): main photo, text with quote and photos, gallery, lightbox */
.news{display:grid;gap:clamp(28px, 2rem + 1vw, 48px);min-width:0}
.news__also{font-family:var(--f-sans);font-size:.875rem;line-height:1.5;color:var(--muted);padding-top:14px;border-top:1px solid var(--rule)}
.news__also a{color:var(--ink);text-decoration-color:var(--copper)}
.news__also a:hover{color:var(--copper)}
.news-figure{display:grid;gap:10px;margin:0;min-width:0;max-width:68ch}
.news-figure--main{max-width:48rem}
.news-figure__img{width:100%;height:auto;background:var(--paper-2)}
.news-figure--main .news-figure__img{aspect-ratio:16 / 9;object-fit:cover}
.news-figure__caption{display:grid;gap:4px;padding-top:10px;border-top:1px solid var(--rule);font-family:var(--f-serif);font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.news-figure__credit{font-family:var(--f-sans);font-size:.8125rem;color:var(--muted)}
.prose blockquote{display:grid;gap:10px;max-width:68ch;margin:0;padding:4px 0 4px 20px;border-left:3px solid var(--copper);font-family:var(--f-serif)}
.prose blockquote p{font-size:var(--fs-lead);line-height:1.45;color:var(--ink)}
.prose blockquote footer{font-family:var(--f-sans);font-size:.875rem;line-height:1.4;color:var(--muted)}
.prose cite{font-style:normal}
.gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:24px var(--col-gap)}
@media (min-width:40em){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64em){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gallery__item{display:grid;gap:8px;align-content:start;margin:0;min-width:0}
.gallery__link{display:block}
.gallery__img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;background:var(--paper-2);transition:opacity var(--t) var(--ease)}
.gallery__link:hover .gallery__img{opacity:.85}
.gallery__caption{font-family:var(--f-serif);font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.lightbox{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:var(--gutter);border:0;background:var(--dark);color:var(--on-dark)}
.lightbox::backdrop{background:var(--dark)}
.lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px}
html:has(.lightbox[open]){overflow:hidden}
.lightbox :focus-visible{outline-color:var(--copper-bright)}
.lightbox__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.lightbox__count{margin-right:auto;font-family:var(--f-sans);font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--on-dark-muted)}
.lightbox__btn{background:none;color:var(--on-dark);cursor:pointer}
.lightbox__btn:hover{border-color:var(--copper-bright);color:var(--copper-bright)}
.lightbox__figure{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;margin:0;min-height:0}
.lightbox__img{width:100%;height:100%;min-height:0;object-fit:contain}
.lightbox__caption{font-family:var(--f-serif);font-size:.9375rem;line-height:1.5;color:var(--on-dark-muted);max-width:68ch}
@media (prefers-reduced-motion: no-preference){
  .lightbox[open]{animation:lightbox-in var(--t) var(--ease)}
  @keyframes lightbox-in{from{opacity:0}}
}

.mono{font-family:var(--f-mono);font-size:.9em;font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto}
.ledger--wide{min-width:560px}
.ledger--wide td{font-size:.9375rem}
.ledger--wide td.num{font-family:var(--f-mono);font-size:.875rem;white-space:nowrap}
.ledger--wide .key{margin-right:8px}
.ledger--wide th:has(> .key){white-space:nowrap}
.ledger--links{min-width:760px}
/* below 52em (where the 760px table no longer fits) each link is a card, label above value (as .spec on small screens) */
@media (max-width:51.99em){
  .ledger--links{min-width:0}
  .ledger--links,.ledger--links tbody,.ledger--links tfoot,.ledger--links tr,.ledger--links th,.ledger--links td{display:block}
  .ledger--links thead{display:none}
  .ledger--links tr{border-top:2px solid var(--rule-strong)}
  .ledger--links tr + tr{margin-top:24px}
  .ledger--links tfoot{margin-top:24px}
  .ledger--links th,.ledger--links td,.ledger--links td:last-child,.ledger--links th:last-child{padding:13px 0;text-align:left;border-top:0;border-bottom:1px solid var(--rule)}
  .ledger--links th{font-size:1rem;font-weight:600}
  .ledger--links td{display:grid;gap:4px;white-space:normal}
  .ledger--links td[data-label]::before{content:attr(data-label);color:var(--muted)}
  .ledger--links tfoot td:not(:first-of-type){display:none}
}

.spec{border-top:2px solid var(--rule-strong)}
.spec div{display:grid;gap:4px;padding-block:13px;border-bottom:1px solid var(--rule)}
.spec dt{color:var(--muted)}
.spec dd{min-width:0;overflow-wrap:anywhere}
.spec--compact{border-top:0}

/* --- people: Board of Directors cards (company.html); 4:5 portrait, no frame; 1–2 / 2 / 4 per row --- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:40px var(--col-gap)}
.people__item{display:grid;align-content:start;gap:6px;min-width:0}
.people__photo{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;background:var(--paper-2);margin-bottom:10px}
.people__name{font-size:var(--fs-h3);line-height:1.25}
.people__role{font-family:var(--f-sans);font-weight:600;color:var(--copper)}
.people__post{font-family:var(--f-serif);font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.people__meta{display:grid;gap:6px;margin-top:8px;padding-top:10px;border-top:1px solid var(--rule)}
.people__meta div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.people__meta dt{color:var(--muted)}
.people__meta dd{font-size:.9375rem}
@media (min-width:40em){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64em){.people{grid-template-columns:repeat(4,minmax(0,1fr))}}

.columns{display:grid;gap:28px}
.columns li{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:1px solid var(--rule-strong)}
.columns h3{font-size:1.125rem;font-stretch:108%}
.columns p{font-family:var(--f-serif);color:var(--ink-2)}

/* timeline: a vertical cable route with KP ticks; next = copper, planned = dashed */
.timeline{--axis:7px}
.timeline li{position:relative;display:grid;gap:4px;padding:18px 0 18px 32px;border-left:2px solid var(--ink);margin-left:var(--axis)}
.timeline li::before{content:"";position:absolute;left:-2px;top:28px;width:16px;height:2px;background:var(--ink)}
.timeline li::after{content:"";position:absolute;left:32px;right:0;bottom:0;height:1px;background:var(--rule)}
.timeline li:last-child::after{content:none}
.timeline time,.timeline__date{font-size:.875rem;font-weight:600;font-stretch:115%;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--muted)}
.timeline h3{font-size:1.125rem}
.timeline p{font-family:var(--f-serif);color:var(--ink-2);margin-top:2px}
.timeline .is-next{border-left-color:var(--copper)}
.timeline .is-next::before{left:-8px;top:23px;width:14px;height:14px;border-radius:50%;background:var(--ring)}
.timeline .is-next time,.timeline .is-next .timeline__date{color:var(--copper)}
.timeline .is-plan{border-left-style:dashed;border-left-color:var(--link-3)}
.timeline .is-plan::before{background:var(--link-3)}
.timeline .is-plan h3{color:var(--ink-2)}

/* document list: type set as a drawing title-block stamp */
.doclist{border-top:2px solid var(--rule-strong)}
.doclist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:baseline;padding-block:14px;border-bottom:1px solid var(--rule)}
.doclist__type{grid-column:1 / -1;justify-self:start;padding:3px 7px;border:1px solid var(--copper);color:var(--copper);font-size:.6875rem}
.doclist__title{font-weight:500}
.doclist .state{color:var(--ink-2)}

.split{display:grid;gap:40px}

.form{display:grid;gap:22px;align-content:start;padding:clamp(20px, 1rem + 1vw, 32px);border:1px solid var(--rule-strong);border-top-width:3px;background:var(--surface)}
.field{display:grid;gap:6px;margin:0;padding:0;border:0;min-width:0}
.field label,.field legend{font-weight:600;font-size:.9375rem;padding:0}
.field input:not([type="checkbox"]),.field select,.field textarea{width:100%;min-height:44px;padding:.55em .7em;background:var(--surface);border:1px solid var(--ink-2);border-radius:0}
.field textarea{resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--copper);outline-offset:-1px;border-color:var(--copper)}
.field :user-invalid{border-color:var(--error);border-width:2px}
.field--check{grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:12px}
.field--check label{font-weight:400}
.checks{display:grid;gap:4px;margin-top:6px}
.checks label{display:flex;gap:12px;align-items:center;min-height:40px;font-weight:400}
input[type="checkbox"]{width:20px;height:20px;margin:3px 0 0;accent-color:var(--ink);border-radius:0}
.optional{font-weight:400;color:var(--muted)}
.btn--dark{justify-self:start;background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.btn--dark:hover{background:var(--copper);border-color:var(--copper);color:var(--on-copper)}

@media (min-width:40em){
  .spec div{grid-template-columns:14rem minmax(0,1fr);gap:24px}
  .spec--compact div{grid-template-columns:10rem minmax(0,1fr)}
  .timeline li{grid-template-columns:9rem minmax(0,1fr);gap:24px}
  .columns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doclist li{grid-template-columns:10rem minmax(0,1fr) auto}
  .doclist__type{grid-column:auto}
}
@media (min-width:64em){
  .indent{margin-left:calc((100% - 11 * var(--col-gap)) / 6 + 2 * var(--col-gap))}
  .columns{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap)}
  .columns--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--col-gap) calc(var(--col-gap) * 2)}
}

/* ==========================================================================
   8. Breakpoints
   ========================================================================== */
@media (min-width:40em){
  :root{--wd-display:122%;--wd-figure:125%}
  h1,h2,h3{hyphens:manual}
  .utility__basis{display:inline}
  .logo__img{height:48px}                      /* horizontal lock-up */
  .telemetry__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .telemetry__cell,
  .telemetry__cell:nth-child(2n){padding:24px 20px 26px;border-left:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark)}
  .telemetry__cell:nth-child(3n+1){border-left:0;padding-left:0}
  .telemetry__cell:last-child{grid-column:auto;border-bottom:1px solid var(--rule-dark)}
  .js .route__controls{display:flex;justify-self:start}
  .route__panel div{grid-template-columns:11rem minmax(0,1fr);gap:16px;align-items:baseline}
  .bulletin__item article{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .bulletin__meta{grid-column:1 / 5;flex-direction:column;gap:4px}
  .bulletin__meta > * + *::before{content:none}
  .bulletin article h3,.bulletin article > p:last-child,.bulletin__thumb{grid-column:5 / -1}
  .bulletin__meta{grid-row:1 / span 2}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__reg div{grid-template-columns:9.5rem minmax(0,1fr);gap:12px}
}

@media (min-width:64em){
  :root{--wd-display:130%}
  .hero__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .hero__main{grid-column:1 / 8}
  /* Variant A (active): passport centred on the left column — kicker, H1, lead, actions */
  .hero__status{grid-column:9 / -1;align-self:center}

  /* Variant B (inactive): top of the frame on the cap line of the H1 "A 3.9 GW".
     Offset = kicker line box + column gap + distance from the H1 line-box top to its
     cap height (from the font metrics, so the H1 itself is not trimmed and the
     profile/telemetry stay put). Below ~1100px the passport is taller than the
     left column, so B pushes the telemetry down there.
  .hero{--h1-cap-inset:calc(var(--fs-h1) * ((var(--lh-h1) - var(--sans-ascent) - var(--sans-descent)) / 2 + var(--sans-ascent) - var(--sans-cap)))}
  .hero__status{align-self:start;margin-top:calc(var(--fs-meta) * var(--lh-caps) + var(--hero-gap) + var(--h1-cap-inset))}
  */

  .telemetry__grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .telemetry__cell,
  .telemetry__cell:nth-child(n){border-bottom:0;border-left:1px solid var(--rule-dark);padding:28px 24px 32px}
  .telemetry__cell:first-child{border-left:0;padding-left:0}

  .section__head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .section__no{grid-column:1 / 3}
  .section__head h2{grid-column:3 / 10}
  .section__more{grid-column:10 / -1;justify-self:end;margin-top:-.4em}

  .route{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .route__controls{grid-column:1 / -1}
  .route__figure{grid-column:1 / 10}
  .route__info{grid-column:10 / -1;margin-top:8px}
  .route__panel div{grid-template-columns:none;gap:4px}

  .dash{grid-template-columns:repeat(12,minmax(0,1fr))}
  .dash__item--primary{grid-column:1 / 8;grid-row:1 / span 2}
  .dash__item:not(.dash__item--primary){grid-column:8 / -1}

  .bulletin__meta{grid-column:1 / 3}
  .bulletin article h3,.bulletin article > p:last-child,.bulletin__thumb{grid-column:3 / 11}

  .footer__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .footer__entity{grid-column:1 / 5}
  .footer__grid > :nth-child(2){grid-column:5 / 8}
  .footer__grid > :nth-child(3){grid-column:8 / 10}
  .footer__grid > :nth-child(4){grid-column:10 / -1}
}

/* Desktop navigation from 72em: seven menu items and the logo need about 1,010px (PMI page added, October 2026) */
@media (min-width:72em){
  .masthead__bar{flex-wrap:nowrap}
  .js .nav-toggle{display:none}
  .js .primary-nav:not(.is-open),.primary-nav{display:block;flex-basis:auto}
  .primary-nav ul{display:flex;border-top:0}
  .primary-nav li + li{border-top:0}
  .primary-nav a{align-items:center;padding:0 20px;font-size:.9375rem;font-stretch:100%;border-left:1px solid var(--rule)}
  .primary-nav a[aria-current="page"]{padding-left:20px}
  .primary-nav a:hover,.primary-nav a[aria-current="page"]{color:var(--ink);background:linear-gradient(var(--copper),var(--copper)) 0 100% / 100% 3px no-repeat}
  .masthead__bar{align-items:stretch}
  .logo{padding-block:16px}
  .primary-nav{align-self:stretch}
  .primary-nav ul{height:100%}
  .primary-nav li{display:flex}
}

/* Windows High Contrast / forced colours: keep schematic, marks and frames legible */
@media (forced-colors: active) and (prefers-color-scheme: dark){
  .logo__img{filter:invert(1)}
}
@media (forced-colors: active) and (prefers-color-scheme: light){
  .footer__logo{filter:invert(1)}
}
@media (forced-colors: active){
  .hero::before,.page-head::before,.telemetry::before{display:none}
  .route__figure::before,.hero__status::before{background:none;border:3px double CanvasText;inset:-4px}
  .route__svg,.state::before,.key,.section__no,.footer__base::before,.timeline li::before{forced-color-adjust:none}
  .route__svg{background:Canvas}
  .s-sub,.route[data-active] [data-link] .s-sub{stroke:CanvasText}
  .dash__item--primary::before{display:none}
  .s-grid,.s-hatch{stroke:GrayText;opacity:.35}
  .s-sea{fill:Canvas;stroke:Canvas}
  .s-sea-edge,.s-border{stroke:CanvasText}
  .s-zone,.s-zone[x],.s-chain{fill:CanvasText;stroke:none}
  .s-place,.s-cap{fill:CanvasText;stroke:Canvas}
  .s-line{stroke:CanvasText}
  .route:not([data-active="all"]) .s-link .s-line{stroke:Highlight}
  .s-conv{fill:CanvasText}
  .s-node,.s-land{fill:Canvas;stroke:CanvasText}
  .state::before{border-color:CanvasText}
  .state--done::before{background:CanvasText}
  .state--active::before{background:radial-gradient(circle closest-side, Highlight 0 55%, transparent 60%)}
  .key{background:CanvasText !important}
  .section__no{background:none;color:CanvasText}
  .footer__base::before{display:none}
  .timeline li::before{background:CanvasText}
  .route__btn[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:-3px}
  .dash__item::after,.textlink::after,.footer__social a::after{background:CanvasText}
}

/* ==========================================================================
   9. Print
   ========================================================================== */
@media print{
  :root{--paper:var(--print-paper);--surface:var(--print-paper);--land:var(--print-paper)}
  body{background:var(--print-paper);color:var(--print-ink);font-size:10.5pt}
  .utility,.gec-band,.nav-toggle,.primary-nav,.route__controls,.skip-link,.hero__actions,.hero::before,.page-head::before,.dash__item::after{display:none !important}
  .masthead__bar{border-bottom-width:1px}
  .hero,.page-head,.telemetry,.footer,.hero__status{background:none;color:var(--print-ink)}
  .hero__status{--nl:var(--print-ink)}
  .hero__status-title,.kicker,.hero .state--done,.hero .state--active,.register__value,.telemetry dd{color:var(--print-ink)}
  .telemetry::before{background:var(--print-ink);opacity:.5;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .route__svg{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hero__lead,.page-head__lead,.register dt,.register__meta,.telemetry dt,.telemetry dd abbr,.telemetry__unit{color:var(--print-ink)}
  .crumbs ol,.crumbs a,.footer,.footer__h{color:var(--print-ink-2)}
  .footer a{color:var(--print-ink)}
  .footer__logo{filter:brightness(0)}
  .footer__reg dd{color:var(--print-ink)}
  .telemetry__cell,.telemetry__cell:nth-child(n),.register__row,.footer__base,.footer__reg,.footer__reg div{border-color:var(--print-rule)}
  .section{padding-block:24pt}
  .dash__item--primary{background:none;color:var(--print-ink);border-top-color:var(--print-ink)}
  .dash__item--primary::before{display:none}
  .dash__item--primary > p:not(.dash__label),.dash__item--primary .ledger thead th,.dash__item--primary .ledger .state{color:var(--print-ink-2)}
  .dash__item--primary .dash__label{color:var(--copper)}
  .route,.route__figure,.dash__item,.timeline li,.spec div{break-inside:avoid}
  .route__svg{min-width:0}
  .map__hint{display:none}
  .map__scroll{overflow:visible;-webkit-mask:none;mask:none;animation:none}
  .map__svg{min-width:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .map{break-inside:avoid}
  .corridor__replay{display:none !important}
  .corridor__figure{break-inside:avoid}
  a{text-decoration:underline}
}