/* ─────────────────────────────────────────────────────────────────────────
   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;
}

/* Found auditing multiple places pages: --color-platinum measures fine
   on the plain page (5.53:1, e.g. Goa's kicker) but fails at 2.85:1
   wherever a destination's own content puts this section over the tan
   --card band instead (e.g. Pondicherry's) - same class, two different
   real backgrounds depending on page content, so it needs a color that
   holds up on both. .pw-hours .pw-kicker__num below (a genuinely dark
   section regardless of theme) keeps its own already-correct override. */
.pw-kicker__num {
  font-size: 13px;
  color: var(--foreground);
  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;
}

/* Same cross-context fix as .pw-kicker__num above. */
.pw-dek {
  font-size: 16px;
  line-height: 1.75;
  color: var(--foreground);
  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;
}

/* For a destination with no real Oyestore photography yet (Destination 7) -
   same honest concept-imagery treatment as .pw-card__concept below and
   originals.css's .orig-chapter-hero__concept, never a fake/borrowed
   photo standing in for the real thing. */
.pw-hero__concept {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(155deg, var(--card) 0%, var(--color-midnight) 100%);
  color: var(--pw-accent);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.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(--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(--foreground);
  white-space: nowrap;
  text-align: right;
}

/* Same fix as .pw-hidden__desc above: 2.85:1 on the tan --card band
   this section sits on, not the plain page platinum passes fine on. */
.pw-do-item__desc {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--foreground);
}

/* ── 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--wide p below already correctly uses --foreground
   - this base variant was the one exception still on --color-platinum,
   which measures 2.85:1 on the tan --card band these fields sit on. */
.pw-landmark__field p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--foreground);
}

.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(--foreground);
  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(--foreground); }

.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(--foreground);
  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(--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;
}

/* Found auditing the rest of the site for the same washed-text bug
   already fixed on .trip-card/.orig-chapter-card: --color-platinum
   measured 2.85:1 here (this section sits on the tan --card band, not
   the plain page, where platinum passes fine at 5.53:1) - a real
   contrast failure, not just a duller shade. --foreground is the
   token this page's own body copy already uses (ink in light mode,
   pearl in dark). */
.pw-hidden__desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--foreground); }

/* ── 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;
}

/* ── 20 · Experience themes (Project Places / Travel architecture) ───
   Same card language as .pw-trip/.pw-fact below - rounded card, --card
   fill, --glass-border-dark border - no new visual system introduced. */

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

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

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

.pw-theme {
  padding: 20px;
  border-radius: 16px;
  border: 1.5px solid var(--glass-border-dark);
  background: var(--card);
}

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

.pw-theme__signature {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--foreground);
  opacity: 0.9;
}

.pw-theme__count {
  font-size: 12px;
  color: var(--foreground);
}

/* Reuses .pw-quick__chips/.pw-quick__chip--vibe (already defined above)
   for a new destination profile's pillar list - same chip, new context. */
.pw-profile-pillars { margin-top: 4px; }

/* ── 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(--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(--foreground);
}

.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(--foreground);
  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(--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(--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); }

/* Same missing-photo fallback as .pw-hero__concept above - honest
   concept-imagery treatment, not a stand-in photo. */
.pw-card__concept {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(155deg, var(--card) 0%, var(--color-midnight) 100%);
  color: var(--pw-accent);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.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(--foreground);
  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;
}