/* ===========================================================================
   HD Marrakech — "Bone & Ink"
   One stylesheet, no build step, no remote requests.

   The system: a warm off-white ground (bone) carrying editorial serif display
   type, cut by deep ink bands where photography takes over. Hard-edged cards
   and hairline rules against fully-rounded controls. One accent — amber —
   used sparingly enough to stay an accent.

   Sections
     1  fonts
     2  tokens
     3  reset and base
     4  typography
     5  controls
     6  masthead, drawer, notice
     7  home: opening, finder, edit, routes, packs, tailor, honest, faq
     8  hub: page head, filters, cards, grid
     9  offer: head, gallery, body, rail, dock
    10  planner
    11  saved, compare, tray
    12  article, footer, toast
    13  right-to-left and Arabic
    14  motion, print, forced colours
   ======================================================================== */

/* ------------------------------------------------------------------ 1 fonts */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/instrument-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/instrument-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- 2 tokens */
:root {
  /* --------------------------------------------------------------- colour
     Ivory ground, charcoal type, terracotta for what you press, deep green
     for the sections that carry the brand, muted gold as a fine accent.
     Every pairing below has been measured; the ratios are in the comments. */
  --ink: #16120e;            /* charcoal — 16.4:1 on ivory */
  --ink-2: #201a14;
  --ink-3: #2e261d;
  --ink-line: #3c3327;

  --forest: #1c3a31;         /* deep green — brand sections, 12.9:1 with ivory */
  --forest-2: #24473c;
  --forest-line: #3a5b4f;

  --bone: #f6f1e7;           /* ivory page ground */
  --bone-2: #ece4d5;
  --paper: #fffdf8;          /* card and panel surfaces */
  --line: #ded4c0;
  --line-soft: #ebe3d4;

  --text: #1b1611;           /* 15.8:1 on ivory */
  --text-2: #4c4336;         /* 8.6:1 */
  --muted: #6c6153;          /* 5.3:1 — the floor for small text */
  --on-ink: #f4eee2;
  --on-ink-2: #c3b8a3;
  --on-forest: #eef3ec;
  --on-forest-2: #b3c7bc;

  --clay: #a8521f;           /* primary action — 5.4:1 with white */
  --clay-deep: #8b4319;
  --clay-bright: #c26a32;    /* 3.6:1 on ivory: icons, rules, large figures */
  --clay-wash: #f4e3d5;
  --gold: #8f7336;           /* 4.1:1 on ivory — marks and numerals only */
  --clay-light: #e8a878;     /* 5.1:1 on deep green — accents on brand bands */
  --olive: #3f4e39;

  /* accent aliases kept so component rules read as intent, not as colour */
  --amber: var(--clay-bright);
  --amber-deep: var(--clay-deep);
  --amber-wash: var(--clay-wash);

  /* ----------------------------------------------------------------- type */
  --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;

  --fs-display: clamp(2.6rem, 5.6vw, 5rem);
  --fs-h1: clamp(2.1rem, 4.4vw, 3.6rem);
  --fs-h2: clamp(1.75rem, 3.2vw, 2.8rem);
  --fs-h3: clamp(1.18rem, 1.5vw, 1.45rem);
  --fs-lede: clamp(1.02rem, 1.15vw, 1.16rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-kicker: 0.6875rem;

  /* -------------------------------------------------------------- metrics */
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 1280px;
  --head: 72px;
  --pad-band: clamp(56px, 8vw, 128px);
  --pad-tight: clamp(36px, 5vw, 72px);

  --radius: 16px;            /* cards, media, panels */
  --radius-sm: 10px;         /* inputs, tags */
  --radius-pill: 999px;      /* anything you press */

  --shadow-soft: 0 1px 2px rgba(22, 18, 14, 0.04), 0 8px 24px rgba(22, 18, 14, 0.05);
  --shadow-lift: 0 2px 4px rgba(22, 18, 14, 0.05), 0 16px 40px rgba(22, 18, 14, 0.09);

  /* --------------------------------------------------------------- motion
     Small interactions at the short end, layout moves at the long end.
     Everything here is disabled wholesale by prefers-reduced-motion. */
  --t-fast: 160ms;
  --t-base: 220ms;
  --t-slow: 340ms;
  --t-image: 600ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* So an accordion can animate to auto rather than snapping. */
  interpolate-size: allow-keywords;
}

@media (max-width: 899px) {
  :root {
    --head: 60px;
  }
}

/* --------------------------------------------------------- 3 reset and base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head) + 20px);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

[hidden] {
  display: none !important;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  background: var(--bone-2);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p,
h1,
h2,
h3,
h4,
figure,
dl,
dd {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.band--ink :focus-visible,
.opening :focus-visible,
.ground :focus-visible,
.band--honest :focus-visible {
  outline-color: #e6b98f;
}

.u-wrap {
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.u-hide {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  inset-block-start: -100%;
  inset-inline-start: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
}

.skip:focus {
  inset-block-start: 14px;
}

.i {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* ----------------------------------------------------------- 4 typography */
h1,
h2,
h3,
.display {
  font-family: var(--display);
  font-variation-settings: var(--display-settings);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.012em;
}

em {
  font-style: italic;
}

.kicker {
  font-family: var(--sans);
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kicker i {
  font-style: normal;
  opacity: 0.55;
}

.kicker--light {
  color: #cdbfa5;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.72;
  color: var(--text-2);
  max-width: 46ch;
}

.fineprint {
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--muted);
  max-width: 68ch;
  margin-block-start: 22px;
}

.prose {
  font-size: var(--fs-lede);
  line-height: 1.8;
  color: var(--text-2);
  max-width: 62ch;
}

.head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  padding-block-end: clamp(26px, 3vw, 42px);
  margin-block-end: clamp(26px, 3vw, 44px);
  border-block-end: 1px solid var(--line);
}

.head__title {
  font-size: var(--fs-h2);
  max-width: 18ch;
}

.head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

@media (max-width: 800px) {
  .head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }
}

