/* ==========================================================================
   Deep Waters — components.css
   Buttons, cards, the canyon profile, forms, tables, accordion, gallery.
   Logical properties throughout: one stylesheet serves LTR and RTL.
   ========================================================================== */

/* ==========================================================================
   Buttons
   Squared, uppercase, tracked and heavy — an outfitter's stamp rather than a
   web control. --ember-500 is reserved for the booking action; if two ember
   buttons are visible at once, one of them is wrong.
   ========================================================================== */

.btn {
  --btn-lift: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-block-size: 3.375rem;
  padding: var(--sp-4) var(--sp-7);
  border: var(--border) solid transparent;
  border-radius: var(--radius-btn);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1;
  /* Two-word labels were breaking onto two lines inside the hero's narrow
     column, which made the primary action look like a paragraph. */
  white-space: nowrap;
  transform: translate3d(0, var(--btn-lift), 0);
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease-out);
}

.btn svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: 0 0 auto;
}

/* --- Primary: the booking action ---------------------------------------- */

.btn--cta,
.btn--cta:hover {
  color: var(--cta-text);
}

.btn--cta {
  background-color: var(--ember-500);
  /* A 1px inner highlight along the top edge reads as a lit surface. Cheaper
     and less dated than a gradient. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 28%),
    0 2px 10px var(--ember-glow);
}

.btn--cta:hover {
  background-color: var(--ember-400);
  --btn-lift: -2px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 34%),
    0 10px 28px var(--ember-glow);
}

/* A real press: it goes down and dims, so the click has a physical answer */
.btn--cta:active {
  background-color: var(--ember-600);
  --btn-lift: 0;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 28%);
}

/* Compact version for the header bar */
.btn--sm {
  min-block-size: 2.75rem;
  padding: var(--sp-3) var(--sp-5);
}

/* --- Ghost: everything else -------------------------------------------- */

.btn--ghost {
  background-color: rgb(255 255 255 / 4%);
  border-color: var(--hairline-firm);
  color: #fff;
}

.btn--ghost:hover {
  border-color: var(--river-300);
  color: var(--river-200);
  background-color: rgb(111 201 194 / 12%);
  --btn-lift: -2px;
}

.btn--ghost:active {
  --btn-lift: 0;
  background-color: rgb(111 201 194 / 6%);
}

.section--light .btn--ghost {
  background-color: transparent;
  border-color: var(--hairline-light-firm);
  color: var(--text-on-light);
}

.section--light .btn--ghost:hover {
  border-color: var(--river-500);
  color: var(--river-500);
  background-color: rgb(23 121 110 / 8%);
}

/* --- WhatsApp button, inline in the page -------------------------------- */

.btn--wa {
  background-color: var(--forest-700);
  border-color: rgb(123 168 131 / 40%);
  color: #fff;
}

.btn--wa:hover {
  background-color: var(--forest-500);
  border-color: var(--forest-300);
  color: #fff;
  --btn-lift: -2px;
  box-shadow: var(--shadow);
}

.btn--wa:active {
  --btn-lift: 0;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 24%);
}

.section--light .btn--wa {
  background-color: var(--forest-700);
  border-color: transparent;
  color: #fff;
}

.section--light .btn--wa:hover {
  background-color: var(--forest-500);
  color: #fff;
}

/* --- Quiet text link with an arrow -------------------------------------- */

.btn--link {
  padding-inline: 0;
  padding-block: var(--sp-3);
  margin-block: calc(var(--sp-3) * -1);
  min-block-size: 0;
  gap: var(--sp-3);
  color: var(--link);
  border: 0;
  background: none;
  box-shadow: none;
}

.btn--link::after {
  content: "";
  position: absolute;
  inset-block-end: calc(var(--sp-3) - 5px);
  inset-inline: 0;
  block-size: 1px;
  background-color: currentColor;
  opacity: 0.35;
  transition: opacity var(--dur-fast) var(--ease);
}

.btn--link:hover {
  color: var(--link-hover);
  --btn-lift: 0;
}

.btn--link:hover::after {
  opacity: 1;
}

.section--light .btn--link {
  color: var(--link-on-light);
}

.section--light .btn--link:hover {
  color: var(--ink-900);
}

/* The arrow points along the reading direction, so it — and only it — flips,
   and it slides forward on hover. */
