/* =====================================================================
   Beyond Journey - Spiritual Journeys landing page (/spiritual-journeys)
   ---------------------------------------------------------------------
   Built from the owner's design of 2026-09-28 (a ChatGPT mock-up, kept
   out of the repository). The sitewide header and footer are the live
   ones; everything between them is this file.

   SCOPING - every rule sits under .spj and every class is prefixed
   spj-. The page runs on _HolidayLayout, whose style.css capitalises
   every heading in Inter, paints links grey with a half-second
   transition, turns every li into an inline-block, zeroes every margin,
   pads every <section> and gives .container z-index 1; the base block
   below undoes those inside .spj only.

   SPACING - one system, set on .spj and tightened for phones at the
   end of the file. Every section is padded by --spj-sec; two sections
   on the same ground (the categories and the journeys) share one
   --spj-sec between them, half from each. Every heading block sits
   --spj-head above its content, and card rows use --spj-gap. Change
   the tokens, not the sections.

   TYPE - EB Garamond for display, Allura for the two script lines, and
   the site's Poppins for everything else. The two display faces are
   loaded by the view (Google Fonts), not by this file.

   IMAGES - /img/spiritual/*. The photographs are cut from the design
   mock-up itself, so they are only as sharp as that image (about 2x
   upscaled). Replace any of them at the same path with a real
   photograph and nothing here has to change. hero.jpg and cta.jpg had
   text baked into their left halves; that side is a softened mirror of
   the right, and it sits under the dark scrim. The Darshan panel's sky
   and hills are drawn in CSS/SVG because the mock-up's photo had the
   script line printed across them.
   ===================================================================== */

.spj {
  /* colour */
  --spj-maroon: #8b1116;
  --spj-maroon-dk: #6c0d11;
  --spj-ink: #1d1916;
  --spj-body: #4a4440;
  --spj-soft: #6f6863;
  --spj-faint: #8b847f;
  --spj-cream: #faf5ef;      /* page ground: categories, journeys, stories */
  --spj-sand: #f4ebe1;       /* alternate bands: pilgrimage, darshan */
  --spj-paper: #fdf9f4;      /* the landscape band, light so the map reads */
  --spj-card: #fffbf6;
  --spj-chip: #f3ebe2;
  --spj-line: rgba(139, 17, 22, .12);
  --spj-hair: #ecdfd2;
  --spj-gold: #c8923c;
  --spj-shadow: 0 1px 2px rgba(70, 35, 12, .06), 0 10px 24px -16px rgba(70, 35, 12, .42);
  --spj-shadow-up: 0 2px 4px rgba(70, 35, 12, .07), 0 20px 36px -18px rgba(70, 35, 12, .5);

  /* spacing */
  --spj-sec: clamp(56px, 5.4vw, 84px);   /* a section's padding, top and bottom */
  --spj-head: 28px;                      /* heading block to its content */
  --spj-gap: 18px;                       /* between cards */
  --spj-r: 14px;                         /* card corners */
  --spj-side: 28px;                      /* the wrap's side padding */

  /* type */
  --spj-serif: 'EB Garamond', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --spj-script: 'Allura', 'Segoe Script', 'Brush Script MT', cursive;
  --spj-sans: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --spj-ease: cubic-bezier(.22, .61, .36, 1);

  background: var(--spj-cream);
  color: var(--spj-body);
  font-family: var(--spj-sans);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- base, undoing the template inside the page ---------- */
.spj h1, .spj h2, .spj h3, .spj h4 {
  font-family: var(--spj-serif);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--spj-ink);
  line-height: 1.15;
  margin: 0;
}
.spj p { margin: 0; }
.spj ul, .spj ol { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.spj li { display: block; margin: 0; padding: 0; color: inherit; font-size: inherit; line-height: inherit; }
.spj a { transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, gap .2s; }
.spj a:hover, .spj a:focus { text-decoration: none; }
.spj img { display: block; max-width: 100%; }
.spj button { font-family: inherit; }
.spj :focus-visible { outline: 2px solid var(--spj-maroon); outline-offset: 3px; }
.spj section { scroll-margin-top: 90px; }
/* style.css and bj-space.css pad every <section>; each band here sets
   its own padding from the tokens above */
.spj-hero, .spj-cats, .spj-jr, .spj-pil, .spj-land, .spj-dar, .spj-talk, .spj-cta { padding: 0; }

.spj-wrap {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--spj-side);
}

