/* Hallmark · genre: editorial · macrostructure: Photographic · theme: Garden
 * nav: N6 masthead · footer: Ft1 mast-headed · enrichment: Tier-A CSS placeholders
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 * Worldling Travel — primary stylesheet. References tokens.css by name only.
 */

@import url("tokens.css");

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  background: var(--color-paper);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;   /* avoid single-word orphan lines in body copy (all languages) */
}

/* ── Typography primitives ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-weight: var(--display-weight);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: break-word;   /* break only genuinely long words, not "Children" */
  word-break: normal;
  hyphens: none;
  min-width: 0;
  text-wrap: balance;          /* balance heading lines + avoid orphan last word */
}
.faq summary, .founder__name { text-wrap: balance; }
.display, .h1, .h2 {
  font-family: var(--font-display);
  font-style: var(--display-style);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
.h1 { font-size: var(--text-display); }
.h2 { font-size: var(--text-display-s); }
.h3 { font-size: var(--text-2xl); font-family: var(--font-display); font-style: var(--display-style); font-weight: 500; line-height: var(--lh-snug); }
.lede { font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--color-ink-2); max-width: var(--measure); }
.lede--wide { max-width: 64rem; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }
em, .em { font-style: italic; }
strong { font-weight: 600; }

.kicker {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
}
.eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── Layout ────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.wrap--narrow { max-width: 60rem; }
.section { padding-block: var(--section-gap); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4rem); }
.band--2 { background: var(--color-paper-2); }
.band--slab { background: var(--color-slab); color: var(--color-slab-ink); }
.band--slab .kicker { color: var(--color-accent-on-dark); }
.flow > * + * { margin-top: var(--space-md); }

.shead { display: flex; flex-direction: column; gap: var(--section-head-gap); max-width: 46rem; }
.shead .kicker + .h2 { margin-top: calc(-1 * var(--section-head-gap) + var(--space-2xs)); }
/* Reassure (slab) heading sits a touch lower under its kicker (Both·4) */
.band--slab .shead .kicker + .h2 { margin-top: calc(-1 * var(--section-head-gap) + var(--space-xs)); }
/* Why-page hero heading: wrap to three lines on desktop (Desktop·9) */
.why-title { max-width: 24ch; }

/* Skip link */
.skip {
  position: absolute; left: var(--space-md); top: -100px;
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-input);
  z-index: var(--z-modal); transition: top var(--dur-short) var(--ease-out);
}
.skip:focus { top: var(--space-md); }

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

