/* Itinerary template.
   Builds on css/karakoram.css: the hero, the gold fact strip and the intro are
   the same components the route pages use, so an itinerary does not look like a
   different site. Everything below is the part those pages do not have — the
   photo band, the stage line, the day-by-day spine, the species odds and the
   enquiry form.

   The page is long by nature: eight days of copy, three reserves of species
   lists, five caveats. Photographs are therefore structural rather than
   decorative — one wide band to break the opening text, one picture on the days
   that have a place worth showing, and a page that alternates mass and quiet
   instead of stacking five identical heading-left / paragraph-right blocks.

   Order matters. Base modules first, then the responsive blocks, then the
   narrow-viewport overrides at the very end. */

/* -------------------------------------------------------- section headers
   One eyebrow + heading + standfirst pattern, used by every section so the
   page reads as a sequence rather than five separate designs. */

/* Six "Choose" controls and an empty column heading need words that a sighted
   reader does not want to see twice. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.it-eyebrow {
  display: flex;
  gap: .85rem;
  align-items: center;
  margin: 0 0 1.3rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.it-eyebrow:before {
  content: "";
  width: 2.1rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

/* The heading is centred and the standfirst sits directly under it. A
   heading-left / paragraph-right spread reads as balanced only when the two
   blocks happen to be the same height; with a three-word title beside a
   two-line standfirst it leaves a hole in the middle of the row, so the
   pattern is replaced by a stack that is symmetric at every width. */

.it-head {
  display: grid;
  justify-items: center;
  row-gap: 1.05rem;
  max-width: 54rem;
  margin: 0 auto clamp(2.6rem, 4.6vw, 3.9rem);
  text-align: center;
}

.it-head .it-eyebrow { margin-bottom: 0; }

.it-head h2 {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(2.5rem, 4.1vw, 3.9rem);
  line-height: .96;
}

.it-head > p:not(.it-eyebrow) {
  max-width: 56ch;
  margin: .2rem 0 0;
  font-size: 1.04rem;
  line-height: 1.55;
}

/* ------------------------------------------------------------------ hero */

.itinerary-hero .hero-copy { width: min(54rem, 70vw); }

.itinerary-hero .itinerary-kicker {
  max-width: none;
  margin-bottom: 1.1rem;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.itinerary-hero .hero-copy h1 { max-width: 13ch; }

.itinerary-hero .itinerary-lead {
  max-width: 46ch !important;
  margin-bottom: 1.9rem;
  color: rgba(255, 255, 255, .86) !important;
  font-size: 1.14rem !important;
}

.itinerary-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: start;
  gap: .9rem 2.6rem;
  margin: 0 0 .4rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .24);
  list-style: none;
}

.itinerary-hero-meta li { display: grid; gap: .2rem; }

