:root {
  --cream: #fff3de;
  --cream-dim: #7a5c3a;
  --ink: #2b1608;
  --gold: #f2b23c;
  --scene-text: #fff8ec;
  --scene-text-dim: #f0e2c8;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
}

h1, h2, h3 {
  font-family: 'Baloo 2', sans-serif;
  margin: 0;
}

p { margin: 0; }
button { font-family: inherit; }

.filter-defs { position: absolute; width: 0; height: 0; }

/* film grain, one global layer over everything */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* top chrome */
.chrome-top {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.live-clock {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--chrome-text, var(--ink));
  background: rgba(255, 243, 222, 0.92);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(43, 22, 8, 0.1);
  box-shadow: 0 6px 16px -8px rgba(43, 22, 8, 0.3);
  backdrop-filter: blur(6px);
}

.chrome-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  pointer-events: auto;
}

.chrome-actions .atlas-open,
.chrome-actions .map-open {
  font-size: 0.75rem;
  padding: 8px 16px;
}

/* hero splash */
.hero-splash {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.hero-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#posterize-mid);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(20, 10, 4, 0.45) 0%, rgba(20, 10, 4, 0.8) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  width: 100%;
  padding: 0 6vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.hero-eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-title {
  font-family: 'Baloo 2', sans-serif;
  font-size: clamp(3.2rem, 10vw, 6rem);
  font-weight: 800;
  color: var(--scene-text);
  line-height: 1;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.hero-sub {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--scene-text-dim);
}

.hero-explore {
  margin-top: 10px;
  padding: 16px 34px;
  border-radius: 999px;
  border: none;
  background: var(--gold);
  color: var(--ink);
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease;
}

.hero-explore:hover { transform: scale(1.05); }

.hero-live {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(20, 12, 5, 0.35);
  border: 1px solid rgba(255, 248, 236, 0.18);
  color: var(--scene-text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: hero-live-pulse 1.8s ease-out infinite;
}

@keyframes hero-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.hero-ctas {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-ctas .hero-explore { margin-top: 0; }

.hero-map-cta {
  padding: 15px 30px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 248, 236, 0.55);
  background: rgba(255, 248, 236, 0.08);
  color: var(--scene-text);
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.hero-map-cta:hover {
  transform: scale(1.05);
  background: rgba(255, 248, 236, 0.16);
  border-color: rgba(255, 248, 236, 0.85);
}

.hero-hint {
  font-size: 0.78rem;
  color: var(--scene-text-dim);
  opacity: 0.75;
}

/* stage + scenes */
.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  /* svh is the viewport measured with the mobile browser bars showing, so a
     fixed layout never sits clipped behind them. vh above is the fallback. */
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
  /* let vertical scrolling through, keep horizontal for the swipe handler */
  touch-action: pan-y;
}

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}

.scene.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* the incoming card after a swipe, entering from the side it came from */
.scene.slide-from-right { animation: scene-in-right 0.26s ease both; }
.scene.slide-from-left { animation: scene-in-left 0.26s ease both; }

@keyframes scene-in-right {
  from { transform: translateX(16%); opacity: 0.25; }
  to { transform: none; opacity: 1; }
}

@keyframes scene-in-left {
  from { transform: translateX(-16%); opacity: 0.25; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scene.slide-from-right, .scene.slide-from-left { animation: none; }
}

/* left: the sweet */
.sweet-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scene-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: url(#posterize-mid);
}

.scene-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(30, 16, 6, 0.58) 0%,
    rgba(30, 16, 6, 0) 28%,
    rgba(20, 10, 4, 0.12) 46%,
    rgba(20, 10, 4, 0.6) 66%,
    rgba(20, 10, 4, 0.85) 100%);
}

.sweet-header {
  position: relative;
  z-index: 3;
  padding: 90px 6vw 0;
  text-align: center;
}