/* ── Buttons & links ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-base);
  letter-spacing: var(--tracking-tight);
  padding: 0.85em 1.5em; min-height: 48px;
  background: var(--color-accent); color: var(--color-accent-ink);
  border: var(--rule-fine) solid var(--color-accent);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-micro) var(--ease-out),
              background var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
/* Hover darkens the terracotta fill; cream text stays legible (was inverting bg to the text colour → invisible text) */
.btn:hover {
  background: color-mix(in oklch, var(--color-accent) 84%, var(--color-ink));
  border-color: color-mix(in oklch, var(--color-accent) 84%, var(--color-ink));
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-soft);
}
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; pointer-events: none; }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); }
.btn--ghost:hover { background: var(--color-paper-3); border-color: var(--color-ink-2); box-shadow: none; }
.band--slab .btn--ghost { color: var(--color-slab-ink); border-color: var(--color-slab-rule); }
.band--slab .btn--ghost:hover { background: var(--color-slab-2); }
.btn--block { width: 100%; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 600; color: var(--color-ink);
  border-bottom: var(--rule-fine) solid var(--color-rule-2);
  padding-bottom: 2px; width: max-content;
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.arrow-link .ar { transition: transform var(--dur-short) var(--ease-out); }
.arrow-link:hover { border-color: var(--color-accent); color: var(--color-accent); }
.arrow-link:hover .ar { transform: translateX(4px); }
.band--slab .arrow-link { color: var(--color-slab-ink); border-color: var(--color-slab-rule); }

.badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: 0.35em 0.7em; border-radius: var(--radius-pill);
  border: var(--rule-fine) solid currentColor;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--open { color: var(--color-accent-2); }
.badge--wait { color: var(--color-muted); }

/* ── Masthead (N6) ─────────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: var(--z-sticky-nav);
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  transition: padding var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.masthead__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xs);
  overflow: hidden; max-height: 2.5rem;
  transition: max-height var(--dur-short) var(--ease-out),
              opacity var(--dur-short) var(--ease-out),
              padding var(--dur-short) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .masthead__top { transition: none; } }
.masthead__tag { font-family: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.masthead__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--space-md); padding-block: var(--space-sm);
}
.masthead.is-stuck .masthead__top { max-height: 0; opacity: 0; padding-block: 0; border-bottom-color: transparent; }
.masthead.is-stuck .masthead__bar { padding-block: var(--space-xs); }
.masthead.is-stuck { box-shadow: var(--shadow-soft); }

.wordmark {
  grid-column: 2; justify-self: center; text-align: center;
  font-family: var(--font-display); font-style: italic; line-height: 1;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  transition: font-size var(--dur-short) var(--ease-out);
}
.wordmark b { font-weight: 600; color: var(--color-ink); }
.wordmark span { font-weight: 500; font-style: normal; font-family: var(--font-body); font-size: 0.62em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); vertical-align: middle; margin-left: 0.4em; }
.masthead.is-stuck .wordmark { font-size: clamp(1.35rem, 1rem + 1vw, 1.6rem); }

.navlinks { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.navlinks a { font-size: 0.9375rem; font-weight: 500; color: var(--color-ink-2); white-space: nowrap; padding-block: var(--space-2xs); border-bottom: 1.5px solid transparent; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--color-accent); border-color: var(--color-accent); }

.masthead__lead { grid-column: 1; justify-self: start; display: flex; gap: var(--space-md); align-items: center; }

/* Language switcher */
.langs { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-label); font-size: var(--text-xs); }
.langs a { color: var(--color-muted); letter-spacing: 0.04em; padding: 2px 4px; border-radius: 4px; }
.langs a[aria-current="true"] { color: var(--color-ink); font-weight: 600; }
.langs a:hover { color: var(--color-accent); }
.langs .sep { color: var(--color-rule-2); }
.nav-langs { display: none; }

/* Mobile nav */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: var(--rule-fine) solid var(--color-rule-2); border-radius: var(--radius-input); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 18px; height: 1.5px; background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short); }
.nav-toggle span::before { transform: translateY(-6px); } .nav-toggle span::after { transform: translateY(6px); position: relative; top: -1.5px; }

/* ── Hero (Photographic / H6) ──────────────────────────────────────── */
.hero { position: relative; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: var(--section-gap); }
.hero__copy { max-width: 34rem; }
.hero__copy .lede { max-width: 42ch; }
.hero-line { display: inline; }   /* inline on mobile (natural wrap); block on desktop (manual breaks) */
/* Generic desktop-only manual line break (used on Trips/Parents copy) */
.dline { display: inline; }
.hero h1 { margin-block: var(--space-md) var(--space-lg); }
.hero__cta { margin-top: var(--space-xl); display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; }

.hero--photo .hero__media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-soft); }   /* 3:2 to match 1536×1024 hero photos, no crop */
.hero__media .ph, .trip-hero__media .ph { width: 100%; height: 100%; }

/* Hero photo slider — crossfading slides, auto-rotated by main.js every 3s */
.hero-slider { position: absolute; inset: 0; }
.hero-slider__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-in-out); }
.hero-slider__slide.is-active { opacity: 1; }
/* Gradient placeholder + photo stacked; photo (later in DOM) sits on top */
.hero-slider__slide .ph, .hero-slider__slide .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slider__slide .ph-img { object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hero-slider__slide { transition: none; } }
.hero__copy .h1 { font-size: clamp(2.6rem, 4.2vw + 1rem, 4.5rem); max-width: 14ch; }

