@charset "UTF-8";
/* ---------------------------------------------------------------------------
   LENGTH RAIL — the four retreat lengths, with the current page's cell marked.
   Added 2026-08-20 with the Retreat Type page rebuild (nodes 20, 21, 22, 47).

   Sits BELOW the inclusions list, not at the top of the page: at the top it
   invites a visitor to leave for another length before they have read anything
   about this one, and below the list is the first point at which they have a
   basis for the comparison.

   THE COLOURS ARE THE PAGE'S OWN. Every cell is a solid $primary block with
   $paper-plum text — the same object the price block and the day chips already
   are on these pages, so the strip reads as part of the same language rather
   than as an imported component. Measured against the ground each pair is
   actually drawn on:

     $paper-plum #FDFBFA on $primary       #0C434A ..... 10.62:1  length, detail
     $sand       #D5C4A1 on $primary       #0C434A .....  6.38:1  price, hairlines
     $paper-plum #FDFBFA on $primary-start #072F33 ..... 13.91:1  current cell
     $sand       #D5C4A1 on $primary-start #072F33 .....  8.36:1  the current bar
     $primary    #0C434A on $paper         #F6F3EE .....  9.90:1  the strip's edge

   The only pair that carries no text is the filled bar on the current cell, at
   8.36:1 against WCAG 1.4.11's 3:1 floor for a graphical object.

   WRAPS, NEVER SCROLLS. `auto-fit` + `minmax` wraps by construction, so there
   is no horizontal-scroll container and no suppressed scrollbar. At 390px the
   container is 341px and two 11rem columns plus the 1px gap need 353px, so it
   renders as four rows of one.
   --------------------------------------------------------------------------- */
.length-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background-color: #D5C4A1;
  border: 1px solid #D5C4A1;
}

.length-rail a.length-rail__item,
.length-rail a.length-rail__item:hover {
  text-decoration: none;
}

.length-rail__item {
  display: block;
  padding: 1.313rem 1rem;
  background-color: #0C434A;
  border-top: 3px solid transparent;
}

/* NOT BY COLOUR ALONE. The current length is marked three ways: a ground one
   step DARKER than its siblings, a filled $sand bar along its top edge (a
   shape, not a hairline), and being a <span> among <a>s — so it is not
   focusable, carries no underline, and announces aria-current="page".

   The ground is $primary-start rather than $primary-end deliberately. On
   $primary-end the current cell was LIGHTER than its siblings, and the hover
   below lightens a cell to that exact colour — so the one cell that does
   nothing wore the permanent appearance of a hovered one. A "you are here"
   marker has to recede, not advance. The hover lift now moves away from the
   current cell instead of toward it. */
.length-rail__item--current {
  background-color: #072F33;
  border-top-color: #D5C4A1;
  cursor: default;
}

.length-rail__length {
  display: block;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.313rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  color: #FDFBFA;
}

.length-rail__detail {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
  color: #FDFBFA;
}

.length-rail__price {
  font-variant-numeric: tabular-nums;
  color: #D5C4A1;
}

a.length-rail__item:hover {
  background-color: #126872;
}

a.length-rail__item:focus-visible {
  outline: 2px solid #126872;
  outline-offset: -4px;
}

/*# sourceMappingURL=length-rail.css.map */