/* ══════════════════════════════════════════════════════════════════════
   banga.css — everything shared by the pages that aren't the landing page.

   Tokens match the home page's shipped defaults exactly (sand ground, oxblood
   ink, terracotta contours), so a trip page and the landing page read as one
   site. One difference, deliberate: the landing page sets Format 1452 for BOTH
   display and text, which works on a poster and does not work across an
   eight-day itinerary. Here Format 1452 stays the signature and Archivo does
   the reading. Two faces, no more.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* Danny's tune for the trip pages, 1 September, handed over as a shared
     link from the COLORES panel. White ground, near-black type, rust for
     the secondary voice and the buttons, and the contour lines in the
     lighter brick. banga.css is the trip pages, Preguntas and the 404
     only; index.html loads averia.css and keeps the ground it was signed
     off with.

     Near-black on white is 15.9:1, so this palette clears AA everywhere
     the old rust-on-off-white was scraping past it — including the places
     that were failing outright. The exact hexes are his; nothing here is
     rounded or adjusted. */
  --page:#FFFFFF;
  --heading:#291A0C;
  --body:#291A0C;
  --muted:#9F451E;
  --rule-ink:#291A0C;
  --label:#B35739;
  --accent:#9F451E;

  /* Roles the trip pages never paint themselves but the colour panel sets
     site-wide, so a palette chosen here survives the walk back to the
     landing page. --map is kept as an alias because a handful of older
     rules and the terrain's own draw call still ask for it by that name. */
  --terrain-ink:#291A0C;
  --terrain-line:#B35739;
  --photo:#291A0C;
  --map:var(--muted);
  --display:'Format 1452';
  --sans:'Google Sans Flex';
  /* Two faces on this site and no third: Format 1452 signs, Google Sans
     Flex works. What used to be IBM Plex Mono is the same Flex — the
     technical register comes from the tracking and the caps, not from a
     different family, and Flex carries tabular figures (tnum) so times and
     prices still line up in a column. */
  --mono:'Google Sans Flex';

  --gut:clamp(22px,6vw,120px);
  --rule:color-mix(in srgb,var(--rule-ink) 20%,transparent);
  --rule-soft:color-mix(in srgb,var(--rule-ink) 12%,transparent);
  /* photographs get their own radius. The 2px on buttons is a drawn edge
     and the 99px pills are a shape; a picture needs neither. */
  --r-media:clamp(10px,1vw,18px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--page);color:var(--body);
  font-family:var(--sans),system-ui,sans-serif;
  font-size:17px;line-height:1.6;
  /* Google Sans Flex is set at -3 throughout — every explicit tracking
     value on a sans element below matches this, so nothing drifts back to
     the looser fit Archivo wanted */
  letter-spacing:-.03em;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: hidden makes the body a scroll container and kills
     the sticky top bar inside it; clip cuts the overflow the same way */
  overflow-x:clip;
}
img{max-width:100%;display:block}
::selection{background:var(--body);color:var(--page)}

/* ── type ─────────────────────────────────────────────────────────────── */
/* Same section label as the landing page: tracked caps in the accent, not
   sentence case in the map's ink. These are the same object on both pages
   and they were set two different ways. */
