/* =========================================================================
   THE AIR HORSE LEDGER — « freight deck » design system, prefix wbl-
   Vocabulary of the air waybill and the cargo hold, in English: tower
   (header sign), lane (content width), apron (cover hero), leg
   (numbered section), stall (image frame), manifest/flight (dated
   feed), preflight (article head), door (lead image, the cargo door),
   cabin (reading column), schedule (fare table), freight/tailwind
   (crafted boxes), contrail (SVG separator), landing (footer).
   Palette: cold aluminium hull + one ramp-flare orange (blazing signal)
   + night-blue ink. No gradient, no remote font. Dark mode is automatic.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COLOURS · the freight deck at dawn ---------------------------- */
  --alu:        #cfd4d9;  /* cold aluminium, the hull of every page        */
  --alu-hollow:  #c6ccd2;  /* reserves, hollow sections, deeper panelling   */
  --alu-bright:    #dadfe3;  /* lightest reserve, tips                      */
  --ink:         #1a232e;  /* night-blue ink: text, signs                  */
  --ink-night:    #121922;  /* darkest ground: footer, tower, schedule head */
  --ink-soft:   #4a5867;  /* captions, meta, second tone                 */
  --flare:          #8e3508;  /* the ramp beacon: links, plates, rules (>=4.5:1) */
  --flare-bright:      #ff7a3d;  /* flare on night grounds, decor           */
  --flare-dim:   #6f2906;  /* pressed / hover                             */
  --brass:            #8a6d2f;  /* quiet brass second tone, ornaments          */
  --seam:         #a9b1ba;  /* rivet line on aluminium                     */
  --seam-night:    #2b3440;  /* rivet line on night                         */

  /* Dark mode: the same deck after the floodlights come on. */
  --night-alu:   #10161d;
  --night-alu-hollow: #161d26;
  --night-body:    #dfe3e7;
  --night-soft:     #9aa7b4;

  /* ---- 2. TYPE · composed system stacks, nothing fetched ---------------
     The printed ledger and the airport sign: a didone for the headings,
     the humanist sans of the classic transport signage for the copy. */
  --face-title: "Didot", "Bodoni MT", serif;
  --face-body: "Gill Sans", "Gill Sans MT", sans-serif;

  --title-weight: 500;
  --title-tracking: 0.005em;
  --caps-tracking: 0.2em;    /* pennants, plates, issue line */

  --copy-size: clamp(1.02rem, 0.97rem + 0.22vw, 1.12rem);
  --copy-leading: 1.65;
  --scale-h1: clamp(2.15rem, 1.15rem + 3.6vw, 4.1rem);
  --scale-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  --scale-h3: clamp(1.12rem, 1.01rem + 0.55vw, 1.42rem);
  --scale-h4: 1.04rem;

  /* ---- 3. RHYTHM -------------------------------------------------------- */
  --range:        63ch;       /* reading column, 60-65ch                     */
  --range-wide:  1380px;
  --margin-page:    clamp(1.1rem, 4vw, 4rem);
  --gutter:     clamp(0.9rem, 2.2vw, 2.1rem);
  --lift:       clamp(2.4rem, 5.5vw, 5.4rem);
  --drop:      clamp(1.2rem, 3vw, 3.2rem);

  /* ---- 4. DETAILS ------------------------------------------------------- */
  --corner:       2px;
  --seam-thin:   1px solid var(--seam);
  --pace:     150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --alu:       var(--night-alu);
    --alu-hollow: var(--night-alu-hollow);
    --alu-bright:   #1a2129;
    --ink:        var(--night-body);
    --ink-soft:  var(--night-soft);
    --flare:         var(--flare-bright);
    --flare-dim:  #ff9160;
    --brass:           #b3975a;
    --seam:        #2e3844;
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--alu);
  color: var(--ink);
  font-family: var(--face-body);
  font-size: var(--copy-size);
  line-height: var(--copy-leading);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.wbl-rivet { display: inline-block; vertical-align: -0.12em; }

