/* ─── Hero (full-bleed photo) ──────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(640px, 92vh, 880px);
  margin-top: -72px; /* Pull under the transparent header */
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
@media (max-width: 860px) { .hero { margin-top: -64px; } }
@media (max-width: 540px) { .hero { margin-top: -60px; } }

.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: saturate(1.05);
}
@media (prefers-reduced-motion: reduce) {
  /* Hiding the video would also hide its poster, leaving the hero bare.
     Drop the motion, keep the still frame as the hero backdrop. */
  .hero__video { display: none; }
  .hero {
    background-image: url("../img/hero-poster.jpg");
    background-size: cover;
    background-position: center;
  }
}
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 60% at 90% 10%, rgba(255,200,80,0.25) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(13,31,36,0.15) 15%, rgba(13,31,36,0.55) 60%, rgba(13,31,36,0.92) 100%);
}
.hero__inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-32) var(--grid-margin) var(--space-20);
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  align-items: end;
  gap: var(--space-16);
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(10px);
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-8);
}
.hero__eyebrow span:first-child { color: var(--color-accent); }
.hero__title {
  color: #fff;
  font-size: clamp(2.75rem, 6vw, 5rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: var(--space-6);
  text-shadow: 0 2px 32px rgba(13,31,36,0.32);
}
.hero__title-accent {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 600;
}
.hero__subtitle {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  max-width: 540px;
  margin-bottom: var(--space-10);
}
.hero__actions {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
}
.hero__meta {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding-bottom: var(--space-3);
}
.hero__stat {
  display: flex; flex-direction: column;
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-4);
}
.hero__stat-value {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}
.hero__stat-label {
  font-family: var(--font-jakarta);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.hero__scroll {
  position: absolute;
  left: 50%; bottom: var(--space-8);
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.hero__scroll::after {
  content: '';
  width: 1px; height: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent);
  animation: pp-scroll 1.8s var(--ease-out) infinite;
}
@keyframes pp-scroll {
  0%, 100% { opacity: 0.2; transform: translateY(0); }
  50%      { opacity: 0.8; transform: translateY(6px); }
}

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero__meta { flex-direction: row; flex-wrap: wrap; gap: var(--space-8); }
  .hero__scroll { display: none; }
}
@media (max-width: 600px) {
  .hero { min-height: clamp(540px, 88vh, 760px); }
  .hero__inner { padding: var(--space-20) var(--grid-margin) var(--space-12); }
  .hero__title { font-size: clamp(2.25rem, 9vw, 3.25rem); }
  .hero__subtitle { font-size: 1rem; margin-bottom: var(--space-8); }
  .hero__actions { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .hero__actions .btn { justify-content: center; }
  .hero__meta { gap: var(--space-5); }
  .hero__stat-value { font-size: 1.5rem; }
}

/* ─── Trust strip ──────────────────────────────────────────── */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 720px) {
  .trust-strip {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-8) 0;
  }
}
.trust-strip__item {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-jakarta);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}
.trust-strip__item .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 22px;
}
.trust-strip__item strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ─── Values band — runs right under the hero, sets the promise ─── */
.values-band {
  position: relative;
  background: var(--color-bg-mint);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.values-band::before {
  /* Soft accent halo — premium, not loud */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 80% at 8% 50%, rgba(29,158,117,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 70% at 92% 50%, rgba(255,200,80,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.values-band > * { position: relative; }

.how-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  align-items: stretch;
}
.how-values__item {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-6) var(--space-3) 0;
  border-right: 1px solid var(--color-border);
  text-align: left;
}
.how-values__item:last-child { border-right: 0; padding-right: 0; }

.how-values__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(13,31,36,0.04);
}
.how-values__icon .material-symbols-outlined {
  font-size: 22px;
}
.how-values__copy {
  display: flex; flex-direction: column;
  gap: 2px;
  line-height: 1.35;
  min-width: 0;
}
.how-values__copy strong {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.how-values__copy span {
  font-family: var(--font-jakarta);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

@media (max-width: 860px) {
  .values-band { padding: var(--space-10) 0; }
  .how-values { grid-template-columns: 1fr; gap: var(--space-5); }
  .how-values__item {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    padding: 0 0 var(--space-5) 0;
  }
  .how-values__item:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ─── Featured magazine block ──────────────────────────────── */
.feature-magazine {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-16);
  align-items: stretch;
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.feature-magazine__image {
  position: relative;
  min-height: 520px;
  background-size: cover; background-position: center;
}
.feature-magazine__image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(13,31,36,0.0) 60%, rgba(13,31,36,0.35) 100%);
}
.feature-magazine__badge {
  position: absolute; top: var(--space-6); left: var(--space-6);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.feature-magazine__body {
  padding: var(--space-16) var(--space-12);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-5);
}
.feature-magazine__meta {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.feature-magazine__meta .dot {
  width: 3px; height: 3px; background: currentColor; border-radius: 50%;
}
.feature-magazine__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.feature-magazine__excerpt {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.feature-magazine__author {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.feature-magazine__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grad-primary);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-heading); font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.feature-magazine__author-name {
  font-family: var(--font-jakarta);
  font-weight: 600;
  font-size: 0.9375rem;
}
.feature-magazine__author-meta {
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

@media (max-width: 960px) {
  .feature-magazine { grid-template-columns: 1fr; }
  .feature-magazine__image { min-height: 320px; }
  .feature-magazine__body { padding: var(--space-10) var(--space-8); }
}
@media (max-width: 540px) {
  .feature-magazine { border-radius: var(--radius-xl); }
  .feature-magazine__image { min-height: 240px; }
  .feature-magazine__body { padding: var(--space-8) var(--space-6); gap: var(--space-4); }
  .feature-magazine__title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .feature-magazine__excerpt { font-size: 0.9375rem; }
  .feature-magazine__badge { font-size: 0.625rem; padding: 6px 10px; }
}

/* ─── Destination cards — clip-reveal image, no card scaling ── */
.destination-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}
.destination-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
  color: inherit;
}
.destination-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.destination-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out), filter 800ms var(--ease-out);
}
.destination-card:hover .destination-card__img {
  transform: scale(1.05);
  filter: saturate(1.12);
}
/* Reveal bar that slides up over the media on hover */
.destination-card__media::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 560ms var(--ease-out);
  z-index: 3;
}
.destination-card:hover .destination-card__media::before { transform: scaleX(1); }
.destination-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,31,36,0) 50%, rgba(13,31,36,0.6) 100%);
}
.destination-card__pin-overlay {
  position: absolute; top: var(--space-5); left: var(--space-5);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  color: var(--color-text);
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.destination-card__pin-overlay .material-symbols-outlined {
  font-size: 14px;
  color: var(--color-primary);
}
.destination-card__caption {
  position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5);
  color: #fff;
}
.destination-card__caption .name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.destination-card__caption .region {
  font-family: var(--font-jakarta);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.78);
  margin-top: 2px;
}
.destination-card__body {
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.destination-card__summary {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.destination-card__stats {
  display: flex; gap: var(--space-5); flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-jakarta);
}
@media (max-width: 540px) {
  .destination-card__body { padding: var(--space-5); gap: var(--space-3); }
  .destination-card__stats { gap: var(--space-4); }
  .destination-card__caption .name { font-size: 1.25rem; }
}
.destination-card__stat {
  display: flex; flex-direction: column;
}
.destination-card__stat-value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-text);
}
.destination-card__stat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* ─── Region grid ──────────────────────────────────────────── */
.region-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gutter);
}
@media (max-width: 720px) { .region-grid { grid-template-columns: 1fr; } }

