/* Recollection
   Glass surfaces are a web approximation (backdrop-filter + layered borders),
   not Apple's official Liquid Glass, which only exists on Apple platforms. */

:root {
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Theme: light paper with dark ink. Warm and dark moments come from photos
     (the home hero, guide cards, a creator's cover) and the footer. */
  --paper: #f4f4f2;
  --ink: #1b1b1a;
  --ink-muted: #5c5c5a;
  --text: #f8f7f4;
  --text-muted: rgb(248 247 244 / 0.84);

  /* The page's single accent, reserved for the verified-creator seal. */
  --verified: #4c9bff;

  /* Warm-tinted shadow, pulled from the hero photo instead of pure black. */
  --shadow-rgb: 34 18 4;

  /* A faint warm-dark tint under the white sheen keeps glass labels legible over bright sky. */
  --glass-bg: rgb(34 18 4 / 0.16);
  --glass-border: rgb(255 255 255 / 0.28);
  --glass-highlight: rgb(255 255 255 / 0.4);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-height: 72px;
  --gutter: clamp(16px, 3vw, 40px);

  /* Shape rule: interactive elements are full pills or circles, cards are 24px. */
  --radius-pill: 999px;
  --radius-card: 24px;

  /* The conversion colour: a warm sunset, used only on buttons that buy or join. */
  --buy-gradient: linear-gradient(135deg, #ff9550 0%, #f25a35 50%, #d93b5f 100%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

/* ---------- Scroll sentinel ---------- */

.scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 12px;
  pointer-events: none;
}

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  padding: 12px var(--gutter);
}

.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  height: var(--nav-height);
  margin: 0 auto;
  padding: 0 14px 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  transition:
    background-color 400ms var(--ease-out),
    border-color 400ms var(--ease-out),
    box-shadow 400ms var(--ease-out),
    backdrop-filter 400ms var(--ease-out),
    -webkit-backdrop-filter 400ms var(--ease-out);
}

/* Scrolled: a discreet glass bar. Tinted just enough to see the edge,
   still clear enough for the photo to read through. */
.nav.is-scrolled .nav__inner {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.2);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    0 10px 30px -12px rgb(var(--shadow-rgb) / 0.35);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

/* Over the light sections the same glass flips to a frosted-white bar with dark ink. */
.nav {
  transition: color 400ms var(--ease-out);
}

.nav.nav--on-light {
  color: var(--ink);
}

.nav.nav--on-light.is-scrolled .nav__inner {
  background: rgb(255 255 255 / 0.6);
  border-color: rgb(0 0 0 / 0.08);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 10px 30px -14px rgb(0 0 0 / 0.18);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

/* The globe (placeholder mark) and the name. Only the globe turns on hover. */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  border-radius: var(--radius-pill);
  font-size: 28px;
}

.nav__logo i {
  transition: transform 300ms var(--ease-out);
}

.nav__logo:hover i {
  transform: rotate(-12deg);
}

.nav__wordmark {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* "Travel Club": a quiet text link, not a button. */
.nav__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  opacity: 0.85;
  transition:
    opacity 250ms var(--ease-out),
    background-color 250ms var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  opacity: 1;
  background-color: rgb(255 255 255 / 0.14);
}

.nav--on-light .nav__link:hover,
.nav--on-light .nav__link[aria-current="page"] {
  background-color: rgb(0 0 0 / 0.06);
}

/* ---------- Glass button (nav CTA) ---------- */

.btn-glass {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.04)),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 rgb(255 255 255 / 0.08),
    0 6px 20px -8px rgb(var(--shadow-rgb) / 0.45);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.35);
  transition:
    transform 250ms var(--ease-out),
    background-color 250ms var(--ease-out),
    border-color 250ms var(--ease-out);
}

.btn-glass:hover {
  background-color: rgb(255 255 255 / 0.2);
  border-color: rgb(255 255 255 / 0.4);
}

.btn-glass:active {
  transform: scale(0.98);
}

.nav--on-light .btn-glass {
  border-color: rgb(0 0 0 / 0.1);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.7));
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 6px 18px -10px rgb(0 0 0 / 0.25);
  text-shadow: none;
}

.nav--on-light .btn-glass:hover {
  background-color: #ffffff;
  border-color: rgb(0 0 0 / 0.16);
}

/* ---------- Language switcher ---------- */

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

.lang {
  position: relative;
}

/* Nav utilities (search, language): quiet icons, not button shapes, so they
   read as tools next to the CTA instead of competing with it. The hit area
   stays 44px for touch. */
.nav__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font-size: 22px;
  opacity: 0.85;
  cursor: pointer;
  transition:
    opacity 250ms var(--ease-out),
    background-color 250ms var(--ease-out);
}

.nav__icon:hover,
.nav__icon[aria-expanded="true"] {
  opacity: 1;
  background-color: rgb(255 255 255 / 0.14);
}

.nav--on-light .nav__icon:hover,
.nav--on-light .nav__icon[aria-expanded="true"] {
  background-color: rgb(0 0 0 / 0.06);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Frosted-white menu with dark ink: legible over the photo and the light page alike. */
.lang__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 18px 40px -16px rgb(0 0 0 / 0.3);
  color: var(--ink);
  transform-origin: top right;
}

.lang__menu[hidden] {
  display: none;
}

.lang__menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.lang__menu button:hover,
.lang__menu button:focus-visible {
  outline: none;
  background: rgb(0 0 0 / 0.06);
}

.lang__menu button i {
  font-size: 16px;
  opacity: 0;
}

.lang__menu button[aria-checked="true"] {
  font-weight: 500;
}

.lang__menu button[aria-checked="true"] i {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .lang__menu:not([hidden]) {
    animation: menu-in 220ms var(--ease-out);
  }
}

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

/* ---------- Hero ---------- */