/* ------------------------------------------------------------- 5 controls */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid var(--clay);
  border-radius: var(--radius-pill);
  background: var(--clay);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  text-align: center;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.btn:hover {
  background: var(--clay-deep);
  border-color: var(--clay-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.btn:active {
  transform: translateY(0);
}

.btn--sm {
  min-height: 44px;
  padding: 10px 18px;
  font-size: var(--fs-xs);
}

.btn--block {
  width: 100%;
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

.btn--ghost:hover {
  background: var(--bone-2);
  border-color: var(--muted);
  color: var(--text);
}

.btn--light {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

.btn--light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.btn--outline-light {
  background: transparent;
  border-color: rgba(242, 236, 224, 0.42);
  color: var(--on-ink);
}

.btn--outline-light:hover {
  background: rgba(242, 236, 224, 0.12);
  border-color: rgba(242, 236, 224, 0.75);
  color: var(--on-ink);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 var(--amber);
  transition: box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}

.link:hover {
  color: var(--amber-deep);
  box-shadow: inset 0 -2px 0 var(--amber);
}

.link--arrow::after {
  content: '→';
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.25s var(--ease);
}

.link--arrow:hover::after {
  transform: translateX(3px);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.chip .i {
  width: 15px;
  height: 15px;
  opacity: 0.7;
}

.chip:hover {
  background: var(--bone-2);
  border-color: var(--muted);
  color: var(--text);
}

.chip.is-on,
.chip[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.chip.is-on .i,
.chip[aria-pressed='true'] .i {
  opacity: 1;
}

.chip--drop i {
  font-style: normal;
  opacity: 0.55;
  font-size: 1.15em;
  line-height: 1;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: clamp(24px, 3vw, 38px);
}

.tabs--rail {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block-end: 4px;
  margin-block-end: 18px;
}

.tabs--rail::-webkit-scrollbar {
  display: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field > span,
.pgroup__fields label > span {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

input[type='text'],
input[type='search'],
input[type='email'],
input[type='password'],
input[type='tel'],
input[type='url'],
input[type='date'],
input[type='number'],
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text);
  font-size: var(--fs-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 34px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-wash);
  outline: none;
}

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  overflow: hidden;
}

.stepper button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-2);
}

.stepper button:hover {
  background: var(--bone-2);
  color: var(--text);
}

.stepper input {
  width: 56px;
  min-height: 44px;
  border: 0;
  border-inline: 1px solid var(--line);
  border-radius: 0;
  text-align: center;
  background: transparent;
  font-weight: 600;
  -moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.stepper input:focus {
  box-shadow: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: var(--bone-2);
  color: var(--text-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.price__from,
.price__unit {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.price__value {
  font-family: var(--display);
  font-variation-settings: 'opsz' 60;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.1;
}

.price--lg .price__value {
  font-size: 2.2rem;
}

.price__party {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  color: var(--amber-deep);
  font-weight: 600;
}

/* ---------------------------------------------- 6 masthead, drawer, notice */
.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-block-end: 1px solid var(--line);
}

.masthead__in {
  height: var(--head);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 1.6vw, 28px);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.mark__glyph {
  display: block;
  height: 38px;
  width: auto;
  background: none;
}

.mark picture {
  display: block;
  flex: none;
}

.mark__type {
  min-width: 0;
}

.mark__type strong {
  white-space: nowrap;
  display: block;
  font-family: var(--display);
  font-variation-settings: 'opsz' 40;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.1;
  color: var(--text);
}

.mark__type small {
  display: block;
  white-space: nowrap;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-start: 2px;
}

.nav {
  display: flex;
  justify-content: center;
  gap: clamp(11px, 1.6vw, 30px);
  min-width: 0;
}

.nav__link {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  padding-block: 6px;
  position: relative;
  white-space: nowrap;
}

.nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: var(--from, left);
  transition: transform 0.28s var(--ease);
}

.nav__link:hover,
.nav__link[aria-current='page'] {
  color: var(--text);
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

.tools {
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.5vw, 8px);
  justify-content: flex-end;
}

.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  /* Icon-only at phone widths, where it was a 29px-wide target. */
  min-width: 44px;
  padding: 6px 12px;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  position: relative;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.tool:hover {
  background: var(--bone-2);
  color: var(--text);
}

select.tool--select {
  min-height: 44px;
  padding-block: 6px;
  padding-inline: 13px 36px;
  border-color: var(--line);
  background-color: transparent;
  width: auto;
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* The saved heart carries the count and is the one header control people
   look for, so it sits a size above the rest of the row. */
.tool--saved .i {
  width: 20px;
  height: 20px;
}

.pip {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: 0;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--amber);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}

.lang {
  position: relative;
}

.lang > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 6px 12px;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
}

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

.lang__menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 70;
  min-width: 190px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(20, 17, 13, 0.12);
}

.lang__title {
  font-size: 0.64rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 8px;
}

.lang__menu a {
  display: block;
  padding: 9px 10px;
  font-size: var(--fs-sm);
  border-radius: 2px;
}

.lang__menu a:hover {
  background: var(--bone-2);
}

.lang__menu a[aria-current='true'] {
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--amber);
}

.masthead__cta {
  white-space: nowrap;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 0;
}

.burger .i {
  width: 19px;
  height: 19px;
}

/* Two icons, one shown at a time. A folded-bars animation is a nice trick
   until one of the three bars misses its transform, and then the control just
   looks broken. */
.burger .i:last-child,
.burger[aria-expanded='true'] .i:first-child {
  display: none;
}

.burger[aria-expanded='true'] .i:last-child {
  display: block;
}

/* -- the menu sheet ------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(22, 18, 14, 0.38);
  display: flex;
  justify-content: flex-end;
}

.drawer__sheet {
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  height: 100%;
  background: var(--bone);
  box-shadow: -24px 0 60px -30px rgba(20, 17, 13, 0.5);
  animation: sheet-in 0.26s var(--ease);
}

@keyframes sheet-in {
  from {
    transform: translateX(6%);
    opacity: 0.6;
  }
}

.drawer__sheet:focus {
  outline: none;
}

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
  padding-inline: var(--gutter);
  border-block-end: 1px solid var(--line);
}

.drawer__brand {
  font-family: var(--display);
  font-variation-settings: 'opsz' 40;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 0;
}

.drawer__close:hover {
  background: var(--bone-2);
}

.drawer__close .i {
  width: 18px;
  height: 18px;
}

.drawer__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px var(--gutter) 22px;
  -webkit-overflow-scrolling: touch;
}

.drawer__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  border-block-end: 1px solid var(--line-soft);
}

.drawer__item .i {
  width: 15px;
  height: 15px;
  color: var(--muted);
  flex: none;
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.drawer__item:hover .i {
  color: var(--clay);
  transform: translateX(3px);
}

/* The four categories belong to Experiences, so they sit under it and read as
   a smaller second level rather than as loose pills. */
.drawer__subs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  padding-block: 4px 12px;
  border-block-end: 1px solid var(--line-soft);
}

.drawer__sub {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-2);
}

.drawer__sub:hover {
  color: var(--clay);
}

.drawer__foot {
  flex: none;
  display: grid;
  gap: 16px;
  padding: 18px var(--gutter) calc(20px + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--line);
  background: var(--paper);
}

.drawer__prefs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.drawer__pref {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
}

.drawer__pref select {
  width: auto;
  min-height: 44px;
  padding-inline: 12px 32px;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.drawer__langs {
  display: flex;
  gap: 4px;
}

.drawer__langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-2);
}

.drawer__langs a[aria-current='true'] {
  background: var(--bone-2);
  color: var(--text);
}

.drawer__account {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}

.drawer__account .i {
  width: 17px;
  height: 17px;
  color: var(--clay);
}

.drawer__account:hover {
  color: var(--text);
}

.notice {
  background: var(--ink);
  color: var(--on-ink-2);
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px var(--gutter);
  margin: 0;
}

.notice span {
  display: inline-block;
  position: relative;
  padding-inline-start: 16px;
}

.notice span::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  width: 7px;
  height: 7px;
  margin-block-start: -3.5px;
  border-radius: 50%;
  background: var(--amber);
}

@media (max-width: 1149px) {
  .nav,
  .masthead__cta {
    display: none;
  }

  .tool__label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .burger {
    display: grid;
  }

  .masthead__in {
    grid-template-columns: auto 1fr;
  }

  .tool {
    padding: 6px 9px;
  }

  select.tool--select {
    padding-inline: 11px 32px;
  }
}

@media (min-width: 1150px) {
  .drawer {
    display: none !important;
  }
}

/* Below 768px the descriptor is longer than the space between the wordmark and
   the tools, and runs into the saved heart. The brand name carries the header
   on a phone; the descriptor is in the menu sheet and the footer. */
@media (max-width: 767px) {
  .mark__type small {
    display: none;
  }
}

/* The tagline is the descriptor from the business's own logo — "agence de
   réservation et de tourisme" says what this company is, and that is worth the
   room. It was hidden above 1150px back when the navigation carried five long
   labels; with four short ones the row has space for it in all three
   languages, measured rather than assumed. */

/* Where the nav is shown but the row is still tight, the saved list and the
   account become icons and the call to action loses a little padding. Nothing
   is removed; the labels return once the row is at its full 1280px measure. */
@media (min-width: 1150px) and (max-width: 1399px) {
  /* The tagline stands down with the tool labels rather than on a threshold of
     its own: one step where the row goes compact, not two. */
  .mark__type small {
    display: none;
  }

  .tool--saved .tool__label,
  .tool--account .tool__label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .tool {
    padding-inline: 10px;
  }

  select.tool--select {
    padding-inline: 11px 32px;
  }

  .masthead__cta {
    padding-inline: 18px;
  }
}

.drawer__currency {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
}

