/* ─────────────────────────────────────────────────────────────────────────
   Oyestore's Almanac - An Oyestore Original
   Moodboard / scrapbook direction: hand-drawn doodles, tilted polaroids,
   sticker badges, neo-brutalist hard-shadow buttons. Two fonts, full stop.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --color-midnight: #00021e;
  --color-accent-red: #c8102e;
  --color-ember: #ff8a4c;
  --color-pearl: #f8f9fb;
  --color-platinum: #d9d9d9;
  --color-ink: #1a1330;

  /* Sticker / moodboard accent palette */
  --sticker-yellow: #ffd23f;
  --sticker-pink: #ff6fb0;
  --sticker-lime: #b6ff5c;
  --sticker-sky: #5fd8f9;

  --background: var(--color-midnight);
  --foreground: var(--color-pearl);
  --card: #0a1240;
  --muted-foreground: #9aa4c2;
  --glass-bg-dark: rgb(11 22 51 / 55%);
  --glass-border-dark: rgb(217 217 217 / 12%);
  --shadow-premium: 0 8px 32px rgb(0 3 41 / 30%), 0 0 0 1px rgb(217 217 217 / 8%);

  /* Two fonts. That's the whole system. */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "League Spartan", system-ui, sans-serif;

  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  min-height: 100dvh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-weight: 500;
  overflow-x: hidden;
}

a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: rgba(255, 138, 76, 0.35); }

/* ───────────────────────── Boot screen ───────────────────────── */

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  background: var(--color-midnight);
  opacity: 1;
  transition: opacity 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.boot-screen__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: boot-photo-in 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes boot-photo-in {
  from { transform: scale(1.18); opacity: 0; }
  to { transform: scale(1.08); opacity: 1; }
}

/* A bold color-blocked duotone over the photo - same "colorized poster"
   treatment as the rest of the site, instead of a moody film-still look. */
.boot-screen__duotone {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(200, 16, 46, 0.55) 0%, rgba(255, 138, 76, 0.4) 45%, rgba(255, 111, 176, 0.5) 100%);
  mix-blend-mode: color;
}

.boot-screen__halftone {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1.4px, transparent 1.6px);
  background-size: 12px 12px;
  mix-blend-mode: overlay;
}

.boot-screen__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 2, 20, 0.4) 0%, rgba(0, 2, 20, 0.2) 40%, rgba(0, 2, 20, 0.88) 100%);
}

.boot-screen__sunburst {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(120vw, 900px);
  height: min(120vw, 900px);
  color: rgba(255, 210, 130, 0.4);
  stroke-width: 2.5;
  animation: sunburst-spin 30s linear infinite;
}

.boot-screen__star {
  color: var(--sticker-yellow);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  animation: wiggle 2.4s ease-in-out infinite;
}

.boot-screen__star--1 { top: 16%; left: 12%; width: 30px; height: 30px; }
.boot-screen__star--2 { bottom: 22%; right: 14%; width: 22px; height: 22px; color: var(--sticker-pink); animation-delay: 0.6s; }

/* An easter egg, not a feature - a small turtle paddling through the boot
   screen for the ~2.6s it's on screen, never called out anywhere. */
.boot-screen__turtle {
  position: absolute;
  bottom: 14%;
  left: 8%;
  width: 34px;
  height: 30px;
  color: var(--sticker-sky);
  opacity: 0.6;
  animation: turtle-paddle 3.2s ease-in-out infinite;
}

@keyframes turtle-paddle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(14px) rotate(4deg); }
}

.boot-screen__sticker {
  position: absolute;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid var(--color-ink);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.boot-screen__sticker--1 { top: 12%; right: 10%; background: var(--sticker-yellow); rotate: -6deg; }
.boot-screen__sticker--2 { bottom: 18%; left: 9%; background: var(--sticker-sky); rotate: 5deg; }

@media (max-width: 560px) {
  .boot-screen__sticker,
  .boot-screen__star--1,
  .boot-screen__star--2,
  .boot-screen__turtle { display: none; }
}

.boot-screen__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  animation: boot-content-in 0.9s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes boot-content-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.boot-screen__logo-frame {
  padding: 8px;
  margin-bottom: 10px;
  background: var(--color-pearl);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--color-accent-red);
  rotate: -4deg;
}

.boot-screen__logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: block;
}

.boot-screen__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  line-height: 1;
  color: var(--color-pearl);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.boot-screen__wordmark-accent {
  background: linear-gradient(100deg, var(--sticker-yellow) 10%, var(--sticker-pink) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.boot-screen__status {
  margin: 6px 0 0;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  border: 2px solid var(--color-ink);
  background: var(--card);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-pearl);
}

.boot-screen__dots span {
  animation: boot-dot-pulse 1.4s infinite;
  opacity: 0.2;
  color: var(--color-ember);
}

.boot-screen__dots span:nth-child(2) { animation-delay: 0.2s; }
.boot-screen__dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes boot-dot-pulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

.boot-screen__bar {
  width: 150px;
  height: 8px;
  margin-top: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid var(--color-ink);
  overflow: hidden;
}

.boot-screen__bar span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sticker-yellow), var(--color-accent-red), var(--sticker-pink));
  transform: translateX(-100%);
  animation: boot-bar-fill 1.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes boot-bar-fill {
  to { transform: translateX(0%); }
}

/* Hide state - driven by JS adding this class once the intro has run its
   course. Fully opacity-driven so the fade is as smooth as possible, with
   pointer-events cut immediately so it never blocks a click mid-fade. */
.boot-screen--hide {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .boot-screen,
  .boot-screen__photo,
  .boot-screen__sunburst,
  .boot-screen__star,
  .boot-screen__content,
  .boot-screen__dots span,
  .boot-screen__bar span {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
}

/* .grain (a fixed, full-viewport feTurbulence noise texture at
   z-index: 200, above almost everything) used to live here as a subtle
   film-grain flourish. On real screens - especially dark OLED panels
   against this site's midnight background - the high-frequency static
   read as scattered dead/stuck pixels rather than texture, so it's
   gone. The <div class="grain"> markup is still in the HTML but is now
   inert with nothing to style it. */

/* ───────────────────────── Weather (real-time) ─────────────────────────
   A full-page effects layer that scripts.js fills in once the visitor's
   actual local weather comes back: rain genuinely falls, a clear sunny
   day gets a warm glow, autumn months shed leaves. Sits above the hero
   content but below the player/toast/modal/grain chrome, and does
   nothing at all - no request, no layer - if the lookup ever fails. */
/* z-index: 1 (not the player/toast/modal-chrome range this used to sit
   in) is deliberate - it needs to stay BELOW .hero__content (z-index: 2),
   .topbar (60) and .marquee (2), which are real positioned/z-indexed
   text layers, or the rain/cloud tint paints directly over the hero
   title and washes it out. It still sits above plain in-flow backgrounds,
   which is all it needs to read as "the whole page" getting weather. */
.weather-fx {
  /* Was position: fixed; inset: 0 - pinned to the viewport at every scroll
     position, so the rain/night speckles kept rendering over whatever
     section happened to be on screen, including the footer, reading as
     stray dead pixels there too. Anchoring to the top of the page and
     capping the height at one viewport confines it to the hero/opening
     screen, where it's actually meant to read as weather - it scrolls
     away naturally like any other content instead of following you down
     the page. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.weather-fx--rain {
  background: linear-gradient(180deg, rgba(90, 130, 180, 0.05), rgba(20, 30, 55, 0.12));
}

/* Straight-down, gradient-faded 1.5px marks read as static specks in
   any single frame - exactly like dead/stuck pixels - since a phone
   screenshot (or just a quick glance) never catches the actual motion.
   Slanting the streak to match its own fall direction is the standard
   trick for making CSS rain unmistakably read as rain rather than
   noise, even in a still frame. */
.weather-fx--rain .weather-fx__particle {
  position: absolute;
  top: -40px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(200deg, transparent, rgba(190, 220, 255, 0.85));
  animation: weather-rain-fall linear infinite;
}

@keyframes weather-rain-fall {
  from { transform: translate(0, -10vh) rotate(-14deg); }
  to { transform: translate(-18vh, 115vh) rotate(-14deg); }
}

.weather-fx--snow .weather-fx__particle {
  position: absolute;
  top: -12px;
  border-radius: 999px;
  background: #fff;
  animation: weather-snow-fall linear infinite;
}

@keyframes weather-snow-fall {
  0% { transform: translate(0, 0); }
  50% { transform: translate(18px, 55vh); }
  100% { transform: translate(-8px, 115vh); }
}

.weather-fx--leaves .weather-fx__particle {
  position: absolute;
  top: -30px;
  line-height: 1;
  animation: weather-leaf-fall linear infinite;
}

@keyframes weather-leaf-fall {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(var(--drift, 40px), 55vh) rotate(180deg); }
  100% { transform: translate(0, 115vh) rotate(360deg); }
}

.weather-fx--sun::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 200, 110, 0.28), rgba(255, 200, 110, 0) 70%);
  animation: weather-sun-breathe 6s ease-in-out infinite;
}

