/* ============================================================
   Kay Jones — Travel + Retreats
   "The Exhale" design system
   Palette: Sea Bone — bone / driftwood ink / ocean #20788C
   Display: Cormorant Garamond · Body: Plus Jakarta Sans
   ============================================================ */

@layer reset, tokens, base, components, sections, utilities;

/* ---------- Reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img, picture, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  ul[class], ol[class] { list-style: none; }
  html { -webkit-text-size-adjust: 100%; }
}

/* ---------- Tokens ---------- */
@layer tokens {
  :root {
    /* color */
    --bg: #F8F5EE;
    --surface: #FDFBF6;
    --surface-2: #F2EDE2;
    --fg: #26221B;
    --fg-soft: rgba(38, 34, 27, 0.72);
    --muted: #6E6558;
    --faint: rgba(38, 34, 27, 0.38);
    --border: #E5DFD2;
    --border-strong: #D5CDBB;
    --accent: #20788C;
    --accent-hover: #1A6070;
    --accent-soft: #E4EFF2;
    --accent-text: #1C6D80;
    --accent-on-ink: #8FC6D4;      /* light ocean for dark spreads */
    --ink: #211E18;
    --ink-2: #2A261F;
    --ink-fg: #F3EEE2;
    --ink-fg-soft: rgba(243, 238, 226, 0.72);
    --ink-border: rgba(243, 238, 226, 0.14);
    --danger: #A03E2E;

    /* type */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --text-hero: clamp(2.75rem, 6.5vw, 5rem);
    --text-h2: clamp(2rem, 4.2vw, 3.25rem);
    --text-h3: clamp(1.5rem, 2.6vw, 2rem);
    --text-h4: 1.25rem;
    --text-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
    --text-body: 1rem;
    --text-sm: 0.875rem;
    --text-eyebrow: 0.75rem;

    /* space (8px grid) */
    --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
    --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem; --s-12: 3rem;
    --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;   --s-32: 8rem;
    --section-y: clamp(4rem, 10vw, 8.5rem);
    --container: 72rem;
    --container-narrow: 46rem;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);

    /* shape + depth */
    --r-btn: 2px;
    --r-card: 4px;
    --elev-1: 0 1px 2px rgba(33, 30, 24, .18), 0 1px 3px 1px rgba(33, 30, 24, .09);
    --elev-2: 0 1px 2px rgba(33, 30, 24, .18), 0 2px 6px 2px rgba(33, 30, 24, .09);

    /* motion */
    --ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);   /* entrances */
    --ease-in: cubic-bezier(0.3, 0, 0.8, 0.15);    /* exits */
    --t-fast: 180ms;
    --t-med: 320ms;
    --t-slow: 640ms;
    --t-settle: 8s;
  }
}

/* ---------- Base ---------- */
@layer base {
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  h2 { font-size: var(--text-h2); }
  h2 + p, h2 + ul { margin-top: var(--s-4); }
  h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-h4); text-wrap: balance; }
  p, li { text-wrap: pretty; }
  em { font-style: italic; }
  h1 em, h2 em, h3 em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--accent);
  }
  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--faint);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--t-fast) var(--ease-out);
  }
  a:hover { text-decoration-color: var(--fg); }
  ::selection { background: var(--accent); color: var(--bg); }
  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    animation: focus-grow 600ms var(--ease-out);
  }
  @keyframes focus-grow { from { outline-width: 8px; } to { outline-width: 3px; } }
  main { display: block; }

  .skip-link {
    background: var(--surface);
    color: var(--fg);
    left: 0;
    padding: var(--s-3) var(--s-6);
    position: absolute;
    top: -3.8rem;
    transition: top 150ms ease;
    z-index: 200;
    text-decoration: none;
  }
  .skip-link:focus { top: 0; }

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