.arrow-end {
  transition: transform var(--dur) var(--ease-out);
}

[dir="rtl"] .arrow-end {
  scale: -1 1;
}

.btn:hover .arrow-end {
  transform: translateX(4px);
}

[dir="rtl"] .btn:hover .arrow-end {
  transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .arrow-end {
    transition-property: background-color, border-color, color;
  }

  .btn {
    transform: none;
  }
}

.btn--block {
  inline-size: 100%;
}

/* A row of buttons in ordinary page flow. The hero has its own centred
   variant; this one starts where the text starts. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* ==========================================================================
   Cards
   Flat rock surfaces with a hairline that lights up, and a 2px accent that
   grows along the top edge on hover. No heavy shadows, no big radii — the
   generic SaaS card is exactly what this needs not to be.
   ========================================================================== */

.card {
  position: relative;
  background-color: var(--rock-850);
  border: var(--border) solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--sp-5);
  block-size: 2px;
  border-radius: 0 0 2px 2px;
  background-color: var(--river-400);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.card:hover {
  border-color: var(--hairline-firm);
  background-color: var(--rock-800);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.card:hover::before {
  transform: scaleX(1);
}

.card h3 {
  font-size: var(--fs-h3);
  margin-block-end: var(--sp-3);
}

.card > :last-child {
  margin-block-end: 0;
}

.section--light .card {
  background-color: var(--bg-paper);
  border-color: var(--hairline-light);
  box-shadow: var(--shadow-sm);
}

.section--light .card:hover {
  background-color: #fff;
  border-color: var(--hairline-light-firm);
  box-shadow: var(--shadow-paper);
}

@media (prefers-reduced-motion: reduce) {
  .card:hover {
    transform: none;
  }
}

/* ==========================================================================
   TBC — an unconfirmed fact
   Every number the client has not confirmed renders through this. It is
   deliberately visible: a placeholder that looks like content is how invented
   facts end up shipping.
   ========================================================================== */

.tbc {
  font-style: italic;
  color: var(--rock-400);
  text-decoration: underline dotted;
  text-decoration-color: rgb(154 168 174 / 55%);
  text-underline-offset: 0.24em;
}

.section--light .tbc {
  color: var(--muted-on-light);
  text-decoration-color: rgb(77 90 96 / 55%);
}

/* ==========================================================================
   Numbers
   .data is the uppercase tracked label; .num is the value itself and is never
   uppercased, so "18 m" does not become "18 M".
   ========================================================================== */

.num {
  font-weight: var(--data-weight);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}

/* ==========================================================================
   Fact strip
   The six things everybody asks first, set as a data band with hairline
   dividers rather than as a list.
   ========================================================================== */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: var(--sp-6) 0;
  margin: 0;
  border-block: var(--border) solid var(--hairline);
  padding-block: var(--sp-7);
}

.section--light .facts {
  border-color: var(--hairline-light);
}

.facts > div {
  min-inline-size: 0;
  padding-inline: var(--sp-6);
  border-inline-start: var(--border) solid var(--hairline);
}

.facts > div:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}

.section--light .facts > div {
  border-inline-start-color: var(--hairline-light);
}

/* Stacked in one column the vertical dividers read as an accidental indent, so
   below the point where the strip is still a row they become horizontal rules. */
@media (width < 48rem) {
  .facts > div {
    border-inline-start: 0;
    padding-inline: 0;
  }

  .facts > div + div {
    border-block-start: var(--border) solid var(--hairline);
    padding-block-start: var(--sp-5);
  }

  .section--light .facts > div + div {
    border-block-start-color: var(--hairline-light);
  }
}

.facts dt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--river-300);
  margin-block-end: var(--sp-3);
}

.facts dt svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: 0 0 auto;
  opacity: 0.9;
}

.section--light .facts dt {
  color: var(--river-500);
}