/* line icons from the sprite at the top of the view */
.spj-i {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- buttons and links ---------- */
.spj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 500 14px/1 var(--spj-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.spj-btn .spj-i { font-size: 16px; transition: transform .2s var(--spj-ease); }
.spj-btn:hover .spj-i { transform: translateX(3px); }
.spj .spj-btn--primary { background: var(--spj-maroon); color: #fff; box-shadow: 0 12px 24px -14px rgba(139, 17, 22, .85); }
.spj .spj-btn--primary:hover, .spj .spj-btn--primary:focus-visible { background: var(--spj-maroon-dk); color: #fff; }
.spj .spj-btn--ghost { border-color: rgba(255, 255, 255, .8); color: #fff; background: rgba(255, 255, 255, .06); }
.spj .spj-btn--ghost:hover, .spj .spj-btn--ghost:focus-visible { background: #fff; border-color: #fff; color: var(--spj-maroon); }

.spj .spj-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 13.5px/1.2 var(--spj-sans);
  color: var(--spj-maroon);
  white-space: nowrap;
  cursor: pointer;
}
.spj .spj-more:hover, .spj .spj-more:focus-visible { color: var(--spj-maroon-dk); gap: 11px; }
.spj-more .spj-i { font-size: 15px; }

.spj-arr {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(139, 17, 22, .45);
  background: transparent;
  color: var(--spj-maroon);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}
.spj-arr .spj-i { font-size: 17px; }
.spj-arr:hover:not(:disabled) { background: var(--spj-maroon); border-color: var(--spj-maroon); color: #fff; }
.spj-arr:disabled { opacity: .3; cursor: default; }
.spj-arrs { display: flex; gap: 10px; }

/* ---------- section heads ---------- */
.spj-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 32px;
  margin-bottom: var(--spj-head);
}
.spj-head h2 { font-size: clamp(27px, 2.3vw, 34px); }
.spj-head__sub { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: #4f4945; }
.spj-head__tools { display: flex; align-items: center; gap: 20px; flex: none; }
/* the link or arrows sit level with the subtitle, not the heading */
.spj-head > .spj-more, .spj-head > .spj-arrs, .spj-head__tools { margin-bottom: 2px; }

/* sideways rails: scrolled by the arrows, a swipe or the trackpad */
.spj-rail {
  display: grid;
  grid-auto-flow: column;
  gap: var(--spj-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* room for the cards' shadow, which overflow would otherwise clip; the
     scroll-padding makes the first card snap home at scrollLeft 0 */
  padding: 6px 4px 26px;
  scroll-padding-inline: 4px;
  margin: -6px -4px -26px;
}
.spj-rail::-webkit-scrollbar { display: none; }
.spj-rail > * { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  .spj-rail { scroll-behavior: auto; }
}

/* =====================================================================
   1. HERO
   ===================================================================== */
.spj-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(500px, 38vw, 640px);
  overflow: hidden;
  background: #2a140b;
  color: #fff;
}
/* a flex item shrinks to its content; the wrap has to span the band */
.spj-hero > .spj-wrap, .spj-cta > .spj-wrap { width: 100%; }
.spj-hero__bg { position: absolute; inset: 0; z-index: -2; }
.spj-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.spj-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(22, 10, 5, .86) 0%, rgba(22, 10, 5, .72) 26%, rgba(22, 10, 5, .34) 46%, rgba(22, 10, 5, 0) 64%),
    linear-gradient(0deg, rgba(22, 10, 5, .45) 0%, rgba(22, 10, 5, 0) 32%);
}
.spj-hero__copy { max-width: 600px; padding: 76px 0 84px; }
.spj-hero__kicker {
  margin-bottom: 18px;
  font: 500 12px/1.4 var(--spj-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}
.spj .spj-hero__title {
  font-weight: 500;
  font-size: clamp(50px, 5.3vw, 78px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: #fff;
}
.spj-hero__by {
  display: flex;
  align-items: center;
  gap: 14px;
  /* clears the descender of the J above */
  margin-top: 16px;
  font: 500 clamp(22px, 2vw, 29px)/1.2 var(--spj-serif);
  color: #fff;
}
.spj-hero__by::before { content: ''; width: 36px; height: 1.5px; background: rgba(255, 255, 255, .8); }
.spj-hero__sub {
  max-width: 12em;
  margin-top: 22px;
  font: 400 clamp(19px, 1.6vw, 23px)/1.4 var(--spj-serif);
  color: rgba(255, 255, 255, .86);
}
.spj-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.spj-hero__place {
  position: absolute;
  right: clamp(16px, 3vw, 44px);
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/1 var(--spj-sans);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.spj-hero__place .spj-i { font-size: 16px; }

/* =====================================================================
   2. FIND YOUR SPIRITUAL JOURNEY (category filter)
   Shares the cream ground with the journeys below, so the two split one
   --spj-sec between them.
   ===================================================================== */
.spj-cats { padding: var(--spj-sec) 0 calc(var(--spj-sec) / 2); }
.spj-cats__row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 14px;
}
.spj-cat {
  appearance: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: var(--spj-r);
  background: var(--spj-card);
  box-shadow: var(--spj-shadow);
  text-align: center;
  cursor: pointer;
  transition: transform .3s var(--spj-ease), box-shadow .3s var(--spj-ease);
}
.spj-cat__img { aspect-ratio: 1 / 1.02; border-radius: var(--spj-r) var(--spj-r) 0 0; overflow: hidden; }
.spj-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--spj-ease); }
.spj-cat__ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -18px auto 0;
  border-radius: 50%;
  background: var(--spj-card);
  color: var(--spj-maroon);
  font-size: 17px;
  box-shadow: 0 2px 8px rgba(70, 35, 12, .14);
}
.spj-cat__name {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  min-height: 58px;
  padding: 9px 6px 15px;
  font: 600 15px/1.2 var(--spj-serif);
  color: var(--spj-ink);
}
.spj-cat:hover { transform: translateY(-4px); box-shadow: var(--spj-shadow-up); }
.spj-cat:hover .spj-cat__img img { transform: scale(1.07); }
.spj-cat[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--spj-maroon), var(--spj-shadow-up); }
.spj-cat[aria-pressed="true"] .spj-cat__ico { background: var(--spj-maroon); color: #fff; }

/* =====================================================================
   3. JOURNEYS WORTH TAKING
   ===================================================================== */
.spj-jr { padding: calc(var(--spj-sec) / 2) 0 var(--spj-sec); }
.spj-jr__filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: calc(var(--spj-head) / -2) 0 20px;
  font-size: 13.5px;
  color: var(--spj-soft);
}
.spj-jr__filter[hidden] { display: none; }
.spj-jr__filter strong { color: var(--spj-maroon); font-weight: 600; }
.spj-jr__clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--spj-line);
  border-radius: 999px;
  background: #fff;
  font: 500 12.5px/1 var(--spj-sans);
  color: var(--spj-ink);
  cursor: pointer;
}
.spj-jr__clear:hover { border-color: var(--spj-maroon); color: var(--spj-maroon); }
.spj-jr__clear .spj-i { font-size: 13px; }