/* ---------- Components ---------- */
@layer components {

  .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
  .container--narrow { max-width: var(--container-narrow); }

  /* Eyebrow */
  .eyebrow {
    display: block;
    font-size: var(--text-eyebrow);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--s-4);
  }
  .spread--ink .eyebrow { color: var(--ink-fg-soft); }

  /* Lead paragraph */
  .lead { font-size: var(--text-lead); line-height: 1.6; color: var(--fg-soft); }
  .spread--ink .lead { color: var(--ink-fg-soft); }

  /* Buttons — fill + slight lift on hover, state layer */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.9rem 1.9rem;
    border-radius: var(--r-btn);
    font-weight: 500;
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    text-decoration: none;
    position: relative;
    isolation: isolate;
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
    min-height: 44px;
  }
  .btn::after {
    content: "";
    position: absolute; inset: 0;
    background: currentColor; opacity: 0;
    border-radius: inherit;
    transition: opacity var(--t-fast) var(--ease-out);
    pointer-events: none;
  }
  .btn:hover { transform: translateY(-1px); box-shadow: var(--elev-2); }
  .btn:hover::after { opacity: 0.08; }
  .btn:active::after { opacity: 0.12; }
  .btn--primary { background: var(--accent); color: #F5F2E9; }
  .btn--primary:hover { background: var(--accent-hover); }
  .btn--ghost {
    background: transparent;
    color: inherit;
    border: 1px solid var(--border-strong);
  }
  .spread--ink .btn--ghost { border-color: var(--ink-border); }
  .btn--light { background: var(--bg); color: var(--fg); }

  /* Text link with arrow */
  .textlink {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-weight: 500; font-size: var(--text-sm); letter-spacing: 0.03em;
    text-decoration: none;
    color: var(--accent-text);
    padding-block: var(--s-2);
  }
  .textlink svg { transition: translate var(--t-fast) var(--ease-out); }
  .textlink:hover svg { translate: 4px 0; }
  .spread--ink .textlink { color: var(--accent-on-ink); }

  /* ---------- Signature: the Horizon Line ---------- */
  .horizon {
    display: flex; align-items: center; gap: 0;
    margin-block: var(--s-8);
    height: 9px;
  }
  .horizon__line {
    display: block; height: 1px; background: var(--border-strong);
    flex: 1;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 1100ms var(--ease-out);
  }
  .horizon__sun {
    display: block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    margin-left: -4px;
    opacity: 0;
    transition: opacity 500ms var(--ease-out) 700ms;
  }
  .horizon.in .horizon__line, .no-js .horizon .horizon__line { transform: scaleX(1); }
  .horizon.in .horizon__sun, .no-js .horizon .horizon__sun { opacity: 1; }
  .spread--ink .horizon__line { background: var(--ink-border); }
  .spread--ink .horizon__sun { background: var(--accent-on-ink); }
  .horizon--center { max-width: 220px; margin-inline: auto; }

  /* ---------- Nav ---------- */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    transition: background-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), padding var(--t-med) var(--ease-out);
    padding-block: 1.1rem;
  }
  .nav__inner {
    max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  }
  .nav__logo { text-decoration: none; display: inline-flex; flex-direction: column; line-height: 1; position: relative; z-index: 110; }
  .nav__logo-name {
    font-family: 'Montserrat', var(--font-body); font-weight: 700; font-size: 1.02rem;
    letter-spacing: 0.16em; text-transform: uppercase;
  }
  .nav__logo-sub {
    font-size: 0.5625rem; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--muted); margin-top: 3px; font-weight: 500;
  }
  .nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
  .nav__link {
    text-decoration: none; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.03em;
    position: relative; padding-block: var(--s-2);
  }
  .nav__link::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: currentColor;
    transition: right var(--t-med) var(--ease-out);
  }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after { right: 0; }
  .nav__cta { margin-left: var(--s-2); }
  .nav .btn { padding: 0.65rem 1.35rem; }

  /* over dark hero */
  .nav--over-dark:not(.nav--scrolled):not(.nav--open) { color: #F5F2E9; }
  .nav--over-dark:not(.nav--scrolled):not(.nav--open) .nav__logo-sub { color: rgba(245, 242, 233, 0.75); }
  .nav--over-dark:not(.nav--scrolled):not(.nav--open) .btn--primary { background: rgba(248, 245, 238, 0.22); backdrop-filter: blur(10px); border: 1px solid rgba(245,242,233,0.55); }
  /* scrolled */
  .nav--scrolled {
    background: rgba(248, 245, 238, 0.86);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--border);
    padding-block: 0.7rem;
  }

  /* Mobile nav */
  .nav__toggle { display: none; }
  .nav__overlay-meta { display: none; }
  @media (max-width: 860px) {
    .nav__links {
      position: fixed; inset: 0;
      background: var(--bg);
      flex-direction: column; justify-content: center; align-items: center;
      gap: var(--s-6);
      opacity: 0; visibility: hidden;
      transition: opacity var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
    }
    .nav--open .nav__links {
      opacity: 1; visibility: visible;
      transition: opacity var(--t-med) var(--ease-out);
    }
    .nav--open { color: var(--fg); }
    .nav__link { font-size: 1.35rem; font-family: var(--font-display); letter-spacing: 0; opacity: 0; translate: 0 14px; }
    .nav--open .nav__link {
      opacity: 1; translate: 0 0;
      transition: opacity var(--t-slow) var(--ease-out) calc(var(--i, 0) * 70ms), translate var(--t-slow) var(--ease-out) calc(var(--i, 0) * 70ms);
    }
    .nav__cta { opacity: 0; }
    .nav--open .nav__cta { opacity: 1; transition: opacity var(--t-slow) var(--ease-out) 380ms; }
    .nav__overlay-meta {
      display: none;
      position: absolute; bottom: max(2rem, env(safe-area-inset-bottom)); left: 0; right: 0;
      text-align: center;
      font-size: var(--text-sm); color: var(--muted);
      opacity: 0;
    }
    .nav--open .nav__overlay-meta { display: block; opacity: 1; transition: opacity var(--t-slow) var(--ease-out) 460ms; }
    .nav__overlay-meta a { color: var(--fg); }
    .nav__toggle {
      display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
      width: 44px; height: 44px; align-items: center;
      position: relative; z-index: 110;
    }
    .nav__toggle-bar {
      display: block; width: 22px; height: 1.5px; background: currentColor;
      transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast);
    }
    .nav--open .nav__toggle { color: var(--fg); }
    .nav--open .nav__toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav--open .nav__toggle-bar:nth-child(2) { opacity: 0; }
    .nav--open .nav__toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  }

  /* ---------- Reveal ---------- */
  .reveal {
    opacity: 0;
    translate: 0 24px;
    transition: opacity 700ms var(--ease-out) calc(var(--d, 0) * 90ms), translate 700ms var(--ease-out) calc(var(--d, 0) * 90ms);
  }
  .reveal.in, .no-js .reveal { opacity: 1; translate: 0 0; }

  /* ---------- Cards ---------- */
  .card {
    background: transparent;
    display: flex; flex-direction: column;
  }
  .card__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-card); }
  .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
  .card:hover .card__media img { transform: scale(1.035); }
  .card__body { padding: var(--s-4) 0 0; display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
  .card__body .textlink { margin-top: auto; }

  /* ---------- Forms ---------- */
  .form-group { margin-top: var(--s-6); }
  .label { display: block; font-weight: 500; font-size: var(--text-sm); margin-bottom: var(--s-2); }
  .hint { display: block; font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--s-2); }
  .input, .textarea, .select {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-btn);
    padding: 0.8rem 1rem;
    transition: border-color var(--t-fast) var(--ease-out);
    min-height: 48px;
  }
  .textarea { min-height: 8.5rem; resize: vertical; }
  .input:focus, .textarea:focus, .select:focus { border-color: var(--accent); outline-offset: 0; }
  .form-group--error { border-left: 4px solid var(--danger); padding-left: 16px; }
  .error-message { color: var(--danger); display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--s-2); }
  .input--error, .textarea--error { border: 2px solid var(--danger); }
  .form-status { margin-top: var(--s-4); font-size: var(--text-sm); }
  .form-success {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--r-card);
    padding: var(--s-8);
    text-align: center;
  }
  .form-success h3 { margin-bottom: var(--s-3); }

  /* Newsletter inline form */
  .newsletter-form { display: flex; gap: var(--s-3); max-width: 30rem; margin-inline: auto; }
  .newsletter-form .input { flex: 1; }
  @media (max-width: 560px) { .newsletter-form { flex-direction: column; } }

  /* ---------- Tables / stats ---------- */
  .statband { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-12); }
  .stat { min-width: 8rem; }
  .stat__num { font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 500; line-height: 1; }
  .stat__label { font-size: var(--text-sm); color: var(--muted); margin-top: var(--s-2); }
  .spread--ink .stat__label { color: var(--ink-fg-soft); }

  /* Pull quote */
  .pullquote {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.3;
    text-wrap: balance;
  }
  .pullquote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: var(--text-sm); color: var(--muted); margin-top: var(--s-6); letter-spacing: 0.06em; text-transform: uppercase; }
  .spread--ink .pullquote cite { color: var(--ink-fg-soft); }

  /* FAQ accordion */
  .faq { border-top: 1px solid var(--border); }
  .faq__item { border-bottom: 1px solid var(--border); }
  .faq__q {
    width: 100%; text-align: left;
    display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
    padding: var(--s-6) 0;
    font-weight: 500; font-size: 1.0625rem;
  }
  .faq__q::after {
    content: "+";
    font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
    color: var(--accent);
    transition: transform var(--t-med) var(--ease-out);
    flex-shrink: 0;
  }
  .faq__item[data-open] .faq__q::after { transform: rotate(45deg); }
  .faq__a {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-med) var(--ease-out);
  }
  .faq__item[data-open] .faq__a { grid-template-rows: 1fr; }
  .faq__a-inner { overflow: hidden; }
  .faq__a-inner p { padding-bottom: var(--s-6); color: var(--fg-soft); max-width: 60ch; }
  .no-js .faq__a { grid-template-rows: 1fr; }

  /* Partner names band */
  .partners { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-10); align-items: baseline; justify-content: center; }
  .partners li {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
  }
  .spread--ink .partners li { color: var(--ink-fg-soft); }

  /* Steps */
  .steps { display: grid; gap: var(--s-8); grid-template-columns: repeat(3, 1fr); counter-reset: step; }
  @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
  .step { position: relative; padding-top: var(--s-10); }
  .step::before {
    counter-increment: step;
    content: "0" counter(step);
    position: absolute; top: 0; left: 0;
    font-family: var(--font-display); font-style: italic;
    font-size: 1.5rem; color: var(--accent);
  }
  .step::after {
    content: ""; position: absolute; top: 0.85rem; left: 2.6rem; right: 0;
    height: 1px; background: var(--border);
  }
  .step h3 { font-size: 1.375rem; margin-bottom: var(--s-3); }
  .step p { color: var(--fg-soft); font-size: var(--text-sm); line-height: 1.7; }
  .spread--ink .step p { color: var(--ink-fg-soft); }
  .spread--ink .step::after { background: var(--ink-border); }
  .spread--ink .step::before { color: var(--accent-on-ink); }

  /* Checklist */
  .checklist { display: grid; gap: var(--s-3); }
  .duo__text .checklist { margin-block: var(--s-2) var(--s-4); }
  .checklist + p { margin-top: var(--s-4); }

  /* ---------- Review cards (verified Fora reviews) ---------- */
  .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  @media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }
  .review {
    border-radius: var(--r-card);
    padding: var(--s-6);
    display: flex; flex-direction: column; gap: var(--s-3);
    background: rgba(243, 238, 226, 0.055);
  }
  .review__stars { color: var(--accent-on-ink); font-size: var(--text-sm); letter-spacing: 0.25em; }
  .review__quote { font-size: var(--text-sm); line-height: 1.7; flex: 1; }
  .review__meta {
    font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--ink-fg-soft); font-weight: 500;
  }
  .review--light { background: var(--surface-2); }
  .review--light .review__stars { color: var(--accent); }
  .review--light .review__quote { color: var(--fg-soft); }
  .review--light .review__meta { color: var(--muted); }
  .reviews-note { margin-top: var(--s-6); font-size: var(--text-sm); color: var(--ink-fg-soft); }
  .reviews-note a { color: var(--ink-fg); }

  /* ---------- Destination editorial cards ---------- */
  .dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-8) var(--s-6); }
  @media (max-width: 1020px) { .dest-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .dest-grid { grid-template-columns: 1fr; } }
  .dest {
    display: block; text-decoration: none;
    border-top: 1px solid var(--border-strong);
    padding-top: var(--s-4);
    position: relative;
  }
  .dest::before {
    content: ""; position: absolute; top: -4.5px; left: 0;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    opacity: 0; transition: opacity var(--t-fast) var(--ease-out);
  }
  .dest:hover::before, .dest:focus-visible::before { opacity: 1; }
  .dest h3 { font-size: var(--text-h3); margin-bottom: var(--s-2); }
  .dest p { color: var(--fg-soft); font-size: var(--text-sm); line-height: 1.6; }
  .dest .dest__go {
    display: inline-flex; align-items: center; gap: var(--s-2);
    margin-top: var(--s-3);
    font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent);
  }
  .dest svg { transition: translate var(--t-fast) var(--ease-out); }
  .dest:hover svg { translate: 4px 0; }

  /* ---------- Spec chips (retreat facts) ---------- */
  .spec-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .spec-chips li {
    border: 1px solid var(--ink-border); border-radius: 2px;
    padding: 0.4rem 0.75rem;
    font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .spec-chips--light li { border-color: var(--border-strong); color: var(--fg-soft); }

  /* ---------- Badge row (affiliations) ---------- */
  .badge-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: center; align-items: baseline; }
  .badge-row li {
    font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted);
  }
  .badge-row li:not(:last-child)::after { content: "·"; margin-left: var(--s-4); color: var(--faint); }
  .spread--ink .badge-row li { color: var(--ink-fg-soft); }

  /* ---------- KJ seal (signature stamp) ---------- */
  .seal { display: inline-block; width: 96px; height: 96px; color: var(--accent); }
  .seal--on-dark { color: rgba(245, 242, 233, 0.85); }
  .seal--hero {
    position: absolute; right: var(--gutter); bottom: clamp(4rem, 9vh, 6.5rem);
    z-index: 2; transform: rotate(-8deg);
  }
  @media (max-width: 860px) { .seal--hero { display: none; } }
  .seal--byline { width: 64px; height: 64px; flex-shrink: 0; }

  /* ---------- Journal article ---------- */
  .article { max-width: var(--container-narrow); margin-inline: auto; padding: 0 var(--gutter) var(--section-y); }
  .article__byline {
    display: flex; align-items: center; gap: var(--s-4);
    margin-bottom: var(--s-10);
    padding-bottom: var(--s-6);
    border-bottom: 1px solid var(--border);
  }
  .article__byline-meta { font-size: var(--text-sm); color: var(--muted); }
  .article__byline-meta strong { display: block; color: var(--fg); font-weight: 500; }
  .article h2 { font-size: var(--text-h3); margin: var(--s-12) 0 var(--s-4); }
  .article h3 { font-size: 1.25rem; margin: var(--s-8) 0 var(--s-3); font-family: var(--font-body); font-weight: 600; }
  .article p { margin-bottom: var(--s-4); color: var(--fg-soft); }
  .article ul { margin: 0 0 var(--s-4) 1.25rem; color: var(--fg-soft); }
  .article li { margin-bottom: var(--s-2); }
  .article .lead { color: var(--fg-soft); margin-bottom: var(--s-6); }
  .article figure { margin-block: var(--s-8); border-radius: var(--r-card); overflow: hidden; }
  .article figcaption { font-size: var(--text-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: var(--s-2); }
  .article__note {
    background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--r-card);
    padding: var(--s-6); margin-block: var(--s-8);
    font-size: var(--text-sm); color: var(--fg);
  }

  /* Inline prose links: expand tap target without layout shift (design-tokens §9) */
  .article p a, .article ul a, .article__note a, .reviews-note a, .legal a {
    position: relative;
  }
  .article p a::after, .article ul a::after, .article__note a::after, .reviews-note a::after, .legal a::after,
  .tap-target::after {
    content: ""; position: absolute; left: -2px; right: -2px; top: 50%;
    height: max(38px, 100%); transform: translateY(-50%);
  }
  .tap-target { position: relative; }
  .checklist li { display: flex; gap: var(--s-3); align-items: baseline; }
  .checklist li::before {
    content: "";
    width: 14px; height: 1px; background: var(--accent);
    flex-shrink: 0;
    position: relative; top: -0.3em;
  }
  .spread--ink .checklist li::before { background: var(--accent-on-ink); }
}