@keyframes weather-sun-breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* Overcast: a dim grey wash with a couple of soft, slow-drifting cloud
   blobs - distinct from .weather-fx--fog's tighter, whiter mist bands. */
.weather-fx--cloudy {
  background: linear-gradient(180deg, rgba(120, 130, 150, 0.1), rgba(60, 65, 80, 0.16));
}

.weather-fx--cloudy::before,
.weather-fx--cloudy::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(180, 190, 205, 0.18), transparent 70%);
  filter: blur(20px);
  animation: weather-cloud-drift linear infinite;
}
.weather-fx--cloudy::before { top: 8%; left: -30%; width: 70vw; height: 30vw; animation-duration: 90s; }
.weather-fx--cloudy::after { top: 30%; left: -50%; width: 90vw; height: 35vw; animation-duration: 130s; animation-delay: -40s; }

@keyframes weather-cloud-drift {
  from { transform: translateX(-10%); }
  to { transform: translateX(120vw); }
}

.weather-fx--fog::before,
.weather-fx--fog::after {
  content: "";
  position: absolute;
  left: -20%;
  width: 140%;
  height: 40%;
  background: linear-gradient(90deg, transparent, rgba(220, 225, 235, 0.16), transparent);
  filter: blur(2px);
  animation: weather-fog-drift 26s linear infinite;
}
.weather-fx--fog::before { top: 15%; animation-duration: 32s; }
.weather-fx--fog::after { top: 55%; animation-duration: 22s; animation-direction: reverse; }

@keyframes weather-fog-drift {
  from { transform: translateX(-10%); }
  to { transform: translateX(10%); }
}

.weather-fx--night .weather-fx__particle {
  position: absolute;
  border-radius: 999px;
  background: #fff;
  animation: weather-twinkle ease-in-out infinite;
}

@keyframes weather-twinkle {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .weather-fx--sun::before,
  .weather-fx--cloudy::before,
  .weather-fx--cloudy::after,
  .weather-fx--fog::before,
  .weather-fx--fog::after {
    animation: none;
  }
}

.halftone {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.4px, transparent 1.6px);
  background-size: 15px 15px;
}

.halftone--tr { top: -4%; right: -6%; width: 46vw; height: 46vw; border-radius: 999px; mask-image: radial-gradient(circle, black 40%, transparent 72%); }
.halftone--bl { bottom: -6%; left: -8%; width: 50vw; height: 50vw; border-radius: 999px; mask-image: radial-gradient(circle, black 40%, transparent 72%); }
.halftone--mid { top: 10%; left: 50%; translate: -50% 0; width: 70vw; height: 40vw; opacity: 0.3; mask-image: radial-gradient(ellipse, black 30%, transparent 70%); }

/* ───────────────────────── Shared bits ───────────────────────── */

.eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-ember);
}

.eyebrow--center { text-align: center; }

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0 0 22px;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  background: var(--glass-bg-dark);
  border: 1.5px solid var(--glass-border-dark);
  backdrop-filter: blur(16px);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--platinum);
  white-space: normal;
  text-align: left;
}

@media (min-width: 480px) {
  .badge-pill { font-size: 10.5px; letter-spacing: 0.08em; padding: 8px 16px 8px 11px; }
}

.badge-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-ember);
}

.section-title {
  position: relative;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: center;
  text-transform: lowercase;
}

/* The brand name itself, not the rest of a section-title's lowercase
   voice - "Oyestore" stays capitalized wherever it appears standalone,
   same as the topbar logo, the hero title and the boot screen. */
.section-title--brand {
  text-transform: none;
}

.wiggle {
  display: inline-block;
  animation: wiggle 2.4s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
}

.section-lede {
  max-width: 560px;
  margin: 0 auto 48px;
  text-align: center;
  color: var(--platinum);
  opacity: 0.82;
  line-height: 1.7;
}

.btn {
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid var(--color-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}

.btn--primary {
  background: var(--color-accent-red);
  border-color: var(--color-accent-red);
  color: var(--color-pearl);
  box-shadow: 4px 4px 0 var(--color-ink);
}

.btn--ghost {
  background: var(--color-pearl);
  color: var(--color-ink);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
}

.btn--outline {
  background: transparent;
  border-color: var(--glass-border-dark);
  color: var(--foreground);
  box-shadow: none;
}

.btn--outline:hover {
  border-color: var(--color-ember);
  color: var(--color-ember);
}

.btn--primary:active,
.btn--ghost:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--color-ink);
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ───────────────────────── Doodles & stickers ───────────────────────── */

.doodle {
  position: absolute;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Same hand-drawn line language as .doodle, but sits in normal flow --
   for functional little icons (pins, tags, masks) rather than decorative
   background flourishes. */
.stroke-icon {
  display: block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doodle--underline {
  position: static;
  width: 100%;
  height: 16px;
  margin-top: -6px;
  stroke: var(--color-ember);
  stroke-width: 6;
}

.sticker {
  position: absolute;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid var(--color-ink);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.sticker--shuffle { background: var(--sticker-yellow); }
.sticker--free { background: var(--sticker-lime); }

/* ───────────────────────── Topbar ───────────────────────── */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px clamp(14px, 4vw, 32px);
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
}

.topbar__counter {
  background: var(--glass-bg-dark);
  border: 1.5px solid var(--glass-border-dark);
  backdrop-filter: blur(16px);
}

.topbar__passport {
  border: 2px solid var(--color-ink);
  background: var(--sticker-yellow);
  color: var(--color-ink);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--color-ink);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}

.topbar__passport:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-ink); }
.topbar__passport:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--color-ink); }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.topbar__counter-label {
  font-family: var(--font-body);
  color: var(--muted-foreground);
  font-weight: 600;
}

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

.topbar__brand img { border-radius: 6px; }

.topbar__nav {
  display: none;
  align-items: center;
  gap: 22px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
}

.topbar__nav a {
  text-decoration: none;
  color: var(--platinum);
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.topbar__nav a:hover { opacity: 1; }

.topbar__cta {
  padding: 9px 15px;
  border-radius: 999px;
  border: 2px solid var(--color-ink);
  background: var(--color-accent-red);
  color: var(--color-pearl) !important;
  opacity: 1 !important;
  box-shadow: 3px 3px 0 var(--color-ink);
}

@media (min-width: 760px) {
  .topbar__nav { display: inline-flex; }
}

/* ───────────────────────── Hero ───────────────────────── */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 130px 20px 90px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, #170b3a 0%, transparent 60%),
    linear-gradient(180deg, #0b0424 0%, var(--color-midnight) 55%, #000114 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 660px;
}

.hero__content > .doodle--sunburst {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -55%;
  width: min(95vw, 640px);
  height: min(95vw, 640px);
  color: rgba(255, 173, 107, 0.22);
  stroke-width: 2.5;
  z-index: -1;
  filter: drop-shadow(0 0 10px rgba(255, 138, 76, 0.18));
  animation: sunburst-spin 60s linear infinite;
}

@keyframes sunburst-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

.hero__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--color-pearl);
}