.drawer__currency select {
  width: auto;
  min-height: 42px;
}

/* Below 700px the masthead keeps only what a thumb needs: the mark, the saved
   list and the menu. Currency, language and sign-in move into the drawer. */
@media (max-width: 599px) {
  .masthead__in {
    gap: 10px;
  }

  .drawer__currency {
    display: flex;
  }

  .mark__type small,
  .tool--account,
  .tool--select,
  .lang {
    display: none;
  }

  .mark__type strong {
    font-size: 0.95rem;
  }

  .mark__glyph {
    height: 34px;
  }

  .tools {
    gap: 4px;
  }

  .tool {
    padding: 6px 7px;
  }

  select.tool--select {
    padding-inline: 9px 28px;
    font-size: 0.7rem;
  }

  .lang > summary {
    padding: 6px 9px;
  }

  .burger {
    width: 44px;
    height: 44px;
  }

  .notice {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    padding-inline: 14px;
  }
}

@media (max-width: 379px) {
  .mark {
    gap: 8px;
  }

  .mark__glyph {
    height: 30px;
  }

  .mark__type strong {
    font-size: 0.86rem;
  }
}

/* --------------------------------------------------------------- 7 home */
/* -- opening ------------------------------------------------------------- */
.opening {
  background: var(--bone);
  padding-block: clamp(26px, 6vw, 92px) clamp(24px, 4vw, 52px);
  text-align: center;
}

.opening__in {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.opening .kicker {
  justify-content: center;
}

.opening__title {
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 16ch;
  margin-block-end: clamp(16px, 2vw, 26px);
}

.opening__title em {
  font-style: italic;
  color: var(--clay-deep);
}

.opening__lead {
  font-size: var(--fs-lede);
  line-height: 1.7;
  color: var(--text-2);
  max-width: 52ch;
  margin-block-end: clamp(24px, 3.6vw, 46px);
}

.opening .finder {
  width: 100%;
  text-align: start;
}

.opening .quick {
  justify-content: center;
}

/* -- gateways ------------------------------------------------------------- */
.gateways {
  background: var(--bone);
  padding-block: clamp(12px, 2vw, 26px) clamp(40px, 5vw, 72px);
}

.gateways__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.gateway {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.gateway:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.gateway__media {
  display: block;
  aspect-ratio: 3 / 2;
}

.gateway--wide .gateway__media {
  aspect-ratio: 16 / 9;
}

.gateway__media picture,
.gateway__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-image) var(--ease);
}

.gateway:hover .gateway__media img {
  transform: scale(1.04);
}

/* A readable floor for the overlaid text, whatever the photograph does. */
.gateway__body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  display: grid;
  gap: 6px;
  padding: clamp(18px, 2.4vw, 30px);
  color: #fff;
  background: linear-gradient(to top, rgba(14, 11, 8, 0.86) 8%, rgba(14, 11, 8, 0.55) 48%, rgba(14, 11, 8, 0) 100%);
  text-align: start;
}

.gateway__name {
  font-family: var(--display);
  font-variation-settings: 'opsz' 72;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.gateway__blurb {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 44ch;
}

.gateway__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-block-start: 8px;
  padding-block-start: 12px;
  border-block-start: 1px solid rgba(255, 255, 255, 0.24);
}

.gateway__count {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.78);
}

.gateway__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.gateway__go .i {
  width: 15px;
  height: 15px;
  transition: transform var(--t-base) var(--ease);
}

.gateway:hover .gateway__go .i {
  transform: translateX(3px);
}

@media (max-width: 720px) {
  .gateways__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gateway--wide .gateway__media,
  .gateway__media {
    aspect-ratio: 3 / 2;
  }
}

/* -- trip finder ---------------------------------------------------------- */
.shelf {
  position: relative;
  z-index: 3;
}

.finder {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(18px, 2vw, 26px);
  box-shadow: var(--shadow-lift);
}

/* One slim pill rather than a panel: hairline dividers between the five
   questions and a round accent button at the end. The catalogue keeps the
   squarer bar, where the filters are a tool rather than an invitation. */
.finder--hero {
  max-width: 1040px;
  margin-inline: auto;
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 10px;
  box-shadow: 0 26px 50px -34px rgba(22, 18, 14, 0.55), 0 1px 3px rgba(22, 18, 14, 0.05);
}

.finder--bar {
  box-shadow: none;
  background: transparent;
  border-color: var(--line);
  padding: clamp(14px, 1.6vw, 20px);
}

.finder__title {
  font-family: var(--display);
  font-variation-settings: 'opsz' 48;
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-block-end: 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.finder__title span {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.finder__row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr auto;
  align-items: end;
  gap: 0;
}

.finder__field {
  min-width: 0;
  padding-inline: 16px;
  border-inline-start: 1px solid var(--line-soft);
}

.finder__field:first-child {
  border-inline-start: 0;
  padding-inline-start: 4px;
}

.finder__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 6px;
}

.finder__control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.finder__control .i {
  color: var(--amber);
  width: 16px;
  height: 16px;
}

.finder__control input,
.finder__control select {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 30px;
  border-radius: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.finder__control select {
  background-position: calc(100% - 4px) 50%, calc(100% - 0px) 50%;
  padding-inline-end: 16px;
}

.finder__control input:focus,
.finder__control select:focus {
  box-shadow: none;
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

.finder__party > summary {
  list-style: none;
  cursor: pointer;
}

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

.finder__party-value {
  font-size: var(--fs-sm);
  font-weight: 500;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
}

.finder__party-panel {
  position: absolute;
  z-index: 20;
  margin-block-start: 12px;
  inset-inline-end: var(--gutter);
  width: min(360px, calc(100vw - var(--gutter) * 2));
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 20px 44px rgba(20, 17, 13, 0.14);
  display: grid;
  gap: 14px;
}

.finder__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.finder__counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.finder__counts label {
  display: grid;
  gap: 5px;
}

.finder__counts span {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
}

.finder__note {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.6;
}

.finder__go {
  margin-inline-start: 16px;
  min-width: 52px;
  min-height: 52px;
  padding: 12px 22px;
}

@media (min-width: 1000px) {
  .finder--hero .finder__row {
    align-items: center;
  }

  .finder--hero .finder__field {
    padding-inline: 16px;
    padding-block: 4px;
  }

  .finder--hero .finder__field:first-child {
    padding-inline-start: 14px;
  }

  /* The columns are equal but the words are not: the longest value in any
     language has to sit inside its own segment rather than under the next
     divider. */
  .finder--hero .finder__row {
    grid-template-columns: 1.45fr 1fr 1.12fr 1fr 0.92fr auto;
  }

  .finder--hero .finder__control {
    min-width: 0;
  }

  .finder--hero .finder__control select,
  .finder--hero .finder__control input {
    width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
  }

  .finder--hero .finder__label {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    margin-block-end: 1px;
  }

  .finder--hero .finder__control input,
  .finder--hero .finder__control select,
  .finder--hero .finder__party-value {
    min-height: 26px;
  }

  .finder--hero .finder__go {
    width: 54px;
    height: 54px;
    min-width: 0;
    min-height: 54px;
    padding: 0;
    margin-inline-start: 10px;
    border-radius: 50%;
    align-self: center;
  }

  .finder--hero .finder__goLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .finder--hero .finder__go .i {
    width: 19px;
    height: 19px;
    color: currentColor;
  }
}

/* Only the hero pill goes to a single row at 1000px. The catalogue's filter
   bar has longer labels and no round button to save width, so it keeps
   stacking until 1100 — otherwise three of the five Spanish labels wrap. */
@media (min-width: 1000px) and (max-width: 1099px) {
  .finder--bar .finder__row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 14px 16px;
  }

  .finder--bar .finder__field {
    flex: 1 1 calc(50% - 8px);
    border-inline-start: 0;
    border-block-end: 1px solid var(--line-soft);
    padding: 0 0 10px;
  }

  .finder--bar .finder__field--wide {
    flex: 1 1 60%;
    order: -2;
  }

  .finder--bar .finder__go {
    flex: 0 0 auto;
    order: -1;
    align-self: end;
    margin-inline-start: 0;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }

  .finder--bar .finder__go::after {
    content: '';
    width: 17px;
    height: 17px;
    border: 1.6px solid currentColor;
    border-inline-start: 0;
    border-block-end: 0;
    transform: rotate(45deg) translate(-2px, 2px);
  }

  .finder--bar .finder__party-panel {
    position: static;
    width: auto;
    box-shadow: none;
    margin-block-start: 10px;
  }
}

@media (max-width: 999px) {
  .finder--hero {
    border-radius: var(--radius);
    padding: clamp(18px, 2vw, 24px);
  }

  .finder--hero .finder__go .i {
    display: none;
  }

  /* A grid, not a wrapping row: two equal columns mean the four rules line up
     with each other instead of landing wherever the wrap left them. The
     keyword field spans both, and the button is the full width of the card at
     the end of the form, where the last thing you do belongs. */
  .finder--hero .finder__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
    align-items: start;
  }

  .finder--hero .finder__field {
    flex: none;
    min-width: 0;
    border-inline-start: 0;
    border-block-end: 1px solid var(--line-soft);
    padding: 0 0 9px;
  }

  .finder--hero .finder__field--wide,
  .finder--hero .finder__party[open] {
    grid-column: 1 / -1;
  }

  .finder--hero .finder__go {
    grid-column: 1 / -1;
    order: 0;
    width: 100%;
    height: auto;
    min-height: 50px;
    margin-inline-start: 0;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
  }

  .finder--hero .finder__go::after {
    content: none;
  }

  .finder--hero .finder__goLabel {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
  }

  .finder__row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 14px 16px;
  }

  .finder__field {
    flex: 1 1 calc(50% - 8px);
    border-inline-start: 0;
    border-block-end: 1px solid var(--line-soft);
    padding: 0 0 10px;
  }

  .finder__field--wide {
    flex: 1 1 60%;
  }

  .finder__go {
    flex: 0 0 auto;
    order: -1;
    align-self: end;
    margin-inline-start: 0;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }

  /* DOM order keeps the search first; the button sits beside it. */
  .finder__field--wide {
    order: -2;
  }

  .finder__go::after {
    content: '';
    width: 17px;
    height: 17px;
    border: 1.6px solid currentColor;
    border-inline-start: 0;
    border-block-end: 0;
    transform: rotate(45deg) translate(-2px, 2px);
  }

  .finder__party-panel {
    position: static;
    width: auto;
    box-shadow: none;
    margin-block-start: 10px;
  }
}

