/* Layout: bright Hindi travel poster. Hero = flat sunny colour that changes with each photo in a
   swipeable stack of white-framed prints. Journey = winding road down the page; a red car drives along it
   as you scroll, past 16 stops, Indian milestones and a green highway board. Closing = sunny band.
   Playful offset shadows on badges and buttons instead of glass and blur.
   Single bright theme by choice: every colour is set explicitly. */
:root {
  --paper: #FFFEFB;
  --ink: #1E1B16;
  --ink-soft: #5E574D;
  --line: #ECE6DC;
  --sun: #FFD43B;
  --orange: #F76707;
  --orange-deep: #C2410C;
  --red: #E03131;
  --hwy: #0F6B3E;
  --asphalt: #37332E;
  --white: #FFFFFF;
  --display: 'Kalam', 'Nirmala UI', 'Kohinoor Devanagari', 'Segoe UI', sans-serif;
  --body: 'Kalam', 'Nirmala UI', 'Kohinoor Devanagari', 'Segoe UI', sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 10px; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--sun);
  color: var(--ink);
  transition: background-color 0.6s ease;
}
.blob { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.4); pointer-events: none; }
.blob.b1 { width: 340px; height: 340px; right: -110px; top: -120px; }
.blob.b2 { width: 180px; height: 180px; left: -70px; top: 46%; background: rgba(255,255,255,0.28); }
.hero-in {
  position: relative; z-index: 1;
  display: grid; gap: 22px; justify-items: center; text-align: center;
  padding-block: 26px 76px;
}
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }

.brand {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0;
  padding: 8px 22px 6px;
  border-radius: 16px;
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.brand-top { font-weight: 700; font-size: 0.95rem; line-height: 1.3; color: var(--ink-soft); }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.35; color: var(--orange-deep); }

