/* ─────────────────────────────────────────────────────────────────────────
   THE PLACES WE GO — Oyestore's destination magazine.

   Deliberately separate from the .mag-* system (goa.html/gokarna.html/
   pondicherry.html/varkala.html): those are Flagship trip pages built
   around booking one specific 72-hour departure - hero, itinerary,
   what's included, book now. This is a destination GUIDE - the place
   itself, independent of any one trip, with Oyestore's own trips
   showing up only at the very end as "now that you know the place,
   here's how to go." Same visual family (this reads its colors
   straight from the shared tokens journal.css/dark-mode.css already
   define, so it re-themes with the rest of the site automatically,
   light or dark), different job.

   Every class here is prefixed .pw- (Places We go) to keep it out of
   every other system's way. ───────────────────────────────────────── */

.pw-page {
  background: var(--color-midnight);
  color: var(--foreground);
  font-family: var(--font-body);
  overflow-x: hidden;
  /* --color-accent-red itself measures fine against the light paper
     (used unmodified below), but its dark-mode value (#c8102e, the
     original site's own burgundy) only clears ~3-3.5:1 against the
     dark-navy page/card - under the 4.5:1 floor for the small kicker/
     label text this file leans on it for constantly. Rather than
     touching the shared token (used correctly at full strength
     elsewhere - CTA fills, borders), this page gets its own brighter
     variant for text specifically, measured to clear 4.5:1+ in both
     contexts (6.57:1 on the page bg, 5.76:1 on --card). */
  --pw-accent: var(--color-accent-red);
  /* A translucent wash of --pw-accent, for the "vibe" chips' tinted
     fill - text on top stays --pw-accent itself, so this only ever
     needs to be light enough to keep that text readable. */
  --pw-accent-tint: rgb(200 16 46 / 10%);
}

:root[data-theme="dark"] .pw-page {
  --pw-accent: #ff5470;
  --pw-accent-tint: rgb(128 0 0 / 22%);
  /* Requested: #800000 (maroon) in place of every other red shade in
     dark mode. Scoped to .pw-page only - this re-points every var(
     --color-accent-red) *fill/border* this file uses (the Getting
     There panel, the final CTA button, the active filter pill, the
     day-timeline dot, the pull-quote's border) without touching the
     token's site-wide value elsewhere (WhatsApp CTA, passport pill,
     etc.) or --pw-accent above, which stays the brighter pink - that
     one's small accent TEXT, and #800000 measures under 2:1 against
     this page's dark navy, nowhere near the 4.5:1 floor small text
     needs. All checked here are backgrounds/borders with pearl or
     white text already sitting on top of them, so the swap is safe. */
  --color-accent-red: #800000;
}

/* places/index.html's own header re-purposes .mag-topbar (built for
   the Flagship trip pages, where it overlays a full-bleed hero photo
   and hardcoded pearl text is correct) but this page has no hero
   photo behind it - just the plain page background. Same "component
   reused outside its original context" miss as everywhere else this
   session (.mag/.bl/.td) - override to the theme-following
   --foreground token instead, scoped to .pw-page since no destination
   guide page (which DOES sit under a real hero photo) uses .mag-topbar
   at all. */
.pw-page .mag-topbar__brand,
.pw-page .mag-topbar__back {
  color: var(--foreground);
}

.pw-container {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: clamp(20px, 6vw, 56px);
  padding-right: clamp(20px, 6vw, 56px);
}

/* ── Shared section scaffolding ─────────────────────────────────────── */

.pw-section {
  padding: clamp(64px, 11vh, 120px) 0;
  position: relative;
}

.pw-section--tight { padding: clamp(40px, 7vh, 72px) 0; }
.pw-section--rule { border-top: 1px solid var(--glass-border-dark); }

/* A subtle tinted band, applied to a handful of sections (picked by
   hand for rhythm, not literally alternating) so the page reads as a
   sequence of distinct spreads rather than one unbroken scroll of
   identical page-colored sections. */
.pw-section--band { background: var(--card); }

/* A giant ghost numeral behind each section's own heading - the
   classic magazine "spread number" device. Purely decorative (an
   exact duplicate of the number already spelled out in the section's
   own .pw-kicker__num, which is what a screen reader actually
   announces), so it's excluded from the contrast audit on purpose -
   verified by eye instead, in both themes, to stay legible-but-quiet. */
.pw-section[data-num]::before {
  content: attr(data-num);
  position: absolute;
  top: clamp(-6px, -1.5vw, 14px);
  right: clamp(4px, 2vw, 28px);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4.5rem, 15vw, 10rem);
  line-height: 1;
  color: var(--foreground);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.pw-section > .pw-container { position: relative; z-index: 1; }