/* Parallax wrapper */
.parallax { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .parallax { transform: none !important; } }

/* ── Photo placeholders (Tier-A, clearly not photography) ──────────── */
.ph {
  position: relative; overflow: hidden; background: var(--color-paper-3);
  background-image:
    linear-gradient(135deg, var(--ph-a) 0%, var(--ph-b) 100%);
  filter: saturate(0.85);
  display: grid; place-items: center;
}
.ph::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, oklch(100% 0 0 / 0.05) 0 2px, transparent 2px 9px);
  mix-blend-mode: overlay;
}
.ph__tag {
  position: relative; z-index: 1; font-family: var(--font-label);
  font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: oklch(22% 0.05 150 / 0.8); background: oklch(100% 0 0 / 0.4);
  padding: 0.4em 0.8em; border-radius: var(--radius-pill); backdrop-filter: blur(2px);
  text-align: center;
}
/* hue variation by slide index for visual rhythm */
.ph[style*="--i"] { --ph-a: oklch(78% 0.06 calc(120 + var(--i) * 22)); --ph-b: oklch(62% 0.085 calc(40 + var(--i) * 18)); }

/* Real photos (drop-in replacements for the placeholders above) */
picture { display: contents; }
.ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trip-card__media .ph-img { transition: transform var(--dur-long) var(--ease-out); }
.trip-card:hover .trip-card__media .ph-img { transform: scale(1.03); }
.gallery__slide .ph-img { aspect-ratio: 3 / 2; height: auto; }
.lightbox__fig .ph-img { aspect-ratio: 3 / 2; width: 100%; max-height: 86vh; border-radius: var(--radius-card); object-fit: contain; }

/* ── Thesis band ───────────────────────────────────────────────────── */
.thesis { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
.thesis__body { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--color-ink-2); max-width: var(--measure); }

/* ── Reassurance strip (hairline columns, not cards) ───────────────── */
.reassure { display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-2xl); }
.reassure__item { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-top: var(--rule-fine) solid var(--color-slab-rule); }
.reassure__item + .reassure__item { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-slab-rule); }
.reassure__item h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); color: var(--color-slab-ink); }
.reassure__item p { color: var(--color-slab-muted); font-size: var(--text-base); }
.coverage-lead { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent-on-dark); }

/* ── Trip cards ────────────────────────────────────────────────────── */
.trip-grid { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.trip-card { display: flex; flex-direction: column; }
.trip-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; margin-bottom: var(--space-md); }
.trip-card__badge { position: absolute; left: var(--space-sm); top: var(--space-sm); z-index: 1; background: color-mix(in oklch, var(--color-paper) 86%, transparent); backdrop-filter: blur(4px); border-radius: var(--radius-pill); }
.trip-card__dates { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
/* Season label — solid brand-green pill with cream text, sits below the title */
.trip-card__season {
  display: flex; align-items: center; width: max-content;
  margin-bottom: var(--space-xs);
  padding: 0.32em 0.8em;
  background: var(--color-accent-2); color: var(--color-accent-ink);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-tight);
  border-radius: var(--radius-pill); text-transform: none;
}
.trip-hero__season { margin: 0 0 var(--space-md); }
.trip-card h3 { font-size: var(--text-2xl); margin-block: var(--space-xs); }
.trip-title__lead { display: block; font-weight: 700; }   /* bolder destination titles (Both·1) */
.trip-title__sub { display: block; font-style: italic; color: var(--color-muted); margin-top: 0.06em; line-height: 1.12; }
.trip-card h3 .trip-title__sub { font-size: var(--text-md); }
.trip-hero .trip-title__sub { font-size: var(--text-xl); color: var(--color-ink-2); }
.trip-card__sum { color: var(--color-ink-2); margin-bottom: var(--space-md); max-width: 38ch; }
.trip-card__foot { margin-top: auto; padding-top: var(--space-sm); }
.trip-card__media .ph { width: 100%; height: 100%; transition: transform var(--dur-long) var(--ease-out); }
.trip-card:hover .trip-card__media .ph { transform: scale(1.03); }