.spj-jr__rail { grid-auto-columns: calc((100% - 4 * var(--spj-gap)) / 5); }
.spj-jr.is-all .spj-jr__rail {
  grid-auto-flow: row;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: visible;
  row-gap: 26px;
}
.spj-jr.is-all .spj-arrs { visibility: hidden; }

.spj-jc {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--spj-r);
  overflow: hidden;
  background: var(--spj-card);
  box-shadow: var(--spj-shadow);
  transition: transform .3s var(--spj-ease), box-shadow .3s var(--spj-ease);
}
.spj-jc[hidden] { display: none; }
.spj-jc:hover { transform: translateY(-4px); box-shadow: var(--spj-shadow-up); }
.spj-jc__img { aspect-ratio: 1.9; overflow: hidden; }
.spj-jc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--spj-ease); }
.spj-jc:hover .spj-jc__img img { transform: scale(1.06); }
.spj-jc__body { display: flex; flex: 1; flex-direction: column; padding: 16px 16px 16px; }
/* two lines are kept for every title, so the nights, tags and fares of
   neighbouring cards stay on one line with each other */
.spj .spj-jc__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.4em;
  font-size: 17px;
  line-height: 1.2;
}
.spj-jc__dur { margin-top: 5px; font-size: 12.5px; color: var(--spj-soft); }
.spj-jc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.spj-jc__tags li {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--spj-chip);
  font-size: 10.5px;
  line-height: 1.1;
  color: #5b5450;
}
/* the design marks "Faith" with a small maroon dot */
.spj-jc__tags li.is-key::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 0 1px 4px;
  border-radius: 50%;
  background: var(--spj-maroon);
  vertical-align: middle;
}
.spj-jc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}
.spj-jc__price { font-size: 12.5px; line-height: 1.3; color: var(--spj-soft); white-space: nowrap; }
.spj-jc__price span:first-child { color: var(--spj-maroon); font-weight: 500; }
.spj-jc__price b { color: var(--spj-maroon); font-size: 15px; font-weight: 700; }
.spj-jc__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--spj-maroon);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.spj-jc__go .spj-i { font-size: 16px; }
/* the whole card answers the click, not just the disc */
.spj-jc__go::after { content: ''; position: absolute; inset: 0; }
.spj-jc:hover .spj-jc__go { background: var(--spj-maroon-dk); transform: translateX(2px); }

