/* Satsang Adventures — brand.
   From the logo system in Alex & Kristin/Logo (July 2026):
     navy  #050247   sage  #A2C990   cream  #F5F1E6
   Cream is the ground ("sits back better than pure white on navy"), navy is the
   ink, sage is the single accent. Derived tones below are mixes of those three
   and nothing else, so the page and the logo read as one thing. */

:root {
  --navy:     #050247;
  --sage:     #A2C990;
  --cream:    #F5F1E6;

  --ink:      var(--navy);
  --ink-soft: #3d3b6b;              /* navy lifted toward cream */
  --ground:   var(--cream);
  --card:     #FBF9F3;              /* cream, a touch lighter */
  --line:     #DDD8C8;              /* cream darkened */
  --brass:    #4E7040;              /* sage deepened for text-size use (4.9:1 on cream) */
  --brass-dk: #3F5C31;
  --sage-wash:#E4EEDB;              /* sage at ~30% over cream */
  --ok:       #587D4A;
  --shadow:   0 1px 2px rgba(5,2,71,.06), 0 8px 24px rgba(5,2,71,.07);

  /* chrome. Navy is the wordmark, not wallpaper: header and footer sit on the
     same cream as the page so the logo is the only navy block on screen. */
  --head-bg:   rgba(245,241,230,.92);
  --head-line: var(--line);
  --foot-bg:   var(--sage-wash);
  --foot-ink:  var(--navy);
  --btn-bg:    var(--sage);
  --btn-ink:   var(--navy);
  --btn-hover: #B4D6A2;
  --btn-off:   #d9d3c6;
  --field-bg:  #fff;
  --ph-a: #efe9df; --ph-b: #e4dbcc; --ph-ink: #a89c88;
  --pill-out:  #f2eeea;
  --notice-line: #C7DBB8; --notice-ink: #2f4a26;
  --hero-bg:   #1c1a17;
  color-scheme: light;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
  --ink:      var(--cream);
  --ink-soft: #C9C6D8;
  --ground:   #14132B;              /* navy pulled down to a ground, not black */
  --card:     #1C1B36;
  --line:     #2F2E4E;
  --brass:    var(--sage);
  --brass-dk: #B7D9A5;
  --sage-wash:#26332C;
  --ok:       #B7D9A5;
  --shadow:   0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --head-bg:   rgba(20,19,43,.92);
  --head-line: #2F2E4E;
  --foot-bg:   #1C1B36;
  --foot-ink:  var(--cream);
  --btn-off:   #3a395a;
  --field-bg:  #1C1B36;
  --ph-a: #22213d; --ph-b: #1a1933; --ph-ink: #6f6d8f;
  --pill-out:  #26254a;
  --notice-line: #3d5236; --notice-ink: #cfe3c2;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: var(--cream); --ink-soft: #C9C6D8; --ground: #14132B; --card: #1C1B36; --line: #2F2E4E;
    --brass: var(--sage); --brass-dk: #B7D9A5; --sage-wash: #26332C; --ok: #B7D9A5;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --head-bg: rgba(20,19,43,.92); --head-line: #2F2E4E; --foot-bg: #1C1B36; --foot-ink: var(--cream);
    --btn-off: #3a395a; --field-bg: #1C1B36;
    --ph-a: #22213d; --ph-b: #1a1933; --ph-ink: #6f6d8f; --pill-out: #26254a;
    --notice-line: #3d5236; --notice-ink: #cfe3c2; --hero-bg: #1c1a17;
    color-scheme: dark;
  }
}
/* logo variants: one for light chrome, one for dark. Both are in the DOM;
   the theme decides which is painted, so no src swapping in JS. */
.on-dark { display: none; } .on-light { display: block; }
:root[data-theme="dark"] .on-dark { display: block; } :root[data-theme="dark"] .on-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-dark { display: block; }
  :root:not([data-theme="light"]) .on-light { display: none; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 16px/1.65 var(--sans);
  transition: background-color .25s ease, color .25s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: min(1120px, 92vw); margin: 0 auto; }
.narrow { width: min(720px, 92vw); margin: 0 auto; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }
.eyebrow {
  font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass);
}
.lede { font-size: 1.12rem; color: var(--ink-soft); }

/* ---- chrome ---- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--head-bg); border-bottom: 1px solid var(--head-line);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: block; line-height: 0; }
.brand .hdr-logo { display: block; line-height: 0; }
.brand img { height: 38px; width: auto; }
@media (max-width: 600px) { .brand img { height: 30px; } }
.brand .hdr-logo.dim img { visibility: hidden; }
.site-head nav { display: flex; align-items: center; }
.site-head nav a { margin-left: 1.4rem; text-decoration: none; font-size: .93rem; color: var(--ink-soft); }
.site-head nav a:hover { color: var(--ink); }
.site-foot { background: var(--foot-bg); color: var(--foot-ink); margin-top: 5rem; padding: 3rem 0 2.5rem; font-size: .88rem; }
.site-foot .lockup { height: 44px; width: auto; margin-bottom: 1.4rem; opacity: .95; }
.site-foot a { color: var(--foot-ink); }

/* theme toggle: a quiet sun/moon after the nav */
.theme-btn { margin-left: 1.4rem; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; padding: 0; }
.theme-btn:hover { color: var(--ink); border-color: var(--brass); }
.theme-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* shows the mode you will GO to: a moon in light mode, a sun in dark (Alex, 24 Sept) */
.theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .moon { display: none; } :root[data-theme="dark"] .theme-btn .sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .moon { display: none; }
  :root:not([data-theme="light"]) .theme-btn .sun { display: block; }
}

/* ---- buttons ---- */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--btn-bg); color: var(--btn-ink); padding: .85rem 1.6rem; border-radius: 2px;
  font: 600 .95rem/1.2 var(--sans); letter-spacing: .02em;
  transition: background .15s ease;
}
.btn:hover { background: var(--btn-hover); }
.btn[disabled] { background: var(--btn-off); color: var(--ink-soft); cursor: not-allowed; }
.btn-block { display: block; width: 100%; }
.btn-quiet { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-quiet:hover { background: var(--card); border-color: var(--brass); }

/* ---- experience cards ---- */
/* Kristin, 15 Sept: "is it possible to make the events long horizontally vs the
   squares?" One per row, picture left, words right; back to a stacked card on a
   phone, where a 38% image column would be a stamp. */
.grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.xcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: row;
  text-decoration: none; color: inherit; align-items: stretch;
}
.xcard .card-img, .xcard .ph { flex: 0 0 38%; width: 38%; aspect-ratio: auto;
  object-fit: cover; align-self: stretch; min-height: 100%; }