.sweet-footer {
  position: relative;
  z-index: 3;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 0 6vw 150px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.scene-eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.scene-title {
  margin-top: 6px;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 800;
  color: var(--scene-text);
  line-height: 1;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.scene-note {
  font-size: 0.94rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--scene-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.75);
}

/* right: the city, a bento of info cells */
.city-panel {
  position: relative;
  height: 100%;
  max-height: 100%;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 90px 90px 122px 32px;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid rgba(43, 22, 8, 0.08);
}

/* a quiet cultural motif behind the bento cards, tinted per city.
   each city gets the real folk-art / craft pattern tied to its own
   region (see MOTIF_LABELS in build_index.py for sourcing) */
.city-motif {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.14;
  background-color: var(--accent, var(--gold));
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}

.motif-credit {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  align-self: flex-start;
  font-size: 0.68rem;
  font-style: italic;
  color: var(--cream-dim);
  opacity: 0.65;
}

/* Bengali alpona: a radiating lotus of petals with a dotted ring */
.motif-alpona {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='130'><g fill='black'><ellipse cx='65' cy='36' rx='9' ry='20'/><ellipse cx='65' cy='94' rx='9' ry='20'/><ellipse cx='36' cy='65' rx='20' ry='9'/><ellipse cx='94' cy='65' rx='20' ry='9'/><ellipse cx='45' cy='45' rx='9' ry='18' transform='rotate(45 45 45)'/><ellipse cx='85' cy='45' rx='9' ry='18' transform='rotate(-45 85 45)'/><ellipse cx='45' cy='85' rx='9' ry='18' transform='rotate(-45 45 85)'/><ellipse cx='85' cy='85' rx='9' ry='18' transform='rotate(45 85 85)'/><circle cx='65' cy='65' r='7'/></g><g fill='none' stroke='black' stroke-width='1.2'><circle cx='65' cy='65' r='58'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='130'><g fill='black'><ellipse cx='65' cy='36' rx='9' ry='20'/><ellipse cx='65' cy='94' rx='9' ry='20'/><ellipse cx='36' cy='65' rx='20' ry='9'/><ellipse cx='94' cy='65' rx='20' ry='9'/><ellipse cx='45' cy='45' rx='9' ry='18' transform='rotate(45 45 45)'/><ellipse cx='85' cy='45' rx='9' ry='18' transform='rotate(-45 85 45)'/><ellipse cx='45' cy='85' rx='9' ry='18' transform='rotate(-45 45 85)'/><ellipse cx='85' cy='85' rx='9' ry='18' transform='rotate(45 85 85)'/><circle cx='65' cy='65' r='7'/></g><g fill='none' stroke='black' stroke-width='1.2'><circle cx='65' cy='65' r='58'/></g></svg>");
  -webkit-mask-size: 130px 130px; mask-size: 130px 130px;
}

/* Sanganeri block print: a small floral sprig inside a diamond */
.motif-sanganeri {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110'><g fill='none' stroke='black' stroke-width='1.3'><rect x='20' y='20' width='70' height='70' transform='rotate(45 55 55)'/></g><g fill='black'><circle cx='55' cy='40' r='6'/><circle cx='55' cy='70' r='6'/><circle cx='40' cy='55' r='6'/><circle cx='70' cy='55' r='6'/><circle cx='55' cy='55' r='5'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110'><g fill='none' stroke='black' stroke-width='1.3'><rect x='20' y='20' width='70' height='70' transform='rotate(45 55 55)'/></g><g fill='black'><circle cx='55' cy='40' r='6'/><circle cx='55' cy='70' r='6'/><circle cx='40' cy='55' r='6'/><circle cx='70' cy='55' r='6'/><circle cx='55' cy='55' r='5'/></g></svg>");
  -webkit-mask-size: 110px 110px; mask-size: 110px 110px;
}

/* Mughal jaali: an interlocking octagon-and-star lattice */
.motif-jaali {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='none' stroke='black' stroke-width='1.4'><rect x='16' y='16' width='68' height='68'/><path d='M16 16 L50 0 L84 16 L100 50 L84 84 L50 100 L16 84 L0 50 Z' transform='translate(0,0)'/><circle cx='50' cy='50' r='24'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='none' stroke='black' stroke-width='1.4'><rect x='16' y='16' width='68' height='68'/><path d='M16 16 L50 0 L84 16 L100 50 L84 84 L50 100 L16 84 L0 50 Z' transform='translate(0,0)'/><circle cx='50' cy='50' r='24'/></g></svg>");
  -webkit-mask-size: 100px 100px; mask-size: 100px 100px;
}

/* Agra pietra dura: a flowing inlay vine with bud flowers */
.motif-pietradura {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='90'><g fill='none' stroke='black' stroke-width='1.5'><path d='M0 45 C 20 10, 40 80, 60 45 S 100 10, 120 45 S 140 80, 140 45'/></g><g fill='black'><ellipse cx='20' cy='22' rx='6' ry='10'/><ellipse cx='60' cy='68' rx='6' ry='10'/><ellipse cx='100' cy='22' rx='6' ry='10'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='90'><g fill='none' stroke='black' stroke-width='1.5'><path d='M0 45 C 20 10, 40 80, 60 45 S 100 10, 120 45 S 140 80, 140 45'/></g><g fill='black'><ellipse cx='20' cy='22' rx='6' ry='10'/><ellipse cx='60' cy='68' rx='6' ry='10'/><ellipse cx='100' cy='22' rx='6' ry='10'/></g></svg>");
  -webkit-mask-size: 140px 90px; mask-size: 140px 90px;
}

/* Banarasi brocade: diagonal repeating paisley buta */
.motif-banarasi {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='black' transform='rotate(20 50 50)'><path d='M50 25 C 65 25, 70 45, 58 58 C 50 66, 40 62, 40 52 C 40 44, 46 40, 50 44 C 53 47, 51 52, 47 51'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='black' transform='rotate(20 50 50)'><path d='M50 25 C 65 25, 70 45, 58 58 C 50 66, 40 62, 40 52 C 40 44, 46 40, 50 44 C 53 47, 51 52, 47 51'/></g></svg>");
  -webkit-mask-size: 90px 90px; mask-size: 90px 90px;
}

/* Phulkari: a diamond grid with a cross-stitch flower in each cell */
.motif-phulkari {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='none' stroke='black' stroke-width='1.3'><path d='M50 4 L96 50 L50 96 L4 50 Z'/></g><g stroke='black' stroke-width='1.6'><path d='M50 34 L50 66 M34 50 L66 50 M40 40 L60 60 M60 40 L40 60'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='none' stroke='black' stroke-width='1.3'><path d='M50 4 L96 50 L50 96 L4 50 Z'/></g><g stroke='black' stroke-width='1.6'><path d='M50 34 L50 66 M34 50 L66 50 M40 40 L60 60 M60 40 L40 60'/></g></svg>");
  -webkit-mask-size: 100px 100px; mask-size: 100px 100px;
}

/* Mysore silk: a peacock feather eye beside a mango-paisley border */
.motif-mysoresilk {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='100'><g fill='none' stroke='black' stroke-width='1.4'><ellipse cx='35' cy='50' rx='24' ry='34'/><ellipse cx='35' cy='50' rx='13' ry='20'/></g><circle cx='35' cy='50' r='5' fill='black'/><path d='M95 20 C 112 20, 118 45, 104 60 C 96 68, 84 63, 85 52 C 86 44, 93 41, 96 46' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='100'><g fill='none' stroke='black' stroke-width='1.4'><ellipse cx='35' cy='50' rx='24' ry='34'/><ellipse cx='35' cy='50' rx='13' ry='20'/></g><circle cx='35' cy='50' r='5' fill='black'/><path d='M95 20 C 112 20, 118 45, 104 60 C 96 68, 84 63, 85 52 C 86 44, 93 41, 96 46' fill='black'/></svg>");
  -webkit-mask-size: 130px 100px; mask-size: 130px 100px;
}

/* Bidriware: fine floral medallions inlaid in a grid, like silver on gunmetal */
.motif-bidri {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><g fill='none' stroke='black' stroke-width='1.1'><circle cx='45' cy='45' r='30'/><circle cx='45' cy='45' r='18'/></g><g fill='black'><circle cx='45' cy='19' r='3'/><circle cx='45' cy='71' r='3'/><circle cx='19' cy='45' r='3'/><circle cx='71' cy='45' r='3'/><circle cx='45' cy='45' r='4'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><g fill='none' stroke='black' stroke-width='1.1'><circle cx='45' cy='45' r='30'/><circle cx='45' cy='45' r='18'/></g><g fill='black'><circle cx='45' cy='19' r='3'/><circle cx='45' cy='71' r='3'/><circle cx='19' cy='45' r='3'/><circle cx='71' cy='45' r='3'/><circle cx='45' cy='45' r='4'/></g></svg>");
  -webkit-mask-size: 90px 90px; mask-size: 90px 90px;
}

/* Kolam: a dot grid laced together with looping curves */
.motif-kolam {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='black'><circle cx='20' cy='20' r='3.5'/><circle cx='50' cy='20' r='3.5'/><circle cx='80' cy='20' r='3.5'/><circle cx='20' cy='50' r='3.5'/><circle cx='50' cy='50' r='3.5'/><circle cx='80' cy='50' r='3.5'/><circle cx='20' cy='80' r='3.5'/><circle cx='50' cy='80' r='3.5'/><circle cx='80' cy='80' r='3.5'/></g><g fill='none' stroke='black' stroke-width='1.3'><path d='M20 20 C 40 30, 40 10, 50 20 C 60 30, 60 10, 80 20 M20 50 C 40 60, 40 40, 50 50 C 60 60, 60 40, 80 50 M20 80 C 40 90, 40 70, 50 80 C 60 90, 60 70, 80 80'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='black'><circle cx='20' cy='20' r='3.5'/><circle cx='50' cy='20' r='3.5'/><circle cx='80' cy='20' r='3.5'/><circle cx='20' cy='50' r='3.5'/><circle cx='50' cy='50' r='3.5'/><circle cx='80' cy='50' r='3.5'/><circle cx='20' cy='80' r='3.5'/><circle cx='50' cy='80' r='3.5'/><circle cx='80' cy='80' r='3.5'/></g><g fill='none' stroke='black' stroke-width='1.3'><path d='M20 20 C 40 30, 40 10, 50 20 C 60 30, 60 10, 80 20 M20 50 C 40 60, 40 40, 50 50 C 60 60, 60 40, 80 50 M20 80 C 40 90, 40 70, 50 80 C 60 90, 60 70, 80 80'/></g></svg>");
  -webkit-mask-size: 100px 100px; mask-size: 100px 100px;
}

/* Madhubani: a double-outline fish with hatched fill, the classic motif */
.motif-madhubani {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80'><g fill='none' stroke='black' stroke-width='1.4'><path d='M10 40 C 30 15, 70 15, 95 40 C 70 65, 30 65, 10 40 Z'/><path d='M95 40 L112 28 M95 40 L112 52'/><path d='M25 40 L40 40 M45 32 L55 40 L45 48 M60 32 L70 40 L60 48'/></g><circle cx='24' cy='36' r='2.5' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='80'><g fill='none' stroke='black' stroke-width='1.4'><path d='M10 40 C 30 15, 70 15, 95 40 C 70 65, 30 65, 10 40 Z'/><path d='M95 40 L112 28 M95 40 L112 52'/><path d='M25 40 L40 40 M45 32 L55 40 L45 48 M60 32 L70 40 L60 48'/></g><circle cx='24' cy='36' r='2.5' fill='black'/></svg>");
  -webkit-mask-size: 120px 80px; mask-size: 120px 80px;
}

/* Warli: stick figures in a ring dance around a center, all circles and triangles */
.motif-warli {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='black'><circle cx='60' cy='24' r='5'/><path d='M60 30 L52 46 L68 46 Z'/><path d='M52 46 L44 40 M52 46 L44 52 M68 46 L76 40 M68 46 L76 52 M52 46 L48 62 M68 46 L72 62'/></g><g fill='black' transform='translate(60,60) rotate(120) translate(-60,-60)'><circle cx='60' cy='24' r='5'/><path d='M60 30 L52 46 L68 46 Z'/></g><g fill='black' transform='translate(60,60) rotate(240) translate(-60,-60)'><circle cx='60' cy='24' r='5'/><path d='M60 30 L52 46 L68 46 Z'/></g><circle cx='60' cy='60' r='30' fill='none' stroke='black' stroke-width='1.2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='black'><circle cx='60' cy='24' r='5'/><path d='M60 30 L52 46 L68 46 Z'/><path d='M52 46 L44 40 M52 46 L44 52 M68 46 L76 40 M68 46 L76 52 M52 46 L48 62 M68 46 L72 62'/></g><g fill='black' transform='translate(60,60) rotate(120) translate(-60,-60)'><circle cx='60' cy='24' r='5'/><path d='M60 30 L52 46 L68 46 Z'/></g><g fill='black' transform='translate(60,60) rotate(240) translate(-60,-60)'><circle cx='60' cy='24' r='5'/><path d='M60 30 L52 46 L68 46 Z'/></g><circle cx='60' cy='60' r='30' fill='none' stroke='black' stroke-width='1.2'/></svg>");
  -webkit-mask-size: 120px 120px; mask-size: 120px 120px;
}

/* Bastar/godna: rows of tattoo-style dots forming chevrons */
.motif-bastar {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='40'><g fill='black'><circle cx='10' cy='20' r='2.4'/><circle cx='20' cy='10' r='2.4'/><circle cx='30' cy='20' r='2.4'/><circle cx='20' cy='30' r='2.4'/><circle cx='50' cy='20' r='2.4'/><circle cx='60' cy='10' r='2.4'/><circle cx='70' cy='20' r='2.4'/><circle cx='60' cy='30' r='2.4'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='40'><g fill='black'><circle cx='10' cy='20' r='2.4'/><circle cx='20' cy='10' r='2.4'/><circle cx='30' cy='20' r='2.4'/><circle cx='20' cy='30' r='2.4'/><circle cx='50' cy='20' r='2.4'/><circle cx='60' cy='10' r='2.4'/><circle cx='70' cy='20' r='2.4'/><circle cx='60' cy='30' r='2.4'/></g></svg>");
  -webkit-mask-size: 80px 40px; mask-size: 80px 40px;
}

/* Surati zari: a metallic herringbone weave with sparkle dots */
.motif-zari {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='none' stroke='black' stroke-width='1.3'><path d='M0 15 L15 0 M0 45 L45 0 M15 60 L60 15 M45 60 L60 45'/></g><circle cx='30' cy='30' r='2.6' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='none' stroke='black' stroke-width='1.3'><path d='M0 15 L15 0 M0 45 L45 0 M15 60 L60 15 M45 60 L60 45'/></g><circle cx='30' cy='30' r='2.6' fill='black'/></svg>");
  -webkit-mask-size: 60px 60px; mask-size: 60px 60px;
}

/* Kerala mural: a flame-crowned leaf-and-vine border */
.motif-keralamural {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='black'><path d='M50 10 C 60 25, 60 40, 50 50 C 40 40, 40 25, 50 10 Z'/></g><g fill='none' stroke='black' stroke-width='1.4'><path d='M20 70 C 35 55, 65 55, 80 70'/></g><g fill='black'><ellipse cx='30' cy='66' rx='6' ry='10' transform='rotate(-30 30 66)'/><ellipse cx='70' cy='66' rx='6' ry='10' transform='rotate(30 70 66)'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='black'><path d='M50 10 C 60 25, 60 40, 50 50 C 40 40, 40 25, 50 10 Z'/></g><g fill='none' stroke='black' stroke-width='1.4'><path d='M20 70 C 35 55, 65 55, 80 70'/></g><g fill='black'><ellipse cx='30' cy='66' rx='6' ry='10' transform='rotate(-30 30 66)'/><ellipse cx='70' cy='66' rx='6' ry='10' transform='rotate(30 70 66)'/></g></svg>");
  -webkit-mask-size: 110px 110px; mask-size: 110px 110px;
}

/* Pattachitra: a temple spire silhouette under a scrollwork border */
.motif-pattachitra {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='110'><g fill='black'><path d='M50 15 C 44 35, 40 55, 30 75 L70 75 C 60 55, 56 35, 50 15 Z'/><circle cx='50' cy='18' r='4'/></g><g fill='none' stroke='black' stroke-width='1.2'><path d='M10 95 C 25 85, 35 105, 50 95 C 65 85, 75 105, 90 95'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='110'><g fill='black'><path d='M50 15 C 44 35, 40 55, 30 75 L70 75 C 60 55, 56 35, 50 15 Z'/><circle cx='50' cy='18' r='4'/></g><g fill='none' stroke='black' stroke-width='1.2'><path d='M10 95 C 25 85, 35 105, 50 95 C 65 85, 75 105, 90 95'/></g></svg>");
  -webkit-mask-size: 100px 110px; mask-size: 100px 110px;
}

/* Aipan: an interlocking diamond lattice with a dotted lotus at the crossings */
.motif-aipan {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><g fill='none' stroke='black' stroke-width='1.3'><path d='M45 5 L85 45 L45 85 L5 45 Z'/><path d='M45 25 L65 45 L45 65 L25 45 Z'/></g><circle cx='45' cy='45' r='4' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><g fill='none' stroke='black' stroke-width='1.3'><path d='M45 5 L85 45 L45 85 L5 45 Z'/><path d='M45 25 L65 45 L45 65 L25 45 Z'/></g><circle cx='45' cy='45' r='4' fill='black'/></svg>");
  -webkit-mask-size: 90px 90px; mask-size: 90px 90px;
}

/* Azulejo: the classic Portuguese quarter-circle tile-in-square repeat */
.motif-azulejo {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='black' stroke-width='1.4'><rect x='2' y='2' width='76' height='76'/><path d='M2 2 A 38 38 0 0 1 40 40 A 38 38 0 0 1 2 78 M78 2 A 38 38 0 0 0 40 40 A 38 38 0 0 0 78 78'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='black' stroke-width='1.4'><rect x='2' y='2' width='76' height='76'/><path d='M2 2 A 38 38 0 0 1 40 40 A 38 38 0 0 1 2 78 M78 2 A 38 38 0 0 0 40 40 A 38 38 0 0 0 78 78'/></g></svg>");
  -webkit-mask-size: 80px 80px; mask-size: 80px 80px;
}

/* Kashmiri paisley: the classic curled boteh teardrop, repeating */
.motif-paisley {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='100'><g fill='black'><path d='M45 20 C 70 20, 78 50, 60 68 C 50 78, 35 74, 34 60 C 33 50, 42 45, 48 50 C 52 54, 49 60, 44 58'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='100'><g fill='black'><path d='M45 20 C 70 20, 78 50, 60 68 C 50 78, 35 74, 34 60 C 33 50, 42 45, 48 50 C 52 54, 49 60, 44 58'/></g></svg>");
  -webkit-mask-size: 90px 100px; mask-size: 90px 100px;
}

/* Puducherry French Quarter: wrought-iron scroll grille with a bougainvillea dot */
.motif-frenchgrille {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='none' stroke='black' stroke-width='1.4'><path d='M10 50 C 10 30, 30 30, 30 50 C 30 70, 50 70, 50 50 C 50 30, 70 30, 70 50 C 70 70, 90 70, 90 50'/><path d='M50 10 L50 90'/></g><circle cx='50' cy='50' r='4' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='none' stroke='black' stroke-width='1.4'><path d='M10 50 C 10 30, 30 30, 30 50 C 30 70, 50 70, 50 50 C 50 30, 70 30, 70 50 C 70 70, 90 70, 90 50'/><path d='M50 10 L50 90'/></g><circle cx='50' cy='50' r='4' fill='black'/></svg>");
  -webkit-mask-size: 100px 100px; mask-size: 100px 100px;
}

/* Manipuri phanek (Mayek Naibi): horizontal stripe bands with a lotus accent */
.motif-phanek {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='50'><g fill='black'><rect x='0' y='6' width='100' height='4'/><rect x='0' y='40' width='100' height='4'/><rect x='0' y='16' width='100' height='2'/><rect x='0' y='32' width='100' height='2'/></g><ellipse cx='50' cy='25' rx='8' ry='5' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='50'><g fill='black'><rect x='0' y='6' width='100' height='4'/><rect x='0' y='40' width='100' height='4'/><rect x='0' y='16' width='100' height='2'/><rect x='0' y='32' width='100' height='2'/></g><ellipse cx='50' cy='25' rx='8' ry='5' fill='black'/></svg>");
  -webkit-mask-size: 100px 50px; mask-size: 100px 50px;
}

/* Assamese gamosa: the woven geometric kojiya-phool border cross */
.motif-gamosa {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70'><g fill='none' stroke='black' stroke-width='1.6'><path d='M35 10 L35 60 M10 35 L60 35 M20 20 L50 50 M50 20 L20 50'/><rect x='27' y='27' width='16' height='16'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70'><g fill='none' stroke='black' stroke-width='1.6'><path d='M35 10 L35 60 M10 35 L60 35 M20 20 L50 50 M50 20 L20 50'/><rect x='27' y='27' width='16' height='16'/></g></svg>");
  -webkit-mask-size: 70px 70px; mask-size: 70px 70px;
}

/* Srikalahasti kalamkari: a hand-painted vine with a temple-tower silhouette */
.motif-kalamkari {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='90'><g fill='none' stroke='black' stroke-width='1.3'><path d='M5 70 C 25 40, 45 90, 65 60 C 80 40, 90 55, 105 45'/></g><g fill='black'><path d='M85 10 L95 30 L75 30 Z'/><rect x='82' y='30' width='6' height='10'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='90'><g fill='none' stroke='black' stroke-width='1.3'><path d='M5 70 C 25 40, 45 90, 65 60 C 80 40, 90 55, 105 45'/></g><g fill='black'><path d='M85 10 L95 30 L75 30 Z'/><rect x='82' y='30' width='6' height='10'/></g></svg>");
  -webkit-mask-size: 110px 90px; mask-size: 110px 90px;
}

/* Gwalior Fort stone lattice: a rounded medallion carved in radiating diamonds */
.motif-gwaliorjaali {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='none' stroke='black' stroke-width='1.3'><circle cx='50' cy='50' r='40'/><circle cx='50' cy='50' r='24'/><path d='M50 10 L50 90 M10 50 L90 50 M22 22 L78 78 M78 22 L22 78'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><g fill='none' stroke='black' stroke-width='1.3'><circle cx='50' cy='50' r='40'/><circle cx='50' cy='50' r='24'/><path d='M50 10 L50 90 M10 50 L90 50 M22 22 L78 78 M78 22 L22 78'/></g></svg>");
  -webkit-mask-size: 100px 100px; mask-size: 100px 100px;
}

/* Sohrai-Khovar: a comb-scraped elephant silhouette between bold border lines */
.motif-sohrai {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='80'><g fill='none' stroke='black' stroke-width='2'><path d='M0 8 L130 8 M0 72 L130 72'/></g><g fill='black'><path d='M30 55 C 26 40, 34 28, 48 28 C 60 28, 66 36, 66 46 L74 40 L74 48 L66 50 C 65 58, 58 62, 50 60 L48 66 L44 66 L44 60 C 36 58, 32 58, 30 55 Z'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='80'><g fill='none' stroke='black' stroke-width='2'><path d='M0 8 L130 8 M0 72 L130 72'/></g><g fill='black'><path d='M30 55 C 26 40, 34 28, 48 28 C 60 28, 66 36, 66 46 L74 40 L74 48 L66 50 C 65 58, 58 62, 50 60 L48 66 L44 66 L44 60 C 36 58, 32 58, 30 55 Z'/></g></svg>");
  -webkit-mask-size: 130px 80px; mask-size: 130px 80px;
}

/* Kurukshetra's Jyotisar chariot wheel: a spoked wheel, straight from the Gita site */
.motif-chariotwheel {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110'><g fill='none' stroke='black' stroke-width='2'><circle cx='55' cy='55' r='42'/><circle cx='55' cy='55' r='9'/><path d='M55 13 L55 97 M13 55 L97 55 M25 25 L85 85 M85 25 L25 85'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110'><g fill='none' stroke='black' stroke-width='2'><circle cx='55' cy='55' r='42'/><circle cx='55' cy='55' r='9'/><path d='M55 13 L55 97 M13 55 L97 55 M25 25 L85 85 M85 25 L25 85'/></g></svg>");
  -webkit-mask-size: 110px 110px; mask-size: 110px 110px;
}

/* Kullu shawl: chevron diamond weave bands */
.motif-kullushawl {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='40'><g fill='none' stroke='black' stroke-width='1.6'><path d='M0 20 L10 6 L20 20 L30 6 L40 20 L50 6 L60 20 L70 6 L80 20'/><path d='M0 34 L10 20 L20 34 L30 20 L40 34 L50 20 L60 34 L70 20 L80 34'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='40'><g fill='none' stroke='black' stroke-width='1.6'><path d='M0 20 L10 6 L20 20 L30 6 L40 20 L50 6 L60 20 L70 6 L80 20'/><path d='M0 34 L10 20 L20 34 L30 20 L40 34 L50 20 L60 34 L70 20 L80 34'/></g></svg>");
  -webkit-mask-size: 80px 40px; mask-size: 80px 40px;
}

/* Kani shawl: twill-woven diamond lattice, each cell holding a small bud */
.motif-kanishawl {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70'><g fill='none' stroke='black' stroke-width='1.2'><path d='M35 5 L65 35 L35 65 L5 35 Z'/></g><g fill='black'><ellipse cx='35' cy='27' rx='4' ry='7'/><ellipse cx='35' cy='43' rx='4' ry='7'/><ellipse cx='27' cy='35' rx='7' ry='4'/><ellipse cx='43' cy='35' rx='7' ry='4'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70'><g fill='none' stroke='black' stroke-width='1.2'><path d='M35 5 L65 35 L35 65 L5 35 Z'/></g><g fill='black'><ellipse cx='35' cy='27' rx='4' ry='7'/><ellipse cx='35' cy='43' rx='4' ry='7'/><ellipse cx='27' cy='35' rx='7' ry='4'/><ellipse cx='43' cy='35' rx='7' ry='4'/></g></svg>");
  -webkit-mask-size: 70px 70px; mask-size: 70px 70px;
}

/* Parsi Gara: a crane silhouette beside a Chinese-influenced floral sprig */
.motif-parsigara {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='90'><g fill='black'><path d='M20 70 C15 55 25 40 38 42 C40 30 55 22 62 30 C58 34 55 40 58 46 C68 44 74 52 68 58 C74 60 74 68 66 68 C64 74 54 74 50 66 C42 70 28 72 20 70 Z'/><circle cx='58' cy='30' r='3'/></g><g fill='black'><circle cx='100' cy='55' r='6'/><ellipse cx='100' cy='42' rx='5' ry='9'/><ellipse cx='100' cy='68' rx='5' ry='9'/><ellipse cx='87' cy='55' rx='9' ry='5'/><ellipse cx='113' cy='55' rx='9' ry='5'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='90'><g fill='black'><path d='M20 70 C15 55 25 40 38 42 C40 30 55 22 62 30 C58 34 55 40 58 46 C68 44 74 52 68 58 C74 60 74 68 66 68 C64 74 54 74 50 66 C42 70 28 72 20 70 Z'/><circle cx='58' cy='30' r='3'/></g><g fill='black'><circle cx='100' cy='55' r='6'/><ellipse cx='100' cy='42' rx='5' ry='9'/><ellipse cx='100' cy='68' rx='5' ry='9'/><ellipse cx='87' cy='55' rx='9' ry='5'/><ellipse cx='113' cy='55' rx='9' ry='5'/></g></svg>");
  -webkit-mask-size: 130px 90px; mask-size: 130px 90px;
}

/* Mainpuri Tarkashi: a radiating wire-inlay sunburst with dot terminals */
.motif-tarkashi {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='black' stroke-width='0.9'><path d='M40 40 L40 5 M40 40 L40 75 M40 40 L5 40 M40 40 L75 40 M40 40 L15 15 M40 40 L65 15 M40 40 L15 65 M40 40 L65 65'/></g><g fill='black'><circle cx='40' cy='40' r='4'/><circle cx='40' cy='5' r='1.6'/><circle cx='40' cy='75' r='1.6'/><circle cx='5' cy='40' r='1.6'/><circle cx='75' cy='40' r='1.6'/></g></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='black' stroke-width='0.9'><path d='M40 40 L40 5 M40 40 L40 75 M40 40 L5 40 M40 40 L75 40 M40 40 L15 15 M40 40 L65 15 M40 40 L15 65 M40 40 L65 65'/></g><g fill='black'><circle cx='40' cy='40' r='4'/><circle cx='40' cy='5' r='1.6'/><circle cx='40' cy='75' r='1.6'/><circle cx='5' cy='40' r='1.6'/><circle cx='75' cy='40' r='1.6'/></g></svg>");
  -webkit-mask-size: 80px 80px; mask-size: 80px 80px;
}

.bento-cell { flex: 0 0 auto; }

.bento-cell {
  position: relative;
  z-index: 1;
  background: rgba(255, 243, 222, 0.86);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(43, 22, 8, 0.1);
  border-radius: 16px;
  padding: 16px 18px;
  min-height: 0;
  box-shadow: 0 8px 20px -14px rgba(43, 22, 8, 0.4);
}

.bento-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, var(--gold));
  margin-bottom: 6px;
}

