/* The Atlas — the survey chart, and the brass gauge that reads it.
   Volume III only. Assumes the Cousteau custom properties from cousteau.css. */

.atlas { margin: 60px 0; }

.atlas__frame {
  background: linear-gradient(180deg, var(--slate-2), var(--slate));
  border: 1px solid var(--slate-edge);
  border-radius: 5px;
  box-shadow: 0 22px 54px rgba(3,26,38,.42);
  padding: 24px 26px 18px;
  color: var(--ink);
}

.atlas__svg {
  display: block; width: 100%; height: auto;
  aspect-ratio: 980 / 600;   /* reserve the box before first paint */
}

/* ---- slate header ------------------------------------------------------ */

.atlas__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px 26px; flex-wrap: wrap; margin-bottom: 16px;
}

.atlas__year {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(40px, 6.5vw, 68px);
  line-height: .9; color: var(--ink);
}
.atlas__year b {
  display: block; margin-top: 10px;
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute);
}
.atlas--forecast .atlas__year { color: var(--calypso); }
.atlas--forecast .atlas__year b { color: var(--calypso); }

.atlas__stats { display: flex; gap: 30px; flex-wrap: wrap; }

.atlas__stat {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute); line-height: 1.5;
}
.atlas__stat strong {
  display: block;
  font-family: "IBM Plex Mono", monospace; font-weight: 500;
  font-size: 27px; letter-spacing: -.01em; text-transform: none;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.atlas__stat--chn strong { color: #9A6A05; }
.atlas__stat i {
  display: block; margin-top: 3px; font-style: normal;
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: 0; text-transform: none; color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* ---- calibration plate ------------------------------------------------- */

.atlas__views {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--slate-edge);
}

.atlas__views__label {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute); margin-right: 6px;
}

.atlas__view {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); background: transparent;
  border: 1px solid var(--slate-edge); border-radius: 2px;
  padding: 10px 15px; cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
/* the indicator lamp on the plate */
.atlas__view::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: #C9BFA6; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.atlas__view:hover { border-color: var(--ink-mute); }
.atlas__view:focus-visible { outline: 2px solid var(--saucer); outline-offset: 2px; }

.atlas__view.is-active { color: var(--canvas); }
.atlas__view.is-active::before { background: var(--canvas); box-shadow: none; }
.atlas__view[data-atlas-view="nominal"].is-active { background: var(--calypso); border-color: var(--calypso); }
.atlas__view[data-atlas-view="real"].is-active    { background: var(--teal);    border-color: var(--teal); }

/* ---- dive log ---------------------------------------------------------- */

.atlas__note {
  min-height: 3.2em; margin-top: 14px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--slate-edge);
  font-size: 16.5px; line-height: 1.55; color: var(--ink-2);
  transition: opacity 260ms ease, border-color 260ms ease;
}
.atlas__note b { font-weight: 600; color: var(--ink); }
.atlas__note--hot { border-left-color: var(--calypso); }
.atlas--real .atlas__note--hot { border-left-color: var(--teal); }
.atlas__note--out { opacity: 0; }

/* ---- transport --------------------------------------------------------- */

.atlas__transport { display: flex; align-items: center; gap: 15px; margin-top: 20px; }

.atlas__play {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #6E5722; cursor: pointer; position: relative;
  background: linear-gradient(140deg, #E4C877, var(--brass) 45%, #6E5722);
  transition: transform 140ms ease;
}
.atlas__play:hover { transform: scale(1.06); }
.atlas__play:focus-visible { outline: 2px solid var(--calypso); outline-offset: 3px; }
.atlas__play::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-38%, -50%);
  border-left: 12px solid #3A2E10;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.atlas__play[data-playing="1"]::before {
  transform: translate(-50%, -50%); border: 0; width: 11px; height: 14px;
  background: linear-gradient(to right, #3A2E10 0 4px, transparent 4px 7px, #3A2E10 7px 11px);
}

.atlas__scrub { flex: 1 1 auto; position: relative; height: 36px; cursor: pointer; touch-action: none; }
.atlas__scrub:focus-visible { outline: 2px solid var(--saucer); outline-offset: 2px; }

.atlas__track { position: absolute; top: 15px; left: 0; right: 0; height: 4px; background: var(--slate-edge); }
.atlas__fill  { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--calypso); }
.atlas__thumb {
  position: absolute; top: 50%; left: 0; width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px; border-radius: 50%;
  background: var(--brass); border: 2px solid #6E5722;
}
.atlas--real .atlas__fill { background: var(--teal); }

.atlas__tick {
  position: absolute; top: 9px; width: 1px; height: 16px;
  background: var(--ink-mute); opacity: .55; pointer-events: none;
}
.atlas__ticklabel {
  position: absolute; top: 27px; transform: translateX(-50%);
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 10px; letter-spacing: .1em; color: var(--ink-mute);
  white-space: nowrap; pointer-events: none;
}

/* ---- svg internals ----------------------------------------------------- */

.atlas__cell { stroke: var(--slate); stroke-width: 2; }
.atlas__cell--row { opacity: .85; }