/* ---------- Sections ---------- */
@layer sections {

  /* ---------- Word-mask reveals (award-standard, replaces plain heading fades) ---------- */
  .wsplit .w {
    display: inline-block; overflow: hidden; vertical-align: bottom;
    padding: 0.18em 0.08em 0.26em;
    margin: -0.18em -0.08em -0.26em;
  }
  .wsplit .wi {
    display: inline-block;
    transform: translateY(150%);
    transition: transform 900ms var(--ease-out) calc(var(--wd, 0) * 55ms);
  }
  .wsplit.in .wi { transform: translateY(0); }

  /* ---------- Statement band ("It felt like exhaling.") ---------- */
  .statement {
    background: var(--surface-2);
    padding-block: clamp(4.5rem, 9vw, 7rem);
    overflow: hidden;
    text-align: center;
  }
  .statement .eyebrow { text-align: center; margin-bottom: var(--s-6); }
  .statement__anchor {
    margin-top: var(--s-8);
    font-size: var(--text-sm);
    color: var(--muted);
    letter-spacing: 0.02em;
  }
  .statement--inline {
    background: transparent;
    padding: 0;
    text-align: left;
    overflow: visible;
  }
  .statement--inline .eyebrow { text-align: left; }
  .statement--inline .statement__text {
    font-size: clamp(2.75rem, 5.4vw, 4.75rem);
    text-align: left;
    max-width: 10ch;
    margin-inline: 0;
  }
  .statement--inline .statement__anchor { margin-top: var(--s-6); max-width: 30ch; }
  .statement__text {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2.5rem, 7.5vw, 6rem);
    line-height: 1.15;
    text-align: center;
    text-wrap: balance;
    max-width: 16ch;
    margin-inline: auto;
    will-change: transform;
  }
  .ellipse-wrap { position: relative; display: inline-block; padding-inline: 0.08em; }
  .ellipse {
    position: absolute; inset: -0.18em -0.22em -0.22em -0.22em;
    width: calc(100% + 0.44em); height: calc(100% + 0.4em);
    color: var(--accent);
    pointer-events: none;
    overflow: visible;
  }
  .ellipse path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1600ms var(--ease-out) 500ms;
  }
  .statement.in .ellipse path { stroke-dashoffset: 0; }

  /* ---------- Arch image mask (boutique quiet-luxury staple) ---------- */
  .arch, .arch img { border-radius: 999px 999px var(--r-card) var(--r-card); }

  /* ---------- Collage (overlapping editorial imagery) ---------- */
  .collage { position: relative; padding-bottom: clamp(3rem, 7vw, 5rem); padding-left: clamp(2rem, 6vw, 4rem); }
  .collage__main { width: 100%; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 4 / 5; }
  .collage__main img { width: 100%; height: 100%; object-fit: cover; }
  .collage__accent {
    position: absolute; left: 0; bottom: 0;
    width: 46%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 6px solid var(--surface);
    border-radius: 2px;
    box-shadow: var(--elev-2);
    transform: rotate(-4deg);
  }
  .collage__accent img { width: 100%; height: 100%; object-fit: cover; }
  .collage__seal {
    position: absolute; top: -1.75rem; right: -0.5rem;
    transform: rotate(9deg);
  }

  /* ---------- Local-time chips (insider detail) ---------- */
  [data-localtime]:empty { display: none; }
  .timechip { font-variant-numeric: tabular-nums; }

  .spread { padding-block: var(--section-y); position: relative; }
  .spread--ink {
    background: var(--ink);
    color: var(--ink-fg);
  }
  .spread--ink::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.035;
    pointer-events: none;
  }
  .spread--ink > * { position: relative; }
  .spread--ink h1 em, .spread--ink h2 em, .spread--ink h3 em { color: var(--accent-on-ink); }
  .spread--surface { background: var(--surface-2); }

  .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
  .section-head--center { margin-inline: auto; text-align: center; }
  .section-head h2 { font-size: var(--text-h2); margin-bottom: var(--s-4); }

  /* Hero */
  .hero {
    position: relative;
    min-height: 92svh;
    display: flex; align-items: flex-end;
    color: #F5F2E9;
    overflow: hidden;
  }
  .hero__media { position: absolute; inset: 0; z-index: 0; }
  .hero__media img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.06);
    animation: hero-settle var(--t-settle) var(--ease-out) forwards;
  }
  @keyframes hero-settle { to { transform: scale(1); } }
  .hero__media::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(to top, rgba(24, 22, 17, 0.78) 0%, rgba(24, 22, 17, 0.30) 45%, rgba(24, 22, 17, 0.22) 100%);
  }
  .hero__content {
    position: relative; z-index: 1;
    width: 100%;
    max-width: var(--container); margin-inline: auto;
    padding: 0 var(--gutter) clamp(4rem, 9vh, 6.5rem);
  }
  .hero__content .eyebrow { color: rgba(245, 242, 233, 0.8); }
  .hero h1 {
    font-size: var(--text-hero);
    max-width: 15ch;
    margin-bottom: var(--s-6);
  }
  .hero h1 em { color: #D6E9EF; }
  .hero .lead { color: rgba(245, 242, 233, 0.88); max-width: 44ch; margin-bottom: var(--s-8); }
  .hero__actions { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }
  .hero__actions .btn--ghost { border-color: rgba(245, 242, 233, 0.4); color: #F5F2E9; }

  /* Page hero (inner pages, light) */
  .page-hero { padding: clamp(9rem, 18vh, 12rem) 0 clamp(2.5rem, 6vw, 4rem); }
  .page-hero--split .container {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
  }
  .page-hero__media { overflow: hidden; aspect-ratio: 4 / 5; max-height: 430px; }
  .page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 900px) {
    .page-hero--split .container { grid-template-columns: 1fr; }
    .page-hero__media { aspect-ratio: 3 / 2; max-height: 300px; }
  }
  .page-hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); max-width: 18ch; margin-bottom: var(--s-6); }
  .page-hero .lead { max-width: 52ch; }

  /* Zigzag editorial spread */
  .duo {
    display: grid; gap: clamp(2rem, 6vw, 5.5rem);
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  @media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
  .duo__media { overflow: hidden; border-radius: var(--r-card); }
  .duo__media img { width: 100%; height: 100%; object-fit: cover; }
  .duo__media--tall { aspect-ratio: 4 / 5; }
  .duo__media--wide { aspect-ratio: 4 / 3; }
  .duo__text h2 { font-size: var(--text-h2); margin-bottom: var(--s-6); }
  .duo__text > p { color: var(--fg-soft); margin-bottom: var(--s-4); max-width: 54ch; }
  .spread--ink .duo__text > p { color: var(--ink-fg-soft); }
  .duo--flip .duo__media { order: 2; }
  @media (max-width: 860px) { .duo--flip .duo__media { order: 0; } }
  .duo--top { align-items: start; }
  .duo--form { grid-template-columns: 3fr 2fr; align-items: start; }
  @media (max-width: 900px) { .duo--form { grid-template-columns: 1fr; } }
  .steps--2col { grid-template-columns: repeat(2, 1fr); gap: 3.5rem 4rem; }
  @media (max-width: 860px) { .steps--2col { grid-template-columns: 1fr; gap: var(--s-8); } }

  /* Full-bleed band image */
  .band { position: relative; }
  .band img { width: 100%; height: clamp(16rem, 42vw, 30rem); object-fit: cover; }
  .band__caption {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end;
    background: linear-gradient(to top, rgba(24, 22, 17, 0.6), transparent 55%);
    color: #F5F2E9;
  }
  .band__caption > div { max-width: var(--container); margin-inline: auto; width: 100%; padding: 0 var(--gutter) var(--s-8); }

  /* Experience grid */
  .exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  @media (max-width: 1020px) { .exp-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { .exp-grid { grid-template-columns: 1fr; } }
  .exp-grid--4 { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 640px) { .exp-grid--4 { grid-template-columns: 1fr; } }

  /* Tier cards (services) */
  .tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-12) var(--s-10); }
  @media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
  .tier {
    background: transparent;
    border-top: 1px solid var(--border-strong);
    padding: var(--s-6) 0 0;
    display: flex; flex-direction: column; gap: var(--s-4);
    position: relative;
  }
  .tier--featured { border-top: 2px solid var(--accent); }
  .tier__badge {
    position: absolute; top: -0.85rem; left: 0;
    background: var(--accent); color: #F5F2E9;
    font-size: var(--text-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
    padding: 0.3rem 0.8rem; border-radius: 2px;
  }
  .tier__level { font-size: var(--text-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
  .tier h3 { font-size: var(--text-h3); }
  .tier__price { font-family: var(--font-display); font-size: 1.5rem; font-style: italic; color: var(--accent); }
  .tier__desc { color: var(--fg-soft); font-size: var(--text-sm); line-height: 1.7; }
  .tier .checklist { font-size: var(--text-sm); color: var(--fg-soft); margin-block: var(--s-2); }
  .tier .btn { margin-top: auto; align-self: flex-start; }

  /* Itinerary (retreat page) — horizon day markers */
  .itinerary { display: grid; gap: var(--s-10); }
  .itin-item { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-6); }
  @media (max-width: 640px) { .itin-item { grid-template-columns: 1fr; gap: var(--s-2); } }
  .itin-item__marker {
    font-family: var(--font-display); font-style: italic; font-size: 1.25rem;
    color: var(--accent-on-ink);
    position: relative; padding-top: 2px;
  }
  .itin-item__body { border-top: 1px solid var(--ink-border); padding-top: var(--s-4); position: relative; }
  .itin-item__body::before {
    content: ""; position: absolute; top: -4.5px; left: 0;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent-on-ink);
  }
  .itin-item__body h3 { font-size: 1.375rem; margin-bottom: var(--s-2); }
  .itin-item__body p { color: var(--ink-fg-soft); max-width: 58ch; }

  /* Retreat proof strip */
  .proof-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
  @media (max-width: 860px) { .proof-strip { grid-template-columns: 1fr; } }
  .proof-strip figure { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; }
  .proof-strip img { width: 100%; height: 100%; object-fit: cover; }
  .proof-strip figcaption {
    position: absolute; inset-inline: 0; bottom: 0;
    padding: var(--s-8) var(--s-4) var(--s-3);
    background: linear-gradient(to top, rgba(24, 22, 17, 0.72), transparent);
    color: #F5F2E9; font-size: var(--text-sm); letter-spacing: 0.04em;
  }

  /* Footer */
  .footer { background: var(--ink); color: var(--ink-fg); padding: var(--s-20) 0 var(--s-8); position: relative; overflow: hidden; }
  .footer__big {
    font-family: 'Montserrat', var(--font-body);
    font-weight: 700;
    font-size: clamp(2.5rem, 8.6vw, 6.75rem);
    line-height: 0.95;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: rgba(243, 238, 226, 0.13);
    white-space: nowrap;
    margin-bottom: var(--s-12);
    user-select: none;
  }
  .footer::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.035; pointer-events: none;
  }
  .footer > * { position: relative; }
  .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-12); margin-bottom: var(--s-16); }
  @media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr; gap: var(--s-10); } }
  .footer__wordmark { font-family: 'Montserrat', var(--font-body); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
  .footer__tagline { font-size: var(--text-eyebrow); letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-fg-soft); margin-top: var(--s-2); font-weight: 500; }
  .footer__desc { color: var(--ink-fg-soft); font-size: var(--text-sm); max-width: 34ch; margin-top: var(--s-6); line-height: 1.7; }
  .footer h4 { font-size: var(--text-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-fg-soft); font-weight: 500; margin-bottom: var(--s-4); }
  .footer ul { display: grid; gap: var(--s-1); list-style: none; padding: 0; margin: 0; }
  .footer a { text-decoration: none; font-size: var(--text-sm); color: var(--ink-fg); display: inline-block; padding-block: 0.625rem; }
  .footer__social a { padding-block: 0; }
  .footer a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .footer__social { display: flex; gap: var(--s-4); margin-top: var(--s-6); }
  .footer__social a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--ink-border); border-radius: 50%; transition: border-color var(--t-fast), background-color var(--t-fast); }
  .footer__social a:hover { border-color: var(--accent-on-ink); background: rgba(169, 196, 178, 0.08); text-decoration: none; }
  .footer__legal {
    border-top: 1px solid var(--ink-border);
    padding-top: var(--s-8);
    display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8);
    justify-content: space-between;
    font-size: 0.8125rem; color: var(--ink-fg-soft);
  }
  .footer__legal ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); list-style: none; padding: 0; margin: 0; align-items: center; }
  .footer__legal a { font-size: 0.8125rem; color: var(--ink-fg-soft); }
  .footer__fine { width: 100%; margin-top: var(--s-4); font-size: 0.75rem; color: rgba(243, 238, 226, 0.45); line-height: 1.7; }

  /* CTA band */
  .cta-band { text-align: center; }
  .cta-band h2 { font-size: var(--text-h2); max-width: 20ch; margin-inline: auto; margin-bottom: var(--s-6); }
  .cta-band .lead { max-width: 46ch; margin-inline: auto; margin-bottom: var(--s-8); }
}