/* The page's one warm photo, full screen. The copy is centred high in the open
   water; the friends stand lower in the frame, below it. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: start;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  /* The photo's sunset tones, so there is no flash while it loads. */
  background: linear-gradient(to bottom, #e9a04a 0%, #d27f2c 75%, var(--paper) 100%);
  color: var(--text);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

/* Scrims, top of the stack first: a dissolve into the paper at the base, a dark
   band at the top for the nav, and a soft warm pool behind the copy only, so the
   friends below stay clean. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--paper) 0%, rgb(244 244 242 / 0.55) 7%, rgb(244 244 242 / 0) 20%),
    linear-gradient(to bottom, rgb(var(--shadow-rgb) / 0.32) 0%, transparent 24%),
    radial-gradient(ellipse 60% 40% at 50% 30%, rgb(var(--shadow-rgb) / 0.42), transparent 100%);
}

.hero__light-marker {
  position: absolute;
  left: 0;
  bottom: 16%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.hero__content {
  display: grid;
  justify-items: center;
  justify-self: center;
  gap: 24px;
  width: 100%;
  max-width: 1280px;
  padding: calc(var(--nav-height) + 24px + clamp(16px, 5vh, 64px)) var(--gutter) 0;
  text-align: center;
}

.hero__title {
  /* Set in capitals (the copy itself stays in sentence case for screen
     readers). Wide enough for two balanced lines on desktop in every language;
     capitals need less negative tracking than lowercase. */
  max-width: 15em;
  margin: 0;
  font-size: clamp(2.25rem, 5.6vw, 5.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgb(var(--shadow-rgb) / 0.3);
}

.hero__lede {
  max-width: 46ch;
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  text-shadow: 0 1px 14px rgb(var(--shadow-rgb) / 0.55);
}

/* ---------- 3D button (primary CTA) ---------- */

.btn-3d {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  gap: 10px;
  padding: 19px 36px;
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #ffffff 0%, #f6f5f2 55%, #e9e7e2 100%);
  color: #1b1b1a;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -2px 4px rgb(60 40 10 / 0.08),
    0 1px 2px rgb(0 0 0 / 0.08),
    0 10px 22px -8px rgb(var(--shadow-rgb) / 0.22),
    0 26px 50px -18px rgb(var(--shadow-rgb) / 0.25);
  transition:
    transform 250ms var(--ease-out),
    box-shadow 250ms var(--ease-out);
}

/* Soft sheen across the upper half, like light on a rounded surface. */
.btn-3d::before {
  content: "";
  position: absolute;
  inset: 1px 1px 50%;
  border-radius: var(--radius-pill) var(--radius-pill) 40% 40% / var(--radius-pill) var(--radius-pill) 100% 100%;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0));
  pointer-events: none;
}

.btn-3d i {
  font-size: 19px;
}

.btn-3d:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -2px 4px rgb(60 40 10 / 0.08),
    0 2px 4px rgb(0 0 0 / 0.08),
    0 16px 28px -10px rgb(var(--shadow-rgb) / 0.28),
    0 34px 64px -20px rgb(var(--shadow-rgb) / 0.3);
}

.btn-3d:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -1px 2px rgb(60 40 10 / 0.12),
    0 1px 1px rgb(0 0 0 / 0.1),
    0 4px 10px -4px rgb(var(--shadow-rgb) / 0.25);
}

.btn-3d:focus-visible {
  outline-color: #1b1b1a;
}

/* ---------- Guides: editorial intro + draggable gallery ---------- */

.guides {
  /* Where content starts on the left: the page gutter, or the 1400px column edge on wide screens. */
  --rail-start: max(var(--gutter), calc((100vw - 1400px) / 2));
  padding: 96px 0 56px;
  color: var(--ink);
}

/* Desktop: intro and cards share one horizontal strip that runs edge to edge,
   so dragging slides the intro away and leaves only the guides on screen.
   Starting the strip at the viewport edge (padding, not margin) also means the
   card glows are never clipped by a visible line. */
.guides__rail {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 40px var(--gutter) 104px var(--rail-start);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-start) var(--gutter);
  scrollbar-width: none;
  cursor: grab;
}

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

/* Narrow enough that the cards start close to it and, on desktop, a fourth card
   shows cut off at the right edge: the cue that the row goes on. */
.guides__intro {
  flex: 0 0 clamp(260px, 21vw, 340px);
  display: grid;
  gap: 20px;
  align-content: center;
  padding-right: clamp(8px, 1.5vw, 24px);
  scroll-snap-align: start;
}

.guides__title {
  margin: 0;
  font-size: clamp(2.75rem, 4.8vw, 4.75rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.guides__lede {
  max-width: 30ch;
  margin: 0;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.5;
}

/* "Verified guides": the same seal as on a guide's page. */
.guides__verified {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 7px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 500;
}

.guides__verified i {
  color: var(--ink);
  font-size: 18px;
}

/* Arrows live under the strip rather than in the intro, so they stay put once
   the intro has scrolled away. The negative margin tucks them into the space
   reserved below the cards for their glows; that space belongs to the
   scrolling strip, so the arrows are lifted above it explicitly (Safari paints
   scroll containers over later siblings, which swallowed their clicks). */
.guides__controls {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  width: fit-content;
  margin: -48px 0 0 var(--rail-start);
}

/* Nothing to scroll (every item fits on screen): the arrows step aside. */
.guides__controls:not(:has(button:enabled)) {
  visibility: hidden;
}

.btn-round {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #ffffff, #f6f6f4);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgb(0 0 0 / 0.06),
    0 8px 20px -10px rgb(0 0 0 / 0.25);
  transition:
    transform 250ms var(--ease-out),
    opacity 250ms var(--ease-out),
    box-shadow 250ms var(--ease-out);
}

.btn-round:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 4px rgb(0 0 0 / 0.06),
    0 12px 26px -10px rgb(0 0 0 / 0.3);
}

.btn-round:active:not(:disabled) {
  transform: scale(0.96);
}

.btn-round:disabled {
  opacity: 0.35;
  cursor: default;
}

.btn-round:focus-visible {
  outline-color: var(--ink);
}

/* On desktop the gallery is just the row of cards inside the strip; below
   1024px it becomes the scroller itself (see the tablet block). The strip runs
   off the right edge on purpose: a cut-off card is the cue to drag. */
.gallery {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guides__rail.is-dragging,
.gallery.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.gallery > li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* ---------- Guide card ---------- */

/* The coloured glow is a box-shadow tinted with the card's own --tone. A blurred
   pseudo-element looked the same but rendered a visible layer box inside the
   scroll container. */
.guide-card {
  position: relative;
  width: clamp(260px, 21vw, 320px);
  aspect-ratio: 5 / 7;
  border-radius: var(--radius-card);
  color: #ffffff;
  box-shadow:
    0 2px 6px rgb(var(--tone) / 0.25),
    0 30px 56px -18px rgb(var(--tone) / 0.6),
    0 50px 80px -40px rgb(var(--tone) / 0.5);
  transition:
    transform 500ms var(--ease-out),
    box-shadow 500ms var(--ease-out);
}

/* The frame is the stacking context: photo, frost and veil sit at z -1 so the
   copy (static, in flow) paints above them, and the CTA's ::after can stretch
   over the whole frame to make the card one big link. */
.guide-card__frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 20px 20px;
  overflow: hidden;
  isolation: isolate;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}

.guide-card__frame > img,
.guide-card__frost,
.guide-card__veil {
  position: absolute;
  z-index: -1;
}

/* Direct child only: the creator avatar inside the frame has its own img. */
.guide-card__frame > img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

/* Frosted lower half: the photo blurs as it sinks into the colour. */
.guide-card__frost {
  inset: auto 0 0;
  height: 58%;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%);
  mask-image: linear-gradient(to top, #000 45%, transparent 100%);
}

.guide-card__veil {
  inset: auto 0 0;
  height: 70%;
  background: linear-gradient(
    to top,
    rgb(var(--tone)) 0%,
    rgb(var(--tone) / 0.92) 34%,
    rgb(var(--tone) / 0.5) 62%,
    rgb(var(--tone) / 0) 100%
  );
}

.guide-card__place {
  margin: 0 0 6px;
  color: rgb(255 255 255 / 0.78);
  font-size: 13px;
  letter-spacing: 0;
}

.guide-card__title {
  margin: 0 0 16px;
  font-size: clamp(1.6rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* The creator row links to their profile. It sits above the card's stretched
   link (z-index), so the name opens the profile and the rest opens the guide. */
.creator {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  justify-self: start;
  margin-bottom: 16px;
  border-radius: var(--radius-pill);
}

.creator:focus-visible {
  outline-offset: 4px;
}

.creator__avatar {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.18);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.creator__avatar img,
.profile__avatar img,
.search__thumb img,
.trip-person__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Each creator's photo sets where their face is and how far to zoom in
     (avatarFocus / avatarZoom in data.js), so small circles show the face. */
  object-position: var(--focus, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus, 50% 50%);
}

.creator__name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.creator__badge {
  color: var(--verified);
  font-size: 16px;
  /* White disc behind the seal so the blue reads on every card tone. */
  background: radial-gradient(circle, #ffffff 0 42%, transparent 44%);
}

.creator__handle {
  color: rgb(255 255 255 / 0.72);
  font-size: 12.5px;
  line-height: 1.3;
  text-underline-offset: 3px;
}

.creator:hover .creator__handle {
  color: #ffffff;
  text-decoration: underline;
}

.guide-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px 0 20px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-pill);
  /* No backdrop-filter here on purpose: it would make the button the containing
     block of its ::after, shrinking the whole-card link down to the button.
     The frost layer below already blurs the photo behind it. */
  background: rgb(0 0 0 / 0.22);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18);
  font-size: 15px;
  font-weight: 500;
  transition: background-color 300ms var(--ease-out);
}