@media (max-width: 560px) {
  .shelf {
    margin-block-start: 0;
  }

  .finder {
    border-inline: 0;
    box-shadow: none;
  }
}

.quick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 18px;
}

/* Below 700px the four shortcuts become a two-by-two grid. Centred wrapping
   put one on the first line, two on the second and one on the third; a grid
   makes them read as the set they are, and every chip is the same size. */
@media (max-width: 699px) {
  .opening .quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-block-start: 22px;
  }

  .opening .quick__label {
    grid-column: 1 / -1;
    margin-inline-end: 0;
    margin-block-end: 2px;
    text-align: center;
  }

  .opening .quick .chip {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding-inline: 10px;
  }
}

@media (max-width: 400px) {
  .opening .quick .chip {
    font-size: 0.72rem;
  }
}

.quick__label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-inline-end: 6px;
}

/* -- reassurance strip ---------------------------------------------------- */
.assure {
  border-block: 1px solid var(--line);
  background: var(--bone-2);
}

.assure__in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 26px;
  padding-block: 15px;
}

.assure__in span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-2);
}

.assure__in .i {
  color: var(--amber);
  width: 15px;
  height: 15px;
}

/* -- bands ---------------------------------------------------------------- */
.band {
  padding-block: var(--pad-band);
}

.band--tight {
  padding-block: var(--pad-tight);
}

.band--tall {
  padding-block: clamp(80px, 14vw, 180px);
}

.band--bone {
  background: var(--bone);
}

.band--routes {
  background: var(--bone-2);
}

.band--ink {
  background: var(--forest);
  color: var(--on-forest);
}

.band--ink .pack__days,
.band--ink .head {
  border-color: var(--forest-line);
}

.band--ink .kicker {
  color: var(--on-forest-2);
}

/* Accents on a deep-green band need the light clay to stay legible. */
.band--ink .pack__days i,
.band--ink .price__value,
.ground .ground__langs a:hover {
  color: var(--clay-light);
}

.band--ink .pack__meta,
.band--ink .pack__days li,
.band--ink .price__from,
.band--ink .price__unit {
  color: var(--on-forest-2);
}

.band--ink .head {
  border-block-end-color: var(--ink-line);
}

.band--ink .head__title,
.band--ink h3 {
  color: var(--on-ink);
}

.band--ink .lede {
  color: var(--on-ink-2);
}

.band--honest {
  background: var(--ink);
  color: var(--on-ink);
}

.band--honest .kicker {
  color: #9a8f7c;
}

.band--honest .head {
  border-block-end-color: var(--ink-line);
}

.band--honest .head__title {
  color: var(--on-ink);
}

.band__foot {
  margin-block-start: clamp(28px, 3vw, 44px);
  display: flex;
  justify-content: center;
}

.empty {
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
}

/* -- card grid ------------------------------------------------------------ */
.grid {
  display: grid;
  gap: clamp(18px, 2.2vw, 30px);
}