.xcard .body { justify-content: center; }
@media (max-width: 700px) {
  .xcard { flex-direction: column; }
  .xcard .card-img, .xcard .ph { flex: none; width: 100%; aspect-ratio: 3/2; min-height: 0; }
  .xcard .body { justify-content: flex-start; }
}
.xcard:hover { border-color: var(--brass); }
.xcard .ph { aspect-ratio: 3/2; background: linear-gradient(135deg,var(--ph-a),var(--ph-b)); display: grid; place-items: center; color: var(--ph-ink); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.xcard .body { padding: 1.3rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: .55rem; }
.xcard .body .foot { margin-top: auto; padding-top: .9rem; display: flex; justify-content: space-between; align-items: baseline; }
.price { font-family: var(--serif); font-size: 1.35rem; }
.muted { color: var(--ink-soft); font-size: .9rem; }

.pill { display: inline-block; font: 600 .68rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: .42rem .6rem; border-radius: 2px; }
.pill-live { background: var(--sage-wash); color: var(--ok); }
.pill-out  { background: var(--pill-out); color: var(--ink-soft); }

/* ---- detail ---- */
.hero-ph { aspect-ratio: 21/9; background: linear-gradient(135deg,var(--ph-a),var(--ph-b)); display: grid; place-items: center; color: var(--ph-ink); letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; }
.cols { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 360px; align-items: start; } }
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 3px;
  padding: 1.5rem; box-shadow: var(--shadow);
}
@media (min-width: 900px) { .panel.sticky { position: sticky; top: 88px; } }
section.block { margin-top: 2.8rem; }
section.block h2 { margin-bottom: .9rem; }
ul.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
ul.ticks li { padding-left: 1.6rem; position: relative; }
ul.ticks li::before { content: "—"; position: absolute; left: 0; color: var(--brass); }
ul.ticks.no li::before { content: "×"; color: #b9ada0; }

.day { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.day .n { font-family: var(--serif); font-size: 1.5rem; color: var(--brass); line-height: 1; }
.day h3 { font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .3rem; }

/* ---- tiers ---- */
.tier { display: block; border: 1px solid var(--line); border-radius: 3px; padding: .9rem 1rem; cursor: pointer; margin-bottom: .6rem; }
.tier:hover { border-color: var(--brass); }
.tier input { position: absolute; opacity: 0; }
.tier.on { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.tier .row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.tier .lab { font-weight: 600; }
.tier.gone { opacity: .5; cursor: not-allowed; }

/* ---- forms ---- */
label.f { display: block; margin-bottom: 1rem; }
label.f span { display: block; font-size: .82rem; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: .35rem; }
input[type=text], input[type=email], input[type=tel], input[type=password], input:not([type]) {
  width: 100%; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 2px;
  font: 1rem var(--sans); background: var(--field-bg); color: var(--ink);
}
input:focus { outline: 2px solid var(--brass); outline-offset: -1px; }
.err { color: #a33; font-size: .85rem; margin-top: .3rem; display: none; }
.err.on { display: block; }

.summary { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.summary .line { display: flex; justify-content: space-between; margin-bottom: .4rem; }
.summary .total { font-family: var(--serif); font-size: 1.4rem; display: flex; justify-content: space-between; padding-top: .6rem; border-top: 1px solid var(--line); margin-top: .6rem; }

.notice {
  background: var(--sage-wash); border: 1px solid var(--notice-line); color: var(--notice-ink);
  padding: .8rem 1rem; border-radius: 2px; font-size: .88rem; margin-bottom: 1.5rem;
}

/* ---- images ---- */
.imgwrap { position: relative; overflow: clip; background: var(--ph-a); }
.imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-img, .card-img.ph { aspect-ratio: 3/2; }
.hero-img, .hero-img.ph { aspect-ratio: 21/9; }
@media (max-width: 700px) { .hero-img, .hero-img.ph { aspect-ratio: 4/3; } }
.gallery { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gal-img, .gal-img.ph { aspect-ratio: 4/3; border-radius: 3px; }
.ph { display: grid; place-items: center; color: var(--ph-ink); letter-spacing: .12em;
      text-transform: uppercase; font-size: .78rem; background: linear-gradient(135deg,var(--ph-a),var(--ph-b)); }

/* the placeholder badge: honest about what is stand-in. Remove nothing to hide it --
   it disappears on its own when the image's placeholder flag is false. */
.ph-badge {
  position: absolute; top: .6rem; left: .6rem;
  font: 600 .62rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(35,32,28,.72); color: #fff; padding: .4rem .55rem; border-radius: 2px;
  pointer-events: none;
}


/* ---- the logo morph (home) ---- */
.hero-wrap { position: relative; }
.hero-img.hero-tall, .hero-img.hero-tall.ph { aspect-ratio: 16/8; }
@media (max-width: 700px) { .hero-img.hero-tall, .hero-img.hero-tall.ph { aspect-ratio: 4/5; } }
.hero-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(28,26,23,.08) 0%, rgba(28,26,23,.40) 55%, rgba(28,26,23,.55) 100%); }
.biglogo-slot { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: min(560px, 74vw); aspect-ratio: 1232 / 405; }
.biglogo-slot img { width: 100%; height: 100%; }
.biglogo-slot { z-index: 3; }
.hero-tag { position: absolute; left: 0; right: 0; top: calc(44% + min(560px,74vw) * 0.19); text-align: center;
  font: 600 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--cream); opacity: .9; }
.morph { display: none; }
.morph.fly { display: block; position: fixed; top: 0; left: 0; transform-origin: 0 0;
  z-index: 60; pointer-events: none; height: auto; }
/* once docked the cream flyer hands off to the header's own lockup (navy on cream
   in light mode) with a short crossfade; in dark mode both are cream so it is invisible */
.morph.fly.docked { opacity: 0 !important; transition: opacity .2s ease; }
.morph img { width: 100%; height: auto; display: block; }
.morph .m-navy { position: absolute; inset: 0; opacity: 0; }
@keyframes logoTint { 0% { opacity: 0; } 35% { opacity: 0; } 100% { opacity: 1; } }
.brand .hdr-logo img { transition: opacity .2s ease; }


/* ---- the 2.5D hero: depth layers on the scroll timeline -----------------------
   far moves DOWN with the scroll (reads as slower than the page), near moves UP
   (faster). Each layer is scaled a touch so its edges never show. The logo slot
   sits at z 2, between far (1) and mid (3), so the hikers walk in front of it.
   All transform/opacity, all compositor, nothing per-frame in JS. */
.hero-wrap.depth { overflow: clip; aspect-ratio: 16/8; background: var(--hero-bg); }
@media (max-width: 700px) { .hero-wrap.depth { aspect-ratio: 4/5; } }
.hero-wrap.depth .layer { position: absolute; inset: 0; }
.hero-wrap.depth .layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-wrap.depth .far  { z-index: 1; }
.hero-wrap.depth .mid  { z-index: 2; }
.hero-wrap.depth .near { z-index: 4; }
.hero-wrap.depth .hero-shade { z-index: 5; opacity: .55; }
.hero-wrap.depth .hero-tag, .hero-wrap.depth .ph-badge { z-index: 6; }

@supports (animation-timeline: scroll()) {
  .hero-wrap.depth .layer { animation: linear both; animation-timeline: scroll(root block); animation-range: 0px 100vh; }
  /* the whole hero lags the page at half speed: content slides up over it. This is
     what gives the logo room to glide instead of snapping into the bar. */
  .hero-wrap.depth { animation: hero-lag linear both; animation-timeline: scroll(root block); animation-range: 0px 200vh; }
  @keyframes hero-lag { to { transform: translateY(100vh); } }
  .hero-wrap.depth { position: relative; z-index: 0; }
  .over-hero { position: relative; z-index: 1; background: var(--ground); }
  .site-foot { position: relative; z-index: 1; }
  .hero-wrap.depth .far  { animation-name: plx-far;  }
  .hero-wrap.depth .mid  { animation-name: plx-mid;  }
  .hero-wrap.depth .near { animation-name: plx-near; }
  .biglogo-slot.live { animation: slot-rest linear both; animation-timeline: scroll(root block); animation-range: 0px 100vh; }
  @keyframes plx-far  { from { transform: translateY(0) scale(1.00); } to { transform: translateY(10%)  scale(1.00); } }
  @keyframes plx-mid  { from { transform: translateY(0) scale(1.03); } to { transform: translateY(3%)   scale(1.03); } }
  @keyframes plx-near { from { transform: translateY(0) scale(1.06); } to { transform: translateY(-6%)  scale(1.06); } }
  /* the resting logo drifts with the mid layer, and fades out over the first 80px
     as the flying copy fades in -- opacity in both directions on the same scroll */
  /* the resting copy no longer fades -- it is hidden outright once measured, so only the
     flying copy is ever on screen. It keeps drifting so a browser that never runs the script
     still sees a hero logo that moves with the layer behind it. */
  @keyframes slot-rest { 0% { transform: translate(-50%, -50%); }
                         100% { transform: translate(-50%, calc(-50% + 3%)); } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wrap.depth, .hero-wrap.depth .layer, .biglogo-slot.live { animation: none !important; }
}


/* ---- the Intensity-o-meter: the leaf ring ---------------------------------
   Five leaves from the logo's ring, `level` of them lit, number in the centre.
   Two versions in one element; data-mode picks which paints. Leaves light one
   by one on a stagger when the dial enters view (JS adds .lit); the last lit
   leaf pulses once. Same sage on every axis so 5 reads "intense", never "danger". */
.meter .m-one, .meter .m-three { display: none; }
.meter[data-mode="one"] .m-one { display: block; }
.meter[data-mode="three"] .m-three { display: grid; gap: 1.1rem; }
.meter.sm[data-mode="three"] .m-three { display: flex; gap: .55rem; }
.meter.lg[data-mode="three"] .m-three { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 640px) { .meter.lg[data-mode="three"] .m-three { grid-template-columns: 1fr; } }
.meter.md[data-mode="three"] .m-three { grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.meter.sm { display: flex; align-items: center; gap: .6rem; margin: .9rem 0 .1rem; }
.meter.sm::before { content: "Intensity"; font: 600 .62rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.meter.sm[data-mode="three"]::before { content: "Body · Heart · Pace"; }
.dial .dl { margin-bottom: .5rem; }
.dial .dl span { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.dial .dn { margin: .6rem 0 0; font-size: .92rem; color: var(--ink-soft); max-width: 26ch; }
.ring { display: block; overflow: visible; }
/* the conveyor: empty until lit. The wheel turns one notch per leaf; each leaf
   fades in at nine o'clock as the earlier ones are carried round. Ghost slots
   fade in faintly once the last leaf has landed. */
.ring .slot { transform-box: view-box; transform-origin: 60px 60px; transform: rotate(var(--a)); }
.ring .wheel { transform-box: view-box; transform-origin: 60px 60px; }
.ring .slot .leaf { fill: var(--sage); opacity: 0; }
.ring .slot.ghost .leaf { fill: var(--line); }
.dial.lit .ring .slot.on .leaf { animation: leaf-in .3s ease-out both; animation-delay: var(--d); }
.dial.lit .ring .slot.ghost .leaf { animation: ghost-in .6s ease-out both; animation-delay: var(--gd); }
.dial.lit .ring .wheel { animation: wheel-notch var(--tdur) linear both; }
@keyframes wheel-notch { from { transform: rotate(0deg); } to { transform: rotate(var(--turn)); } }
@keyframes leaf-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ghost-in { from { opacity: 0; } to { opacity: .5; } }
.dial.lit .ring .slot.on.last .leaf { animation: leaf-in .3s ease-out both, leaf-land 1s ease-out both; animation-delay: var(--d), calc(var(--d) + .3s); transform-box: fill-box; transform-origin: center; }
@keyframes leaf-land { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(1.35); opacity: .45; } 100% { transform: scale(1); opacity: 1; } }
.ring .num { font-family: var(--serif); font-size: 30px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.ring .num tspan { font-size: 14px; fill: var(--ink-soft); }
.dial.sm .ring .num { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ring .leaf.on { fill: var(--sage); }
  .ring .slot .leaf, .ring .wheel { animation: none !important; }
  .ring .slot.on .leaf { opacity: 1; } .ring .slot.ghost .leaf { opacity: .5; }
  .ring .wheel { transform: rotate(var(--turn)); }
}

/* ---- the floating globe -----------------------------------------------------
   Top right of every page, under the header; the way into Adventures. On a trip
   page it turns to the destination and leans in (globe.js). Deep Sea colours:
   teal-navy disc in dark, the site's cream in light. */
.globe-w { position: fixed; top: 76px; right: 18px; z-index: 39; width: 140px; height: 140px; border-radius: 50%;
  display: block; overflow: hidden; opacity: 0; transform: translateY(6px); transition: opacity .8s ease, transform .8s ease, box-shadow .3s ease;
  background: radial-gradient(circle at 50% 45%, #FBF9F3 0%, #F5F1E6 70%); box-shadow: 0 10px 30px rgba(5,2,71,.10); }
:root[data-theme="dark"] .globe-w { background: radial-gradient(circle at 50% 45%, #0A3A4E 0%, #042A3A 60%, #021C28 100%); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .globe-w { background: radial-gradient(circle at 50% 45%, #0A3A4E 0%, #042A3A 60%, #021C28 100%); box-shadow: 0 10px 30px rgba(0,0,0,.45); } }
.globe-w.on { opacity: 1; transform: none; }
.globe-w:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(5,2,71,.16); }
.globe-w canvas { width: 100% !important; height: 100% !important; display: block; }
.globe-w.adventures { width: 200px; height: 200px; }
.globe-w.book { width: 72px; height: 72px; top: 72px; right: 14px; }
.globe-w .globe-lbl { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; pointer-events: none;
  font: 600 .6rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--lbl, var(--ink));
  animation: globe-lbl .6s ease both; }
@keyframes globe-lbl { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.globe-w.still { filter: saturate(.9); }
@media (max-width: 720px) { .globe-w, .globe-w.adventures { width: 88px; height: 88px; top: 70px; right: 12px; } .globe-w .globe-lbl { font-size: .5rem; } .globe-w.book { display: none; } }
@media print { .globe-w { display: none; } }

/* ---- the globe widget, rendered edition: frame strip on a canvas, HTML pins, CSS zoom ---- */
.globe-w canvas, .globe-w .globe-pins { transform: scale(var(--zoom, 1)); transform-origin: var(--ox, 50%) var(--oy, 50%); transition: none; }
.globe-w .globe-pins { position: absolute; inset: 0; pointer-events: none; }
.globe-w .globe-pin { position: absolute; width: 9%; height: 9%; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 2px rgba(245,241,230,.85), 0 2px 6px rgba(0,0,0,.25); transition: opacity .3s; }
.globe-w .globe-pin.t { background: var(--brass); }
.globe-w .globe-pin::after { content: ""; position: absolute; inset: -60%; border-radius: 50%; border: 1.5px solid currentColor; color: var(--sage); opacity: .5; animation: pin-halo 2.4s ease-out infinite; }
.globe-w .globe-pin.t::after { color: var(--brass); }
@keyframes pin-halo { 0% { transform: scale(.5); opacity: .6; } 100% { transform: scale(1.4); opacity: 0; } }
.globe-w .globe-lbl { z-index: 2; }
.globe-w.page canvas { filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }

/* ---- the reveal: the mark opens as you scroll ---------------------------------- */
.reveal { height: 320vh; position: relative; margin: 2rem 0 0; }
.rv-stick { /* sticky-ok: not used on the site (SHIP); needs the scroll-animation override before it is */ position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.rv-cv { width: min(72vh, 92vw); height: min(72vh, 92vw); display: block; }
.rv-cap { position: absolute; max-width: 34ch; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.rv-cap h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin: .4rem 0 0; }
.rv-cap .lede { margin: .8rem 0 1.2rem; }
.rv-c1 { left: max(1.5rem, calc(50vw - 36rem)); top: 18vh; }
.rv-c2 { left: max(1.5rem, calc(50vw - 36rem)); bottom: 14vh; pointer-events: auto; }
.reveal[style*="--p"] .rv-c1 { opacity: calc(1 - clamp(0, (var(--p) - .18) * 8, 1)); transform: translateY(calc(12px * clamp(0, (var(--p) - .18) * 8, 1))); }
.reveal[style*="--p"] .rv-c2 { opacity: clamp(0, (var(--p) - .78) * 6, 1); transform: translateY(calc(12px * (1 - clamp(0, (var(--p) - .78) * 6, 1)))); }
.reveal.still { height: auto; } .reveal.still .rv-stick { position: relative; height: auto; padding: 3rem 0; } .reveal.still .rv-c2 { position: relative; opacity: 1; transform: none; margin-top: 1rem; } .reveal.still .rv-c1 { display: none; }
@media (max-width: 720px) { .rv-c1 { top: 8vh; } .rv-c2 { bottom: 6vh; } .rv-cap h2 { font-size: 1.6rem; } }
/* reveal: soft ground shadow under the world (frames carry none), and room for the captions */
.rv-cv { position: relative; z-index: 1; width: min(68vh, 60vw); height: min(68vh, 60vw); }
.rv-stick::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(52vh, 46vw); height: min(12vh, 10vw); transform: translate(-50%, calc(min(24vh, 21vw))); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(5,2,71,.22), rgba(5,2,71,0) 70%); z-index: 0; }
:root[data-theme="dark"] .rv-stick::before { background: radial-gradient(ellipse at center, rgba(0,0,0,.6), rgba(0,0,0,0) 70%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rv-stick::before { background: radial-gradient(ellipse at center, rgba(0,0,0,.6), rgba(0,0,0,0) 70%); } }
.rv-cap { z-index: 2; }
.rv-c1, .rv-c2 { left: max(1.5rem, calc(50vw - 40rem)); }
@media (max-width: 720px) { .rv-cv { width: min(60vh, 92vw); height: min(60vh, 92vw); } .rv-c2 { left: 1.5rem; right: 1.5rem; max-width: none; } }
/* widget: the disc's shadow lives on the anchor, not the canvas */
.globe-w.page canvas { filter: none; }

/* ---- Ship v1: quiet motion, testimonials, FAQ, pills ---------------------------- */
html.js .fade { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
html.js .fade.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .fade { opacity: 1; transform: none; transition: none; } }
.hero-wrap.plain { position: relative; }
.hero-wrap.plain .hero-tag { position: absolute; left: 0; right: 0; bottom: 2.2rem; text-align: center; }
.tbc { display: inline-block; font: 600 .6rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #6b5216; background: color-mix(in srgb, #d9a33b 22%, transparent); padding: .3rem .5rem; border-radius: 3px; vertical-align: middle; margin-left: .3rem; }
.creds { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; align-items: center; }
.creds span:not(.tbc) { font: 600 .66rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: .45rem .7rem; }
.quotes { display: grid; gap: 1.2rem; }
.quote { margin: 0; padding: 1.2rem 1.3rem; border-left: 3px solid var(--sage); background: var(--field-bg); border-radius: 0 8px 8px 0; }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; }
.quote figcaption { margin-top: .7rem; font: 600 .66rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.faq { border-top: 1px solid var(--line); padding: .2rem 0; } .faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: .9rem 0; font-family: var(--serif); font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brass); font-size: 1.3rem; } .faq[open] summary::after { content: "–"; }
.faq > div { padding: 0 0 1rem; color: var(--ink-soft); max-width: 60ch; }
.pill-soon { background: color-mix(in srgb, var(--brass) 18%, transparent); color: var(--brass); }
.oneword { font-family: var(--serif); font-size: 2.2rem; line-height: 1; margin: .3rem 0 0; }
#waitlist .f { display: block; margin: 0 0 .8rem; } #waitlist .f span { display: block; font: 600 .66rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem; }
#waitlist input { width: 100%; font: inherit; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 6px; background: var(--field-bg); color: var(--ink); }


/* ---- journal (Ship v1 scaffold) ---------------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; margin-top: 1.6rem; }
.post { display: block; color: inherit; text-decoration: none; border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 14px; overflow: hidden; background: var(--card, transparent); }
.post:hover h3 { text-decoration: underline; }
.post-img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.post-body { padding: 1rem 1.1rem 1.2rem; }
.post-body h3 { margin: .35rem 0 .4rem; font-size: 1.2rem; }
.post-body p { margin: 0; color: var(--ink-soft, inherit); font-size: .95rem; }
.site-foot a { color: inherit; }


/* ---- mobile header: the logo must never be squeezed by the nav ------------------ */
.site-head .wrap { gap: .8rem; }
.brand { flex: 0 0 auto; }
.site-head nav { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
@media (max-width: 480px) {
  .site-head nav a { margin-left: .9rem; font-size: .86rem; }
  .brand img { height: 26px; }
}
@media (max-width: 360px) { .site-head nav a { margin-left: .7rem; font-size: .8rem; } }
@media (max-width: 480px) { .site-head nav a[href="/journal.html"] { display: none; } .site-head nav a { margin-left: .8rem; } }


/* ---- one wordmark ---------------------------------------------------------------------
   The flying copy is opaque from the first pixel. The resting copy is hidden only after the
   script has measured its box (.measured), so if the measure never happens the hero logo
   stays put instead of the hero going blank. */
.biglogo-slot.measured img { visibility: hidden; }

/* ---- floating reserve button (trip pages) ---------------------------------
   .panel.sticky only sticks above 900px, so on a phone the booking control sits at
   the bottom of a 7,500px page. This follows you down and gets out of the way the
   moment the real panel is on screen.
   Detached rather than a bar: a full-width strip with a border-top reads as browser
   chrome and the eye stops seeing it. 2px corner, not a capsule -- every .btn here
   is 2px and a pill would look borrowed from another kit.
   Both --enter and --yield are eased in JS on one frame loop. Deliberately NO
   transition on opacity or transform: a transition would fight the loop and produce
   exactly the stepping it is there to avoid. */
.float-cta {
  --enter: 0; --yield: 0;
  position: fixed; z-index: 60;
  right: clamp(14px, 3.5vw, 30px);
  bottom: calc(clamp(14px, 3.5vh, 30px) + env(safe-area-inset-bottom));
  display: inline-flex; flex-direction: column; align-items: flex-start;
  max-width: min(19rem, calc(100vw - 28px));
  padding: .78rem 1.3rem;
  background: var(--btn-bg); color: var(--btn-ink);
  border: 0; border-radius: 2px; text-decoration: none;
  box-shadow: 0 10px 30px rgba(5, 2, 71, .22), 0 2px 6px rgba(5, 2, 71, .12);
  pointer-events: none;
  will-change: opacity, transform;
  opacity: calc(var(--enter) * (1 - var(--yield)));   /* full fade: a half-lit button lets the page text show through it */
  transform: translateY(calc((1 - var(--enter)) * 12px + var(--yield) * 30px))
             scale(calc(1 - (1 - var(--enter)) * .05 - var(--yield) * .045));
  transition: box-shadow .22s ease, filter .15s ease;   /* never opacity/transform */
}
.float-cta.on { pointer-events: auto; }
.float-cta .fc-label { font: 600 .97rem/1.2 var(--sans); letter-spacing: .02em; }
.float-cta .fc-meta {
  font: .76rem/1.3 var(--sans); opacity: .74; margin-top: .17rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* hover and press change light, not geometry -- the transform belongs to the loop */
.float-cta:hover { box-shadow: 0 16px 40px rgba(5, 2, 71, .3); filter: brightness(1.04); }
.float-cta:active { filter: brightness(.965); }
.float-cta:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.float-cta.is-off { background: var(--btn-off); color: var(--ink-soft); pointer-events: none; }

/* The 1361 badge is fixed bottom-right at a z-index nothing can beat, so the
   bar leaves it room instead of sliding under it. :has() means this undoes
   itself on any page that does not carry the badge. */
body:has(#t61-hb) .float-cta { right: calc(clamp(14px, 3.5vw, 30px) + 58px); }
@media (max-width: 560px) {
  .float-cta { left: clamp(14px, 4vw, 20px); align-items: center; text-align: center;
    max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .float-cta { --yield: 0; }
  .float-cta:hover { filter: none; }
}
@media print { .float-cta { display: none; } }

/* the button floats over the end of the page; keep it off the footer links */
@media (max-width: 899px) { body:has(.float-cta) .site-foot { padding-bottom: 6rem; } }

/* ---- CTA bands ----------------------------------------------------------- */
.cta-band h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
@media (max-width: 520px) {
  .cta-band { padding: 2.2rem 1.1rem !important; }
  .cta-band .btn { display: block; width: 100%; }
  .cta-band .btn + .btn { margin: .6rem 0 0 0 !important; }
}

.float-cta .btn.is-off { background: var(--btn-off); color: var(--ink-soft); pointer-events: none; }


/* ---- hero carousel v2: the depth sandwich ---------------------------------
   16 Sept. The wordmark now lives INSIDE the photograph: .hstack.back holds
   far+mid, the lockup sits above them, and .hstack.front holds the cut-out
   foreground, so the subject crosses the lettering the way a face crosses the
   clock on an iPhone lock screen. Layers are cut by depth_layers.py.

   The shade moved with it -- it is between background and wordmark now, so it
   darkens what is behind the letters for legibility and leaves the subject in
   front of it bright. The front layer drifts a touch further than the back,
   which is what actually sells the depth: matched movement would read flat. */
/* the box itself. These lived in the v1 block that this replaced -- without
   them the wrap has no height at all and the whole hero collapses. */
.hero-wrap.carousel { position: relative; overflow: clip; aspect-ratio: 16/8;
  background: var(--hero-bg); z-index: 0; }
@media (max-width: 700px) { .hero-wrap.carousel { aspect-ratio: 4/5; } }
@supports (animation-timeline: scroll()) {
  /* the same lag the depth hero had: content slides up over the picture, which
     is what gives the logo room to glide into the header instead of snapping */
  .hero-wrap.carousel { animation: hero-lag linear both;
    animation-timeline: scroll(root block); animation-range: 0px 200vh; }
}
.hero-wrap.carousel .hero-shade   { z-index: 2; opacity: .5; }
.hero-wrap.carousel .biglogo-slot { z-index: 3; }
.hero-wrap.carousel .lay { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
/* the drift, only on the slide that is showing, so it restarts each time that
   photograph comes round again */
@keyframes hero-back  { from { transform: scale(1.02) translate3d(0,0,0); }
                        to   { transform: scale(1.06) translate3d(-0.5%,-0.4%,0); } }
@keyframes hero-front { from { transform: scale(1.03) translate3d(0,0,0); }
                        to   { transform: scale(1.11) translate3d(-1.6%,-1.1%,0); } }
.hero-wrap.carousel.no-anim .hstack .hslide { transition: none; }
.hero-wrap.carousel.no-anim .lay { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .hero-wrap.carousel .lay { animation: none !important; }
}



/* one flat photograph per slide, and a lockup that moves between them */
/* THE CLIP. hero-drift scales the photograph to 1.06 and hero-lag slides the
   whole wrap, so the picture is deliberately bigger than its box. The depth
   hero has always clipped that; the carousel never did, so on a phone the
   image spilled over the headline underneath it and cut "Travel that means
   something." in half. `clip` rather than `hidden`: hidden freezes view()
   timelines, which is how the scroll kit drives everything else. */
.hero-wrap.carousel { overflow: clip; }
/* and whatever the hero is doing, the page content sits above it. A hero that
   lags must never be able to paint over the words. */
.over-hero { position: relative; z-index: 1; background: var(--ground); }
/* The statement under the hero needs that opaque backdrop, because the hero
   drifts down behind it. But .wrap is width:92vw, so on a phone the backdrop
   became a floating rectangle sitting on the photograph with the words flush
   against its edge. Let the band run the full width of the screen and put the
   gutter back on the words inside it. */
.wrap.over-hero { width: auto; max-width: none; margin: 0;
  padding: clamp(26px,7vw,48px) 0 clamp(30px,8vw,56px); }
.wrap.over-hero .cap { width: min(1120px, calc(100% - max(44px, 8vw))); margin: 0 auto; }

.hero-wrap.carousel .hslide { position: absolute; inset: 0; opacity: 0; z-index: 1;
  transition: opacity 2s cubic-bezier(.4,0,.2,1); }
.hero-wrap.carousel .hslide.on { opacity: 1; z-index: 2; }
.hero-wrap.carousel .lay { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.hero-wrap.carousel .hslide.on .lay { animation: hero-drift 22s ease-out both; }
@keyframes hero-drift { from { transform: scale(1.00); } to { transform: scale(1.06); } }
.hero-wrap.carousel .hero-shade { z-index: 3; opacity: .5; }
.hero-wrap.carousel .biglogo-slot { z-index: 4;
  transition: left 1.8s cubic-bezier(.4,0,.2,1), top 1.8s cubic-bezier(.4,0,.2,1); }
.hero-wrap.carousel .hero-tag { transition: top 1.8s cubic-bezier(.4,0,.2,1); }
.hero-wrap.carousel.no-anim .hslide { transition: none; }
.hero-wrap.carousel.no-anim .lay { animation: none; }
.hero-wrap.carousel.no-anim .biglogo-slot { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-wrap.carousel .hslide { transition: none !important; }
  .hero-wrap.carousel .lay { animation: none !important; }
  .hero-wrap.carousel .biglogo-slot { transition: none !important; }
}



/* ---- standards homepage (/standard.html) ---------------------------------
   Built to 1361_Marketing_Standards v1.0. Everything the doc asks to be on the
   first screen is on it, at every width: headline, one button, the number, a
   real photograph, one line of proof. No carousel, nothing that delays the
   headline, no second button style competing with the call to action. */
.std-first { border-bottom: 1px solid var(--line); padding: 2.2rem 0 2.6rem; }
.std-first-in { display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .std-first-in { grid-template-columns: 1.05fr .95fr; gap: 2.6rem; }
  .std-first { padding: 3.2rem 0 3.4rem; } }
.std-say h1 { margin: 0 0 1rem; max-width: 18ch; }
.std-say .lede { margin: 0 0 1.5rem; max-width: 46ch; }
.std-do { margin: 0 0 .7rem; }
.std-do .btn { font-size: 1.02rem; padding: .95rem 1.5rem; }
.std-call { margin: 0 0 1.1rem; font-size: .95rem; }
.std-proof { margin: 0; font-size: .82rem; letter-spacing: .04em; color: var(--ink-soft); max-width: 44ch; }
.std-face { position: relative; }
.std-face-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; display: block; }
@media (min-width: 860px) { .std-face-img { aspect-ratio: 3/4; } }
.std-face-cap { display: block; margin-top: .55rem; font-size: .78rem; color: var(--ink-soft); }

.std-sec { padding: 2.6rem 0; }
.std-sec > h2 { margin-bottom: 1.1rem; }
.std-three { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .std-three { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } }
.std-three h3 { font-family: var(--serif); font-size: 1.22rem; margin: 0 0 .4rem; }
.std-three p { margin: 0; color: var(--ink-soft); }
.std-stakes { padding: 2rem 0; }
.std-stakes p { font-family: var(--serif); font-size: 1.3rem; line-height: 1.5; max-width: 42ch; margin: 0; }
.std-guide p { max-width: 54ch; }
.std-plan { margin: 0; padding-left: 1.2rem; display: grid; gap: .8rem; max-width: 52ch; }
.std-plan li { padding-left: .2rem; }
.std-price p { max-width: 52ch; }
.std-long h3 { font-family: var(--serif); font-size: 1.15rem; margin: 1.4rem 0 .4rem; }
.std-long ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.std-long p { max-width: 62ch; }

/* the sticky bar: phone on the left, the one call to action on the right */
.std-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: .6rem;
  padding: .6rem calc(.8rem + env(safe-area-inset-left,0px)) calc(.6rem + env(safe-area-inset-bottom,0px));
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.std-bar .btn { flex: 1; text-align: center; padding: .8rem .6rem; }
.std-bar .btn.btn-quiet { flex: 0 0 34%; }
@media (min-width: 860px) { .std-bar { display: none; } }
body:has(.std-bar) { padding-bottom: 4.6rem; }
@media (min-width: 860px) { body:has(.std-bar) { padding-bottom: 0; } }

/* 2026-09-16 - header fits a 320px phone (DESIGN_STANDARD section 5: nothing scrolls
   sideways at 400px). The nav is white-space:nowrap, so below ~360px the theme button
   was pushed 27px past the viewport and the whole document scrolled sideways. Shrink
   the button and its gap instead of letting the row grow. */
@media (max-width: 360px) {
  .site-head .wrap { gap: .5rem; }
  .site-head nav a { margin-left: .6rem; font-size: .78rem; }
  .theme-btn { margin-left: .6rem; width: 30px; height: 30px; }
  .theme-btn svg { width: 14px; height: 14px; }
}
@media (max-width: 330px) {
  .site-head nav a { margin-left: .5rem; font-size: .74rem; }
  .theme-btn { margin-left: .5rem; width: 28px; height: 28px; }
}


/* A photograph that is not of the place the page is selling says so, visibly.
   Quiet enough to read as a credit line, not an apology. */
.img-credit{
  margin: .45rem 0 0;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  font-style: italic;
}


/* ---- no element may push the page sideways --------------------------------
   Alex, 19 Sept: "This is a super common issue on most sites I have you build."
   It only takes one element a few pixels too wide: the document becomes
   horizontally scrollable, and a thumb then drags the page half off the
   screen. These rules make it impossible instead of us finding the culprit
   each time.

   Deliberately NOT setting overflow-x on html/body here. This site's motion is
   scroll-driven and clipping the root is one of the few things that can upset
   a view() timeline. It sweeps clean at 320-430px, so the guard below is the
   belt and the sweep is the braces. */
img, svg, video, canvas, iframe, table { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
/* A grid or flex child will not shrink below its own content unless told to.
   One long word or one wide form control is all it takes. */
.grid > *, .cards > *, .rail > *, .track > *, .row > * { min-width: 0; }
/* iOS sizes date and time controls to its own idea of the value's width and
   ignores width:100%, so one date field can be wider than the phone. This is
   the one difference no desktop browser reproduces. */
input[type=date], input[type=time], input[type=datetime-local], input[type=month] {
  -webkit-appearance: none; appearance: none; min-width: 0; text-align: left;
}
/* An email address or a URL with no spaces in it cannot be broken by normal
   wrapping, so it sticks out of whatever contains it. */
p, li, td, dd, .cap, .muted { overflow-wrap: anywhere; }

/* coming soon: a card with no photo yet (22 Sept) */
.card-soon{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;width:100%;
  background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--sage,#A2C990) 38%,transparent),transparent 60%),
  var(--navy,#050247);color:var(--cream,#F5F1E6)}
.card-soon span{font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:.02em;opacity:.92}
.xcard.is-soon{cursor:default}

/* ================================================================ the dock
   Satsang's dock (22 Sept): always on screen. Top centre on a desktop, bottom
   centre on a phone or tablet, with the call to action beside it -- above it
   on a phone. It replaces the old sticky nav bar; the logo stays at the top of
   the page and scrolls away with it. */
.site-head.sa-top { position: relative; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 5; }
.sa-bar { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  pointer-events: none; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); flex-direction: column-reverse; width: max-content; max-width: calc(100vw - 20px); }
.sa-bar > * { pointer-events: auto; }
.sa-dock { display: flex; align-items: center; gap: 1px; padding: 5px; border-radius: 999px;
  background: rgba(5, 2, 71, .74); border: 1px solid rgba(245, 241, 230, .16);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 30px rgba(5, 2, 71, .28); }
:root[data-theme="dark"] .sa-dock { background: rgba(28, 27, 54, .8); border-color: rgba(245, 241, 230, .14); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sa-dock { background: rgba(28, 27, 54, .8); border-color: rgba(245, 241, 230, .14); box-shadow: 0 10px 30px rgba(0,0,0,.45); } }
.sa-dock a { color: #F5F1E6; text-decoration: none; font: 500 .84rem/1 var(--sans); letter-spacing: .02em; padding: 0 13px; height: 38px;
  display: inline-flex; align-items: center; border-radius: 999px; transition: background .2s ease; white-space: nowrap; }
.sa-dock a:hover { background: rgba(245, 241, 230, .1); }
.sa-dock a[aria-current] { background: rgba(245, 241, 230, .18); box-shadow: inset 0 0 0 1px rgba(245, 241, 230, .22); }
.sa-dock .ds { display: none; }
.sa-dock .sa-home { padding: 0 8px; }
.sa-dock .sa-home img { width: 24px; height: 24px; display: block; }
.sa-dock .theme-btn { margin: 0 0 0 2px; width: 38px; height: 38px; border: 0; color: #F5F1E6; background: transparent; }
.sa-dock .theme-btn:hover { background: rgba(245, 241, 230, .1); color: #fff; }
.sa-cta { background: var(--sage); color: var(--navy); text-decoration: none; font: 600 .88rem/1 var(--sans); letter-spacing: .02em;
  padding: 0 20px; height: 44px; display: inline-flex; align-items: center; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(5, 2, 71, .28); white-space: nowrap; transition: transform .2s ease, background .2s ease; }
.sa-cta:hover { background: var(--btn-hover); transform: translateY(-1px); }
body { padding-bottom: 128px; }
.site-foot { margin-bottom: -128px; padding-bottom: calc(2.5rem + 128px); }
.float-cta { display: none !important; }
@media (max-width: 420px) {
  .sa-dock a { padding: 0 10px; font-size: .8rem; }
  .sa-dock .dl { display: none; } .sa-dock .ds { display: inline; }
}
@media (min-width: 1000px) {
  .sa-bar { bottom: auto; top: 14px; flex-direction: row; }
  .sa-top .wrap { height: 72px; }
  body { padding-bottom: 0; }
  .site-foot { margin-bottom: 0; padding-bottom: 2.5rem; }
}
/* 23 Sept (Alex): the dock sits at the top on phones and tablets too. The
   header row becomes a spacer the dock rests in (its globe is the home link),
   and the call to action floats on its own at the bottom. */
@media (max-width: 999px) {
  .sa-bar { top: calc(env(safe-area-inset-top, 0px) + 10px); bottom: auto; left: 10px; right: 10px;
    transform: none; width: auto; max-width: none; flex-direction: row; justify-content: center; }
  .sa-cta { position: fixed; left: 50%; translate: -50% 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
  .site-head.sa-top .wrap { height: calc(env(safe-area-inset-top, 0px) + 68px); }
  .site-head.sa-top .brand { visibility: hidden; }
  body { padding-bottom: 76px; }
  .site-foot { margin-bottom: -76px; padding-bottom: calc(2.5rem + 76px); }
}
@media print { .sa-bar { display: none; } }

/* 24 Sept: the dock's button steps aside while the page's own copy of it is on
   screen (TWIN_JS in build.py), and slides back once you scroll past. */
.sa-cta { transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .28s ease, background .2s ease; }
.sa-cta.twin { opacity: 0; pointer-events: none; transform: scale(.92);
  /* hidden for real once faded, so Safari 26 does not paint its toolbar from it */
  visibility: hidden; transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .28s ease, background .2s ease, visibility 0s linear .28s; }
@media (max-width: 999px) {
  .sa-cta.twin { transform: translateY(28px) scale(.92); }
}
@media (prefers-reduced-motion: reduce) { .sa-cta { transition: opacity .2s ease; } .sa-cta.twin { transform: none; } }
/* 25 Sept, found by elimination on Alex's iPhone: Safari 26 reads the
   background-color of a fixed element near the bottom edge and paints a solid
   bar under its toolbar from it. The floating button kept its pill colour on
   itself, so the button is now transparent and the pill is drawn by ::before
   underneath the words. Same look; Safari sees nothing to extend. */
.sa-cta { background: transparent !important; box-shadow: none !important; position: relative; isolation: isolate; }
.sa-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--sage); box-shadow: 0 10px 30px rgba(5, 2, 71, .28); transition: background .2s ease; }
.sa-cta:hover::before { background: var(--btn-hover); }
@media (max-width: 999px) { .sa-cta { position: fixed; } }
/* and while it is stepped aside it is not there at all (display:none), since
   Safari counts a hidden fixed element too. It fades back in from nothing. */
.sa-cta.twin { display: none; }
@starting-style { .sa-cta { opacity: 0; transform: translateY(28px) scale(.92); } }

/* ================================================================ rounded
   23 Sept (Alex): everything takes the dock's rounded look. Buttons, tags and
   one-line fields are pills like the dock and its green button; cards, panels
   and photos get soft corners. Full-bleed photos (heroes, journey panels) stay
   edge to edge. Prefixed with html so these win over the page-level styles. */
:root { --r-pill: 999px; --r-card: 22px; --r-img: 16px; --r-field: 16px; }
html .btn, html .btn-quiet, html .float-cta, html .tab, html .r-tab,
html button.btn, html input[type=submit], html input[type=button] { border-radius: var(--r-pill); }
html .pill, html .tbc, html .r-flag, html .ph-badge, html .notice { border-radius: var(--r-pill); }
html .notice { border-radius: var(--r-field); }
html .xcard, html .panel, html .tier, html .post, html .r-tile, html .r-row,
html .quote, html .drop, html .uplist li { border-radius: var(--r-card); }
html .quote { border-radius: 0 var(--r-card) var(--r-card) 0; }
html .tier, html .uplist li { border-radius: var(--r-field); }
html .gal-img, html .std-face-img, html .xcard .card-img { border-radius: var(--r-img); }
html .xcard .card-img { border-radius: 0; }
html input[type=text], html input[type=email], html input[type=tel], html input[type=number],
html input[type=date], html input[type=search], html input[type=password], html input:not([type]), html select,
html #waitlist input { border-radius: var(--r-pill); padding-left: 1.1rem; padding-right: 1.1rem; }
html textarea { border-radius: var(--r-field); }
html .progress { border-radius: var(--r-pill); }


/* ================================================================ dots
   23 Sept (Alex): the background is the globe's dots, alive. A dotted world
   map drawn on one canvas fixed behind the page (#dots, see DOTS_JS). It turns
   slowly, turns a little more as you scroll, swells away from a cursor or a
   finger, and sends a ripple out from a tap. Content panels are see-through so
   the dots run behind everything; photos and cards stay solid. */
:root { --dot: #050247; --dot-hi: #3d7a55; --dot-a: .24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dot: #A8CF98; --dot-hi: #E4F5DA; --dot-a: .34; } }
:root[data-theme="dark"] { --dot: #A8CF98; --dot-hi: #E4F5DA; --dot-a: .34; }
html { background: var(--ground); }
html body, html .over-hero { background: transparent; }
/* the wrapper is what is fixed, and it is invisible to Safari 26's edge sampling
   (visibility:hidden + pointer-events:none); the canvas inside stays visible */
#dotswrap { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; visibility: hidden; overflow: hidden; }
/* 29 Sept: drawn once, half again as tall as the screen; the browser slides it up with the scroll (dots.js) */
#sa-dots { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; display: block; visibility: visible; will-change: transform; }
@supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) {
  #sa-dots { animation: sa-dots-rise linear both; animation-timeline: scroll(root block); }
  @keyframes sa-dots-rise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--rise, 0px), 0); } }
} }
html #a4, html #a4 .stage, html #a9, html #a9 .sticky { background: transparent; }
html #a5 .pans-h { background: none; }
html #a5.pans { background: radial-gradient(90vmax 50vmax at 0% 0%, rgba(168,207,152,.16), transparent 60%),
  radial-gradient(70vmax 50vmax at 100% 30vmax, rgba(120,100,255,.2), transparent 60%), var(--navy); }
/* the hero no longer slides behind the words (they are see-through now); the
   photograph drifts inside its own frame instead */
@supports (animation-timeline: scroll()) {
  html .hero-wrap.carousel { animation: none; }
  html .hero-wrap.carousel .hslide { top: -12%; bottom: -12%; animation: hero-par linear both;
    animation-timeline: scroll(root block); animation-range: 0px 100vh; }
  @keyframes hero-par { to { transform: translateY(10%); } }
}
@media (prefers-reduced-motion: reduce) { html .hero-wrap.carousel .hslide { animation: none; top: 0; bottom: 0; } }

/* 24 Sept (Alex): no accidental zooming on phones. Double-tap zoom is off, and
   no field is under 16px (iPhone zooms in on smaller ones when tapped).
   Pinch-to-zoom stays on the public site on purpose: travellers who need
   larger text can still get it. */
html { touch-action: manipulation; }
@media (max-width: 999px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1em) !important; }
}

/* ---------------------------------------------------------------- the passport
   Travellers' way to their page, in the dock (24 Sept). A little passport: the
   cover swings open and a stamp lands on the page inside. */
.sa-dock .sa-pass { padding: 0 10px; gap: 8px; }
.sa-pass .pp { position: relative; width: 17px; height: 22px; perspective: 90px; display: inline-block; flex: none; }
.sa-pass .pp-page, .sa-pass .pp-cover { position: absolute; inset: 0; border-radius: 2px 3.5px 3.5px 2px; }
.sa-pass .pp-page { background: #F5F1E6; display: grid; place-items: center; box-shadow: inset 1.5px 0 0 rgba(5,2,71,.18); }
.sa-pass .pp-stamp { width: 10px; height: 10px; border-radius: 50%; border: 1.6px dashed #4E7040; opacity: 0;
  transform: scale(1.8) rotate(-40deg); transition: transform .32s cubic-bezier(.3,1.5,.5,1), opacity .15s; }
.sa-pass .pp-cover { background: #A2C990; display: grid; place-items: center; transform-origin: 0 50%;
  box-shadow: inset 2px 0 0 rgba(5,2,71,.28), 0 1px 2px rgba(0,0,0,.25);
  transition: transform .46s cubic-bezier(.2,.8,.2,1), background .46s; }
.sa-pass .pp-globe { transition: opacity .2s; }
.sa-pass .pp-globe { width: 9px; height: 9px; border-radius: 50%; border: 1.4px solid #050247; position: relative; overflow: hidden; }
.sa-pass .pp-globe::before { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 1.4px; margin-top: -.7px; background: #050247; }
.sa-pass .pp-globe::after { content: ""; position: absolute; top: -1px; bottom: -1px; left: 50%; width: 3px; margin-left: -2.2px; border: 1.2px solid #050247; border-width: 0 1.2px; border-radius: 50%; }
.sa-pass:hover .pp-cover, .sa-pass:focus-visible .pp-cover, .sa-pass.open .pp-cover, .sa-pass[aria-current] .pp-cover { transform: rotateY(-160deg); background: #7FA66E; }
.sa-pass:hover .pp-globe, .sa-pass:focus-visible .pp-globe, .sa-pass.open .pp-globe, .sa-pass[aria-current] .pp-globe { opacity: 0; }
.sa-pass:hover .pp-stamp, .sa-pass:focus-visible .pp-stamp, .sa-pass.open .pp-stamp, .sa-pass[aria-current] .pp-stamp {
  opacity: 1; transform: scale(1) rotate(-14deg); transition-delay: .2s; }
@keyframes saPeek { 0%, 100% { transform: none; } 35%, 70% { transform: rotateY(-78deg); } }
.sa-pass.peek .pp-cover { animation: saPeek 1.6s cubic-bezier(.45,0,.2,1) 1; }
.sa-pass .pp-l { display: none; }
@media (min-width: 1000px) { .sa-pass .pp-l { display: inline; } .sa-dock .sa-pass { padding: 0 14px 0 11px; } }
@media (prefers-reduced-motion: reduce) { .sa-pass .pp-cover, .sa-pass .pp-stamp { transition: none; animation: none; } }

/* 24 Sept audit: footer links were 16px tall on a phone; 44px to tap now */
.site-foot .foot-links a{display:inline-block;padding:12px 0;min-height:44px;box-sizing:border-box}

/* 24 Sept polish: the passport stamp, shared by the confirmation, the traveller
   details page and the traveller page */
.pstamp{position:absolute;right:16px;bottom:16px;z-index:2;border:3px double currentColor;border-radius:10px;padding:7px 11px 6px;
  font:700 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;transform:rotate(-9deg);opacity:.85;pointer-events:none}
.pstamp.inl{position:static;display:inline-block}
.pstamp.booked,.pstamp.inl{color:#a2472f}
.pstamp.slam{animation:saSlam .55s cubic-bezier(.3,1.5,.5,1) .25s both}
@keyframes saSlam{0%{opacity:0;transform:rotate(-9deg) scale(2.4)}55%{opacity:1;transform:rotate(-9deg) scale(.92)}100%{opacity:.85;transform:rotate(-9deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.pstamp.slam{animation:none}}

/* 25 Sept (Alex): "I want the hero photo to start at the top with the
   navigation bar floating over it." On a page that opens with the hero, the
   header row stops taking up space and lies over the photograph; the photo
   runs up under the phone's status bar and the floating menu. The header's
   own lockup is the cream one while it sits on the picture. */
body:has(main > .hero-wrap:first-child) .site-head.sa-top { position: absolute; top: 0; left: 0; right: 0; }
body:has(main > .hero-wrap:first-child) .site-head.sa-top .hdr-logo .on-light { display: none !important; }
body:has(main > .hero-wrap:first-child) .site-head.sa-top .hdr-logo .on-dark { display: block !important; }

/* 25 Sept (Alex): "Let's give up on the floating button. Let's work with
   Safari, not against it." On an iPhone, Safari 26 paints a solid bar under
   its own floating toolbar whenever something of ours is pinned near the
   bottom of the screen, at any height we tried. So on phones and tablets
   nothing of ours floats down there: the button's job is done by the page's
   own buttons and the menu's Adventures link, the bottom of the page scrolls
   freely under Safari's glass, and the room kept for the button is given back.
   Desktop keeps the button in the menu, where it always was. */
@media (max-width: 999px) {
  .sa-cta { display: none !important; }
  body { padding-bottom: 0; }
  .site-foot { margin-bottom: 0; padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* 25 Sept: the bar came back on scroll. The scroll-told sections pin their
   stage with position:sticky, and a pinned full-screen stage is exactly what
   makes Safari 26 paint a solid bar under its toolbar. So where the browser
   can, the stage is not sticky at all: it is an ordinary block moved down its
   section by a scroll-driven animation, which runs on the compositor and
   looks the same (Safari 26, Chrome 115+). Browsers without it keep sticky. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .act[class*="tall-"] { view-timeline: --act block; }
    html .act[class*="tall-"] > .stage, html .act[class*="tall-"] > .sticky { position: absolute !important; top: 0 !important; left: 0; right: 0;
      animation: act-pin linear both; animation-timeline: --act; animation-range: contain 0% contain 100%; }
    .act.tall-2 > .stage, .act.tall-2 > .sticky { --pin: 100%; }
    .act.tall-3 > .stage, .act.tall-3 > .sticky { --pin: 200%; }
    .act.tall-4 > .stage, .act.tall-4 > .sticky { --pin: 300%; }
    @keyframes act-pin { from { translate: 0 0; } to { translate: 0 var(--pin, 0%); } }
  }
}

/* === Hero sun (25 Sept, Alex) ===========================================
   The home hero's lockup is split in two: the sun is drawn inline so its
   parts can move (it builds itself leaf by leaf, then the petals keep
   turning), and the words are an image that writes itself on. As you
   scroll, the sun flies up into the dock and becomes the dock's sun; until
   then the dock has no sun on the home page. body.sun-dock is set by SUN_JS
   once it has measured the flight, so without JS, without scroll timelines,
   or with reduced motion, the dock simply keeps its sun and nothing flies. */
.biglogo-slot { pointer-events: none; }
.biglogo-slot .lock { display: flex; align-items: center; width: 100%; height: 100%; }
.biglogo-slot .lock .sun { flex: 0 0 32.873%; display: block; }
.biglogo-slot .lock .sun svg { display: block; width: 100%; height: auto; overflow: visible; }
.biglogo-slot .lock img.wd { flex: 0 0 67.127%; width: 67.127%; height: auto; display: block; }
/* 1 Oct (Alex: "the logo has bad readability on most of these photos"): a soft dark shade behind the logo (a gradient, no filter) and no filter at all. Never a filter on the logo pieces (drop-shadow on them crashed WebKit headless, 1 Oct), and a filter on
   an ancestor would also become the containing block of the sun when it flies to the dock. */
.biglogo-slot .lock { position: relative; }
.biglogo-slot .lock::before { content: ""; position: absolute; left: -14%; right: -10%; top: -42%; bottom: -42%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 6, 30, .46), rgba(8, 6, 30, .28) 55%, rgba(8, 6, 30, 0)); }
#heroSun .globe, #heroSun .leaf, #heroSun .rays { transform-box: fill-box; transform-origin: 50% 50%; }
.sa-dock .sa-home img { width: 26px; height: 26px; }
@media (prefers-reduced-motion: no-preference) {
  #heroSun .rays  { animation: sun-turn 60s linear infinite; }
  #heroSun .globe { animation: sun-g-in .9s cubic-bezier(.2,.8,.2,1) both; }
  /* 28 Sept 12:30 (Alex): "the continents and the white circle that makes the stamp aren't aligned".
     The land used to sway 8 units side to side (and slide in from 40 to the left), so it sat
     off the white globe most of the time. It now fades in exactly in place and stays put. */
  #heroSun .land  { animation: sun-land-in 1.1s .45s ease-out both; }
  #heroSun .leaf  { animation: sun-leaf-in .55s cubic-bezier(.3,1.5,.5,1) both, sun-breathe 6s ease-in-out infinite;
                    animation-delay: calc(.7s + var(--i) * .07s), calc(2s + var(--i) * .5s); }
  @supports (animation-timeline: scroll()) {
    /* the sun has to pass over the dock, so the hero stops being its own
       stack while the sun can fly (it is clipped to its box either way) */
    body.sun-dock .hero-wrap.carousel { z-index: auto; }
    body.sun-dock .hero-wrap.carousel .biglogo-slot { z-index: 75; }
    body.sun-dock #heroSun { animation: sun-fly linear both; animation-timeline: scroll(root block);
      animation-range: 0px var(--sun-range, 50vh); }
    body.sun-dock .biglogo-slot img.wd { animation: sun-words linear both; animation-timeline: scroll(root block);
      animation-range: 0px calc(var(--sun-range, 50vh) * .45); }
    /* the dock's half is driven by SUN_JS classes, not a scroll timeline:
       Safari drops scroll timelines during the pull-down bounce at the top */
    body.sun-dock .sa-dock .sa-home { overflow: clip; max-width: 0; padding-left: 0; padding-right: 0;
      transition: max-width .45s cubic-bezier(.2,.8,.2,1), padding .45s cubic-bezier(.2,.8,.2,1), background .2s ease; }
    body.sun-dock.sun-open .sa-dock .sa-home { max-width: 42px; padding-left: 8px; padding-right: 8px; }
    body.sun-dock .sa-dock .sa-home img { opacity: 0; transition: opacity .2s ease; }
    body.sun-dock.sun-in .sa-dock .sa-home img { opacity: 1; }
  }
}
body.sun-measure #heroSun, body.sun-measure .sa-dock .sa-home, body.sun-measure .sa-dock .sa-home img { animation: none !important; }
@keyframes sun-turn    { to { transform: rotate(360deg); } }
@keyframes sun-sway    { 0%, 100% { transform: none; } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes sun-breathe { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .7; transform: scale(.9); } }
@keyframes sun-g-in    { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes sun-land-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sun-leaf-in { from { opacity: 0; transform: scale(.2) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes sun-fly     { 0% { transform: none; opacity: 1; } 96% { opacity: 1; }
                         100% { transform: translate(var(--sun-dx, 0px), var(--sun-dy, 0px)) scale(var(--sun-ds, .2)); opacity: 0; } }
@keyframes sun-words   { to { opacity: 0; transform: translateX(-6%) scale(.92); } }
@keyframes sun-slot    { from { max-width: 0; padding-left: 0; padding-right: 0; } to { max-width: 42px; padding-left: 8px; padding-right: 8px; } }
@keyframes sun-arrive  { from { opacity: 0; } to { opacity: 1; } }

/* === Dock light mode (25 Sept, Alex) =====================================
   The dock was navy glass in both themes. In light mode it is now cream
   glass with navy words and the navy-globe sun; dark mode is unchanged.
   Colours are tokens so each theme redefines them in one place. */
.sa-dock { --dk-bg: rgba(245, 241, 230, .84); --dk-edge: rgba(5, 2, 71, .12); --dk-ink: #050247;
  --dk-hover: rgba(5, 2, 71, .07); --dk-cur: rgba(5, 2, 71, .09); --dk-cur-edge: rgba(5, 2, 71, .18);
  --dk-shadow: 0 10px 30px rgba(5, 2, 71, .16);
  background: var(--dk-bg); border-color: var(--dk-edge); box-shadow: var(--dk-shadow); }
:root[data-theme="dark"] .sa-dock { --dk-bg: rgba(28, 27, 54, .8); --dk-edge: rgba(245, 241, 230, .14); --dk-ink: #F5F1E6;
  --dk-hover: rgba(245, 241, 230, .1); --dk-cur: rgba(245, 241, 230, .18); --dk-cur-edge: rgba(245, 241, 230, .22);
  --dk-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sa-dock { --dk-bg: rgba(28, 27, 54, .8); --dk-edge: rgba(245, 241, 230, .14); --dk-ink: #F5F1E6;
  --dk-hover: rgba(245, 241, 230, .1); --dk-cur: rgba(245, 241, 230, .18); --dk-cur-edge: rgba(245, 241, 230, .22);
  --dk-shadow: 0 10px 30px rgba(0, 0, 0, .45); } }
.sa-dock a { color: var(--dk-ink); }
.sa-dock a:hover { background: var(--dk-hover); }
.sa-dock a[aria-current] { background: var(--dk-cur); box-shadow: inset 0 0 0 1px var(--dk-cur-edge); }
.sa-dock .theme-btn { color: var(--dk-ink); }
.sa-dock .theme-btn:hover { background: var(--dk-hover); color: var(--dk-ink); }
.sa-pass .pp-page { box-shadow: inset 1.5px 0 0 rgba(5, 2, 71, .18), 0 0 0 1px var(--dk-edge); }
/* the dock's sun: navy globe on cream, cream globe on navy */
.sa-dock .sa-home img.on-dark { display: none; }
.sa-dock .sa-home img.on-light { display: block; }
:root[data-theme="dark"] .sa-dock .sa-home img.on-dark { display: block; }
:root[data-theme="dark"] .sa-dock .sa-home img.on-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sa-dock .sa-home img.on-dark { display: block; }
  :root:not([data-theme="light"]) .sa-dock .sa-home img.on-light { display: none; }
}

/* measuring the flight: the dock's sun slot open, and no transition either way */
body.sun-measure .sa-dock .sa-home { max-width: none !important; padding-left: 8px !important; padding-right: 8px !important; }
body.sun-still .sa-dock .sa-home, body.sun-still .sa-dock .sa-home img { transition: none !important; }

/* The circle that catches the sun (25 Sept, Alex). The home link's current-
   page pill used to ride the slot as it widened, so for a moment it was a
   thin line. Now the slot opens bare, and the circle is drawn on its own at
   full size, popping in (scale, never width) just before the sun lands. */
body.sun-dock .sa-dock .sa-home { position: relative; overflow: visible; }
body.sun-dock .sa-dock .sa-home[aria-current] { background: transparent; box-shadow: none; }
body.sun-dock .sa-dock .sa-home[aria-current]::before { content: ""; position: absolute; left: 50%; top: 50%;
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  background: var(--dk-cur); box-shadow: inset 0 0 0 1px var(--dk-cur-edge);
  transform: scale(0); opacity: 0; pointer-events: none;
  transition: transform .38s cubic-bezier(.3,1.45,.5,1), opacity .18s ease; }
body.sun-dock.sun-near .sa-dock .sa-home[aria-current]::before { transform: none; opacity: 1; }
body.sun-dock .sa-dock .sa-home img { position: relative; }
body.sun-still .sa-dock .sa-home::before { transition: none !important; }
body.sun-dock:not(.sun-open) .sa-dock .sa-home { overflow: clip; }

/* No crossfade at the landing (25 Sept, Alex: "the globe doubles up"). The
   two suns are never both visible: the hero's flies at full opacity and the
   dock's shows the instant it lands, both switched by the same class in the
   same frame, so there is no moment with two slightly different globes. */
@keyframes sun-fly { from { transform: none; } to { transform: translate(var(--sun-dx, 0px), var(--sun-dy, 0px)) scale(var(--sun-ds, .2)); } }
body.sun-dock.sun-in #heroSun { visibility: hidden; }
body.sun-dock .sa-dock .sa-home img { transition: none; }

/* QA sweep (25 Sept): a small-caps label that wraps onto two lines was set
   solid (line-height 1), so the lines touched on a phone. */
.eyebrow, .kick { line-height: 1.45 !important; }

/* Launch check (25 Sept): at 320px the dock squeezed the theme button to 23px
   and the home sun to 31px. They keep their size; the text links give up a
   little padding instead. */
.sa-dock .theme-btn, .sa-dock .sa-home, .sa-dock .sa-pass { flex-shrink: 0; }
@media (max-width: 340px) { .sa-dock a:not(.sa-home):not(.sa-pass) { padding: 0 7px; } }

/* ---- icons and tooltips (tips.js, 28 Sept) ----
   Icons: the traveller form's line style, sized to the words they sit with.
   Tooltip: navy on cream (cream on navy in the dark), a small arrow to its control. */
.sa-ico { width: 1.1em; height: 1.1em; flex: none; display: inline-block; vertical-align: -.2em; margin-right: .5em;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn .sa-ico { margin-right: .55em; }
button.quiet .sa-ico, a.quiet .sa-ico, .linkish .sa-ico { width: 1em; height: 1em; margin-right: .4em; opacity: .85; }
#sa-tip { position: fixed; z-index: 2147483000; max-width: min(260px, calc(100vw - 16px)); pointer-events: none;
  background: var(--ink); color: var(--ground); font: 500 .8rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; text-align: left;
  padding: .5rem .7rem; border-radius: 10px; box-shadow: 0 10px 26px rgba(5,2,71,.22);
  opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; }
#sa-tip.below { transform: translateY(-4px); }
#sa-tip.on { opacity: 1; transform: none; }
#sa-tip::after { content: ""; position: absolute; left: var(--ax, 50%); top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
#sa-tip.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { #sa-tip { transition: none; } }

/* 28 Sept 12:14 (Alex): "sit at the bottom of the photo centered with the dock ...
   no more moving around between photos". The lockup rests at the foot of the
   photograph, centred like the dock above it, and stays there whatever photo is
   showing. Scrolling still sends its sun up into the dock (SUN_JS measures the
   flight from here). */
.hero-wrap.carousel .biglogo-slot { left: 50% !important; top: auto !important;
  bottom: clamp(18px, 6%, 64px); transform: translateX(-50%); transition: none;
  width: min(460px, 70vw); }
.hero-wrap.carousel .hero-tag { display: none; }

/* 28 Sept 12:47 (Alex, from Noonan: "make sure nothing from the background obscures text").
   An automated contrast pass (glyph pixels vs what is behind them, every page, phone and desktop)
   found three spots under the WCAG line; each gets a little more shade behind its words. */
@media (max-width: 700px) {
  .th-words .eyebrow, .th-words .th-tag { text-shadow: 0 1px 12px rgba(5,2,71,.9), 0 0 4px rgba(5,2,71,.85), 0 0 1px rgba(5,2,71,.9); }
}
#a5 .pan .pv { background:
  linear-gradient(to top, rgba(5,2,71,.9) 0%, rgba(5,2,71,.55) 42%, rgba(5,2,71,.18) 72%, transparent 100%),
  linear-gradient(to right, rgba(5,2,71,.45) 0%, rgba(5,2,71,0) 60%); }
#a5 .pan .pt h3, #a5 .pan .pt .pd { text-shadow: 0 2px 18px rgba(5,2,71,.55); }
#saGlobe .skynote { position: relative; z-index: 2; display: inline-block; padding: .35rem .8rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ground) 82%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 700px) { .th-words .eyebrow { color: #F5F1E6; } }
.xc-tx small { color: #446a35 !important; }

/* === The collapsible dock (28 Sept 13:05, Alex) ========================================
   "lets use this collapsable dock throughout the site and this will leave us room for a call
   to action at the top for mobile too". On every page and every screen the dock rests as its
   sun at the top left; tap (or point at) the sun and it opens into the menu. The call to action
   sits at the top right, phones included. Mocked up first at satsang-mockups /menu-collapse. */
.sa-bar { left: calc(env(safe-area-inset-left, 0px) + 14px) !important; right: calc(env(safe-area-inset-right, 0px) + 14px) !important;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important; bottom: auto !important; transform: none !important;
  width: auto !important; max-width: none !important; flex-direction: row !important; justify-content: space-between !important; }
/* closed, every link but the sun folds to nothing; open, they unfold one after another */
.sa-dock > a:not(.sa-home):not(.sa-pass), .sa-dock > button { max-width: 0; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important;
  overflow: clip; opacity: 0; transition: max-width .45s cubic-bezier(.2,.8,.2,1), padding .45s cubic-bezier(.2,.8,.2,1), opacity .15s ease; }
.sa-bar.dk-open .sa-dock > a:not(.sa-home):not(.sa-pass), .sa-bar.dk-open .sa-dock > button { max-width: 220px; padding-left: 13px !important; padding-right: 13px !important; opacity: 1; overflow: visible;
  transition: max-width .45s cubic-bezier(.2,.8,.2,1), padding .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease .1s; }
@media (max-width: 420px) { .sa-bar.dk-open .sa-dock > a:not(.sa-home) { padding-left: 10px !important; padding-right: 10px !important; } }
.sa-dock { gap: 0 !important; flex: none; }
.sa-dock .sa-home { flex: none; }
.sa-dock .pp-bub { display: none !important; }
/* the header's own logo would sit under the sun: the sun is the logo now */
.site-head.sa-top .brand { visibility: hidden; }
/* the call to action: top right, on phones too */
.sa-bar .sa-cta { display: inline-flex !important; position: relative !important; left: auto; bottom: auto; translate: none; margin-left: auto; }
.sa-bar .sa-cta.twin { display: none !important; }
@media (max-width: 520px) { .sa-bar .sa-cta { height: 40px; padding: 0 15px; font-size: .82rem; } }
/* on a phone the open menu takes the row; the button steps aside until it closes */
@media (max-width: 700px) { .sa-bar.dk-open .sa-cta { opacity: 0 !important; pointer-events: none; } }
/* 28 Sept 13:40 (Alex: "the dock should be visible first then collapse ... i see no way to login"):
   the dock starts open at the top of every page and folds into the sun once you scroll on (DOCK_JS);
   the passport (sign in / Traveller Page) always stays in the dock, open or folded. */
.sa-bar:not(.dk-open) .sa-dock .sa-pass .pp-l { display: none; }
.sa-bar:not(.dk-open) .sa-dock .sa-pass { padding-left: 8px !important; padding-right: 10px !important; }
body.sun-dock .sa-dock { transition: max-width .5s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
@media (prefers-reduced-motion: reduce) { .sa-dock, .sa-dock > a { transition: none !important; } }
/* the page no longer keeps room at the bottom for a floating button */
body { padding-bottom: 0 !important; }
.site-foot { margin-bottom: 0 !important; }

/* 28 Sept 14:25 (Alex: "when the dock collapses can it collapse to the globe but the globe stay still",
   and the button "should sit just to the right of the dock"). Open, the dock is centred on the page; its
   left edge (where the sun is) never moves, so folding draws the links into the sun. The call to action
   rides just to the right of the dock. --dk-l is set by DOCK_JS from the open dock's width. */
.sa-bar { justify-content: flex-start !important; gap: 12px !important; padding-left: var(--dk-l, 0px); box-sizing: border-box; }
.sa-bar > .sa-dock { position: relative; }
.sa-bar .sa-cta { margin-left: 0 !important; }
.sa-bar.dk-init > .sa-dock, .sa-bar.dk-init > .sa-dock *,
html.cta-measure .sa-dock, html.cta-measure .sa-dock *,
body.sun-measure .sa-dock, body.sun-measure .sa-dock *, body.sun-still .sa-dock, body.sun-still .sa-dock * { transition: none !important; }

/* 28 Sept 15:10 (Alex: "same small book in the dock"): the dock's passport is a picture of the 3D passport
   itself, on every page. It leans in when you point at it or tap it, and turns open on the Traveller Page. */
.sa-pass .pp.pp-mini{width:18px;height:23px;perspective:none}
.sa-pass .pp.pp-mini img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1.5px rgba(5,2,71,.35));
  transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.sa-pass:hover .pp.pp-mini img,.sa-pass.open .pp.pp-mini img{transform:rotate(-8deg) scale(1.18)}
.sa-pass[aria-current] .pp.pp-mini img{transform:rotate(-6deg) scale(1.12)}
.sa-pass.hello .pp.pp-mini img{animation:ppm-hello 1.2s ease 2}
@keyframes ppm-hello{0%,100%{transform:none}30%{transform:rotate(-10deg) scale(1.2)}60%{transform:rotate(6deg) scale(1.1)}}

/* 28 Sept 16:15 (Alex: "I want the photo up there"). At the very top, Safari shows a strip above the page
   under the clock. The hero's photograph now reaches up into it: the hero box stops clipping at its top edge
   (it still clips its sides and bottom), and the photographs reach 64px above the box. */
/* 29 Sept: clip sideways (the photo's slow drift was widening the page on phones), open at the top */
.hero-wrap.carousel { overflow-x: clip !important; overflow-y: visible !important; clip-path: inset(-80px 0 0 0); }
html .hero-wrap.carousel .hslide { top: calc(-12% - 64px); }

/* === 29 Sept clean-up (Alex: "the dock is jumping all over the place") =====================
   The dock keeps one size: the sun's place in it is always kept (it used to open from nothing
   as the hero's sun flew in, which pushed everything sideways mid-scroll). Until the sun lands,
   that place shows the ring it lands in. Any late re-centring glides instead of jumping. */
html.dk-ready .sa-bar { transition: padding-left .35s cubic-bezier(.2,.8,.2,1); }
.sa-bar.dk-probe, .sa-bar.dk-probe * { transition: none !important; animation: none !important; }
/* 29 Sept 08:30 (Alex: "the dock has a blank spot for the globe before the globe even moves"): the sun's place
   opens only as the sun arrives again, and the dock stays centred while it opens (DOCK_JS moves its left edge in
   step with the opening), so it grows evenly on both sides instead of pushing the links sideways. */
html.dk-ready .sa-bar { transition: padding-left .45s cubic-bezier(.2,.8,.2,1); }
.sa-bar.dk-probe.slot-open { padding-left: var(--dk-lo, var(--dk-l, 0px)) !important; }
.sa-bar.dk-probe.slot-open .sa-dock .sa-home { max-width: 42px !important; padding-left: 8px !important; padding-right: 8px !important; }
.sa-bar.dk-probe.slot-shut .sa-dock .sa-home { max-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.hero-wrap.carousel.off-screen .hslide, .hero-wrap.carousel.off-screen .hslide img { animation-play-state: paused !important; }

/* 29 Sept 08:40: on the home page the dock is drawn from the very first paint as it will be before the sun arrives
   (no sun's place yet, and no button until the hero's flies in), so nothing in it changes size as the page loads */
html.cta-fly:not(.cta-in) .sa-bar .sa-cta { display: none !important; }
@supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) {
  html.cta-fly body:not(.sun-open):not(.sun-measure) .sa-bar:not(.dk-probe) .sa-dock .sa-home { max-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; overflow: clip; }
} }

/* 29 Sept 09:30: when the hero's button lands, the dock's own button appears with no entrance animation of its own
   (it used to rise in from below as it appeared, a second movement right at the landing) */
html.cta-fly .sa-bar .sa-cta { transition: none !important; }
@starting-style { html.cta-fly .sa-bar .sa-cta { opacity: 1; transform: none; } }

/* 29 Sept (Alex: "there's too much space here"): after the last card of "What is already paid for" settles, the rest of
   its stage was empty. The next section now comes up into that empty lower part of the stage. */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  html #a9 { margin-bottom: -40vh; } html #a9 + * { position: relative; z-index: 1; }
  @media (min-width: 700px) { html #a9 { margin-bottom: calc(-48vh + 130px); } }
} }

/* 29 Sept: the dock's current page is a still sage chip (as on 1361.io); hover is a soft tint; nothing travels */
.sa-dock > a:not(.sa-home):not(.sa-pass) { transition: max-width .45s cubic-bezier(.2,.8,.2,1), padding .45s cubic-bezier(.2,.8,.2,1), opacity .15s ease, background-color .18s ease, color .18s ease !important; }
.sa-dock > a[aria-current]:not(.sa-home):not(.sa-pass) { background: var(--sage) !important; color: #050247 !important; box-shadow: none !important; }
.sa-dock > a:not([aria-current]):not(.sa-home):not(.sa-pass):hover { background: var(--dk-hover) !important; }
.sa-dock .sa-chip { position: absolute; z-index: 0; border-radius: 999px; background: var(--sage); pointer-events: none; will-change: transform, width; }
.sa-dock > a { position: relative; z-index: 1; }
.sa-dock.dk-gliding > a[aria-current]:not(.sa-home):not(.sa-pass) { background: transparent !important; transition: none !important; }
.sa-dock.dk-handoff > a:not(.sa-home):not(.sa-pass), .sa-dock.dk-gliding > a:not(.sa-home):not(.sa-pass) { transition: max-width .45s cubic-bezier(.2,.8,.2,1), padding .45s cubic-bezier(.2,.8,.2,1), opacity .15s ease !important; }

/* 29 Sept (Alex): an adventure that is not open yet shows its photo blurred and dimmed, with "Coming soon" and a small
   turning sun on top, everywhere its photo appears (home, globe cards, adventures, its own page). */
.soonbox { position: relative; overflow: hidden; }
.soonfill { display: block; position: absolute; inset: 0; }
.soonfill > img { width: 100%; height: 100%; object-fit: cover; }
.soonbox img { filter: blur(16px) saturate(.5) brightness(.55); scale: 1.14; }
.card-img.soonbox > img { display: block; width: 100%; height: 100%; object-fit: cover; }
#saGlobe .adv .adv-im { display: block; }
.soonv { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 12px;
  pointer-events: none; color: #F4EFE4; text-align: center; }
.soonv b { font: 700 .74rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; padding: 9px 15px 9px 17px; border-radius: 999px;
  background: rgba(5,2,71,.5); border: 1px solid rgba(244,239,228,.32); }
.soonic img { display: block; width: 58px; height: 58px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
.th-soon .soonic img { width: 84px; height: 84px; }
.soonic line { stroke: #A8CF98; stroke-width: 3; stroke-linecap: round; }
.soonic .sc { fill: #A8CF98; }
.soonic { position: relative; display: block; }
.soonic::after { content: ""; position: absolute; inset: 10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(168,207,152,.75), rgba(168,207,152,0)); opacity: .4; }
/* only transforms and opacity move (the browser's compositor does them), so the blurred photo underneath is never redrawn */
.soonbox > img, .soonfill > img { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .soonic::after { animation: soon-glow 2.8s ease-in-out infinite; will-change: transform, opacity; }
}
@keyframes soon-turn { to { transform: rotate(360deg); } }
@keyframes soon-glow { 0%, 100% { transform: scale(.8); opacity: .25; } 50% { transform: scale(1.5); opacity: .7; } }
/* the pans on home: the veil sits in the upper part so the words below stay clear */
.soonpan > .soonv { bottom: 45%; }
/* on the adventure's own page the veil sits high, clear of the name and buttons */
.th-soon > .soonv { bottom: 38%; }
.th-soon .soonv b { font-size: .86rem; }
#saGlobe .adv .k.soon i { display: none; }

/* 29 Sept pm (Alex, launch sweep: the big blurred logo read as broken, and on phones its "Coming soon" sat on top of
   the trip's name): an adventure that is not open yet shows its real photo, gently dimmed, with one small
   "Coming soon" label in its top corner. Same everywhere: home, globe cards, adventures list, its own page. */
.soonbox img { filter: brightness(.8) saturate(.92); scale: 1; }
.soonic { display: none; }
.soonv { inset: 0; place-content: start; justify-items: start; padding: 14px; }
.soonv b { font-size: .68rem; letter-spacing: .2em; padding: 7px 12px 7px 14px; background: rgba(5,2,71,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.soonpan > .soonv { bottom: auto; }
.th-soon > .soonv { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 86px); left: clamp(16px, 5vw, 64px); padding: 0; }
.th-soon .soonv b { font-size: .72rem; }
/* 29 Sept pm (launch sweep): on phones, while the dock is open its button has no room and sits past the screen's edge.
   It fades out already; now it is also hidden outright, so no half of it ever shows at the edge mid-fade. */
@media (max-width: 700px) { .sa-bar.dk-open .sa-cta { visibility: hidden; transition: none; } }
.sa-stars { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; display: block; visibility: visible; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .sa-stars { transform: none !important; } }

/* 30 Sept (Alex: "have the hero photo start above the dock so the dock is floating on top of it"):
   on a journey page whose first section is the hero, the header leaves the flow, so the photo runs to
   the top of the screen and the dock floats on it. Other pages keep their header in the flow. */
body:has(main.trip-v2 > .ts-hero:first-child) .site-head.sa-top { position: absolute; top: 0; left: 0; right: 0; }

/* 30 Sept (Alex: "the dark navy wash ... it shouldn't be there"): the full-screen journey hero keeps its photo
   in colour. The shade that keeps her words readable now sits only where the words are (low left on a computer,
   the lower part on a phone), still scaled by the page's own --shade measurement of each photo. */
body .ts-hero.t-full .th-media img { filter: brightness(.94) saturate(1); }
body .ts-hero.t-full .th-media::after {
  background: linear-gradient(180deg, rgba(5,2,71,.24) 0, rgba(5,2,71,0) 16%, rgba(5,2,71,0) 45%, rgba(5,2,71,.35) 75%, rgba(5,2,71,.75) 100%); }
body .ts-hero.t-full .th-media::before {
  background: radial-gradient(110% 85% at 0% 100%, rgba(5,2,71,.74) 0%, rgba(5,2,71,.46) 45%, rgba(5,2,71,0) 78%);
  opacity: clamp(.55, calc(var(--shade, .35) + .3), .95); }
@media (max-width: 699px) {
  body .ts-hero.t-full .th-media::before {
    background: linear-gradient(180deg, rgba(5,2,71,0) 20%, rgba(5,2,71,.38) 40%, rgba(5,2,71,.5) 70%, rgba(5,2,71,.7) 100%); }
}

/* 30 Sept (Alex: "a moment between photos where it's blank"): the hero photos cross-fade for real. The incoming
   photo fades in ON TOP of the outgoing one, which stays fully there until the fade is done, so the navy behind
   never shows through. The readability shade and the words stay above both. */
html.js body .ts.ts-hero .th-car[data-media] img { transition: opacity 2.4s ease, transform 2.4s cubic-bezier(.16,.84,.3,1); z-index: 0; }
html.js body .ts.ts-hero .th-car[data-media] img.on { z-index: 1; }
html.js body .ts.ts-hero .th-car[data-media] img:not(.on) { transition: opacity 0s linear 2.4s, transform 2.4s cubic-bezier(.16,.84,.3,1); }
body .ts-hero.t-full .th-media::before, body .ts-hero.t-full .th-media::after { z-index: 2; }
.ts-hero .th-soon > .soonv { z-index: 3; }
.ts-hero.t-full .th-words { z-index: 3; }


/* ================================================================ adventure cards, the Studio looks (27 Sept 2026)
   Kristin picks one per adventure: a boarding pass, a poster, or a wide feature. */
.grid > .xc-pass, .grid > .xc-feature { grid-column: 1 / -1; }
.xc { text-decoration: none !important; color: #050247; display: grid; border-radius: 20px; overflow: hidden; position: relative;
  transition: transform .35s cubic-bezier(.3,1.3,.4,1), box-shadow .35s; box-shadow: 0 14px 40px rgba(5,2,71,.12); }
.xc:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(5,2,71,.2); }
.xc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.xc:hover img { transform: scale(1.04); }
.xc small { font: 600 .7rem var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.xc-go { justify-self: start; background: #050247; color: #F4F1E8; border-radius: 999px; padding: .65rem 1.1rem; font: 700 .88rem/1 var(--sans); }
/* A. boarding pass */
.xc-pass { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); background: #F4F1E8; min-height: 250px; }
.xc-pass .xc-im { position: relative; min-height: 230px; background: #050247; display: block; }
.xc-pass .xc-nm { position: absolute; left: 20px; bottom: 16px; right: 20px; color: #F4F1E8; text-shadow: 0 2px 18px rgba(0,0,0,.45); display: grid; gap: 2px; }
.xc-pass .xc-nm small { color: #E6EEDD; }
.xc-pass .xc-nm b { font: 600 clamp(2.2rem, 5vw, 3.6rem)/1 var(--serif); }
.xc-pass .xc-nm i { font: italic 500 1.2rem var(--serif); }
.xc-stub { position: relative; padding: 20px 22px 18px 30px; display: grid; gap: 12px; align-content: space-between; border-left: 2px dashed #CFC8B4; }
.xc-stub::before, .xc-stub::after { content: ""; position: absolute; left: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--ground); }
.xc-stub::before { top: -12px; } .xc-stub::after { bottom: -12px; }
.xc-f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.xc-f span small { display: block; color: #6B6890; font-size: .62rem; }
.xc-f b { font: 600 1.2rem/1.15 var(--serif); }
.xc-seats { display: flex; gap: 3px; flex-wrap: wrap; }
.xc-seats i { width: 10px; height: 10px; border-radius: 2px; background: #4F7A3E; }
.xc-seats i.t { background: #D8D2C0; }
.xc-stamp { position: absolute; right: 16px; top: 14px; border: 2px solid #7A3E2E; color: #7A3E2E; border-radius: 8px; padding: 3px 8px; font: 700 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; transform: rotate(8deg); }
@media (max-width: 700px) { .xc-pass { grid-template-columns: 1fr; } .xc-stub { border-left: none; border-top: 2px dashed #CFC8B4; padding-left: 22px; } .xc-stub::before, .xc-stub::after { display: none; } }
/* B. poster */
.xc-poster { aspect-ratio: 3/4; max-width: 100%; color: #F4F1E8; align-content: end; background: #050247; }
.xc-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,2,71,.1) 20%, rgba(5,2,71,.92) 78%); }
.xc-in { position: relative; z-index: 1; padding: 20px; display: grid; gap: 8px; }
.xc-poster small { color: #A2C990; }
.xc-poster b { font: 600 2.75rem/1 var(--serif); }
.xc-poster i { font: italic 500 1.12rem var(--serif); }
.xc-band { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(244,241,232,.3); padding-top: 10px; font-size: .85rem; }
.xc-band strong { font: 600 1.4rem var(--serif); }
.xc-left { position: absolute; top: 14px; right: 14px; z-index: 1; background: #A2C990; color: #050247; border-radius: 999px; padding: 4px 11px; font: 700 .75rem var(--sans); }
/* C. feature */
.xc-feature { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); background: #F4F1E8; }
.xc-feature .xc-im { position: relative; min-height: 340px; display: block; background: #050247; }
.xc-tx { padding: 28px; display: grid; gap: 12px; align-content: center; }
.xc-tx small { color: #4F7A3E; }
.xc-tx b { font: 600 clamp(2.4rem, 5vw, 3.9rem)/1 var(--serif); }
.xc-tx i { font: italic 500 1.25rem var(--serif); color: #4A4870; }
.xc-facts { display: flex; gap: 18px; flex-wrap: wrap; font-size: .88rem; }
.xc-facts strong { display: block; font: 600 1.35rem var(--serif); }
@media (max-width: 760px) { .xc-feature { grid-template-columns: 1fr; } .xc-feature .xc-im { min-height: 240px; } }