.facts dd {
  margin-inline-start: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* A confirmed value is the headline; a placeholder should not shout louder than
   the answer next to it. */
.facts dd .tbc {
  font-size: 0.7em;
  font-weight: 400;
  letter-spacing: 0;
}

/* ==========================================================================
   Prose — legal pages and long text
   ========================================================================== */

.prose > * + * {
  margin-block-start: var(--sp-5);
}

.prose h2 {
  margin-block-start: var(--sp-8);
  font-size: var(--fs-h3);
  padding-block-end: var(--sp-3);
  border-block-end: var(--border) solid var(--hairline-light);
}

.prose h3 {
  margin-block-start: var(--sp-7);
  font-size: var(--fs-lead);
}

.prose ul,
.prose ol {
  max-inline-size: 66ch;
}

.prose li + li {
  margin-block-start: var(--sp-2);
}

/* A block of draft legal text that has not been reviewed. The ember edge is
   the one place the accent is used for something other than a CTA, because
   "do not publish this yet" needs to shout. */
.notice {
  border: var(--border) solid var(--hairline-light-firm);
  border-inline-start: 3px solid var(--ember-500);
  border-radius: var(--radius);
  padding: var(--sp-6);
  background-color: var(--bg-paper);
  box-shadow: var(--shadow-sm);
}

.section:not(.section--light) .notice {
  background-color: var(--rock-850);
  border-color: var(--hairline);
  border-inline-start-color: var(--ember-500);
}

.notice h2,
.notice h3 {
  margin-block-start: 0;
  border-block-end: 0;
  padding-block-end: 0;
}

/* ==========================================================================
   The canyon profile — the spine of the tour page
   A vertical shaft read top to bottom, one node per section of the descent.
   The spine sits on the inline-start edge, so it mirrors correctly in RTL
   without a single physical property.
   ========================================================================== */

.profile {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
}

.profile__node {
  position: relative;
  padding-inline-start: var(--sp-7);
  padding-block-end: var(--sp-9);
  margin-block-start: 0;
}

/* The spine, as a gradient rather than a flat hairline, so it reads as light
   falling down the canyon */
.profile__node::after {
  content: "";
  position: absolute;
  inset-block: 0.6em 0;
  inset-inline-start: 0;
  inline-size: 2px;
  background-image: linear-gradient(
    to bottom,
    rgb(63 167 179 / 55%),
    rgb(63 167 179 / 10%)
  );
}

.profile__node:last-child {
  padding-block-end: 0;
}

.profile__node:last-child::after {
  display: none;
}

/* The node marker: a filled dot inside a ring, centred on the spine */
.profile__node::before {
  content: "";
  position: absolute;
  inset-block-start: 0.32em;
  inset-inline-start: 0;
  translate: -50% 0;
  inline-size: 13px;
  block-size: 13px;
  border-radius: 50%;
  background-color: var(--river-300);
  box-shadow:
    0 0 0 4px var(--rock-950),
    0 0 0 6px rgb(111 201 194 / 22%);
  z-index: 1;
}

[dir="rtl"] .profile__node::before {
  translate: 50% 0;
}

.profile__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-5);
}

.profile__head h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

/* Depth / height of this section */
.profile__depth {
  color: var(--river-300);
  padding: var(--sp-2) var(--sp-3);
  border: var(--border) solid rgb(111 201 194 / 30%);
  border-radius: var(--radius);
  background-color: rgb(111 201 194 / 8%);
  line-height: 1;
}

.profile__depth .tbc {
  color: inherit;
  font-style: normal;
}

.profile__node p {
  margin-block-start: var(--sp-4);
}

/* Photographs get real size here — they are the argument for coming */
.profile__node figure {
  margin-block-start: var(--sp-6);
  max-inline-size: none;
}

.profile__node figure a,
.profile__node figure picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
}

.profile__node img {
  border-radius: var(--radius);
  inline-size: 100%;
  filter: contrast(1.06) saturate(1.04);
  transition: transform var(--dur-slow) var(--ease-out);
}

.profile__node figure:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .profile__node figure:hover img {
    transform: none;
  }
}

/* ==========================================================================
   Timeline — how the day runs
   ========================================================================== */

.timeline {
  margin: 0;
}

.timeline > div {
  display: grid;
  gap: var(--sp-2) var(--sp-6);
  padding-block: var(--sp-5);
  border-block-start: var(--border) solid var(--hairline);
  transition: background-color var(--dur-fast) var(--ease);
}

.timeline > div:last-child {
  border-block-end: var(--border) solid var(--hairline);
}

.section--light .timeline > div {
  border-color: var(--hairline-light);
}

.timeline dt {
  color: var(--river-300);
  padding-block-start: 2px;
}

