/* ══════════════════════════════════════════════════════════════════════
   trip.css — only what the trip pages add on top of banga.css.

   banga.css is untouched and still does all the work. This file holds the
   three things the new structure needs and the old one had no object for:

     1. the departures list        — the page never showed a date before
     2. the chart↔day link         — the chart and the itinerary were two
                                     tellings of the same numbers; now they
                                     are one object with an overview and a
                                     detail view
     3. price + qué incluye merged — two sections became one band, so the
                                     lists need to survive on ink

   Everything else on the page is a component that already existed.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. salidas ───────────────────────────────────────────────────────
   Four rows, not four cards. A card implies each departure is a different
   product; they are the same trip on different weeks, so the only things
   that vary — the date, what is left, what it costs at that size — are the
   only things drawn. The row is the whole hit area.

   Grid rather than flex because the four columns have to line up down the
   list: a reader compares departures vertically, one column at a time. */
.deps{list-style:none;margin-top:clamp(28px,4vh,48px);border-top:1px solid var(--rule);
  /* capped, and capped again when the bar became seven pips: a row that
     is a date, seven dots and a button needs about half the page, and at
     940 there were four hundred empty pixels between the count and the
     thing you press. A comparison you read DOWN a column should not make
     the eye travel sideways to finish a row. */
  max-width:720px}
/* Three columns, and the third is the button. The first draft had five —
   date, duration, seats, price, button — and four departures of the same
   trip share their duration and their starting price, so two of those
   columns printed the identical string four times down the page. That is
   the repetition this whole restructure exists to remove, so they are
   gone: "8 días" is in the sentence under the title, and the price is in
   the button and again on the ink band. What varies between these four
   rows is the week and what is left of it. Only that is drawn. */
.dep{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
  gap:clamp(18px,3vw,44px);
  padding-block:clamp(18px,2.4vh,26px);
  border-bottom:1px solid var(--rule-soft);
}
/* the date is the row's headline, so it takes the display face at the size
   a date deserves on the page a person is choosing a week of their year */
.dep-when{font-family:var(--display),var(--sans),sans-serif;font-weight:400;
  font-size:clamp(21px,2.5vw,34px);line-height:1;letter-spacing:-.03em;
  color:var(--heading);font-variant-numeric:tabular-nums}
/* the year rides on the same line, quieter. It was a second line under the
   date carrying four characters, which is a row of its own for a fact
   nobody reads separately. */
.dep-when em{font-style:normal;font-family:var(--sans),system-ui,sans-serif;
  font-size:.52em;letter-spacing:-.02em;margin-left:.5em;
  /* was opacity:.5, which measured 2.17:1 — and 1.44:1 once the sold-out
     row's own fade multiplied into it. Two stacked opacities is how text
     ends up at a contrast nobody chose. The year is quieter by being
     half the size; it does not also need to be half visible. */
  color:var(--body)}
/* ── what is left: seven things, not a length ─────────────────────────
   This was a bar, and a bar was wrong twice over.

   First, the page already draws bars, and they mean metres descended. Two
   different quantities in the same form on one page is not repetition, it
   is ambiguity — the reader has to work out which kind of bar this is.

   Second, and the real point: a bar encodes a magnitude you cannot count.
   Seats are SEVEN THINGS. You can count them, so they are drawn as seven
   things, and the row says what it means without a scale.

   The polarity is the site's own. In Qué incluye a filled dot is
   something you get and a hollow ring is something you do not — so a
   filled pip is a seat still available and a hollow one is gone. It
   falls out of that: a departure with room reads strong, a full one is
   seven empty rings, and the group size the whole site argues for —
   never more than seven — is finally visible on every date instead of
   being a sentence underneath. */
.dep-left{min-width:0;display:flex;align-items:center;flex-wrap:wrap;
  gap:6px clamp(12px,1.4vw,18px)}
.dep-pips{display:flex;gap:5px;flex:none}
.dep-pips i{display:block;width:9px;height:9px;border-radius:99px;
  box-shadow:inset 0 0 0 1.5px var(--muted);opacity:.42;
  transition:opacity .3s ease,background .3s ease}
.dep-pips i.free{background:var(--muted);box-shadow:none;opacity:1}
.dep-seats{font-size:13.5px;color:var(--body);font-variant-numeric:tabular-nums}
/* the last one left is the only fact on the page that should raise its
   voice, and it does it by going to full ink rather than by turning red */