/* ---------- Legal prose ---------- */
@layer sections {
  .legal { max-width: var(--container-narrow); margin-inline: auto; padding: 0 var(--gutter) var(--section-y); }
  .legal h2 { font-size: 1.75rem; margin: var(--s-12) 0 var(--s-4); }
  .legal h3 { font-size: 1.35rem; margin: var(--s-8) 0 var(--s-3); }
  .legal p { margin-bottom: var(--s-4); color: var(--fg-soft); }
  .legal ul { list-style: disc; padding-left: 1.25rem; margin-bottom: var(--s-4); color: var(--fg-soft); }
  .legal li { margin-bottom: var(--s-2); }
  .legal .legal-meta { font-size: var(--text-sm); color: var(--muted); }
}

/* ---------- Utilities ---------- */
@layer utilities {
  .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
  .mt-12 { margin-top: var(--s-12); } .mt-16 { margin-top: var(--s-16); }
  .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }
  .center { text-align: center; }
  .measure { max-width: 60ch; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__media img { transform: scale(1); animation: none; }
  .reveal { opacity: 1; translate: 0 0; }
  .horizon__line { transform: scaleX(1); }
  .horizon__sun { opacity: 1; }
  .wsplit .wi { transform: none !important; }
  .ellipse path { stroke-dashoffset: 0 !important; }
  .statement__text { transform: none !important; }
}

@media (forced-colors: active) {
  .btn::after { display: none; }
}