.hero__title-line2 {
  position: relative;
  display: inline-block;
}

.hero__title-accent {
  background: linear-gradient(100deg, var(--color-ember) 10%, var(--sticker-pink) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__subtitle {
  margin: 0 0 36px;
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 600;
  color: var(--platinum);
  opacity: 0.9;
  line-height: 1.6;
}

.gimmick-row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.gimmick-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid var(--color-ink);
  background: var(--card);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--color-pearl);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--color-ink);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), background 0.15s ease, color 0.15s ease;
}

.gimmick-pill:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--color-ink);
}

.gimmick-pill:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--color-ink);
}

.gimmick-pill--yellow:hover { background: var(--sticker-yellow); color: var(--color-ink); }
.gimmick-pill--sky:hover { background: var(--sticker-sky); color: var(--color-ink); }
.gimmick-pill--pink { background: linear-gradient(120deg, var(--sticker-pink), var(--color-accent-red)); }
.gimmick-pill--pink:hover { background: linear-gradient(120deg, var(--sticker-pink), var(--color-accent-red)); filter: brightness(1.1); }
.gimmick-pill--lime:hover { background: var(--sticker-lime); color: var(--color-ink); }

/* ───────────────────────── Moodboard collage ───────────────────────── */

.collage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.polaroid {
  position: absolute;
  margin: 0;
  width: 92px;
  padding: 6px 6px 22px;
  background: #fbf8f2;
  border-radius: 5px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  color: var(--color-ink);
}

.polaroid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
}

.polaroid figcaption {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 7.5px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.01em;
}

.tape {
  position: absolute;
  top: -10px;
  left: 50%;
  translate: -50% 0;
  width: 42px;
  height: 18px;
  background: rgba(255, 210, 63, 0.65);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tape--2 { background: rgba(95, 216, 249, 0.6); rotate: 6deg; }
.tape--3 { background: rgba(182, 255, 92, 0.55); rotate: -4deg; }
.tape--4 { background: rgba(255, 111, 176, 0.6); rotate: 5deg; }

/* Mobile-first: the absolutely-positioned collage needs real gutter room to
   avoid fighting the centered text, so it only appears from 1000px up. Small
   screens get the .mini-scrapbook strip instead (real document flow, see below). */
.polaroid--1, .polaroid--2, .polaroid--3, .polaroid--4 { display: none; }

.doodle--star1 { display: none; top: 18px; right: 6%; width: 18px; height: 18px; color: var(--sticker-yellow); }
.doodle--star2 { display: none; }
.doodle--arrow1 { display: none; }
.doodle--circle1 { display: none; }

.sticker--shuffle, .sticker--free, .sticker--chai, .sticker--musafir { display: none; }
.doodle--steam, .doodle--chili { display: none; }
.doodle--umbrella, .doodle--cat, .doodle--dog { display: none; }

/* Small, safe, in-flow scrapbook strip for phones/tablets - no collage. */
.mini-scrapbook {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 0 0 26px;
}

.mini-scrapbook .polaroid {
  position: static;
  width: 64px;
  padding: 4px 4px 16px;
}

.mini-scrapbook .polaroid figcaption { font-size: 6.5px; }
.mini-scrapbook .polaroid:nth-child(1) { rotate: -6deg; }
.mini-scrapbook .polaroid:nth-child(2) { rotate: 4deg; margin-top: 10px; }
.mini-scrapbook .polaroid:nth-child(3) { rotate: -3deg; }

@media (min-width: 1000px) {
  .mini-scrapbook { display: none; }

  .polaroid--1, .polaroid--2, .polaroid--3, .polaroid--4 { display: block; }
  .polaroid { width: 168px; padding: 9px 9px 32px; }
  .polaroid figcaption { font-size: 10.5px; }

  /* These percentages are relative to the whole (viewport-height-driven)
     .hero box, so a fixed-size sticker/polaroid can drift into the fixed
     topbar or the marquee on very short or very tall windows -- the min()/
     max() pixel floors below keep a guaranteed clearance at either extreme
     while leaving the original percentage placement untouched for the
     window sizes it was actually designed around. */
  .polaroid--1 { top: max(16%, 150px); left: 5%; right: auto; rotate: -8deg; }
  .polaroid--2 { top: max(12%, 140px); right: 5%; left: auto; rotate: 7deg; }
  .polaroid--3 { bottom: max(20%, 230px); left: 7%; rotate: 6deg; }
  .polaroid--4 { bottom: max(24%, 230px); right: 6%; rotate: -7deg; }

  .doodle--arrow1 { display: block; width: 100px; height: 58px; top: 30%; left: 20%; color: var(--sticker-lime); }
  /* Sits dead-center behind the title on purpose (a compass guiding the
     "almanac"), but at full strength it crowded the text badly - faded
     way down so it reads as a faint watermark instead of competing
     with the gradient title for attention. */
  .doodle--circle1 { display: block; width: 240px; height: 130px; top: 44%; left: 50%; translate: -50% -46%; color: var(--color-ember); opacity: 0.16; }

  .doodle--star1 { display: block; top: max(10%, 100px); right: 26%; width: 30px; height: 30px; }
  .doodle--star2 { display: block; top: 46%; left: 16%; width: 24px; height: 24px; color: var(--sticker-pink); }

  .sticker--shuffle { display: inline-flex; top: max(8%, 100px); left: 27%; }
  .sticker--free { display: inline-flex; bottom: max(16%, 230px); right: 24%; }
  .sticker--musafir { display: inline-flex; bottom: max(6%, 230px); left: 30%; background: var(--sticker-pink); rotate: 3deg; }

  .doodle--steam { display: block; width: 20px; height: 40px; bottom: 30%; left: 24%; color: var(--sticker-sky); }
  .doodle--chili { display: block; width: 46px; height: 34px; top: 22%; left: 40%; color: var(--color-accent-red); rotate: -12deg; }

  /* The rest of the roadtrip-whimsy set - kept small, faint and tucked into
     the corners the polaroids/stickers above don't already claim, so they
     read as background texture rather than competing for attention. */
  .doodle--umbrella { display: block; width: 32px; height: 32px; bottom: max(36%, 260px); right: 9%; color: var(--sticker-pink); opacity: 0.5; rotate: 8deg; }
  .doodle--cat { display: block; width: 30px; height: 26px; bottom: max(9%, 120px); left: 19%; color: var(--platinum); opacity: 0.45; }
  .doodle--dog { display: block; width: 28px; height: 26px; top: max(15%, 150px); right: 16%; color: var(--platinum); opacity: 0.4; rotate: -6deg; }
}

/* The chai sticker needs its own wider threshold, not just 1000px like
   its neighbors. The hero's center column (badge/title/subtitle/buttons)
   runs nearly gapless top to bottom, so any placement beside it kept
   landing back inside the title or subtitle as the viewport narrowed --
   between roughly 1000-1399px there just isn't a gap wide enough for it
   next to both the title and the right-side polaroid column at once.
   Measured clear (title, both right polaroids) from 1400px up. */
@media (min-width: 1400px) {
  .sticker--chai {
    display: inline-flex;
    top: max(30%, 380px);
    right: 14%;
    left: auto;
    background: var(--color-ember);
    rotate: -4deg;
  }
}

/* ───────────────────────── Poster Wall ───────────────────────── */

.poster-wall {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 20px 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .poster-wall { grid-template-columns: repeat(3, 1fr); }
}

/* Each tile is now a small physical deck: 2-4 .poster-card faces stacked
   inside one .poster-stack, positioned purely by nth-child depth so a
   click just needs to move the front card to the end of the DOM order
   (script.js) - the CSS transition on transform/opacity does the rest,
   reading as the front card sinking back into the pile while the next
   one rises to meet it. Not a gimmick: every stack holds genuinely
   different facts, not the same card animating for show. */
.poster-stack {
  position: relative;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

.poster-stack:focus-visible {
  outline: 3px solid var(--color-pearl);
  outline-offset: 4px;
  border-radius: var(--radius-2xl);
}

.poster-stack--r1 { rotate: -3deg; }
.poster-stack--r2 { rotate: 2deg; }
.poster-stack--r3 { rotate: -1.5deg; }
.poster-stack--r4 { rotate: 2.5deg; }
.poster-stack--r5 { rotate: -2deg; }
.poster-stack--r6 { rotate: 1.5deg; }

.poster-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  border-radius: var(--radius-2xl);
  border: 3px solid var(--color-ink);
  box-shadow: 6px 6px 0 var(--color-ink);
  transition: transform 0.35s var(--ease-out), opacity 0.3s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.poster-stack:hover .poster-card:first-child {
  transform: translate(-3px, -3px) !important;
  box-shadow: 9px 9px 0 var(--color-ink);
}

.poster-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.16) 1.6px, transparent 1.8px);
  background-size: 10px 10px;
  pointer-events: none;
}