/* ── Trip detail ───────────────────────────────────────────────────── */
.trip-hero { padding-top: clamp(2rem, 5vw, 3.5rem); }
.trip-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: center; margin-bottom: var(--space-md); font-family: var(--font-label); font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
.trip-hero h1 { font-size: clamp(2.6rem, 4vw + 1rem, 4.5rem); margin-bottom: var(--space-md); }
.trip-hero .lede { font-size: var(--text-xl); }
.trip-hero__media { margin-top: var(--space-xl); aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; }

.detail-layout { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
.detail-main > * + * { margin-top: var(--section-gap); }
.detail-aside { position: sticky; top: calc(var(--nav-height) + var(--space-md)); display: flex; flex-direction: column; gap: var(--space-lg); }

/* Itinerary */
.itinerary { border-top: var(--rule-fine) solid var(--color-rule); }
.day { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.day__label { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); padding-top: 0.5em; }
.day__title { font-size: var(--text-2xl); margin-bottom: var(--space-xs); }
.day__body { color: var(--color-ink-2); max-width: var(--measure); }

/* Experiences callout */
.experiences { background: var(--color-paper-2); border-radius: var(--radius-card); padding: clamp(1.5rem, 4vw, 2.5rem); }
.exp-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-top: var(--space-lg); }
.exp-item { padding-top: var(--space-md); border-top: var(--rule-fine) solid var(--color-rule-2); }
.exp-item h3 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); font-family: var(--font-display); font-style: italic; }
.exp-item p { color: var(--color-ink-2); font-size: var(--text-base); }

/* Details sidebar card */
.detail-card { border: var(--rule-card) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); background: var(--color-paper); box-shadow: var(--shadow-card); }
.detail-card dl { display: grid; gap: var(--space-md); }
.detail-card dt { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.detail-card dd { font-size: var(--text-md); }
.detail-card .price { font-family: var(--font-display); font-style: italic; font-size: var(--text-2xl); line-height: 1.1; }
.detail-card .tbd { color: var(--color-accent); }
.note { font-size: var(--text-sm); color: var(--color-muted); }
.draft-flag { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-accent); }
.incl-list li, .excl-list li { padding-left: 1.4em; position: relative; margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-base); }
.incl-list li::before { content: "+"; position: absolute; left: 0; color: var(--color-accent-2); font-weight: 700; }
.excl-list li::before { content: "–"; position: absolute; left: 0; color: var(--color-muted); }

/* ── Gallery / carousel ────────────────────────────────────────────── */
.gallery { position: relative; }
.gallery__viewport { overflow: hidden; border-radius: var(--radius-card); }
.gallery__track { display: flex; transition: transform var(--dur-long) var(--ease-in-out); }
@media (prefers-reduced-motion: reduce) { .gallery__track { transition: none; } }
.gallery__slide { flex: 0 0 100%; min-width: 0; }
.gallery__slide button { width: 100%; display: block; cursor: zoom-in; }
.gallery__slide .ph { aspect-ratio: 3 / 2; width: 100%; }
.gallery__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); }
.gallery__nav { display: flex; gap: var(--space-xs); }
.gallery__btn { width: 44px; height: 44px; border: var(--rule-fine) solid var(--color-rule-2); border-radius: var(--radius-pill); display: grid; place-items: center; transition: background var(--dur-short), border-color var(--dur-short); }
.gallery__btn:hover { background: var(--color-paper-3); border-color: var(--color-ink-2); }
.gallery__count { font-family: var(--font-label); font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.gallery__dots { display: flex; gap: 6px; flex-wrap: wrap; }
.gallery__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-rule); transition: background var(--dur-short), transform var(--dur-short); }
.gallery__dot[aria-current="true"] { background: var(--color-accent); transform: scale(1.3); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: oklch(14% 0.04 150 / 0.92); display: none; place-items: center; padding: var(--page-gutter); }
.lightbox[open], .lightbox.is-open { display: grid; }
.lightbox__fig { max-width: 90vw; max-height: 86vh; width: min(64rem, 90vw); }
.lightbox__fig .ph { aspect-ratio: 3 / 2; border-radius: var(--radius-card); }
.lightbox__cap { color: var(--color-slab-ink); font-size: var(--text-sm); margin-top: var(--space-sm); text-align: center; }
.lightbox__close { position: absolute; top: var(--space-md); right: var(--space-md); width: 48px; height: 48px; border-radius: var(--radius-pill); background: oklch(100% 0 0 / 0.12); color: oklch(98% 0 0); display: grid; place-items: center; font-size: 1.4rem; }
.lightbox__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: var(--radius-pill); background: oklch(100% 0 0 / 0.12); color: oklch(98% 0 0); display: grid; place-items: center; }
.lightbox__arrow--prev { left: clamp(0.5rem, 3vw, 2rem); } .lightbox__arrow--next { right: clamp(0.5rem, 3vw, 2rem); }
.lightbox__arrow:hover, .lightbox__close:hover { background: oklch(100% 0 0 / 0.22); }