.dep.tight .dep-seats{opacity:1;color:var(--muted)}

.dep-go{justify-self:end}

/* A full departure is still shown. Hiding it would remove the only honest
   evidence on the page that these weeks actually sell, and "septiembre ya
   está llena" is the reason to look at October now. */
/* A sold-out row reads as sold out through its seven empty pips and the
   words "Sin lugares" — it does not need to be faded as well, which is
   what took "Llena" to 2.17:1. The date stays fully legible: it is the
   evidence that these weeks sell, and evidence you cannot read is not
   evidence. */
.dep.full .dep-when,.dep.full .dep-seats{color:var(--body)}
.dep.full .dep-pips i{opacity:.34}
.dep.full .dep-go .btn{pointer-events:none;opacity:.62}

/* On a phone the row folds to two lines and not four: the date and its
   button on the first, what is left underneath. Stacking every field gave
   each departure 400px of screen, which turned four weeks into four
   slides — the same failure at a smaller size. */
@media(max-width:760px){
  .dep{grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:center;
    padding-block:20px}
  .dep-when{grid-column:1;grid-row:1}
  .dep-go{grid-column:2;grid-row:1;align-self:center}
  .dep-left{grid-column:1 / -1;grid-row:2}
}

/* ── 2. the chart and the itinerary, linked ───────────────────────────
   The old page charted five descents and then described the same five
   descents in prose, which is the repetition this restructure exists to
   remove. Neither one is redundant once they are the same object: the
   chart is the overview, the day is the detail, and pointing at one marks
   the other. The scroll is deliberately NOT automatic — a page that moves
   under you because you hovered something is a page you cannot read. */
.day{transition:background .35s ease,border-color .35s ease}
.day.lit{background:color-mix(in srgb,var(--muted) 9%,transparent);
  /* the tint has to reach the gutters or it reads as a card that appeared */
  box-shadow:0 0 0 clamp(12px,2vw,28px) color-mix(in srgb,var(--muted) 9%,transparent)}
.day.lit .day-n b{opacity:1;color:var(--muted)}

/* the numbers each riding day actually holds, printed on the day itself.
   They come from the same tripSegs the chart is drawn from, so the two can
   never drift apart — which is what happens when a figure is typed twice. */
.day-figs{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;
  font-family:var(--mono),var(--sans),sans-serif;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;color:var(--body)}
/* the figure itself was amber on cream — 1.75:1, the least readable thing
   in the itinerary and the only part of it anybody scans. It keeps the
   emphasis through weight; the amber stays on the chart, where it is a
   bar and not a number you have to read. */
.day-figs b{font-weight:500;color:var(--body)}
.day-figs span{white-space:nowrap}
/* the segment names, for a day that is more than one ride */
.day-runs{margin-top:12px;font-size:13.5px;color:var(--body);letter-spacing:-.03em}

/* a chart row you can point at should say so */
.drop{border-radius:3px;transition:background .3s ease}
.drop:hover{background:color-mix(in srgb,var(--muted) 7%,transparent)}

/* ── 3. precio + qué incluye, no band at all ──────────────────────────
   This was ink. banga.css put it there because the page was 44% flat
   cream and the price deserved the one value change — and it was never a
   flat rectangle in the original, it had the drawn range on its floor.
   The restructure took the range away (the footer closes on the same one
   700px later) and what was left was a slab.

   The answer was not a better fill. The page ALREADY has a ground —
   approach.js paints the terrain behind every section — and the band was
   the thing hiding it. So the fill goes and the ground comes through.

   What makes this section different is not a new background. It is the
   only section on the page that gives up the gutters: the ground runs
   edge to edge here and is inset everywhere else, so the map opens out
   at the point where you decide. Same ground, more of it.

   The emphasis the ink used to carry moves to the prices, which is
   where it should have been — five figures in tabular display type are
   already the loudest thing on the page. */
.deal-sec{
  max-width:none;
  padding-block:clamp(56px,7vh,88px);
  /* out to both edges. The inner columns keep the measure so nothing
     actually sits in the bleed — it is the ground that opens out, not
     the type. */
  padding-inline:var(--gut);
  /* No wash. It used to sit six percent warmer than the sections either
     side, and on screen that read as a pink tint Danny did not want
     (6 October). It shares the page's ground now. */
}
.deal-sec > *{max-width:1500px;margin-inline:auto}