.eyebrow{font-family:var(--mono),var(--sans),sans-serif;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
h1,h2,h3{font-family:var(--display),var(--sans),sans-serif;font-weight:400;
  color:var(--heading);letter-spacing:-.02em;line-height:1}
h1{font-size:clamp(40px,7.5vw,104px);line-height:.94;letter-spacing:-.035em}
h2{font-size:clamp(28px,4.4vw,58px);max-width:17ch}
h3{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.015em}
.lede{font-size:clamp(18px,1.9vw,24px);line-height:1.45;max-width:34ch}
.body{max-width:62ch}
.body + .body{margin-top:1em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* his words, kept as his words */
blockquote{
  margin:30px 0;padding:0 0 0 22px;border-left:2px solid var(--muted);
  font-size:clamp(17px,1.6vw,21px);line-height:1.55;max-width:56ch;
}
blockquote p + p{margin-top:.8em}

/* the nav lives in frame.css, shared with every page */
.wrap{max-width:1500px;margin-inline:auto;padding-inline:var(--gut)}
/* tightened from 9vh: two adjacent sections were putting 162px of empty
   band between one sentence and the next */
section.band{padding-block:clamp(48px,6.5vh,100px);border-top:1px solid var(--rule-soft)}
section.band:first-of-type{border-top:none}
/* a header already carries its own bottom space */
header + section.band{padding-top:clamp(18px,3vh,42px)}
.sec-lab{display:block;margin-bottom:26px}
.two{display:grid;gap:clamp(28px,4vw,72px)}
@media(min-width:920px){.two{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}

/* ── buttons ──────────────────────────────────────────────────────────── */
/* ── buttons ──────────────────────────────────────────────────────────
   The label is set in Format 1452, the same face as the headlines, at a
   size a display face actually wants. */
/* Same button as the landing page's .ask, to the pixel. It used to be set
   in the display face at sentence case with a 6px radius, which is a
   different object from the one on index.html — and a reader who has just
   come from the landing page reads that as a different site, not as a
   second theme of one. The palette is allowed to change between the sand
   page and these; the furniture is not. */
.btn{
  display:inline-flex;align-items:center;gap:14px;cursor:pointer;border:none;
  font-family:var(--mono),var(--sans),sans-serif;font-weight:400;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  color:var(--page);background:var(--accent);padding:20px 30px;border-radius:2px;
  text-decoration:none;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform;
}
.btn:hover{transform:translate3d(0,-3px,0)}
.btn.ghost{background:none;color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.btn.small{padding:14px 20px;font-size:11.5px}
/* the price rides on the same baseline, quieter, behind a hairline. Not
   uppercased with the label — a price is a number, and small caps on
   "desde $2,720 USD" reads as shouting a figure. */
.btn em{font-style:normal;opacity:.88;font-size:.88em;text-transform:none;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
  padding-left:14px;border-left:1px solid color-mix(in srgb,var(--page) 38%,transparent)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:38px}

/* ── the numbers strip ────────────────────────────────────────────────
   No box, no dividers, no cells. Five numbers with air around them. The
   rules and boxes were doing the job that whitespace does better. */
.figs{display:flex;flex-wrap:wrap;gap:clamp(30px,4.5vw,68px);margin-top:clamp(38px,5vh,64px)}
.fig{flex:0 0 auto}
.fig b{display:block;font-family:var(--display),var(--sans),sans-serif;font-weight:400;
  font-size:clamp(30px,3.6vw,50px);letter-spacing:-.035em;line-height:1;color:var(--heading);
  font-variant-numeric:tabular-nums}
.fig span{display:block;margin-top:9px;font-family:var(--sans),system-ui,sans-serif;
  font-size:13.5px;line-height:1.45;opacity:.9;max-width:24ch}

/* ── photo placeholders, same convention as the landing page ──────────── */
.plate{position:relative;width:100%;aspect-ratio:16/7;overflow:hidden;display:grid;
  place-items:center;border:1px solid var(--rule);margin-block:clamp(34px,5vh,64px)}
.plate::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 26px,
    color-mix(in srgb,var(--rule-ink) 7%,transparent) 26px 27px)}
.plate span{position:relative;font-family:var(--sans),system-ui,sans-serif;font-size:13.5px;letter-spacing:-.03em;color:var(--muted);text-align:center;padding:0 26px;line-height:2;max-width:46ch}
.plate.tall{aspect-ratio:4/5}
.plate.wide{aspect-ratio:21/8}

/* ── filled photo slots ───────────────────────────────────────────────
   The plate is the empty state. These are the same two slots once a real
   photograph is in them. The frames from the trips are portrait, so the
   wide slot holds a row of them rather than one letterboxed crop —
   cropping a 3:4 frame to 21:8 throws away most of the photograph. */

/* position:relative is load-bearing, not decoration: the terrain canvas is
   painted behind the whole page, and anything left in the default stacking
   context disappears under it. The plate this replaces carried it too. */
.shots{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.3vw,20px);margin-block:clamp(34px,5vh,64px)}
.shot-one{position:relative;z-index:1;margin-block:clamp(34px,5vh,64px)}

.shot-one.tall{margin:0}

/* The frame itself is now the TiltedCard component — see tilted-card.css
   and tilted-card.js. What stays here is only how the slots are laid out. */
.shots .tilted-card-figure{aspect-ratio:3/4}
/* One photograph filling the wide slot. 21:8 — which is the ratio .plate.wide
   was already drawn at before any photograph existed, and the original was
   right.

   Measured across the trip and destination pages of eight operators and two
   editorial magazines at a 1440x900 screen, the rule is the same everywhere
   and it is a trade, not a size: a picture can be wide or it can be tall, and
   never both. Full-width frames run 35-56% of the screen (Sacred Rides 53,
   Wandering Wheels 56, Kinfolk 55, Black Tomato 39). Frames that run 65-110%
   tall are 25-47% of the width — Black Tomato 400x600, Kinfolk 676x990. The
   only images that take a whole screen in both axes are heroes with the
   title set on them.

   16:10 put this one at 88% of the screen in both axes carrying no type,
   which is not a photograph on a page, it is a slide. 21:8 is 483px at this
   width — 54% — so the section under it stays on screen and the picture
   stays a picture. */
/* ── inverted band ────────────────────────────────────────────────────
   The page is 7,000px long and 44% of it is a single flat colour. Measured
   luminance per screen, top to bottom: 151, 122, 145, 181, 186, 197, 189 —
   the top three screens carry the photographs and the bottom four are
   almost blank cream. The page spends everything it has in the first half
   and then flatlines, and no palette change fixes that, because a
   differently coloured flat page is still flat.

   So one band goes to ink. Not for decoration — it is the only value change
   on the page, so it lands on the moment that deserves the emphasis: the
   price. It also gives the bottom half of the page something to be.

   Only one. Two dark bands is a stripe. */
.band.invert{
  position:relative;
  border-top:none;
  color:var(--page);
  /* the floor of the band is deliberately empty: it is sky for the range */
  padding-block:clamp(80px,11vh,160px) clamp(190px,20vw,300px);
}
.band.invert::before{
  content:'';position:absolute;z-index:-1;
  /* out to both edges — a band, not a card */
  inset:0 calc(var(--gut) * -1);
  background:var(--body);
}
/* the range from the landing page's footer, sitting on the floor of the
   band. Same still, same shader — it is the one piece of drawn landscape
   the brand owns, and the price block was the only flat colour on the
   page. Low enough that the ladder above it never has to compete. */
.band.invert::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);bottom:0;
  height:clamp(150px,16.5vw,260px);
  /* anchored to the top of its own box so the peaks read and the solid
     mass below them runs off the bottom edge of the band */
  background:url(./assets/range-wide.png) center top/100% auto no-repeat;
  opacity:.5;
}
.band.invert h2,
.band.invert .eyebrow,
.band.invert .spec td{color:var(--page)}
.band.invert .eyebrow{opacity:.65}
.band.invert .body{opacity:.82}
.band.invert .spec th{opacity:.55}
.band.invert .spec tr.hi td{color:#F0A868}     /* the amber reads on ink; --map does not */
.band.invert .btn{background:var(--page);color:var(--body)}
.band.invert .btn em{border-left-color:color-mix(in srgb,var(--rule-ink) 30%,transparent)}
.band.invert .btn.ghost{background:none;color:var(--page);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--page) 34%,transparent)}