.grid--cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--packs {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

@media (max-width: 1080px) {
  .grid--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .grid--cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.card:hover {
  border-color: #cdbfa4;
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bone-2);
}

/* A stretched box only hands a definite height to the image if the <picture>
   between them takes one as well. */
.card__media picture,
.route__media picture,
.pack__media picture,
.gallery__item picture,
.tailor__demo picture {
  display: block;
  width: 100%;
  height: 100%;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s var(--ease);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__type {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.card__type .i {
  width: 13px;
  height: 13px;
  color: var(--amber);
}

.save {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.save:hover {
  background: var(--paper);
  color: var(--amber);
  transform: scale(1.06);
}

.save[aria-pressed='true'] {
  background: var(--amber);
  color: #fff;
}

.save[aria-pressed='true'] .i {
  fill: currentColor;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(16px, 1.6vw, 22px);
  gap: 10px;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
}

.card__meta i {
  font-style: normal;
  opacity: 0.5;
}

.card__title {
  font-size: 1.26rem;
  line-height: 1.22;
  letter-spacing: -0.016em;
}

.card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card__short {
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--text-2);
}

.card__incl {
  display: grid;
  gap: 5px;
  padding-block-start: 11px;
  border-block-start: 1px solid var(--line-soft);
}

.card__incl-label {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 2px;
}

.card__incl li:not(.card__incl-label) {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: 1.5;
}

.card__incl .i {
  width: 13px;
  height: 13px;
  margin-block-start: 3px;
  color: var(--olive);
}

.card__incl-more {
  font-size: var(--fs-xs);
  color: var(--muted);
  padding-inline-start: 20px;
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card__foot {
  margin-block-start: auto;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--line-soft);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.card__acts {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.cmp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  padding: 3px 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.cmp .i {
  width: 13px;
  height: 13px;
}

.cmp:hover {
  color: var(--text);
}

.cmp[aria-pressed='true'] {
  color: var(--amber-deep);
}

/* -- routes --------------------------------------------------------------- */
.routes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}

.route {
  position: relative;
  display: grid;
  gap: 9px;
  padding-block-end: 8px;
}

.route:nth-child(even) {
  margin-block-start: clamp(20px, 5vw, 62px);
}

.route__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone);
  margin-block-end: 6px;
}

.route__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.route:hover .route__media img {
  transform: scale(1.05);
}

.route__no {
  font-family: var(--display);
  font-size: 0.78rem;
  color: var(--amber);
  letter-spacing: 0.05em;
}

.route__name {
  font-family: var(--display);
  font-variation-settings: 'opsz' 60;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.route__blurb {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}

.route__go {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-2);
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}

.route__go .i {
  width: 14px;
  height: 14px;
}

.route:hover .route__go {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

@media (max-width: 860px) {
  .routes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .routes {
    grid-template-columns: minmax(0, 1fr);
  }

  .route:nth-child(even) {
    margin-block-start: 0;
  }
}

/* -- packs ---------------------------------------------------------------- */
.pack {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  border: 1px solid var(--forest-line);
  border-radius: var(--radius);
  background: var(--forest-2);
  overflow: hidden;
}

.band--bone .pack,
.page--plan .band--bone .pack {
  border-color: var(--line);
  background: var(--paper);
}

.pack__media {
  overflow: hidden;
  background: var(--ink-3);
}

.pack__media picture {
  display: block;
  height: 100%;
}

.pack__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.pack:hover .pack__media img {
  transform: scale(1.04);
}

.pack__body {
  padding: clamp(18px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pack__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 0.72rem;
  color: #9a8f7c;
  font-weight: 500;
}

.band--bone .pack__meta {
  color: var(--muted);
}

.pack__meta i {
  font-style: normal;
  opacity: 0.5;
}

.pack__title {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  color: var(--on-ink);
}

.band--bone .pack__title {
  color: var(--text);
}

.pack__short {
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--on-ink-2);
}

.band--bone .pack__short {
  color: var(--text-2);
}

.pack__days {
  display: grid;
  gap: 6px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--ink-line);
}

.band--bone .pack__days {
  border-block-start-color: var(--line-soft);
}

.pack__days li {
  display: flex;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--on-ink-2);
  line-height: 1.5;
}

.band--bone .pack__days li {
  color: var(--text-2);
}

.pack__days i {
  font-style: normal;
  font-weight: 700;
  color: var(--amber);
  white-space: nowrap;
  min-width: 4.4em;
}

.pack__foot {
  margin-block-start: auto;
  padding-block-start: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.band--ink .pack .price__value {
  color: var(--on-ink);
}

.band--ink .pack .price__from,
.band--ink .pack .price__unit {
  color: #9a8f7c;
}

.band--ink .pack .btn {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

.band--ink .pack .btn:hover {
  background: #fff;
  border-color: #fff;
}

.pack.is-target {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .pack {
    grid-template-columns: minmax(0, 1fr);
  }

  .pack__media {
    aspect-ratio: 16 / 9;
  }
}

/* -- tailor (personalised trip) ------------------------------------------- */
.tailor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.tailor__title {
  font-size: var(--fs-h2);
  max-width: 14ch;
  margin-block-end: 18px;
}

.steps {
  display: grid;
  gap: 2px;
  margin-block: 26px 30px;
}

.steps li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 13px;
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.band--ink .steps li,
.planner__idle .steps li {
  border-block-start-color: var(--line-soft);
}

.steps li:last-child {
  border-block-end: 1px solid var(--line);
}

.steps i {
  font-style: normal;
  font-family: var(--display);
  font-size: 0.8rem;
  color: var(--amber);
  min-width: 2em;
}

.tailor__demo {
  position: relative;
  margin: 0;
}

.tailor__demo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.tailor__chips {
  position: absolute;
  inset-inline: clamp(12px, 3vw, 28px);
  inset-block-end: clamp(12px, 3vw, 28px);
  display: grid;
  gap: 6px;
}

.tailor__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(10px);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
}

.tailor__chip i {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .tailor {
    grid-template-columns: minmax(0, 1fr);
  }

  .tailor__demo {
    order: -1;
  }
}

/* -- honest block --------------------------------------------------------- */
.honest {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 76px);
}

.honest__col--soon {
  padding-inline-start: clamp(0px, 4vw, 56px);
  border-inline-start: 1px solid var(--ink-line);
}

.honest__h {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #9a8f7c;
  margin-block-end: 18px;
}

.honest ul {
  display: grid;
  gap: 14px;
}

.honest li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--on-ink);
}

.honest .i {
  width: 17px;
  height: 17px;
  margin-block-start: 5px;
  color: #8fa878;
}

.honest__col--soon .i {
  color: #c98a63;
}

.honest__col--soon li {
  color: var(--on-ink-2);
}

.honest__note {
  margin-block-start: clamp(30px, 4vw, 52px);
  padding-block-start: 22px;
  border-block-start: 1px solid var(--ink-line);
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--on-ink-2);
  max-width: 88ch;
}

@media (max-width: 760px) {
  .honest {
    grid-template-columns: minmax(0, 1fr);
  }

  .honest__col--soon {
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-block-start: 26px;
    border-block-start: 1px solid var(--ink-line);
  }
}

/* -- faq ------------------------------------------------------------------ */
.faq-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 90px);
}

.faq-split__side .head__title {
  margin-block: 0 16px;
}

.faq-split__side .link {
  margin-block-start: 18px;
}

.faq-list {
  display: grid;
}

.qa {
  border-block-start: 1px solid var(--line);
}

.qa:last-child {
  border-block-end: 1px solid var(--line);
}

.qa > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 19px;
  cursor: pointer;
  font-size: var(--fs-lede);
  font-weight: 500;
  color: var(--text);
  list-style: none;
}

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

.qa > summary .i {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--amber);
  transition: transform 0.3s var(--ease);
}

.qa[open] > summary .i {
  transform: rotate(45deg);
}

.qa p {
  padding-block-end: 20px;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text-2);
  max-width: 68ch;
}

@media (max-width: 800px) {
  .faq-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ----------------------------------------------------------------- 8 hub */
.pagehead {
  padding-block: clamp(20px, 3vw, 34px) clamp(28px, 4vw, 52px);
  background: var(--bone);
}

.crumbs {
  padding-block: 9px 17px;
}

.crumbs a,
.crumbs [aria-current] {
  display: inline-block;
  padding-block: 5px;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.crumbs li + li::before {
  content: '/';
  margin-inline-end: 8px;
  opacity: 0.5;
}

.crumbs a:hover {
  color: var(--text);
  box-shadow: inset 0 -1px 0 var(--line);
}

.pagehead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: end;
}

.pagehead__title {
  font-size: var(--fs-h1);
  max-width: 15ch;
}

@media (max-width: 800px) {
  .pagehead__grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }
}

.filters {
  position: relative;
  padding-block-end: clamp(14px, 2vw, 22px);
  background: var(--bone);
}

.page--hub .band--tight,
.page--plan .band--tight,
.page--saved .band--tight,
.page--compare .band--tight {
  padding-block-start: clamp(18px, 2vw, 28px);
}

.applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 4px 12px;
}

.applied__label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 16px;
  border-block-start: 1px solid var(--line);
}

.toolbar__count {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}

.toolbar__count i {
  font-style: normal;
  opacity: 0.4;
  margin-inline: 4px;
}