.guide-card__cta i {
  font-size: 16px;
  transition: transform 300ms var(--ease-out);
}

.guide-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
}

.guide-card__cta:focus-visible {
  outline: none;
}

.guide-card:has(.guide-card__cta:focus-visible) .guide-card__frame {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

@media (hover: hover) {
  .guide-card:hover,
  .guide-card:has(.guide-card__cta:focus-visible) {
    transform: translateY(-10px);
  }

  .guide-card:hover {
    box-shadow:
      0 4px 10px rgb(var(--tone) / 0.25),
      0 44px 70px -20px rgb(var(--tone) / 0.7),
      0 70px 100px -44px rgb(var(--tone) / 0.55);
  }

  .guide-card:hover .guide-card__frame > img {
    transform: scale(1.04);
  }

  .guide-card:hover .guide-card__cta {
    background-color: rgb(0 0 0 / 0.32);
  }

  .guide-card:hover .guide-card__cta i {
    transform: translateX(3px);
  }
}

.guide-card:active {
  transform: translateY(-6px) scale(0.99);
}

/* "Coming soon": a blurred photo, a lock, and a way into the Travel Club. */
.guide-card--soon .guide-card__frame > img {
  filter: blur(16px) saturate(0.85);
  transform: scale(1.15);
}

.guide-card.guide-card--soon:hover .guide-card__frame > img {
  transform: scale(1.18);
}

.guide-card__lock {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 18px;
}

/* ---------- Home: closing statement ---------- */

.statement {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 32px;
  padding: clamp(96px, 14vh, 160px) var(--gutter);
  overflow: hidden;
  color: var(--ink);
  text-align: center;
}

/* A faint sunset glow behind the words (the guarantee's palette), fading into the paper. */
.statement::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 34% 42% at 40% 52%, rgb(246 195 163 / 0.45), transparent 70%),
    radial-gradient(ellipse 34% 42% at 62% 48%, rgb(214 198 240 / 0.45), transparent 70%);
  pointer-events: none;
}

.statement__text {
  /* Wide enough for each half to sit on one line on desktop: two lines in all. */
  max-width: 24em;
  margin: 0;
  font-size: clamp(1.85rem, 3.4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* Each half on its own lines: the muted setup, then the dark payoff. */
.statement__text > span {
  display: block;
}

.statement__lead {
  color: var(--ink-muted);
}

/* ---------- Footer ---------- */

.footer {
  padding: 0 var(--gutter);
  background: var(--ink);
  color: rgb(255 255 255 / 0.86);
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px 48px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 72px 0 32px;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.footer__logo i {
  font-size: 26px;
}

.footer__tagline {
  max-width: 28ch;
  margin: 14px 0 0;
  color: rgb(255 255 255 / 0.6);
  font-size: 15px;
  line-height: 1.5;
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, auto));
  gap: 32px clamp(32px, 5vw, 80px);
}

.footer__heading {
  margin: 0 0 14px;
  color: rgb(255 255 255 / 0.5);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.footer__col ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__col a,
.footer__col button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  text-align: left;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 200ms var(--ease-out);
}

.footer__col a:hover,
.footer__col button:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.footer__copy {
  margin: 0;
  color: rgb(255 255 255 / 0.5);
  font-size: 13px;
}

.footer__social {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-pill);
  font-size: 19px;
  transition: background-color 200ms var(--ease-out);
}

.footer__social a:hover {
  background: rgb(255 255 255 / 0.08);
}

/* ---------- Creator profile (creator.html) ---------- */
/* Desktop/tablet: a wide travel cover that dissolves into the page, with the
   creator's photo as an avatar overlapping its lower edge. Phones swap the cover
   for the creator's own photo, full width (see the mobile block). */

.profile {
  --page-start: max(var(--gutter), calc((100vw - 1400px) / 2));
  position: relative;
  color: var(--ink);
}

.profile__cover {
  position: relative;
  height: clamp(360px, 56vh, 560px);
  overflow: hidden;
  background: rgb(var(--tone));
}

.profile__cover img,
.profile__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile__cover img {
  object-position: 50% 60%;
}

.profile__cover::after,
.profile__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A light veil at the top for the dark nav, and a long dissolve into the page. */
.profile__cover::after {
  background:
    linear-gradient(to bottom, rgb(244 244 242 / 0.45) 0%, rgb(244 244 242 / 0) 24%),
    linear-gradient(to top, var(--paper) 0%, rgb(244 244 242 / 0.78) 16%, rgb(244 244 242 / 0) 52%);
}

/* Dark covers get a soft dark veil at the top instead, for the white nav ink
   (script.js measures each cover and adds this class). */
.profile--dark-cover .profile__cover::after {
  background:
    linear-gradient(to bottom, rgb(var(--shadow-rgb) / 0.35) 0%, rgb(var(--shadow-rgb) / 0) 26%),
    linear-gradient(to top, var(--paper) 0%, rgb(244 244 242 / 0.78) 16%, rgb(244 244 242 / 0) 52%);
}

.profile__portrait {
  display: none;
}

.profile__light-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.profile__identity {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  column-gap: clamp(20px, 3vw, 40px);
  max-width: calc(1400px + 2 * var(--gutter));
  margin: -112px auto 0;
  padding: 0 var(--page-start);
}