/* ─── Guide feature card — portrait, 3-up (destinations index)
   Tight, modern card. Hover is intentionally subtle (border + shadow,
   no scale, no translate) — no flicker, no dated zoom-on-hover feel.
   The two pills (regions / pins) are wired from real data so they
   self-update as content is added. ── */
.guide-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}
@media (max-width: 1024px) { .guide-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .guide-feature-grid { grid-template-columns: 1fr; } }

.guide-feature-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  /* Stable hit area: no transform on hover, so the bounding rect never
     shifts. Hover effect is conveyed by border colour and shadow only. */
  transition: box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}
.guide-feature-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card-hover);
  color: inherit;
}
.guide-feature-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-bg-alt);
  /* No transform-based zoom — sharp-corner artefacts during the scale
     animation come from a child transform escaping the rounded clip in
     some browsers. Static image keeps corners perfectly rounded. */
}
.guide-feature-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.guide-feature-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,31,36,0) 55%, rgba(13,31,36,0.42) 100%);
  pointer-events: none;
}
.guide-feature-card__region {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-jakarta);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
}
.guide-feature-card__weather {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-jakarta);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text);
  box-shadow: 0 2px 6px rgba(13,31,36,0.12);
  opacity: 0.5;
  transition: opacity var(--duration-normal) var(--ease-out);
}
.guide-feature-card__weather.is-loaded { opacity: 1; }
.guide-feature-card__weather-icon { font-size: 16px !important; color: var(--color-primary); }
.guide-feature-card__weather-temp { line-height: 1; }

.guide-feature-card__body {
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1;
}
.guide-feature-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text);
  margin: 0;
}
.guide-feature-card__tagline {
  font-family: var(--font-jakarta);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Pills row — only the two counts that auto-derive from data
   (regions + pins). Drops stories/days that were noise. */
.guide-feature-card__pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 2px;
}
.guide-feature-card__pill {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-mint-soft, rgba(29,158,117,0.08));
  border: 1px solid rgba(29,158,117,0.18);
  font-family: var(--font-jakarta);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}
.guide-feature-card__pill strong {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
/* Single-line season hint — populated from NASA POWER monthly climate. */
.guide-feature-card__season {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-jakarta);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  min-height: 1.25rem;
}
.guide-feature-card__season-item {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.guide-feature-card__season-item .material-symbols-outlined {
  font-size: 14px;
  color: var(--color-primary);
}
.guide-feature-card__season-item--off .material-symbols-outlined {
  color: var(--color-text-muted);
}
.guide-feature-card__season-item strong {
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-jakarta);
}
.guide-feature-card__season[data-state="loading"] {
  opacity: 0.5;
}
/* Visa row — read from data.js visaInfo (data-driven, not hard-coded
   in the template) with a verified-on date for trust. */
.guide-feature-card__visa-row {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-jakarta);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}
.guide-feature-card__visa-row .material-symbols-outlined {
  font-size: 14px;
}
.guide-feature-card__visa-label {
  font-weight: 600;
}
.guide-feature-card__visa--easy { color: var(--color-primary); }
.guide-feature-card__visa--easy .material-symbols-outlined { color: var(--color-primary); }
.guide-feature-card__visa--mid  { color: var(--color-accent-deep); }
.guide-feature-card__visa--mid  .material-symbols-outlined { color: var(--color-accent-deep); }
.guide-feature-card__visa--hard { color: var(--color-danger); }
.guide-feature-card__visa--hard .material-symbols-outlined { color: var(--color-danger); }
.guide-feature-card__visa-checked {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  font-weight: 400;
  font-style: italic;
}
.guide-feature-card__cta {
  justify-content: right;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--font-jakarta);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-primary);
  transition: gap var(--duration-normal) var(--ease-out);
}
.guide-feature-card__cta .material-symbols-outlined {
  font-size: 16px;
  transition: transform var(--duration-normal) var(--ease-out);
}
.guide-feature-card:hover .guide-feature-card__cta { gap: 10px; }
.guide-feature-card:hover .guide-feature-card__cta .material-symbols-outlined {
  transform: translateX(2px);
}