.itinerary-hero-meta span {
  color: rgba(255, 255, 255, .62);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.itinerary-hero-meta strong {
  font: 500 1.28rem/1 var(--serif);
  letter-spacing: -.02em;
}

/* The caption sits over pale rock on some hero frames; a soft shadow keeps it
   legible without moving it off the photo. */
.itinerary-hero .hero-caption { text-shadow: 0 1px 10px rgba(4, 14, 26, .7); }

/* The shared scrim is a flat run from .96 at the left edge to .18 at the right,
   which suits a landscape hero and buries this one. The photograph is 3:2 in a
   1.8:1 box, so it is width-limited and cannot be reframed: the takin stands
   between a third and a half of the frame, directly behind the copy, and the
   old wash held it at .64–.84 black. The scrim now stays dense across the
   width the words actually occupy and releases quickly past them, so the head
   and back of the animal come back out of the shadow while the headline keeps
   the contrast it had. Two short bands close the top and the bottom, where the
   header and the caption sit on pale water and rock. */

.itinerary-hero:after {
  background:
    linear-gradient(90deg,
      rgba(5, 18, 34, .95) 0%,
      rgba(5, 18, 34, .89) 26%,
      rgba(5, 18, 34, .76) 38%,
      rgba(5, 18, 34, .47) 47%,
      rgba(5, 18, 34, .22) 58%,
      rgba(5, 18, 34, .10) 74%,
      rgba(5, 18, 34, .06) 100%),
    linear-gradient(180deg,
      rgba(5, 18, 34, .58) 0%,
      rgba(5, 18, 34, .20) 9%,
      rgba(5, 18, 34, 0) 22%,
      rgba(5, 18, 34, 0) 72%,
      rgba(5, 18, 34, .44) 88%,
      rgba(5, 18, 34, .72) 100%);
}

/* The words are gold and brown on a dark river. The wordmark reads at about
   2:1, so the logo is lifted and given an edge rather than a plate of its own. */
.itinerary-page .site-header .brand img {
  filter: brightness(1.85) saturate(.62) drop-shadow(0 1px 7px rgba(4, 14, 26, .6));
}

/* White at .78 over pale river rock is barely 1.5:1 whatever the scrim does;
   the caption is set solid and the band under it carries the contrast. */
.itinerary-hero .hero-caption { color: rgba(255, 255, 255, .94); }

/* ----------------------------------------------------------------- facts
   The shared strip is four columns of type on gold. Hairlines between the
   cells turn it from a slogan into a spec sheet, which is what it is. */

.facts { padding: clamp(2rem, 3vw, 2.8rem) 7vw; }

.facts > div { position: relative; }

.facts > div + div:before {
  content: "";
  position: absolute;
  top: .15rem;
  bottom: .15rem;
  left: -1rem;
  width: 1px;
  background: rgba(11, 31, 58, .2);
}

/* ----------------------------------------------------------------- intro
   The opening argument, and the one photograph that carries it. The heading
   is centred like every other section head; the plate and the copy then sit
   side by side, picture on the left, so the two blocks share a top edge and
   the paragraph measure stays readable. No overlay, no scrim, nothing sitting
   on the photograph. */

.itinerary-page .intro {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.2rem, 3.6vw, 3.2rem);
  padding: clamp(4rem, 7.5vw, 6.5rem) 7vw;
}

.itinerary-page .intro .intro-lead {
  display: grid;
  justify-items: center;
  gap: .9rem;
  text-align: center;
}

.itinerary-page .intro .intro-lead h2 {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(2.4rem, 3.8vw, 3.7rem);
  line-height: .96;
}

.itinerary-page .intro .it-eyebrow { margin-bottom: 0; color: #7a5310; }

.itinerary-page .intro .intro-body {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.6vw, 3.6rem);
  align-items: start;
}

.intro-photo { margin: 0; }

.intro-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  filter: saturate(.94) contrast(1.03);
}

.intro-photo figcaption {
  margin-top: .7rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(11, 31, 58, .16);
  color: rgba(11, 31, 58, .55);
  font-size: .76rem;
  letter-spacing: .02em;
}

/* karakoram.css sets `.intro div { align-self: end }` for its own spread; here
   the copy must start at the picture's top edge instead of the baseline. */
.itinerary-page .intro .intro-copy { justify-self: stretch; align-self: start; }

.itinerary-page .intro .intro-copy p {
  max-width: none;
  font-size: 1.06rem;
  line-height: 1.58;
}

.itinerary-page .intro .intro-copy p + p { margin-top: 1.05rem; }

.itinerary-page .intro .intro-copy p.intro-standfirst {
  max-width: none;
  margin-bottom: 1.5rem;
  color: var(--ink);
  font-size: 1.32rem;
  line-height: 1.42;
  letter-spacing: -.01em;
}

/* ------------------------------------------------------------------ line */

.itinerary-line {
  padding: clamp(3.5rem, 6.5vw, 5.5rem) 7vw clamp(3rem, 5vw, 4.5rem);
  background: var(--navy);
  color: #fff;
}

.itinerary-line .it-eyebrow { color: var(--gold); }

.itinerary-line .it-head h2 { max-width: 12ch; }

.itinerary-line .it-head > p:not(.it-eyebrow) { color: rgba(255, 255, 255, .74); }

.line-stages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.line-stages li {
  position: relative;
  display: grid;
  gap: .4rem;
  align-content: start;
  padding: 1.5rem 1.5rem 0 0;
  border-top: 2px solid rgba(255, 255, 255, .26);
}