/* ── the ladder ───────────────────────────────────────────────────────
   Measured before it was touched, and the numbers named the problem:

     "4 riders" label      2.69:1 at 19px   — AA wants 4.5
     "$2,720" highlighted   2.58:1 at 40px  — AA wants 3 for large text
     fine print             2.50:1 at 13.5  — AA wants 4.5

   Every one of those failed for the same reason: the hierarchy was built
   out of OPACITY. Fading text is the cheapest way to make something look
   secondary and the most expensive way to pay for it — it takes the
   contrast down with the emphasis. So none of this is faded any more.
   Rank comes from size, from weight and from position, all of which are
   free. --body on --page measures 5.47:1, so everything set in it clears
   AA outright.

   The worst of the three was the highlighted price: the one number the
   section exists to show was the least legible thing in it, because the
   highlight was amber-on-cream. The highlight is a tinted ROW now — a
   common region rather than a colour swap — which reads faster AND stops
   asking a low-contrast hue to carry the meaning.

   The other half was proximity. The label ended at x≈190 and its number
   began at x≈575: 385 pixels of nothing between a thing and its price,
   five times down the page, so no row read as a pair. The ladder is 400
   wide now and the two are adjacent. */
.ladder{width:auto;border-collapse:collapse;margin-top:14px;
  /* pulled left by exactly the cell's own padding, so the labels sit on
     the same left edge as the caption above, the paragraph above that,
     the add-on line and the button — and the highlight band still bleeds
     a little past it, which is what makes it read as a band rather than
     as a box drawn around a row */
  margin-left:-14px}
/* A fixed label column with the number set LEFT immediately after it,
   rather than a wide table with the number pushed to the far right rail.
   Right-aligning the price is what opened the 240px hole between a tier
   and its cost — and a right rail only earns that distance when the
   figures have different digit counts and have to align on the decimal.
   These four are all four digits with tabular figures, so they form a
   clean column wherever they start. Twelve of those pixels are worth
   more as proximity than as alignment. */
/* width:1% makes a table cell shrink to its own text. A fixed 112px
   column left 50px of slack after "4 riders", which put the label the
   SAME distance from its price (56px) as from the row beneath it (56px)
   — and when the two distances are equal the eye has no reason to bind
   one pair over the other. The gap is 22px now against a 56px pitch, so
   a row groups before a column does. */
.ladder th{width:1%;text-align:left;font-weight:400;
  padding:13px 0 13px 14px;
  font-family:var(--sans),system-ui,sans-serif;
  font-size:clamp(15px,1.3vw,17px);letter-spacing:-.03em;
  color:var(--body);white-space:nowrap;vertical-align:middle}
.ladder td{text-align:left;padding:13px 26px 13px 22px;white-space:nowrap;
  font-family:var(--mono),var(--sans),sans-serif;font-variant-numeric:tabular-nums;
  font-size:clamp(22px,2.2vw,30px);line-height:1;color:var(--heading)}
/* the tier that costs least is marked by the row it sits in, not by a
   colour the eye has to work for */
/* 20% of the amber put the row's own text at 4.42:1 — under AA by a
   hair, and invisible to any check that reads the CSS rather than the
   pixels, because color-mix backgrounds do not compose the way a naive
   contrast probe assumes. Measured off the rendered frame instead. */
.ladder tr.hi{background:color-mix(in srgb,var(--muted) 13%,transparent)}
.ladder tr.hi th,.ladder tr.hi td{color:var(--heading)}
/* the marker sits after the PRICE, not under the label. Table columns
   share a width, so a 130px caption in the label cell set the width of
   that column for every row — which is where the 50px of slack came
   from, and with it the ambiguity about what each label was bound to. */
.ladder tr.hi em{font-style:normal;margin-left:14px;
  font-family:var(--mono),var(--sans),sans-serif;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--heading);
  vertical-align:middle}
/* the unit, once, instead of "USD" five times down a column */
.ladder-cap{font-family:var(--mono),var(--sans),sans-serif;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--label);
  margin-top:clamp(26px,3.5vh,40px)}