/* ── Forms ─────────────────────────────────────────────────────────── */
.form { max-width: 38rem; }
.form--wide { max-width: 46rem; }
.field { display: flex; flex-direction: column; gap: var(--space-2xs); margin-top: var(--space-md); }
.field > label { font-size: var(--text-sm); font-weight: 600; }
.field .opt { color: var(--color-muted); font-weight: 400; }
.field input, .field select, .field textarea {
  border: var(--rule-card) solid var(--color-rule-2); border-radius: var(--radius-input);
  background: var(--color-paper); padding: 0.7em 0.85em; font-size: var(--text-base);
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 22%, transparent); }
.field textarea { resize: vertical; min-height: 6.5rem; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.field--row .field { margin-top: 0; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-accent); }
.field__error { font-size: var(--text-sm); color: var(--color-accent); display: none; }
.field.has-error .field__error { display: block; }

/* Choice (radio) group */
.choice-group { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
.choice-group > legend { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2xs); padding: 0; }
.choice { display: flex; align-items: center; gap: var(--space-sm); padding: 0.7em 0.9em; border: var(--rule-card) solid var(--color-rule-2); border-radius: var(--radius-input); cursor: pointer; transition: border-color var(--dur-short), background var(--dur-short); }
.choice:hover { border-color: var(--color-ink-2); background: var(--color-paper-2); }
.choice input { accent-color: var(--color-accent); width: 1.1em; height: 1.1em; }
.choice:has(input:checked) { border-color: var(--color-accent); background: color-mix(in oklch, var(--color-accent) 8%, transparent); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 22%, transparent); }