.profile__avatar {
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  overflow: hidden;
  border: 4px solid #ffffff;
  border-radius: var(--radius-pill);
  background: rgb(var(--tone));
  box-shadow: 0 22px 44px -18px rgb(0 0 0 / 0.35);
  color: #ffffff;
  font-size: 52px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.profile__info {
  display: grid;
  gap: 10px;
  padding-bottom: 6px;
}

.profile__name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.profile__name i {
  flex: none;
  color: var(--verified);
  font-size: 0.62em;
  background: radial-gradient(circle, #ffffff 0 42%, transparent 44%);
}

.profile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 16px;
}

.profile__countries {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile__countries[hidden] {
  display: none;
}

.profile__countries i {
  font-size: 18px;
}

.profile__bio {
  max-width: 46ch;
  margin: 2px 0 0;
  font-size: 17px;
  line-height: 1.45;
}

/* LinkedIn-style contact stack: one network per line. */
.profile__social {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
}

.profile__social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-underline-offset: 3px;
}

.profile__social a:hover {
  text-decoration: underline;
}

.profile__social i {
  font-size: 22px;
}

.profile [hidden] {
  display: none;
}

/* The creator's guides follow straight on, one beat closer than on the home. */
.guides--creator {
  padding-top: 40px;
}

.profile-missing {
  display: grid;
  justify-items: center;
  gap: 16px;
  min-height: 80dvh;
  align-content: center;
  padding: calc(var(--nav-height) + 40px) var(--gutter) 64px;
  color: var(--ink);
  text-align: center;
}

.profile-missing[hidden] {
  display: none;
}

.profile-missing__title {
  margin: 0;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.profile-missing__text {
  margin: 0;
  color: var(--ink-muted);
  font-size: 17px;
}

/* ---------- Search ---------- */
/* A frosted, Spotlight-style panel near the top of the screen; a full-height
   sheet on phones. The native <dialog> provides focus handling and Esc. */

.search {
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  max-height: min(72vh, 640px);
  margin: 12vh auto auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: var(--radius-card);
  background: rgb(255 255 255 / 0.88);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 40px 90px -30px rgb(0 0 0 / 0.4);
  color: var(--ink);
}

.search::backdrop {
  background: rgb(24 22 20 / 0.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.search__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: inherit;
}

.search__field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 10px 0 22px;
  border-bottom: 1px solid rgb(0 0 0 / 0.07);
  font-size: 20px;
}

.search__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  letter-spacing: -0.01em;
  outline: none;
}

.search__field input::placeholder {
  color: #7a7a77;
}

.search__field input::-webkit-search-cancel-button {
  display: none;
}

.search__close {
  font-size: 18px;
}

.search__results {
  overflow-y: auto;
  padding: 6px 8px 10px;
  overscroll-behavior: contain;
}

.search__group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.search__group-title {
  margin: 0;
  padding: 12px 12px 6px;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
}

.search__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 16px;
  transition: background-color 150ms var(--ease-out);
}

.search__item:hover,
.search__item:focus-visible {
  outline: none;
  background: rgb(0 0 0 / 0.05);
}

.search__thumb {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 12px;
  object-fit: cover;
  background: rgb(var(--tone, 92 92 88));
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}

.search__thumb--round {
  border-radius: var(--radius-pill);
}

.search__text {
  display: grid;
  min-width: 0;
}

.search__title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search__seal {
  color: var(--verified);
  font-size: 15px;
}