/* The dot that sits on the stage rule, one per stop. */
.line-stages li:before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}

.line-stages span {
  color: var(--gold);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.line-stages strong {
  font: 500 1.62rem/1.04 var(--serif);
  letter-spacing: -.03em;
}

.line-stages em {
  max-width: 21ch;
  color: rgba(255, 255, 255, .64);
  font-size: .84rem;
  font-style: normal;
  line-height: 1.42;
}

/* ------------------------------------------------------------------ days */

.itinerary-days {
  padding: clamp(4rem, 7.5vw, 6.5rem) 7vw;
  background: var(--mist);
}

/* The schedule is a centred column rather than a full-width row. Running the
   rules to the section edge while the copy stopped at a reading measure left a
   band of empty paper down the right of every day, so the column is now only as
   wide as index + gap + copy and sits on the page's centre line with the
   heading above it. Rules, copy and meta all end on the same right edge. */

.day-list {
  max-width: 63rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.day {
  display: grid;
  grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.4vw, 3rem);
  padding: clamp(1.9rem, 3.2vw, 2.8rem) 0;
  border-top: 1px solid rgba(11, 31, 58, .18);
  scroll-margin-top: 2rem;
}

.day:first-child { border-top: 2px solid var(--ink); }

.day-head { display: grid; gap: .35rem; align-content: start; }

/* A ghost numeral, large and pale, so a day reads as a chapter opening rather
   than a table row. */
.day-num {
  display: block;
  margin-bottom: .1rem;
  color: rgba(11, 31, 58, .16);
  font: 500 3.1rem/.78 var(--serif);
  letter-spacing: -.04em;
}

.day-label {
  color: #7a5310;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.day-head h3 {
  margin: 0;
  font-size: clamp(1.5rem, 1.9vw, 1.95rem);
  line-height: 1.03;
}

.day-place {
  margin: .1rem 0 0;
  color: rgba(11, 31, 58, .58);
  font-size: .82rem;
  letter-spacing: .01em;
}

/* One measure for everything in a day card — copy, photograph, meta line and
   the fold-out note — so the right-hand edge of the column stays true instead
   of stepping in and out. */
/* The column is 63rem wide, so the copy already lands near 64 characters; a
   second cap here would only reopen the gap the list width just closed. */
.day-body { max-width: none; }

.day-body p { margin-bottom: .95rem; line-height: 1.58; }
.day-body p:last-of-type { margin-bottom: 1.3rem; }

/* Photographs sit at the head of the day they belong to, at the picture's own
   3:2 rather than in a letterbox, and capped near the measure of the copy
   below so the frame and the paragraph share a width. */
.day-figure { margin: 0 0 1.6rem; }

.day-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  filter: saturate(.94) contrast(1.03);
}

.day-figure figcaption {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  margin-top: .6rem;
  padding-top: .45rem;
  border-top: 1px solid rgba(11, 31, 58, .16);
  color: rgba(11, 31, 58, .58);
  font-size: .76rem;
  line-height: 1.4;
}

.day-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1.9rem;
  margin: 0 0 .2rem;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(11, 31, 58, .14);
  list-style: none;
}

.day-meta li {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  font-size: .82rem;
}