/* Flight-interest reveal + contact buttons */
.flight-reveal { margin-top: var(--space-lg); padding: var(--space-lg); border: var(--rule-fine) dashed var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper-2); }
.flight-reveal[hidden] { display: none; }
.contact-buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-md); }
.contact-btn { display: inline-flex; flex-direction: column; gap: 2px; padding: 0.7em 1.2em; border: var(--rule-card) solid var(--color-rule-2); border-radius: var(--radius-input); transition: border-color var(--dur-short), background var(--dur-short); }
.contact-btn:hover { border-color: var(--color-accent); background: var(--color-paper); }
.contact-btn b { font-size: var(--text-base); }
.contact-btn span { font-size: var(--text-xs); color: var(--color-muted); font-family: var(--font-label); letter-spacing: 0.02em; }
.contact-btn--static { cursor: default; }
.contact-btn--static:hover { border-color: var(--color-rule-2); background: transparent; }
.wechat-qr { margin-top: var(--space-lg); display: flex; gap: var(--space-md); align-items: center; }
.wechat-qr img { width: 116px; height: 116px; flex: 0 0 auto; background: #fff; padding: 6px; border: var(--rule-card) solid var(--color-rule); border-radius: var(--radius-input); }
.wechat-qr figcaption { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }

.form__submit { margin-top: var(--space-xl); }
.form-success { display: none; padding: var(--space-lg); border-radius: var(--radius-card); border: var(--rule-card) solid var(--color-accent-2); background: color-mix(in oklch, var(--color-accent-2) 8%, var(--color-paper)); }
.form.is-done .form-success { display: block; }
.form.is-done .form-body { display: none; }
.form-success h3 { font-size: var(--text-xl); margin-bottom: var(--space-2xs); }

/* ── Email capture component ───────────────────────────────────────── */
.capture { max-width: 32rem; }
.capture__row { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.capture__row input { flex: 1 1 auto; min-width: 0; border: var(--rule-card) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-paper); padding: 0.7em 0.85em; font-size: var(--text-base); }
.capture__row input:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent) 22%, transparent); }
.band--slab .capture__row input { background: var(--color-slab-2); border-color: var(--color-slab-rule); color: var(--color-slab-ink); }
.capture__msg { font-size: var(--text-sm); color: var(--color-accent-2); margin-top: var(--space-xs); min-height: 1.2em; }
.band--slab .capture__msg { color: var(--color-accent-on-dark); }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq-list { border-top: var(--rule-fine) solid var(--color-rule); max-width: 52rem; }
.faq { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); cursor: pointer; list-style: none; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-xl); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius-pill); border: var(--rule-fine) solid var(--color-rule-2); display: grid; place-items: center; font-family: var(--font-body); font-size: 1.1rem; transition: transform var(--dur-short) var(--ease-out), background var(--dur-short); margin-top: 0.2em; }
.faq[open] summary .pm { transform: rotate(45deg); background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.faq__answer { padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: var(--measure); }
.faq[open] .faq__answer { animation: reveal-fade var(--dur-long) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .faq[open] .faq__answer { animation: none; } }

/* ── Values / about ────────────────────────────────────────────────── */
.values { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: var(--space-2xl); }
.value-item { padding-top: var(--space-md); border-top: 2px solid var(--color-accent); }
.value-item h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.value-item p { color: var(--color-ink-2); text-wrap: balance; }   /* even out lines, no "carries home" orphan (Desktop·6) */

/* Founders (About) */
.founders { display: grid; gap: var(--space-2xl); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-2xl); }
.founder { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.founder__photo { aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-paper-3); }
.founder__photo .ph { width: 100%; height: 100%; }
.founder__photo .ph__tag { font-size: 0.6rem; padding: 0.3em 0.5em; }
.founder__name { font-size: var(--text-xl); font-family: var(--font-display); font-style: italic; }
.founder__role { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); margin: var(--space-3xs) 0 var(--space-sm); }
.founder__bio { color: var(--color-ink-2); }

.argument > * + * { margin-top: var(--space-2xl); }
.argument__block { display: grid; gap: var(--space-md) var(--space-xl); grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); align-items: baseline; }
.argument__block h2 { font-size: var(--text-2xl); font-weight: 600; }   /* slightly bolder section titles (Both·8) */
.argument__block p { color: var(--color-ink-2); font-size: var(--text-base); line-height: var(--lh-relaxed); max-width: none; }

.founder-note { border-left: 2px solid var(--color-accent); padding-left: var(--space-lg); max-width: 44rem; }
.founder-note .sig { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--color-accent); margin-top: var(--space-md); }

/* ── Language banner (es/zh review note) ───────────────────────────── */
.lang-banner { background: var(--color-accent-2); color: var(--color-accent-ink); font-size: var(--text-sm); text-align: center; padding: var(--space-xs) var(--page-gutter); }