h1, h2, h3, h4 {
  font-family: var(--face-title);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--scale-h1); }
h2 { font-size: var(--scale-h2); }
h3 { font-size: var(--scale-h3); }
h4 { font-size: var(--scale-h4); }

p, ul, ol { margin: 0 0 1.12em; }
a {
  color: var(--flare);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--pace);
}
a:hover { color: var(--flare-dim); }
:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 3px;
  border-radius: 1px;
}
hr { border: 0; border-top: var(--seam-thin); margin: var(--lift) 0; }

::selection { background: var(--flare); color: #e9edf0; }

/* Prices and figures read in tabular numerals. */
.wbl-schedule, .wbl-freight, .wbl-tailwind, .wbl-notam, .wbl-zulu, .wbl-pointers,
.wbl-leg__num, .wbl-apron__issue {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   SCAFFOLD
   ========================================================================= */

/* Skip link. Never remove. */
.wbl-escape {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-night); color: var(--alu-bright);
  padding: 0.7rem 1.15rem; z-index: 60;
}
.wbl-escape:focus { left: 0.6rem; top: 0.6rem; }

/* The quay: useful width of every content zone. */
.wbl-lane {
  width: 100%;
  max-width: var(--range-wide);
  margin-inline: auto;
  padding-inline: var(--margin-page);
}
.wbl-deck { display: block; }

/* --- Tower (the sign above the door, header) --------------------------- */
.wbl-tower {
  background: var(--ink-night);
  color: var(--alu-bright);
  border-bottom: 1px solid var(--seam-night);
  box-shadow: inset 0 -4px 0 var(--flare);      /* the flare tube under the sign */
  padding-block: clamp(0.72rem, 1.6vw, 1.15rem);
}
.wbl-tower__row {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
}
.wbl-tower__word {
  font-family: var(--face-title);
  font-size: clamp(1.3rem, 1.08rem + 0.95vw, 1.9rem);
  /* The tower is night-blue in both schemes, so its word is set IN HARD, like
     the apron veil: var(--alu-bright) turns dark in the dark scheme and made
     the site name invisible (measured 5 September 2026, rgb(26,33,41) on
     rgb(18,25,34)). */
  color: #dadfe3;
  text-decoration: none;
  letter-spacing: 0.012em;
}
.wbl-tower__word:hover { color: #fff; }
.wbl-tower__word span {
  display: block;
  font-family: var(--face-body);
  font-size: 0.64rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--flare-bright);
  margin-top: 0.34rem;
}
.wbl-routes { position: relative; }
/* Two states of the navigation, by a checkbox: no script on this site.
   Above 52rem the trigger is not rendered and the list is always open;
   below, the list opens under the trigger. */
.wbl-routes__case {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; margin: 0;
}
.wbl-routes__trigger {
  display: none;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  font-family: var(--face-body);
  font-size: 0.74rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--flare-bright);
  background: var(--ink);
  border: 1px solid var(--seam-night);
  border-radius: var(--corner);
  padding: 0.55rem 0.95rem;
}
.wbl-routes__case:checked + .wbl-routes__trigger { background: var(--ink-night); }
.wbl-routes__case:focus-visible + .wbl-routes__trigger { outline: 2px solid var(--flare-bright); outline-offset: 2px; }
.wbl-routes__list {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.35rem;
  list-style: none; margin: 0; padding: 0;
}
.wbl-routes a {
  color: var(--night-soft);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.045em;
  padding-block: 0.25rem;
}
.wbl-routes a:hover { color: var(--flare-bright); }