.toolbar__sort {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.toolbar__sort select {
  min-height: 38px;
  width: auto;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.blank {
  padding: clamp(40px, 7vw, 90px) clamp(20px, 4vw, 48px);
  text-align: center;
  border: 1px solid var(--line);
  background: var(--paper);
  display: grid;
  justify-items: center;
  gap: 14px;
}

.blank h1,
.blank h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.blank p {
  color: var(--text-2);
  max-width: 52ch;
}

.blank--lg {
  border: 0;
  background: none;
}

/* --------------------------------------------------------------- 9 offer */
.offerhead {
  padding-block: clamp(6px, 1vw, 12px) clamp(24px, 3vw, 40px);
}

.offerhead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
}

.offerhead__title {
  font-size: var(--fs-h1);
  max-width: 17ch;
}

.offerhead__side {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.offerhead__price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  transition: border-color 0.2s var(--ease);
}

.offerhead__price:hover {
  border-color: var(--muted);
}

.offerhead__price span,
.offerhead__price small {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.offerhead__price strong {
  font-family: var(--display);
  font-variation-settings: 'opsz' 60;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

@media (max-width: 800px) {
  .offerhead__grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }
}

/* One lead frame and two supporting frames — the shape this catalogue has.
   Other counts fall back to an even row. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 8px;
}

.gallery[data-count='1'] {
  grid-template-columns: minmax(0, 1fr);
}

.gallery[data-count='2'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery[data-count='4'],
.gallery[data-count='5'] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery__item {
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--bone-2);
  border-radius: var(--radius);
  cursor: zoom-in;
  overflow: hidden;
  min-height: 0;
}

.gallery__item:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 3 / 2;
}

.gallery[data-count='1'] .gallery__item:first-child,
.gallery[data-count='2'] .gallery__item {
  grid-column: auto;
  grid-row: auto;
  aspect-ratio: 3 / 2;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.gallery__item:hover img {
  transform: scale(1.04);
}

@media (max-width: 760px) {
  .gallery {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .gallery::-webkit-scrollbar {
    display: none;
  }

  .gallery__item {
    flex: 0 0 82%;
    scroll-snap-align: center;
    aspect-ratio: 3 / 2;
  }

  .gallery__item:first-child {
    flex-basis: 92%;
  }
}

.offerbody {
  padding-block: clamp(30px, 4vw, 58px) var(--pad-band);
}

.offerbody__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 362px;
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

@media (max-width: 980px) {
  .offerbody__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-block-end: clamp(26px, 3vw, 42px);
}

.facts > div {
  background: var(--paper);
  padding: 15px 17px;
}

.facts dt {
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 6px;
}

.facts dd {
  font-family: var(--display);
  font-variation-settings: 'opsz' 40;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.facts__soft {
  font-family: var(--sans) !important;
  font-size: var(--fs-sm) !important;
  font-weight: 400 !important;
  color: var(--text-2);
}

.block {
  padding-block-start: clamp(26px, 3vw, 44px);
  margin-block-start: clamp(26px, 3vw, 44px);
  border-block-start: 1px solid var(--line);
}

.block:first-of-type {
  border-block-start: 0;
  margin-block-start: 0;
  padding-block-start: 0;
}

.block__h {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  margin-block-end: 16px;
}

.marks {
  display: grid;
  gap: 11px;
}

.marks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}

.marks .i {
  width: 15px;
  height: 15px;
  margin-block-start: 4px;
  color: var(--olive);
  flex: none;
}

.inout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 46px);
}

.inout__col h3 {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 13px;
}

.inout ul {
  display: grid;
  gap: 9px;
}

.inout li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-2);
}

.inout .i {
  width: 14px;
  height: 14px;
  margin-block-start: 4px;
  flex: none;
  color: var(--olive);
}

.inout__col--no .i {
  color: #a8695a;
}

@media (max-width: 620px) {
  .inout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shape {
  display: grid;
  gap: 0;
}

.shape li {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 20px;
  padding-block: 18px;
  border-block-start: 1px solid var(--line-soft);
}

.shape li:first-child {
  border-block-start: 0;
}

.shape__time {
  font-family: var(--display);
  font-variation-settings: 'opsz' 40;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--amber-deep);
}

.shape h3 {
  font-size: 1.08rem;
  margin-block-end: 5px;
}

.shape p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 58ch;
}

@media (max-width: 560px) {
  .shape li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

.note {
  background: var(--bone-2);
  border: 1px solid var(--line);
  padding: clamp(18px, 2.4vw, 28px);
  border-block-start-width: 1px;
}

.note .block__h {
  font-size: 1.12rem;
}

.note p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  max-width: 62ch;
}

.rail {
  position: sticky;
  inset-block-start: calc(var(--head) + 18px);
  display: grid;
  gap: 12px;
}

.rail__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 2vw, 26px);
  display: grid;
  gap: 13px;
}

.rail__tag {
  display: inline-flex;
  align-self: start;
  padding: 4px 10px;
  background: var(--amber-wash);
  color: var(--amber-deep);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rail__alt {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-block-start: -8px;
}

.rail__form {
  display: grid;
  gap: 12px;
  padding-block-start: 13px;
  border-block-start: 1px solid var(--line-soft);
}

.rail__total {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--amber-deep);
}

.rail__note {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}

.rail__policy {
  display: grid;
  gap: 8px;
  padding-block-start: 13px;
  border-block-start: 1px solid var(--line-soft);
}

.rail__policy li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.rail__policy .i {
  width: 13px;
  height: 13px;
  margin-block-start: 3px;
  color: var(--olive);
}

.rail__acts {
  display: grid;
  gap: 8px;
}

.rail__acts .btn[aria-pressed='true'] {
  border-color: var(--amber);
  color: var(--amber-deep);
  background: var(--amber-wash);
}

.rail__acts .btn[aria-pressed='true'] .i {
  fill: currentColor;
}

.dock {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px var(--gutter);
  padding-block-end: max(11px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--line);
}

@media (min-width: 981px) {
  .dock {
    display: none !important;
  }
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgba(15, 12, 9, 0.96);
  padding: 14px;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--on-ink-2);
  font-size: var(--fs-xs);
}

.lightbox__bar button {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(242, 236, 224, 0.3);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--on-ink);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.lightbox__bar button:hover {
  background: rgba(242, 236, 224, 0.12);
}

.lightbox__stage {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  background: none;
}

/* ------------------------------------------------------------- 10 planner */
.planner {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: start;
}

@media (max-width: 980px) {
  .planner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.planner__form {
  position: sticky;
  inset-block-start: calc(var(--head) + 18px);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(18px, 2vw, 26px);
  display: grid;
  gap: 20px;
}

@media (max-width: 980px) {
  .planner__form {
    position: static;
  }
}

.pgroup {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.pgroup__legend {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text);
  padding: 0;
  margin-block-end: 2px;
}

.pgroup__legend i {
  font-style: normal;
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0;
  color: var(--amber);
}

.pgroup__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.pgroup__hint {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-start: 4px;
}

.picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.picks--two {
  grid-template-columns: minmax(0, 1fr);
}

.pick {
  position: relative;
  display: block;
}

.pick input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.pick span {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.pick span:hover {
  border-color: var(--line-strong, var(--muted));
}

.pick span .i {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.6;
}

/* Chosen is the accent, not a black block: four solid black tiles were the
   heaviest thing on the page and they are only a filter. */
.pick input:checked + span {
  border-color: var(--clay);
  background: color-mix(in srgb, var(--clay) 9%, var(--paper));
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--clay);
}

.pick input:checked + span .i {
  opacity: 1;
  color: var(--clay);
}

.pick input:focus-visible + span {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.formerror {
  font-size: var(--fs-xs);
  color: #9a3c22;
  min-height: 1em;
}

.formerror:empty {
  display: none;
}

.planner__board {
  min-height: 300px;
}

.planner__idle {
  border: 1px dashed var(--line);
  background: var(--paper);
  padding: clamp(24px, 4vw, 52px);
}

.planner__idle-title {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  max-width: 16ch;
}

.plan-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  background: var(--ink);
  color: var(--on-ink);
  margin-block-end: 16px;
}

.plan-summary__totals {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.plan-summary__totals > div {
  display: grid;
  gap: 2px;
}

.plan-summary__totals dt,
.plan-summary__totals span:first-child {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a8f7c;
}

.plan-summary__totals strong {
  font-family: var(--display);
  font-variation-settings: 'opsz' 50;
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.plan-summary__totals .is-over {
  color: #e4a17c;
}

.plan-summary__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plan-summary__acts .btn {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

.plan-summary__acts .btn--outline-light {
  background: transparent;
  color: var(--on-ink);
  border-color: rgba(242, 236, 224, 0.4);
}

.plan-day {
  border: 1px solid var(--line);
  background: var(--paper);
  margin-block-end: 12px;
}

.plan-day__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-block-end: 1px solid var(--line-soft);
  background: var(--bone-2);
}

.plan-day__no {
  font-family: var(--display);
  font-variation-settings: 'opsz' 40;
  font-size: 1.08rem;
  font-weight: 500;
}

.plan-day__date {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.plan-day__items {
  display: grid;
}

.plan-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-block-start: 1px solid var(--line-soft);
}

.plan-item:first-child {
  border-block-start: 0;
}

.plan-item img {
  width: 92px;
  height: 62px;
  object-fit: cover;
}

.plan-item__meta {
  font-size: 0.72rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plan-item h4 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 40;
  font-size: 1.04rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin-block: 2px;
}

.plan-item__price {
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.plan-item__drop {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-decoration: underline;
  padding: 4px;
}

.plan-item__drop:hover {
  color: #9a3c22;
}

.plan-day__empty {
  padding: 18px;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-style: italic;
}

.plan-day__add {
  padding: 12px 18px;
  border-block-start: 1px solid var(--line-soft);
}

.plan-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  padding: 14px 18px;
  background: var(--bone-2);
  border-block-start: 1px solid var(--line-soft);
}

.plan-pick {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  text-align: start;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.plan-pick:hover:not(:disabled) {
  border-color: var(--ink);
}

.plan-pick:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.plan-pick b {
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
}

.plan-pick span {
  font-size: 0.7rem;
  color: var(--muted);
}

@media (max-width: 560px) {
  .plan-item {
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-areas: 'img body' 'act act';
  }

  .plan-item img {
    width: 68px;
    height: 52px;
    grid-area: img;
  }

  .plan-item > div:nth-child(2) {
    grid-area: body;
  }

  .plan-item__side {
    grid-area: act;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* -- enquiry ---------------------------------------------------------- */
.enquiry {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: clamp(20px, 2.6vw, 32px);
  margin-block-end: 16px;
  display: grid;
  gap: 14px;
}

.enquiry__tag {
  justify-self: start;
  padding: 5px 12px;
  background: var(--amber-wash);
  color: var(--amber-deep);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.enquiry__title {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
}

.enquiry__intro {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
  max-width: 62ch;
}

.enquiry__form {
  display: grid;
  gap: 14px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--line-soft);
}

.enquiry__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 720px) {
  .enquiry__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.pick--consent span {
  align-items: flex-start;
  line-height: 1.55;
  min-height: 0;
  padding: 13px 15px;
  font-size: var(--fs-xs);
}

.pick--consent input:checked + span {
  background: var(--paper);
  color: var(--text);
  border-color: var(--olive);
}

.pick--consent span::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  margin-block-start: 1px;
  border: 1px solid var(--muted);
  border-radius: 2px;
}

.pick--consent input:checked + span::before {
  background: var(--olive);
  border-color: var(--olive);
  box-shadow: inset 0 0 0 2px var(--paper);
}

.enquiry__estimate {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--amber-deep);
}

.enquiry__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/* -- ladder: numbered steps on a dark band ------------------------------- */
.ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  counter-reset: ladder;
}

.ladder__step {
  display: grid;
  gap: 10px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--ink-line);
}

.band--ink .ladder__step {
  border-block-start-color: var(--forest-line);
}

.ladder__no {
  font-style: normal;
  font-family: var(--display);
  font-variation-settings: 'opsz' 40;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--clay-light);
}

.ladder__step h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--on-ink);
  margin-block-end: 6px;
}

.ladder__step p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--on-ink-2);
}