/* ── the column grid ──────────────────────────────────────────────────
   Measured against Kinfolk and Sacred Rides at 1440x900, the difference
   between those pages and this one was never the size of a photograph. It
   was that they have a grid and this page did not.

     left edges in use   Kinfolk 32 / 288 / 328 / 360 / 608   — five
                         Sacred Rides 0 / 120 / 152 / 184 / 696 / 736 / 824
                         banga 88 / 232                        — two

   Two left edges is not a layout, it is a stack: eyebrow, heading, copy,
   full-width thing, repeat. That is why a photograph here had nowhere to
   be except the whole width or half of it, and why moving it around never
   fixed anything.

   Twelve columns. Things span different amounts of them. */
.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(14px,1.6vw,26px);
  align-items:start;
}
@media(max-width:820px){ .grid{grid-template-columns:1fr} }

/* ── the masthead ─────────────────────────────────────────────────────
   The title runs the full measure rather than sitting at 12ch, and the
   descriptor leaves the top of the page entirely — it now sits in the
   column beside the photograph, with the buttons under it. Which means the
   first screen is a name and five numbers, and the second is a picture
   with the pitch beside it, instead of one column of everything.

   The h1 is sized to fill the measure. 11.2vw puts "Electric Guajolota" at
   roughly the content width on a 1440 screen; shorter names simply do not
   reach the far edge, which is what a masthead does. */
.masthead{padding:clamp(44px,7vh,92px) var(--gut) clamp(18px,3vh,36px)}
.masthead h1{
  font-size:clamp(46px,11.2vw,168px);
  line-height:.9;
  letter-spacing:-.045em;
  max-width:none;
  margin-top:clamp(14px,2vh,26px);
  text-wrap:nowrap;
}
@media(max-width:720px){ .masthead h1{text-wrap:balance} }
.masthead .figs{margin-top:clamp(30px,4.5vh,54px)}