.pw-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pw-accent);
  margin: 0 0 18px;
}

.pw-kicker__num {
  font-size: 13px;
  color: var(--color-platinum);
  letter-spacing: 0.05em;
}

.pw-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--glass-border-dark);
}

.pw-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  margin: 0 0 20px;
}

.pw-dek {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-platinum);
  max-width: 640px;
  margin: 0 0 8px;
}

/* ── 01 · Hero ──────────────────────────────────────────────────────── */

.pw-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.pw-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pw-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 2, 15, 0.15) 0%, rgba(0, 2, 15, 0.05) 30%, rgba(0, 2, 15, 0.62) 72%, rgba(0, 2, 15, 0.94) 100%);
}

.pw-hero__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(20px, 6vw, 56px);
}

.pw-hero__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #fbf5e6;
}

.pw-hero__brand img { width: 24px; height: 24px; border-radius: 6px; }

.pw-hero__back {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  color: #fbf5e6;
  text-decoration: none;
  opacity: 0.85;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(251, 245, 230, 0.3);
  backdrop-filter: blur(12px);
}

.pw-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 clamp(20px, 6vw, 56px) clamp(48px, 8vh, 88px);
}

.pw-hero__kicker {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f0b874;
  margin: 0 0 16px;
}

.pw-hero__name {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 12vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: #fbf5e6;
}

.pw-hero__state {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(251, 245, 230, 0.7);
}

.pw-hero__hook {
  max-width: 580px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.45;
  color: #fbf5e6;
}

/* ── Quick Read strip ──────────────────────────────────────────────── */

.pw-quick {
  background: var(--card);
  border: 1px solid var(--glass-border-dark);
  border-radius: 20px;
  overflow: hidden;
  margin-top: -60px;
  position: relative;
  z-index: 3;
  padding: 26px clamp(18px, 3.5vw, 34px) 24px;
  box-shadow: 0 18px 44px rgb(0 0 0 / 16%);
}

.pw-quick__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 20px;
}

@media (min-width: 640px) {
  .pw-quick__facts { grid-template-columns: repeat(4, 1fr); }
}

.pw-quick__fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 13px;
  border-left: 2.5px solid var(--color-accent-red);
}

.pw-quick__icon {
  font-size: 17px;
  line-height: 1;
  margin-bottom: 3px;
}

.pw-quick__label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pw-accent);
}

.pw-quick__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
  margin-top: 2px;
}

.pw-quick__traits {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 36px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px dashed var(--glass-border-dark);
}

.pw-quick__traitgroup {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pw-quick__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pw-quick__chip {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(58 46 40 / 8%);
  white-space: nowrap;
}

.pw-quick__chip--vibe {
  background: var(--pw-accent-tint);
  color: var(--pw-accent);
}

/* ── 05 · The Story ─────────────────────────────────────────────────── */

.pw-story {
  max-width: 720px;
  margin: 0 auto;
}

.pw-story p {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--foreground);
  opacity: 0.92;
  margin: 0 0 22px;
}

.pw-story__opener::first-letter {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.4em;
  line-height: 0.75;
  float: left;
  padding: 4px 8px 0 0;
  color: var(--pw-accent);
}

.pw-pullquote {
  position: relative;
  margin: 52px 0 44px;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--color-accent-red);
}

.pw-pullquote::before {
  content: "\201C";
  position: absolute;
  left: 10px;
  top: -38px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--color-accent-red);
  pointer-events: none;
}

.pw-pullquote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  line-height: 1.35;
  text-transform: lowercase;
  color: var(--foreground);
  opacity: 1;
}

/* ── 06 · What To Do ────────────────────────────────────────────────── */

.pw-do-groups {
  display: grid;
  gap: 40px;
}

.pw-do-group__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  text-transform: lowercase;
  margin: 0 0 16px;
  color: var(--pw-accent);
}

.pw-do-group__icon {
  font-size: 0.85em;
  line-height: 1;
}

.pw-do-group__label span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.pw-do-list { display: grid; gap: 0; }

.pw-do-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--glass-border-dark);
}

.pw-do-item__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  text-transform: lowercase;
  margin: 0;
}

.pw-do-item__meta {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-foreground);
  white-space: nowrap;
  text-align: right;
}

.pw-do-item__desc {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-platinum);
}

/* ── 07 · Landmarks (places within the place) ─────────────────────── */