.section--light .timeline dt {
  color: var(--river-500);
}

.timeline dd {
  margin-inline-start: 0;
}

@media (width >= 40rem) {
  .timeline > div {
    grid-template-columns: 11rem 1fr;
  }
}

/* ==========================================================================
   Tables — prices, included/excluded
   ========================================================================== */

.table-scroll {
  overflow-x: auto;
  margin-block-start: var(--sp-6);
  /* A hint that there is more to the side on narrow screens */
  border-inline: var(--border) solid transparent;
}

.table {
  min-inline-size: 26rem;
}

.table th,
.table td {
  padding: var(--sp-4) var(--sp-5);
  border-block-end: var(--border) solid var(--hairline);
  vertical-align: baseline;
}

.table tbody tr {
  transition: background-color var(--dur-fast) var(--ease);
}

.table tbody tr:hover {
  background-color: rgb(255 255 255 / 3%);
}

.section--light .table th,
.section--light .table td {
  border-color: var(--hairline-light);
}

.section--light .table tbody tr:hover {
  background-color: rgb(18 23 26 / 3%);
}

.table thead th {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
  border-block-end-color: var(--hairline-firm);
}

.section--light .table thead th {
  color: var(--muted-on-light);
  border-block-end-color: var(--hairline-light-firm);
}

.table tbody th {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.table td:last-child {
  text-align: end;
}

/* ==========================================================================
   Accordion — <details>/<summary>, no JS
   ========================================================================== */

/* A paper panel rather than rows floating on the limestone field: it anchors
   the questions and makes the section read as a document you were handed. */
.accordion {
  background-color: var(--bg-paper);
  border: var(--border) solid var(--hairline-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.accordion details {
  border-block-end: var(--border) solid var(--hairline-light);
  transition: background-color var(--dur-fast) var(--ease);
}

.accordion details:last-child {
  border-block-end: 0;
}

.accordion details[open] {
  background-color: #fff;
}

.accordion summary:hover {
  background-color: rgb(23 121 110 / 6%);
}

.accordion summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  padding-inline: var(--sp-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast) var(--ease);
}

.accordion summary::-webkit-details-marker {
  display: none;
}

/* A plus that rotates into a minus — text, not an icon font */
.accordion summary::after {
  content: "+";
  margin-inline-start: auto;
  font-family: var(--font-body);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 0.8;
  color: var(--river-500);
  flex: 0 0 auto;
  transition: transform var(--dur) var(--ease-out);
}

.accordion details[open] summary::after {
  transform: rotate(135deg);
}

.accordion summary:hover {
  color: var(--river-500);
}

.accordion .accordion__body {
  padding-inline: var(--sp-6);
  padding-block-end: var(--sp-6);
  max-inline-size: 68ch;
}

.accordion details[open] .accordion__body {
  animation: fade-up var(--dur-slow) var(--ease-out);
}

.accordion .accordion__body > * + * {
  margin-block-start: var(--sp-4);
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, -0.4rem, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accordion details[open] .accordion__body {
    animation: none;
  }

  .accordion details[open] summary::after {
    transition: none;
  }
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-inline-size: 0;
}

.field--full {
  grid-column: 1 / -1;
}

.field > label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-on-light);
}

.field .hint {
  font-size: var(--fs-small);
  color: var(--muted-on-light);
  line-height: 1.5;
}

.field input:not([type="radio"]):not([type="checkbox"]),
.field select,
.field textarea {
  inline-size: 100%;
  min-block-size: 3.25rem;
  padding: var(--sp-3) var(--sp-4);
  background-color: #fff;
  color: var(--ink-900);
  border: var(--border) solid var(--hairline-light-firm);
  border-radius: var(--radius-input);
  box-shadow: inset 0 1px 2px rgb(18 23 26 / 6%);
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.field textarea {
  min-block-size: 6rem;
  line-height: 1.6;
}

.field input:not([type="radio"]):not([type="checkbox"]):hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--river-500);
}

.field input:not([type="radio"]):not([type="checkbox"]):focus,
.field select:focus,
.field textarea:focus {
  box-shadow:
    inset 0 1px 2px rgb(18 23 26 / 4%),
    0 0 0 3px rgb(23 121 110 / 18%);
}