/* ─── Upcoming-guide cards — small horizontal teaser cards ─── */
.upcoming-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
  margin-bottom: var(--space-16);
}
@media (max-width: 960px) { .upcoming-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .upcoming-grid { grid-template-columns: 1fr; } }

.upcoming-card {
  display: flex;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.upcoming-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.upcoming-card__media {
  flex: 0 0 110px;
  background-size: cover; background-position: center;
  filter: grayscale(0.25);
  transition: filter var(--duration-normal) var(--ease-out);
}
.upcoming-card:hover .upcoming-card__media { filter: grayscale(0); }
.upcoming-card__body {
  padding: var(--space-5);
  display: flex; flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.upcoming-card__status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.upcoming-card__status .material-symbols-outlined { font-size: 14px; }
.upcoming-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.upcoming-card__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}
@media (max-width: 600px) {
  .upcoming-card__media { flex-basis: 96px; }
  .upcoming-card__body  { padding: var(--space-4); }
}

/* ─── Theme grid ───────────────────────────────────────────── */
/* ─── Slim destination card (homepage portrait format) ─────── */
/* Desktop / tablet: static 4-up grid. There's no horizontal overflow,
   so the browser has no reason to repaint the row during vertical scroll.
   This was the root cause of the perceived jitter. */
.destinations-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  will-change: transform;
}
.destinations-track > * { min-width: 0; }
/* The component-level .trip-card declares its own translateZ(0) +
   contain. Don't override transform here — it would knock the card
   out of its own GPU layer and reintroduce paint-on-scroll jitter. */
@media (max-width: 960px) {
  /* Tablet: 2-up grid (still no overflow). */
  .destinations-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  /* Phone: revert to a horizontal swipe rail since 2-up is cramped.
     `contain: layout paint style` isolates this from the page's vertical
     scroll cost so it stays smooth even with overflow-x: auto. */
  .destinations-track {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    padding-bottom: 0;
  }
  .destinations-track > * { flex: none; }
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}
@media (max-width: 960px) { .theme-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .theme-grid { grid-template-columns: 1fr; } }

/* ─── Stories rail (vertical cards with image-on-top) ───────
   Substantial enough to read like a real teaser, but compact in
   height. Hover stays in-place — no transform that could clip the
   top edge against the parent. */
.home-stories-rail {
  display: grid;
  /* `minmax(0, 1fr)` keeps columns equal regardless of intrinsic
     content. `contain: layout paint style` isolates the rail from
     the page's vertical scroll so cards don't re-rasterize per frame. */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.story-mini {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: inherit;
  overflow: hidden;
  position: relative;
  /* Re-introduced GPU layer promotion to fix sub-pixel vibration. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.story-mini:hover {
  /* Only colour properties on hover — no transform, no box-shadow
     transition. Armed transitions cause re-rasters during scroll. */
  border-color: var(--color-primary);
  color: inherit;
}
.story-mini__image {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
  /* No transform on hover — image scaling kept the layer hot. */
}
.story-mini__body {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: var(--space-4) var(--space-5) var(--space-5);
  flex: 1;
}
.story-mini__meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-jakarta);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.story-mini__meta .dot {
  width: 3px; height: 3px;
  background: var(--color-text-muted);
  border-radius: 50%;
  display: inline-block;
}
.story-mini__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.story-mini__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-jakarta);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-primary);
}
.story-mini__cta .material-symbols-outlined {
  font-size: 16px;
  transition: transform 200ms var(--ease-out);
}
.story-mini:hover .story-mini__cta .material-symbols-outlined { transform: translateX(3px); }