.search__sub {
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search__go {
  color: var(--ink-muted);
  font-size: 15px;
}

.search__empty {
  margin: 0;
  padding: 28px 16px;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .search[open] {
    animation: search-in 260ms var(--ease-out);
  }
}

@keyframes search-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

/* ---------- Entrance motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__photo {
    animation: settle 1.8s var(--ease-out) both;
  }

  .hero__content > * {
    animation: rise 900ms var(--ease-out) both;
  }

  .hero__title { animation-delay: 150ms; }
  .hero__lede { animation-delay: 240ms; }
  .hero__content .btn-3d { animation-delay: 330ms; }

  .nav {
    animation: fade 900ms var(--ease-out) 100ms both;
  }

  /* Cards rise in sequence the first time the gallery enters the viewport. */
  .js .gallery > li {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 800ms var(--ease-out),
      transform 800ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  .js .gallery.is-visible > li {
    opacity: 1;
    transform: none;
  }

  .js .statement__text {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 1000ms var(--ease-out),
      transform 1000ms var(--ease-out);
  }

  .js .statement__text.is-visible {
    opacity: 1;
    transform: none;
  }
}

@keyframes settle {
  from { transform: scale(1.04); }
  to { transform: none; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Fallbacks ---------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-glass,
  .nav.is-scrolled .nav__inner {
    background: rgb(28 24 20 / 0.72);
  }

  .nav--on-light .btn-glass,
  .nav.nav--on-light.is-scrolled .nav__inner {
    background: rgb(255 255 255 / 0.94);
  }

  .guide-card__cta {
    background: rgb(0 0 0 / 0.36);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .btn-glass,
  .nav.is-scrolled .nav__inner {
    background: rgb(28 24 20 / 0.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav--on-light .btn-glass,
  .nav.nav--on-light.is-scrolled .nav__inner {
    background: #ffffff;
  }

  .guide-card__frost {
    display: none;
  }

  .guide-card__cta {
    background: rgb(0 0 0 / 0.4);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- Tablet and below: intro stacks above a full-bleed rail ---------- */

@media (max-width: 1023px) {
  .guides {
    --rail-start: var(--gutter);
    padding: 72px 0 40px;
  }

  .hero__photo {
    object-position: 65% 60%;
  }

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

  /* The Vibe: the title sits above, so the photos get the full width: three
     and a cut fourth (phones override this below). */
  .guides.guides--vibe {
    --photo-w: calc((100vw - var(--gutter) - 3 * var(--photo-gap)) / 3.45);
  }

  .guides--vibe .gallery {
    padding-bottom: 16px;
  }

  /* The strip dissolves: intro stacks on top, only the cards scroll. */
  .guides__rail {
    display: contents;
  }

  .guides__intro {
    padding: 0 var(--gutter);
  }

  .gallery {
    padding: 32px var(--gutter) 88px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    cursor: grab;
  }

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

/* Touch devices swipe natively, so the arrows go. */
@media (hover: none) {
  .guides__controls {
    display: none;
  }

  .guides__rail,
  .gallery {
    cursor: auto;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  :root {
    --nav-height: 60px;
  }

  .nav {
    padding: 8px 12px;
  }

  .nav__inner {
    padding: 0 8px 0 10px;
  }

  .btn-glass {
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
  }

  /* With the name beside the logo, phones keep the brand, search and language;
     the club link and the nav's button go (the page itself carries both). */
  .nav__link,
  .nav__actions > .btn-glass {
    display: none;
  }

  .nav__logo {
    gap: 8px;
    font-size: 26px;
  }

  .nav__wordmark {
    font-size: 15px;
  }

  /* Cropped on the hand-hold. */
  .hero__photo {
    object-position: 80% 50%;
  }

  .hero__media::after {
    background:
      linear-gradient(to top, var(--paper) 0%, rgb(244 244 242 / 0.55) 6%, rgb(244 244 242 / 0) 16%),
      linear-gradient(to bottom, rgb(var(--shadow-rgb) / 0.45) 0%, rgb(var(--shadow-rgb) / 0.22) 45%, transparent 62%);
  }

  .hero__content {
    gap: 18px;
    padding-block: calc(var(--nav-height) + 48px) 32px;
  }

  .hero__title {
    font-size: 2.25rem;
  }

  .footer__inner {
    gap: 40px;
    padding-top: 56px;
  }

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

  .btn-3d {
    padding: 17px 30px;
    font-size: 16px;
  }

  .gallery {
    gap: 16px;
  }

  .guide-card {
    width: min(76vw, 300px);
  }

  /* Two photos and a cut third. */
  .guides.guides--vibe {
    --photo-w: calc((100vw - var(--gutter) - 2 * var(--photo-gap)) / 2.45);
  }
}

/* ---------- Creator profile: tablet and phone ---------- */

/* Tablet: the social stack drops under the bio instead of sitting beside it. */
@media (max-width: 1023px) {
  .profile__identity {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 20px;
  }

  .profile__social {
    grid-column: 2;
    grid-auto-flow: column;
    gap: 24px;
    padding: 0;
  }
}

/* Phone: the creator's own photo leads, full width, and dissolves into the
   page; name and details sit on its whitened lower edge, Sarah-card style. */
@media (max-width: 767px) {
  .profile__cover,
  .profile__avatar {
    display: none;
  }

  .profile__portrait {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: rgb(var(--tone));
  }

  .profile__portrait img {
    object-position: var(--focus, 50% 40%);
  }

  .profile__portrait::after {
    background:
      linear-gradient(to bottom, rgb(244 244 242 / 0.7) 0%, rgb(244 244 242 / 0) 18%),
      linear-gradient(to top, var(--paper) 0%, rgb(244 244 242 / 0.9) 14%, rgb(244 244 242 / 0) 46%);
  }

  .profile--dark-cover .profile__portrait::after {
    background:
      linear-gradient(to bottom, rgb(var(--shadow-rgb) / 0.4) 0%, rgb(var(--shadow-rgb) / 0) 20%),
      linear-gradient(to top, var(--paper) 0%, rgb(244 244 242 / 0.9) 14%, rgb(244 244 242 / 0) 46%);
  }

  .profile__identity {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
    margin-top: -132px;
    padding: 0 var(--gutter);
  }

  .profile__name {
    font-size: 2.25rem;
    gap: 10px;
  }

  .profile__meta {
    font-size: 15px;
  }

  .profile__bio {
    font-size: 16px;
  }

  .profile__social {
    grid-column: auto;
    grid-auto-flow: row;
    gap: 12px;
  }

  .guides--creator {
    padding-top: 32px;
  }

  .search {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .search__panel {
    height: 100%;
  }
}

/* ---------- Travel Club (club.html) ---------- */

/* The home's full-screen hero, centred, over balloons at golden hour; a darker
   pool behind the copy because the sky is pale. */
.hero--club {
  align-items: center;
}

.hero--club .hero__photo {
  object-position: 50% 55%;
}

.hero--club .hero__media::after {
  background:
    linear-gradient(to top, var(--paper) 0%, rgb(244 244 242 / 0.55) 7%, rgb(244 244 242 / 0) 20%),
    linear-gradient(to bottom, rgb(var(--shadow-rgb) / 0.32) 0%, transparent 24%),
    radial-gradient(ellipse 64% 50% at 50% 46%, rgb(var(--shadow-rgb) / 0.55), transparent 100%);
}

.hero--club .hero__content {
  padding-bottom: clamp(96px, 16vh, 180px);
}

.club__eyebrow {
  margin: 0;
  color: rgb(255 255 255 / 0.88);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgb(var(--shadow-rgb) / 0.5);
}

.waitlist {
  display: grid;
  justify-items: center;
  width: min(100%, 440px);
  margin-top: 8px;
}

.waitlist__toggle i {
  transition: transform 300ms var(--ease-out);
}

.waitlist__toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* The email field opens below the button: the row grows from nothing to the
   field's height (and closes the same way). */
.waitlist__panel {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  opacity: 0;
  transition:
    grid-template-rows 450ms var(--ease-out),
    opacity 300ms var(--ease-out);
}

.waitlist__panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.waitlist__panel[hidden] {
  display: none;
}

.waitlist__clip {
  min-height: 0;
  overflow: hidden;
}

.waitlist__form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 4px 4px;
  padding: 6px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.95);
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.45);
  transition: box-shadow 250ms var(--ease-out);
}

.waitlist__form:focus-within {
  box-shadow:
    0 0 0 3px rgb(255 255 255 / 0.45),
    0 18px 40px -16px rgb(0 0 0 / 0.45);
}

.waitlist__form input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  /* 16px or more, so phones don't zoom in on focus. */
  font-size: 16px;
  outline: none;
}

.waitlist__form input::placeholder {
  color: var(--ink-muted);
}

.waitlist__done {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  padding: 14px 22px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
}

.waitlist__done[hidden] {
  display: none;
}

.waitlist__done i {
  flex: none;
  font-size: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .waitlist__panel,
  .waitlist__toggle i {
    transition: none;
  }
}

/* ---------- Guide (sales) page: guide.html ---------- */
/* Built from the same parts as the rest of the site: the guide's card, its
   --tone colour, the preview rail. Wider screens open on paper, so the nav
   starts in its light style; phones open on the guide's photo. */

.nav__buy {
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

.nav__buy[hidden] {
  display: none;
}

/* Once the nav turns to glass on scroll, its buy button takes the purchase
   colour, so buying stays one obvious click away. The gradient fades in on a
   layer under the label (gradients themselves can't transition). */
.nav__buy {
  isolation: isolate;
}

.nav__buy::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--buy-gradient);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}

.nav.is-scrolled .nav__buy {
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgb(140 30 20 / 0.3);
  box-shadow: 0 10px 22px -10px rgb(255 100 60 / 0.65);
}

.nav.is-scrolled .nav__buy::before {
  opacity: 1;
}

/* Primary purchase button: a warm sunset gradient, the one colour on the page
   reserved for buying. The guide's own --tone stays on the guide itself. */
.btn-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 26px 0 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--buy-gradient);
  color: #ffffff;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgb(140 30 20 / 0.3);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 -2px 6px rgb(150 20 50 / 0.3),
    0 1px 2px rgb(220 70 50 / 0.35),
    0 14px 28px -10px rgb(255 100 60 / 0.6),
    0 28px 56px -22px rgb(230 70 100 / 0.55);
  transition:
    transform 250ms var(--ease-out),
    box-shadow 250ms var(--ease-out);
}

.btn-buy i {
  font-size: 18px;
  transition: transform 250ms var(--ease-out);
}

.btn-buy:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 -2px 6px rgb(150 20 50 / 0.3),
    0 1px 2px rgb(220 70 50 / 0.35),
    0 18px 34px -10px rgb(255 100 60 / 0.7),
    0 34px 64px -22px rgb(230 70 100 / 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .btn-buy:hover {
    transform: translateY(-2px);
  }

  .btn-buy:hover i {
    transform: translateX(3px);
  }

  .btn-buy:active {
    transform: translateY(1px);
  }
}

.btn-buy:focus-visible {
  outline-color: var(--ink);
}

.btn-buy--small {
  gap: 8px;
  height: 44px;
  padding: 0 18px 0 22px;
  font-size: 15px;
}

.btn-buy--small i {
  font-size: 16px;
}

/* 1 + 2. Top: the card "opened" on the left, the offer on the right. */
.trip-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  /* The card starts on the same left edge as every section below it. */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 7vw, 112px);
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 64px) var(--gutter) 40px;
  color: var(--ink);
}