.bento-landmark {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bento-landmark img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.bento-landmark h3 {
  font-size: 1.15rem;
  color: var(--ink);
}

.bento-history p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--cream-dim);
}

.bento-places ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bento-places li {
  font-size: 0.88rem;
  color: var(--ink);
  padding-left: 16px;
  position: relative;
}

.bento-places li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, var(--gold));
}

.wiki-link {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent, var(--gold));
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
  transition: opacity 0.2s ease;
}

.wiki-link:hover { opacity: 0.7; }

/* nav arrows */
.nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 243, 222, 0.85);
  color: var(--ink);
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease, transform 0.2s ease;
}

.nav-arrow:hover { background: var(--gold); transform: translateY(-50%) scale(1.08); }
.nav-prev { left: 24px; }
.nav-next { right: 24px; }

/* one anchored bottom bar: dots on top, now-playing centred beneath */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 24px 22px;
  pointer-events: none;
}

.bottom-bar > * { pointer-events: auto; }

/* city rail: the menu of cities, replacing 29 anonymous dots */
.city-rail-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(92vw, 940px);
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  background: rgba(20, 12, 5, 0.55);
  border: 1px solid rgba(255, 243, 222, 0.14);
  backdrop-filter: blur(8px);
}

.rail-count {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 243, 222, 0.5);
  font-variant-numeric: tabular-nums;
  /* a divider, so the counter does not sit flush against whichever city name
     the rail's left fade happens to be cutting through */
  padding-right: 10px;
  border-right: 1px solid rgba(255, 243, 222, 0.16);
}