/* Depth by DOM position, not a data attribute - the click handler just
   appends the front card to the end, so these rules re-apply themselves
   automatically with no extra bookkeeping. */
.poster-card:nth-child(1) { z-index: 4; transform: translate(0, 0) rotate(0deg); opacity: 1; }
.poster-card:nth-child(2) { z-index: 3; transform: translate(5px, 7px) rotate(4deg); opacity: 0.95; }
.poster-card:nth-child(3) { z-index: 2; transform: translate(9px, 13px) rotate(-5deg); opacity: 0.85; }
.poster-card:nth-child(n+4) { z-index: 1; transform: translate(9px, 13px) rotate(-5deg); opacity: 0; }

.poster-card__hint {
  position: absolute;
  z-index: 1;
  bottom: 10px;
  right: 12px;
  font-size: 15px;
  opacity: 0.45;
}

.poster--red { background: var(--color-accent-red); color: var(--color-pearl); }
.poster--orange { background: var(--color-ember); color: var(--color-ink); }
.poster--yellow { background: var(--sticker-yellow); color: var(--color-ink); }
.poster--pink { background: var(--sticker-pink); color: var(--color-ink); }
.poster--sky { background: var(--sticker-sky); color: var(--color-ink); }
.poster--lime { background: var(--sticker-lime); color: var(--color-ink); }

.poster__eyebrow {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.75;
  text-transform: lowercase;
}

.poster__icon {
  position: relative;
  z-index: 1;
  font-size: 26px;
  line-height: 1;
}

.poster__headline {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 4vw, 1.6rem);
  line-height: 1.08;
  text-transform: lowercase;
}

.poster__sunburst {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.28);
  stroke-width: 3;
}

.poster__steam {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 22px;
  height: 40px;
  color: rgba(0, 0, 0, 0.25);
  opacity: 0.8;
}

/* ───────────────────────── Marquee ticker ───────────────────────── */

.marquee {
  position: relative;
  z-index: 2;
  margin-top: 44px;
  width: 100%;
  overflow: hidden;
  padding: 11px 0;
  background: linear-gradient(90deg, var(--color-accent-red), var(--color-ember));
  transform: rotate(-1.2deg) scale(1.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  border-top: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
}

.marquee__track {
  display: inline-flex;
  gap: 16px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--color-ink);
  animation: marquee-scroll 26s linear infinite;
  padding-left: 100%;
  text-transform: lowercase;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* ───────────────────────── Chapters showcase ───────────────────────── */

.chapters {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 90px 20px 40px;
}

.chapter-showcase {
  max-width: 880px;
  margin: 0 auto;
}

.chapter-card {
  position: relative;
  width: 100%;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  border: 3px solid var(--color-ink);
  box-shadow: 8px 8px 0 rgba(255, 138, 76, 0.35);
  aspect-ratio: 16 / 10;
  min-height: 320px;
}

.chapter-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ken-burns 22s ease-in-out infinite alternate;
}

@keyframes ken-burns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.14) translate(-1.5%, -1%); }
}


.chapter-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 2, 15, 0.05) 0%, rgba(0, 2, 15, 0.1) 38%, rgba(0, 2, 15, 0.92) 100%);
}

.chapter-card__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px;
  text-align: left;
}

.chapter-card__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-pearl);
}

.chapter-card__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  color: var(--color-pearl);
  text-transform: lowercase;
}

.chapter-card__tagline {
  margin: 0 0 18px;
  max-width: 420px;
  font-weight: 500;
  color: var(--platinum);
  opacity: 0.92;
  line-height: 1.55;
}

.chapter-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid var(--color-ink);
  background: var(--color-pearl);
  color: var(--color-ink) !important;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}

.chapter-card__cta:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3); }

.chapter-showcase__spin { display: block; margin: 26px auto 0; }

/* ── Spin: the slot-machine reel + grand reveal ─────────────────────────
   A "spin" is a rapid run through several random chapters (script.js
   swaps .chapter-card's contents on a timer that eases from fast to
   slow, like a real reel losing momentum), landing on the actual pick.
   These two states are the only visual language needed: a light shake
   while it's still deciding, and a bounce-in flourish the instant it
   lands - the reel itself does the suspense-building. */
.chapter-card--spinning {
  animation: chapter-card-shake 0.22s ease-in-out infinite;
}

@keyframes chapter-card-shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-2px, 1px) rotate(-0.4deg); }
  75% { transform: translate(2px, -1px) rotate(0.4deg); }
}

.chapter-card--reveal {
  animation: chapter-card-reveal 0.55s var(--ease-bounce);
}

@keyframes chapter-card-reveal {
  0% { transform: scale(0.94) rotate(-1deg); }
  55% { transform: scale(1.035) rotate(0.6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.dice-spin-icon { display: inline-block; }
.is-spinning .dice-spin-icon {
  animation: dice-spin-icon 0.5s linear infinite;
}

@keyframes dice-spin-icon {
  to { transform: rotate(360deg); }
}

/* The thought bubble - two trailing circles reading as "this card is
   thinking out loud," not a speech-bubble tail. Sits between the card
   and the spin button, only ever shown once a spin has actually landed. */
.chapter-reveal-bubble {
  position: relative;
  width: fit-content;
  max-width: 440px;
  margin: 34px auto 0;
  padding: 14px 22px;
  background: var(--color-pearl);
  color: var(--color-ink);
  border: 3px solid var(--color-ink);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--color-ink);
  text-align: center;
  transform: scale(0.8) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s var(--ease-bounce), opacity 0.25s ease;
}

.chapter-reveal-bubble.is-visible {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.chapter-reveal-bubble__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
}

.chapter-reveal-bubble::before,
.chapter-reveal-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  background: var(--color-pearl);
  border: 3px solid var(--color-ink);
  border-radius: 50%;
}

.chapter-reveal-bubble::before {
  top: -20px;
  width: 13px;
  height: 13px;
  transform: translateX(-50%);
}

.chapter-reveal-bubble::after {
  top: -31px;
  width: 7px;
  height: 7px;
  transform: translateX(calc(-50% - 11px));
}

.modal--chapter .chapter-reveal-bubble { margin: 18px auto 0; }

.modal--chapter {
  max-width: 560px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}

.modal--chapter .modal__close {
  z-index: 3;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
}

.modal--chapter .chapter-card { aspect-ratio: 4 / 5; }

.modal__actions--chapter { margin-top: 18px; justify-content: center; }

/* ───────────────────────── All Trips grid ───────────────────────── */

.trips {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 20px 90px;
}

@media (min-width: 1400px) {
  .trips { max-width: 1400px; }
}

/* Mobile: a swipeable horizontal carousel (each card peeks the next one)
   instead of a tall stack of full-height cards. Bleeds past the section's
   own 20px side padding so the peeking edge card reads as an intentional
   edge-to-edge scroller rather than a clipped grid. */
.trips-grid {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-left: -20px;
  margin-right: -20px;
  padding: 4px 20px 10px;
}

.trips-grid::-webkit-scrollbar { display: none; }

.trips-grid .trip-card {
  flex: 0 0 82%;
  max-width: 340px;
  scroll-snap-align: start;
}

/* >=640px: a real multi-column layout instead of the mobile carousel -
   but still flex, not grid. Grid's own last-row items stay pinned to the
   left track no matter how short that row is, which needs a different
   nth-child override hand-written per column-count/remainder combination
   (do that for 3 columns and a 4th card breaks it again). Flex-wrap with
   justify-content: center sidesteps all of that: it centers each *line*
   of wrapped items independently, so however many cards land on the
   final row - 1, 2, 3, whatever - that row is centered automatically,
   at every breakpoint, for any future chapter count. */
@media (min-width: 640px) {
  .trips-grid {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    scroll-snap-type: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  .trips-grid .trip-card { flex: 0 0 calc(50% - 8px); max-width: none; }
}

@media (min-width: 1000px) {
  .trips-grid .trip-card { flex-basis: calc((100% - 32px) / 3); }
}

/* Wide desktop: a single leftover card alone in a mostly-empty 3-column
   row reads as dead space on large monitors. Four columns turns that
   same 7-card catalog into a 4-then-3 split instead - both rows
   substantially full, and centered either way. */
@media (min-width: 1400px) {
  .trips-grid .trip-card { flex-basis: calc((100% - 48px) / 4); }
}

.trip-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 3px solid var(--color-ink);
  background: var(--card);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.trip-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 rgba(255, 138, 76, 0.4);
}

.trip-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.trip-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ken-burns 24s ease-in-out infinite alternate;
}