.atlas__label {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: .12em; fill: var(--canvas); pointer-events: none;
}
.atlas__value {
  font-family: "IBM Plex Mono", monospace; font-weight: 500;
  font-size: 15px; fill: var(--canvas);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.atlas__value--big { font-size: 22px; }
.atlas__label--dark { fill: var(--ink); }
.atlas__label.atlas__label--dark { fill: var(--ink-2); }

.atlas__hatch line { stroke: var(--slate); stroke-width: 1; opacity: .34; }

.atlas__ghost { fill: none; stroke: var(--calypso); stroke-width: 1; stroke-dasharray: 4 6; opacity: .5; }
.atlas__baseline { stroke: var(--slate-edge); stroke-width: 1; }

.atlas__scalenote, .atlas__stamp {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 10px; letter-spacing: .14em;
}
.atlas__scalenote { fill: var(--ink-mute); }
.atlas__stamp { fill: var(--calypso); }
.atlas--real .atlas__stamp { fill: var(--teal); }

.atlas__unit line { stroke: var(--calypso); stroke-width: 1; stroke-dasharray: 3 3; }
.atlas__unit text {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .14em; fill: var(--calypso);
}
.atlas__unit__sub { font-size: 10px !important; fill: var(--ink-mute) !important; letter-spacing: .18em; }
.atlas--compact .atlas__unit text { font-size: 24px; }
.atlas--compact .atlas__unit__sub { font-size: 20px !important; }

.atlas__callout line   { stroke: var(--calypso); stroke-width: 1.2; }
.atlas__callout circle { fill: none; stroke: var(--calypso); stroke-width: 1.4; }
.atlas__callout text {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .08em; fill: var(--calypso);
}

/* Compact: the SVG scales down so far on a phone that house type lands at
   about three pixels. Fewer labels, much larger, in viewBox units. */
.atlas--compact .atlas__label { font-size: 27px; letter-spacing: .08em; }
.atlas--compact .atlas__value { font-size: 33px; }
.atlas--compact .atlas__value--big { font-size: 45px; }
.atlas--compact .atlas__callout text { font-size: 26px; }
.atlas--compact .atlas__callout line,
.atlas--compact .atlas__callout circle { stroke-width: 2.4; }
.atlas--compact .atlas__scalenote,
.atlas--compact .atlas__stamp { font-size: 19px; letter-spacing: .08em; }
.atlas--compact .atlas__cell { stroke-width: 3; }

@media (max-width: 640px) {
  .atlas { margin: 42px 0; }
  .atlas__frame { padding: 18px 15px 14px; }
  .atlas__stats { gap: 18px; }
  .atlas__stat strong { font-size: 21px; }
  .atlas__note { font-size: 15.5px; }
  .atlas__ticklabel { font-size: 9px; }
  .atlas__ticklabel--minor { display: none; }
  .atlas__views { gap: 6px; }
  .atlas__views__label { flex: 1 0 100%; margin-bottom: 2px; }
  .atlas__view { font-size: 11px; padding: 10px 11px; }
}

/* ---- the film ---------------------------------------------------------- */

.film { margin: 56px 0 68px; }

.film__frame {
  background: #04222F; border: 1px solid rgba(239,231,211,.25);
  border-radius: 4px; padding: 9px; line-height: 0;
  box-shadow: 0 24px 60px rgba(3,26,38,.5);
}

.film__video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; background: #04222F; border-radius: 2px;
}

.film > figcaption { color: rgba(239,231,211,.85); }

.film__transcript {
  margin-top: 20px; border-top: 1px solid rgba(239,231,211,.28); padding-top: 14px;
}
.film__transcript > summary {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--saucer); cursor: pointer; padding: 8px 0; list-style: none;
}
.film__transcript > summary::before { content: "▸ "; }
.film__transcript[open] > summary::before { content: "▾ "; }
.film__transcript > summary::-webkit-details-marker { display: none; }
.film__transcript > summary:focus-visible { outline: 2px solid var(--saucer); outline-offset: 2px; }

.film__ch {
  display: flex; gap: 12px; align-items: baseline; margin: 24px 0 10px;
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(239,231,211,.6);
}
.film__ch b { color: var(--saucer); font-weight: 600; font-variant-numeric: tabular-nums; }

.film__line {
  font-family: "Courier New", "Nimbus Mono PS", monospace;
  font-size: 15px; line-height: 1.62; color: rgba(239,231,211,.9);
  margin: 0 0 8px; padding-left: 148px; text-indent: -148px;
}
.film__line i {
  display: inline-block; width: 136px; margin-right: 12px; text-indent: 0;
  font-family: "Barlow Condensed", sans-serif; font-style: normal; font-weight: 600;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--saucer); vertical-align: baseline;
}

/* ---- shared figure furniture ------------------------------------------ */

figure.fig-wide { max-width: var(--wide); margin-left: auto; margin-right: auto; }

figcaption {
  margin-top: 15px; font-size: 14.5px; line-height: 1.6;
  color: rgba(239,231,211,.82); max-width: 92ch;
}
figcaption b {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--saucer); margin-right: 10px;
}
figcaption code { font-family: "IBM Plex Mono", monospace; font-size: .92em; }
.atlas > figcaption em { font-style: italic; color: var(--canvas); }

@media (max-width: 640px) {
  .film { margin: 40px 0 50px; }
  .film__frame { padding: 5px; }
  .film__line { padding-left: 0; text-indent: 0; }
  .film__line i { display: block; width: auto; margin: 0 0 2px; }
}