/* ── Footer (Ft1) ──────────────────────────────────────────────────── */
.site-footer { background: var(--color-slab); color: var(--color-slab-ink); padding-block: var(--section-gap) var(--space-xl); }
/* Footer language switcher on the dark slab — keep selected + hover legible */
.site-footer .langs a { color: var(--color-slab-muted); }
.site-footer .langs a[aria-current="true"] { color: var(--color-accent-on-dark); }
.site-footer .langs a:hover { color: var(--color-slab-ink); }
.site-footer .langs .sep { color: var(--color-slab-rule); }
.footer-top { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.7fr) minmax(0, 0.85fr); padding-bottom: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-slab-rule); }
.footer-brand .wordmark { text-align: left; justify-self: start; font-size: 2rem; color: var(--color-slab-ink); }
.footer-brand .wordmark b { color: var(--color-slab-ink); }
.footer-brand .wordmark span { color: var(--color-slab-muted); }
/* Footer mission balances onto two lines (Desktop·3) */
.footer-brand > p { color: var(--color-slab-muted); max-width: 28rem; margin-top: var(--space-md); text-wrap: balance; }
.footer-news { margin-top: var(--space-lg); }
.footer-news h3 { font-size: var(--text-lg); font-family: var(--font-display); font-style: italic; }
.footer-news p { color: var(--color-slab-muted); font-size: var(--text-sm); }
.footer-col h4 { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-slab-muted); margin-bottom: var(--space-md); }
.footer-col li + li { margin-top: var(--space-xs); }
.footer-col a { color: var(--color-slab-ink); }
.footer-col a:hover { color: var(--color-accent); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); justify-content: space-between; align-items: center; padding-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-slab-muted); }
.footer-coverage { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-slab-ink); }
.footer-coverage::before { content: "+"; color: var(--color-accent-on-dark); font-weight: 700; }
/* Match the copyright muted tone so it stays readable on the dark slab (Both·3) */
.site-footer .footer-legal.note { max-width: none; color: var(--color-slab-muted); }

/* ── Reveal animation ──────────────────────────────────────────────── */
@keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── On-the-way grid: keep the lone card the same size as the open cards,
   not stretched full-width (Both·9). Mobile falls back to the base full-width. */