.trip-card__price {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid var(--color-ink);
  background: var(--sticker-yellow);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
}

.trip-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trip-card__state {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-ember);
}

.trip-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  text-transform: lowercase;
}

.trip-card__desc {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.trip-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.trip-card__tag {
  padding: 4px 9px;
  border-radius: 999px;
  border: 1.5px solid var(--glass-border-dark);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--platinum);
}

.trip-card__host {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--glass-border-dark);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--platinum);
}

.trip-card__host-tag {
  display: flex;
  align-items: center;
  gap: 5px;
}

.trip-card__host-tag .stroke-icon {
  color: var(--color-ember);
}

.trip-card__host img {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
  border: 1.5px solid var(--color-ink);
}

.trip-card__duration {
  margin-left: auto;
  color: var(--muted-foreground);
  font-weight: 600;
}

/* ───────────────────────── The Wall ─────────────────────────
   A pinboard for real trip photos, styled after the wall of pinned-up
   travel snapshots common in Indian homes -- a wooden noticeboard, a
   jute string, paper bunting, and sepia-toned photos "pinned" on with
   little push-pins. Everything is stored client-side only (localStorage,
   same as the Passport), so it's honestly framed as private to this
   device rather than a shared gallery. */

.wall {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 90px 20px 40px;
  text-align: center;
}

/* Another easter egg - a fish, because it's "the wall," not the ocean, and
   nobody asked why there's one swimming past the eyebrow text. */
.wall__fish {
  position: absolute;
  top: 26px;
  right: 6%;
  width: 44px;
  height: 24px;
  color: var(--sticker-sky);
  opacity: 0.5;
  rotate: -8deg;
  animation: fish-swim 4s ease-in-out infinite;
}

@keyframes fish-swim {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-16px) translateY(-6px); }
}

@media (max-width: 640px) {
  .wall__fish { display: none; }
}

.wall-board {
  position: relative;
  margin: 8px auto 28px;
  padding: 36px 24px 44px;
  border-radius: var(--radius-2xl);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 3px, transparent 3px 42px),
    linear-gradient(180deg, #7a4f2e 0%, #5c3b21 100%);
  border: 10px solid #2e1c10;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.wall-board__bunting {
  display: flex;
  justify-content: space-evenly;
  margin: -36px -24px 26px;
  padding-top: 6px;
}

.wall-board__bunting span {
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 16px solid var(--sticker-yellow);
  opacity: 0.9;
}

.wall-board__bunting span:nth-child(2) { border-top-color: var(--sticker-pink); }
.wall-board__bunting span:nth-child(3) { border-top-color: var(--sticker-sky); }
.wall-board__bunting span:nth-child(4) { border-top-color: var(--sticker-lime); }
.wall-board__bunting span:nth-child(5) { border-top-color: var(--color-accent-red); }
.wall-board__bunting span:nth-child(6) { border-top-color: var(--sticker-yellow); }
.wall-board__bunting span:nth-child(7) { border-top-color: var(--sticker-pink); }
.wall-board__bunting span:nth-child(8) { border-top-color: var(--sticker-sky); }

.wall-board__string {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 78px;
  height: 3px;
  background: repeating-linear-gradient(90deg, #c9a86a 0 8px, #a8875a 8px 10px);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.wall-board__photos {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px 14px;
  padding-top: 46px;
  min-height: 40px;
}

.wall-photo {
  position: relative;
  margin: 0;
  width: 118px;
  padding: 7px 7px 20px;
  background: #f2ecdf;
  border-radius: 3px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  rotate: var(--tilt, -3deg);
  transition: transform 0.2s var(--ease-out);
}

.wall-photo:hover { transform: translateY(-4px) rotate(0deg) scale(1.03); z-index: 2; }

.wall-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1px;
  filter: sepia(0.35) saturate(1.1) contrast(1.02);
}

.wall-photo__pin {
  position: absolute;
  top: -9px;
  left: 50%;
  translate: -50% 0;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ff8a4c, #c8102e 70%);
  border: 1.5px solid var(--color-ink);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.wall-photo__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.wall-photo:hover .wall-photo__remove,
.wall-photo:focus-within .wall-photo__remove { opacity: 1; }

@media (max-width: 560px) {
  /* No hover on touch -- always show the remove button, sized for a thumb. */
  .wall-photo__remove { opacity: 1; width: 22px; height: 22px; font-size: 12px; }
}

.wall-board__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 20px 10px;
  color: rgba(248, 249, 251, 0.75);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
}

.wall-board__empty svg { color: rgba(248, 249, 251, 0.5); }
.wall-board.has-photos .wall-board__empty { display: none; }
.wall-board:not(.has-photos) .wall-board__photos { display: none; }

.wall-upload {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.wall-hint {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--muted-foreground);
}

/* ───────────────────────── About ───────────────────────── */

.about, .faq {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 90px 20px;
}

.feature-grid {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  text-align: left;
}

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

.feature-card {
  padding: 24px;
  border-radius: var(--radius-2xl);
  background: var(--card);
  border: 2px solid var(--color-ink);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.2s var(--ease-out);
}

.feature-card:hover { transform: translate(-3px, -3px); }

.feature-card--yellow { box-shadow: 5px 5px 0 var(--sticker-yellow); }
.feature-card--pink { box-shadow: 5px 5px 0 var(--sticker-pink); }
.feature-card--sky { box-shadow: 5px 5px 0 var(--sticker-sky); }

.feature-card__icon { font-size: 26px; }

.feature-card h3 {
  margin: 14px 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-transform: lowercase;
}