/* a category with nothing on sale yet: planned to order */
.spj-jc--ask {
  grid-column: span 2;
  justify-content: center;
  padding: 30px 32px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(200, 146, 60, .22), transparent 60%),
    linear-gradient(135deg, #7a0f14, #4f090c);
  color: rgba(255, 255, 255, .9);
}
.spj-jc--ask:hover { transform: none; }
.spj-jc--ask .spj-i--lotus { font-size: 40px; color: #e7b765; }
.spj .spj-jc--ask h3 { margin-top: 12px; font-size: 26px; color: #fff; }
.spj-jc--ask p { max-width: 420px; margin-top: 8px; font-size: 13.5px; line-height: 1.65; }
.spj-jc--ask .spj-btn { align-self: flex-start; margin-top: 20px; height: 44px; background: #fff; color: var(--spj-maroon); box-shadow: none; }
.spj-jc--ask .spj-btn:hover { background: #f7e7d3; color: var(--spj-maroon-dk); }

/* =====================================================================
   4. MORE THAN A PILGRIMAGE
   The photograph runs from the left edge of the window to where the
   copy column starts, fading out over its last third, so on any width
   the words sit on the plain ground and never on the picture.
   ===================================================================== */
.spj-pil {
  --pil-col: .35;        /* the photo's share of the wrap */
  --pil-gap: 48px;
  position: relative;
  overflow: hidden;
  background: var(--spj-sand);
}
.spj-pil__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(max(0px, (100% - 1320px) / 2) + var(--spj-side) + (min(100%, 1320px) - 2 * var(--spj-side)) * var(--pil-col) + var(--pil-gap));
}
.spj-pil__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
  -webkit-mask-image: linear-gradient(90deg, #000 66%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 66%, transparent 100%);
}
.spj-pil__grid {
  display: grid;
  grid-template-columns: calc(var(--pil-col) * 100%) minmax(0, 1fr) minmax(0, .92fr);
  align-items: center;
  gap: var(--pil-gap);
  padding: var(--spj-sec) 0;
}
.spj-pil__copy { grid-column: 2; }
.spj-pil__lotus { font-size: 40px; color: var(--spj-gold); stroke-width: 1.3; }
.spj .spj-pil__title { margin-top: 14px; font-size: clamp(29px, 2.6vw, 38px); color: var(--spj-maroon); }
.spj-pil__script {
  display: block;
  margin-top: 4px;
  font: 400 clamp(38px, 3.3vw, 50px)/1 var(--spj-script);
  color: var(--spj-maroon);
}
.spj-pil__text { max-width: 440px; margin-top: 20px; font-size: 14px; line-height: 1.8; color: var(--spj-body); }
.spj-pil__feats {
  grid-column: 3;
  display: grid;
  gap: 20px;
  padding-left: 32px;
  border-left: 1px solid var(--spj-hair);
}
.spj-pil__feats li { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 16px; }
.spj-pil__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.2px solid rgba(139, 17, 22, .4);
  background: rgba(255, 255, 255, .5);
  color: var(--spj-maroon);
  font-size: 23px;
}
.spj-pil__ico .spj-i { stroke-width: 1.4; }
.spj-pil__feats strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--spj-ink); }
.spj-pil__feats span.spj-pil__d { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--spj-soft); }

/* =====================================================================
   5. EXPLORE INDIA'S SACRED LANDSCAPE
   ===================================================================== */
.spj-land { position: relative; overflow: hidden; padding: var(--spj-sec) 0; background: var(--spj-paper); }
/* the faint Himalayan line behind the places, drawn here rather than in
   the view so the band can be re-tuned without a rebuild */
.spj-land__ridge { display: none; }
.spj-land::before {
  content: '';
  position: absolute;
  top: calc(var(--spj-sec) - 22px);
  right: 0;
  width: min(62%, 900px);
  height: 150px;
  opacity: .9;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 150' fill='none' stroke='%238b1116' stroke-opacity='.13' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M0 138 60 104 96 120 150 70 184 92 236 38 270 66 296 52 350 100 400 80 452 118 500 90 548 110 600 56 640 84 690 30 730 72 770 60 820 96 900 74'/%3E%3Cpath d='M236 38 246 62 232 80M150 70 158 90M296 52 288 72M690 30 680 58 696 76M600 56 608 78M770 60 762 80' stroke-opacity='.1'/%3E%3Cpath d='M120 150 190 118 250 132 330 106 420 136 520 112 610 138 700 110 800 130 900 116' stroke-opacity='.07'/%3E%3C/svg%3E") right top / 100% 100% no-repeat;
}
.spj-land__grid {
  position: relative;
  display: grid;
  grid-template-columns: 250px 280px minmax(0, 1fr);
  grid-template-areas:
    "head  head  nav"
    "pills map   cards";
  grid-template-rows: auto 1fr;
  column-gap: 40px;
  row-gap: var(--spj-head);
}
.spj-land__head { grid-area: head; margin-bottom: 0; }
.spj-land__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.spj-land__links path { fill: none; stroke: rgba(139, 17, 22, .26); stroke-width: 1; stroke-dasharray: 3 4; transition: stroke .3s; }
.spj-land__links path.is-on { stroke: rgba(139, 17, 22, .6); }

