/* Shared reading, interface and illustrated-scene tokens. */
:root{
  color-scheme:light;
  --ink:#09283e;--muted:#466473;--body-text:#27434f;
  --paper:#eee9da;--paper-strong:#f5efdf;--panel:#f2ecdc;--card:#f1ebdb;
  --control:#f1ecde;--control-text:#466473;--control-hover:#dce3d7;
  --selected:#154b67;--on-selected:#fff6e3;--link:#126281;--blue:#176b8b;
  --border:rgba(9,40,62,.25);--focus:#a85c16;--quote-accent:#176b8b;
  --shadow:3px 7px 0 rgba(6,32,48,.1),0 13px 24px rgba(3,24,39,.2);
  --scene-text:#fff6e3;--scene-muted:#d5e8e6;--scene-surface:#154966;
  --intro-night:0;--intro-sky:#c5e5ed;--intro-ink:#092338;--intro-body:#15374b;--intro-muted:#28546b;--intro-sand:#ded3b8;--intro-filter:none;
  --ocean:#124969;--ocean-art:url('../assets/paper-ocean-still.svg');--ocean-asset:assets/paper-ocean-still.svg;
  --globe-water:#0c4b70;--globe-rim:#a5d0d7;--globe-grid:rgba(152,205,218,.10);
  --globe-land:#617966;--globe-land-mobile:#98b488;--globe-coast:#6b8d6d;--globe-border:#748e69;
  --route-viking:#fff4d8;--route-existing:#ffd447;--route-proposed:#2ec5ff;--route-singapore:#ff5d50;--map-label:#1d4655;--map-halo:#f7f9ef;--map-dot:#155d7e;
  --sand:#d9cfb1;--sand-1:#e4dbc2;--sand-2:#d4c9aa;--sand-3:#c8bea1;--sand-edge:rgba(255,250,226,.5);
  --bubble:rgba(115,176,194,.18);--fish:#39718b;--route-label-bg:rgba(238,233,218,.95);--route-label-ink:#17394a;
  --cable-viking:#2578bd;--cable-sarawak:#258353;--cable-vietnam:#d85332;--cable-cambodia:#8853ae;
  --cutaway-bg:#103c55;--cutaway-panel:#124766;--cutaway-border:#56859b;
  --hvdc-viewer-center:#eef5ef;--hvdc-viewer-mid:#c9dfe1;--hvdc-viewer-edge:#9fc4cc;
  --hvdc-viewer-shadow:rgba(9,40,62,.14);--hvdc-status-shadow:rgba(255,255,255,.62);--hvdc-fallback-bg:rgba(255,255,255,.24);
}
#globeStage button:focus-visible,#globeCanvas:focus-visible,#infrastructureSection button:focus-visible,#cable3d canvas:focus-visible{outline-color:#f2bd70}
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#f5efdf;--muted:#b7c9cc;--body-text:#d5e0df;
  --paper:#102c3b;--paper-strong:#193b4c;--panel:#173747;--card:#193b4c;
  --control:#193b4c;--control-text:#d5e0df;--control-hover:#254b5b;
  --selected:#b6dce1;--on-selected:#09283e;--link:#9ad6e6;--blue:#9ad6e6;
  --border:rgba(200,225,223,.32);--focus:#f2bd70;--quote-accent:#9ad6e6;
  --shadow:3px 7px 0 rgba(0,12,20,.2),0 13px 24px rgba(0,12,20,.3);
  --intro-night:1;--intro-sky:#142d43;--intro-ink:#f5efdf;--intro-body:#d5e0df;--intro-muted:#b7c9cc;--intro-sand:#495047;--intro-filter:brightness(.48) saturate(.8);
  --ocean:#081f33;--ocean-art:url('../assets/paper-ocean-night.svg');--ocean-asset:assets/paper-ocean-night.svg;
  --scene-surface:#0d2c40;--scene-text:#f5efdf;--scene-muted:#bfd8dc;
  --globe-water:#08283f;--globe-rim:#557b90;--globe-grid:rgba(152,205,218,.16);
  --globe-land:#3c6057;--globe-land-mobile:#4d7363;--globe-coast:#709580;--globe-border:#6d8b77;
  --route-viking:#ffe6b0;--route-existing:#ffd447;--route-proposed:#2ec5ff;--route-singapore:#ff5d50;--map-label:#f5efdf;--map-halo:#143644;--map-dot:#ffe6b0;
  --sand:#444d48;--sand-1:#53605a;--sand-2:#46544e;--sand-3:#394841;--sand-edge:rgba(203,220,201,.3);
  --bubble:rgba(117,154,169,.16);--fish:#284a61;--route-label-bg:rgba(13,44,64,.96);--route-label-ink:#f5efdf;
  --cable-viking:#62b1ec;--cable-sarawak:#6cce99;--cable-vietnam:#ff9471;--cable-cambodia:#bf9ae9;
  --cutaway-bg:#082536;--cutaway-panel:#0d2c40;--cutaway-border:#416578;
  --hvdc-viewer-center:#4b7180;--hvdc-viewer-mid:#355b6c;--hvdc-viewer-edge:#22495d;
  --hvdc-viewer-shadow:rgba(0,12,20,.22);--hvdc-status-shadow:rgba(0,13,24,.8);--hvdc-fallback-bg:rgba(138,190,205,.18);
}
.editorial-quote{margin:28px 0;padding:20px 22px;border-left:4px solid var(--quote-accent);background:var(--paper-strong);border-radius:0 10px 10px 0}
.editorial-quote p{margin-bottom:0;color:var(--body-text)}
.editorial-quote blockquote{margin:12px 0;font-size:clamp(22px,2.4vw,28px);line-height:1.45;font-weight:600;color:var(--ink)}
.editorial-quote blockquote p{font:inherit;color:inherit}
.editorial-quote .quote-attribution{font-size:14px;line-height:1.6;color:var(--muted)}
@media(max-width:1023px){
  :root{--story-top:calc(72px + var(--safe-top))}
  .mobile-nav{top:calc(10px + var(--safe-top));bottom:auto;left:12px;right:12px;min-height:48px}
  .mobile-nav button{min-height:36px}
  .vertical-section{padding-top:calc(84px + var(--safe-top));padding-bottom:calc(28px + var(--safe-bottom))}
  #surfaceSection{padding-top:calc(90px + var(--safe-top))}
  #reporting{padding-bottom:calc(40px + var(--safe-bottom));scroll-margin-top:var(--story-top)}
  .reporting-inner section{scroll-margin-top:var(--story-top)}
}
@media(max-width:767px){
  #surfaceSection{padding-bottom:calc(62vw + 24px)}
  #surfaceSection .intro-art{bottom:0}
  #globeStage{top:var(--story-top)}
  .vertical-section.globe-section{--copy-top:max(357px,calc(42svh + 97px + var(--safe-top)))}
  .globe-section .copy-panel{height:calc(100svh - var(--copy-top) - 24px - var(--safe-bottom))}
  
  .editorial-quote{padding:18px 16px}
}
@media(max-width:767px) and (max-height:720px){
  .vertical-section.globe-section{--copy-top:calc(312px + var(--safe-top))}
}
@media(max-width:767px) and (max-height:480px){
  .globe-section .copy-panel{min-height:0;overflow-y:auto}
}
/* Short desktop-width screens need room for both the route scene and its copy. */

@media(max-width:1023px){
  .mobile-nav>:first-child{margin-left:auto}
  .mobile-nav>:last-child{margin-right:auto}
}