@media (min-width: 44rem) {
  .trip-grid--solo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* For-parents flights: keep all four channel buttons on one row (Desktop·8) */
@media (min-width: 48rem) {
  .flights .contact-buttons { flex-wrap: nowrap; gap: var(--space-sm); }
  .flights .contact-btn { flex: 1 1 0; min-width: 0; }
}

/* ── Desktop-only refinements (above the single-column breakpoint) ───── */
@media (min-width: 60.0625rem) {
  /* Hero: 3-line title, photo ≈560×480 sitting ~35px below the navbar (Desktop·1,2) */
  .hero__inner {
    align-items: center;   /* center the photo vertically → equal gap above & below it */
    padding-top: 35px;
    grid-template-columns: minmax(31rem, 0.92fr) minmax(0, 1.08fr);   /* slimmer copy floor; more width to the photo */
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .hero__copy { max-width: none; }
  /* Manual line breaks render one line per span (Desktop·1,2) */
  .hero-line { display: block; }
  .hero__copy .h1 { font-size: clamp(2.6rem, 3.3vw + 1rem, 3.5rem); max-width: none; }
  .hero__copy .lede { font-size: 1.25rem; max-width: 46ch; }   /* slightly smaller description (helps the slimmer column) */
  .hero__cta { margin-top: 2rem; }   /* slightly less space above Explore trips */
  .hero--photo .hero__media {
    aspect-ratio: 3 / 2;   /* matches 1536×1024 photos — full image, no crop; fills its column */
    width: 100%;
  }
  /* "Become a Worldling" newsletter heading, slightly larger (Desktop·4) */
  .footer-news h3 { font-size: 1.55rem; }
  /* Destination titles a little smaller (desktop only) */
  .trip-card h3 { font-size: 2rem; }
  /* Halve the space below the email field in About → Join the Worldlings (Desktop·7) */
  .community-slab { padding-bottom: calc(var(--section-gap) / 2); }
  /* Desktop-only manual line breaks: one line per span, container free to widen */
  .dline { display: block; }
  .dlines-wide { max-width: none; }
  /* The Parents (es) hero lede holds two long lines — ease the size so they fit */
  .lede.dlines-wide { font-size: 1.25rem; }
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: clamp(1rem, 2.5vw, 2rem);              /* half the space above the photo (Mobile·2) */
    padding-bottom: calc(var(--section-gap) / 2);       /* half the space below the Explore button (Mobile·4) */
  }
  .hero__media { order: -1; }
  .hero--photo .hero__media { aspect-ratio: 3 / 2; }   /* match 3:2 hero photos */
  .hero__copy, .hero__copy .h1 { max-width: 100%; }
  .hero__cta { margin-top: 1.25rem; }                   /* half the space above the Explore button (Mobile·3) */
  .thesis { gap: var(--section-head-gap); }             /* match "Where we're going" title→text gap (Mobile·5) */
  .founders { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-aside { position: static; }
  .thesis { grid-template-columns: minmax(0, 1fr); }
  .argument__block { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48rem) {
  .masthead__bar { grid-template-columns: auto 1fr auto; }
  .wordmark { grid-column: 1; justify-self: start; text-align: left; }
  .masthead__lead { display: none; }
  .navlinks { display: none; }
  .nav-toggle { display: inline-flex; grid-column: 3; justify-self: end; }
  .masthead.is-open .navlinks {
    display: flex; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: var(--space-md);
    background: var(--color-paper); border-bottom: var(--rule-fine) solid var(--color-rule);
    padding: var(--space-lg) var(--page-gutter); box-shadow: var(--shadow-soft);
  }
  .masthead.is-open .navlinks a { font-size: var(--text-lg); }
  .masthead.is-open .nav-langs { display: flex; padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); width: 100%; }
  .masthead__top { display: none; }
  .reassure { grid-template-columns: minmax(0, 1fr); margin-top: 2rem; }   /* half the desktop gap (Mobile·5) */
  .reassure__item + .reassure__item { padding-left: 0; border-left: none; }
  .reassure__item:first-child { border-top: none; padding-top: 0; }        /* drop the rule above the first item (Mobile·4) */
  .reassure__item h3 { font-size: var(--text-md); }                        /* slightly smaller titles (Mobile·2) */
  .day { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .day__label { padding-top: 0; }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .field--row { grid-template-columns: 1fr; gap: 0; }
  .field--row .field { margin-top: var(--space-md); }
}
@media (max-width: 40rem) {
  /* Mobile type audit (Mobile·6): one calm ladder — h1 > h2 > h3 > lede > body.
     Fixes the previous inversion where .h3 (text-2xl) outsized .h2 on phones. */
  :root {
    --text-3xl: 2.125rem;
    --text-2xl: 1.6875rem;
    --text-xl:  1.4375rem;
    --text-lg:  1.25rem;
    --text-md:  1.125rem;
    --text-display-s: clamp(2.3rem, 7vw + 0.5rem, 3rem);  /* a touch larger (Mobile·3) */
  }
  .lede { font-size: var(--text-md); }
  .h3 { font-size: var(--text-xl); }
  .trip-hero .lede { font-size: var(--text-lg); }
  .day__title { font-size: var(--text-xl); }
  .faq summary { font-size: var(--text-lg); }
  .thesis__body { font-size: var(--text-base); }

  .hero__cta .btn, .hero__cta .arrow-link { width: 100%; }
  .capture__row { flex-direction: column; }
  .capture__row .btn { width: 100%; }

  .hero__copy .h1 { font-size: 2.85rem; }                       /* slightly larger hero title */
  /* "Become a Worldling" newsletter heading, larger again on phones (Mobile·1) */
  .footer-news h3 { font-size: 1.5rem; }
  /* Tighter gap above each card's "Learn more" link (Mobile·2) */
  .trip-card__sum { margin-bottom: var(--space-2xs); }
  .trip-card__foot { padding-top: 0; }
  /* Why-page hero heading wraps to four lines on phones (Mobile·8) */
  .why-title { font-size: clamp(1.7rem, 6.5vw, 2.2rem); max-width: 21ch; text-wrap: pretty; }
}