/* --- Track (breadcrumb) ------------------------------------------------------ */
.wbl-track { padding-block: clamp(0.85rem, 1.8vw, 1.3rem); }
.wbl-track ol {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.wbl-track li + li::before {
  content: "›";
  margin-right: 0.55rem;
  color: var(--flare);
}
.wbl-track a { color: var(--ink-soft); }
.wbl-track a:hover { color: var(--flare); }
.wbl-track [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* =========================================================================
   HOME · LA APRON (guide-cover hero: typography first, shot behind,
   deliberately short so the leg grid starts above 700px at 1456x800)
   ========================================================================= */

.wbl-apron { position: relative; isolation: isolate; }
.wbl-apron__shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* The veil is a HARD COLOUR by doctrine, never a var(). */
.wbl-apron__veil {
  position: absolute; inset: 0;
  background: rgba(16, 22, 30, 0.80);
  z-index: -1;
}
@media (prefers-color-scheme: dark) {
  .wbl-apron__veil { background: rgba(9, 13, 18, 0.86); }
}
.wbl-apron__body {
  padding-block: clamp(2.9rem, 6.5vw, 4.9rem) clamp(2.2rem, 5vw, 3.7rem);
  max-width: 64rem;
  color: var(--night-body);
}
.wbl-apron__pennant {
  display: flex; align-items: center;
  gap: 0.8rem;
  font-size: 0.74rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--flare-bright);
  margin: 0 0 1rem;
}
.wbl-apron__pennant::after {
  content: "";
  flex: 1;
  max-width: 9rem;
  border-top: 1px solid currentColor;
  opacity: 0.7;
}
.wbl-apron__body h1 {
  color: #fff;
  max-width: 21ch;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.wbl-apron__body > p {
  font-size: clamp(1.02rem, 0.95rem + 0.38vw, 1.22rem);
  line-height: 1.55;
  max-width: 56ch;
  color: var(--night-body);
  margin: 1.05rem 0 0;
}
/* Double rule + issue line, the cover signature. */
.wbl-apron__issue {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 1.1rem;
  margin-top: 1.5rem;
  padding-top: 0.85rem;
  border-top: 3px double rgba(236, 227, 207, 0.55);
  font-size: 0.76rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--flare-bright);
}
.wbl-apron__issue .wbl-rivet { color: var(--brass); }
.wbl-apron__issue em {
  font-style: normal;
  color: var(--night-body);
  letter-spacing: 0.08em;
}

/* =========================================================================
   LEGS (sections), numbered 01 to 06
   ========================================================================= */

.wbl-leg { padding-block: clamp(1.9rem, 4.4vw, 3.6rem); }
.wbl-leg--hollow { background: var(--alu-hollow); }
.wbl-leg__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  border-bottom: var(--seam-thin);
  padding-bottom: 0.6rem;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem);
}
.wbl-leg__num {
  font-family: var(--face-body);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--flare);
  margin-right: 0.7rem;
}
.wbl-leg__title { font-size: var(--scale-h2); }
.wbl-leg__brief {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 42ch;
}

/* Contrail: an SVG ornament between the great sections. */
.wbl-contrail {
  display: flex;
  justify-content: center;
  padding-block: clamp(0.4rem, 1.2vw, 1rem);
  color: var(--brass);
}

/* The plate: small-caps pennant above titles. */
.wbl-plate {
  font-size: 0.73rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--flare);
  margin: 0 0 0.55rem;
}

/* =========================================================================
   LES STALLS · asymmetric mosaic of cards
   ========================================================================= */

.wbl-stalls {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gutter);
  list-style: none; margin: 0; padding: 0;
}
.wbl-stall { margin: 0; }
.wbl-stall--full   { grid-column: span 6; }
.wbl-stall--wide   { grid-column: span 4; }
.wbl-stall--half  { grid-column: span 3; }
.wbl-stall--small   { grid-column: span 2; }
.wbl-stall--offset  { transform: translateY(var(--drop)); }
.wbl-stall--offset2 { transform: translateY(calc(var(--drop) * 0.5)); }
.wbl-stalls--packed { padding-bottom: var(--drop); }