.day-meta span {
  color: rgba(11, 31, 58, .5);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.day-note {
  margin-top: 1.1rem;
  border-left: 3px solid var(--gold);
  background: rgba(255, 255, 255, .62);
  padding: .85rem 1rem;
}

.day-note summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.day-note summary::marker { color: var(--gold); }

.day-note p {
  max-width: 58ch;
  margin: .7rem 0 0;
  color: var(--ink-soft, #28415d);
  font-size: .92rem;
}

/* One typographic pause in the middle of eight day cards, at the point where
   the route leaves the Minshan range for the Qionglai. Without it the day list
   is a single pale wall from the stage line down to the odds. */

.day-break {
  padding: clamp(2.4rem, 3.6vw, 3.2rem) 0 clamp(2.6rem, 3.8vw, 3.4rem);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid rgba(11, 31, 58, .18);
}

.day-break .it-eyebrow { margin-bottom: 1rem; color: #7a5310; }

.day-break blockquote {
  max-width: 26ch;
  margin: 0;
  font: 500 clamp(1.75rem, 2.7vw, 2.5rem)/1.06 var(--serif);
  letter-spacing: -.035em;
}

.day-break-source {
  margin: 1rem 0 0;
  color: rgba(11, 31, 58, .55);
  font-size: .78rem;
  letter-spacing: .01em;
}

/* ------------------------------------------------------------------ odds
   Three reserves, two shapes: two lists of bands side by side, and the
   single-species day running underneath at full width.

   The chance is carried by two things only — the band name in small caps down
   the left, and how bright the species line is. No tick, no rule between rows.
   Four bands of a list are not four measured values; ruling every row twice on
   a navy ground made a quiet table look like a spreadsheet. */

.odds {
  padding: clamp(4rem, 7.5vw, 6.5rem) 7vw;
  background: var(--navy);
  color: #fff;
}

.odds .it-eyebrow { color: var(--gold); }

.odds .it-head > p:not(.it-eyebrow) { color: rgba(255, 255, 255, .74); text-wrap: pretty; }

.odds-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.4rem, 4.5vw, 4.6rem);
  align-items: stretch;
  margin-top: clamp(1.9rem, 3vw, 2.8rem);
}

.odds-card {
  display: flex;
  flex-direction: column;
}

/* One rule, under the reserve name, holds the head apart from the list.
   Nothing else in the card is ruled. */
.odds-card header {
  padding-bottom: .95rem;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.odds-card h3 {
  margin: 0 0 .35rem;
  font-size: clamp(1.55rem, 2vw, 1.9rem);
  line-height: 1.04;
  letter-spacing: -.02em;
}

.odds-card header p {
  margin: 0;
  color: rgba(255, 255, 255, .52);
  font-size: .78rem;
  line-height: 1.4;
  letter-spacing: .01em;
}

.odds-rows { margin: 0; padding: 1.1rem 0 0; }

.odds-row {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 1.4rem;
  padding: .66rem 0;
}

.odds-row:first-child { padding-top: .1rem; }

.odds-row dt {
  color: rgba(255, 255, 255, .48);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.odds-row dd {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
}

/* Two brightness levels, not four: the words already say High, Medium, Low,
   Rare, and four steps of white on navy is a code nobody asked to learn. */
.odds-row.is-high dd,
.odds-row.is-medium dd { color: rgba(255, 255, 255, .93); }

.odds-row.is-low dd,
.odds-row.is-rare dd { color: rgba(255, 255, 255, .68); }

.odds-foot {
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, .5);
  font-size: .76rem;
  line-height: 1.5;
}

/* Footnotes sit on the same baseline across the two cards, however long the
   species lists above them run. */
.odds-card .odds-foot { margin-top: auto; padding-top: 1.5rem; }

/* The single-species day: name, the one row and the reason it is only one row
   read across rather than down an empty column. */
.odds-band {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: start;
  margin-top: clamp(1.8rem, 3vw, 2.8rem);
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.odds-band h3 {
  margin: 0 0 .35rem;
  font-size: clamp(1.4rem, 1.8vw, 1.68rem);
  line-height: 1.04;
  letter-spacing: -.02em;
}

.odds-band header p {
  margin: 0;
  color: rgba(255, 255, 255, .6);
  font-size: .78rem;
  line-height: 1.4;
  letter-spacing: .01em;
}

/* One row, so the band's list needs no head padding and its label column can
   be narrower than a card's. */
.odds-band .odds-rows { padding: 0; }
.odds-band .odds-row { grid-template-columns: 4.6rem minmax(0, 1fr); gap: .8rem; padding: 0; }
.odds-band .odds-foot { margin: 0; padding-top: 0; }

.odds-note {
  max-width: 62ch;
  margin: clamp(2rem, 3.5vw, 3rem) 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .7);
  font-size: .92rem;
}

/* ------------------------------------------------------------- departures
   Six dates and one price. A price table on a premium page is a trap: line the
   numbers up in a grid and it starts to look like a booking engine. So the
   table carries three things only — when, how much, and a way to take it — with
   no rules between columns, one heavy rule under the headings, and the numbers
   set in the serif so they read as copy rather than as a form. Everything else
   a buyer needs (early booking, the closing date, the deposit, group size, the
   single room) sits underneath as four short columns of prose, because those
   are conditions, not data. */

.itinerary-departures {
  padding: clamp(4rem, 7.5vw, 6.5rem) 7vw;
  background: var(--mist);
}

/* The heading above is centred on a 54rem measure; the table follows it. */
.dep-body {
  max-width: 54rem;
  margin: 0 auto;
}

.dep-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.dep-caption {
  caption-side: top;
  margin-bottom: 1.5rem;
  color: #2f4a66;
  font-size: .84rem;
  line-height: 1.45;
  text-align: left;
}

.dep-table thead th {
  padding: 0 0 .8rem;
  border-bottom: 2px solid #1b334a;
  color: #2f4a66;
  font: 700 .66rem/1 var(--sans);
  letter-spacing: .16em;
  text-align: left;
  text-transform: uppercase;
}

.dep-table thead th:nth-child(2),
.dep-table thead th:nth-child(3) { text-align: right; }

.dep-table tbody th,
.dep-table tbody td {
  padding: .95rem 0;
  border-top: 1px solid rgba(11, 31, 58, .16);
  vertical-align: baseline;
}

/* A row heading is a cell, and cells default to centred text; the date has to
   share an axis with the column heading above it. */
.dep-table tbody th { text-align: left; }

.dep-table tbody tr:first-child th,
.dep-table tbody tr:first-child td { border-top: 0; }

.dep-dates {
  color: #10263c;
  font: 500 clamp(1.15rem, 1.55vw, 1.34rem)/1.1 var(--serif);
  letter-spacing: -.02em;
}

.dep-price {
  text-align: right;
  white-space: nowrap;
}

.dep-main {
  display: block;
  color: #10263c;
  font: 500 1.02rem/1.15 var(--serif);
}

/* The early-booking figure is a second thought, not a second price. */
.dep-early {
  display: block;
  margin-top: .18rem;
  color: #4a637d;
  font-size: .72rem;
  letter-spacing: .01em;
}

.dep-act {
  padding-left: 1.6rem;
  text-align: right;
}

/* A text control, not a button: the page already has one loud call to action
   (the enquiry form) and a column of six of them would outshout it. */
.dep-pick {
  padding: 0;
  border: 0;
  background: none;
  color: #7a5310;
  font: 700 .68rem/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .34em;
  cursor: pointer;
}

.dep-pick:hover { color: #10263c; }

.dep-terms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem 2rem;
  margin: clamp(1.9rem, 3vw, 2.6rem) 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(11, 31, 58, .25);
}

.dep-terms dt {
  margin-bottom: .38rem;
  color: #2f4a66;
  font: 700 .64rem/1 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.dep-terms dd {
  margin: 0;
  color: #243b55;
  font-size: .84rem;
  line-height: 1.45;
}

.dep-note {
  max-width: 60ch;
  margin: 1.4rem 0 0;
  color: #26405c;
  font-size: .86rem;
  line-height: 1.5;
}

.dep-note a { text-underline-offset: .28em; }

/* ------------------------------------------------------- included/excluded
   What the price covers, and what it does not. Two columns, one list each, and
   nothing folded away: a five-line list that hides four of its lines is a list
   nobody reads before they ask the question it answers.

   This replaced a section headed "Before you commit", whose five rows restated
   the facts strip, the road day and the odds — the same information in a third
   shape, one screen above the enquiry form. */

.itinerary-notes {
  padding: clamp(3.5rem, 6.5vw, 5.5rem) 7vw;
  background: #bdd4e2;
}

/* The heading is a sentence, not a label, and at tablet width the last word
   was landing alone on its own line. */
.included .it-head h2 { max-width: 30ch; text-wrap: balance; }

.included .it-head > p { text-wrap: pretty; }

.inc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.2rem, 5vw, 4.6rem);
  max-width: 54rem;
  margin: 0 auto;
}

/* The column head is the one heavy rule on this ground: everything under it is
   a line of the same list, and only the hairline between items separates one
   from the next. */
.inc-head {
  margin: 0;
  padding-bottom: .7rem;
  border-bottom: 2px solid #1b334a;
  color: #10263c;
  font: 700 .68rem/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.inc-intro {
  margin: .85rem 0 0;
  color: #2f4a66;
  font-size: .84rem;
  line-height: 1.45;
}

.inc-list {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.inc-item {
  padding: .95rem 0;
  border-top: 1px solid rgba(11, 31, 58, .22);
}

.inc-item:first-child { border-top: 0; padding-top: .1rem; }

.inc-title {
  margin: 0 0 .25rem;
  color: #10263c;
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.inc-body {
  max-width: 38ch;
  margin: 0;
  color: #243b55;
  font-size: .88rem;
  line-height: 1.5;
}

/* The right-hand column steps back a shade: a list of what is absent should
   not read as loudly as what is promised. */
.inc-col.is-out .inc-head {
  border-bottom-color: rgba(27, 51, 74, .45);
  color: #2f4a66;
}

.inc-col.is-out .inc-item { border-top-color: rgba(11, 31, 58, .14); }
.inc-col.is-out .inc-title { color: #26405c; }
.inc-col.is-out .inc-body { color: #3b5673; }

.inc-note {
  max-width: 54rem;
  margin: clamp(1.8rem, 3vw, 2.4rem) auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(11, 31, 58, .25);
  color: #26405c;
  font-size: .86rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------- enquiry */

.itinerary-enquiry {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding: clamp(4rem, 7.5vw, 6.5rem) 7vw;
  background: var(--mist);
  align-items: start;
}

.itinerary-enquiry .it-eyebrow { color: #7a5310; }

.enquiry-copy h2 {
  max-width: 9ch;
  margin: 0 0 1.4rem;
  font-size: clamp(2.6rem, 4.2vw, 4rem);
  line-height: .94;
}

.enquiry-copy > p {
  max-width: 40ch;
  font-size: 1.04rem;
  line-height: 1.56;
}

.enquiry-aside {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 2.2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(11, 31, 58, .18);
}

.enquiry-aside dt {
  margin-bottom: .3rem;
  color: rgba(11, 31, 58, .52);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.enquiry-aside dd { margin: 0; font-size: .9rem; line-height: 1.35; }

.enquiry-seealso {
  max-width: 40ch;
  margin: 2rem 0 0;
  font-size: .86rem;
  color: var(--ink-soft, #28415d);
}

.enquiry-seealso a { text-underline-offset: .25em; }

.enquiry-card {
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  background: #fbf9f4;
  border: 1px solid rgba(11, 31, 58, .12);
  border-top: 3px solid var(--gold);
  box-shadow: 0 28px 60px -34px rgba(7, 23, 44, .5);
}

.itinerary-form { display: grid; gap: 1.1rem; }

.form-kicker {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.form-note {
  margin: -.5rem 0 0;
  color: var(--ink-soft, #28415d);
  font-size: .84rem;
  line-height: 1.45;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem 1.1rem;
}

.itinerary-form label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.itinerary-form label > input,
.itinerary-form label > select,
.itinerary-form label > textarea { margin-top: .35rem; }

.itinerary-form input,
.itinerary-form select,
.itinerary-form textarea {
  width: 100%;
  padding: .78rem .85rem;
  border: 1px solid rgba(11, 31, 58, .26);
  background: #fff;
  color: var(--ink);
  font: 400 .95rem/1.35 var(--sans);
  letter-spacing: 0;
}

.itinerary-form textarea { resize: vertical; min-height: 7.5rem; }

.itinerary-form input:focus,
.itinerary-form select:focus,
.itinerary-form textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.itinerary-form input[aria-invalid="true"],
.itinerary-form select[aria-invalid="true"],
.itinerary-form textarea[aria-invalid="true"] { border-color: #a8321c; }

.field-error {
  display: block;
  margin-top: .25rem;
  color: #8f2b17;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: 0;
}

.field-error:empty { display: none; }

.itinerary-form .consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

.itinerary-form .consent input { width: 1.05rem; height: 1.05rem; margin-top: .1rem; }

.itinerary-form .submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.15rem;
  border: 0;
  background: var(--ink);
  color: #fff;
  font: 700 .92rem var(--sans);
  cursor: pointer;
  transition: background .18s ease;
}

.itinerary-form .submit-button:hover { background: #143154; }

.itinerary-form .submit-button[disabled] { opacity: .6; cursor: progress; }

.form-message {
  min-height: 1.2rem;
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
}

.form-message.is-error { color: #8f2b17; }

.form-success { display: grid; gap: .9rem; }

.form-success[hidden] { display: none; }

.form-success h3 { margin: 0; font-size: 1.9rem; line-height: 1.05; }

.form-success p { margin: 0; font-size: .94rem; }

.form-success .button { justify-self: start; margin-top: .4rem; }

/* ----------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  /* A 3:2 plate in a 400px column stops well short of the end of the copy, so
     the pair only holds its balance while the picture can grow with the text. */
  .itinerary-page .intro .intro-body { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  /* Two lists still hold side by side at this width; the gutter comes in a
     step so the species lines keep their measure. */
  .odds-grid { gap: clamp(1.8rem, 3.2vw, 2.8rem); }
}

@media (max-width: 860px) {
  /* Two four-band lists side by side stop earning their keep before the
     measure does: each card would hold a species line in about 320px, and the
     long lists start breaking every two words. */
  .odds-grid { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  /* Each column would be about 330px from here down, which sets every item's
     body at two or three short lines with a heading above it. The excluded
     list runs under the included one instead. */
  .inc-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

@media (max-width: 900px) {
  .itinerary-hero .hero-copy { width: 100%; }
  .it-head { max-width: 40rem; }
  .it-head h2 { max-width: 20ch; }
  .itinerary-page .intro .intro-lead h2 { max-width: 20ch; }
  /* Below 900 the five stages stack into a vertical spine: dot on the left,
     rule between the rows. Never a floating half-rule. */
  .line-stages { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .line-stages li { padding: 1.15rem 0 1.15rem 1.4rem; border-top: 1px solid rgba(255, 255, 255, .2); }
  .line-stages li:first-child { border-top: 2px solid rgba(255, 255, 255, .26); }
  .line-stages li:before { top: -5px; left: 0; }
  .day { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .day-num { font-size: 2.4rem; }
  .itinerary-enquiry { grid-template-columns: minmax(0, 1fr); }
  /* Three columns of band stop earning their keep before the two cards do;
     name, line and reason stack in reading order instead. */
  .odds-band { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .enquiry-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts > div + div:before { display: none; }
  /* Four columns of conditions become two, which still reads as a set. */
  .dep-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 2rem; }
}

@media (max-width: 700px) {
  /* The shared gradient runs left to right and leaves the right half of a
     narrow hero light; over pale river rock the lead paragraph loses contrast.
     A vertical wash does the job on one column. */
  .itinerary-hero:after {
    background: linear-gradient(180deg, rgba(5, 18, 34, .9) 0%, rgba(5, 18, 34, .74) 52%, rgba(5, 18, 34, .92) 100%);
  }
}

@media (max-width: 600px) {
  .itinerary-hero-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; }
  .itinerary-hero-meta strong { font-size: 1.1rem; }
  /* The label column is sized by "MEDIUM"; on a phone it took a third of the
     measure and pushed every species line into an extra row. */
  .odds-row { grid-template-columns: 4.6rem minmax(0, 1fr); gap: .9rem; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .enquiry-aside { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  /* Three columns do not survive a phone: the date breaks a line and the
     control lands on top of the price. The row becomes two lines — when, then
     what it costs and how to take it. The early-booking figure is dropped
     here because the same number is spelled out in full beneath the table. */
  .dep-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .dep-table,
  .dep-table tbody,
  .dep-table tr,
  .dep-table th,
  .dep-table td { display: block; }
  .dep-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .35rem .8rem;
    padding: .95rem 0;
    border-top: 1px solid rgba(11, 31, 58, .16);
  }
  .dep-table tbody tr:first-child { border-top: 0; padding-top: 0; }
  /* A caption is a table-caption box and collapses to its narrowest word once
     the table becomes a block. */
  .dep-caption { display: block; }
  .dep-table tbody th,
  .dep-table tbody td { padding: 0; border-top: 0; }
  .dep-dates { grid-column: 1 / -1; }
  .dep-price { grid-column: 1; text-align: left; }
  .dep-act { grid-column: 2; padding-left: 0; }
  .dep-early { display: none; }
}

/* ---------------------------------------------------------------- print
   Guests ask for a PDF of the itinerary and print the page to get one. Strip
   the chrome, the jump index, the form and the full-bleed band; keep the days,
   the odds and the day photographs on white. */

@media print {
  .site-header,
  .site-footer,
  .enquiry-card,
  .hero-caption,
  .itinerary-hero-meta,
  .intro-photo,
  .hero-copy .button { display: none !important; }

  body,
  .itinerary-page,
  .expedition-hero,
  .intro,
  .itinerary-line,
  .itinerary-days,
  .odds,
  .itinerary-departures,
  .itinerary-notes,
  .itinerary-enquiry,
  .facts { background: #fff !important; color: #000 !important; }

  .expedition-hero { min-height: 0; display: block; }
  .expedition-hero > img,
  .expedition-hero::after { display: none !important; }
  .hero-copy { width: 100%; padding: 0 7vw 1.5rem; }

  .hero-copy h1,
  .itinerary-hero .itinerary-lead,
  .crumb,
  .crumb a,
  .itinerary-kicker,
  .it-eyebrow,
  .it-head h2,
  .line-stages strong,
  .odds-card h3,
  .odds-band h3,
  .odds-row dt,
  .inc-head,
  .inc-title { color: #000 !important; }

  .line-stages span { color: #000 !important; }
  .line-stages em,
  .odds-card header p,
  .odds-band header p,
  .odds-foot,
  .odds-note,
  .inc-intro,
  .inc-body,
  .inc-note,
  .day-figure figcaption { color: #333 !important; }
  /* The species lines are white on navy and carry their band by brightness;
     on paper they are the body of the section and were printing blank. */
  .odds-row.is-high dd,
  .odds-row.is-medium dd { color: #000 !important; }
  .odds-row.is-low dd,
  .odds-row.is-rare dd { color: #333 !important; }
  /* The route and the odds are navy bands on screen, so their standfirsts are
     white; both bands print as white paper and the paragraphs disappeared. */
  .itinerary-line .it-head > p:not(.it-eyebrow),
  .odds .it-head > p:not(.it-eyebrow) { color: #333 !important; }
  /* The two card rules and the band rule are white on navy; on paper they are
     the only thing separating a reserve from its list. */
  .odds-card header,
  .odds-band,
  .odds-note { border-color: #999 !important; }
  /* A card split across two pages loses its heading on the second one. */
  .odds-card,
  .odds-band,
  .odds-row { break-inside: avoid; }
  /* The column heads carry the only dark rule on this ground; on paper the
     hairlines between items need to survive the print engine too. */
  .inc-head { border-bottom-color: #243b55 !important; }
  .inc-col.is-out .inc-head { border-bottom-color: #66798f !important; }
  .inc-item { border-top-color: #b3bfcb !important; }
  .inc-note { border-top-color: #9099a3 !important; }
  .line-stages li { border-top-color: #999 !important; }
  .line-stages li:before { background: #000 !important; }
  /* The departures table is a table on paper too: a guest printing an outline
     to show someone needs the date and the number, not a button. */
  .dep-dates,
  .dep-main { color: #000 !important; }
  .dep-caption,
  .dep-table thead th,
  .dep-early,
  .dep-terms dt,
  .dep-terms dd,
  .dep-note { color: #333 !important; }
  .dep-table thead th { border-bottom-color: #000 !important; }
  .dep-table tbody th,
  .dep-table tbody td { border-top-color: #bbb !important; }
  .dep-terms { border-top-color: #999 !important; }
  .dep-act { display: none !important; }
  .dep-table tr,
  .dep-terms > div { break-inside: avoid; }
  .facts { border-bottom: 1px solid #000; }
  .day,
  .day-break { break-inside: avoid; }
  /* A printed day card has less room than a screen one; 22rem keeps the 3:2
     frame from pushing the copy onto a second page. */
  .day-figure { max-width: 22rem; }
  .day-figure img { height: auto; }
  a { color: #000; text-decoration: none; }
}