/* the bike rental was the fifth rung of a ladder it is not on: the column
   read 3,420 · 3,220 · 2,920 · 2,720 · 70, which is not a price going
   down, it is a different kind of thing pretending to be one. */
/* No rule above it. A rule there made it read as a table's total row,
   which is the same "fifth rung of a ladder it is not on" problem in a
   different costume. Space separates it instead, and the highlight band
   ending above gives the eye the edge it needs. */
.addon{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  max-width:386px;margin-top:clamp(24px,3vh,34px);font-size:15px}
.addon b{font-weight:400;font-family:var(--mono),var(--sans),sans-serif;
  font-variant-numeric:tabular-nums;color:var(--heading);white-space:nowrap}

/* the ladder and the lists are a 5-row table against a 12-item list, so an
   even split leaves the table floating in half a screen. */
/* the ladder is 400 wide, so the column that holds it is sized for it
   rather than being half the page with a table floating in it */
@media(min-width:920px){
  .two.deal{grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
    gap:clamp(40px,6vw,96px)}
}
.deal .ticks{grid-template-columns:none}
.deal-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;padding-bottom:14px;margin-bottom:6px;
  border-bottom:1px solid var(--rule)}

/* ── the kit list, folded ─────────────────────────────────────────────
   Ten more bullets on a page that already has twelve. It is real, and it
   is also the only list here that nobody reads before paying — it is what
   you do in the two weeks after. So it keeps every word and costs one line
   until somebody wants it. */
.fold{border-top:1px solid var(--rule);margin-top:clamp(30px,4.5vh,52px)}
.fold summary{
  list-style:none;cursor:pointer;padding:24px 0;display:flex;gap:18px;
  align-items:center;color:var(--heading);
  font-family:var(--display),var(--sans),sans-serif;font-weight:400;
  font-size:clamp(19px,2vw,26px);letter-spacing:-.02em;
  transition:color .25s ease;
}
.fold summary::-webkit-details-marker{display:none}
.fold summary:hover{color:var(--muted)}
.fold summary:focus-visible{outline:1px solid var(--muted);outline-offset:6px}
/* the same drawn cross as the FAQ rows, so the two disclosures on this
   site are one object */
.fold .q-mark{margin-left:auto}
.fold[open] .q-mark{transform:rotate(90deg)}
.fold[open] .q-mark::before{opacity:0}
.fold .fold-body{padding-bottom:36px}
@media(prefers-reduced-motion:no-preference){
  .fold[open] .fold-body{animation:faqIn .42s cubic-bezier(.2,.7,.2,1) both}
}

/* ── small shared bits ────────────────────────────────────────────────── */
/* size and colour, never a fade — see the ladder note. --label is the
   map's amber and is reserved for tracked caps; body copy that has to be
   read stays in --body. */
.fine{font-size:13.5px;line-height:1.7;color:var(--body);
  margin-top:22px;max-width:44ch}
/* the lede sits under the h1 in the masthead now instead of in the aside,
   so the first screen is a name, a sentence and a photograph */
.masthead .lede{margin-top:clamp(20px,3vh,34px);max-width:38ch}
.hero-aside .dep-mini{margin-bottom:clamp(22px,3vh,34px)}
/* the next real departure, in the hero. The one fact the old hero could
   not show because the page had no departures on it anywhere. */
.dep-mini{border-left:2px solid var(--muted);padding-left:16px}
.dep-mini b{display:block;font-family:var(--display),var(--sans),sans-serif;
  font-weight:400;font-size:clamp(19px,1.9vw,25px);letter-spacing:-.03em;
  line-height:1.05;color:var(--heading);font-variant-numeric:tabular-nums}
.dep-mini span{display:block;margin-top:8px;font-size:13.5px;
  color:var(--body);font-variant-numeric:tabular-nums}


/* ── the chart, held to the measure ───────────────────────────────────
   Full-bleed it became a graphic in its own right — 950px of bar for
   1,819 metres, with the day labels stranded at the far left. It is
   evidence for the sentence above it, so it is set to the same measure
   the sentence is. */
.profile{max-width:860px}