.wbl-stall__pen {
  position: relative;
  overflow: hidden;
  border-radius: var(--corner);
  border: var(--seam-thin);
  background: var(--alu-hollow);
}
.wbl-stall__pen::after {      /* night tint rises on hover; link stays on the title */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,22,30,0) 58%, rgba(16,22,30,0.24));
  opacity: 0;
  transition: opacity var(--pace);
}
.wbl-stall:hover .wbl-stall__pen::after,
.wbl-stall:focus-within .wbl-stall__pen::after { opacity: 1; }
.wbl-stall__pen--horizon     { aspect-ratio: 21 / 9; }
.wbl-stall__pen--field  { aspect-ratio: 4 / 3; }
.wbl-stall__pen--square    { aspect-ratio: 1 / 1; }
.wbl-stall__pen--upright { aspect-ratio: 3 / 4; }
.wbl-stall__pen--tall     { aspect-ratio: 2 / 3; }
.wbl-stall__pane {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}
.wbl-stall:hover .wbl-stall__pane { transform: scale(1.02); }

.wbl-stall__plate { padding-top: 0.7rem; }
.wbl-stall__title { margin: 0 0 0.3rem; }
.wbl-stall__link {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--flare), var(--flare));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 96%;
  transition: background-size var(--pace), color var(--pace);
}
.wbl-stall__link:hover { color: var(--flare); background-size: 100% 2px; }
.wbl-stall__brief {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}
.wbl-stall__pointer {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.71rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid currentColor;
  border-radius: var(--corner);
  padding: 0.14rem 0.5rem;
}

/* =========================================================================
   LE MANIFEST · dated feed on the home
   ========================================================================= */

.wbl-manifest {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--gutter) * 1.5);
}
.wbl-flight {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.05rem;
  padding-block: 1.1rem;
  border-bottom: var(--seam-thin);
  margin: 0;
}
.wbl-manifest .wbl-flight:nth-last-child(-n+2) { border-bottom: 0; }
.wbl-flight__pane {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--corner);
  border: var(--seam-thin);
}
.wbl-zulu {
  margin: 0 0 0.3rem;
  font-size: 0.73rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--flare);
}
.wbl-flight h3 { margin: 0 0 0.3rem; }
.wbl-flight h3 a { color: var(--ink); text-decoration: none; }
.wbl-flight h3 a:hover { color: var(--flare); text-decoration: underline; }
.wbl-flight p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }

/* =========================================================================
   ARTICLES · preflight, door, cabin
   ========================================================================= */

.wbl-preflight {
  padding-block: clamp(0.4rem, 1.5vw, 1.1rem) clamp(1.3rem, 3vw, 2.1rem);
  max-width: 56rem;
}
.wbl-preflight__lede {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0.9rem 0 0;
}
.wbl-pointers {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none; margin: 1.05rem 0 0; padding: 0;
  font-size: 0.81rem;
  color: var(--ink-soft);
  border-top: var(--seam-thin);
  padding-top: 0.8rem;
}
.wbl-pointers a { color: var(--ink-soft); }
.wbl-pointers a:hover { color: var(--flare); }

.wbl-door { margin: 0; }
.wbl-door__pane {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--corner);
  border: var(--seam-thin);
}