.rail-count b { color: var(--gold); font-weight: 700; }

.city-rail {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  /* a flex item defaults to min-width: auto, which would let the rail grow to
     fit all 29 names instead of overflowing and scrolling */
  min-width: 0;
  scrollbar-width: none;
  /* the ends fade out, so it reads as a list that keeps going */
  mask-image: linear-gradient(90deg, transparent, #000 14px,
                              #000 calc(100% - 14px), transparent);
}

.city-rail::-webkit-scrollbar { display: none; }

.rail-city {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  padding: 6px 13px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 243, 222, 0.62);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.rail-city:hover { background: rgba(255, 243, 222, 0.12); color: #fff8ec; }

.rail-city.is-active {
  background: var(--accent, var(--gold));
  color: #2b1608;
}


.atlas-open, .map-open {
  white-space: nowrap;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(43, 22, 8, 0.12);
  background: rgba(255, 243, 222, 0.9);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease, transform 0.2s ease;
}

.atlas-open:hover, .map-open:hover { background: var(--gold); transform: translateY(-2px); }

/* atlas modal */
.atlas-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 12, 5, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  padding: 4vh 3vw;
}

.atlas-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.atlas-modal-inner {
  position: relative;
  background: var(--cream);
  border-radius: 20px;
  width: 100%;
  max-width: 1360px;
  max-height: 92vh;
  max-height: 92svh;
  overflow-y: auto;
  padding: 40px 0 20px;
}

.atlas-close {
  position: sticky;
  float: right;
  top: 12px;
  right: 20px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(43, 22, 8, 0.08);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  margin-right: 20px;
}

.atlas-close:hover { background: var(--gold); }

.atlas-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0 4vw;
}