.hero h1 { font-size: clamp(3rem, 14.5vw, 6rem); font-weight: 700; line-height: 1.25; }
.hero h1 em {
  font-style: normal;
  display: inline-block;
  padding: 0 0.22em;
  margin-top: 6px;
  border-radius: 14px;
  background: var(--white);
  color: var(--orange-deep);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-2deg);
}
.sub { font-size: 1.12rem; line-height: 1.55; color: #3D3830; max-width: 30ch; }

.stage { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; width: 100%; }
.stack { position: relative; width: min(68vw, 300px); aspect-ratio: 4 / 5; max-width: 100%; touch-action: pan-y; }
.card {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column;
  padding: 9px 9px 0;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 18px 32px -18px rgba(30,27,22,0.55), 0 0 0 1px rgba(30,27,22,0.08);
  transform-origin: 50% 90%;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.5s ease;
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.card:active { cursor: grabbing; }
.card .pic { flex: 1; min-height: 0; border-radius: 12px; overflow: hidden; background: #DDD6CA; }
.card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.card figcaption { padding: 8px 4px 10px; text-align: left; display: flex; flex-direction: column; line-height: 1.3; }
.card figcaption b { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.card figcaption span { font-size: 0.88rem; color: var(--ink-soft); }
.card:nth-child(1) { z-index: 19; }
.card:nth-child(2) { z-index: 18; transform: translateY(14px) scale(0.94) rotate(-4deg); }
.card:nth-child(3) { z-index: 17; transform: translateY(26px) scale(0.88) rotate(4deg); }
.card:nth-child(n+4) { z-index: 1; transform: translateY(36px) scale(0.84); opacity: 0; }

.stack-ui { display: flex; align-items: center; gap: 16px; padding-top: 22px; }
.round {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.round:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.round svg { width: 20px; height: 20px; }
.hint { display: flex; flex-direction: column; align-items: center; min-width: 116px; line-height: 1.3; }
.hint b { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.hint span { font-size: 0.92rem; color: #3D3830; }

.cue {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.05rem;
  color: var(--white); background: var(--ink);
  padding: 12px 24px; border-radius: 999px;
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(30,27,22,0.25);
}
.cue svg { width: 18px; height: 18px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }

.wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 46px; display: block; }

/* ---------- Journey ---------- */
.journey { position: relative; background: var(--j-bg, #E9F6FF); transition: background 0.3s linear; }
.j-head { padding-block: 36px 6px; display: flex; flex-direction: column; gap: 4px; }
.kicker { font-weight: 700; font-size: 1.05rem; color: var(--orange-deep); }
.j-head h2 { font-size: clamp(2.1rem, 8.5vw, 3.1rem); line-height: 1.2; }
.j-head p { color: var(--ink-soft); font-size: 1.02rem; }

.track { position: relative; max-width: 1180px; margin-inline: auto; }
.road { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#road-shade { stroke: rgba(55,51,46,0.12); stroke-width: 34; }
#road-base { stroke: var(--asphalt); stroke-width: 22; }
#road-line { stroke: rgba(255,255,255,0.9); stroke-width: 2; stroke-dasharray: 9 11; }
#road-trail { stroke: var(--orange); stroke-width: 4; }

.car {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 26px; height: 46px;
  pointer-events: none;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));
  will-change: transform;
}
.car svg { width: 100%; height: 100%; overflow: visible; }

.stops {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 28px;
  padding-top: 26px; padding-bottom: 60px;
  padding-left: max(88px, calc(env(safe-area-inset-left, 0px) + 80px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.town, .hwy {
  align-self: flex-start;
  border-radius: 12px;
  background: var(--hwy); color: var(--white);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--hwy), 0 12px 22px -14px rgba(0,0,0,0.5);
}
.town { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 18px 10px; line-height: 1.3; }
.town small { font-weight: 700; font-size: 0.9rem; opacity: 0.92; }
.town b { font-family: var(--display); font-weight: 700; font-size: 1.5rem; }

.stop {
  position: relative;
  width: 100%; max-width: 400px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 14px 26px -20px rgba(30,27,22,0.5);
  transition: box-shadow 0.5s ease;
}
.stop.reached { box-shadow: 0 18px 34px -18px rgba(194,65,12,0.45); }
.stop .ph { margin: 0; aspect-ratio: 4 / 3; border-radius: 19px 19px 0 0; overflow: hidden; }
.stop .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s ease; transform: scale(1.05); }
.stop.reached .ph img { transform: scale(1); }
.st-body { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 2px; }
.tag { align-self: flex-start; font-weight: 700; font-size: 0.86rem; color: var(--orange-deep); }
.st-body h3 { font-size: 1.45rem; line-height: 1.3; }
.st-body p { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }

.stop.mini { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 4px; padding: 10px; }
.stop.mini .st-body { padding: 2px 6px 2px 10px; }
.ico { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: #FFF1C2; color: var(--orange-deep); }
.ico svg { width: 36px; height: 36px; }

.mile {
  position: absolute; left: -14px; top: -14px; z-index: 2;
  width: 48px; padding: 0 0 4px;
  display: flex; flex-direction: column; align-items: center;
  border-radius: 24px 24px 6px 6px;
  background: var(--white);
  border: 1.5px solid #D9D2C6;
  box-shadow: 0 6px 12px -6px rgba(0,0,0,0.35);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  transition: transform 0.4s cubic-bezier(.2,1.6,.4,1);
}
.mile::before { content: ""; display: block; width: 100%; height: 14px; background: #F5C518; }
.mile b { font-weight: 700; font-size: 1.05rem; padding-top: 2px; color: var(--ink); }
.mile small { font-weight: 700; font-size: 0.68rem; color: var(--ink-soft); }
.stop.reached .mile { transform: scale(1.12) rotate(-4deg); }

.hwy { max-width: 400px; width: 100%; padding: 12px 18px; display: flex; flex-direction: column; gap: 4px; }
.hwy-title { font-weight: 700; font-size: 1rem; }
.hwy-row { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.hwy-row span:last-child { white-space: nowrap; }

.finish { align-self: flex-start; display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.4; }
.flag { width: 40px; height: 40px; flex: none; }

.odo {
  position: fixed; z-index: 20;
  left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 160%);
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 32px);
  padding: 6px 16px 6px 8px;
  border-radius: 999px;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 0.95rem; line-height: 1.3;
  transition: transform 0.35s ease;
  pointer-events: none;
}
.odo.show { transform: translate(-50%, 0); }
.odo .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #FFE3E3; flex: none; }
.odo .dot svg { width: 13px; height: 22px; }
.odo b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.odo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------- Closing ---------- */
.closing { position: relative; background: var(--sun); color: var(--ink); text-align: center; }
.closing .wave { top: -1px; bottom: auto; transform: scaleY(-1); }
.closing-in { position: relative; padding-block: 84px 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.deva { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.4; color: var(--orange-deep); }
.closing h2 { font-size: clamp(2.6rem, 12vw, 4.6rem); line-height: 1.2; }
.closing .brand { margin-top: 8px; }
.credits { margin-top: 40px; font-size: 0.82rem; color: #4A443B; max-width: 60ch; line-height: 1.5; }
.credits summary { cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.credits summary::-webkit-details-marker { display: none; }
.credits p { padding-top: 8px; }
.credits a { color: inherit; }

/* ---------- Wider screens ---------- */
@media (min-width: 900px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; padding-block: 64px 110px; }
  .hero-copy { align-items: flex-start; gap: 18px; }
  .stage { align-items: center; }
  .stack { width: 320px; }
  .cue-wrap { grid-column: 1; }
  .brand { align-items: flex-start; }
  .j-head { align-items: center; text-align: center; }
  .stops { align-items: center; padding-left: 24px; padding-right: 24px; }
  .stop { width: min(400px, calc(50% - 90px)); }
  .stop[data-side="l"] { transform: translateX(calc(-50% - 75px)); }
  .stop[data-side="r"] { transform: translateX(calc(50% + 75px)); }
  .stop:not(.mini) + .stop:not(.mini) { margin-top: -150px; }
  .stop[data-side="l"] .mile { left: auto; right: -14px; }
  .town, .hwy, .finish { align-self: center; }
  .hwy { max-width: 360px; }
  .wave { height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero, .card, .stop, .stop .ph img, .mile, .odo, .journey { transition: none; }
  .cue svg { animation: none; }
}

/* ---------- Language switch ---------- */
.lang {
  position: absolute; z-index: 3;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  display: flex; gap: 2px; padding: 3px;
  border-radius: 999px;
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 0.9rem; line-height: 1;
}
.lang a { padding: 7px 12px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 700; }
.lang a[aria-current="page"] { background: var(--ink); color: var(--white); }
@media (max-width: 899px) { .hero-in { padding-top: 66px; } }