/* The required marker is decorative; the label text says "required" too */
.req {
  color: var(--error-on-light);
  margin-inline-start: 2px;
}

/* One error per field, in the page's language, written by booking.js */
.field .error {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--error-on-light);
  display: flex;
  gap: var(--sp-2);
}

.field[data-invalid="true"] input:not([type="radio"]):not([type="checkbox"]),
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: var(--error-on-light);
  border-inline-start-width: 3px;
  background-color: #fffaf8;
}

fieldset {
  border: var(--border) solid var(--hairline-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  margin: 0;
  background-color: rgb(255 255 255 / 45%);
}

legend {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  padding-inline: var(--sp-3);
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
}

/* Generous touch targets: these are the safety questions */
.radio {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: var(--sp-2) var(--sp-3);
  margin-inline-start: calc(var(--sp-3) * -1);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

.radio:hover {
  background-color: rgb(23 121 110 / 8%);
}

.radio input {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  accent-color: var(--river-500);
  flex: 0 0 auto;
}

/* Submission states, both real page states rather than alerts */
.form-status {
  border: var(--border) solid var(--hairline-light);
  border-inline-start: 3px solid var(--river-500);
  border-radius: var(--radius);
  padding: var(--sp-6);
  background-color: var(--bg-paper);
  box-shadow: var(--shadow-paper);
}

.form-status--error {
  border-inline-start-color: var(--error-on-light);
}

.form-status h2 {
  font-size: var(--fs-h3);
  margin-block-end: var(--sp-4);
}

[hidden] {
  display: none !important;
}

/* ==========================================================================
   Split — form beside the WhatsApp route, equally prominent
   ========================================================================== */

.split {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}

@media (width >= 62rem) {
  .split {
    grid-template-columns: 1.65fr 1fr;
    gap: var(--sp-8);
  }

  .split__aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--sp-5));
  }
}

/* ==========================================================================
   Gallery
   Multi-column rather than a fixed grid: every photograph supplied is
   portrait, and forcing them into 3:2 thumbnails would crop away the height
   that makes a slot canyon look like one. Columns keep each frame's own aspect
   ratio, need no JS, and flow right-to-left on their own in RTL.
   ========================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: var(--sp-7);
}

.chips li {
  margin-block-start: 0;
}

.chip {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  border: var(--border) solid var(--hairline-firm);
  border-radius: 999px;
  background-color: rgb(255 255 255 / 3%);
  color: var(--rock-200);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
  line-height: 1;
  min-block-size: 2.75rem;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.chip:hover {
  border-color: var(--river-300);
  color: #fff;
  background-color: rgb(111 201 194 / 12%);
}

.chip[aria-pressed="true"],
.chip[aria-current="true"] {
  background-color: var(--river-300);
  border-color: var(--river-300);
  color: var(--rock-980);
}

.gallery {
  columns: 1;
  column-gap: var(--sp-5);
}

@media (width >= 34rem) {
  .gallery {
    columns: 2;
  }
}

@media (width >= 62rem) {
  .gallery {
    columns: 3;
  }
}

.gallery figure {
  break-inside: avoid;
  margin-block-end: var(--sp-5);
  position: relative;
}

.gallery a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background-color: var(--rock-900);
}

/* Slow zoom on hover, and the frame lightens rather than dimming — dimming a
   photograph on hover fights the whole point of the page. */
.gallery img {
  inline-size: 100%;
  filter: contrast(1.07) saturate(1.06) brightness(0.98);
  transition:
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease);
}

.gallery a:hover img,
.gallery a:focus-visible img {
  transform: scale(1.055);
  filter: contrast(1.1) saturate(1.1) brightness(1.02);
}

/* A gradient foot on the image so the caption below it feels attached to the
   frame instead of floating under it */
.gallery a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 35%;
  background-image: linear-gradient(
    to bottom,
    rgb(7 9 11 / 0%),
    rgb(7 9 11 / 62%)
  );
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.gallery a:hover::after,
.gallery a:focus-visible::after {
  opacity: 1;
}

.gallery figcaption {
  padding-block-start: var(--sp-3);
  font-weight: 600;
  color: var(--rock-200);
  transition: color var(--dur-fast) var(--ease);
}

.gallery figure:hover figcaption {
  color: #fff;
}