.spj-regs { grid-area: pills; align-self: center; display: grid; align-content: start; gap: 10px; position: relative; z-index: 1; }
.spj-reg {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  padding: 0 16px 0 8px;
  border: 1px solid var(--spj-hair);
  border-radius: 999px;
  background: #fff;
  font: 500 13.5px/1 var(--spj-sans);
  color: var(--spj-ink);
  text-align: left;
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s, border-color .2s, color .2s;
}
.spj-reg__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(139, 17, 22, .28);
  color: var(--spj-maroon);
  font-size: 18px;
}
.spj-reg__chev { margin-left: auto; font-size: 15px; color: #9a918b; transition: transform .2s var(--spj-ease), color .2s; }
.spj-reg:hover { border-color: rgba(139, 17, 22, .25); }
.spj-reg:hover .spj-reg__chev { transform: translateX(2px); }
.spj-reg[aria-pressed="true"] {
  border-color: rgba(139, 17, 22, .35);
  color: var(--spj-maroon);
  font-weight: 600;
  box-shadow: 0 10px 20px -14px rgba(70, 35, 12, .55);
}
.spj-reg[aria-pressed="true"] .spj-reg__ico { background: var(--spj-maroon); border-color: var(--spj-maroon); color: #fff; }
.spj-reg[aria-pressed="true"] .spj-reg__chev { color: var(--spj-maroon); }

.spj-map { grid-area: map; align-self: center; position: relative; z-index: 1; width: 100%; aspect-ratio: 612 / 696; }
.spj-map > img, .spj-map > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.spj-map .spj-st { transition: opacity .35s, filter .35s; cursor: pointer; }
.spj-map[data-active] .spj-st { opacity: .5; }
.spj-map[data-active="north"] .spj-st--north,
.spj-map[data-active="south"] .spj-st--south,
.spj-map[data-active="east"] .spj-st--east,
.spj-map[data-active="west"] .spj-st--west,
.spj-map[data-active="central"] .spj-st--central { opacity: 1; filter: saturate(1.3); }
.spj-map .spj-st:hover { opacity: .85; }
.spj-pin { fill: var(--spj-maroon); stroke: #fff; stroke-width: 3; transition: opacity .35s; opacity: .3; }
.spj-pin.is-on { opacity: 1; }

/* the arrows and the five rails are grid items of .spj-land__grid */
.spj-dest { display: contents; }
.spj-dest__nav { grid-area: nav; align-self: end; justify-self: end; position: relative; z-index: 1; margin-bottom: 2px; }
.spj-dest__rail {
  grid-area: cards;
  align-self: center;
  position: relative;
  z-index: 1;
  min-width: 0;
  grid-auto-columns: calc((100% - 3 * 16px) / 4);
  gap: 16px;
}
.spj-dest__rail[hidden] { display: none; }
.spj-dc {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: var(--spj-r);
  overflow: hidden;
  background: var(--spj-card);
  box-shadow: var(--spj-shadow);
  text-align: left;
  cursor: pointer;
  transition: transform .3s var(--spj-ease), box-shadow .3s var(--spj-ease);
}
.spj-dc:hover { transform: translateY(-4px); box-shadow: var(--spj-shadow-up); }
.spj-dc__img { aspect-ratio: 1 / 1.04; overflow: hidden; }
.spj-dc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--spj-ease); }
.spj-dc:hover .spj-dc__img img { transform: scale(1.07); }
.spj-dc__name { display: block; padding: 12px 14px 0; font: 600 16.5px/1.2 var(--spj-serif); color: var(--spj-ink); }
.spj-dc__state { display: block; padding: 3px 14px 14px; font-size: 12px; color: var(--spj-faint); }

/* =====================================================================
   6. DARSHAN, WITHOUT THE HASSLE
   ===================================================================== */
.spj-dar {
  position: relative;
  overflow: hidden;
  background: var(--spj-sand);
  border-top: 1px solid var(--spj-hair);
}
.spj-dar__copy { width: 62%; padding: clamp(40px, 3.6vw, 54px) 0; }
.spj .spj-dar__title { font-size: clamp(27px, 2.3vw, 34px); }
.spj-dar__lead { margin-top: 6px; font-size: 15.5px; color: var(--spj-ink); }
/* eight columns as wide as their labels, spread across the row */
.spj-dar__list {
  display: grid;
  grid-template-columns: repeat(8, auto);
  justify-content: space-between;
  gap: 16px 14px;
  margin-top: var(--spj-head);
}
.spj-dar__list li { text-align: center; font-size: 11.5px; line-height: 1.4; color: #3c3633; white-space: nowrap; }
.spj-dar__list .spj-i { display: block; margin: 0 auto 12px; font-size: 32px; color: var(--spj-maroon); stroke-width: 1.35; }

.spj-dar__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36%;
  overflow: hidden;
  background: linear-gradient(180deg, #c3bec3 0%, #dcc6bd 22%, #ebcdb8 44%, #e9c3a8 56%, #a9aabb 68%, #62789a 82%, #3c526d 100%);
}
.spj-dar__hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; }
.spj-dar__panel::after {
  /* the band's own colour fading in over the panel's left edge */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 80px;
  background: linear-gradient(90deg, var(--spj-sand), rgba(244, 235, 225, 0));
  pointer-events: none;
}
.spj-dar__couple {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 47%;
  max-width: none;
  object-fit: cover;
  object-position: 45% 30%;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
}
.spj-dar__tag {
  position: absolute;
  top: 16%;
  right: 7%;
  font: 400 clamp(23px, 2.35vw, 36px)/1.05 var(--spj-script);
  color: var(--spj-maroon);
  text-shadow: 0 1px 0 rgba(255, 240, 225, .5);
}
.spj-dar__cta { position: absolute; right: 6%; bottom: 15%; }
.spj-dar__cta.spj-btn { height: 44px; padding: 0 22px; font-size: 13px; }

/* =====================================================================
   7. STORIES + WHAT OUR TRAVELLERS SAY
   ===================================================================== */
.spj-talk { padding: var(--spj-sec) 0; background: var(--spj-cream); border-top: 1px solid var(--spj-hair); }
.spj-talk__grid { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 48px; }
/* both columns end on the same line: the story cards stretch to the review card, or the other way round */
.spj-stories { display: flex; flex-direction: column; }
.spj-stories__row { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.spj-sc {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: var(--spj-r);
  overflow: hidden;
  background: var(--spj-card);
  box-shadow: var(--spj-shadow);
  text-align: left;
  cursor: pointer;
  transition: transform .3s var(--spj-ease), box-shadow .3s var(--spj-ease);
}
.spj-sc:hover { transform: translateY(-4px); box-shadow: var(--spj-shadow-up); }
.spj-sc__img { aspect-ratio: 1.45; overflow: hidden; }
.spj-sc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--spj-ease); }
.spj-sc:hover .spj-sc__img img { transform: scale(1.07); }
.spj-sc__title { display: block; padding: 12px 13px 10px; font: 600 15px/1.25 var(--spj-serif); color: var(--spj-ink); }
/* the card's own call to action, pinned to its foot so a row of cards ends level */
.spj-sc::after {
  content: 'Read story \2192';
  margin-top: auto;
  padding: 0 13px 14px;
  font: 500 12px/1.2 var(--spj-sans);
  color: var(--spj-maroon);
}

