/* ==========================================================================
   Page composition
   ========================================================================== */

/* ---- Proof band --------------------------------------------------------- */
.proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  border-top: var(--rule-thick) solid var(--green-display);
  border-bottom: var(--rule-hair) solid var(--paper-edge);
  padding-block: var(--space-12);
}
@media (max-width: 52em) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.proof__figure {
  font-family: var(--l99-font-signage);
  font-size: clamp(2.75rem, 1.5rem + 4.4vw, 4.75rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--green-display);
}
.proof__label {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 22ch;
}

/* One column on a phone, and each stat turns on its side: the numeral sits
   beside its label rather than above it. Two columns here gave each cell 152px,
   which wrapped "Countries, from Peru to Thailand to Croatia" at 22 characters
   a line — well under the readable floor — and stacking alone would have made
   the band four screens tall. */
@media (max-width: 34em) {
  .proof { grid-template-columns: 1fr; gap: var(--space-6); }
  .proof > * {
    display: grid;
    /* Fixed, not auto: each stat is its own grid, so an auto column sized to
       each row's own numeral and "800+" shoved its label 53px right of "18".
       A fixed column gives the four labels one left edge. */
    grid-template-columns: 6rem 1fr;
    align-items: baseline;
    gap: var(--space-4);
  }
  .proof__label { margin-top: 0; font-size: var(--text-base); max-width: none; }
}

/* ---- Featured trip ------------------------------------------------------ */
.featured {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 60em) { .featured { grid-template-columns: 1fr; } }

/* Radius and stock come from .polaroid now. */
.featured__media.polaroid img { aspect-ratio: 4 / 3; object-fit: cover; }
.featured h2 { margin-block: var(--space-3) var(--space-4); }
.featured__dates {
  /* Was --text-sm. This is the departure window and the trip length on a
     $4,000+ product, read by an audience that skews 60+ -- it belongs with the
     money copy Phase 1 lifted off 14px, and was missed. */
  font-size: var(--text-base);
  color: var(--cream);
  margin-bottom: var(--space-6);
}

.countdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-block: var(--space-8);
}
.countdown__cell { text-align: left; }
.section--brand .countdown__value {
  display: block;
  font-family: var(--l99-font-signage);
  font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.25rem);
  font-weight: 400;
  line-height: 1;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--l99-font-signage);
  font-size: var(--text-sm);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cream);
}
.section--brand .btn--primary { background: var(--mint); color: var(--forest); }
.section--brand .btn--primary:hover { background: var(--white); color: var(--forest); }

/* ---- The film ----------------------------------------------------------- */
.film { display: grid; gap: var(--space-8); justify-items: start; }
.film__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--l99-radius-md);
  overflow: hidden;
  background: var(--green-deep);
}
.film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Gallery ------------------------------------------------------------ */
.gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-6);
}
.gallery figure { margin: 0; grid-column: span 2; }
/* An editorial grid, not a contact sheet: the first and last run wide. */
.gallery figure:nth-child(1) { grid-column: span 4; }
.gallery figure:nth-child(6) { grid-column: span 4; }
@media (max-width: 52em) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery figure,
  .gallery figure:nth-child(1),
  .gallery figure:nth-child(6) { grid-column: span 1; }
}
/* Two columns are right on a phone, but not at the desktop gap and aspect:
   24px of gutter and a 3:2 crop rendered every photograph at 156x104, which
   reads as an icon. A tighter gutter and a squarer crop buy back real size —
   about 191px at 440 — without turning six photographs into two full screens
   of scrolling, which is what one column costs. */
@media (max-width: 34em) {
  .gallery { gap: var(--space-4) var(--space-4); }
  .gallery img { aspect-ratio: 4 / 3; }
}
.gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--l99-radius-md);
}
/* ---- Marginalia ---------------------------------------------------------
   One treatment for every handwritten caption on the site. There used to be
   four, at four sizes, with the rotation applied at two angles and omitted
   twice.

   Sizes come from --text-hand-*, solved against the hand's measured x-height
   rather than set by eye. No weight is declared: Architects Daughter ships one,
   and its natural stroke already survives sitting on a photograph -- which is
   what the old `font-weight: 700` was compensating for in Caveat. */
.gallery figcaption,
.trip-figure figcaption,
.portrait figcaption,
.marginalia {
  font-family: var(--l99-font-hand);
  line-height: 1.24;
  letter-spacing: 0.005em;
  color: var(--ink-pen);
}

.gallery figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-hand);
  transform: rotate(-0.8deg);
  transform-origin: left center;
}

/* ---- Quotes ------------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-12); }
/* ONE testimonial component. There were two -- .quote here and .story further
   down -- built for the same object on different pages and already drifted:
   24px body type with a 14px attribution against 18px body type with a signage
   caps attribution. Neither was ever used; both slots ship .placeholder. That
   is exactly the state in which a duplicate is cheapest to remove, and the most
   dangerous to leave: when Steve's quotes land, whoever marks them up picks one
   of the two at random and the site gets both treatments.

   Merged deliberately rather than by picking a winner. The blockquote is fluid
   between the two old sizes, so it carries on the homepage without shouting
   inside the Our Story prose column. The attribution keeps .story's signage
   caps: an attribution is a label, and labels are the signage layer everywhere
   else on this site. */