.pw-landmarks { display: grid; gap: 14px; }

.pw-landmark {
  border: 1.5px solid var(--glass-border-dark);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
}

.pw-landmark__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}

.pw-landmark__head::-webkit-details-marker { display: none; }

.pw-landmark__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--pw-accent-tint);
  color: var(--pw-accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
}

.pw-landmark__name {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  text-transform: lowercase;
  margin: 0;
}

.pw-landmark__toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1.5px solid var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  transition: transform 0.2s ease;
}

details[open] .pw-landmark__toggle { transform: rotate(45deg); }

.pw-landmark__body {
  padding: 0 20px 22px;
  display: grid;
  gap: 14px;
}

@media (min-width: 640px) {
  .pw-landmark__body { grid-template-columns: repeat(2, 1fr); }
}

.pw-landmark__field h4 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pw-accent);
}

.pw-landmark__field p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-platinum);
}

.pw-landmark__field--wide {
  grid-column: 1 / -1;
  background: var(--pw-accent-tint);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 2px;
}

.pw-landmark__field--wide h4 { color: var(--pw-accent); }
.pw-landmark__field--wide p { color: var(--foreground); opacity: 0.9; }

/* ── 08/09 · Food & After Hours (shared "editorial list" look) ────── */

.pw-eat-intro,
.pw-hours-intro {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-platinum);
  max-width: 640px;
  margin: 0 0 28px;
}

.pw-eat-list { display: grid; gap: 0; }

.pw-eat-item {
  padding: 18px 0;
  border-top: 1px solid var(--glass-border-dark);
}

.pw-eat-item:last-child { border-bottom: 1px solid var(--glass-border-dark); }

.pw-eat-item__name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  text-transform: lowercase;
}

.pw-eat-item__desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-platinum); }

.pw-hours-points { display: grid; gap: 16px; }

.pw-hours-point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.pw-hours-point__icon {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1.4;
}

.pw-hours-point__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-ink);
  opacity: 0.9;
}

.pw-hours-point__text strong { font-weight: 700; }

/* Dark, always - After Hours is a photo-backed panel that stays dark
   regardless of the site theme, same reasoning as .td-hero above. */
.pw-hours {
  background: #000329;
  border-radius: 20px;
  padding: clamp(32px, 5vw, 56px);
  position: relative;
  overflow: hidden;
}

.pw-hours::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(240, 184, 116, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(200, 16, 46, 0.14) 0%, transparent 50%);
  pointer-events: none;
}

.pw-hours .pw-kicker,
.pw-hours .pw-h2 { color: #fbf5e6; position: relative; }
.pw-hours .pw-kicker { color: #f0b874; }
.pw-hours .pw-kicker__num { color: rgba(251, 245, 230, 0.7); }
.pw-hours .pw-kicker::after { background: rgba(251, 245, 230, 0.18); }
.pw-hours-intro { color: rgba(251, 245, 230, 0.75); position: relative; }
.pw-hours-point__text { color: rgba(251, 245, 230, 0.92); position: relative; }

/* ── 10 · A Day Here (timeline) ────────────────────────────────────── */

.pw-day-list { position: relative; padding-left: 28px; }

.pw-day-list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1.5px;
  background: var(--glass-border-dark);
}

.pw-day-row {
  position: relative;
  padding-bottom: 30px;
}

.pw-day-row:last-child { padding-bottom: 0; }

.pw-day-row::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-accent-red);
}

.pw-day-time {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--pw-accent);
  margin-bottom: 4px;
}

.pw-day-text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 480px;
}

/* ── 11 · The Oyestore Way ─────────────────────────────────────────── */

.pw-way {
  display: grid;
  gap: 32px;
}

@media (min-width: 760px) {
  .pw-way { grid-template-columns: 1fr 1fr; align-items: start; }
}

.pw-way__intro p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-platinum);
  margin: 0 0 16px;
}

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

.pw-way__list li {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-transform: lowercase;
  padding-left: 20px;
  position: relative;
}

.pw-way__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--pw-accent);
}

/* ── 12/13/16 · Compact fact-card sections (Culture, Weather, Good to Know) ── */

.pw-facts { display: grid; gap: 12px; }

@media (min-width: 640px) {
  .pw-facts--2col { grid-template-columns: repeat(2, 1fr); }
}

.pw-fact {
  padding: 18px 20px 18px 19px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--glass-border-dark);
  border-left: 3px solid var(--color-accent-red);
}

.pw-section--band .pw-fact { background: var(--background); }