/* the review card stretches to end level with the story cards */
.spj-tms { display: flex; flex-direction: column; }
.spj-tms .spj-head { flex-wrap: nowrap; }
.spj-tms .spj-head h2 { font-size: clamp(24px, 2.1vw, 32px); }
.spj-tm {
  flex: 1;
  display: grid;
  margin: 0;               /* bootstrap's figure { margin: 0 0 1rem } outranks style.css's * reset */
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 24px 22px;
  border-radius: var(--spj-r);
  background: var(--spj-card);
  box-shadow: var(--spj-shadow);
  animation: spj-fade .45s var(--spj-ease);
}
.spj-tm[hidden] { display: none; }
.spj-tm__face { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 6px 16px -8px rgba(70, 35, 12, .45); }
.spj-tm__q { position: relative; padding-left: 26px; }
.spj-tm__q::before {
  content: '\201C';
  position: absolute;
  top: -12px;
  left: 0;
  font: 700 44px/1 var(--spj-serif);
  color: var(--spj-maroon);
}
.spj-tm__q p { font-size: 13.5px; line-height: 1.7; color: var(--spj-body); }
.spj-tm__who { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--spj-ink); }
.spj-tm__meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 3px; font-size: 11.5px; color: var(--spj-faint); }
.spj-tm__meta span { white-space: nowrap; }
.spj-tm__meta span + span::before { content: '|'; margin: 0 7px; color: #cbbfb5; }
@keyframes spj-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   8. CLOSING BAND
   ===================================================================== */
.spj-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #3a2418;
  color: #fff;
}
.spj-cta__bg { position: absolute; inset: 0; z-index: -2; }
.spj-cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.spj-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(24, 12, 6, .82) 0%, rgba(24, 12, 6, .56) 32%, rgba(24, 12, 6, 0) 60%);
}
.spj-cta__copy { padding: clamp(52px, 4.8vw, 72px) 0; }
.spj .spj-cta__title { font-weight: 500; font-size: clamp(30px, 2.8vw, 42px); line-height: 1.12; color: #fff; }
.spj-cta__sub { margin-top: 12px; font-size: 15px; color: rgba(255, 255, 255, .88); }
.spj-cta .spj-btn { margin-top: 28px; }

/* =====================================================================
   STORY READER (native <dialog>)
   ===================================================================== */
.spj-story {
  /* style.css zeroes every margin, which takes away the centring a modal
     <dialog> gets from the browser */
  margin: auto;
  width: min(720px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100svh - 48px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--spj-card, #fffbf6);
  color: #4a4440;
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  box-shadow: 0 30px 80px -20px rgba(20, 8, 2, .6);
  overflow: auto;
  overscroll-behavior: contain;
}
.spj-story::backdrop { background: rgba(24, 12, 6, .62); backdrop-filter: blur(2px); }
.spj-story[open] { animation: spj-fade .35s cubic-bezier(.22, .61, .36, 1); }
.spj-story__media { position: relative; aspect-ratio: 3.2; overflow: hidden; }
.spj-story__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spj-story__x {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #1d1916;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.spj-story__x .spj-i { font-size: 18px; }
.spj-story__body { padding: 26px 32px 8px; }
.spj-story__kicker { font: 500 11.5px/1.4 'Poppins', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8b1116; }
.spj-story .spj-story__title {
  margin: 8px 0 4px;
  font: 600 clamp(24px, 3vw, 31px)/1.15 'EB Garamond', Georgia, serif;
  text-transform: none;
  letter-spacing: 0;
  color: #1d1916;
}
.spj-story__read { font-size: 12.5px; color: #8b847f; }
.spj-story__text p { margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: #4a4440; }
.spj-story__text h4 {
  margin: 22px 0 0;
  font: 600 19px/1.25 'EB Garamond', Georgia, serif;
  text-transform: none;
  letter-spacing: 0;
  color: #1d1916;
}
.spj-story__text ul { margin: 8px 0 0; padding: 0; list-style: none; }
.spj-story__text li { display: block; position: relative; padding-left: 18px; margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: #4a4440; }
.spj-story__text li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #c8923c; }
.spj-story__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding: 14px 32px;
  border-top: 1px solid rgba(139, 17, 22, .12);
  background: #fffbf6;
}
.spj-story__pager { display: flex; gap: 10px; }
.spj-story .spj-btn { height: 44px; padding: 0 22px; font-size: 13px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1199px) {
  .spj { --spj-gap: 16px; }

  .spj-cats__row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 5 * 14px) / 6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 6px 4px 26px;
    margin: -6px -4px -26px;
  }
  .spj-cats__row::-webkit-scrollbar { display: none; }
  .spj-cats__row > * { scroll-snap-align: start; }

  .spj-jr__rail { grid-auto-columns: calc((100% - 3 * var(--spj-gap)) / 4); }
  .spj-jr.is-all .spj-jr__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .spj-pil { --pil-col: .3; --pil-gap: 36px; }
  .spj-pil__feats { padding-left: 24px; gap: 18px; }

  .spj-land__grid {
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-areas:
      "head  head"
      "pills pills"
      "map   nav"
      "map   cards";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 36px;
    row-gap: 0;
  }
  .spj-land__head { margin-bottom: 22px; }
  .spj-land__links { display: none; }
  .spj-regs {
    display: flex;
    gap: 10px;
    margin: 0 -4px 30px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .spj-regs::-webkit-scrollbar { display: none; }
  .spj-reg { width: auto; flex: none; height: 44px; padding-right: 18px; }
  .spj-reg__chev { display: none; }
  .spj-map { align-self: start; }
  .spj-dest__nav { margin-bottom: 18px; }
  .spj-dest__rail { align-self: start; grid-auto-columns: calc((100% - 2 * 16px) / 3); }

  .spj-dar__copy { width: 60%; }
  .spj-dar__list { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; row-gap: 22px; }
  .spj-dar__list li { white-space: normal; }
  .spj-dar__panel { width: 38%; }
  .spj-dar__couple { width: 42%; }

  .spj-talk__grid { grid-template-columns: minmax(0, 1fr); gap: var(--spj-sec); }
  .spj-tms { max-width: 700px; }
}

@media (max-width: 991px) {
  .spj-cats__row { grid-auto-columns: calc((100% - 4 * 14px) / 5); }

  .spj-jr__rail { grid-auto-columns: calc((100% - 2 * var(--spj-gap)) / 3); }
  .spj-jr.is-all .spj-jr__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .spj-pil__photo { position: relative; width: 100%; height: 300px; }
  .spj-pil__photo img {
    object-position: 50% 42%;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .spj-pil__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 0 0 var(--spj-sec); margin-top: -28px; }
  .spj-pil__copy, .spj-pil__feats { grid-column: 1; }
  .spj-pil__text { max-width: 620px; }
  .spj-pil__feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--spj-hair); }

  .spj-dar__copy { width: 100%; }
  .spj-dar__panel { position: relative; width: 100%; height: 260px; }
  .spj-dar__couple { width: auto; aspect-ratio: 423 / 366; }
  .spj-dar__panel::after { display: none; }

  .spj-stories__row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 16px) / 3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 6px 4px 26px;
    margin: -6px -4px -26px;
  }
  .spj-stories__row::-webkit-scrollbar { display: none; }
  .spj-stories__row > * { scroll-snap-align: start; }
}