@media (max-width: 1024px) { .home-stories-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  {
  .home-stories-rail { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .story-mini__image { aspect-ratio: 16 / 9; }
}

/* ─── Stories grid ─────────────────────────────────────────── */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}
.stories-grid--wide { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .stories-grid, .stories-grid--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .stories-grid, .stories-grid--wide { grid-template-columns: 1fr; } }

/* ─── How-it-works ─────────────────────────────────────────── */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}
.how-card {
  position: relative;
  padding: var(--space-10) var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  transition: border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.how-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.how-card__icon {
  transition: background var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out);
}
.how-card:hover .how-card__icon { background: var(--color-primary); color: #fff; }
.how-card__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.how-card__icon {
  position: absolute; top: var(--space-8); right: var(--space-8);
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-muted);
  color: var(--color-primary);
}
.how-card__title { margin: var(--space-5) 0 var(--space-3); font-size: 1.25rem; }
.how-card__desc  { font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.6; }
@media (max-width: 960px) { .how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { 
  .how-grid { grid-template-columns: 1fr; } 
  .how-card { 
    padding: var(--space-8) var(--space-6); 
    min-height: 215px;
  }
}

/* ─── Photo essay marquee ──────────────────────────────────
   A continuously-rolling strip of postcards. The JS clones the
   set so the loop seamlessly wraps. Two staggered rows on
   wide screens, single row on mobile so it doesn't grow.
   The strip is wrapped in a rounded dark frame so the rolling
   tiles feel like a curated cinema reel — no "white splash". */
.photo-essay {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(29,158,117,0.22), transparent 70%),
    linear-gradient(180deg, #122a32 0%, #0d1f24 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 18px 36px rgba(13,31,36,0.18);
  isolation: isolate;
}
/* Subtle inner edge gradients on the rolling strip itself
   (not the section background) so cells dissolve into the
   dark frame instead of a white wash. */
.photo-essay::before,
.photo-essay::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 22px;
  z-index: 2;
  pointer-events: none;
}
.photo-essay::before {
  left: 0;
  background: linear-gradient(90deg, rgba(13,31,36,0.85) 0%, rgba(13,31,36,0) 100%);
  border-top-left-radius: var(--radius-2xl);
  border-bottom-left-radius: var(--radius-2xl);
}
.photo-essay::after {
  right: 0;
  background: linear-gradient(270deg, rgba(13,31,36,0.85) 0%, rgba(13,31,36,0) 100%);
  border-top-right-radius: var(--radius-2xl);
  border-bottom-right-radius: var(--radius-2xl);
}
.photo-essay__row {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  will-change: transform;
  animation: photo-essay-roll 62s linear infinite;
}
.photo-essay__row--reverse {
  animation-direction: reverse;
  animation-duration: 73s; /* offset so rows don't sync */
}
.photo-essay:hover .photo-essay__row {
  animation-play-state: paused;
}
@keyframes photo-essay-roll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.photo-essay__cell {
  position: relative;
  flex: 0 0 auto;
  width: 220px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
  transition: transform 0.5s var(--ease-out);
}
.photo-essay__cell img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out), filter 0.4s var(--ease-out);
}
.photo-essay__cell:hover {
  transform: translateY(-4px);
  z-index: 2;
}
.photo-essay__cell:hover img {
  transform: scale(1.06);
  filter: saturate(1.15) brightness(1.05);
}
.photo-essay__cell::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,31,36,0) 60%, rgba(13,31,36,0.4) 100%);
  opacity: 0; transition: opacity var(--duration-normal) var(--ease-out);
}
.photo-essay__cell:hover::after { opacity: 1; }
@media (max-width: 960px) {
  .photo-essay__cell { width: 180px; }
  /* Hide the second row on mobile — single rolling strip, no row growth */
  .photo-essay__row--reverse { display: none; }
}
@media (max-width: 540px) {
  .photo-essay__cell { width: 150px; }
  .photo-essay__row { animation-duration: 47s; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-essay__row { animation: none; }
  .photo-essay { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* ─── Testimonials ─────────────────────────────────────────── */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}
.testimonial-card {
  padding: var(--space-10);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.testimonial-card__quote {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-text);
  position: relative;
  padding-top: var(--space-6);
}
.testimonial-card__quote::before {
  content: '"';
  position: absolute; top: -8px; left: -4px;
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.6;
}
.testimonial-card__author {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.testimonial-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.testimonial-card__name {
  font-family: var(--font-jakarta);
  font-weight: 600;
  font-size: 0.9375rem;
}
.testimonial-card__trip {
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
@media (max-width: 960px) { .testimonial-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
@media (max-width: 540px) { .testimonial-card { padding: var(--space-8); } }

/* ─── Author / about block ─────────────────────────────────── */
.author-block {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-16);
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
}
.author-block__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  background-size: cover; background-position: center;
  position: relative;
  box-shadow: var(--shadow-card);
}
.author-block__photo::after {
  content: '';
  position: absolute; bottom: -16px; right: -16px;
  width: 88px; height: 88px;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  z-index: -1;
}
.author-block__label {
  display: inline-block;
  font-family: var(--font-jakarta);
  font-size: var(--text-overline);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.author-block__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: var(--space-5);
  letter-spacing: -0.02em;
}
.author-block__text {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}
.author-block__signature {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--color-primary);
}
@media (max-width: 860px) {
  .author-block { grid-template-columns: 1fr; padding: var(--space-10); gap: var(--space-8); }
}
@media (max-width: 540px) {
  .author-block { padding: var(--space-8); border-radius: var(--radius-xl); }
  .author-block__photo { aspect-ratio: 4/5; }
}

/* ─── Newsletter strip ─────────────────────────────────────── */
#newsletter { padding-bottom: var(--space-12); }
.newsletter {
  position: relative;
  padding: var(--space-20) var(--space-16) var(--space-16);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(135deg, rgba(13,31,36,0.85) 0%, rgba(29,158,117,0.78) 100%),
    url("../img/photos/newsletter-bg.jpg") center/cover;
  color: #fff;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.newsletter::before {
  content: '';
  position: absolute; top: -120px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,80,0.4) 0%, transparent 70%);
  z-index: -1;
}
.newsletter > * { position: relative; z-index: 1; }
.newsletter h2 {
  color: #fff;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  margin-bottom: var(--space-4);
}
.newsletter p {
  color: rgba(255,255,255,0.85);
  max-width: 480px;
  margin: 0 auto var(--space-8);
  font-size: 1.0625rem;
}
.newsletter__form {
  display: flex; gap: var(--space-3);
  max-width: 460px; margin: 0 auto;
  flex-wrap: wrap; justify-content: center;
}
.newsletter__input {
  flex: 1; min-width: 220px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.96);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-jakarta);
  font-size: 0.9375rem;
  color: var(--color-text);
}
.newsletter__input::placeholder { color: var(--color-text-muted); }
.newsletter__input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,200,80,0.5);
}

@media (max-width: 768px) { .newsletter { padding: var(--space-16) var(--space-6); } }

/* ─── Newsletter social proof ─────────────────────────────── */
.newsletter__proof {
  margin: var(--space-6) auto 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-body);
}
.newsletter__proof-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter__avatars {
  display: inline-flex;
  align-items: center;
}
.newsletter__avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  display: grid;
  place-items: center;
  margin-left: -8px;
  border: 2px solid rgba(13, 31, 36, 0.95);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.newsletter__avatar:first-child { margin-left: 0; }
.newsletter__proof-text strong {
  color: #fff;
  font-weight: 700;
}
.newsletter__proof-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 2px;
}
.newsletter__proof-meta .material-symbols-outlined {
  font-size: 16px;
  color: var(--color-accent);
}
/* Inline form error */
.newsletter__error {
  margin: 8px auto 0;
  min-height: 1.1em;
  font-size: 0.88rem;
  color: #FFCDD0;
  text-align: center;
}
.newsletter__input.is-invalid {
  box-shadow: 0 0 0 3px rgba(255, 120, 120, 0.45);
}