/* ── the itinerary, two up ────────────────────────────────────────────
   Eight days down a single column is eight screens, each one a heading
   and three lines with 40% of the page empty to the right of it — which
   is the shape that reads as a slide deck more than anything else on the
   page. Two columns halves the section and fills the ground it was
   already wasting. Reading order is unchanged: grid flows left to right,
   so it is still 01 02 / 03 04. */
@media(min-width:1120px){
  .days{display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(38px,5vw,90px)}
  .day{border-bottom:1px solid var(--rule-soft)}
  /* the tint has to stay inside its own column now, so the bleed that
     reached the gutters would overlap the neighbour */
  .day.lit{box-shadow:0 0 0 14px color-mix(in srgb,var(--muted) 9%,transparent)}
}

/* ── one range, not two ───────────────────────────────────────────────
   The ink band was built to end on the drawn range, back when a cream
   list section followed it. It is the last section before the footer
   now, and the footer closes on the same range — so the page drew the
   same mountains twice, 700px apart. The band keeps the ink and gives up
   the picture; the footer keeps the picture. */
/* ten items in one column is what made this band a thousand pixels tall.
   They are four-word lines; they were never a one-column list. */
/* Incluido ran two columns of bullets inside a two-column section, which
   put three column systems in one box. One column, and the section is
   still shorter than it was because the ladder gave back the height. */
.deal .ticks li{max-width:52ch}


/* ── the rules that were not separating anything ──────────────────────
   Measured every horizontal border on the page and seven of them were drawn
   where nothing needed dividing. A hairline earns its place by keeping
   two things apart that would otherwise run together; where a section
   already opens with a tracked label and eighty pixels of air, the rule
   is just a line.

   The pair that gave it away sat 32px apart at the foot of the page —
   the price section closing itself and the footer opening itself, both
   drawing the same edge.

     section tops    ×4   the label and the padding already do this
     precio top+bottom    the wash marks that section now
     incluye-not top      the "No incluido" heading rule is 80px below it
     day bottoms     ×8   see below

   What stays: the departures list (rows of the same thing, in a column
   you read down), the day rows on a phone, the two list headings, the
   fold, and the footer's own top edge — which is now the only rule in
   the bottom third of the page instead of one of two. */
.deal-sec.band{border-top:none}
section.band{border-top:none}
.incluye-not{border-top:none;padding-top:clamp(24px,3.5vh,40px)}

/* In two columns every row of days drew TWO 598px rules at the same
   height with the gutter between them — a broken dash across the page,
   four times. The days do not need them there: each one opens with its
   number set at 60px, which separates them harder than a hairline can.
   On a phone the column is single and the rule is a clean full-width
   edge, so there it stays. */
@media(min-width:1120px){
  .days{border-top:none}
  .day{border-bottom:none;padding-block:clamp(24px,3.2vh,40px)}
}


/* The footer drew a rule across the page under Precio. With the price
   section's own fill and rules gone there is nothing above it to divide
   from — the terrain runs continuously into the footer, and the drawn
   range a few hundred pixels down is already the edge that says the page
   has ended. */
.foot{border-top:none}

/* ── the hero gallery takes another column ────────────────────────────
   Taller was most of the answer, but the aside beside it only ever uses
   its top two hundred pixels — a date, a button and a link — so five of
   twelve columns were being held for four hundred pixels of nothing. The
   gallery takes eight and the aside three; the button and the seat line
   both still fit without wrapping, and the photographs get the width. */
   Keyed on the aside actually being the compact kind. Peru's is a date,
   a button and a link; CDMX's is a full paragraph of lede and would be
   unreadable in three columns, so it keeps its four and its gallery
   keeps seven. */
@media(min-width:821px){
  .hero:has(.dep-mini) .accordion-gallery{grid-column:1 / span 8}
  .hero:has(.dep-mini) .hero-aside{grid-column:10 / span 3}
}

/* Oaxaca has no price ladder to show, so the photograph its old Qué
   incluye section carried sits in that slot instead. Held to the ladder's
   own measure so the column keeps its left edge. */
/* .shot-one.tall in banga.css zeroes the margin and centres the frame,
   which put this photo flush against the button above and adrift from the
   column's left edge. Both are overridden here: space above, and the
   frame starts where the button starts. */
.deal-sec .shot-one.deal-shot{margin:clamp(30px,4.5vh,52px) 0 0;max-width:400px}
.deal-sec .deal-shot .tilted-card-figure{margin-inline:0}