.feature-card p {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.accordion {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.accordion__item {
  padding: 16px 20px;
  border-radius: var(--radius-xl);
  background: var(--card);
  border: 2px solid var(--glass-border-dark);
}

.accordion__item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  list-style: none;
}

.accordion__item summary::-webkit-details-marker { display: none; }

.accordion__item summary::after {
  content: "+";
  float: right;
  color: var(--color-ember);
  font-weight: 800;
}

.accordion__item[open] summary::after { content: "–"; }

.accordion__item p {
  margin: 12px 0 0;
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.accordion__item a { color: var(--color-pearl); text-decoration: underline; }

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

.site-footer {
  position: relative;
  /* 210px of bottom padding (versus the fixed player's ~54-90px real
     footprint) was leaving a huge dead gap below the actual footer
     content on every device where the player sits collapsed - which is
     the default on mobile. Trimmed to just enough to keep the last line
     clear of the floating player, not clear a panel three times its size. */
  padding: 40px 20px 100px;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.8;
  border-top: 2px dashed var(--glass-border-dark);
}

.site-footer__logo { border-radius: 6px; margin: 0 auto 14px; opacity: 0.85; }

/* A crab hiding at the bottom of the footer - the one easter egg that
   actually reacts if you find it and hover it. */
.site-footer__crab {
  position: absolute;
  bottom: 14px;
  left: 18px;
  width: 26px;
  height: 19px;
  color: var(--muted-foreground);
  opacity: 0.45;
  transition: transform 0.3s var(--ease-out), opacity 0.3s ease, color 0.3s ease;
}

.site-footer__crab:hover {
  transform: translateX(10px) rotate(-6deg);
  opacity: 0.9;
  color: var(--color-accent-red);
  cursor: default;
}

@media (max-width: 640px) {
  .site-footer__crab { display: none; }
}
.site-footer a { color: var(--platinum); }
.site-footer__disclaimer { max-width: 520px; margin: 0 auto; opacity: 0.75; }

.site-footer__link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-pearl) !important;
}

/* ───────────────────────── Music Player ───────────────────────── */

/* The real YouTube player lives here - kept tiny rather than display:none
   (which YouTube throttles/pauses) AND kept inside the actual viewport
   rather than shoved off-canvas with a huge negative offset: YouTube's
   player also pauses itself once it judges the iframe isn't visible on
   screen, and a -9999px offset reads as "not visible" just as surely as
   display:none does. Sitting in the corner at 2x2px, under everything
   else, threads that needle. Our own controls + the album-art tile below
   are the only visible player UI. */
.yt-holder {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  overflow: hidden;
  z-index: -1;
}

.player {
  position: fixed;
  z-index: 70;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
  display: flex;
  justify-content: center;
}

@media (min-width: 720px) {
  .player { left: auto; right: max(24px, env(safe-area-inset-right)); }
}

/* ── The seal ─────────────────────────────────────────────────────────
   A little cartoon seal that peeps its head up out of the water above
   the player, has a look around, and sinks back under - on a loop.
   .seal-wrap sits on .player itself (position: absolute, bottom: 100%)
   so the whole rig stays glued to the top edge of whichever state the
   player's in - the collapsed FAB or the full panel - without separate
   coordinates for each.

   Only the head ever actually surfaces: .seal-wrap's clip-path clips
   everything below its own bottom edge (the wave line) while leaving the
   top completely open, and the peep's peak translateY only lifts the
   seal enough to clear its own head - the body/belly stay clipped off
   underwater the entire time. */
.seal-wrap {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
  width: 84px;
  height: 5px;
  clip-path: inset(-400% -400% 0 -400%);
  pointer-events: none;
}

.seal-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  fill: none;
  stroke: var(--sticker-sky);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.7;
}

.seal {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: 58px;
  height: 55px;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
  animation: seal-peep 6s ease-in-out infinite;
}

@media (min-width: 720px) {
  .seal-wrap { width: 96px; }
  .seal { width: 66px; height: 63px; }
}

@keyframes seal-peep {
  0%, 58% { transform: translateY(64px) rotate(0deg); }
  68% { transform: translateY(40px) rotate(-4deg); }
  76% { transform: translateY(38px) rotate(5deg); }
  84% { transform: translateY(40px) rotate(-3deg); }
  94% { transform: translateY(64px) rotate(0deg); }
  100% { transform: translateY(64px) rotate(0deg); }
}

.seal__body { fill: #8f93a3; }
.seal__belly { fill: #e6e2da; }
.seal__spot { fill: #5c6070; }
.seal__nose { fill: #1c1c22; }
.seal__mouth { fill: #ff97ab; stroke: #1c1c22; stroke-width: 1.2; stroke-linejoin: round; }
.seal__sclera { fill: #fdfdfd; }
.seal__iris { fill: #3fa9e0; }
.seal__pupil { fill: #1c1c22; }
.seal__glint { fill: #ffffff; }

.seal__brow, .seal__whiskers {
  fill: none;
  stroke: #5c6070;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .seal { animation: none; transform: translateY(40px); }
}

.player__fab {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 3px solid #6b7178;
  background: radial-gradient(circle at 32% 28%, #454b54 0%, #1c1e22 72%);
  box-shadow:
    4px 4px 0 var(--color-ink),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -3px 6px rgba(0, 0, 0, 0.55);
  font-size: 20px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player__fab-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 138, 76, 0.32);
  animation: ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  0% { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(1.7); opacity: 0; }
}

/* The "now playing" indicator is a little hand-drawn gramophone -- the
   turntable disc spins while a track is actually playing, echoing the
   almanac/vintage-scrapbook theme instead of a generic equalizer. */
.player__gramophone {
  display: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--sticker-yellow);
  filter: drop-shadow(0 0 3px rgba(255, 210, 63, 0.45));
}

.player--playing .player__gramophone { display: block; }
.player--playing #player-fab-icon { display: none; }

.player__gramophone--fab { width: 22px; height: 22px; }

.player__gramophone-disc {
  transform-box: fill-box;
  transform-origin: center;
}

.player--playing .player__gramophone-disc {
  animation: gramophone-spin 2.4s linear infinite;
}

@keyframes gramophone-spin {
  to { transform: rotate(360deg); }
}

/* Old-car-dashboard fascia: brushed-metal panel, chrome rivets pinning
   the corners, a recessed odometer-style readout, and amber "idiot
   light" accents standing in for the glow of dashboard instruments. */
.player__panel {
  width: 100%;
  max-width: 380px;
  padding: 14px;
  border-radius: var(--radius-2xl);
  position: relative;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 4px),
    linear-gradient(160deg, #3a3f47 0%, #24272d 45%, #15171b 100%);
  border: 2px solid #5b616a;
  box-shadow:
    5px 5px 0 rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5);
}

.player__panel::before,
.player__panel::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #e4e7ea, #6b7178 75%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.player__panel::before { left: 9px; }
.player__panel::after { right: 9px; }

.player__row { display: flex; align-items: center; gap: 12px; }

/* The album-art tile becomes a chrome-rimmed instrument dial housing the
   gramophone needle. */
.player__art {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 34% 28%, #363a41 0%, #121316 78%);
  border: 3px solid #6b7178;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.7),
    inset 0 -1px 2px rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.player__meta {
  min-width: 0;
  flex: 1;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.player__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--sticker-yellow);
  text-shadow: 0 0 6px rgba(255, 210, 63, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__credits {
  margin: 3px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(154, 164, 194, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__icon-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1.5px solid #4d525a;
  background: linear-gradient(180deg, #33373e 0%, #1a1c20 100%);
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  line-height: 1;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.45);
}

.player__icon-btn:hover { color: var(--foreground); }

/* Autoplay always starts muted (the only autoplay browsers reliably
   allow), and silently detecting whether a visitor's browser actually
   let a follow-up unmute through turned out not to be reliable - so
   instead of chasing invisible auto-unmute, the mute button visibly
   asks for a tap: an amber sonar pulse until it's pressed. */
.player--needs-sound-tap #player-mute {
  color: var(--sticker-yellow);
  border-color: var(--sticker-yellow);
  animation: needs-sound-pulse 1.6s ease-in-out infinite;
}

@keyframes needs-sound-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(255, 210, 63, 0); }
}

/* Prev/next read as rectangular chrome toggle switches on the fascia. */
.player__icon-btn--lg {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--sticker-sky);
  background: linear-gradient(180deg, #3d424a 0%, #1c1e22 100%);
  border: 1.5px solid #585d65;
}

.player__icon-btn--lg:hover {
  color: var(--sticker-sky);
  background: linear-gradient(180deg, #454b54 0%, #202226 100%);
}

.player__icon-btn--lg:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.player__seek-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

.player__time {
  flex-shrink: 0;
  width: 32px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-display);
  color: rgba(255, 205, 110, 0.8);
  font-variant-numeric: tabular-nums;
}

#player-duration { text-align: left; }
#player-current { text-align: right; }

/* Seek track sits in a recessed groove, like an odometer slot, with a
   glowing amber "idiot light" thumb. */
.player__seek {
  flex: 1;
  height: 5px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  cursor: pointer;
  accent-color: var(--color-ember);
}

.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ffe27a, var(--color-ember) 75%);
  box-shadow: 0 0 6px 1px rgba(255, 180, 60, 0.65), 0 1px 2px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.player__transport { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 26px; }

/* The play button becomes the dashboard's big chrome ignition/power knob. */
.player__play {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 3px solid #6b7178;
  background: radial-gradient(circle at 33% 28%, #4a4f57 0%, #1a1c20 78%);
  color: var(--sticker-yellow);
  text-shadow: 0 0 6px rgba(255, 210, 63, 0.4);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    3px 3px 0 var(--color-ink),
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -3px 6px rgba(0, 0, 0, 0.55);
}

.player__play:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--color-ink), inset 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* ───────────────────────── Modals ───────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 2, 15, 0.72);
  backdrop-filter: blur(8px);
  animation: fade-in 0.2s ease;
}

.modal-backdrop[hidden] { display: none; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 30px 24px 24px;
  border-radius: var(--radius-2xl);
  background: var(--card);
  border: 3px solid var(--color-ink);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.4);
  text-align: center;
  animation: modal-in 0.25s var(--ease-bounce);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal--yellow {
  position: relative;
  overflow: hidden;
  background: var(--sticker-yellow);
  border-color: var(--color-ink);
  box-shadow: 8px 8px 0 var(--color-accent-red);
}

.modal--yellow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.14) 1.6px, transparent 1.8px);
  background-size: 11px 11px;
  pointer-events: none;
}

.modal--yellow .modal__eyebrow,
.modal--yellow .modal__headline,
.modal--yellow .modal__quote {
  position: relative;
  z-index: 1;
  color: var(--color-ink);
}

.modal--yellow .modal__close { color: rgba(0, 0, 0, 0.5); }
.modal--yellow .modal__close:hover { color: var(--color-ink); }
.modal--yellow .btn--ghost { background: rgba(0, 0, 0, 0.08); }

/* Two of the packable things everyone forgets, tucked into the corners of
   the "did you forget..." modal itself - not pointed to, just there. */
.modal__doodle { position: absolute; color: rgba(0, 0, 0, 0.16); }
.modal__doodle--sunscreen { width: 34px; height: 46px; bottom: 14px; left: 16px; rotate: -8deg; }
.modal__doodle--toothbrush { width: 60px; height: 17px; top: 20px; right: -6px; rotate: 10deg; }
.modal--notes { max-width: 720px; text-align: left; }

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 16px;
  cursor: pointer;
}