/* A soft wash of the guide's colour behind the card. */
.trip-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 50% 60% at 24% 48%, rgb(var(--tone) / 0.16), transparent 70%);
  pointer-events: none;
}

.trip-hero__card {
  justify-self: start;
}

/* Phones only (see below): the guide's photo, full width. */
.trip-hero__portrait {
  display: none;
}

.guide-card--hero {
  width: clamp(300px, 34vw, 440px);
}

.guide-card--hero .guide-card__frame {
  padding: 26px;
}

.guide-card--hero .creator {
  margin-bottom: 0;
}

@media (hover: hover) {
  .guide-card.guide-card--hero:hover {
    transform: none;
  }
}

.trip-hero__info {
  display: grid;
  justify-items: start;
  gap: 20px;
  max-width: 520px;
}

.trip-hero__heading {
  display: grid;
  justify-items: start;
  gap: 20px;
}

.trip-hero__title {
  margin: 0;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.trip-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-muted);
  font-size: 15px;
}

.trip-facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.trip-facts i {
  color: var(--ink);
  font-size: 18px;
}

.trip-hero__summary {
  max-width: 42ch;
  margin: 4px 0 0;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
}

.trip-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 12px;
}

.trip-offer[hidden] {
  display: none;
}

.trip-price {
  display: grid;
  gap: 4px;
}

.trip-price__amount {
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* "Money-back guarantee" beside the price (and in the phone bar): a link down
   to the guarantee section. */
.trip-guarantee-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-underline-offset: 3px;
}

.trip-guarantee-note i {
  color: rgb(var(--tone));
  font-size: 16px;
}

.trip-guarantee-note:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Shared section rhythm. */
.trip-section {
  padding-top: 96px;
  color: var(--ink);
}

.trip-section[hidden] {
  display: none;
}

.trip-section--last {
  padding-bottom: 120px;
}

.trip-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.trip-h2 {
  margin: 0 0 32px;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.trip-h3 {
  margin: 0 0 14px;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.trip-lede {
  max-width: 52ch;
  margin: -16px 0 36px;
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1.5;
}

/* 3 + 4 + 5. Two columns: who made it (left) and what's included (right). */
.trip-meet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
}

/* Guides without sales content have no included column. */
.trip-meet__creator:only-child {
  grid-column: 1 / -1;
}

/* Who made it: person, how she travels, the preferences box, who it's for. */
.trip-creator {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.trip-person {
  display: grid;
  grid-template-columns: 72px auto;
  align-items: center;
  gap: 16px;
}

.trip-person__avatar {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 3px solid #ffffff;
  border-radius: var(--radius-pill);
  background: rgb(var(--tone));
  box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.35);
  color: #ffffff;
  font-size: 22px;
  font-weight: 500;
}

.trip-person__text {
  display: grid;
  gap: 2px;
}

.trip-person__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.trip-person__seal {
  color: var(--verified);
  font-size: 20px;
  background: radial-gradient(circle, #ffffff 0 42%, transparent 44%);
}

.trip-person__handle {
  color: var(--ink-muted);
  font-size: 15px;
  text-underline-offset: 3px;
}

.trip-person:hover .trip-person__handle {
  text-decoration: underline;
}

.trip-person__bio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0;
  font-size: 17px;
}

/* Countries visited: small and quiet beside the bio, as on the profile. */
.trip-person__countries {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
  font-size: 15px;
}

.trip-person__countries i {
  font-size: 17px;
}

.trip-creator > .trip-h3 {
  margin: 16px 0 0;
}

/* Why the creator knows the place better than a search does: an intro, then
   four insider points with icons in the guide's colour. */
.trip-insider {
  justify-self: stretch;
  margin-top: 20px;
}

.trip-insider .trip-h3 {
  margin: 0 0 10px;
}

.trip-insider__intro {
  max-width: 52ch;
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.55;
}

.trip-insider__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trip-insider__points li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 4px 12px;
}

.trip-insider__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: rgb(var(--tone) / 0.1);
  color: rgb(var(--tone));
  font-size: 18px;
}

.trip-insider__title {
  padding-top: 1px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.trip-insider__text {
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Three short attributes on one row, interests across the bottom: no empty cell. */
.trip-attrs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: var(--radius-card);
  background: #ffffff;
  box-shadow: 0 20px 50px -30px rgb(0 0 0 / 0.25);
}

.trip-attr {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px 24px;
  border-bottom: 1px solid rgb(0 0 0 / 0.06);
}

.trip-attr:nth-child(-n + 2) {
  border-right: 1px solid rgb(0 0 0 / 0.06);
}

.trip-attr--wide {
  grid-column: 1 / -1;
  border-bottom: 0;
}

.trip-attr dt {
  color: var(--ink-muted);
  font-size: 13px;
}

.trip-attr dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.trip-meter {
  display: inline-flex;
  gap: 3px;
}

.trip-meter span {
  width: 14px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgb(0 0 0 / 0.12);
}

.trip-meter .is-on {
  background: rgb(var(--tone));
}

.trip-budget span {
  color: rgb(0 0 0 / 0.2);
}

.trip-budget .is-on {
  color: var(--ink);
}

.trip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trip-tags li {
  padding: 6px 12px;
  border: 1px solid rgb(0 0 0 / 0.06);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 14px;
  font-weight: 500;
}

.trip-creator > .trip-attrs,
.trip-creator > .trip-fit {
  justify-self: stretch;
}

.trip-creator > .trip-attrs {
  margin-top: 8px;
}

.trip-fit {
  margin-top: 24px;
}

.trip-fit__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 17px;
}

.trip-fit__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}

.trip-fit__list i {
  flex: none;
  margin-top: 1px;
  color: rgb(var(--tone));
  font-size: 21px;
}

/* What's included: two tiles that share the column's height. */
.trip-included {
  display: grid;
  grid-template-rows: auto 1fr 1fr;
  gap: 20px;
}

/* The grid gap adds to it, so the tiles sit just under the subtitle. */
.trip-included__head .trip-h2 {
  margin-bottom: 10px;
}