@media (max-width: 767px) {
  .spj { --spj-sec: 52px; --spj-head: 22px; --spj-gap: 12px; --spj-side: 16px; }
  .spj-head { flex-wrap: wrap; align-items: flex-start; gap: 14px 20px; }
  .spj-head__sub { font-size: 13.5px; }
  .spj-head > .spj-more, .spj-head > .spj-arrs, .spj-head__tools { margin-bottom: 0; }

  .spj-hero { align-items: flex-end; min-height: 600px; }
  .spj-hero__bg img { object-position: 74% 50%; }
  .spj-hero::before {
    background: linear-gradient(0deg, rgba(22, 10, 5, .92) 0%, rgba(22, 10, 5, .72) 46%, rgba(22, 10, 5, .15) 76%, rgba(22, 10, 5, .05) 100%);
  }
  .spj-hero__copy { padding: 48px 0 68px; }
  .spj-hero__kicker { font-size: 10.5px; letter-spacing: .16em; margin-bottom: 14px; }
  .spj-hero__by { font-size: 22px; }
  .spj-hero__sub { margin-top: 16px; }
  .spj-hero__actions { margin-top: 28px; gap: 12px; }
  .spj-hero__place { right: 16px; bottom: 20px; font-size: 12px; }

  .spj-cats__row { grid-auto-columns: calc((100% - 3 * 12px) / 4); gap: 12px; }
  .spj-cat__name { font-size: 14px; min-height: 52px; padding: 8px 4px 13px; }

  .spj-jr__rail, .spj-dest__rail { grid-auto-columns: calc((100% - var(--spj-gap)) / 2); gap: var(--spj-gap); }
  .spj-jr.is-all .spj-jr__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .spj-jc__body { padding: 13px 12px 13px; }
  .spj .spj-jc__title { font-size: 16px; }
  .spj-jc__foot { padding-top: 12px; }
  .spj-jc__price b { font-size: 14px; }
  .spj-jc--ask { padding: 24px 20px; }

  .spj-pil__photo { height: 260px; }
  .spj-pil__grid { gap: 28px; margin-top: -24px; }
  .spj-pil__feats { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 24px; }

  .spj-land::before { width: 100%; top: 8px; height: 110px; }
  .spj-land__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "pills" "map" "nav" "cards";
    grid-template-rows: none;
  }
  .spj-land__head { margin-bottom: 18px; }
  .spj-regs { margin-bottom: 24px; }
  .spj-map { width: min(280px, 80%); justify-self: center; }
  .spj-dest__nav { margin: 24px 0 14px; }
  .spj-dc__name { font-size: 15.5px; padding: 10px 12px 0; }
  .spj-dc__state { padding: 2px 12px 12px; }

  .spj-dar__copy { padding: var(--spj-sec) 0 36px; }
  .spj-dar__list { gap: 20px 8px; }
  .spj-dar__list .spj-i { font-size: 28px; margin-bottom: 10px; }
  .spj-dar__panel { height: 230px; }
  .spj-dar__couple { width: 46%; aspect-ratio: auto; }
  .spj-dar__tag { top: 13%; right: 6%; font-size: 27px; }

  .spj-tm { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 22px 20px; gap: 16px; }
  .spj-tm__face { width: 84px; height: 84px; }

  .spj-cta::before { background: linear-gradient(90deg, rgba(24, 12, 6, .84) 0%, rgba(24, 12, 6, .58) 60%, rgba(24, 12, 6, .22) 100%); }
  .spj-cta__copy { padding: 56px 0; }

  .spj-story__body { padding: 20px 20px 4px; }
  .spj-story__foot { padding: 12px 20px; }
}

@media (max-width: 575px) {
  .spj-cats__row { grid-auto-columns: calc((100% - 2 * 12px) / 3); }
  .spj-stories__row { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; }
  .spj-jc__foot { align-items: flex-end; }
  .spj-jc__price { white-space: normal; }
  .spj-jc__price span:last-child { display: block; font-size: 11.5px; }
  .spj-dar__panel { height: 210px; }
  .spj-dar__couple { left: 0; }
  .spj-dar__tag { font-size: 24px; right: 5%; }
  .spj-dar__cta.spj-btn { padding: 0 16px; font-size: 12px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .spj *, .spj-story { animation: none !important; transition: none !important; }
}