/* Filtering is class toggling in gallery.js; without JS every item shows */
.gallery figure[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .gallery a:hover img,
  .gallery a:focus-visible img {
    transform: none;
  }
}

/* ==========================================================================
   Photo trio — three photographs linking to the gallery. Not a carousel.
   Deliberately unequal: a uniform row of three identical boxes is the most
   generic layout on the internet, and breaking the middle one out of line
   costs nothing structurally.
   ========================================================================== */

.photo-trio {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.photo-trio a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background-color: var(--rock-900);
}

.photo-trio img {
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: contrast(1.07) saturate(1.06) brightness(0.96);
  transition:
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease);
}

.photo-trio a:hover img,
.photo-trio a:focus-visible img {
  transform: scale(1.06);
  filter: contrast(1.1) saturate(1.12) brightness(1.02);
}

@media (width >= 48rem) {
  /* The middle frame drops and runs taller, so the row reads as a composition
     rather than as a grid of thumbnails. */
  .photo-trio a:nth-child(2) {
    margin-block-start: var(--sp-7);
  }

  .photo-trio a:nth-child(2) img {
    aspect-ratio: 3 / 4.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-trio a:hover img,
  .photo-trio a:focus-visible img {
    transform: none;
  }
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  position: relative;
  background-color: var(--rock-900);
  border-block: var(--border) solid var(--hairline);
  padding-block: var(--section-y);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* A dark wash of canyon wall behind the closing ask */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/gallery/thumb/narrows-walls.webp");
  background-size: cover;
  background-position: center 35%;
  opacity: 0.26;
  filter: grayscale(0.35) contrast(1.1);
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
    100% 90% at 50% 50%,
    rgb(16 22 26 / 72%) 0%,
    rgb(10 14 16 / 94%) 100%
  );
}

.cta-band h2 {
  margin-inline: auto;
  max-inline-size: 24ch;
}

.cta-band p {
  margin-inline: auto;
  margin-block-start: var(--sp-4);
  color: var(--rock-200);
  font-size: var(--fs-lead);
  max-inline-size: 52ch;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
  margin-block-start: var(--sp-7);
}

/* ==========================================================================
   Empty state — the blog index, and nothing else
   ========================================================================== */

.empty {
  background-color: var(--rock-850);
  border: var(--border) solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--sp-9) var(--sp-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* The slot device, drawn faintly behind an empty page */
.empty::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 2px;
  background-image: linear-gradient(
    to bottom,
    rgb(111 201 194 / 0%),
    rgb(111 201 194 / 30%) 50%,
    rgb(111 201 194 / 0%)
  );
}

.empty h2 {
  font-size: var(--fs-h2);
}

.empty p {
  margin-inline: auto;
  color: var(--text-muted);
  max-inline-size: 46ch;
}

.empty .btn {
  margin-block-start: var(--sp-6);
}

/* ==========================================================================
   Two honest columns — "Yes if…" / "Not this trip if…"
   ========================================================================== */

.suit {
  display: grid;
  gap: var(--sp-6);
}

@media (width >= 48rem) {
  .suit {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
}

.suit__col {
  padding: var(--sp-6);
  background-color: rgb(255 255 255 / 55%);
  border: var(--border) solid var(--hairline-light);
  border-radius: var(--radius);
}

.section:not(.section--light) .suit__col {
  background-color: var(--rock-850);
  border-color: var(--hairline);
}

.suit__col h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block-end: var(--sp-4);
  border-block-end: 2px solid var(--forest-500);
}

.suit__col h3::before {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background-color: var(--forest-500);
  flex: 0 0 auto;
}

.suit__col--no h3 {
  border-block-end-color: var(--ember-500);
}

.suit__col--no h3::before {
  background-color: var(--ember-500);
}

.suit__col ul {
  margin-block-start: var(--sp-5);
  padding-inline-start: 1.2em;
}

.suit__col li {
  line-height: 1.6;
}

/* ==========================================================================
   Meeting point / detail lists
   ========================================================================== */

.meet {
  display: grid;
  gap: var(--sp-4);
}

.meet dl > div {
  display: grid;
  gap: var(--sp-1) var(--sp-5);
  padding-block: var(--sp-4);
  border-block-end: var(--border) solid var(--hairline-light);
}

.section:not(.section--light) .meet dl > div {
  border-block-end-color: var(--hairline);
}