.pw-fact__label {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pw-accent);
  margin-bottom: 6px;
}

.pw-fact p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--foreground); opacity: 0.9; }

/* ── 14 · Getting There ────────────────────────────────────────────── */

.pw-getting { display: grid; gap: 20px; }

@media (min-width: 760px) {
  .pw-getting { grid-template-columns: 1fr 1fr; }
}

.pw-getting__col {
  padding: 24px;
  border-radius: 16px;
  border: 1.5px solid var(--glass-border-dark);
}

.pw-getting__col--oyestore {
  background: var(--color-accent-red);
  border-color: var(--color-ink);
}

.pw-getting__col--oyestore .pw-getting__label,
.pw-getting__col--oyestore p,
.pw-getting__col--oyestore .pw-getting__mode-name { color: #fbf5e6; }
.pw-getting__col--oyestore .pw-getting__mode-dur { color: rgba(251, 245, 230, 0.75); }

.pw-getting__label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--pw-accent);
}

.pw-getting__col p { font-size: 14.5px; line-height: 1.65; margin: 0 0 10px; }

.pw-getting__mode {
  padding: 10px 0;
  border-top: 1px solid rgb(58 46 40 / 12%);
}

.pw-getting__col--oyestore .pw-getting__mode { border-top-color: rgba(251, 245, 230, 0.2); }

.pw-getting__mode:first-of-type { border-top: none; padding-top: 0; }

.pw-getting__mode-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pw-getting__mode-dur {
  font-size: 12.5px;
  color: var(--muted-foreground);
}

/* ── 17 · Packing ──────────────────────────────────────────────────── */

.pw-pack { display: grid; gap: 24px; }

@media (min-width: 640px) {
  .pw-pack--2col { grid-template-columns: repeat(2, 1fr); }
}

.pw-pack__group h4 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pw-accent);
}

.pw-pack__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.pw-pack__group li {
  font-size: 14.5px;
  padding-left: 18px;
  position: relative;
}

.pw-pack__group li::before { content: "•"; position: absolute; left: 0; color: var(--color-accent-red); }

.pw-pack__extra {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pw-pack__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--glass-border-dark);
  font-size: 13px;
  font-weight: 600;
}

/* ── 18 · Hidden spots ─────────────────────────────────────────────── */

.pw-hidden { display: grid; gap: 12px; }

@media (min-width: 640px) {
  .pw-hidden { grid-template-columns: repeat(2, 1fr); }
}

.pw-hidden__item {
  padding: 18px 20px;
  border-radius: 14px;
  border: 1.5px dashed var(--glass-border-dark);
}

.pw-hidden__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  text-transform: lowercase;
}

.pw-hidden__desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--color-platinum); }

/* ── 19 · Gallery ──────────────────────────────────────────────────── */

.pw-gallery {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 16px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.pw-gallery img {
  flex: 0 0 auto;
  height: 340px;
  width: auto;
  max-width: 80vw;
  object-fit: cover;
  border-radius: 14px;
  scroll-snap-align: start;
}

/* ── 21 · Trips ────────────────────────────────────────────────────── */

.pw-trips { display: grid; gap: 14px; }

@media (min-width: 640px) {
  .pw-trips { grid-template-columns: repeat(2, 1fr); }
}

.pw-trip {
  display: block;
  padding: 20px;
  border-radius: 16px;
  border: 1.5px solid var(--glass-border-dark);
  background: var(--card);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pw-trip:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(58 46 40 / 14%); }

.pw-trip__status {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pw-accent);
  margin-bottom: 8px;
}

.pw-trip__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  text-transform: lowercase;
}

.pw-trip__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12.5px;
  color: var(--muted-foreground);
  margin-bottom: 10px;
}

.pw-trip__cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--pw-accent);
}

.pw-no-trips {
  padding: 22px;
  border-radius: 14px;
  border: 1.5px dashed var(--glass-border-dark);
  font-size: 14.5px;
  color: var(--color-platinum);
}

.pw-no-trips a { color: var(--pw-accent); font-weight: 700; }

/* ── 22 · Final CTA ────────────────────────────────────────────────── */

.pw-final {
  text-align: center;
  padding: clamp(72px, 12vh, 130px) 0 clamp(56px, 9vh, 90px);
}

.pw-final__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-platinum);
  margin: 0 0 10px;
}

.pw-final__line {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  line-height: 1.1;
  text-transform: lowercase;
}

.pw-final__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  border: 2px solid var(--color-ink);
  background: var(--color-accent-red);
  color: #fbf5e6;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--color-ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pw-final__btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--color-ink); }

