/* ============================================================
   THE EMPTY-LEG MAP — the signature beat, and the only genuinely
   new drawing on this page.

   His argument in one picture: an aircraft based in Europe has to fly
   itself to the Indian Ocean and home again, empty, around the trip you
   actually asked for. Drawn at ONE TRUE SCALE so the eye does the work.

   ⚠️ The bars are LINEAR and the numbers are printed beside them. That is
   the whole reason it lands — the moment a bar is exaggerated "so you can
   see it", the picture stops being evidence and becomes a poster.

   Each width is that leg's exact share of the total distance billed, so the
   three sum to 100% of the track: 2.37 + 48.81 + 48.81. ⚠️ The ferry bars
   were first written as a round 50%, which quietly overstated the waste by
   1.2 points — in a drawing whose entire authority is that it does not
   exaggerate. If these numbers ever change, recompute the shares; do not
   round them to something tidier.

   Deliberately the fleet bars' vocabulary rather than a second one:
   hairline rules, mono figures, --accent for the thing that matters.
   Nothing here is a photograph, so it costs no credits and no licence.
   ============================================================ */

/* bottom margin matters: the closing line ("based here, there is no ferry
   leg") is the answer to the picture, and with no gap it collided with the
   caption and read as part of it. */
.legmap{ margin:2.6rem 0 2.6rem; }

.legmap__rows{ list-style:none; margin:0; padding:0; }

.legmap__row{
  position:relative;
  display:grid;
  /* label · bar · figure. The bar column is the only elastic one, so every
     row shares one scale no matter how long the label is. */
  grid-template-columns:11rem 1fr 6rem;
  align-items:center;
  gap:0 1.2rem;
  padding:1.15rem 0;
  border-top:1px solid var(--faint);
}
.legmap__row:last-child{ border-bottom:1px solid var(--faint); }

.legmap__label{
  font:400 .78rem/1.2 'Geist Mono',ui-monospace,monospace;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
}

/* The bar itself. A track is drawn faintly across the full column so the
   trip's 2.4% reads as "almost none of this" rather than "a short bar". */
.legmap__bar{
  position:relative; display:block; height:3px;
}
.legmap__bar::before{
  content:""; position:absolute; inset:1px 0;
  background:var(--faint); opacity:.35;
}
.legmap__bar::after{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:var(--w);
  background:var(--accent);
  transition:width 1.6s cubic-bezier(.33,0,.2,1);
}
/* Draws in, but never owns visibility — the row is readable before and
   after, which is the standing rule on entrance animation here. */
.js .legmap__bar::after{ width:0; }
.js .legmap.in .legmap__bar::after{ width:var(--w); }
.js .legmap.in .legmap__row:nth-child(2) .legmap__bar::after{ transition-delay:.18s; }
.js .legmap.in .legmap__row:nth-child(3) .legmap__bar::after{ transition-delay:.36s; }

.legmap__km{
  font:400 .82rem/1 'Geist Mono',ui-monospace,monospace;
  letter-spacing:.04em; color:var(--ink); text-align:right;
  font-variant-numeric:tabular-nums;
}

/* THE TRIP is the one you are meant to find, so it is the only solid bar
   and the only bright figure. The ferry legs are the waste and are drawn
   dimmer — they are big enough to make the point without also shouting. */
/* ⚠️ The trip bar is ~2.4% of the column — about nine pixels. It first had a
   4px halo to help you find it, and at that length the halo made it square:
   it read as a form control, not a bar. Height alone does the job. The LENGTH
   is never touched, because the length is the argument. */
.legmap__row--trip .legmap__bar::after{
  height:7px; top:-2px; opacity:1;
}
.legmap__row--trip .legmap__label{ color:var(--accent); }
.legmap__row--ferry .legmap__bar::after{ opacity:.42; }
.legmap__row--ferry .legmap__km{ color:var(--dim); }

.legmap__foot{
  display:flex; flex-wrap:wrap; gap:.5rem 2.2rem;
  margin-top:1.5rem;
  font:400 .78rem/1.5 'Geist Mono',ui-monospace,monospace;
  letter-spacing:.06em; color:var(--dim);
}
.legmap__foot b{ color:var(--ink); font-weight:400; }
.legmap__foot .legmap__pc b{ color:var(--accent); }

/* ---------------- narrow ----------------
   The three-column grid cannot survive 375px: an 11rem label column leaves
   the bar nothing to be measured in, and a bar with no room is not evidence.
   So the label goes above and the bar keeps the full width, which is the one
   thing that must not be compromised. */
@media (max-width:47.99em){
  .legmap__row{
    grid-template-columns:1fr auto;
    grid-template-areas:"label km" "bar bar";
    gap:.55rem 1rem;
    padding:1rem 0;
  }
  .legmap__label{ grid-area:label; }
  .legmap__km{ grid-area:km; }
  .legmap__bar{ grid-area:bar; }
  .legmap__foot{ gap:.35rem 1.4rem; margin-top:1.2rem; }
}