.atlas h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--ink);
  margin-top: 8px;
}

.atlas .eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b3722f;
}

.atlas-sub {
  margin-top: 16px;
  color: var(--cream-dim);
  font-size: 1.02rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.atlas-footnote {
  margin-top: 48px;
  font-size: 0.82rem;
  color: var(--cream-dim);
  opacity: 0.8;
  font-style: italic;
}

/* region filter */
.atlas-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  position: sticky;
  top: 0;
  background: var(--cream);
  padding: 12px 0;
  z-index: 20;
}

.filter-chip {
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(43, 22, 8, 0.06);
  border: 1px solid rgba(43, 22, 8, 0.12);
  color: var(--cream-dim);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.filter-chip:hover { border-color: var(--gold); color: var(--ink); }

.filter-chip.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 700;
}

.atlas-region { margin-top: 52px; text-align: left; }
.atlas-region.is-hidden { display: none; }

.atlas-region h3 {
  font-size: 1.3rem;
  color: #b3722f;
  border-bottom: 1px solid rgba(43, 22, 8, 0.15);
  padding-bottom: 10px;
  margin-bottom: 24px;
}

.atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 18px 16px;
}

.atlas-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(43, 22, 8, 0.09);
  border-radius: 16px;
  padding: 10px 10px 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.atlas-card:hover {
  transform: translateY(-3px);
  border-color: rgba(242, 178, 60, 0.55);
  box-shadow: 0 14px 30px -16px rgba(43, 22, 8, 0.45);
}