/* ── the hero row ─────────────────────────────────────────────────────
   Photograph on seven columns, the pitch on four, one clear column of air
   between them. */
.hero{align-items:start}
/* position:relative and a z-index, for the third time on this site: the
   terrain canvas is painted behind the page and anything left in the
   default stacking context disappears under it. The buttons in here
   survived without it only because .btn carries will-change:transform,
   which promotes them to their own layer — the paragraph had nothing, so
   it vanished while the DOM insisted it was visible and on top. */
.hero-aside{position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-start}
@media(min-width:821px){
  .hero-aside{grid-column:9 / span 4; padding-top:clamp(20px,4vh,64px)}
  /* a trip with no photograph yet still has a slot, and it takes the same
     seven columns — otherwise the empty plate lands in column one and
     collapses to a twelfth of the page, which is what Perú was doing */
  .hero .plate{grid-column:1 / span 7; aspect-ratio:7/5; margin:0}
}
.hero-aside .lede{font-size:clamp(19px,1.55vw,23px);line-height:1.5;max-width:26ch}
.hero-aside .btn-row{margin-top:clamp(26px,4vh,44px);flex-direction:column;
  align-items:flex-start;gap:18px}
/* the second action is a link, not a second button competing with the first */
/* the third rung: a text link, in the same tracked caps as the two above
   it so the three read as one family at three weights */
.btn.bare{background:none;color:var(--body);padding:0;box-shadow:none;
  font-family:var(--mono),var(--sans),sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase}
.btn.bare:hover{transform:none;text-decoration:underline;
  text-underline-offset:5px;text-decoration-thickness:1px}

/* ── the hero photograph, on the grid ─────────────────────────────────
   Seven of twelve, at 7:5 — which is the file's own ratio, so nothing is
   stretched to fit a slot. 740x529 at this width: smaller than the band it
   replaces, still the largest thing on the page, and the ground now has
   somewhere to breathe on the right instead of being sealed off by a
   letterbox. */
.shot-one.wide{margin-block:clamp(8px,1.5vh,20px) clamp(30px,4vh,52px)}
.shot-one.wide .tilted-card-figure{aspect-ratio:7/5}
@media(min-width:821px){
  /* the gallery replaces the wide plate in the hero, so it takes the same
     seven of twelve columns — without this it lands in a single 84px track */
  .shot-one.wide,.accordion-gallery{grid-column:1 / span 7}
}
.shot-one.wide .shot{object-position:50% 58%}

/* ── the tall frame ───────────────────────────────────────────────────
   The other half of the trade: tall means narrow. It sits in the column
   beside the copy rather than across the page. */
.shot-one.portrait{margin:0}
.shot-one.portrait .tilted-card-figure{aspect-ratio:1/1}
/* the sky and the truck bed are the least of this frame; hold the crop on the
   bikes and the treeline */
.shot-one.wide .shot{object-position:50% 62%}
.shot-one.tall .tilted-card-figure{aspect-ratio:9/16;max-height:min(76svh,720px);
  margin-inline:auto;width:auto}

/* On a phone three portraits side by side are three stamps. They become one
   swipe instead — same row, same order, one frame at a time. */