.meet dt {
  color: var(--river-500);
}

.section:not(.section--light) .meet dt {
  color: var(--river-300);
}

.meet dd {
  margin-inline-start: 0;
}

@media (width >= 40rem) {
  .meet dl > div {
    grid-template-columns: 13rem 1fr;
    align-items: baseline;
  }
}

/* ==========================================================================
   Per-guest wetsuit sizing
   booking.js spawns one block per guest: height, weight, suit model. Kept
   visually quiet — it is a lot of fields, and making each one shout would make
   the form feel twice as long as it is.
   ========================================================================== */

.guests {
  display: grid;
  gap: var(--sp-4);
}

.guest {
  border: var(--border) solid var(--hairline-light);
  border-radius: var(--radius-lg);
  background-color: rgb(255 255 255 / 55%);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  margin: 0;
}

.guest > legend {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--river-500);
  padding-inline: var(--sp-3);
}

.guest__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

/* Two short number fields sit side by side; the suit choice needs the full
   width for its three options. */
@media (width >= 34rem) {
  .guest__grid {
    grid-template-columns: 1fr 1fr;
  }

  .guest__grid > .field:last-child {
    grid-column: 1 / -1;
  }
}

/* The suit fieldset is nested inside a field, so it drops the panel styling
   the outer fieldsets carry. */
.guest__grid fieldset.suit {
  border: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

.guest__grid fieldset.suit > legend {
  padding-inline: 0;
  color: var(--text-on-light);
}

.guest__grid .radio-row {
  gap: var(--sp-2) var(--sp-4);
  margin-block-start: var(--sp-3);
}

/* ==========================================================================
   Price total
   The one number people are looking for, so it is the largest thing in the
   form and it updates as the group size changes.
   ========================================================================== */

.price-total {
  border-block-start: 2px solid var(--ink-900);
  padding-block-start: var(--sp-5);
}

.price-total__calc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-5);
}

.price-total__sum {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--text-on-light);
  font-variant-numeric: tabular-nums;
}

.price-total__math {
  color: var(--muted-on-light);
}

.price-total__note {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--muted-on-light);
}

/* ==========================================================================
   Price tag — one number, stated once
   ========================================================================== */

.pricetag {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.pricetag__sum {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.pricetag__unit {
  color: var(--muted-on-light);
}

.section:not(.section--light) .pricetag__unit {
  color: var(--text-muted);
}

/* ==========================================================================
   Guide and languages, side by side
   The guide card used to sit alone with the languages paragraph stacked
   underneath it, which left a wide empty column beside the photo on desktop.
   ========================================================================== */

.guide-split {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (width >= 62rem) {
  .guide-split {
    grid-template-columns: 22rem 1fr;
    gap: var(--sp-8);
  }
}

.guide-split__text > h3:first-child {
  margin-block-start: 0;
}

/* ==========================================================================
   Gallery video items
   A poster with a play badge. Nothing but the poster loads until the visitor
   opens it, so five clips add no weight to the page.
   ========================================================================== */

.gallery__play {
  position: absolute;
  inset-block-end: var(--sp-4);
  inset-inline-start: var(--sp-4);
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background-color: rgb(10 14 16 / 72%);
  border: var(--border) solid rgb(255 255 255 / 30%);
  color: #fff;
  z-index: 1;
  transition:
    background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease-out);
}

@supports (backdrop-filter: blur(1px)) {
  .gallery__play {
    background-color: rgb(10 14 16 / 45%);
    backdrop-filter: blur(6px);
  }
}

.gallery__play svg {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  /* The triangle points along the reading direction */
  margin-inline-start: 2px;
}

[dir="rtl"] .gallery__play svg {
  scale: -1 1;
  margin-inline-start: 0;
  margin-inline-end: 2px;
}

.gallery a:hover .gallery__play,
.gallery a:focus-visible .gallery__play {
  background-color: var(--ember-500);
  color: var(--cta-text);
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .gallery a:hover .gallery__play,
  .gallery a:focus-visible .gallery__play {
    transform: none;
  }
}

/* ==========================================================================
   Social handle
   A username is a literal string, so it must not inherit the uppercase
   treatment the tracked link style applies.
   ========================================================================== */

.handle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 2.5rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.handle svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: 0 0 auto;
}