.wbl-cabin {
  max-width: var(--range);
  padding-block: clamp(1.5rem, 3.4vw, 2.5rem) clamp(1.9rem, 4.4vw, 3.2rem);
}
.wbl-cabin > * + * { margin-top: 0.9em; }
.wbl-cabin h2 {
  margin-top: 1.75em;
  padding-bottom: 0.26rem;
  border-bottom: var(--seam-thin);
}
.wbl-cabin h3 { margin-top: 1.35em; }
.wbl-cabin ul, .wbl-cabin ol { padding-left: 1.4rem; }
.wbl-cabin li + li { margin-top: 0.45em; }
.wbl-cabin strong { color: var(--ink-night); }
@media (prefers-color-scheme: dark) {
  .wbl-cabin strong { color: #fff; }
}

/* Lettrine: the opening letter of an article, as on a guide page. */
.wbl-cabin > p:first-of-type::first-letter {
  font-family: var(--face-title);
  font-weight: 600;
  float: left;
  font-size: 3.05em;
  line-height: 0.82;
  padding-right: 0.12em;
  padding-top: 0.06em;
  color: var(--flare);
}

/* Quote: relay. */
.wbl-relay {
  margin: 1.6em 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--flare);
  font-family: var(--face-title);
  font-size: 1.15em;
  color: var(--ink-night);
}
@media (prefers-color-scheme: dark) { .wbl-relay { color: #fff; } }

/* Notam: plain boxed brief. */
.wbl-notam {
  background: var(--alu-hollow);
  border: var(--seam-thin);
  border-radius: var(--corner);
  padding: 1rem 1.2rem;
  font-size: 0.95em;
}

/* Encadré freight: the tariff card, ink ground, flare numerals. */
.wbl-freight {
  margin: 1.7em 0;
  background: var(--ink-night);
  color: var(--night-body);
  border-radius: var(--corner);
  padding: 1.15rem 1.3rem 1.25rem;
  border: 1px solid var(--seam-night);
}
.wbl-freight h2, .wbl-freight h3, .wbl-freight h4 {
  font-family: var(--face-body);
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--flare-bright);
  margin: 0 0 0.7rem;
  border: 0;
  padding: 0;
}
.wbl-freight p, .wbl-freight ul { margin: 0; font-size: 0.95rem; color: var(--night-body); }
.wbl-freight strong { color: #fff; font-variant-numeric: tabular-nums; }
.wbl-freight p + p, .wbl-freight ul { margin-top: 0.5rem; }

/* Encadré tailwind: light paper card with the flare seam. */
.wbl-tailwind {
  margin: 1.7em 0;
  background: var(--alu-bright);
  border: var(--seam-thin);
  border-left: 3px solid var(--flare);
  border-radius: var(--corner);
  padding: 1rem 1.25rem;
  font-size: 0.96em;
}
.wbl-tailwind h2, .wbl-tailwind h3, .wbl-tailwind h4 {
  font-family: var(--face-body);
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--flare);
  margin: 0 0 0.5rem;
  border: 0;
  padding: 0;
}
.wbl-tailwind p, .wbl-tailwind ul { margin: 0; }
.wbl-tailwind strong { color: var(--flare); }

/* Schedule: the fare table, travel-notebook style. */
.wbl-schedule {
  overflow-x: auto;
  margin: 1.5em 0;
  border: var(--seam-thin);
  border-radius: var(--corner);
}
.wbl-schedule table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.92em;
}
.wbl-schedule th, .wbl-schedule td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--seam);
  vertical-align: top;
}
.wbl-schedule caption {
  caption-side: top;
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-size: 0.76rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--flare);
  border-bottom: 1px solid var(--seam);
}
.wbl-schedule thead th {
  background: var(--ink-night);
  color: var(--night-body);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--face-body);
}
.wbl-schedule tr:last-child td { border-bottom: 0; }
.wbl-schedule tbody tr:nth-child(even) { background: var(--alu-bright); }

/* Read next. */
.wbl-nextleg {
  margin-top: 2.3em;
  padding-top: 1.15rem;
  border-top: 3px double var(--seam);
}
.wbl-nextleg h2 {
  font-size: 1.18rem;
  border-bottom: 0;
  margin: 0 0 0.55rem;
}
.wbl-nextleg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
/* Each entry carries the photograph of the page it points to (network
   rule, 16 September 2026). The pen takes the ratio named by the brief,
   the pane keeps the object fit of every other pane of the ledger. */