@media(max-width:720px){
  .shots{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;scroll-snap-type:x mandatory;
    /* bleed to both edges so the row reads as a strip, not a boxed widget */
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .shots::-webkit-scrollbar{display:none}
  .shots .tilted-card-figure{scroll-snap-align:center}
  .shot-one.tall .tilted-card-figure{max-height:none}
}

/* ── spec runs ────────────────────────────────────────────────────────
   This used to be a bordered table with a rule under every row, which read
   as a spreadsheet. It is now a run of label/value pairs with nothing drawn
   around them at all. */
.spec{width:100%;border-collapse:collapse;margin-top:6px}
.spec tr{border:none}
.spec th{text-align:left;font-weight:400;padding:12px 22px 12px 0;white-space:nowrap;
  font-family:var(--sans),system-ui,sans-serif;font-size:clamp(15px,1.35vw,19px);
  opacity:.6;letter-spacing:-.03em}
.spec td{text-align:right;padding:12px 0;color:var(--heading);font-variant-numeric:tabular-nums;
  font-family:var(--mono);font-size:clamp(20px,2.1vw,29px)}
.spec tr.hi td{color:var(--muted)}

/* -3 as the default for text, restated at element level on purpose:
   letter-spacing inherits as a computed LENGTH, not as an em, so the value
   set once on <body> is 17px worth of tracking wherever it lands — too tight
   at 11px, too loose at 27px. Element selectors lose to every class rule, so
   the deliberately letterspaced labels below keep their own positive values
   and the headings keep theirs. */
p,li,td,th,a,span,b,em,i,strong,button,input,select,textarea,label,output,summary,blockquote,figcaption{
  letter-spacing:-.03em}

/* ── lists ────────────────────────────────────────────────────────────
   Was a grid with a rule between every cell, which is a spreadsheet. It is
   a list now: two columns of air, one small mark per line, nothing drawn
   around anything. */
.ticks{list-style:none;margin-top:24px;display:grid;gap:15px}
@media(min-width:700px){.ticks{grid-template-columns:1fr 1fr;gap:15px clamp(30px,4.5vw,72px)}}
.ticks li{display:flex;gap:13px;align-items:baseline;font-size:16px;line-height:1.5;max-width:38ch}
.ticks li::before{content:'';flex:none;width:5px;height:5px;border-radius:99px;
  background:var(--muted);transform:translateY(-4px)}
.ticks.no li::before{background:none;box-shadow:inset 0 0 0 1px var(--muted);opacity:.55}

/* ── qué incluye ──────────────────────────────────────────────────────
   Ten items split into two half-height stumps, a two-item list beside
   them, and a 9:16 photograph hung off the bottom of the short one — the
   frame had nothing its own height to stand against, so half the band
   was empty ground. Both lists run down one column now, and the frame
   gets a column narrow enough that it fills rather than floats. */
.incluye-split .ticks{grid-template-columns:none}
.incluye-split .ticks li{max-width:56ch}
.incluye-not{margin-top:clamp(32px,4.5vh,56px);padding-top:clamp(28px,4vh,48px);
  border-top:1px solid var(--rule)}
@media(min-width:920px){
  .two.incluye-split{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
    align-items:stretch}
  /* stretch to the copy's height: the frame's own aspect-ratio and cap step
     aside, and object-fit on the image holds the crop */
  .incluye-split .shot-one.tall .tilted-card-figure{aspect-ratio:auto;max-height:none;
    width:100%;height:100%;min-height:min(70svh,660px)}
}

/* ── footer ───────────────────────────────────────────────────────────── */
/* the rule and the footer's own top padding already separate it; the
   extra margin was putting 213px between the last sentence and the last
   headline */
.foot{border-top:1px solid var(--rule);margin-top:clamp(24px,3.5vh,52px);
  padding:clamp(48px,7vh,96px) var(--gut) 40px}
.foot h2{margin-bottom:34px}

/* The same range that closes the landing page — its own copy of the file,
   not the same one.

   The obvious move was a CSS mask over var(--body), so one asset could
   take whichever ink the page it lands on is set in. It does not work
   here: this PNG is not ink on transparency. Three quarters of it is
   opaque, and those pixels carry both the ink AND the sand — the halftone
   is in the COLOUR, not in the alpha — so masking it flattens the whole
   range into a solid silhouette and throws the screen away. So the file is
   recoloured instead, black-and-white points remapped from sand/oxblood to
   this page's off-white and rust, which keeps every cell of the dither.

   Full bleed: it breaks out of the footer's gutters the way the picture
   does on index, since a mountain range with margins is a diagram. It also
   runs out at the bottom rather than ending on its own edge — on the sand
   page the block's foot reads as ground because the page under it is the
   same family, and on this one it would read as a rust slab. */
.foot-range{
  display:block;width:100vw;margin-left:50%;transform:translateX(-50%);
  aspect-ratio:1600/363;pointer-events:none;
  margin-bottom:clamp(30px,5vh,64px);
  background:url(./assets/range-wide-content.png) center bottom/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 46%,transparent 94%);
          mask-image:linear-gradient(to bottom,#000 0 46%,transparent 94%);
}
@media(max-width:640px){
  .foot-range{aspect-ratio:828/299;
    background-image:url(./assets/range-narrow-content.png)}
}
/* the links belong on the floor of the page and across the whole width of
   it — three groups spread edge to edge, not a cluster in the left third
   with the right quarter of the page left empty */
/* Same mono column as the landing page's footer. These were the last
   sentence-case sans links on the site after the nav and the buttons
   moved. */
.foot-cols{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:clamp(28px,4vw,64px);margin-top:clamp(72px,10vh,132px);
  font-family:var(--mono),var(--sans),sans-serif;font-size:12px;line-height:2.1;
  letter-spacing:.06em}
/* every footer link was at .72 — 3.23:1 — and hovered to amber, which is
   worse. Underline carries the hover instead. */
.foot-cols a{color:var(--body);text-decoration:none;display:block;
  text-underline-offset:4px;text-decoration-thickness:1px}
.foot-cols a:hover{text-decoration:underline}
.foot-cols b{display:block;font-weight:400;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-bottom:9px}
/* tight under the columns: the base line closes them rather than floating
   away from them */
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  margin-top:clamp(22px,3vh,34px);padding-top:20px;border-top:1px solid var(--rule-soft);
  font-family:var(--mono),var(--sans),sans-serif;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.62}