.band--ink .ladder__step h3 {
  color: var(--on-forest);
}

.band--ink .ladder__step p {
  color: var(--on-forest-2);
}

/* -- the practical detail list ------------------------------------------- */
.detail {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}

.detail > div {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 18px;
  padding: 13px clamp(14px, 2vw, 20px);
  border-block-start: 1px solid var(--line-soft);
}

.detail > div:first-child {
  border-block-start: 0;
}

.detail dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}

.detail dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-2);
}

/* A fact nobody has given us says so, quietly but unmistakably. */
.facts__pending {
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 620px) {
  .detail > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

.gallery__note {
  margin-block-start: 10px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* -- contact ------------------------------------------------------------- */
.contact-form {
  display: grid;
  gap: 14px;
  margin-block-start: 18px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--line);
}

.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 12px;
}

.contact-form .btn {
  justify-self: start;
}

/* ------------------------------------------------- 11 saved, compare, tray */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
}

.compare-table th,
.compare-table td {
  border: 1px solid var(--line-soft);
  padding: 14px 16px;
  text-align: start;
  vertical-align: top;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.compare-table thead th {
  background: var(--bone-2);
  color: var(--text);
  width: 25%;
}

.compare-table tbody th {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bone);
  white-space: nowrap;
}

.compare-head img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-block-end: 10px;
}

.compare-head h2 {
  font-size: 1.1rem;
  margin-block-end: 8px;
}

.compare-table ul {
  display: grid;
  gap: 5px;
}

.compare-table li {
  font-size: var(--fs-xs);
  line-height: 1.5;
  padding-inline-start: 14px;
  position: relative;
}

.compare-table li::before {
  content: '—';
  position: absolute;
  inset-inline-start: 0;
  color: var(--muted);
}

.compare-scroll {
  overflow-x: auto;
}

.tray {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 48;
  background: var(--ink);
  color: var(--on-ink);
  animation: tray-in 0.28s var(--ease);
}

@keyframes tray-in {
  from {
    transform: translateY(100%);
  }
}

.tray__in {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 12px;
  padding-block-end: max(12px, env(safe-area-inset-bottom));
}

.tray__label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a8f7c;
}

.tray__items {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  flex: 1;
}

.tray__items li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
}

.tray__items button {
  border: 0;
  background: none;
  color: #b3a892;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
}

.tray__items button:hover {
  color: var(--on-ink);
}