/* ── Footer nod ────────────────────────────────────────────────────── */

.pw-footer {
  text-align: center;
  padding: 28px 0 40px;
  font-size: 12px;
  color: var(--muted-foreground);
}

.pw-footer a { color: inherit; }

/* ═════════════════════════════════════════════════════════════════════
   INDEX GRID — "THE PLACES WE GO"
   ═════════════════════════════════════════════════════════════════════ */

/* A masthead spread, not a plain text hero - a dimmed collage of the
   destinations themselves behind the title, so the index previews
   what's inside before a single card renders. Text here is hardcoded
   light (matching the destination pages' own .pw-hero precedent) since
   it always sits over a dark-scrimmed photo regardless of site theme. */
.pw-index-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(120px, 20vh, 200px) 0 clamp(56px, 9vh, 96px);
  text-align: center;
}

.pw-index-hero__collage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.pw-index-hero__collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.8);
}

.pw-index-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 2, 15, 0.78) 0%, rgba(0, 2, 15, 0.55) 45%, rgba(0, 2, 15, 0.88) 100%);
}

.pw-index-hero__ghost {
  position: absolute;
  bottom: clamp(-30px, -4vw, 0px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(8rem, 26vw, 18rem);
  line-height: 1;
  color: rgba(251, 245, 230, 0.1);
  pointer-events: none;
  user-select: none;
}

.pw-index-hero__content {
  position: relative;
  z-index: 1;
}

.pw-index-hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f0b874;
  margin: 0 0 16px;
}

.pw-index-hero__content h1 {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: #fbf5e6;
}

.pw-index-hero__content p {
  max-width: 560px;
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(251, 245, 230, 0.75);
}

/* A live result count - what the hero's old "Vol. 01" pill was trying
   to be, but actually useful here: it reflects the current filter
   (updateCount() in renderIndex), not just a fixed destination total. */
.pw-index-count {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 28px 0 18px;
}

.pw-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0 0 40px;
}

.pw-filter {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--glass-border-dark);
  background: none;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: var(--foreground);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pw-filter.is-active,
.pw-filter:hover {
  background: var(--color-accent-red);
  border-color: var(--color-ink);
  color: #fbf5e6;
}

.pw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 100px;
}

@media (min-width: 720px) {
  .pw-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Cards vary height/aspect on purpose (per spec §2) via nth-child hooks
   rather than a per-destination "size" field - keeps the data schema
   simple while still breaking the grid's rhythm visually. */
.pw-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--glass-border-dark);
}

/* .pw-card--wide: the first card, plus whichever card would otherwise
   sit alone at the end of the 2-column grid (computed in places.js
   from DESTINATIONS.length, not a fixed position) - keeps the grid
   symmetrical instead of ending on a lopsided half-empty row. */
@media (min-width: 720px) {
  .pw-grid > .pw-card--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
}

.pw-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.pw-card:hover img { transform: scale(1.06); }

.pw-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 2, 15, 0.05) 0%, rgba(0, 2, 15, 0.15) 45%, rgba(0, 2, 15, 0.92) 100%);
}

.pw-card__body {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 1;
  color: #fbf5e6;
}

.pw-card__state {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f0b874;
  margin-bottom: 6px;
}

.pw-card__name {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1;
  text-transform: lowercase;
}

.pw-card__hook {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(251, 245, 230, 0.85);
  max-width: 34ch;
}

.pw-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(251, 245, 230, 0.7);
}

.pw-card__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #fbf5e6;
  background: rgba(251, 245, 230, 0.14);
  border: 1.5px solid rgba(251, 245, 230, 0.4);
  backdrop-filter: blur(10px);
  padding: 5px 10px;
  border-radius: 999px;
}

.pw-card__explore {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(251, 245, 230, 0.14);
  border: 1.5px solid rgba(251, 245, 230, 0.4);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbf5e6;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pw-card:hover .pw-card__explore { opacity: 1; transform: translateY(0); }

@media (hover: none) {
  .pw-card__explore { opacity: 1; transform: none; }
}

/* ── Index closing spread ─────────────────────────────────────────── */

.pw-index-footer {
  text-align: center;
  padding: clamp(72px, 12vh, 120px) 0 clamp(64px, 10vh, 100px);
  border-top: 1px solid var(--glass-border-dark);
}

.pw-index-footer__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-platinum);
  margin: 0 0 10px;
}

.pw-index-footer__line {
  margin: 0 0 32px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  line-height: 1.15;
  text-transform: lowercase;
}