/* ── the draft chip, same honesty as the drawer ───────────────────────── */
@media(max-width:760px){
  .foot-cols{justify-content:flex-start;margin-top:56px;gap:34px}
}

.draft{display:inline-block;font-family:var(--sans),system-ui,sans-serif;font-size:13px;letter-spacing:-.03em;color:var(--muted);border:1px solid color-mix(in srgb,var(--muted) 45%,transparent);
  border-radius:99px;padding:6px 12px}

/* ── how far you drop ─────────────────────────────────────────────────
   One bar per riding day. Length is metres descended. No axis, no box,
   no grid — the bars are the comparison. */
.profile{margin-top:clamp(26px,4vh,48px)}
.drops{display:grid;gap:2px}
.drop{
  display:grid;grid-template-columns:clamp(58px,7vw,86px) minmax(0,1fr);
  align-items:center;gap:clamp(14px,2.5vw,30px);
  background:none;border:none;padding:15px 0;cursor:default;text-align:left;
  color:var(--body);font:inherit;
}
.drop-day{font-size:14.5px;opacity:.9;transition:opacity .25s ease,color .25s ease}
/* a chart whose rows are named rather than numbered needs room for the name */
.drops.named .drop{grid-template-columns:clamp(88px,11vw,150px) minmax(0,1fr)}
.drop-track{display:block;height:11px;position:relative}
/* the pill is laid out at its final width and never transformed, so its
   round caps stay round; the solid inside it scales up behind them. Scaling
   a rounded rect directly squashes the caps into ovals. */
.drop-track i{
  position:absolute;left:0;top:0;bottom:0;display:block;
  width:calc(var(--w) * 100%);border-radius:99px;overflow:hidden;
}
.drop-track i b{
  display:block;width:100%;height:100%;
  background:color-mix(in srgb,var(--muted) 68%,var(--page));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s cubic-bezier(.2,.7,.2,1),background .3s ease;
}
.drop.in .drop-track i b{transform:scaleX(1)}
.drop-n{
  position:absolute;top:50%;left:calc(var(--w) * 100%);
  transform:translate(16px,-50%);white-space:nowrap;
  font-family:var(--display),var(--sans),sans-serif;font-weight:400;
  font-size:clamp(20px,2.3vw,30px);letter-spacing:-.03em;line-height:1;color:var(--heading);
  font-variant-numeric:tabular-nums;opacity:0;
  transition:opacity .5s ease .45s;
}
.drop.in .drop-n{opacity:.78}
.drop-n em{font-style:normal;font-family:var(--sans),system-ui,sans-serif;font-size:13.5px;
  letter-spacing:0;opacity:.55;margin-left:5px}
/* the active label was amber — 2.58:1. The bar beside it already
   changes; the label says "this one" with weight instead of a hue that
   cannot be read. */
.drop.on .drop-day{opacity:1;font-weight:500}
.drop.on .drop-track i b{background:var(--muted)}
.drop.on .drop-n{opacity:1}
.drop:focus-visible{outline:1px solid var(--muted);outline-offset:4px}
/* where there is no hover the row is tapped, so it should look tappable */
@media(hover:none){.drop{cursor:pointer}}
/* a block that sits outside what you paid for is drawn hollow, the same way
   an uncovered item is a hollow dot in Qué incluye */