.quote blockquote {
  margin: 0;
  font-family: var(--l99-font-body);
  font-size: clamp(1.25rem, 1.06rem + 0.8vw, 1.5rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.012em;
  border-left: var(--rule-thick) solid var(--ochre);
  padding-left: var(--space-6);
}
.quote figcaption {
  margin-top: var(--space-4);
  padding-left: var(--space-6);
  font-family: var(--l99-font-signage);
  font-size: var(--text-base);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* A placeholder that is honest about being one, rather than inventing praise. */
.placeholder {
  border-left: var(--rule-thick) solid var(--ochre);
  border-radius: var(--radius-block);
  padding: var(--space-12);
  text-align: center;
  color: var(--ink-soft);
}
.placeholder p { margin-inline: auto; }

/* ---- Destination list --------------------------------------------------- */
.places ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0;
}
/* :where() is load-bearing, for the THIRD time in this codebase. As `.places li`
   this rule scored (0,1,1) and beat .places__off at (0,1,0), so cancelled years
   rendered in full forest and looked exactly like tours that ran. Same trap as
   `.prose p` vs .pullquote. If a rule styles a bare element inside a component
   AND a modifier class needs to override it, the component half belongs in
   :where(). */
:where(.places) li {
  padding-block: var(--space-4);
  border-bottom: var(--rule-hair) solid var(--paper-edge);
  font-family: var(--l99-font-signage);
  font-size: var(--text-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-deep);
}

/* The year is the point of this list, so it leads rather than trails. Fixed
   width keeps the destinations aligned down the column; without it the ragged
   left edge makes an 18-year run look like an unsorted pile. */
.places__year {
  display: inline-block;
  width: 3.6em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
/* Cancelled years stay in the list -- a gap at 2020-21 would read as two years
   of nothing rather than two years of a pandemic -- but must not look like
   tours that ran. */
.places__off { color: var(--ink-faint); }
.places__note {
  display: block;
  margin-left: 3.6em;
  font-family: var(--l99-font-body);
  /* --text-base, not --text-sm. This is a short annotation rather than running
     prose, which is the usual excuse for 14px -- but the audience skews 60+ and
     this site already bumped form labels off 14px for that reason. Being
     consistent costs nothing here. */
  font-size: var(--text-base);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
}

/* ---- Long-form prose --------------------------------------------------- */
.prose > * + * { margin-top: var(--space-6); }
:where(.prose) p { font-size: var(--text-md); }
/* :where() above is load-bearing. As `.prose p` this rule scored (0,1,1)
   and silently beat every single-class modifier inside prose -- which is
   why .pullquote rendered at 18px instead of its own clamp for a week
   after Steve reported it as hard to read. :where() zeroes the wrapper's
   contribution so modifiers win by default. */

/* An opening drop cap. Norwester has no lowercase, so this is the body face
   scaled up — a condensed cap here would fight the paragraph it sits in. */
.prose--lead > p:first-of-type::first-letter {
  float: left;
  font-family: var(--l99-font-signage);
  font-size: 3.6em;
  line-height: 0.78;
  padding-right: 0.08em;
  color: var(--green-deep);
}

/* Steve reported this was hard to read (2026-08-24), and the audience is
   largely 60+. Two things were working against it. The rule below scored
   (0,1,0) while `.prose p` scored (0,1,1), so the quote silently rendered at
   18px no matter what was set here -- that is fixed by the :where() at the top
   of this file. And a hand reads smaller than its nominal size, so the number
   had to go up roughly 40% with the line-height opened to match.

   Then it went too far the other way. Held at Caveat's optical size through
   the face change, the quote was breaking at TWENTY-ONE characters a line over
   four lines -- the same failure Phase 1 fixed in the paragraph below it, where
   a floated portrait had squeezed the measure to thirty. A pull quote chopped
   that short reads worse than a small one, whatever its size.

   Re-solved 2026-08-24 against characters per line rather than against the old
   face: 34px at 1400 gives ~32 characters, and 24px at 375. Steve's fix is not
   undone by this. The defect he hit was the quote rendering at 18px -- IDENTICAL
   to the body text around it, because `.prose p` at (0,1,1) beat this rule.
   At 34px it is still 1.5x the body's optical size and unmistakably a quote.
   If it is ever reduced again, that 18px is the floor to stay clear of, and the
   :where() above is what keeps this rule winning at all.

   If it is still hard for him, the honest fix is dropping the hand for this
   one element -- swap --l99-font-hand for --l99-font-ui and it becomes a plain
   italic pull quote. */
.pullquote {
  margin-block: var(--space-12);
  padding-left: var(--space-8);
  border-left: var(--rule-thick) solid var(--ochre);
  font-family: var(--l99-font-hand);
  font-size: clamp(1.5rem, 1.27rem + 0.98vw, 2.2rem);
  line-height: 1.32;
  color: var(--green-deep);
}

/* On a phone the quote has 299px of measure inside a 335px column, so the 36px
   spent on the rule and its inset is 11% of the line. Halving the inset buys
   the measure back; there is nowhere else to get it.

   The size deliberately does NOT rise to compensate. At 24px it is only ~1.1x
   the body's optical size, which would be too close if size were the only thing
   separating them -- but this is a handwriting face against Instrument Sans,
   with an ochre rule down its left edge. The face does the work, and spending
   the difference on line length is the better trade at this width. */
@media (max-width: 40em) {
  .pullquote { padding-left: var(--space-4); }
}

/* ---- Value-add list ---------------------------------------------------- */
.adds { display: grid; gap: var(--space-12); counter-reset: add; }
.adds > li { list-style: none; counter-increment: add; }
.adds h3 { display: flex; align-items: baseline; gap: var(--space-4); }
.adds h3::before {
  content: counter(add, decimal-leading-zero);
  font-family: var(--l99-font-signage);
  font-size: 0.7em;
  color: var(--green-display);
}
.adds p { margin-top: var(--space-3); }
.adds ol, .adds ul { margin: 0; padding: 0; }

/* An aside pulled out of the flow — the Thailand story. */
.anecdote {
  margin-top: var(--space-16);
  padding: var(--space-8);
  background: var(--paper-deep);
  border-left: var(--rule-thick) solid var(--green-display);
  border-radius: var(--radius-block);
}
.anecdote h3 { margin-bottom: var(--space-4); }
.section--tint .anecdote { background: var(--paper); }

/* ---- FAQ --------------------------------------------------------------- */
.faq { display: grid; gap: 0; }
.faq details {
  border-bottom: var(--rule-hair) solid var(--paper-edge);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6);
  cursor: pointer;
  font-family: var(--l99-font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
/* The only clickable thing on the site with no hover state. It has
   cursor: pointer and a 48px row, so it reads as a control until you point at
   it and nothing happens. */
.faq summary {
  transition: color var(--l99-dur-micro) var(--l99-ease-standard);
}
.faq summary:hover { color: var(--green-deep); }
.faq summary:hover::after { border-color: var(--trail); }
.faq summary:active { opacity: 0.75; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 0.85em;
  height: 0.85em;
  margin-top: 0.3em;
  border-right: 2px solid var(--green-deep);
  border-bottom: 2px solid var(--green-deep);
  transform: rotate(45deg);
  transition: transform var(--l99-dur-transition) var(--l99-ease-standard);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > *:not(summary) { padding-bottom: var(--space-6); }

/* ---- Testimonial grid -------------------------------------------------- */
.stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-12); }
/* .story lived here. Merged into .quote above. */

/* ---- Portrait -----------------------------------------------------------
   Sits inside the narrow prose column and breaks out of it on wide screens,
   so the story keeps its measure while the photograph gets room. The caption
   is real text in Caveat rather than the version burned into the source
   image, which means it stays selectable, translatable and legible to a
   screen reader. */
.portrait {
  margin: var(--space-12) 0;
  max-width: 26rem;
}
.portrait img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: var(--shadow-print);
}
.portrait figcaption {
  margin-top: var(--space-4);
  font-size: var(--text-hand-lg);
  transform: rotate(-0.8deg);
  transform-origin: left center;
}
/* Deliberately NOT floated. .wrap--narrow is a 736px reading column; taking a
   320px portrait out of it left the closing paragraph -- the payoff of the
   origin story -- at 30 characters a line against 50-76 for every other
   paragraph. Widening the breakout only got it to 39. A column this narrow
   cannot host a float, so the picture sits in the flow and keeps its own width,
   and the prose keeps its measure. */
@media (min-width: 52em) {
  .portrait { max-width: 24rem; }
}

/* ---- Section closer ----------------------------------------------------
   The rhetorical line that ends a section. Larger than body, not a heading. */
.closer {
  margin-top: var(--space-12);
  max-width: 44ch;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--ink-soft);
  border-top: var(--rule-thick) solid var(--green-display);
  padding-top: var(--space-6);
}

/* ---- Homepage contact block -------------------------------------------- */
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-10) clamp(2rem, 5vw, 4rem);
  align-items: end;
}
@media (max-width: 52em) { .contact-split { grid-template-columns: 1fr; align-items: start; } }
.contact-split__phone {
  margin-block: var(--space-6) var(--space-2);
  font-family: var(--l99-font-signage);
  font-size: var(--text-2xl);
  letter-spacing: 0.02em;
}
.contact-split__phone a { color: var(--trail); text-decoration: none; }
.contact-split__phone a:hover { text-decoration: underline; }

/* Once the departure passes, js/countdown.js hides the digits and marks the
   section rather than removing it. The block keeps its place in the page
   rhythm and says something true instead of vanishing. */
[data-departed] .countdown { display: none; }
/* This suffix only exists AFTER the departure date, which is why --ink-soft
   survived here: nobody had seen it. On the forest block it measures 2.08:1.
   Mint is the palette's quiet-on-dark value at 7.34:1. Broken on a timer, like
   the countdown that used to delete this whole section -- both invisible in
   any screenshot taken before 2026-11-28. */
[data-departed] .featured__dates::after {
  content: ' — departed';
  color: var(--mint);
}