/* Success card — replaces form + proof when subscribed */
.newsletter__success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-6) var(--space-4) var(--space-2);
  text-align: center;
  animation: newsletter-success-in 480ms var(--ease-out);
}
.newsletter.is-subscribed .newsletter__form,
.newsletter.is-subscribed .newsletter__error,
.newsletter.is-subscribed .newsletter__proof {
  display: none;
}
.newsletter.is-subscribed .newsletter__success {
  display: flex;
}
.newsletter__success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 200, 80, 0.18);
  display: grid;
  place-items: center;
  color: var(--color-accent);
  border: 1px solid rgba(255, 200, 80, 0.4);
}
.newsletter__success-icon .material-symbols-outlined {
  font-size: 32px;
  font-variation-settings: 'wght' 500, 'FILL' 1;
}
.newsletter__success-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  margin: 0;
  color: #fff;
}
.newsletter__success-text {
  margin: 0;
  max-width: 480px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  line-height: 1.55;
}
.newsletter__success-text strong { color: var(--color-accent); }
.newsletter__edit {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-jakarta);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.newsletter__edit:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,200,80,0.4);
  color: #fff;
}
.newsletter__edit .material-symbols-outlined { font-size: 16px; }
@keyframes newsletter-success-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}

/* ─── Manifesto block — editorial intro ───────────────────── */
.manifesto {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.manifesto .section-label { justify-content: center; }
.manifesto .section-label::after {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  display: inline-block;
}
.manifesto__quote {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.015em;
  margin: var(--space-3) auto var(--space-16);
  max-width: 760px;
  position: relative;
  padding: 0 var(--space-8);
}
.manifesto__quote::before,
.manifesto__quote::after {
  content: "“";
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-accent);
  position: absolute;
  top: -10px;
  opacity: 0.6;
}
.manifesto__quote::before { left: 0; }
.manifesto__quote::after  { content: "”"; right: 0; }
.manifesto__principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  text-align: left;
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
}
.manifesto__principle h4 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}
.manifesto__principle p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.manifesto__num {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
@media (max-width: 860px) {
  .manifesto__principles { grid-template-columns: 1fr; gap: var(--space-8); }
  .manifesto__quote::before,
  .manifesto__quote::after { display: none; }
  .manifesto__quote { padding: 0; }
}

/* ─── Cinematic divider — between sections ─────────────────── */
.cine-divider {
  position: relative;
  height: 220px;
  overflow: hidden;
  margin: 0;
}
.cine-divider__media {
  position: absolute; inset: -10% 0 -10% 0;
  background-size: cover; background-position: center;
  transform: translate3d(0, var(--parallax-y, 0), 0);
  will-change: transform;
}
.cine-divider__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, transparent 18%, transparent 82%, var(--color-bg) 100%);
}
.cine-divider--alt-top    .cine-divider__overlay { background: linear-gradient(180deg, var(--color-bg-alt) 0%, transparent 18%, transparent 82%, var(--color-bg) 100%); }
.cine-divider--alt-bottom .cine-divider__overlay { background: linear-gradient(180deg, var(--color-bg) 0%, transparent 18%, transparent 82%, var(--color-bg-alt) 100%); }


/* ─── Stat strip with count-up ─────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-12);
  padding: var(--space-16) 0;
}
.stat-strip__item {
  text-align: center;
  padding: var(--space-8);
  border-right: 1px solid var(--color-border);
}
.stat-strip__item:last-child { border-right: 0; }
.stat-strip__value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.stat-strip__label {
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
@media (max-width: 720px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip__item:nth-child(2) { border-right: 0; }
  .stat-strip__item:nth-child(1),
  .stat-strip__item:nth-child(2) { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-10); }
  .stat-strip__item:nth-child(3),
  .stat-strip__item:nth-child(4) { padding-top: var(--space-10); }
}

/* ─── Hero parallax binding ────────────────────────────────── */
.hero__image[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.08);
  transition: transform 80ms linear;
}