.wbl-nextleg__leg {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  align-items: center;
  gap: 0.9rem;
}
.wbl-nextleg__pen {
  display: block;
  overflow: hidden;
  border-radius: var(--corner);
  border: var(--seam-thin);
  background: var(--alu-hollow);
}
.wbl-nextleg__pen--field { aspect-ratio: 4 / 3; }
.wbl-nextleg__pane { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   LE LANDING (footer)
   ========================================================================= */

.wbl-landing {
  margin-top: var(--lift);
  background: var(--ink-night);
  color: var(--night-body);
  box-shadow: inset 0 4px 0 var(--flare);
}
.wbl-landing__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--gutter) * 1.5);
  padding-block: clamp(1.9rem, 4.4vw, 3rem);
  /* Every case is measured on its own list: the shortest case of the
     footer is not a hole, it is a shorter list (qa-vides, 16/09/2026). */
  align-items: start;
}
/* The row keeps one column per case really rendered: the outbound case
   exists only when its list has a target. */
.wbl-landing__row--3 { grid-template-columns: repeat(3, 1fr); }
.wbl-landing h2 {
  font-family: var(--face-body);
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--flare-bright);
  margin-bottom: 0.7rem;
}
.wbl-landing ul { list-style: none; margin: 0; padding: 0; }
.wbl-landing li { padding-block: 0.22rem; }
/* The whole line is the link box, not only the glyphs: it is the line a
   reader clicks, and the line qa-vides measures. */
.wbl-landing li a { display: block; }
.wbl-landing a { color: var(--night-soft); text-decoration: none; }
.wbl-landing a:hover { color: var(--flare-bright); text-decoration: underline; }
.wbl-landing__foot {
  border-top: 1px solid var(--seam-night);
  padding-block: 1.05rem;
  font-size: 0.79rem;
  color: var(--night-soft);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 0.9rem;
}
.wbl-landing__foot .wbl-rivet { color: var(--brass); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  .wbl-stall--wide  { grid-column: span 6; }
  .wbl-stall--half { grid-column: span 3; }
  .wbl-stall--small  { grid-column: span 3; }
  .wbl-stall--offset, .wbl-stall--offset2 { transform: none; }
  .wbl-stalls--packed { padding-bottom: 0; }
}

@media (max-width: 760px) {
  /* The navigation closes under its trigger: seven links do not hold on a
     telephone. The list opens as a plate under the trigger, tower colours. */
  .wbl-routes { width: 100%; }
  .wbl-routes__trigger { display: inline-flex; }
  .wbl-routes__list {
    display: none;
    position: absolute;
    left: 0; right: 0; top: calc(100% + 0.6rem);
    z-index: 30;
    flex-direction: column;
    gap: 0;
    background: var(--ink-night);
    border: 1px solid var(--seam-night);
    border-radius: var(--corner);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  }
  .wbl-routes__list li + li { border-top: 1px solid var(--seam-night); }
  .wbl-routes__list a { display: block; padding: 0.8rem 1rem; font-size: 0.82rem; }
  .wbl-routes__case:checked ~ .wbl-routes__list { display: flex; }
  .wbl-stalls { grid-template-columns: repeat(2, 1fr); }
  .wbl-stall--wide, .wbl-stall--half, .wbl-stall--small { grid-column: span 2; }
  .wbl-manifest { grid-template-columns: 1fr; }
  .wbl-flight { grid-template-columns: 118px 1fr; }
  .wbl-landing__row { grid-template-columns: 1fr; }
  .wbl-apron__body { padding-block: 2.5rem 2rem; }
  .wbl-leg__head { flex-direction: column; gap: 0.3rem; }
  .wbl-cabin > p:first-of-type::first-letter {
    font-size: 2.7em;
    float: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
  }
}

@media (max-width: 480px) {
  .wbl-flight { grid-template-columns: 1fr; }
}

/* Motion courtesy. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .wbl-stall:hover .wbl-stall__pane { transform: none; }
}

/* Print: a travel notebook on paper. */
@media print {
  .wbl-tower, .wbl-landing, .wbl-escape, .wbl-track, .wbl-contrail { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wbl-cabin { max-width: none; }
  .wbl-freight { background: #fff; color: #000; border: 1pt solid #000; }
  .wbl-apron__veil { background: rgba(16, 22, 30, 0.92); }
}