.modal__close:hover { color: var(--foreground); }

/* ───────────────────────── Trip Detail "Magazine" ─────────────────────────
   A symmetric, book-like spread instead of one long scrolling column: three
   pages (cover / the chapter / spots & booking), turned with arrows, dots,
   a swipe, or the arrow keys - the way you'd actually flip through a
   magazine, not a decorative page-curl for its own sake. */

.modal--trip {
  max-width: 800px;
  height: min(86vh, 720px);
  padding: 0;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* #trip-detail-body is just the plain div script.js's innerHTML lands in -
   .trip-book's own `flex: 1` only means anything once ITS parent is a flex
   container too, otherwise the book sits at its content height and leaves
   dead space below it inside the taller fixed-height card. */
.modal--trip #trip-detail-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.modal--trip .modal__close {
  top: 16px;
  right: 16px;
  z-index: 4;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 2, 15, 0.55);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: var(--color-pearl);
  font-size: 14px;
  transition: background 0.2s var(--ease-out);
}
.modal--trip .modal__close:hover { background: rgba(0, 2, 15, 0.82); color: var(--color-pearl); }

.trip-book {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.trip-book__viewport {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.trip-book__track {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.5s var(--ease-out);
}

.trip-book__page {
  flex: 0 0 calc(100% / 3);
  width: calc(100% / 3);
  /* Flex items default to min-width: auto, which refuses to shrink below
     the content's intrinsic width - without this a long itinerary or route
     line pushes a page wider than its 33.33% share and the whole three-page
     strip drifts out of alignment with the arrows/dots. */
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The one consistent "this is a spread, not a form" cue: a soft printed
   gutter down the middle of any two-column page. */
.trip-book__page--split {
  display: grid;
  /* minmax(0, 1fr), not 1fr - grid tracks have the same min-width: auto
     default as flex items, and this page sits inside an already-narrow
     33.33%-wide flex item, so both column and page need the override. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  position: relative;
}

/* The chapter page adds a second row (the "still wish to know more?"
   button) below the two itinerary columns. Grid's default align-content
   stretches ALL row tracks to fill any leftover vertical space, which blew
   the button's row up to fill most of the page and stretched the button
   itself (align-items: stretch above) into a huge oval. Packing rows at the
   top instead leaves the columns exactly as tall as their content and the
   button a normal size, with any leftover space simply left below both. */
.trip-book__page--chapter {
  align-content: start;
}

.trip-book__page--split::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--glass-border-dark) 20%, var(--glass-border-dark) 80%, transparent);
  pointer-events: none;
}

/* ── Page 1 · Cover ── */

.trip-book__cover-photo {
  position: relative;
  overflow: hidden;
}

.trip-book__cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ken-burns 20s ease-in-out infinite alternate;
}

.trip-book__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 2, 15, 0.45);
  backdrop-filter: blur(10px);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-pearl);
}

.trip-book__cover-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 28px 44px 28px 28px;
  min-width: 0;
}

.trip-book__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ember);
}

.trip-book__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--color-pearl);
  text-transform: lowercase;
}

.trip-book__tagline {
  margin: 0;
  color: var(--platinum);
  font-weight: 500;
  font-size: 13.5px;
  max-width: 30ch;
}

.trip-book__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
}

.trip-book__stats div {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--glass-border-dark);
  background: rgba(255, 255, 255, 0.04);
}

.trip-book__stat-icon {
  width: 14px;
  height: 14px;
  color: var(--color-ember);
}

.trip-book__stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--sticker-sky);
}

.trip-book__stat-dot--status {
  background: var(--color-accent-red);
  animation: boot-dot-pulse 1.4s infinite;
}

.trip-book__host {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 12px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--glass-border-dark);
  text-align: left;
}

.trip-book__host-mystery {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sticker-pink), var(--color-accent-red));
  border: 2px solid var(--color-ink);
  color: var(--color-pearl);
}

.trip-book__host-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: lowercase;
}

.trip-book__verified {
  color: #4ade80;
  font-size: 10.5px;
  text-transform: none;
}

.trip-book__host-tagline {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-foreground);
}

/* Secondary WhatsApp buttons on the cover and chapter pages - deliberately
   quieter than the primary red "book now" on the last page, since these are
   "still deciding" moments, not the booking moment. Each one carries its own
   message (see WHATSAPP_INTENTS in script.js) so whoever answers on
   Oyestore's side knows what stage the visitor was at without having to ask. */
.trip-book__talk-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-width: 260px;
  margin-top: 4px;
  text-align: center;
  text-decoration: none;
}

.trip-book__talk-cta--span {
  grid-column: 1 / -1;
  max-width: 320px;
  margin: 4px auto 0;
}

/* ── Page 2 · The Chapter ── */

.trip-book__col {
  padding: 26px 30px;
  min-width: 0;
}

.trip-book__col--continued { padding-left: 32px; }

.trip-book__section-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  text-transform: lowercase;
  color: var(--color-ember);
}

.trip-book__continued {
  margin: 0 0 14px;
  font-size: 11px;
  font-style: italic;
  text-align: center;
  color: var(--muted-foreground);
}

.trip-book__itinerary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trip-book__day {
  display: flex;
  gap: 10px;
}

.trip-book__day-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-accent-red);
  color: var(--color-pearl);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
}

.trip-book__day-title {
  margin: 2px 0 2px;
  font-weight: 700;
  font-size: 12.5px;
}

