:root {
  color-scheme: light;
  --ink: #173b6c;
  --muted: #62758c;
  --line: #d9e2ee;
  --paper: #fff;
  --sea: #e8f1f4;
  --sky: #fff;
  --ml-ink: #173b6c;
  --ml-ink-soft: #62758c;
  --ml-line: #d9e2ee;
  --ml-blue: #0b4ea2;
  --ml-blue-dark: #083b7b;
  --ml-sand: #d4a44d;
  --ml-soft: #f5f7fa;
  --ml-gutter: clamp(1rem, 3vw, 2rem);
}

.page--enso { --page-accent: #0b9fff; }
.site-header {
  position: relative;
  z-index: var(--z-header);
  color: var(--ink);
  background: var(--header-bg);
}
.site-header__inner {
  width: min(100% - (2 * var(--gutter)), var(--content));
  min-height: 72px;
  margin-inline: auto;
  padding-block: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-6);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand__logo {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.brand__name {
  display: block;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .065em;
  line-height: 1.02;
  text-transform: uppercase;
}
.primary-nav {
  width: 100%;
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
}
.primary-nav::-webkit-scrollbar { display: none; }
.primary-nav a {
  flex: 0 0 auto;
  padding-block: var(--space-2);
  color: var(--ink);
  font-size: .84rem;
  font-weight: 650;
  text-decoration: none;
}
.primary-nav a:hover {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--line-strong);
}
.primary-nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--page-accent);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ml-ink);
  background: var(--paper);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