/* ─── Section separator (curved SVG-style with gradient) ──── */
.section-edge {
  height: 0;
  position: relative;
  overflow: visible;
}
.section-edge::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  top: -40px;
  background:
    radial-gradient(ellipse 50% 100% at 50% 0%, rgba(29,158,117,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* ─── Fix header CTA — keep button width stable ─────────────── */
.header__cta {
  /* Reserve enough width for both label and icon so font-load
     can never widen the button mid-paint. */
  min-width: 158px;
}
@media (max-width: 1024px) {
  .header__cta { min-width: 0; }
  .header__cta > span:first-child {
    /* Hide label on tight viewports — icon stays. */
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .header__cta { padding: 9px 12px; }
}
@media (max-width: 860px) {
  .header__cta { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   LIVING DIARY — cinematic, sticky-stacked scene experience
═══════════════════════════════════════════════════════════════════ */
/* ───────────────────────── DIARY · zigzag timeline ─────────────────
   Restored verbatim from the restructuring branch. The cinematic
   open/close on each polaroid is layered on top via .journal__polaroid
   transforms and the .diary__cinema-* overlay below. */

.diary {
  position: relative;
  padding: var(--space-32) 0 var(--space-24);
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(255,200,80,0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(29,158,117,0.10), transparent 65%),
    var(--color-anchor);
  color: #fff;
  overflow: hidden;
  /* New stacking context so the cinema veil/stage layer cleanly above
     the timeline without bleeding into other sections. */
  isolation: isolate;
}

.diary__path {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.diary__header {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-12);
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  flex-wrap: wrap;
  position: relative; z-index: 2;
}
.diary__title-main {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  margin-top: var(--space-3);
}
.diary__subtitle {
  max-width: 380px;
  color: rgba(255,255,255,0.62);
  font-size: 1rem;
  line-height: 1.6;
}
.diary__footer {
  display: flex; justify-content: center;
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid rgba(255,255,255,0.10);
  position: relative; z-index: 2;
}

.journal {
  position: relative;
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: calc(var(--space-20) * 0.85);
}
.journal::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 0;
  border-left: 2px dashed rgba(255,200,80,0.28);
  transform: translateX(-50%);
  z-index: 0;
}

/* Each entry owns 250vh of vertical scroll. The inner .journal__entry-pin
   is sticky 100vh, giving 150vh of cinema cycle split 50vh OPEN / 50vh
   HOLD / 50vh CLOSE. Long enough that scaling feels weighted; short
   enough between chapters that the road never overstays. */
.journal__entry {
  position: relative;
  min-height: 212.5vh;
  --prog: 0;
  --cine-y-off: 70px;
}
@media (max-width: 768px) {
  .journal__entry {
    --cine-y-off: 25px;
  }
}

.journal__entry-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto;
  grid-auto-flow: dense;
  align-items: center;
  gap: var(--space-8);
  z-index: var(--entry-z, 2);
}
.journal__entry-pin > .journal__chapter,
.journal__entry-pin > .journal__rail-marker,
.journal__entry-pin > .journal__card { grid-row: 1; }

.journal__chapter {
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--font-heading);
  color: rgba(255,255,255,0.16);
  pointer-events: none;
  user-select: none;
}
.journal__chapter-num {
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 0.85;
  font-weight: 700;
  letter-spacing: -0.04em;
  -webkit-text-stroke: 1px rgba(255,200,80,0.45);
  color: transparent;
}
.journal__chapter-label {
  font-family: var(--font-jakarta);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,200,80,0.55);
  margin-top: var(--space-3);
  padding-left: 4px;
}

.journal__rail-marker {
  grid-column: 2;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  position: relative;
  z-index: 1;
  opacity: clamp(0, 1 - var(--prog) * 100, 1);
  pointer-events: none;
}
.journal__rail-pin {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px var(--color-anchor),
              0 0 0 6px rgba(255,200,80,0.4),
              0 0 18px rgba(255,200,80,0.45);
  position: relative;
}
/* No pulse halo — the previous radial pulse was reading as a hover
   highlight on top of the photos. The dot stays static and quiet. */

.journal__card {
  display: flex; flex-direction: column;
  gap: var(--space-5);
  text-decoration: none; color: inherit;
  transition: transform var(--duration-normal) var(--ease-out);
  position: relative;
}
.journal__entry--left  .journal__entry-pin > .journal__card     { grid-column: 1; align-items: flex-end; text-align: right; }
.journal__entry--left  .journal__entry-pin > .journal__chapter  { grid-column: 3; align-items: flex-start; }
.journal__entry--right .journal__entry-pin > .journal__card     { grid-column: 3; align-items: flex-start; text-align: left; }
.journal__entry--right .journal__entry-pin > .journal__chapter  { grid-column: 1; align-items: flex-end; text-align: right; }


.journal__polaroid {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 320px;
  max-width: 100%;
  padding: 14px 14px 18px;
  border-radius: var(--radius-sm);
  transform-origin: center center;
  transform:
    translate3d(var(--cine-dx, 0px), var(--cine-dy, 0px), 0)
    scale(var(--cine-scale, 1))
    rotate(calc(var(--tilt) * (1 - var(--cine-untilt, 0))));
  opacity: var(--cine-card-opacity, 1);
  z-index: var(--cine-z, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  background: transparent;
}

.journal__polaroid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(253, 248, 236, 1);
  box-shadow: 0 18px 36px -12px rgba(0,0,0,0.55);
  opacity: calc(1 - var(--prog, 0));
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
}

.journal__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: #e9e2cf;
  border-radius: 2px;
  will-change: transform;
  backface-visibility: hidden;
}

.journal__caption {
  position: relative;
  z-index: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  opacity: calc(1 - var(--prog, 0) * 2);
  pointer-events: none;
}
.journal__caption-place {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-jakarta);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-anchor);
  opacity: 0.65;
}
.journal__caption-place .material-symbols-outlined { font-size: 1em; color: var(--color-anchor); }
.journal__caption-text {
  font-family: "Caveat", "Bradley Hand", "Segoe Script", cursive;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--color-anchor);
  letter-spacing: 0.005em;
}

.journal__regions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-2);
}
.journal__region-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-jakarta);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 10px 4px 6px;
  border-radius: var(--radius-pill);
  transition: all var(--duration-normal) var(--ease-out);
  text-decoration: none;
}
.journal__region-tag:hover {
  background: rgba(255, 200, 80, 0.2);
  border-color: rgba(255, 200, 80, 0.4);
  color: var(--color-accent);
}

.journal__card-link-layer {
  position: absolute;
  inset: -24px;
  z-index: 1;
  border-radius: var(--radius-xl);
}

.journal__entry-body {
  max-width: 420px;
  display: flex; flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-2);
  opacity: var(--body-opacity, 1);
  transform: translate3d(0, calc(var(--prog, 0) * 18px), 0);
  will-change: opacity, transform;
  pointer-events: none;
}
.journal__entry-title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #fff;
}
.journal__entry-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.68);
}
.journal__entry-read {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-jakarta);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: var(--space-3);
}
.journal__entry-read-line {
  width: 28px; height: 1px;
  background: var(--color-accent);
  display: inline-block;
}
.journal__entry-read .material-symbols-outlined {
  font-size: 1em;
  transition: transform var(--duration-normal) var(--ease-out);
}
.journal__card:hover .journal__entry-read .material-symbols-outlined { transform: translateX(4px); }

/* ─── Cinema layer ───
   Solid greenish-dark backdrop matching the diary section. On desktop
   the polaroid covers the viewport at scale 4× so the veil never shows;
   on mobile the polaroid only scales to ~1.5–2.4×, and the veil masks
   the surrounding area so adjacent chapters never bleed through behind
   the active one. */
.diary__cinema-veil {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(255,200,80,0.06), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(29,158,117,0.10), transparent 65%),
    var(--color-anchor);
  pointer-events: none;
  z-index: 29;
  opacity: 0;
}