.drop.opt .drop-track i b{background:none;box-shadow:inset 0 0 0 1px var(--muted);opacity:.6}
.drop.opt .drop-day{opacity:.8}
/* the number still waits for the bar to arrive, like every other row */
.drop.opt.in .drop-n{opacity:.45}
.drop.opt.on .drop-day{opacity:.85}
.drop.opt.on.in .drop-n{opacity:.7}
.drop.opt.on .drop-track i b{opacity:1}
@media(prefers-reduced-motion:reduce){.drop-track i b{transition:none;transform:scaleX(1)}}
.drop-sum{margin-top:22px;font-size:16px;max-width:46ch;opacity:.75}
.drop-sum b{font-weight:500;color:var(--heading);opacity:1}
/* the one line of detail, swapped on hover instead of printed eight times */
.pf-read{margin-top:26px;min-height:3.4em}
.pf-read b{display:block;font-weight:500;font-size:15px;color:var(--heading)}
.pf-read span{display:block;margin-top:6px;font-size:14px;opacity:.9;
  font-variant-numeric:tabular-nums}

/* ── day by day ───────────────────────────────────────────────────────── */
.days{margin-top:clamp(34px,5vh,64px);border-top:1px solid var(--rule)}
.day{display:grid;grid-template-columns:104px minmax(0,1fr);gap:clamp(18px,3vw,44px);
  padding-block:clamp(30px,4.5vh,56px);border-bottom:1px solid var(--rule-soft)}
@media(max-width:680px){.day{grid-template-columns:64px minmax(0,1fr)}}
.day-n b{display:block;font-family:var(--display),var(--sans),sans-serif;font-weight:400;
  font-size:clamp(34px,4.6vw,60px);line-height:.9;letter-spacing:-.04em;color:var(--heading);
  opacity:.28;font-variant-numeric:tabular-nums}
.day.rides .day-n b{opacity:1}
.day-n span{display:block;margin-top:12px;font-family:var(--sans),system-ui,sans-serif;font-size:13px;
  letter-spacing:-.03em;color:var(--muted);opacity:1;color:var(--body)}
.day-body blockquote{margin-block:22px}
/* a note about something still to confirm — same treatment wherever it sits */
.flag{font-size:15px;line-height:1.6;color:var(--muted);
  border-left:2px solid color-mix(in srgb,var(--muted) 45%,transparent);padding-left:16px}
.day .flag{margin-top:16px;font-size:13.5px;letter-spacing:-.03em;
  color:var(--muted);border-left:2px solid var(--muted);padding-left:12px}
.segs{display:flex;flex-wrap:wrap;gap:clamp(28px,4.5vw,72px);margin-top:clamp(24px,3.5vh,38px)}
.seg{flex:0 0 auto}
.seg-name{font-size:14px;color:var(--muted);margin-bottom:11px}
.seg-drop{font-family:var(--display),var(--sans),sans-serif;font-weight:400;
  font-size:clamp(26px,3vw,42px);line-height:1;letter-spacing:-.035em;color:var(--heading);
  font-variant-numeric:tabular-nums}
.seg-drop i{font-style:normal;font-family:var(--sans),system-ui,sans-serif;font-size:13.5px;
  letter-spacing:0;opacity:.6;margin-left:10px}
.seg-more{margin-top:11px;font-size:13.5px;opacity:.58;font-variant-numeric:tabular-nums}
.meals{margin-top:24px;font-size:13.5px;letter-spacing:-.03em;opacity:.5}

/* ── preguntas ────────────────────────────────────────────────────────
   The rows carry a marker when the owner still owes an answer, so what is
   missing is visible without opening twelve of them. It vanishes on its own
   the moment he answers. */
.faq{margin-top:clamp(24px,4vh,44px);border-top:1px solid var(--rule-soft)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 0;display:flex;gap:clamp(16px,2.5vw,28px);
  align-items:baseline;transition:color .25s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--muted)}
.faq summary:focus-visible{outline:1px solid var(--muted);outline-offset:6px}
.q-n{flex:none;font-family:var(--mono);font-size:13px;color:var(--muted);opacity:.6;
  font-variant-numeric:tabular-nums;transform:translateY(-1px)}
.q-t{font-family:var(--display),var(--sans),sans-serif;font-weight:400;
  font-size:clamp(19px,2vw,27px);line-height:1.15;letter-spacing:-.02em;color:var(--heading);
  transition:color .25s ease}
.faq summary:hover .q-t{color:var(--muted)}

/* a thin drawn cross rather than a plus glyph, so it matches the drawing
   language of the rest of the site */