.shell {
  width: min(1200px, calc(100% - (2 * var(--ml-gutter))));
  margin-inline: auto;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  color: #fff;
  background: var(--ml-ink);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.page-intro {
  max-width: 900px;
  padding-block: 3rem 1.25rem;
}
.page-intro h1 {
  margin: 0;
  font-size: clamp(2.15rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
}
.page-intro p {
  max-width: 760px;
  margin: 1rem 0 0;
  color: var(--ml-ink-soft);
  font-size: clamp(1rem, 2vw, 1.15rem);
}
#contenu > section:first-of-type { padding-top: .5rem; }
.eyebrow {
  margin: 0 0 .5rem;
  color: var(--ml-blue);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
h2 {
  margin: 0;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -.025em;
}
h2 { font-size: clamp(1.55rem, 4vw, 2.15rem); line-height: 1.12; }
.profile-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-block: .5rem 1.25rem;
}
.timeline {
  flex: 1 1 auto;
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding-block: 0;
}
.timeline button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: .3rem .58rem;
  color: var(--ml-ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 650;
  white-space: nowrap;
}
.timeline button:hover {
  background: var(--ml-soft);
}
.timeline button[aria-pressed="true"] {
  color: var(--ml-ink);
  border-bottom-color: var(--page-accent, #f6bd00);
  font-weight: 800;
}
.timeline button:disabled { cursor: not-allowed; opacity: .38; }
.viewer { margin-bottom: 3rem; }
.profile-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  margin: 0;
  color: var(--ml-ink-soft);
  font-size: .82rem;
}
@media (max-width: 900px) {
  .profile-controls { grid-template-columns: 1fr; }
  .timeline { width: 100%; }
  .profile-toolbar { width: 100%; justify-content: flex-start; }
}
.profile-toolbar__controls { display: inline-flex; gap: .2rem; }
.profile-toolbar button {
  min-width: 2rem;
  min-height: 30px;
  padding: .2rem .45rem;
  color: var(--ml-ink);
  background: transparent;
  border: 1px solid var(--ml-line);
  border-radius: .25rem;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
}
.profile-toolbar button:hover,
.profile-toolbar button[aria-pressed="true"] {
  color: #fff;
  background: var(--ml-ink);
  border-color: var(--ml-ink);
}
.monthly-official {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: .85rem 0;
  border-block: 1px solid var(--ml-line);
}
.monthly-official .eyebrow { margin-bottom: .2rem; }
.monthly-official p { max-width: 900px; margin: 0; }
.monthly-official a {
  flex: 0 0 auto;
  font-size: .82rem;
  font-weight: 700;
}
#pacific-profile { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--ink); }
.profile-wrapper {
  position: relative;
  width: 100%;
}
.profile-stage {
  width: 100%;
}
.profile-animation-control {
  position: absolute;
  z-index: 2;
  top: 22.5%;
  left: 15%;
  display: flex;
  align-items: center;
  gap: .7rem;
  transform: translateY(-50%);
}
.profile-animation {
  min-width: 5.6rem;
  min-height: 30px;
  padding: .2rem .55rem;
  color: var(--ml-ink);
  background: #fff;
  border: 1px solid var(--ml-ink);
  border-radius: .25rem;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 750;
}
.profile-animation:hover,
.profile-animation[aria-pressed="true"] {
  color: #fff;
  background: var(--ml-ink);
}
.profile-animation:focus-visible {
  outline: 3px solid var(--page-accent);
  outline-offset: 3px;
}
.profile-animation-month {
  min-width: 6.8rem;
  padding: .15rem .25rem;
  color: var(--ml-ink);
  background: rgba(255, 255, 255, .88);
  font-size: .82rem;
  font-weight: 750;
  white-space: nowrap;
}
.profile-animation-status {
  min-width: 10rem;
  padding: .15rem 0 .15rem .8rem;
  border-left: 1px solid var(--ml-line);
  color: var(--ml-ink-soft);
  background: rgba(255, 255, 255, .88);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}
.profile-animation-status[data-phase="nina"],
.numeric-table-status[data-phase="nina"] { color: #235f8f; }
.profile-animation-status[data-phase="transition"],
.numeric-table-status[data-phase="transition"] { color: #52758d; }
.profile-animation-status[data-phase="neutral"],
.numeric-table-status[data-phase="neutral"] { color: #62758c; }
.profile-animation-status[data-phase="watch"],
.numeric-table-status[data-phase="watch"] { color: #9a6218; }
.profile-animation-status[data-phase="elnino-start"],
.numeric-table-status[data-phase="elnino-start"] { color: #b54842; }
.profile-animation-status[data-phase="elnino-established"],
.numeric-table-status[data-phase="elnino-established"] { color: #982d2a; }
.mobile-scroll-hint {
  display: none;
  margin: 0 0 .35rem;
  color: var(--ml-ink-soft);
  font-size: .75rem;
}
.profile-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sky { fill: var(--sky); }
.ocean { fill: var(--sea); }
.surface { stroke: var(--ink); stroke-width: 2; }
.continent-line { stroke: #111; stroke-width: 14; stroke-linecap: butt; }
#pacific-profile text { fill: var(--ink); font: 700 20px Arial, sans-serif; }
#pacific-profile .depth-label { fill: var(--muted); font-size: 13px; font-weight: 400; }
#pacific-profile .depth-label-surface { fill: #fff; }
#pacific-profile .station-label { font-size: 14px; }
#pacific-profile .geo-label { fill: var(--muted); font-size: 14px; font-weight: 700; }
#pacific-profile .geo-direction { letter-spacing: .12em; }
#pacific-profile .nino-region line {
  stroke: #777;
  stroke-width: 1;
}
#pacific-profile .nino-region text {
  fill: #444;
  font-size: 13px;
  font-weight: 700;
}
.buoy-outline { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.thermocline-point {
  stroke-width: 3;
  paint-order: stroke fill;
}
.wind-flag-mast-halo {
  stroke: #fff;
  stroke-linecap: round;
  stroke-width: 5;
}
.wind-flag-halo {
  fill: #fff;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-width: 5;
}
.wind-flag-mast {
  stroke: var(--ml-ink);
  stroke-linecap: round;
  stroke-width: 1.4;
}
.wind-flag {
  stroke: var(--ml-ink);
  stroke-linejoin: round;
  stroke-width: 1;
}
.value-missing { stroke: var(--muted); stroke-dasharray: 2 2; }
.station { cursor: pointer; }
.station:focus { outline: none; }
.station:focus .buoy-outline, .station:hover .buoy-outline { stroke-width: 4; }
.station.selected .buoy-outline { stroke-width: 4; }
.value-card { display: none; pointer-events: none; }
.station.selected .value-card { display: block; }
.value-card-background {
  fill: var(--sea);
  stroke: #52656e;
  stroke-width: .8;
}
.value-card-connector {
  stroke: var(--ink);
  stroke-width: .8;
}
#pacific-profile .value-card-title {
  fill: var(--ink);
  font: 700 10.8px Arial, sans-serif;
  letter-spacing: .03em;
}
#pacific-profile .value-card-line {
  fill: var(--ink);
  font: 600 9.8px Arial, sans-serif;
}
#pacific-profile .value-card-anomaly {
  fill: #293940;
  font: 500 9.2px Arial, sans-serif;
}
.wind-compass-ring {
  fill: rgba(255, 255, 255, .5);
  stroke: var(--ml-ink-soft);
  stroke-width: .8;
}
.wind-compass-ring.is-missing { stroke-dasharray: 2 2; }
.wind-compass-arrow line {
  stroke: var(--ml-ink);
  stroke-width: 1.5;
}
.wind-compass-arrow path { fill: var(--ml-ink); }
#pacific-profile .wind-compass-north {
  fill: var(--ml-ink-soft);
  font: 700 6px Arial, sans-serif;
}
#pacific-profile .value-card-wind-speed {
  fill: var(--ml-ink);
  font: 700 10px Arial, sans-serif;
}
#pacific-profile .value-card-wind-direction {
  fill: var(--ml-ink-soft);
  font: 600 8.8px Arial, sans-serif;
}
.value-witness { stroke: #111; stroke-width: .7; }
.value-witness.missing { fill: #fff; }
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.4rem;
  padding-block: .8rem;
  color: var(--muted);
  font-size: .88rem;
}
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i { display: inline-block; width: 16px; height: 9px; border: 1px solid var(--ink); }
.legend .top { border-radius: 16px 16px 0 0; background: #d73027; }
.legend .bottom { border-radius: 0 0 16px 16px; background: #2070b4; }
.legend .dot { width: 16px; height: 16px; border-radius: 50%; background: #d73027; }
.legend .missing { background: #fff; border-style: dashed; }
.legend .neutral-witness,
.legend .anomaly-witness {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.legend .neutral-witness { background: #2474b8; }
.legend .anomaly-witness { background: #d6382f; }
.legend .enso-scale {
  width: 28px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #235f8f, #62758c 48%, #9a6218 68%, #982d2a);
}
.legend .wind-flag-scale {
  flex: 0 0 42px;
  width: 42px;
  height: 22px;
  overflow: visible;
  color: var(--ink-soft);
}
.legend .wind-flag-scale line {
  stroke: currentColor;
  stroke-width: 1.2;
}
.legend .wind-flag-scale path {
  fill: #f6bd00;
  stroke: var(--ink);
  stroke-width: 1;
}
.legend .beaufort-scale {
  width: 54px;
  border: 0;
  background: linear-gradient(90deg,
    #d7e9f5 0 18%, #8db8d7 18% 36%, #55a6b7 36% 54%,
    #f6bd00 54% 70%, #f28e2b 70% 84%, #df5b3f 84% 100%);
}
.legend .wind-compass-key circle {
  fill: transparent;
  stroke: currentColor;
}
.legend .wind-compass-key line {
  stroke: currentColor;
  stroke-width: 1.4;
}
.legend .wind-compass-key path { fill: currentColor; }
.numeric-table td.numeric-wind-direction {
  color: var(--ml-ink);
  background: var(--sea);
}
.numeric-table-scroll {
  overflow-x: auto;
  margin: 1.25rem 0 3rem;
}
.numeric-table-scroll:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.numeric-table {
  width: 100%;
  min-width: 1050px;
  border-collapse: collapse;
  color: var(--ml-ink);
  font-size: .78rem;
}
.numeric-table caption {
  padding: 0 0 .7rem;
  color: var(--ml-ink);
  font-size: .92rem;
  font-weight: 700;
  text-align: left;
}
.numeric-table-status {
  display: inline-block;
  margin-left: .55rem;
  padding-left: .6rem;
  border-left: 1px solid var(--ml-line);
  font-weight: 800;
}
.numeric-table th,
.numeric-table td {
  min-width: 86px;
  padding: .65rem .45rem;
  border: 0;
  text-align: center;
  vertical-align: middle;
}
.numeric-table thead tr { border-bottom: 1px solid var(--ml-ink); }
.numeric-table th {
  background: #fff;
  font-weight: 700;
}
.numeric-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 130px;
  text-align: left;
}
.numeric-table td strong,
.numeric-table td small {
  display: block;
  white-space: nowrap;
}
.numeric-table td strong { font-size: .8rem; }
.numeric-table td small { margin-top: .18rem; font-size: .68rem; }
.numeric-table td.numeric-strong { color: #fff; }
.numeric-table td.numeric-strong-ink { color: #111; }
.numeric-table td.numeric-missing {
  background: #fff;
  color: var(--muted);
}
.data-error {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-left: 4px solid #a72320;
  color: #681816;
  background: #f6d9d7;
  font-weight: 700;
}
.warning { color: #a33a20 !important; font-weight: 700; }
.explanation {
  width: 100%;
  margin: 0 0 2.5rem;
  padding: 2rem 0 0;
  border-top: 1px solid var(--ml-line);
}
.explanation h2 {
  margin: 0 0 1rem;
  color: var(--ml-ink);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  line-height: 1.12;
}
.explanation__intro {
  max-width: 1000px;
  margin: 0 0 1.5rem;
  color: var(--ml-ink-soft);
  font-size: 1.05rem;
}
.scientific-article {
  padding-top: 2rem;
}
.scientific-article > .eyebrow {
  margin: 0 0 .55rem;
}
.scientific-article__states {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  max-width: 1100px;
  margin: 0 0 1.5rem;
}
.scientific-article__states h3,
.indicator-definitions h3 {
  margin: 0 0 .55rem;
  color: var(--ml-ink);
  font-size: 1.05rem;
}
.scientific-article__states p,
.scientific-conclusion p {
  margin: 0;
  color: var(--ml-ink-soft);
}
.scientific-definition {
  max-width: 1000px;
  margin: 0;
  padding: .8rem 1rem;
  border-left: 3px solid var(--ml-blue);
  background: var(--ml-soft);
  color: var(--ml-ink-soft);
}
.scientific-definition strong {
  color: var(--ml-ink);
}
.observation-protocol {
  margin-bottom: 2.5rem;
}
.observation-protocol .explanation__intro,
.visual-conclusion .explanation__intro {
  max-width: 1000px;
}
.observation-protocol .explanation__intro:last-child,
.visual-conclusion .explanation__intro:last-child {
  margin-bottom: 0;
}
.visual-conclusion {
  margin-bottom: 3rem;
}
.indicator-definitions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.indicator-definitions p {
  margin: 0;
  color: var(--ml-ink-soft);
}
.indicator-definitions strong { color: var(--ml-ink); }
.observation-method {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ml-line);
}
.observation-method p {
  margin: 0;
  color: var(--ml-ink-soft);
  font-size: .88rem;
}
.observation-method strong {
  color: var(--ml-ink);
}
.explanation--assessment {
  margin-bottom: 1.5rem;
}
.assessment {
  width: 100%;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--ml-blue);
  background: var(--ml-soft);
}
.assessment__period {
  margin: 0 0 .45rem;
  color: var(--ml-blue);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.assessment h3 {
  margin: 0 0 .65rem;
  color: var(--ml-ink);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
}
.assessment > p:not(.assessment__period) {
  max-width: 900px;
  margin-bottom: 0;
}
.site-footer {
  border-top: 1px solid var(--ml-line);
  color: var(--ml-ink-soft);
  background: #fff;
}
.site-footer__inner {
  width: min(1200px, calc(100% - (2 * var(--ml-gutter))));
  margin-inline: auto;
  padding-block: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.site-footer p { margin: 0; font-size: .82rem; }
.site-footer__eyebrow {
  color: var(--ml-ink);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .6rem 1.2rem;
}
.legal-links a {
  color: var(--ml-ink-soft);
  font-size: .8rem;
  text-decoration: none;
}
.legal-links a:hover { color: var(--ml-ink); text-decoration: underline; }

.page-sections {
  display: flex;
  gap: 0 1.25rem;
  overflow-x: auto;
  padding: 0 0 1.5rem;
  scrollbar-width: none;
}
.page-sections::-webkit-scrollbar { display: none; }
.page-sections a {
  flex: 0 0 auto;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
  color: var(--ml-ink-soft);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
}
.page-sections a:hover {
  border-bottom-color: var(--ml-line);
  color: var(--ml-ink);
}
#comprendre,
#situation-actuelle,
#comparateur,
#definitions,
#conclusion,
#methode-comparateur { scroll-margin-top: 1rem; }

.enso-comparator {
  margin: 0 0 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ml-line);
}
.enso-comparator__intro {
  max-width: 1000px;
  margin-bottom: 2rem;
}
.enso-comparator__intro h2 {
  margin-bottom: .7rem;
  color: var(--ml-ink);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.08;
}
.enso-comparator__intro > p:last-child {
  margin: 1.25rem 0 0;
  color: var(--ml-ink-soft);
  font-size: .88rem;
}
.enso-comparator__questions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 2rem;
  margin: 1.5rem 0 0;
  padding-left: 1.4rem;
  color: var(--ml-ink);
}
.enso-comparator__questions li {
  padding-left: .2rem;
}
.enso-comparator__warning {
  max-width: 1000px;
  padding: .8rem 1rem;
  border-left: 3px solid #d9534f;
  background: #fbefee;
}
.enso-comparator__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem 2rem;
  padding: 1rem 0;
  border-block: 1px solid var(--ml-line);
}
.enso-comparator__add,
.enso-comparator__playback {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.enso-comparator__add label {
  color: var(--ml-ink);
  font-size: .82rem;
  font-weight: 750;
}
.enso-comparator select,
.enso-comparator button {
  min-height: 40px;
  border: 1px solid var(--ml-line);
  border-radius: .3rem;
  color: var(--ml-ink);
  background: #fff;
  font-size: .82rem;
  font-weight: 700;
}
.enso-comparator select { max-width: 17rem; padding: .45rem 2rem .45rem .65rem; }
.enso-comparator button { padding: .45rem .75rem; cursor: pointer; }
.enso-comparator button:hover:not(:disabled) {
  border-color: var(--ml-ink);
}
.enso-comparator button:disabled,
.enso-comparator select:disabled {
  cursor: not-allowed;
  opacity: .48;
}
#comparator-play {
  min-width: 6.2rem;
  border-color: var(--ml-ink);
}
#comparator-play[aria-pressed="true"] {
  color: #fff;
  background: var(--ml-ink);
}
#comparator-step {
  min-width: 6.7rem;
  color: var(--ml-ink);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}
#comparator-range {
  width: clamp(9rem, 18vw, 15rem);
  accent-color: var(--ml-ink);
}
.enso-comparator__hint {
  margin: .55rem 0 1.5rem;
  color: var(--ml-ink-soft);
  font-size: .78rem;
}
.enso-comparator__loading {
  grid-column: 1 / -1;
  margin: 0;
  padding: 2rem 0;
  color: var(--ml-ink-soft);
}
.enso-comparator__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.enso-comparison-card {
  min-width: 0;
  padding: 1.1rem;
  border: 1px solid var(--ml-line);
  background: #fff;
}
.enso-comparison-card__header {
  min-height: 6.2rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.enso-comparison-card__header h3 {
  margin: 0 0 .2rem;
  color: var(--ml-ink);
  font-size: 1.12rem;
  line-height: 1.2;
}
.enso-comparison-card__date {
  margin: 0;
  color: var(--ml-ink);
  font-size: .9rem;
  font-weight: 750;
}
.enso-comparison-card__official {
  margin: .2rem 0 0;
  color: var(--ml-ink-soft);
  font-size: .74rem;
}
.enso-comparison-card__remove {
  flex: 0 0 auto;
  min-height: 32px !important;
  padding: .25rem .5rem !important;
  border-color: transparent !important;
  color: var(--ml-ink-soft) !important;
  font-size: .74rem !important;
}
.enso-comparison-card__remove:hover {
  color: var(--ml-ink) !important;
  text-decoration: underline;
}
.enso-comparison-card__phase-text {
  min-height: 1.2rem;
  margin: 0 0 .35rem;
  color: var(--ml-ink);
  font-size: .76rem;
  font-weight: 700;
}
.enso-comparison-card__phase {
  display: grid;
  grid-template-columns: repeat(18, minmax(4px, 1fr));
  gap: 2px;
  margin-bottom: .8rem;
}
.enso-comparison-card__phase span {
  height: 8px;
  background: var(--ml-line);
}
.enso-comparison-card__phase .is-neutral { background: #8db8d7; }
.enso-comparison-card__phase .is-before { background: #d9e2ee; }
.enso-comparison-card__phase .is-warm { background: #d9534f; }
.enso-comparison-card__phase .is-after { background: #eadcc3; }
.enso-comparison-card__phase .is-active {
  outline: 2px solid var(--ml-ink);
  outline-offset: 1px;
  transform: scaleY(1.45);
}
.enso-comparison-card__scroll-hint {
  display: none;
  margin: 0 0 .35rem;
  color: var(--ml-ink-soft);
  font-size: .72rem;
}
.enso-comparison-card__profile-scroll {
  overflow-x: auto;
  border-bottom: 1px solid var(--ml-ink);
}
.enso-comparison-card__profile-stage {
  width: 100%;
  min-width: 560px;
}
.enso-comparison-card__profile-stage svg {
  display: block;
  width: 100%;
  height: auto;
}
.comparator-sky { fill: #fff; }
.comparator-ocean { fill: var(--sea); }
.comparator-surface {
  stroke: var(--ml-ink);
  stroke-width: 2;
}
.comparator-continent {
  stroke: #111;
  stroke-width: 12;
}
.comparator-profile-heading {
  fill: var(--ml-ink);
  font: 800 26px Arial, sans-serif;
}
.comparator-geo-label {
  fill: var(--ml-ink-soft);
  font: 700 18px Arial, sans-serif;
}
.comparator-depth {
  fill: var(--ml-ink-soft);
  font: 400 16px Arial, sans-serif;
}
.comparator-depth--surface { fill: #fff; }
.comparator-marker.is-missing {
  fill: #fff;
  stroke: var(--ml-ink-soft);
  stroke-dasharray: 2 2;
}
.comparator-marker-outline {
  fill: none;
  stroke: var(--ml-ink);
  stroke-width: 1.4;
}
.comparator-stress-flag-mast-halo {
  stroke: #fff;
  stroke-linecap: round;
  stroke-width: 5;
}
.comparator-stress-flag-halo {
  fill: #fff;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-width: 5;
}
.comparator-stress-flag-mast {
  stroke: var(--ml-ink);
  stroke-linecap: round;
  stroke-width: 1.3;
}
.comparator-stress-flag {
  stroke: var(--ml-ink);
  stroke-linejoin: round;
  stroke-width: 1;
}
.comparator-thermocline {
  stroke-width: 3;
  paint-order: stroke fill;
}
.comparator-d20-missing {
  fill: none;
  stroke: #52656e;
  stroke-width: 2;
}
.comparator-station-label {
  fill: var(--ml-ink);
  font: 700 18px Arial, sans-serif;
}
.enso-comparison-card__details {
  margin-top: .8rem;
  border-top: 1px solid var(--ml-line);
}
.enso-comparison-card__details summary {
  padding: .7rem 0 0;
  color: var(--ml-ink);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 750;
}
.enso-comparison-card__table-scroll {
  overflow-x: auto;
  margin-top: .7rem;
}
.enso-comparison-card__table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  color: var(--ml-ink);
  font-size: .72rem;
}
.enso-comparison-card__table caption {
  padding: 0 0 .55rem;
  color: var(--ml-ink);
  font-weight: 750;
  text-align: left;
}
.enso-comparison-card__table th,
.enso-comparison-card__table td {
  min-width: 76px;
  padding: .5rem .35rem;
  border: 0;
  text-align: center;
}
.enso-comparison-card__table thead tr {
  border-bottom: 1px solid var(--ml-ink);
}
.enso-comparison-card__table th {
  background: #fff;
  font-weight: 750;
}
.enso-comparison-card__table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 108px;
  text-align: left;
}
.enso-comparison-card__table td strong,
.enso-comparison-card__table td small {
  display: block;
  white-space: nowrap;
}
.enso-comparison-card__table td small { margin-top: .15rem; font-size: .64rem; }
.enso-comparison-card__table td.has-light-text { color: #fff; }
.enso-comparison-card__table td.has-dark-text { color: #111; }
.enso-comparison-card__table td.is-missing {
  color: var(--ml-ink-soft);
  background: #fff;
}
.enso-comparator__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.2rem;
  padding: 1rem 0 .5rem;
  color: var(--ml-ink-soft);
  font-size: .8rem;
}
.enso-comparator__legend span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.enso-comparator__legend i {
  display: inline-block;
  flex: 0 0 auto;
}
.comparator-half {
  width: 15px;
  height: 8px;
  border: 1px solid var(--ml-ink);
}
.comparator-half--top {
  border-radius: 15px 15px 0 0;
  background: #d9534f;
}
.comparator-half--bottom {
  border-radius: 0 0 15px 15px;
  background: #8db8d7;
}
.comparator-vector {
  position: relative;
  width: 27px;
  height: 15px;
  border-left: 1px solid var(--ml-ink-soft);
}
.comparator-vector::after {
  position: absolute;
  top: 2px;
  left: 0;
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  border-left: 24px solid #f6bd00;
  content: "";
}
.comparator-dot {
  width: 15px;
  height: 15px;
  border: 1px solid var(--ml-ink);
  border-radius: 50%;
  background: #d9534f;
}
.comparator-missing {
  width: 15px;
  height: 9px;
  border: 1px dashed var(--ml-ink);
  background: #fff;
}
.enso-comparator__source {
  margin: 0;
  color: var(--ml-ink-soft);
  font-size: .76rem;
}
.enso-documentation {
  margin-bottom: 4rem;
}
.scientific-glossary {
  margin-top: 4rem;
}
.scientific-glossary > h3 {
  margin: 2rem 0 .85rem;
  color: var(--ml-ink);
  font-size: 1.05rem;
}
.scientific-glossary__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  margin: 0;
}
.scientific-glossary__list > div {
  display: grid;
  grid-template-columns: minmax(7rem, .35fr) minmax(0, 1fr);
  gap: 1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--ml-line);
}
.scientific-glossary__list dt {
  color: var(--ml-ink);
  font-weight: 800;
}
.scientific-glossary__list dd {
  margin: 0;
  color: var(--ml-ink-soft);
}
.scientific-glossary__list i {
  color: var(--ml-ink);
}
.scientific-conclusion {
  margin-top: 4rem;
}
.scientific-conclusion > p {
  max-width: 1000px;
  margin-bottom: 1rem;
}
.scientific-conclusion__sources {
  font-size: .88rem;
}
.scientific-conclusion__sources a {
  color: var(--ml-blue);
}

@media (max-width: 900px) {
  .enso-comparator__toolbar { grid-template-columns: 1fr; align-items: start; }
  .enso-comparator__grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .page-intro { padding-block: 2rem .75rem; }
  .page-sections { padding-bottom: 1rem; }
  .mobile-scroll-hint { display: block; }
  .profile-animation-control {
    left: 1rem;
    max-width: calc(100% - 2rem);
    gap: .35rem;
  }
  .profile-animation {
    min-width: 4.9rem;
    padding-inline: .4rem;
    font-size: .72rem;
  }
  .profile-animation-month {
    min-width: 5.4rem;
    font-size: .72rem;
  }
  .profile-animation-status {
    min-width: 0;
    max-width: 7.5rem;
    padding-left: .45rem;
    font-size: .72rem;
    line-height: 1.1;
    white-space: normal;
  }
  .profile-stage { min-width: 1200px; }
  .profile-scroll { overflow-x: auto; }
  .monthly-official { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .scientific-article__states,
  .indicator-definitions,
  .observation-method,
  .enso-comparator__questions,
  .scientific-glossary__list {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .scientific-glossary__list > div {
    grid-template-columns: 1fr;
    gap: .25rem;
  }
  .enso-comparator { margin-top: 0; padding-top: 1.75rem; }
  .enso-comparator__add,
  .enso-comparator__playback {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .enso-comparator__add label { width: 100%; }
  .enso-comparator select {
    flex: 1 1 12rem;
    max-width: none;
  }
  #comparator-range { flex: 1 1 100%; width: 100%; }
  .enso-comparison-card { padding: .85rem; }
  .enso-comparison-card__header { min-height: 7rem; }
  .enso-comparison-card__scroll-hint { display: block; }
  .enso-comparison-card__profile-stage { min-width: 900px; }
  .site-footer__inner { align-items: flex-start; flex-direction: column; }
  .legal-links { justify-content: flex-start; }
}

@media (min-width: 64rem) {
  .site-header__inner { flex-wrap: nowrap; }
  .primary-nav { width: auto; overflow: visible; }
  .primary-nav a { padding-block: var(--space-6); font-size: .94rem; }
}

@media print {
  .site-header,
  .site-footer,
  .enso-comparator__toolbar,
  .enso-comparison-card__remove { display: none !important; }
}