.diary__cinema-photo {
  position: fixed;
  inset: 0;
  z-index: 32;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.035);
  clip-path: inset(0 0 0 0);
  transform-origin: center center;
  will-change: opacity, transform, clip-path;
  backface-visibility: hidden;
}

/* Soft radial vignette — corners darken as the chapter zooms in,
   so the eye is pulled to the photo center. Sits over the photo. */
.diary__cinema-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 33;
  background: radial-gradient(
    ellipse at center,
    transparent 45%,
    rgba(0, 0, 0, 0.55) 100%);
  opacity: calc(var(--cine-prog, 0) * 0.85);
}


/* Bottom-only text-readability tint — sits behind the title + caption
   + cities + CTA block at the bottom of the viewport. Photo above the
   tint stays untouched. */
.diary__cinema-tint {
  position: fixed;
  inset: auto 0 0 0;
  height: 55vh;
  background: linear-gradient(180deg,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0.30) 35%,
    rgba(0,0,0,0.65) 70%,
    rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 34;
  opacity: 0;
}
/* Cinema stage — the iconified info layer that sits OVER the fit-to-screen
   photo. Topbar at viewport top (chapter meta + date), main block at the
   bottom (title + caption + city pills + CTA). Above the photo (z:35). */
.diary__cinema-stage {
  position: fixed;
  inset: 4vh var(--grid-margin) 5vh;
  z-index: 35;
  pointer-events: none;
  display: flex; flex-direction: column;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.diary__cinema-stage > * {
  transition:
    opacity 300ms var(--ease-out),
    transform 300ms var(--ease-out),
    filter 300ms var(--ease-out);
}
.diary__cinema-topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.diary__cinema-stage > .diary__cinema-title,
.diary__cinema-stage > .diary__cinema-caption,
.diary__cinema-stage > .diary__cinema-regions,
.diary__cinema-stage > .diary__cinema-cta {
  margin-top: auto;
}
.diary__cinema-stage > .diary__cinema-caption,
.diary__cinema-stage > .diary__cinema-regions,
.diary__cinema-stage > .diary__cinema-cta {
  margin-top: var(--space-3);
  align-self: flex-start;
}

/* ─── Modern blur-in entrance (Apple Marketing / Vercel style)
   ──────────────────────────────────────────────────────────────────
   Each element starts blurred, slightly scaled, and offset; resolves
   to crisp/identity. Only the .is-active rule carries `transition` —
   so when the class is removed (scale-down begins) the elements SNAP
   back to their hidden state instantly. Slow-in, instant-out. */

.diary__cinema-stage > .diary__cinema-topbar > *,
.diary__cinema-stage > .diary__cinema-title,
.diary__cinema-stage > .diary__cinema-caption,
.diary__cinema-stage > .diary__cinema-regions,
.diary__cinema-stage > .diary__cinema-cta {
  opacity: 0;
  /* No transition by default → outro is instant */
}

.diary__cinema-stage > .diary__cinema-topbar > * {
  transform: translateY(-10px);
  filter: blur(8px);
}
.diary__cinema-stage > .diary__cinema-title {
  transform: translateY(24px) scale(1.04);
  filter: blur(14px);
}
.diary__cinema-stage > .diary__cinema-caption {
  transform: translateY(16px);
  filter: blur(8px);
}
.diary__cinema-stage > .diary__cinema-regions {
  transform: translateY(10px) scale(0.92);
  filter: blur(6px);
}
.diary__cinema-stage > .diary__cinema-cta {
  transform: scale(0.92);
  filter: blur(6px);
}

/* Active = photo fully open. Each element resolves with its own delay
   so the title arrives first, then caption, then pills, then CTA. */
.diary__cinema-stage.is-active > .diary__cinema-topbar > *,
.diary__cinema-stage.is-active > .diary__cinema-title,
.diary__cinema-stage.is-active > .diary__cinema-caption,
.diary__cinema-stage.is-active > .diary__cinema-regions,
.diary__cinema-stage.is-active > .diary__cinema-cta {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.diary__cinema-stage.is-active > .diary__cinema-topbar > * {
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) 50ms,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 50ms,
    filter 600ms cubic-bezier(0.22, 1, 0.36, 1) 50ms;
}
.diary__cinema-stage.is-active > .diary__cinema-title {
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
    transform 1000ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
    filter 800ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
}
.diary__cinema-stage.is-active > .diary__cinema-caption {
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1) 260ms,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 260ms,
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1) 260ms;
}
.diary__cinema-stage.is-active > .diary__cinema-regions {
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 420ms,
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 420ms,
    filter 600ms cubic-bezier(0.22, 1, 0.36, 1) 420ms;
}
.diary__cinema-stage.is-active > .diary__cinema-cta {
  transition:
    opacity 650ms cubic-bezier(0.22, 1, 0.36, 1) 560ms,
    transform 750ms cubic-bezier(0.22, 1, 0.36, 1) 560ms,
    filter 550ms cubic-bezier(0.22, 1, 0.36, 1) 560ms;
}