.trip-book__day-desc {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted-foreground);
  line-height: 1.55;
}

/* ── Page 3 · Spots & booking ── */

.trip-book__page--single {
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trip-book__page--single .trip-book__section-title { margin-bottom: 16px; }

.trip-book__spots {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  width: 100%;
}

@media (min-width: 480px) {
  .trip-book__spots { grid-template-columns: 1fr 1fr; }

  /* An odd card count leaves one spot alone on the last row -- center it
     instead of letting it hug the left edge. */
  .trip-book__spots > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 5px);
    margin: 0 auto;
  }
}

.trip-book__spot {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: rgba(255, 138, 76, 0.08);
  border: 1.5px dashed rgba(255, 138, 76, 0.3);
  text-align: left;
}

.trip-book__spot-icon {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--color-ember);
  flex-shrink: 0;
}

.trip-book__spot-name {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 12.5px;
}

.trip-book__spot-desc {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.trip-book__cta {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 24px auto 4px;
  text-align: center;
  text-decoration: none;
}

.trip-book__fine-print {
  display: block;
  margin: 12px auto 0;
  text-align: center;
  font-size: 11px;
  color: var(--muted-foreground);
  text-decoration: underline;
}
.trip-book__fine-print:hover { color: var(--color-ember); }

/* ── Turning the pages ── */

.trip-book__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 2, 15, 0.5);
  backdrop-filter: blur(6px);
  color: var(--color-pearl);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.trip-book__arrow:hover { background: rgba(0, 2, 15, 0.82); transform: translateY(-50%) scale(1.06); }
.trip-book__arrow--prev { left: 12px; }
.trip-book__arrow--next { right: 12px; }
.trip-book__arrow.is-disabled { opacity: 0.28; pointer-events: none; }

@media (max-width: 640px) {
  .trip-book__arrow { display: none; }
}

.trip-book__dots {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  border-top: 1.5px solid var(--glass-border-dark);
  background: rgba(255, 255, 255, 0.02);
}

.trip-book__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(217, 217, 217, 0.25);
  cursor: pointer;
  transition: width 0.25s var(--ease-out), background 0.25s var(--ease-out);
}

.trip-book__dot.is-active {
  width: 22px;
  background: var(--color-ember);
}

@media (max-width: 640px) {
  .modal--trip { height: min(92vh, 780px); max-width: 100%; }

  .trip-book__page--split {
    display: flex;
    flex-direction: column;
  }
  .trip-book__page--split::before { display: none; }

  .trip-book__cover-photo { height: 210px; flex-shrink: 0; }
  .trip-book__cover-info { padding: 24px 24px; }

  .trip-book__col, .trip-book__col--continued { padding: 22px 22px; }
  .trip-book__page--single { padding: 26px 22px; }
}


.modal__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-ember);
}

.modal__headline {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  text-transform: lowercase;
}

.modal__quote {
  margin: 0 0 22px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--platinum);
}

.modal__hint {
  margin: -6px 0 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.modal__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.sticky-board { display: grid; gap: 14px; grid-template-columns: 1fr; }

@media (min-width: 560px) {
  .sticky-board { grid-template-columns: 1fr 1fr; }
}

.sticky-note {
  padding: 16px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: #241a05;
  outline: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transform: rotate(var(--tilt, -1deg));
}

.sticky-note strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
}

.sticky-note ol, .sticky-note ul { margin: 0; padding-left: 18px; }
.sticky-note p { margin: 0; }

.sticky-note--yellow { background: var(--sticker-yellow); --tilt: -1.4deg; }
.sticky-note--pink { background: var(--sticker-pink); --tilt: 1deg; }
.sticky-note--blue { background: var(--sticker-sky); --tilt: -0.6deg; }
.sticky-note--green { background: var(--sticker-lime); --tilt: 1.6deg; }

/* ───────────────────────── Oyestore Passport ───────────────────────── */

.modal--passport { max-width: 460px; text-align: left; }
.modal--passport .modal__eyebrow,
.modal--passport .modal__headline,
.modal--passport .modal__hint { text-align: center; }

.passport-summary {
  margin: 18px 0 6px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, rgba(255, 138, 76, 0.16), rgba(255, 111, 176, 0.12));
  border: 2px solid var(--color-ink);
}

.passport-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.passport-summary__rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}

.passport-summary__streak {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-ember);
}

.passport-bar-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid var(--color-ink);
  overflow: hidden;
}

.passport-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent-red), var(--color-ember));
  transition: width 0.5s var(--ease-out);
}

.passport-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-foreground);
}

.stamp-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

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

.stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: var(--radius-lg);
  border: 2px dashed var(--glass-border-dark);
  text-align: center;
  opacity: 0.55;
}

.stamp__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 16px;
}

.stamp__label {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
}

/* Unlocked = an actual postage stamp: a perforated edge (a thick dotted
   border drawn in the surrounding background color "punches" circular
   notches into the fill, the classic CSS trick for this) instead of a
   plain rounded sticker. */
.stamp--unlocked {
  opacity: 1;
  position: relative;
  border-radius: 3px;
  border: 5px dotted var(--card);
  background: var(--sticker-yellow);
  color: var(--color-ink);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
  transform: rotate(-3deg);
}

.stamp--unlocked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.stamp--unlocked:nth-child(4n+2) { background: var(--sticker-pink); rotate: 3deg; }
.stamp--unlocked:nth-child(4n+3) { background: var(--sticker-sky); rotate: -2deg; }
.stamp--unlocked:nth-child(4n+4) { background: var(--sticker-lime); rotate: 2deg; }
.stamp--unlocked .stamp__icon { background: rgba(0, 0, 0, 0.08); }

/* ───────────────────────── Toast ───────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(90px, calc(env(safe-area-inset-bottom) + 90px));
  translate: -50% 0;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--card);
  border: 2px solid var(--color-ink);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
}

.toast[hidden] { display: none; }

.toast--xp { border-color: var(--color-ember); color: var(--color-ember); }
.toast--stamp { border-color: var(--sticker-yellow); background: var(--sticker-yellow); color: var(--color-ink); }

/* ───────────────────────── Motion & accessibility ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track, .dot, .player__fab-ring, .player__gramophone-disc,
  .chapter-card__photo, .trip-card__photo, .trip-book__cover-photo img, .wiggle,
  .hero__content > .doodle--sunburst, .player--needs-sound-tap #player-mute {
    animation: none !important;
    transition: none !important;
  }
  .trip-book__track { transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ───────────────────────── Footer legal/contact links ───────────────────────── */

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
}

.site-footer__links a {
  text-decoration: none;
  color: var(--platinum);
  opacity: 0.8;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.site-footer__links a:hover { opacity: 1; color: var(--color-ember); }

.site-footer__copyright {
  margin: 16px 0 0;
  font-size: 11px;
  opacity: 0.5;
}

/* ───────────────────────── Legal pages (terms/privacy) ───────────────────────── */

.legal-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px clamp(14px, 4vw, 32px);
  border-bottom: 1px dashed var(--glass-border-dark);
}

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 20px 40px;
}

.legal__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-ember);
  text-align: center;
}

.legal__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  text-align: center;
  text-transform: lowercase;
}

.legal__updated {
  margin: 0 0 44px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted-foreground);
}

.legal__body h2 {
  margin: 36px 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-ember);
}

.legal__body h2:first-child { margin-top: 0; }

.legal__body p, .legal__body li {
  margin: 0 0 14px;
  color: var(--platinum);
  opacity: 0.9;
  line-height: 1.7;
  font-size: 14.5px;
}

.legal__body ul { padding-left: 20px; margin: 0 0 14px; }
.legal__body a { color: var(--color-pearl); text-decoration: underline; }

.legal__note {
  margin-top: 40px;
  padding: 16px 18px;
  border-radius: var(--radius-xl);
  background: var(--card);
  border: 1.5px solid var(--glass-border-dark);
  font-size: 13px;
  color: var(--muted-foreground);
  line-height: 1.7;
}