.q-mark{flex:none;margin-left:auto;position:relative;width:15px;height:15px;
  align-self:center;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.q-mark::before,.q-mark::after{content:'';position:absolute;background:var(--muted);
  transition:opacity .3s ease}
.q-mark::before{left:0;right:0;top:7px;height:1.5px}
.q-mark::after{top:0;bottom:0;left:7px;width:1.5px}
/* open rotates to a minus: the bar that survives is the one that ends up
   horizontal, so hide the other one */
.faq details[open] .q-mark{transform:rotate(90deg)}
.faq details[open] .q-mark::before{opacity:0}

/* still owed by the owner */
.faq details.pending .q-t{opacity:.62}
.faq details.pending summary::before{
  content:'';position:absolute;left:-18px;top:calc(50% - 3.5px);width:7px;height:7px;
  border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--muted);opacity:.75;
}
.faq details.pending summary{position:relative}

.faq .a{padding:0 0 34px clamp(30px,4.5vw,58px);max-width:66ch}
.faq .a p + p,.faq .a ul + p,.faq .a blockquote + p{margin-top:1em}
.faq .a blockquote{margin-block:0 1em}
.faq .a ul{list-style:none;margin-top:16px;display:grid;gap:10px}
.faq .a li{display:flex;gap:13px;align-items:baseline}
.faq .a li::before{content:'';flex:none;width:5px;height:5px;border-radius:99px;
  background:var(--muted);transform:translateY(-4px)}
.faq .flag{margin-top:0;font-size:15px;line-height:1.6;color:var(--muted);
  border-left:2px solid color-mix(in srgb,var(--muted) 45%,transparent);padding-left:16px}
@media(prefers-reduced-motion:no-preference){
  .faq details[open] .a{animation:faqIn .42s cubic-bezier(.2,.7,.2,1) both}
  @keyframes faqIn{from{opacity:0;transform:translateY(-8px)}}
}


/* ── the ground ───────────────────────────────────────────────────────
   Bands of still terrain, painted once by terrain.js. The canvas sits at
   z-index -1 inside its own stacking context, so content paints over it
   without either one needing a repaint. The mask feathers the band edges
   so it reads as ground showing through rather than a pasted rectangle —
   it is applied once and costs nothing on scroll. */
.terra{position:relative;isolation:isolate}
.terra > .ground{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
}
/* the footer's ground runs to the bottom of the page instead of fading out */
.foot.terra > .ground{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 100%);
}

/* ── the ground ───────────────────────────────────────────────────────
   The landing page's terrain, fixed behind everything. Dimming happens
   inside the shader, not here — a CSS opacity on a full-screen fixed
   layer makes the compositor blend the whole viewport every scrolled
   frame, which is exactly the cost we are avoiding. */
/* The ground is anchored to the top and deliberately drawn TALLER than any
   viewport it can land in. Phone browsers grow and shrink the viewport as
   their chrome slides, and every unit that claims to describe that — vh,
   svh, lvh, dvh — is right in some states and wrong in others; each one
   left a band of bare page along the bottom on somebody's phone. Bleeding
   past the fold is not a clever fix, it is the one that cannot be wrong.
   The overspill is texture nobody sees. */
/* ── STICKY, NOT FIXED ────────────────────────────────────────────────
   This is the whole answer to the phone glitch, and it is structural.

   A position:fixed layer is pinned to the VIEWPORT. The content is pinned
   to the DOCUMENT. On a phone those two are not the same thing: as the
   browser slides its toolbars away it changes the viewport and nudges the
   scroll position to compensate — so the content moves and the fixed
   ground does not, and you see them tear apart. That is why it only
   happened scrolling down, why it stopped once the toolbars were gone, and
   why turning the rendering off in every combination changed nothing.

   A sticky element is laid out in the document and stuck by the scroller,
   so it moves with the content, always. Whatever the browser does to the
   viewport it does to both at once and there is nothing to see. The
   negative margin takes back the space it would otherwise occupy in the
   flow, so the page above it is unchanged. */
#pageTerrain{
  position:sticky;top:-160px;left:0;z-index:0;display:block;
  width:100vw;height:calc(100svh + 320px);
  /* pulled up by the same 160px it sticks at, so it is already in its
     stuck position at scroll zero rather than sliding into it; the bottom
     margin then takes back exactly the space it would occupy in the flow */
  margin:-160px 0 calc(-100svh - 160px);
  pointer-events:none;
}
/* The nav is not in this list on purpose: position:relative here used to
   beat its position:sticky, which is why the trip pages' nav scrolled away
   until 6 October. It stacks itself now, in frame.css. */
header,section,footer{position:relative;z-index:1}
/* the page ground still paints under the canvas while WebGL boots */
body{background:var(--page)}