.atlas-card-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 11px;
  overflow: hidden;
  background: #e8d6b4;
  box-shadow: 0 10px 24px -14px rgba(43, 22, 8, 0.3);
}

/* state/UT badge sitting on the photo */
.atlas-card-origin {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 2;
  max-width: calc(100% - 12px);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(20, 12, 5, 0.72);
  color: #fff8ec;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(3px);
}

.atlas-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

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

.atlas-card-noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--cream-dim);
  opacity: 0.7;
  background: repeating-linear-gradient(
    135deg,
    rgba(43, 22, 8, 0.05),
    rgba(43, 22, 8, 0.05) 8px,
    transparent 8px,
    transparent 16px
  );
}

.atlas-card-name {
  margin-top: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.atlas-card-note {
  margin-top: 3px;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--cream-dim);
}

/* the extra verified fact, set apart by a rule */
.atlas-card-detail {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed rgba(43, 22, 8, 0.16);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--cream-dim);
}

.atlas-card-tags {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.atlas-card-tags li {
  font-size: 0.64rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(43, 22, 8, 0.06);
  color: var(--cream-dim);
  white-space: nowrap;
}

.atlas-card-occasion {
  align-self: flex-start;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(242, 178, 60, 0.22);
  border: 1px solid rgba(242, 178, 60, 0.5);
  color: #8a5a1e;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* pushes the occasion pill to the card's bottom so rows line up */
.atlas-card-tags { margin-top: auto; padding-top: 8px; }

/* map modal */
.map-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 12, 5, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  padding: 4vh 3vw;
}

.map-modal.is-open { opacity: 1; visibility: visible; }

.map-modal-inner {
  position: relative;
  background: var(--cream);
  border-radius: 20px;
  width: 100%;
  max-width: 1000px;
  max-height: 92vh;
  max-height: 92svh;
  overflow-y: auto;
  padding: 40px 32px 32px;
}

.map-close {
  position: sticky;
  float: right;
  top: 0;
  right: 0;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(43, 22, 8, 0.08);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.map-close:hover { background: var(--gold); }

.map-intro { text-align: center; margin-bottom: 24px; clear: both; }

.map-intro .eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b3722f;
}

.map-intro h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  margin-top: 6px;
  color: var(--ink);
}