.trip-included__head .trip-lede {
  margin: 0 0 4px;
}

.trip-tile {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.trip-tile__content {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 32px;
}

.trip-tile__icon {
  font-size: 26px;
}

.trip-tile__title {
  max-width: 32ch;
  margin: 4px 0 0;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.trip-tile__text {
  max-width: 44ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

/* Experiences: the guide's photo, dissolving into its colour behind the text. */
.trip-tile--photo {
  background: rgb(var(--tone));
  color: #ffffff;
}

.trip-tile__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trip-tile--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 60% at 100% 0%, rgb(255 255 255 / 0.12), transparent 60%),
    linear-gradient(to top, rgb(var(--tone)) 0%, rgb(var(--tone) / 0.92) 45%, rgb(var(--tone) / 0.55) 72%, rgb(var(--tone) / 0.08) 100%);
}

.trip-tile--photo .trip-tile__text {
  color: rgb(255 255 255 / 0.86);
}

/* Map: a real map of the guide's pins, grey and blurred, under a light wash. */
.trip-tile--map {
  border: 1px solid rgb(0 0 0 / 0.07);
  background: #e9ece8;
  color: var(--ink);
}

.trip-tile__map {
  position: absolute;
  /* Bleeds past the edges so the blur never shows a soft border. */
  inset: -16px;
  z-index: -2;
  filter: blur(3px);
}

.trip-tile--map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(255 255 255 / 0.97) 0%, rgb(255 255 255 / 0.9) 42%, rgb(255 255 255 / 0.3) 80%, rgb(255 255 255 / 0.05) 100%);
}

.trip-tile--map .trip-tile__icon {
  color: rgb(var(--tone));
}

.trip-tile--map .trip-tile__text {
  color: var(--ink-muted);
}

.trip-kinds,
.trip-daydots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.trip-kinds li,
.trip-daydots li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
}

.trip-kinds li {
  border: 1px solid rgb(255 255 255 / 0.24);
  background: rgb(255 255 255 / 0.14);
}

.trip-daydots li {
  border: 1px solid rgb(0 0 0 / 0.06);
  background: #ffffff;
}

.trip-daydots span {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
}

/* The Vibe: the lifestyle behind the guide as an Instagram-style carousel of
   4:5 photos. The photo width comes from the space beside the title, so on
   any desktop four photos fit and the fifth is cut about in half: the cue
   that there are more to drag in. */
.guides--vibe {
  --intro-w: clamp(260px, 21vw, 340px);
  --photo-gap: 12px;
  --photo-w: clamp(
    180px,
    calc((100vw - var(--rail-start) - var(--intro-w) - 24px - 4 * var(--photo-gap)) / 4.5),
    260px
  );
}

.guides--vibe .guides__intro {
  flex-basis: var(--intro-w);
}

/* Small photos cast small shadows: less room under them than under the cards. */
.guides--vibe .guides__rail {
  padding-bottom: 72px;
}

.guides--vibe .gallery {
  gap: var(--photo-gap);
}

.vibe-photo {
  display: block;
  width: var(--photo-w);
  /* auto, or the img's height attribute (1440) wins over the aspect ratio. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  box-shadow:
    0 1px 3px rgb(0 0 0 / 0.08),
    0 14px 28px -18px rgb(0 0 0 / 0.35);
  user-select: none;
}

/* 6. Preview: guide pages in the rail. Free pages are readable; locked ones
   show placeholder lines under a blur, never the real content. */
.guides--preview,
.guides--vibe {
  /* Content starts where the 1200px sections' content starts. */
  --rail-start: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter)));
  padding-top: 72px;
}

.guides--preview .guides__title,
.guides--vibe .guides__title {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.guide-page {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Fixed width: the pages hold real text, so they must not get narrower and overflow. */
  width: 300px;
  aspect-ratio: 5 / 8.8;
  padding: 22px 20px;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 0.07);
  border-radius: var(--radius-card);
  background: #ffffff;
  box-shadow:
    0 2px 6px rgb(0 0 0 / 0.04),
    0 24px 48px -28px rgb(0 0 0 / 0.3);
  color: var(--ink);
}

.guide-page__label {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
}

.guide-page__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.guide-page__title--cover {
  font-size: 2rem;
  letter-spacing: -0.035em;
}

.guide-page__foot {
  margin: auto 0 0;
  padding-top: 10px;
  color: rgb(var(--tone));
  font-size: 12px;
  font-weight: 500;
}

.guide-page--cover {
  padding: 0;
}

.guide-page__cover {
  height: 58%;
  overflow: hidden;
}

.guide-page__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-page__cover-text {
  display: grid;
  gap: 6px;
  padding: 18px 22px 0;
}

.guide-page--cover .guide-page__foot {
  padding: 0 22px 20px;
}

.guide-page__by {
  color: var(--ink-muted);
  font-size: 14px;
}

.guide-page__tips {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 13.5px;
  line-height: 1.45;
}

.guide-page__tips li::marker {
  color: rgb(var(--tone));
  font-weight: 500;
}

.guide-page__stops {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-stop {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 6px;
}

.guide-stop__time {
  padding-top: 2px;
  color: rgb(var(--tone));
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.guide-stop__body {
  display: grid;
  gap: 2px;
}

.guide-stop__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
}

.guide-stop__name i {
  color: var(--ink-muted);
  font-size: 14px;
}

.guide-stop__note {
  color: var(--ink-muted);
  font-size: 11.5px;
  line-height: 1.36;
}

.guide-page__blur {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  filter: blur(5px);
  opacity: 0.8;
  pointer-events: none;
}

.skeleton {
  display: block;
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgb(0 0 0 / 0.12);
}

.skeleton--label {
  width: 34%;
  height: 8px;
}

.skeleton--title {
  width: 72%;
  height: 18px;
  margin-bottom: 8px;
}

.skeleton-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
}

.skeleton--time {
  background: rgb(var(--tone) / 0.4);
}

.guide-page__lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.72));
  text-align: center;
}

.guide-page__lock-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.45);
  color: #ffffff;
  font-size: 22px;
}

.guide-page__lock-day {
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
}

