/* 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. */

.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); }

/* ----------------------------------------------------------------- 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
   One colour, four weights. The chance level is carried by a tick that gets
   shorter as the chance drops, and by how bright the species line is — not by
   four competing accent colours on a navy ground. The legend teaches the tick
   once, then the table stays quiet. */

.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); }

.odds-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 2.2rem;
  margin: 0 0 2.2rem;
  padding: 0 0 .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  list-style: none;
}

.odds-legend li {
  display: flex;
  gap: .6rem;
  align-items: center;
  color: rgba(255, 255, 255, .56);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.odds-legend li:before {
  content: "";
  height: 2px;
  background: rgba(255, 255, 255, .72);
}

.odds-legend li.is-high:before { width: 15px; }
.odds-legend li.is-medium:before { width: 11px; }
.odds-legend li.is-low:before { width: 7px; }
.odds-legend li.is-rare:before { width: 4px; }

.odds-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.8rem);
  align-items: stretch;
}

.odds-card {
  display: flex;
  flex-direction: column;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.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 0 1.5rem;
  color: rgba(255, 255, 255, .52);
  font-size: .78rem;
  line-height: 1.4;
  letter-spacing: .01em;
}

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

.odds-row {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 1rem;
  padding: .68rem 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.odds-row:first-child { border-top: 0; padding-top: .2rem; }

.odds-row dt {
  display: flex;
  gap: .5rem;
  align-items: center;
  color: rgba(255, 255, 255, .46);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.odds-row dt:before {
  content: "";
  flex: 0 0 auto;
  height: 2px;
  background: currentColor;
}

.odds-row.is-high dt:before { width: 15px; }
.odds-row.is-medium dt:before { width: 11px; }
.odds-row.is-low dt:before { width: 7px; }
.odds-row.is-rare dt:before { width: 4px; }

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

/* Brightness, not hue, ranks the four bands. */
.odds-row.is-high dd { color: rgba(255, 255, 255, .95); }
.odds-row.is-medium dd { color: rgba(255, 255, 255, .8); }
.odds-row.is-low dd { color: rgba(255, 255, 255, .64); }
.odds-row.is-rare dd { color: rgba(255, 255, 255, .5); }

.odds-row.is-rare dt { color: rgba(255, 255, 255, .34); }

.odds-foot {
  margin: 1.3rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .5);
  font-size: .76rem;
  line-height: 1.5;
}

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

.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;
}

/* ----------------------------------------------------------------- notes
   One rule per row down the centre line, so the section sits on the same axis
   as its heading instead of fanning out into three columns. The first line is
   always open; the other four open on demand, which keeps five paragraphs of
   conditions from arriving as a wall before anyone has decided to read them. */

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

.notes-list {
  display: grid;
  max-width: 54rem;
  margin: 0 auto;
}

.note { border-top: 1px solid rgba(11, 31, 58, .3); }
.note:last-child { border-bottom: 1px solid rgba(11, 31, 58, .3); }

/* <summary> carries a single heading, so the row stays a real heading for a
   screen reader while the marker stays decoration. */
.note summary,
.note > h3 {
  position: relative;
  display: block;
  padding: 1.05rem 2.4rem .85rem 0;
}

/* Open, the title sits closer to its own paragraph than to the rule above it,
   so the body reads as the continuation of the row rather than a new one. */
.note[open] summary { padding-bottom: .35rem; }

.note summary { cursor: pointer; list-style: none; }
.note summary::-webkit-details-marker { display: none; }

.note summary::after {
  content: "+";
  position: absolute;
  top: .95rem;
  right: .15rem;
  color: #2f5580;
  font: 400 1.3rem/1 var(--serif);
}

.note[open] summary::after { content: "\2212"; }

.note summary:focus-visible {
  outline: 2px solid #2f5580;
  outline-offset: 3px;
}

.note h3 {
  display: flex;
  gap: .9rem;
  align-items: baseline;
  margin: 0;
  font-size: clamp(1.14rem, 1.55vw, 1.34rem);
  line-height: 1.24;
}

.notes-num {
  flex: 0 0 2.1rem;
  color: #2f5580;
  font: 500 .92rem/1 var(--serif);
  letter-spacing: .02em;
}

.note-body { padding: 0 2.4rem 1.35rem 3rem; }

.note-body p {
  max-width: 62ch;
  margin: 0;
  color: #243b55;
  font-size: .98rem;
  line-height: 1.55;
}

/* A hair of motion so an opened row reads as unfolding rather than appearing.
   Two lines of CSS, no script. */
.note[open] > .note-body { animation: note-open .22s ease both; }

@keyframes note-open {
  from { opacity: 0; transform: translateY(-.3rem); }
}

/* --------------------------------------------------------------- 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) {
  /* Three reserve cards never divide into two columns without leaving one of
     them stranded, so the odds drop straight to a single column here. */
  .odds-grid { grid-template-columns: minmax(0, 1fr); }
  /* 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; }
  /* The stage line stays horizontal for as long as five columns fit. A stage
     timeline that wraps onto a second row leaves a rule hanging in mid-air,
     which reads as a mistake rather than a route. */
}

@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); }
  .enquiry-aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts > div + div:before { display: none; }
}

@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%);
  }
  .notes-list { max-width: none; }
}

@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; }
  .odds-grid { grid-template-columns: minmax(0, 1fr); }
  /* On a phone the number column would eat a fifth of the measure; the body
     tucks in behind the title instead. */
  .note-body { padding: 0 .6rem 1.2rem 2.2rem; }
  .notes-num { flex-basis: 1.8rem; }
  .odds-row { grid-template-columns: 4.6rem minmax(0, 1fr); gap: .7rem; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .enquiry-aside { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* ---------------------------------------------------------------- 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-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,
  .note h3 { color: #000 !important; }

  .line-stages span,
  .odds-row dt,
  .notes-num { color: #000 !important; }
  .line-stages em,
  .odds-row dd,
  .odds-card header p,
  .odds-foot,
  .odds-note,
  .note-body p,
  .day-figure figcaption { color: #333 !important; }
  /* Paper has no state: every row is open (js/itinerary.js opens them before
     printing) and a "+/−" on a printed page points at nothing. */
  .note summary::after { display: none !important; }
  .line-stages li { border-top-color: #999 !important; }
  .line-stages li:before { background: #000 !important; }
  .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; }
}