.diary__cinema-meta {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(13,31,36,0.6);
  border: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
}
.diary__cinema-meta span { display: inline-flex; align-items: center; gap: 4px; }
.diary__cinema-meta .material-symbols-outlined { font-size: 14px; color: var(--color-accent); }
.diary__cinema-meta-num { color: var(--color-accent); }
.diary__cinema-meta-faint { color: rgba(255,255,255,0.55); margin-left: 4px; }
.diary__cinema-dot {
  width: 4px; height: 4px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
}
.diary__cinema-date {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,200,80,0.92);
  color: var(--color-anchor);
  font-family: var(--font-jakarta);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.diary__cinema-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 22ch;
  text-shadow: 0 2px 28px rgba(0,0,0,0.65);
  margin: 0;
}
.diary__cinema-caption {
  font-family: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  max-width: 560px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  margin: 0;
}
.diary__cinema-regions {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.diary__cinema-region {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px 4px 6px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  font-family: var(--font-jakarta);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  pointer-events: auto;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.diary__cinema-region:hover {
  background: rgba(255,200,80,0.18);
  border-color: rgba(255,200,80,0.45);
  color: var(--color-accent);
}
.diary__cinema-region .material-symbols-outlined {
  font-size: 1em;
  color: var(--color-accent);
}

.diary__cinema-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  border: 1px solid rgba(255,200,80,0.5);
  border-radius: var(--radius-pill);
  background: rgba(255,200,80,0.16);
  font-family: var(--font-jakarta);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
  transition: gap 240ms var(--ease-out), background 240ms var(--ease-out),
              border-color 240ms var(--ease-out), color 240ms var(--ease-out);
}
.diary__cinema-cta:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
  gap: 14px;
}
.diary__cinema-cta-line {
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--color-accent);
}

/* ─── Tablet + below — collapse to single column (original mobile rules) ─── */
/* ── MOBILE / TABLET — single-column cinema ──────────────────────────
   On narrow viewports the zigzag rail collapses entirely. Each entry
   is a centered polaroid + body. The polaroid is sized at 62vw so the
   cinema scale (vw / polaroid_width ≈ 1.6×) still produces a
   meaningful zoom on small screens. Tilt is removed (cleaner for
   compact layouts), rail-line and dots are hidden, hover state dropped
   (no hover on touch). The cinema stage shrinks its padding and the
   topbar wraps. */
@media (max-width: 860px) {
  .diary { padding: var(--space-20) 0 var(--space-16); }
  /* SVG curvy path hidden on mobile — looks broken in a narrow column */
  .diary__path { display: none; }
  /* Center dashed rail stays visible — suits the single-column stack */

  .journal { gap: calc(var(--space-12) * 0.85); }

  .journal__entry-pin,
  .journal__entry--left  .journal__entry-pin,
  .journal__entry--right .journal__entry-pin {
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    padding: 0 var(--space-5);
    gap: var(--space-4);
  }
  /* Chapter number hidden — too large for narrow layouts */
  .journal__entry-pin > .journal__chapter { display: none; }
  /* Rail-marker dot: pull out of grid flow and pin it near the top of
     each sticky frame, centred on the dashed line. */
  .journal__entry-pin > .journal__rail-marker {
    position: absolute;
    left: 50%;
    top: var(--space-8);
    transform: translateX(-50%);
    grid-column: unset;
  }

  .journal__entry--left  .journal__entry-pin > .journal__card,
  .journal__entry--right .journal__entry-pin > .journal__card {
    grid-column: 1;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 480px;
  }

  /* Polaroid 62vw at rest, centered. Cinema scale = 100vw / 62vw ≈
     1.6× — meaningful zoom from card to immersive frame. */
  .journal__polaroid {
    width: 62vw;
    max-width: 320px;
    padding: 10px 10px 14px;
    margin: 0 auto;
    /* No tilt, no hover-lift on touch screens — keeps the cinema
       transform clean. */
    transform:
      translate3d(var(--cine-dx, 0px), var(--cine-dy, 0px), 0)
      scale(var(--cine-scale, 1));
  }
  .journal__card:hover { transform: none; }
  .journal__card:hover .journal__polaroid {
    transform:
      translate3d(var(--cine-dx, 0px), var(--cine-dy, 0px), 0)
      scale(var(--cine-scale, 1));
  }

  .journal__entry-body { max-width: 100%; padding: 0; }
  .journal__caption-text { font-size: 1rem; }

  /* Cinema stage: tighter padding, topbar wraps, smaller typography. */
  .diary__cinema-stage {
    inset: 3vh var(--space-5) 4vh;
  }
  .diary__cinema-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .diary__cinema-meta { font-size: 0.625rem; padding: 5px 12px; }
  .diary__cinema-date { font-size: 0.625rem; padding: 5px 12px; }
  .diary__cinema-title {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    max-width: 18ch;
  }
  .diary__cinema-caption {
    font-size: 1.05rem;
    max-width: 100%;
  }
  .diary__cinema-regions { gap: 4px; }
  .diary__cinema-region { font-size: 0.625rem; padding: 3px 8px 3px 5px; }
  .diary__cinema-cta { font-size: 0.8125rem; padding: 9px 16px; }

  /* Bottom tint slightly taller on mobile so it backs the title too. */
  .diary__cinema-tint { height: 65vh; }
}

@media (max-width: 540px) {
  /* Slightly smaller than tablet so the cinema scale stays > 1.5×
     even on small phones — keeps the open/close visibly cinematic. */
  .journal__polaroid { width: 64vw; max-width: 280px; }
  /* aspect-ratio intentionally NOT overridden here — the base rule
     interpolates 4:3 → view-aspect (portrait on phones ≈ 0.46) so the
     scaled photo fills the full viewport height at peak prog. */
  .diary__cinema-stage { inset: 2.5vh var(--space-4) 3vh; }
  .diary__cinema-title { font-size: clamp(1.4rem, 7vw, 2rem); }
  /* Pin gap tightens so polaroid + body fit comfortably in 100vh. */
  .journal__entry-pin { gap: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .journal__polaroid {
    transform: rotate(var(--tilt)) !important;
  }
  .diary__cinema-veil,
  .diary__cinema-photo,
  .diary__cinema-stage { display: none !important; }
}

/* Hide the auto-hide nav while the user is inside the diary section,
   regardless of scroll direction. Apple-product-page style: the cinema
   owns the entire viewport, no chrome. */
body.diary-active .site-header {
  opacity: 0 !important;
  transform: translateY(-100%) !important;
  pointer-events: none !important;
  transition: opacity 220ms var(--ease-out), transform 280ms var(--ease-out);
}