.map-canvas {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1500 / 1615;
  margin: 0 auto;
}

.map-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: sepia(0.25) saturate(1.3) hue-rotate(-6deg) brightness(1.03);
  opacity: 0.92;
  user-select: none;
  -webkit-user-drag: none;
}

.map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 2;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  animation: pin-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}

/* an invisible 44px hit area centred on the dot, so a pin stays tappable
   on a phone without making the dot itself any bigger */
.map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.map-pin-dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--accent, var(--gold));
  border: 2px solid var(--cream);
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.map-pin:hover .map-pin-dot, .map-pin:focus-visible .map-pin-dot {
  transform: rotate(-45deg) scale(1.35);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.6);
}

.map-pin-card {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  width: 168px;
  background: rgba(255, 243, 222, 0.98);
  border: 1px solid rgba(43, 22, 8, 0.12);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  text-align: left;
}

.map-pin:hover .map-pin-card, .map-pin:focus-visible .map-pin-card {
  opacity: 1;
  transform: translate(-50%, 0);
}

.map-pin-card img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.map-pin-card-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.map-pin-card-text strong { font-size: 0.8rem; color: var(--ink); line-height: 1.2; }
.map-pin-card-text em { font-style: normal; font-size: 0.72rem; color: var(--accent, #b3722f); }
.map-pin-card-text small {
  font-size: 0.66rem;
  color: var(--cream-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-pin.card-below .map-pin-card {
  bottom: auto;
  top: calc(100% + 10px);
  transform: translate(-50%, -6px);
}
.map-pin.card-below:hover .map-pin-card, .map-pin.card-below:focus-visible .map-pin-card {
  transform: translate(-50%, 0);
}

.map-pin.card-align-left .map-pin-card { left: auto; right: -8px; transform: translate(0, 6px); }
.map-pin.card-align-left:hover .map-pin-card, .map-pin.card-align-left:focus-visible .map-pin-card { transform: translate(0, 0); }
.map-pin.card-align-right .map-pin-card { left: -8px; transform: translate(0, 6px); }
.map-pin.card-align-right:hover .map-pin-card, .map-pin.card-align-right:focus-visible .map-pin-card { transform: translate(0, 0); }

/* phone fallback for the map: a scannable list, hidden on desktop */
.map-list { display: none; }

/* swipe affordance, phone only, fades once the gesture has been used */
.swipe-hint { display: none; }

.swipe-hint.is-gone {
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

@keyframes pin-pop {
  from { opacity: 0; transform: translate(-50%, -60%) scale(0.3); }
  to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}

/* now playing widget */
.now-playing {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 243, 222, 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(43, 22, 8, 0.1);
  border-radius: 18px;
  padding: 8px 14px 8px 8px;
  box-shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.4);
  width: min(92vw, 460px);
  flex: 0 0 auto;
}

.np-thumb-wrap {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
}

#npThumb, #npThumb iframe, #npThumb img {
  width: 52px !important;
  height: 52px !important;
  border: 0;
  object-fit: cover;
  display: block;
}

#npThumb iframe { pointer-events: none; }

.np-info { min-width: 0; flex: 1; }

.np-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-sub {
  font-size: 0.74rem;
  color: var(--cream-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.np-eq {
  margin-top: 8px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 12px;
}

.np-eq span {
  width: 3px;
  height: 4px;
  background: rgba(43, 22, 8, 0.2);
  border-radius: 1px;
}

.now-playing.playing .np-eq span {
  background: #d97b1f;
  animation: eq 0.9s ease-in-out infinite;
}

.now-playing.playing .np-eq span:nth-child(1) { animation-delay: 0s; }
.now-playing.playing .np-eq span:nth-child(2) { animation-delay: 0.2s; }
.now-playing.playing .np-eq span:nth-child(3) { animation-delay: 0.4s; }

@keyframes eq {
  0%, 100% { height: 4px; }
  50% { height: 12px; }
}

.np-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.np-controls button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(43, 22, 8, 0.08);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.np-controls button:hover { background: var(--gold); }

.np-controls button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 178, 60, 0.5);
}

#npPlay { width: 36px; height: 36px; background: var(--gold); }

@media (max-width: 860px) {
  .scene { grid-template-columns: 1fr; grid-template-rows: 46% 54%; }
  .sweet-header { padding: 66px 8vw 0; }
  .sweet-footer { padding: 0 8vw 28px; gap: 8px; }
  .scene-title { font-size: clamp(1.8rem, 7vw, 2.6rem); }
  .scene-note { font-size: 0.88rem; }
  .hero-title { font-size: clamp(2.6rem, 14vw, 4rem); }
  .hero-sub { font-size: 0.92rem; }
  .hero-live { top: 16px; font-size: 0.72rem; padding: 6px 13px; }
  .hero-ctas { gap: 10px; }
  .hero-explore, .hero-map-cta { padding: 13px 24px; font-size: 0.95rem; }
  .city-panel {
    padding: 14px 16px 142px;
    border-left: none;
    border-top: 1px solid rgba(43, 22, 8, 0.08);
    gap: 8px;
  }
  .bento-cell { padding: 10px 12px; }
  .bento-landmark img { width: 44px; height: 44px; }
  .bento-landmark h3 { font-size: 0.95rem; }
  .bento-history p, .bento-places li { font-size: 0.78rem; }
  .nav-arrow { width: 40px; height: 40px; font-size: 1rem; top: 28%; }
  .nav-prev { left: 8px; }
  .nav-next { right: 8px; }
  .bottom-bar { gap: 10px; padding: 0 10px 12px; }
  .city-rail-wrap { max-width: 96vw; gap: 8px; padding: 4px 5px 4px 10px; }
  .rail-count { font-size: 0.64rem; }
  .rail-city { font-size: 0.72rem; padding: 5px 11px; }
  .chrome-top { right: 12px; left: 12px; }
  .chrome-actions { gap: 6px; }
  .chrome-actions .atlas-open, .chrome-actions .map-open { font-size: 0.62rem; padding: 6px 11px; }
  .live-clock { font-size: 0.62rem; padding: 5px 10px; }
  .now-playing { width: min(94vw, 380px); }
  .atlas-list { grid-template-columns: 1fr; }
  .map-modal-inner { padding: 28px 16px 20px; }
  .map-canvas { max-width: 100%; }
  .map-pin-dot { width: 13px; height: 13px; }
  .map-pin-card { display: none; }

  .swipe-hint {
    display: block;
    position: fixed;
    left: 50%;
    bottom: 140px;
    transform: translateX(-50%);
    z-index: 55;
    margin: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(20, 12, 5, 0.42);
    color: var(--scene-text-dim);
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    backdrop-filter: blur(3px);
    pointer-events: none;
  }

  /* the map stays as orientation, the list is what you actually tap */
  .map-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    list-style: none;
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(43, 22, 8, 0.12);
  }

  .map-list-item {
    width: 100%;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 9px 12px;
    border: 1px solid rgba(43, 22, 8, 0.12);
    border-left: 3px solid var(--accent, var(--gold));
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
    text-align: left;
    cursor: pointer;
  }

  .map-list-city { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
  .map-list-sweet {
    font-size: 0.7rem;
    color: var(--cream-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* small phones: the 860px block above is tuned for the tablet end of its
   range, so tighten the things that actually run out of width here */
@media (max-width: 520px) {
  .chrome-actions .atlas-open, .chrome-actions .map-open {
    font-size: 0.6rem;
    padding: 6px 9px;
  }
  .live-clock { font-size: 0.58rem; padding: 4px 8px; }
  .scene { grid-template-rows: 42% 58%; }
  .sweet-header { padding: 58px 6vw 0; }
  .sweet-footer { padding: 0 6vw 20px; }
  .atlas-grid { grid-template-columns: 1fr; gap: 14px; }
  .atlas-card-photo { aspect-ratio: 16 / 9; }
  .map-list { grid-template-columns: 1fr 1fr; }
  .now-playing { gap: 10px; padding: 7px 10px 7px 7px; }
  .np-controls button { width: 32px; height: 32px; }
  #npPlay { width: 38px; height: 38px; }
}