.tray__acts {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tray__acts .btn {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

.tray__acts .link {
  color: var(--on-ink-2);
  box-shadow: none;
  text-decoration: underline;
}

.tray__acts .link:hover {
  color: var(--on-ink);
}

body:has(.tray:not([hidden])) .dock {
  inset-block-end: 68px;
}

/* A phone shows one summary line, not a stack of chips over the content. */
@media (max-width: 760px) {
  .tray__in {
    flex-wrap: nowrap;
    gap: 10px;
  }

  /* One summary line instead of a stack of chips that swallows the screen. */
  .tray__items {
    display: block;
    flex: 1;
    min-width: 0;
    font-size: var(--fs-xs);
    color: var(--on-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tray__items li {
    display: inline;
    border: 0;
    padding: 0;
  }

  .tray__items li + li::before {
    content: ', ';
  }

  .tray__items button {
    display: none;
  }

  .tray__label {
    display: none;
  }

  .tray__acts {
    flex: none;
    gap: 10px;
  }
}

/* ----------------------------------------------- 12 article, footer, toast */
.article {
  max-width: 68ch;
}

.article .content-chapter,
.article .finished-content {
  padding-block-start: clamp(26px, 3vw, 44px);
  margin-block-start: clamp(26px, 3vw, 44px);
  border-block-start: 1px solid var(--line);
}

.article .content-chapter:first-child,
.article > section:first-child {
  border-block-start: 0;
  margin-block-start: 0;
  padding-block-start: 0;
}

.article h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  margin-block-end: 14px;
}

.article h3 {
  font-size: 1.12rem;
  margin-block: 22px 8px;
}

.article p {
  font-size: var(--fs-lede);
  line-height: 1.8;
  color: var(--text-2);
  margin-block-end: 15px;
}

.article ul,
.article ol {
  display: grid;
  gap: 9px;
  margin-block-end: 18px;
}

.article li {
  position: relative;
  padding-inline-start: 22px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}

.article li::before {
  content: '—';
  position: absolute;
  inset-inline-start: 0;
  color: var(--amber);
}

.article .eyebrow {
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 10px;
}

.article .note-card {
  background: var(--bone-2);
  border: 1px solid var(--line);
  padding: clamp(16px, 2vw, 24px);
  margin-block: 22px;
}

.article .numeral {
  font-family: var(--display);
  color: var(--amber);
  margin-inline-end: 8px;
}

.article .contact-options {
  display: grid;
  gap: 10px;
  margin-block: 20px;
}

.article .page-next {
  margin-block-start: 30px;
}

.article .text-link {
  box-shadow: inset 0 -1px 0 var(--amber);
  font-weight: 600;
  color: var(--text);
}

.ground {
  background: var(--forest);
  color: var(--on-forest);
  padding-block: clamp(48px, 6vw, 84px) 26px;
}

.ground__word,
.ground__grid a:hover {
  color: #f2f7ef;
}

.ground__h,
.ground__legal {
  color: var(--on-forest-2);
}

.ground__grid li,
.ground__grid a,
.ground__langs a {
  color: var(--on-forest-2);
}

.ground__word {
  border-block-end-color: var(--forest-line);
}

.ground__langs,
.ground__legal {
  border-block-start-color: var(--forest-line);
}

.ground__word {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144;
  font-size: clamp(2.4rem, 7vw, 5.4rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--bone);
  padding-block-end: clamp(34px, 5vw, 62px);
  margin-block-end: clamp(30px, 4vw, 52px);
  border-block-end: 1px solid var(--ink-line);
  max-width: 16ch;
}

.ground__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
}

.ground__h {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a8f7c;
  margin-block-end: 15px;
}

.ground__grid ul {
  display: grid;
  gap: 2px;
}

.ground__grid a,
.ground__langs a {
  display: inline-block;
  padding-block: 4px;
}

.ground__grid li,
.ground__grid a {
  font-size: var(--fs-sm);
  color: var(--on-ink-2);
}

.ground__grid a:hover {
  color: var(--on-ink);
  box-shadow: inset 0 -1px 0 var(--amber);
}

.ground__soft {
  line-height: 1.6;
}

.ground__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 18px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--ink-line);
}

.ground__langs a {
  font-size: var(--fs-xs);
  color: var(--on-ink-2);
}

.ground__langs a:hover {
  color: var(--on-ink);
}

.ground__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 22px;
  margin-block-start: clamp(34px, 4vw, 56px);
  padding-block-start: 20px;
  border-block-start: 1px solid var(--ink-line);
  font-size: var(--fs-xs);
  color: #8d8271;
}

@media (max-width: 860px) {
  .ground__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.toast {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-start: 50%;
  transform: translate(-50%, 18px);
  z-index: 140;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
  max-width: min(92vw, 460px);
  text-align: center;
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* ------------------------------------------------- 14b the rest of the motion
   Everything below is transform, opacity or shadow, and every bit of it is
   switched off wholesale by the reduced-motion block further down. */

/* The masthead earns a shadow once the page has moved under it, so it reads as
   a layer rather than as part of the page. Nothing moves: a height change here
   would shove the whole document. */
.masthead {
  transition: box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}

.masthead.is-scrolled {
  background: color-mix(in srgb, var(--bone) 94%, transparent);
  box-shadow: 0 14px 30px -26px rgba(20, 17, 13, 0.55);
}

/* Press feedback. A control that answers the finger by a hair feels connected;
   the same rule covers keyboard activation. */
.btn:active,
.chip:active,
.tool:active,
.burger:active,
.drawer__close:active,
.save:active,
.finder__go:active {
  transform: scale(0.97);
}

.btn,
.chip,
.tool,
.burger,
.drawer__close,
.save {
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease), transform var(--t-fast) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

/* Saving something should feel like something. */
.save[aria-pressed='true'] .i {
  animation: save-pop var(--t-slow) var(--ease-out);
}

@keyframes save-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.28);
  }
  100% {
    transform: scale(1);
  }
}

/* An arrow that leans the way it is going. */
.link .i,
.gateway__go .i,
.card__go .i {
  transition: transform var(--t-base) var(--ease);
}

.link:hover .i,
.gateway:hover .gateway__go .i,
.card:hover .card__go .i {
  transform: translateX(4px);
}

/* The answer unrolls instead of appearing. Chrome and Edge animate this; the
   rest open the panel the way they always did. */
.qa::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--t-slow) var(--ease), content-visibility var(--t-slow) allow-discrete;
}

.qa[open]::details-content {
  block-size: auto;
}

/* The menu's rows arrive a beat after the panel, in order. Capped at eight, so
   a long list never turns into a queue. */
.drawer__item,
.drawer__subs,
.drawer__foot > * {
  animation: menu-row var(--t-slow) var(--ease-out) both;
}

@keyframes menu-row {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.drawer__nav > *:nth-child(1) { animation-delay: 40ms; }
.drawer__nav > *:nth-child(2) { animation-delay: 75ms; }
.drawer__nav > *:nth-child(3) { animation-delay: 110ms; }
.drawer__nav > *:nth-child(4) { animation-delay: 145ms; }
.drawer__nav > *:nth-child(5) { animation-delay: 180ms; }
.drawer__nav > *:nth-child(6) { animation-delay: 215ms; }
.drawer__nav > *:nth-child(n + 7) { animation-delay: 250ms; }
.drawer__foot > *:nth-child(1) { animation-delay: 220ms; }
.drawer__foot > *:nth-child(2) { animation-delay: 255ms; }
.drawer__foot > *:nth-child(3) { animation-delay: 290ms; }

/* A pack or a card lifting under the pointer, matched on the experience rail
   and the signature packs, which had the zoom but not the lift. */
.pack,
.rail__card {
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.pack:hover,
.rail__card:hover {
  transform: translateY(-3px);
}

/* The chooser's round button turns a little as it is pressed. */
.finder__go .i {
  transition: transform var(--t-base) var(--ease);
}

.finder__go:hover .i {
  transform: scale(1.08);
}

/* ------------------------------------- 14 motion, print, forced colours */
/* ------------------------------------------------------------ 14a reveals
   The hiding rule only applies once motion.js has said it is running, so a
   blocked or failed module leaves every section visible. */
.reveals .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}

.reveals .reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* A control that has been pressed and is waiting on the server. */
.is-busy {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.is-busy::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .card:hover,
  .btn:hover,
  .gateway:hover {
    transform: none;
  }

  .reveals .reveal {
    opacity: 1;
    transform: none;
  }

  .is-busy::after {
    animation: none;
  }

  .card:hover .card__media img,
  .route:hover .route__media img,
  .pack:hover .pack__media img,
  .gallery__item:hover img {
    transform: none;
  }

  .pack:hover,
  .rail__card:hover,
  .btn:active,
  .chip:active,
  .tool:active,
  .burger:active,
  .drawer__close:active,
  .save:active,
  .finder__go:active,
  .finder__go:hover .i,
  .link:hover .i,
  .gateway:hover .gateway__go .i,
  .card:hover .card__go .i {
    transform: none;
  }

  .save[aria-pressed='true'] .i,
  .drawer__item,
  .drawer__subs,
  .drawer__foot > * {
    animation: none;
  }

  .masthead.is-scrolled {
    box-shadow: none;
  }
}

@media (forced-colors: active) {
  .card,
  .btn,
  .chip,
  .finder,
  .rail__card {
    border: 1px solid CanvasText;
  }

  .save[aria-pressed='true'],
  .chip[aria-pressed='true'],
  .chip.is-on {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

@media print {
  .masthead,
  .drawer,
  .tray,
  .dock,
  .toast,
  .notice,
  .skip,
  .rail__acts,
  .finder,
  .quick {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .band,
  .band--ink,
  .band--honest {
    background: #fff !important;
    color: #000 !important;
    padding-block: 18px;
  }
}