.guide-page__lock-area {
  max-width: 18ch;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.guide-page__lock .btn-buy {
  margin-top: 8px;
}

.guide-page--map {
  padding: 0;
}

.guide-page--map .guide-page__blur {
  padding: 0;
  filter: blur(2.5px);
  opacity: 1;
}

.trip-map {
  width: 100%;
  height: 100%;
  background: #e9ece8;
}

/* Quiet, grey map so the coloured day pins carry the colour. */
.trip-map .leaflet-tile-pane {
  filter: grayscale(1) contrast(1.15) brightness(0.98);
}

.guide-page__attribution {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  margin: 0;
  color: var(--ink-muted);
  font-size: 10px;
  text-align: center;
}

/* 7. Guarantee and updates: the promise on the left, two squares in a soft
   sunset gradient on the right (the same palette, shifted, so they read as a pair). */
.trip-guarantee {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.trip-guarantee .trip-h2 {
  margin-bottom: 20px;
}

.trip-guarantee__lede {
  max-width: 40ch;
  margin: 0;
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1.55;
}

.trip-promises {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* No overflow: hidden, so a square can grow if its text needs the room. */
.trip-promise {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 10px;
  aspect-ratio: 1;
  padding: 28px;
  border-radius: var(--radius-card);
  background:
    radial-gradient(90% 80% at 15% 10%, rgb(251 240 225 / 0.95), transparent 70%),
    linear-gradient(140deg, #fbf0e1 0%, #f8d6bd 45%, #f6c3a3 75%, #eebfc0 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.6),
    0 28px 56px -34px rgb(150 80 90 / 0.5);
  color: var(--ink);
}

.trip-promise--alt {
  background:
    radial-gradient(90% 80% at 85% 10%, rgb(251 240 225 / 0.9), transparent 70%),
    linear-gradient(140deg, #f3c4b0 0%, #e9c3d4 40%, #d6c6f0 80%, #cfc4f2 100%);
}

.trip-promise__icon {
  display: grid;
  place-items: center;
  align-self: start;
  width: 52px;
  height: 52px;
  border: 1px solid rgb(255 255 255 / 0.75);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.55);
  box-shadow: 0 8px 20px -10px rgb(120 60 60 / 0.35);
  font-size: 24px;
}

.trip-promise__title {
  max-width: 22ch;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.trip-promise__text {
  margin: 0;
  color: rgb(27 27 26 / 0.72);
  font-size: 15px;
  line-height: 1.5;
}

.trip-verified {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  color: var(--ink-muted);
  font-size: 15px;
}

.trip-verified i {
  color: rgb(var(--tone));
  font-size: 18px;
}

/* 8. Reviews (real ones only) and FAQ. */
.trip-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trip-review {
  padding: 28px;
  border: 1px solid rgb(0 0 0 / 0.07);
  border-radius: var(--radius-card);
  background: #ffffff;
}

.trip-review__text {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.5;
}

.trip-review__by {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
}

.trip-faq {
  border-top: 1px solid rgb(0 0 0 / 0.1);
}

.trip-faq__item {
  border-bottom: 1px solid rgb(0 0 0 / 0.08);
}

.trip-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}

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

.trip-faq__item summary i {
  flex: none;
  font-size: 20px;
  transition: transform 300ms var(--ease-out);
}

.trip-faq__item[open] summary i {
  transform: rotate(45deg);
}

.trip-faq__item p {
  max-width: 62ch;
  margin: -6px 0 22px;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.55;
}

/* 9. Phones: the purchase stays pinned to the bottom of the screen. */
.buy-bar {
  position: fixed;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 12px;
  z-index: 9;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 20px;
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.84);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.35);
  color: var(--ink);
}

.buy-bar__price {
  display: grid;
  min-width: 0;
}

.buy-bar__amount {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.buy-bar .trip-guarantee-note {
  font-size: 12.5px;
}

.buy-bar .trip-guarantee-note i {
  font-size: 14px;
}

@media (max-width: 1023px) {
  .trip-meet,
  .trip-guarantee {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked under the creator, the two tiles sit side by side. */
  .trip-included {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .trip-included__head {
    grid-column: 1 / -1;
  }

  .trip-tile {
    min-height: 380px;
  }
}

@media (max-width: 767px) {
  /* Phones: the guide's photo leads, tall and full width, with the title and
     facts over it as on the guide's card. It dissolves into the page and the
     summary follows on paper; the offer lives in the bar at the bottom, so the
     nav's buy button and the big offer go. */
  .nav__buy,
  .trip-hero::before,
  .trip-hero__card,
  .trip-offer {
    display: none;
  }

  .trip-hero {
    --portrait-h: min(86svh, 760px);
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }

  /* The heading shares the photo's grid cell; the summary takes the next row. */
  .trip-hero__info {
    display: contents;
  }

  .trip-hero__portrait {
    grid-area: 1 / 1;
    position: relative;
    display: block;
    width: 100%;
    height: var(--portrait-h);
    overflow: hidden;
    background: rgb(var(--tone));
  }

  .trip-hero__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* A blurred band behind the text, as on the cards. */
  .trip-hero__frost {
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-mask-image: linear-gradient(to top, transparent 12%, #000 28%, #000 46%, transparent 64%);
    mask-image: linear-gradient(to top, transparent 12%, #000 28%, #000 46%, transparent 64%);
  }

  /* Top to bottom of the stack: the dissolve into the paper, the guide's colour
     behind the title, and a dark band at the top for the white nav. */
  .trip-hero__portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, var(--paper) 0%, rgb(244 244 242 / 0.85) 7%, rgb(244 244 242 / 0) 20%),
      linear-gradient(to top, rgb(var(--tone) / 0) 10%, rgb(var(--tone) / 0.78) 26%, rgb(var(--tone) / 0.45) 46%, rgb(var(--tone) / 0) 66%),
      linear-gradient(to bottom, rgb(var(--shadow-rgb) / 0.35) 0%, transparent 22%);
    pointer-events: none;
  }

  .trip-hero__light-marker {
    position: absolute;
    left: 0;
    bottom: 18%;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  .trip-hero__heading {
    grid-area: 1 / 1;
    align-self: end;
    position: relative;
    z-index: 1;
    gap: 14px;
    padding: 0 var(--gutter) calc(var(--portrait-h) * 0.22);
    color: #ffffff;
  }

  .trip-hero__title {
    font-size: clamp(2.75rem, 13vw, 3.5rem);
    text-shadow: 0 2px 20px rgb(0 0 0 / 0.2);
  }

  .trip-hero__heading .trip-facts {
    gap: 8px 16px;
    color: rgb(255 255 255 / 0.88);
    font-size: 14px;
  }

  .trip-hero__heading .trip-facts i {
    color: #ffffff;
    font-size: 17px;
  }

  .trip-hero__summary {
    margin: 0;
    padding: 4px var(--gutter) 0;
  }

  .trip-section {
    padding-top: 72px;
  }

  /* Phones: a simple list, label on the left and value on the right. */
  .trip-attrs {
    grid-template-columns: minmax(0, 1fr);
  }

  .trip-attr {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: 16px 18px;
  }

  .trip-attr:nth-child(-n + 2) {
    border-right: 0;
  }

  .trip-attr dd {
    justify-content: flex-end;
    font-size: 16px;
  }

  .trip-attr--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .trip-attr--wide dd {
    justify-content: flex-start;
  }

  .trip-included,
  .trip-promises,
  .trip-insider__points {
    grid-template-columns: minmax(0, 1fr);
  }

  .trip-tile {
    min-height: 360px;
  }

  /* Squares would be too small for the text on a phone. */
  .trip-promise {
    aspect-ratio: auto;
    min-height: 240px;
  }

  .guide-page {
    width: min(80vw, 300px);
  }

  .buy-bar:not([hidden]) {
    display: flex;
  }

  .has-buy-bar .footer {
    padding-bottom: 96px;
  }
}