:root {
  --yellow: #f7c744;
  --yellow-deep: #e9ad1c;
  --ink: #1d1714;
  --ink-soft: #5a4a42;
  --paper: #fdf6ea;
  --paper-2: #f5e8d2;
  --pink: #f7c9c0;
  --u: #2b45a6;
  --k: #b9503a;
  --green: #3c8c5a;
  --radius: 14px;
  --shadow: 0 18px 50px -18px rgba(60, 25, 10, .45);
  --font: 'Anek Latin', 'Anek Devanagari', 'Anek Bangla', system-ui, sans-serif;
  --display: 'Bowlby One', 'Anek Latin', sans-serif;
  --hand: 'Kalam', 'Anek Latin', cursive;
  --read: 'Tiro Devanagari Hindi', Georgia, serif;   /* the letter: Latin and Devanagari in one serif */
  --lac: #b5281c;
  --bar: 38px;
  --top: 76px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--u); outline-offset: 2px; border-radius: 6px; }

/* ---------- ticker ---------- */
.ticker { height: var(--bar); background: var(--yellow); overflow: hidden; display: flex; align-items: center; border-bottom: 1px solid #00000012; }
.ticker-track { display: flex; gap: 48px; white-space: nowrap; animation: tick 40s linear infinite; padding-left: 24px; }
.ticker-track span { font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 48px; }
.ticker-track svg { width: 26px; height: 26px; flex: none; }
.ticker-track.greetings span { text-transform: none; letter-spacing: .02em; font-size: 15px; gap: 0; align-items: baseline; }
.ticker-track.greetings span svg { align-self: center; }
/* both words share one baseline, then app.js (alignGreetings) nudges the regional script by --native-shift so the
   middle of its letters lines up with the middle of the English letters, whatever the script */
.ticker-track.greetings b { font-weight: 800; display: inline-block; line-height: 1; transform: translateY(var(--word-drop, 0)); }
.ticker-track.greetings .latin { margin-right: 26px; }
.ticker-track.greetings .native {
  font-family: 'Anek Devanagari', 'Anek Bangla', 'Anek Tamil', 'Anek Kannada', 'Anek Telugu', 'Anek Malayalam', 'Anek Gujarati', 'Anek Gurmukhi', 'Anek Odia', system-ui, sans-serif;
  font-weight: 600; font-size: 17px; margin-right: 10px; position: relative; top: var(--native-shift, 0);
}
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- header ---------- */
.topbar {
  height: var(--top); background: #fff; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 clamp(12px, 3vw, 28px); position: relative; z-index: 20; box-shadow: 0 1px 0 #00000010;
}
.topbar-left { display: flex; align-items: center; gap: clamp(10px, 3vw, 40px); }
.topnav { display: flex; gap: 40px; }
.topnav a { text-decoration: none; font-size: 17px; font-weight: 500; }
.topnav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.logo { font-family: var(--display); font-size: clamp(30px, 4.6vw, 52px); letter-spacing: .02em; text-decoration: none; line-height: 1; transform: scaleY(1.12); }
.topbar-right { display: flex; justify-content: flex-end; gap: clamp(4px, 1.6vw, 22px); }
.icon-btn { background: none; border: 0; padding: 8px; border-radius: 50%; display: grid; place-items: center; position: relative; min-width: 44px; min-height: 44px; }
.icon-btn:hover { background: #00000008; }
.icon-btn img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; position: absolute; inset: 6px; }
.icon-btn.signed-in svg { visibility: hidden; }
.icon-btn.signed-in .initial { position: absolute; inset: 6px; width: 28px; height: 28px; border-radius: 50%; background: var(--u); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.burger, .burger::before, .burger::after { display: block; width: 24px; height: 3px; background: var(--ink); border-radius: 2px; position: relative; }
.burger::before, .burger::after { content: ''; position: absolute; left: 0; }
.burger::before { top: -7px; } .burger::after { top: 7px; }
#soundBtn .wave { display: none; } #soundBtn[aria-pressed="true"] .wave { display: block; } #soundBtn[aria-pressed="true"] .mute { display: none; }

/* drawer */
.drawer {
  position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); background: var(--paper); z-index: 80; padding: 28px 28px;
  display: flex; flex-direction: column; gap: 6px; transform: translateX(-102%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  box-shadow: var(--shadow);
}
.drawer.open { transform: none; }
.drawer a { text-decoration: none; font-size: 20px; font-weight: 600; padding: 10px 0; border-bottom: 1px dashed #00000020; }
.drawer .drawer-logo { font-family: var(--display); font-size: 30px; border: 0; margin-bottom: 14px; }
.drawer-close { position: absolute; top: 10px; right: 10px; background: none; border: 0; font-size: 32px; line-height: 1; min-width: 44px; min-height: 44px; }
.scrim { position: fixed; inset: 0; background: #1d171466; z-index: 70; opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.show { opacity: 1; pointer-events: auto; }

/* ---------- street (3D) ---------- */
.street {
  position: relative; height: calc(100svh - var(--bar) - var(--top)); min-height: 480px; max-height: 1000px;
  overflow: hidden; overflow: clip; background: #f7c9c0; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.stage { position: absolute; bottom: 0; left: 0; will-change: transform; pointer-events: none; }
.rig { position: absolute; inset: 0; perspective: 1400px; pointer-events: none; }
/* the world's own plane sits in front of the deeper layers, so it must never catch clicks */
.world { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; pointer-events: none; }
.layer {
  position: absolute; inset: 0; pointer-events: none;
  transform: translateZ(calc(var(--z) * 1px)) scale(calc(1 - var(--z) / 1400));
}
.layer-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.layer .gate { pointer-events: visiblePainted; cursor: pointer; }
.layer .gate:hover .gate-sign { filter: brightness(1.06) drop-shadow(0 0 6px #fff7); }
.gate .portal { transition: filter .3s; }
.gate:hover .portal { filter: saturate(1.3) brightness(1.08); }

/* pins over the gates */
.pin {
  position: absolute; transform: translate(-50%, -100%); pointer-events: auto; border: 0; background: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px; animation: bob 2.4s ease-in-out infinite;
}
.pin-face { width: clamp(40px, 3.8vw, 58px); aspect-ratio: 300 / 380; position: relative; transform: rotate(-4deg); filter: drop-shadow(0 6px 8px #0005); }
.pin-face svg, .pin-face img { width: 100%; height: 100%; display: block; object-fit: contain; }
.pin-face::after { content: ''; position: absolute; inset: -5px; border-radius: 6px; border: 3px solid currentColor; animation: ping 2s ease-out infinite; }
.pin-label { font-weight: 800; font-size: clamp(11px, 1vw, 14px); color: #fff; padding: 1px 12px; border-radius: 99px; box-shadow: 0 4px 10px #0003; letter-spacing: .02em; }
.pin.u { color: var(--u); } .pin.u .pin-label { background: var(--u); }
.pin.k { color: var(--k); } .pin.k .pin-label { background: var(--k); }
.pin::before { /* points the way when the gate is off the edge of the screen */
  content: ''; position: absolute; top: calc(clamp(44px, 4.4vw, 64px) / 2 - 7px); border: 7px solid transparent; display: none;
}
.pin.edge-l::before { display: block; right: 100%; border-right-color: currentColor; }
.pin.edge-r::before { display: block; left: 100%; border-left-color: currentColor; }
@keyframes bob { 50% { transform: translate(-50%, calc(-100% - 8px)); } }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

/* Gaju */
.gaju {
  position: absolute; width: 12.5%; bottom: calc((900 - 712) / 900 * 100%); transform: translateX(-50%);
  pointer-events: auto; cursor: pointer; z-index: 2;
}
.gaju-body { transform-origin: 50% 100%; animation: idle 3s ease-in-out infinite; }
/* Gaju is a picture now (assets/gaju.webp): he rocks from foot to foot when he walks, and lifts when he cheers */
.gaju-waddle { display: block; transform-origin: 50% 100%; }
.gaju.walking .gaju-waddle { animation: gj-waddle .42s ease-in-out infinite alternate; }
.gaju.cheer .gaju-waddle { animation: gj-cheer .7s ease-in-out 2; }
@keyframes gj-waddle { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(3deg) translateY(-4%); } }
@keyframes gj-cheer { 50% { transform: rotate(-6deg) translateY(-8%); } }
.gaju-body img, .gaju-body svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 6px 0 #00000022); transform: scaleX(var(--face, 1)); transition: transform .35s; }
/* Gaju's parts move: legs in pairs when he walks, the ear flaps, the trunk sways, the eyes blink */
.gaju-svg .gj-leg, .gaju-svg .gj-ear, .gaju-svg .gj-trunk, .gaju-svg .gj-eye, .gaju-svg .gj-tail, .gaju-svg .gj-bell { transform-box: view-box; }
.gaju-svg .gj-ear { animation: gj-ear 3.4s ease-in-out infinite; }
.gaju-svg .gj-trunk { animation: gj-trunk 4s ease-in-out infinite; }
.gaju-svg .gj-eye { animation: gj-blink 5.5s infinite; }
.gaju-svg .gj-tail { animation: gj-tail 2.2s ease-in-out infinite; }
.gaju.walking .gaju-svg .gj-leg.a { animation: gj-step .42s ease-in-out infinite alternate; }
.gaju.walking .gaju-svg .gj-leg.b { animation: gj-step .42s ease-in-out infinite alternate-reverse; }
.gaju.walking .gaju-svg .gj-bell { animation: gj-bell .42s ease-in-out infinite alternate; }
.gaju.walking .gaju-svg .gj-trunk { animation-duration: 1.2s; }
.gaju.cheer .gaju-svg .gj-trunk { animation: gj-toot .7s ease-in-out 2; }
@keyframes gj-step { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } }
@keyframes gj-ear { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-12deg); } 90% { transform: rotate(4deg); } }
@keyframes gj-trunk { 50% { transform: rotate(6deg); } }
@keyframes gj-toot { 50% { transform: rotate(-38deg); } }
@keyframes gj-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes gj-tail { 50% { transform: rotate(14deg); } }
@keyframes gj-bell { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.gaju-shadow { position: absolute; left: 12%; right: 12%; bottom: -4%; height: 10%; background: radial-gradient(#0000004d, transparent 70%); }
.gaju.walking .gaju-body { animation: walk .42s ease-in-out infinite; }
.gaju.cheer .gaju-body { animation: cheer .7s ease-in-out 2; }
@keyframes idle { 50% { transform: translateY(-2%) rotate(-1deg); } }
@keyframes walk { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-3%) rotate(1deg); } }
@keyframes cheer { 30% { transform: translateY(-18%) rotate(-6deg); } 60% { transform: translateY(0) rotate(3deg); } }
.bubble {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px); white-space: nowrap; background: #fff; color: var(--ink);
  font-weight: 700; font-size: clamp(12px, 1.15vw, 16px); padding: 6px 14px; border-radius: 16px; box-shadow: 0 6px 18px #0003;
  transition: opacity .25s, transform .25s;
}
.bubble::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top-color: #fff; }
.bubble.hide { opacity: 0; transform: translate(-50%, 6px); }
.dust { position: absolute; bottom: 0; width: 18px; height: 18px; border-radius: 50%; background: #e9c3a6; animation: puff .8s ease-out forwards; pointer-events: none; }
@keyframes puff { from { opacity: .8; transform: scale(.4); } to { opacity: 0; transform: scale(2) translateY(-20px); } }

/* scene animations */
.cloud { animation: drift 60s linear infinite; }
@keyframes drift { from { transform: translateX(-120px); } 50% { transform: translateX(160px); } to { transform: translateX(-120px); } }
.kite { animation: kite 4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes kite { 50% { transform: translate(14px, -10px) rotate(8deg); } }
.bird { animation: flap .5s ease-in-out infinite alternate; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
@keyframes flap { to { transform: scaleY(.4); } }
.flag { animation: flag 1.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes flag { 50% { transform: rotate(9deg); } }
.flutter { animation: flut 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: top; }
@keyframes flut { 50% { transform: skewX(6deg); } }
.sway { animation: sway 5s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom; }
@keyframes sway { 50% { transform: rotate(2.5deg); } }
.dangle { animation: dangle 2.6s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: top; }
@keyframes dangle { 50% { transform: rotate(7deg); } }
.steam { animation: steam 2.4s ease-in-out infinite; }
@keyframes steam { 50% { opacity: .2; transform: translateY(-6px); } }
.ripple { animation: ripple 2.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes ripple { 50% { transform: translateX(8px); opacity: .5; } }
.portal-taxi { animation: bridge 6s linear infinite; }
@keyframes bridge { from { transform: translateX(-30px); } to { transform: translateX(120px); } }
.crow { animation: hop 5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes hop { 0%, 80%, 100% { transform: none; } 85% { transform: translateY(-8px); } 90% { transform: translateY(0) scaleX(-1); } }
.monkey { animation: monkey 3.5s ease-in-out infinite; }
@keyframes monkey { 50% { transform: rotate(-8deg); } }
.glow { animation: glow 2.8s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .55; } }
.clock-min { transform-box: view-box; animation: none; }
.veh-auto { animation: drive-r 16s linear infinite; }
.veh-scooter { animation: drive-r 11s linear infinite; animation-delay: -6s; }
.veh-taxi { animation: drive-l 19s linear infinite; animation-delay: -4s; }
@keyframes drive-r { from { transform: translateX(-260px); } to { transform: translateX(1760px); } }
@keyframes drive-l { from { transform: translateX(1760px); } to { transform: translateX(-260px); } }
.veh > g { animation: rumble .3s ease-in-out infinite alternate; }
@keyframes rumble { to { transform: translateY(1.5px); } }

/* overlays on the street */
.callout {
  /* in the open sky between the two city pins, clear of the road and its traffic */
  position: absolute; left: 50%; top: clamp(12px, 3vh, 28px); z-index: 6; width: min(440px, 40vw); transform: translateX(-50%);
  background: var(--yellow); border-radius: 12px; padding: 14px 18px; box-shadow: 0 10px 30px -10px #6b3b0066;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.callout p { margin: 0 0 10px; font-weight: 700; font-size: 14px; line-height: 1.35; text-transform: uppercase; letter-spacing: .01em; }
.callout strong { text-decoration: underline; text-underline-offset: 3px; }
.callout.away { transform: translate(-50%, -140%); opacity: 0; }
.callout-btns { display: flex; gap: 10px; }
.city-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--ink); border-radius: 99px;
  background: #fff; font-weight: 800; font-size: 16px; padding: 7px 12px; transition: transform .15s, box-shadow .15s;
  box-shadow: 0 3px 0 var(--ink);
}
.btn-stamp { width: 26px; flex: none; transform: rotate(-4deg); }
.btn-stamp svg, .btn-stamp img { width: 100%; height: auto; display: block; }
.city-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.city-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.city-btn.u { color: var(--u); } .city-btn.k { color: var(--k); }
.drag-hint {
  position: absolute; right: 16px; bottom: 14px; z-index: 6; font-size: 12px; font-weight: 600; color: #fff; background: #1d171488;
  padding: 4px 12px; border-radius: 99px; transition: opacity .6s;
}
.drag-hint.gone { opacity: 0; }
.grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; opacity: .35; z-index: 4; }
.street.zooming .callout, .street.zooming .drag-hint { opacity: 0; transition: opacity .3s; }
.street .flash { position: absolute; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; z-index: 7; transition: opacity .6s .5s; }
@media (prefers-reduced-motion: reduce) { .street.zooming .flash { opacity: 1; } }

/* ---------- about ---------- */
.about { background: var(--paper); padding: clamp(48px, 8vw, 96px) 16px 0; }
.about-inner { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center; }
.about-gaju { width: 200px; animation: idle 3s ease-in-out infinite; }
.about h2 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4vw, 40px); margin: 0 0 10px; line-height: 1.1; }
.about p { font-size: 18px; margin: 0 0 12px; color: var(--ink-soft); }
.about-cards { max-width: 980px; margin: 48px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mini-card { background: #fff; border-radius: var(--radius); padding: 22px; display: grid; grid-template-columns: 96px 1fr; gap: 4px 20px; align-items: start; box-shadow: var(--shadow); border-top: 6px solid; }
.mini-card.u { border-color: var(--u); } .mini-card.k { border-color: var(--k); }
.mini-card .card-stamp { grid-row: span 3; width: 96px; transform: rotate(-3deg); filter: drop-shadow(0 4px 6px #0003); }
.card-stamp svg, .card-stamp img { width: 100%; height: auto; display: block; }
.mini-card h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 24px; }
.mini-card p { margin: 0; font-size: 16px; }
.link-btn { background: none; border: 0; padding: 0; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; justify-self: start; }
.mini-card.u .link-btn { color: var(--u); } .mini-card.k .link-btn { color: var(--k); }
.foot { text-align: center; padding: 48px 0 28px; color: var(--ink-soft); font-size: 14px; }

/* ---------- a city: pigeon, scroll, timeline, map ---------- */
.city {
  --night: #221a16; --cream: #f6ead2; --roll: clamp(34px, 4.6vw, 48px);
  position: fixed; inset: 0; z-index: 60; overflow: hidden auto; overscroll-behavior: contain;
  background:
    radial-gradient(ellipse at 50% 0%, #3a2b22 0%, #0000 60%),
    radial-gradient(#ffffff08 1px, #0000 1.4px) 0 0 / 22px 22px,
    var(--night);
  color: var(--cream);
}
.city.delivering { overflow: hidden; }
/* while the arch opens, the scroll waits with the pigeon, off-screen */
.city.arriving .scroll, .city.arriving .runway { visibility: hidden; }
.city-sky { position: fixed; inset: 0; z-index: 2; pointer-events: none; transition: opacity 1.1s ease .2s; background: #f7a28a; overflow: hidden; }
.city-sky .hero-svg, .city-hero .hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-layer { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.city.opened .city-sky { opacity: 0; }

.post-back {
  position: fixed; top: 16px; left: 16px; z-index: 12; border: 2px solid var(--ink); background: #fff; color: var(--ink);
  border-radius: 99px; padding: 6px 16px; font-weight: 700; box-shadow: 0 3px 0 var(--ink);
}
.post-title {
  position: fixed; top: max(64px, 10vh); left: 0; right: 0; z-index: 5; text-align: center; color: var(--ink); pointer-events: none;
  font-family: var(--display); font-size: clamp(22px, 3.4vw, 38px); line-height: 1.1; opacity: 0; transform: translateY(10px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.post-title small { display: block; font-family: var(--font); font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.city.show-title .post-title { opacity: 1; transform: none; }
.city.opened .post-title { opacity: 0; transition-duration: .4s; }

/* the city's picture fills the top half of the screen */
.city-hero { position: relative; z-index: 1; height: 50vh; height: 50svh; overflow: hidden; background: #f7a28a; opacity: 0; transition: opacity 1.1s ease .3s; }
.city.opened .city-hero { opacity: 1; }
/* the team's city poster (16:9, the city's name across the top): shown whole on narrow screens */
.city-hero.photo { background: #221a16; height: min(56.25vw, 70vh); height: min(56.25vw, 70svh); }
.city-hero .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.city.opened .city-hero .hero-photo { animation: kenburns 18s ease-in-out 3s infinite alternate; transform-origin: 50% 0; }
/* the scene in the top half keeps drifting, slowly, like a long camera take */
.city.opened .city-hero .hero-svg { animation: kenburns 18s ease-in-out 3s infinite alternate; transform-origin: 60% 60%; }
@keyframes kenburns { to { transform: scale(1.06); } }
.city-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(#0000, #221a16cc); pointer-events: none; }

/* ----- the scroll: two rollers with gold knobs, a parchment sheet between them ----- */
.scroll { position: relative; z-index: 3; width: min(780px, calc(100% - 96px)); margin: calc(-1 * var(--roll)) auto 0; }
.roll {
  position: relative; height: var(--roll); border-radius: 5px; z-index: 2;
  /* the paper rolled up: the same aged paper as the sheet, shaded like a cylinder */
  background:
    linear-gradient(#2a180a73, #fff3d81f 24%, #fff3d80a 44%, #2a180a26 70%, #2a180a8c),
    url("../assets/paper-roll.webp") center / cover, #d8bd8f;
  box-shadow: 0 8px 14px -6px #0009, inset 0 0 0 1px #5b3d1a33;
}
.roll::before, .roll::after { /* the rolled end of the paper */
  content: ''; position: absolute; top: 0; bottom: 0; width: 9px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, #6d4f2b 0 18%, #c9ab7b 22% 40%, #8f7047 44% 52%, #d6bb8c 56% 78%, #a4835a 82%);
}
.roll::before { left: -3px; } .roll::after { right: -3px; }
/* turned wooden handles */
.knob {
  position: absolute; top: 50%; width: calc(var(--roll) * .72); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #a0724a 0, #6e4526 30%, #4a2b14 62%, #26150a);
  box-shadow: 0 3px 6px #0007, inset 0 -2px 3px #0005; transform: translateY(-50%);
}
.knob::before { /* the handle's neck, going into the roll */
  content: ''; position: absolute; top: 24%; bottom: 24%; width: calc(var(--roll) * .46); border-radius: 3px;
  background: linear-gradient(#2e1a0b, #7a5030 40%, #5a3519 65%, #24140a);
}
.knob.l { right: calc(100% + var(--roll) * .36); } .knob.l::before { left: 80%; }
.knob.r { left: calc(100% + var(--roll) * .36); } .knob.r::before { right: 80%; }

.sheet {
  position: relative; height: 0; overflow: hidden; margin: 0 6px; z-index: 1;
  /* a photo of real aged paper (assets/paper.webp: the picture and its mirror image stacked, so it repeats
     down a long letter without a seam), with the shadow the rollers cast on it */
  background: url("../assets/paper.webp") center top / 100% auto repeat-y, #e3c99c;
  box-shadow: inset 0 14px 14px -12px #3b240f99, inset 0 -14px 14px -12px #3b240f99, inset 0 0 30px #6b46201f;
}

/* the cord round the closed scroll, and the wax seal over its knot */
.tie { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--roll) * 2); overflow: visible; z-index: 3; pointer-events: none; transition: opacity .25s; }
.seal {
  position: absolute; left: 50%; top: var(--roll); width: clamp(54px, 7vw, 68px); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 4;
  border: 0; padding: 0; background: none; display: grid; place-items: center; transition: opacity .4s;
}
.seal-half {
  position: absolute; inset: 0; border-radius: 47% 53% 49% 51% / 52% 46% 54% 48%;
  background: radial-gradient(circle at 35% 30%, #d9443c, #a01e1b 60%, #7d1312);
  box-shadow: 0 3px 6px #0005, inset 0 0 0 5px #8e191699, inset 0 0 0 8px #c3302a;
  transition: transform .5s cubic-bezier(.3,.6,.4,1), opacity .5s .1s;
}
.seal-half.a { clip-path: polygon(0 0, 54% 0, 44% 40%, 56% 62%, 46% 100%, 0 100%); }
.seal-half.b { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%, 56% 62%, 44% 40%); }
.seal-v { position: relative; font-family: 'Anek Devanagari', 'Anek Bangla', sans-serif; font-weight: 800; color: #f5cfc7; font-size: clamp(22px, 3.2vw, 30px); text-shadow: 0 1px 0 #0005; transition: opacity .2s; }
.seal-lock { position: absolute; bottom: -6px; right: -6px; background: var(--ink); border-radius: 50%; padding: 4px; width: 28px; height: 28px; display: none; }
.city.locked .seal-lock { display: block; }
.city.locked .seal { animation: wiggle 1.8s ease-in-out infinite; }
@keyframes wiggle { 0%, 70%, 100% { transform: translate(-50%, -50%); } 80% { transform: translate(-50%, -50%) rotate(-8deg); } 90% { transform: translate(-50%, -50%) rotate(8deg); } }
.scroll.broken .seal { pointer-events: none; }
.scroll.broken .seal-v { opacity: 0; }
.scroll.broken .seal-half.a { transform: translate(-46px, 70px) rotate(-38deg); opacity: 0; }
.scroll.broken .seal-half.b { transform: translate(40px, 90px) rotate(32deg); opacity: 0; }

/* the letter, written on the parchment */
.letter { position: relative; padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 60px) clamp(28px, 4vw, 44px); color: #3a2816; }
.letter-stamp { position: absolute; top: 18px; right: clamp(12px, 4vw, 40px); width: clamp(64px, 10vw, 104px); transform: rotate(6deg); filter: drop-shadow(0 4px 5px #5a3a1a55); }
.letter-stamp svg, .letter-stamp img { width: 100%; height: auto; display: block; }
.letter-kicker { font-weight: 800; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0; padding-right: 110px; }
.letter h2 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 7vw, 68px); line-height: 1; margin: 6px 0 2px; color: var(--accent); filter: saturate(.8); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35em; padding-right: clamp(64px, 12vw, 124px); }
.letter[data-city="kolkata"] { --read: 'Tiro Bangla', Georgia, serif; }
.letter h2 .native { font-family: 'Anek Devanagari', 'Anek Bangla', sans-serif; font-weight: 800; font-size: 1em; line-height: 1.15; color: var(--lac); }
.greet { font-family: var(--hand); font-size: clamp(26px, 4vw, 36px); margin: 18px 0 6px; color: #2c1e10; }
.greet span { font-size: .6em; color: #6b5034; }
.letter-body p { font-family: var(--read); font-size: clamp(18px, 2.1vw, 21px); line-height: 1.6; margin: 0 0 14px; max-width: 64ch; }
.letter-body p:first-child::first-letter { float: left; font-family: var(--display); font-size: 3.1em; line-height: .9; padding: 4px 8px 0 0; color: var(--accent); }
/* Four quick facts, set like postal labels on the letter: a postmark ring with a drawn mark, a small-caps
   label in the city's colour, the value in the display face, a double rule and a faint tilt. */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px clamp(10px, 1.6vw, 18px); margin: 26px 0 8px; }
.fact {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px;
  padding: 20px 14px; border-radius: 4px; min-height: 196px;
  background: linear-gradient(180deg, #fffaf0cc, #f6e8c9cc), radial-gradient(circle at 30% 20%, #fff6, transparent 60%);
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, #6b5034);
  box-shadow: inset 0 0 0 4px #fdf6e6, inset 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent), 0 6px 14px -8px #3a281666, 0 1px 0 #fff8 inset;
  transform: rotate(calc((var(--i) - 1.5) * .6deg));
  animation: factIn .6s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: calc(var(--i) * 90ms);
}
.fact::before, .fact::after { content: ''; position: absolute; width: 9px; height: 9px; border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); transform: rotate(45deg); background: #fdf6e6; top: -6px; }
.fact::before { left: calc(50% - 5px); }
.fact::after { top: auto; bottom: -6px; left: calc(50% - 5px); }
.fact-mark {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--accent);
  border: 1.5px dashed color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 4px #fdf6e6, 0 0 0 5.5px color-mix(in srgb, var(--accent) 40%, transparent);
  margin-bottom: 4px;
}
.fact-mark svg { width: 26px; height: 26px; }
.fact-k { font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.fact-k { text-wrap: balance; line-height: 1.35; }
.fact-k::after { content: ''; display: block; width: 28px; height: 1.5px; margin: 7px auto 2px; background: currentColor; opacity: .45; }
.fact-v { font-family: var(--display); font-weight: 400; font-size: clamp(18px, 2vw, 23px); line-height: 1.15; color: #2c1e10; text-wrap: balance; }
@keyframes factIn { from { opacity: 0; transform: translateY(10px) rotate(0deg) scale(.96); } }
@media (max-width: 720px) { .facts { grid-template-columns: repeat(2, 1fr); } }
.letter-src { margin: 14px 0 0; font-size: 13px; color: #6b5034; }
.letter-src a { color: #5a3a1a; }
.signoff { font-family: var(--hand); font-size: 30px; margin: 26px 0 0; text-align: right; color: #2c1e10; display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.signoff img { width: 100px; mix-blend-mode: multiply; }

/* the falling twine, drawn over the page */
.rope-layer { position: absolute; left: 0; top: 0; width: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.runway { position: relative; height: 60vh; height: 60svh; }
.runway p { position: absolute; left: 50%; bottom: 18%; margin: 0; font-family: var(--hand); font-size: 28px; color: #f6ead2aa; transform: translateX(-50%) rotate(-3deg); }
.city.delivering .runway, .city.delivering .story { visibility: hidden; }

/* Gaju sliding down the thread (rideThread in city.js). The holder sits exactly on the thread; the picture hangs
   from the tip of his trunk and turns round the thread from there. */
.rider { --gw: 92px; position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 5; pointer-events: none; perspective: 520px; perspective-origin: 0 0; will-change: transform; }
.rider[hidden] { display: none; }
.rider img {
  position: absolute; left: calc(var(--gw) * -.03); top: calc(var(--gw) * -.012); width: var(--gw); height: auto; max-width: none;
  transform-origin: 3% 1.7%; will-change: transform; filter: drop-shadow(0 6px 6px #0007);
}
/* the end of his trunk curled twice round the thread */
.rider-coil, .rider-coil::after {
  position: absolute; left: calc(var(--gw) * -.07); top: calc(var(--gw) * -.06); width: calc(var(--gw) * .14); height: calc(var(--gw) * .07);
  box-sizing: border-box; border-radius: 50%; border: calc(var(--gw) * .028) solid #4a3187; border-top-color: #4a318700;
}
.rider-coil::after { content: ''; left: -2%; top: 70%; width: 104%; border-color: #3f2a75; border-top-color: #3f2a7500; }
/* the bit of thread in front of him while he is round the back */
.rider-cord { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible; }

/* ----- the pigeon ----- */
.pigeon[hidden] { display: none; }
.pigeon { position: fixed; left: 0; top: 0; z-index: 8; pointer-events: none; will-change: transform; }
.pigeon .pg { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 12px #0003); transform-origin: 50% 40%; }
/* a photo-like dove can't flap, so it glides: a slow rise and fall with a little tilt */
.pigeon.flying .pg { animation: glide .9s ease-in-out infinite alternate; }
.pigeon.released .pg { animation-duration: .5s; }
@keyframes glide { from { transform: translateY(-3px) rotate(-1.5deg) scaleY(1); } to { transform: translateY(4px) rotate(1.5deg) scaleY(.96); } }

.checkpoint {
  position: fixed; left: 50%; bottom: max(20px, 5vh); z-index: 9; width: min(460px, calc(100vw - 32px)); transform: translateX(-50%);
  background: #fff; color: var(--ink); border-radius: 16px; padding: 20px 22px; text-align: center; box-shadow: var(--shadow); border: 2px solid var(--ink);
  animation: riseX .45s cubic-bezier(.2,.9,.3,1.2);
}
.cp-badge { display: inline-block; background: var(--yellow); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 2px 12px; border-radius: 99px; border: 2px solid var(--ink); }
.checkpoint h3 { font-family: var(--display); font-weight: 400; margin: 8px 0 4px; font-size: 22px; }
.checkpoint p { margin: 0 0 14px; color: var(--ink-soft); font-size: 15px; }
.cp-btns { display: flex; gap: 10px; justify-content: center; }
@keyframes riseX { from { opacity: 0; transform: translate(-50%, 20px); } }
.open-hint { position: fixed; left: 50%; bottom: 8vh; z-index: 9; transform: translateX(-50%); font-weight: 800; background: var(--ink); color: #fff; padding: 6px 16px; border-radius: 99px; }

/* ----- the timeline: a sticky stage the thread moves across as you scroll ----- */
.story { position: relative; }
.story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.story-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.story-head { position: absolute; left: 0; right: 0; top: 12%; text-align: center; padding: 0 16px; pointer-events: none; }
.story-head small { font-weight: 800; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #e9c46a; }
.story-head h3 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 5vw, 54px); line-height: 1.05; margin: 6px 0 8px; }
.story-head p { margin: 0; font-family: var(--hand); font-size: 24px; color: #f6ead2b3; }

.nodes { position: absolute; inset: 0; pointer-events: none; }
.node {
  --s: clamp(46px, 5vw, 64px); position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border: 0; padding: 0; background: none; pointer-events: auto; transition: opacity .3s; will-change: transform;
}
.medal {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 40% 35%, #fbf1d8, #e2cb9c); color: #3a2816;
  box-shadow: 0 0 0 3px #d8a93b, 0 0 0 5px #7a5310, 0 0 0 7px #e8730c55, 0 6px 14px #0007; transition: transform .35s cubic-bezier(.2,.9,.3,1.3), box-shadow .35s;
}
.medal::after { /* a ring of brass dots, like a coin's edge */
  content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 2px dotted #b98a2e99; pointer-events: none;
}
.node .medal { position: relative; }
.medal img { width: 100%; height: 100%; object-fit: cover; }
.medal svg { width: 78%; height: 78%; }
.medal b { font-family: var(--display); font-weight: 400; font-size: calc(var(--s) * .24); letter-spacing: -.02em; }
.node-year { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 15px; white-space: nowrap; color: #f6ead2cc; transition: opacity .3s; }
.node.row .node-year { left: 50%; top: calc(100% + 8px); transform: translateX(-50%); }
.node.on .medal { transform: scale(1.3); box-shadow: 0 0 0 3px #9c7646, 0 0 0 6px var(--accent), 0 0 0 10px #f6ead233, 0 10px 24px #000a; }
.node.on .node-year { opacity: 0; }
.node:hover .medal { transform: scale(1.12); }
.node.on:hover .medal { transform: scale(1.3); }

.ev { position: absolute; inset: 0; pointer-events: none; transition: opacity .2s; }
.ev-info { position: absolute; left: clamp(180px, 20vw, 300px); top: 50%; width: min(440px, 38vw); transform: translateY(-38%); pointer-events: auto; }
.ev-year { font-family: var(--display); font-size: clamp(54px, 8vw, 104px); line-height: .9; margin: 0; color: var(--cream); text-shadow: 0 4px 0 #0005; }
.ev-year::after { content: ''; display: block; width: 64px; height: 5px; border-radius: 3px; background: var(--accent); margin: 12px 0 0; filter: brightness(1.4); }
.ev-info h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; margin: 16px 0 8px; }
.ev-text { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; margin: 0; color: #f6ead2d9; }
.ev-src { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 14px; color: #e9c46a; }
.ev-count { margin: 14px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #f6ead277; }
.ev-media { position: absolute; inset: 0; }
.snap { position: absolute; margin: 0; background: #fbf6ea; padding: 8px 8px 0; box-shadow: 0 18px 40px -12px #000c; pointer-events: auto; }
.snap img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #d9cdb4; }
.snap figcaption { font-family: var(--hand); font-size: 18px; color: #3a2816; padding: 4px 2px 8px; line-height: 1.1; }
.snap:not(:has(figcaption)) { padding-bottom: 8px; }
/* right and top of the text */
.snap.m0 { right: 5vw; top: 30%; width: min(30vw, 400px); transform: rotate(3deg); }
.snap.m1 { left: clamp(200px, 30vw, 460px); top: 5%; width: min(17vw, 230px); transform: rotate(-4deg); }
.snap.stamp.m1 { left: auto; right: 4vw; top: 8%; width: min(11vw, 140px); z-index: 2; transform: rotate(8deg); }
.snap.m2 { right: 4vw; top: 6%; width: min(15vw, 210px); transform: rotate(-6deg); }
.snap.m3 { right: calc(5vw + min(30vw, 400px) - 70px); bottom: 5%; width: min(14vw, 190px); transform: rotate(5deg); }
.snap.stamp { width: min(18vw, 210px); padding: 10px; top: 24%; right: 9vw; transform: rotate(4deg); background: #fbf6ea; }
.snap.stamp img { aspect-ratio: auto; background: none; }
.element { position: absolute; right: 6vw; top: 50%; width: min(30vw, 380px); margin: 0; transform: translateY(-50%); pointer-events: none; }
.element-disc {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative;
  background:
    radial-gradient(circle, #fbf1d8 0 58%, #0000 58.5%),
    repeating-conic-gradient(from 0deg, #e8730c 0 7.5deg, #f7b733 7.5deg 15deg);
  box-shadow: 0 0 0 6px #d8a93b, 0 0 0 9px #6b4a12, 0 0 0 16px #f6ead214, 0 30px 60px -20px #000c;
  animation: element-in .7s cubic-bezier(.2,.9,.3,1.2), bob-soft 6s ease-in-out .7s infinite;
}
.element-disc::before { content: ''; position: absolute; inset: 21%; border-radius: 50%; border: 2px dashed #b98a2e88; }
.element-disc svg { width: 54%; height: 54%; position: relative; filter: drop-shadow(0 4px 0 #0001); }
@keyframes element-in { from { transform: scale(.6) rotate(-20deg); opacity: 0; } }
@keyframes bob-soft { 50% { transform: translateY(-10px) rotate(2deg); } }
.ev-count .draft { color: #f7b733; }
.ev-ghost { position: absolute; right: 2vw; bottom: 4%; font-family: var(--display); font-size: clamp(90px, 18vw, 260px); line-height: .8; color: #f6ead20d; -webkit-text-stroke: 2px #f6ead21f; }

.map-end { position: absolute; left: 0; right: 0; bottom: max(24px, 5vh); text-align: center; padding: 0 16px; transition: opacity .3s; }
.map-end h3 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 5vw, 56px); margin: 0; line-height: 1; }
.map-end p { margin: 6px 0 14px; font-family: var(--hand); font-size: 24px; color: #f6ead2bb; }
.map-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.map-btns .btn { color: var(--ink); }
.map-end .map-src { font-family: var(--font); font-size: 12px; color: #f6ead270; margin: 14px 0 0; }
.map-end { pointer-events: none; }
.map-end .map-btns, .map-end a { pointer-events: auto; }

/* heritage places on the outline map */
.places { position: absolute; inset: 0; pointer-events: none; }
/* the marigold is small, but the place you can tap is a fingertip wide */
.pp { --c: #f7b733; --r: #b5530a; position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: scale(0); transition: transform .35s cubic-bezier(.2,.9,.3,1.4) var(--d, 0ms); }
.pp::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6 0 20%, var(--c) 21%); box-shadow: 0 0 0 1.5px var(--r), 0 0 10px var(--c); }
.pp.big::before { inset: 11px; background: radial-gradient(circle, #fff3c4 0 22%, var(--r) 23% 32%, #0000 33%), repeating-conic-gradient(var(--c) 0 20deg, var(--r) 20deg 24deg); box-shadow: 0 0 0 2px #2a1d12, 0 0 14px var(--c); }
.places.on .pp { transform: scale(1); pointer-events: auto; }
.pp.k-culture { --c: #ff7eb3; --r: #a3245f; }
.pp.k-nature { --c: #6fd39a; --r: #23744a; }
.pp.k-civic { --c: #7fb0ff; --r: #2a55a8; }
.places.hide-built .k-built, .places.hide-culture .k-culture, .places.hide-nature .k-nature, .places.hide-civic .k-civic { display: none; }
.pp-name { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; font: 700 12px/1 var(--font); color: #2a1d12;
  background: #f6ead2; padding: 4px 8px; border-radius: 99px; box-shadow: 0 4px 10px #0008; opacity: 0; pointer-events: none; transition: opacity .15s; }
.pp:hover, .pp:focus-visible, .pp.sel { z-index: 3; }
.places.on .pp:hover, .places.on .pp:focus-visible, .places.on .pp.sel { transform: scale(1.5); transition-delay: 0ms; }
.pp:hover .pp-name, .pp:focus-visible .pp-name, .pp.sel .pp-name { opacity: 1; }
.pp.sel::after { content: ''; position: absolute; inset: 1px; border-radius: 50%; border: 2px solid var(--c); animation: pp-pulse 1.6s ease-out infinite; }
@keyframes pp-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

.place-legend { position: absolute; top: max(76px, 9vh); left: 0; right: 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0 16px; transition: opacity .3s; }
.chip { --c: #f7b733; display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid #f6ead240; background: #1e150dcc; color: #f6ead2; border-radius: 99px; padding: 6px 12px; font: 700 13px/1 var(--font); cursor: pointer; }
.chip i, .pc-kind i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.chip b { color: #f6ead290; font-weight: 700; }
.chip[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.k-culture { --c: #ff7eb3; } .k-nature { --c: #6fd39a; } .k-civic { --c: #7fb0ff; }

.place-card { position: absolute; right: 5vw; top: 50%; transform: translateY(-55%); width: min(340px, 28vw); background: #fbf3e0; color: #2a1d12; border-radius: 14px; padding: 16px 18px 14px;
  box-shadow: 0 0 0 4px #d8a93b, 0 0 0 6px #6b4a12, 0 30px 60px -20px #000; transition: opacity .3s; }
.place-card[hidden] { display: none; }
.pc-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #2a1d1214; font-size: 20px; line-height: 1; color: #2a1d12; cursor: pointer; z-index: 1; }
.pc-photo { margin: -4px -6px 12px; }
.pc-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: 8px; background: #d9cdb4; }
.pc-photo figcaption { font-size: 11px; margin-top: 4px; }
.pc-photo figcaption a { color: #2a1d1299; }
.pc-kind { display: flex; align-items: center; gap: 7px; margin: 0 30px 6px 0; font: 800 11px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #8a5a17; }
.pc-kind i { flex: none; box-shadow: 0 0 0 1.5px #2a1d1240; }
.place-card h4 { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.05; margin: 0; }
.pc-native { margin: 4px 0 0; font-size: 17px; color: #6b4a12; }
.pc-text { margin: 10px 0 0; font-family: var(--read); font-size: 16px; line-height: 1.4; }
.pc-foot { display: flex; gap: 12px; align-items: center; margin: 12px 0 0; font-size: 13px; font-weight: 700; }
.pc-foot a { color: #b5530a; }
.pc-foot .draft { color: #a3245f; font-size: 12px; }

@media (max-width: 720px) {
  .scroll { width: calc(100% - 92px); }
  .letter-kicker { padding-right: 70px; }
  .ev-info { left: 84px; right: 16px; width: auto; top: auto; bottom: 7%; transform: none; }
  .ev-year { font-size: 52px; }
  .ev-info h3 { margin-top: 10px; }
  .ev-text { font-size: 15.5px; }
  .snap.m0 { left: 84px; right: auto; top: 9%; width: 52vw; transform: rotate(-3deg); }
  .snap.m1 { left: auto; right: 12px; top: 18%; width: 34vw; transform: rotate(5deg); }
  .snap.m2, .snap.m3 { display: none; }
  .snap.stamp { left: auto; right: 16px; top: 10%; width: 32vw; }
  .snap.stamp.m1 { left: auto; right: 16px; width: 20vw; top: 8%; }
  .element { right: auto; left: 84px; top: 10%; width: 46vw; transform: none; }
  .ev-ghost { display: none; }
  .node { --s: 42px; }
  .node.row { --s: 38px; }
  .story-head { top: 11%; }
  .node-year { font-size: 13px; }
  .node:not(.row) .node-year { display: none; }
  .story-head { top: 14%; }
  .place-legend { top: 66px; gap: 6px; }
  .chip { padding: 5px 9px; font-size: 12px; }
  .place-card { left: 12px; right: 12px; top: auto; bottom: 40px; width: auto; transform: none; max-height: 58svh; overflow: auto; z-index: 4; }
  .pc-photo img { aspect-ratio: 16 / 8; }
  .place-card h4 { font-size: 22px; }
}

/* ---------- buttons & forms ---------- */
.btn { border: 2px solid var(--ink); border-radius: 12px; background: #fff; padding: 10px 18px; font-weight: 800; font-size: 16px; box-shadow: 0 3px 0 var(--ink); transition: transform .12s, box-shadow .12s; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: var(--yellow); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }

.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: #1d1714a6; animation: fade .2s; overflow-y: auto; }
@keyframes fade { from { opacity: 0; } }
.modal-card { position: relative; width: min(440px, 100%); background: var(--paper); border-radius: 20px; padding: 28px 24px 22px; box-shadow: 0 30px 80px -20px #000a; animation: pop .35s cubic-bezier(.2,.9,.3,1.3); margin: auto; }
@keyframes pop { from { transform: scale(.9) translateY(20px); opacity: 0; } }
.modal-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 30px; line-height: 1; padding: 4px 8px; }
.auth-gaju { width: 96px; margin: -78px auto 4px; animation: idle 3s ease-in-out infinite; }
.auth-card h2 { font-family: var(--display); font-weight: 400; text-align: center; margin: 0; font-size: 28px; }
.auth-sub { text-align: center; margin: 2px 0 16px; color: var(--ink-soft); }
.google-slot { display: flex; justify-content: center; min-height: 0; }
.google-slot:empty { display: none; }
.google-fallback { width: 100%; background: #fff; box-shadow: 0 3px 0 #00000033; border-color: #00000033; font-weight: 700; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 14px; margin: 16px 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: #00000022; }
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #00000010; border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 16px; }
.tab { border: 0; background: none; border-radius: 9px; padding: 7px 4px; font-weight: 700; font-size: 14px; }
.tab[aria-selected="true"] { background: #fff; box-shadow: 0 2px 6px #0002; }
.pane label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.pane input { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 17px; padding: 10px 12px; border: 2px solid #00000026; border-radius: 10px; background: #fff; }
.pane input:focus { outline: none; border-color: var(--u); }
.phone-row { display: flex; margin-top: 4px; }
.phone-row .cc { display: grid; place-items: center; padding: 0 12px; border: 2px solid #00000026; border-right: 0; border-radius: 10px 0 0 10px; background: #f3ecdf; font-weight: 700; }
.phone-row input { margin: 0; border-radius: 0 10px 10px 0; }
.hint { font-size: 13px; color: var(--ink-soft); margin: -4px 0 14px; }
.otp-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 10px 0 14px; }
.otp-boxes input { text-align: center; font-size: 24px; font-weight: 800; padding: 10px 0; border: 2px solid #00000026; border-radius: 10px; background: #fff; width: 100%; font-family: inherit; }
.otp-boxes input:focus { outline: none; border-color: var(--u); }
.otp-boxes.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }
.sent-to { font-size: 15px; margin: 0; }
.resend { text-align: center; font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; }
.switch { text-align: center; font-size: 14px; margin: 12px 0 0; }
.form-error { color: #b3261e; font-weight: 700; text-align: center; min-height: 1.4em; margin: 10px 0 0; font-size: 15px; }

/* passport */
.passport { background: #24305e; color: #f4ead8; width: min(520px, 100%); }
.passport .modal-x { color: #f4ead8; }
.pp-head { text-align: center; border-bottom: 1px dashed #f4ead855; padding-bottom: 12px; margin-bottom: 16px; }
.pp-head span { font-size: 12px; letter-spacing: .2em; font-weight: 700; opacity: .7; }
.pp-head h2 { font-family: var(--display); font-weight: 400; margin: 2px 0 0; font-size: 26px; color: #e9c46a; }
.pp-who { display: flex; gap: 14px; align-items: center; background: #f4ead8; color: var(--ink); border-radius: 12px; padding: 12px 14px; }
.pp-who .av { width: 56px; height: 56px; border-radius: 10px; background: var(--yellow); display: grid; place-items: center; font-family: var(--display); font-size: 26px; overflow: hidden; flex: none; }
.pp-who .av img { width: 100%; height: 100%; object-fit: cover; }
.pp-who b { font-size: 19px; display: block; line-height: 1.2; }
.pp-who small { color: var(--ink-soft); font-size: 13px; }
.pp-stamps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.pp-slot { background: #f4ead8; border-radius: 12px; padding: 12px; text-align: center; color: var(--ink); }
.pp-stamp { width: 62%; margin: 0 auto 8px; transform: rotate(-3deg); }
.pp-stamp svg, .pp-stamp img { width: 100%; height: auto; display: block; }
.pp-slot.empty .pp-stamp { filter: grayscale(1) opacity(.3); }
.pp-slot b { display: block; font-size: 16px; }
.pp-slot small { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
.pp-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.passport .btn { box-shadow: 0 3px 0 #0006; color: var(--ink); }

/* demo SMS + toast */
.sms {
  position: fixed; top: 12px; left: 50%; z-index: 120; width: min(380px, calc(100vw - 24px)); transform: translateX(-50%);
  background: #fffffff2; backdrop-filter: blur(10px); border-radius: 18px; padding: 12px 16px; box-shadow: 0 16px 40px -10px #0006;
  animation: drop .45s cubic-bezier(.2,.9,.3,1.2); cursor: pointer;
}
@keyframes drop { from { transform: translate(-50%, -140%); } }
.sms-app { font-size: 12px; color: #666; display: flex; align-items: center; gap: 6px; }
.sms-app em { margin-left: auto; font-style: normal; background: var(--yellow); color: var(--ink); font-weight: 800; padding: 0 8px; border-radius: 99px; font-size: 11px; }
.sms-dot { width: 18px; height: 18px; border-radius: 5px; background: #34c759; }
.sms-from { font-weight: 800; margin-top: 4px; }
.sms-body { font-size: 15px; }
.sms-body b { letter-spacing: .14em; font-size: 18px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 40px); opacity: 0; z-index: 130; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 99px; font-weight: 700; transition: all .3s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  .topnav { display: none; }
  :root { --top: 64px; --bar: 32px; }
  .ticker-track span { font-size: 12px; }
  /* phones: the street is about two screen-widths of the scene, so its box is only as tall as that plus the card
     above it; before, the box filled the screen and left an empty pink gap */
  .street { height: min(calc(100svh - var(--bar) - var(--top)), calc(112.5vw + 190px)); min-height: 0; }
  /* phones: the street sits low, so the card lives in the open sky above it */
  .callout { left: 16px; right: 16px; width: auto; transform: none; top: 16px; padding: 14px 16px; }
  .callout.away { transform: translateY(-40px); }
  .icon-btn { padding: 6px; }
  .callout p { font-size: 13px; }
  .drag-hint { display: none; }
  .about-inner { grid-template-columns: 1fr; text-align: center; gap: 12px; }
  .about-gaju { width: 150px; margin: 0 auto; }
  .about-cards { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .gaju { width: 15%; }
}
@media (max-width: 420px) {
  /* four header buttons, a menu and the logo must fit in one row on a small phone */
  .topbar { padding: 0 6px; }
  .topbar-right { gap: 0; }
  .icon-btn { min-width: 42px; min-height: 44px; padding: 6px; }
  .logo { font-size: 27px; }
  .mini-card { grid-template-columns: 72px 1fr; }
  .mini-card .card-stamp { width: 72px; }
  .tab { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* content still being checked, points, load error */
.empty-note { margin: 8px 0 0; padding: 16px 18px; border: 2px dashed var(--accent); border-radius: 14px; color: var(--ink-soft); background: #fff; }
.pp-points { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: #fff6dc; color: #2a1c08; font-size: 15px; }
.pp-points small { color: #5a4a30; }
.pp-points b { font-size: 28px; margin-right: 4px; }
.pp-points small { display: block; font-size: 12.5px; margin-top: 2px; }
.load-error { margin: 0; padding: 14px 16px; background: #b3261e; color: #fff; text-align: center; font-weight: 700; }

.demo-badge { position: fixed; right: 12px; bottom: 12px; z-index: 140; background: #1d1714e6; color: #f7c744; font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 5px 12px; border-radius: 99px; pointer-events: none; }

/* ---------- through the arch: the city opens inside the gate's arch, which grows past the edges of the screen ---------- */
.arch-frame { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 61; pointer-events: none; overflow: visible; }
.arch-frame path { fill: none; }
.skip {
  position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 70;
  border: 2px solid var(--ink); background: #fff; color: var(--ink); border-radius: 99px; padding: 8px 18px; font-weight: 800; box-shadow: 0 3px 0 var(--ink);
}
.snap.stamp svg, .snap.stamp img { width: 100%; height: auto; display: block; }

/* the arrival scenes move a little: boats drift, the taxi and bus cross the bridge */
.hero-boat { animation: boat 9s ease-in-out infinite alternate; }
.hero-boat.slow { animation-duration: 14s; animation-direction: alternate-reverse; }
@keyframes boat { from { transform: translateX(-30px); } to { transform: translateX(60px); } }
.hero-car { animation: cross 11s linear infinite; }
.hero-car.bus { animation-duration: 17s; animation-delay: -6s; animation-direction: reverse; }
@keyframes cross { from { transform: translateX(-200px); } to { transform: translateX(1800px); } }

/* ---------- inside the letter: fact cards, by section ---------- */
.inside { margin: 30px 0 8px; display: grid; gap: 22px; }
.inside-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 2px solid #6b503466; padding-top: 14px; }
.inside-h h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.6vw, 26px); color: #3a2816; }
.inside-h small { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #7a5c3c; }
.sec { display: grid; gap: 10px; }
.sec-label { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.sec-label svg { width: 26px; height: 26px; flex: none; }
.sec-label .done { margin-left: auto; font-size: 11px; letter-spacing: .08em; color: #3c7a4f; opacity: 0; transition: opacity .4s; }
.sec.read .sec-label .done { opacity: 1; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.card {
  position: relative; background: #fff8e6; border: 1.5px solid #6b503455; border-radius: 4px; padding: 14px 16px 12px; color: #2c1e10;
  box-shadow: 0 2px 0 #6b503422, 0 10px 18px -14px #5a3a1a;
}
.card::before { /* a strip of postcard border */
  content: ''; position: absolute; inset: 0 0 auto; height: 5px; border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(90deg, var(--accent) 0 12px, #fff8e6 12px 18px, var(--lac) 18px 30px, #fff8e6 30px 36px);
}
.card h4 { margin: 4px 0 4px; font-family: var(--font); font-weight: 800; font-size: 18px; line-height: 1.2; }
.card p { margin: 0; font-family: var(--read); font-size: 16px; line-height: 1.5; }
.card a { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: #5a3a1a; }
.card .draft, .q-draft { color: #a3245f; font-size: 12px; font-weight: 700; margin-left: 8px; }
.inside-empty { margin: 0; padding: 14px 16px; border: 1.5px dashed #6b503488; border-radius: 6px; font-size: 15px; color: #5a4a30; }

/* ---------- seal the letter: a short quiz that presses the seal ---------- */
.sealq { margin: 30px 0 4px; padding: 20px clamp(16px, 3vw, 26px) 22px; border-radius: 8px; background: #3a2816; color: #f6ead2; box-shadow: inset 0 0 0 2px #d8a93b, inset 0 0 0 5px #3a2816, inset 0 0 0 6px #d8a93b66; }
.sealq-head { display: flex; align-items: center; gap: 14px; }
.sealq-head h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 3vw, 30px); line-height: 1.1; }
.sealq-head p { margin: 2px 0 0; font-size: 15px; color: #f6ead2bb; }
.sealq-steps { display: flex; gap: 6px; margin: 14px 0 4px; }
.sealq-steps i { flex: 1; height: 5px; border-radius: 3px; background: #f6ead22a; }
.sealq-steps i.ok { background: #e9c46a; } .sealq-steps i.no { background: #c46a5a; } .sealq-steps i.now { background: #f6ead288; }
.q-text { font-size: clamp(19px, 2.3vw, 23px); font-weight: 700; line-height: 1.3; margin: 12px 0 14px; }
.q-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.q-opt {
  text-align: left; border: 2px solid #f6ead244; background: #f6ead212; color: #f6ead2; border-radius: 10px; padding: 12px 14px; min-height: 52px;
  font-size: 17px; font-weight: 600; transition: background .15s, border-color .15s, transform .12s;
}
.q-opt:hover:not([disabled]) { border-color: #e9c46a; background: #f6ead21f; }
.q-opt:active:not([disabled]) { transform: scale(.98); }
.q-opt[disabled] { cursor: default; }
.q-opt.right { border-color: #9ad08a; background: #5d9a4a55; }
.q-opt.wrong { border-color: #e48a78; background: #b5281c55; }
.q-feedback { min-height: 1.5em; margin: 12px 0 0; font-size: 16px; color: #f6ead2dd; }
.q-feedback b { color: #e9c46a; }
.q-next { margin-top: 12px; }
.sealq .btn { color: var(--ink); }
.seal-result { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 6px 0; }
.wax-row { display: flex; gap: 14px; }
.wax { width: clamp(54px, 9vw, 72px); aspect-ratio: 1; border-radius: 47% 53% 49% 51% / 52% 46% 54% 48%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #d9443c, #a01e1b 60%, #7d1312); box-shadow: 0 3px 6px #0006, inset 0 0 0 5px #8e191699, inset 0 0 0 8px #c3302a;
  font-family: 'Anek Devanagari', 'Anek Bangla', sans-serif; font-weight: 800; font-size: clamp(22px, 3.4vw, 30px); color: #f5cfc7; }
.wax.off { background: none; box-shadow: inset 0 0 0 2px #f6ead244; color: #f6ead233; }
.wax.press { animation: press .5s cubic-bezier(.2,.9,.3,1.4) both; animation-delay: var(--d, 0s); }
@keyframes press { from { transform: scale(1.8) rotate(-12deg); opacity: 0; } }
.seal-result h4 { margin: 4px 0 0; font-family: var(--display); font-weight: 400; font-size: 24px; }
.seal-result p { margin: 0; color: #f6ead2cc; }

/* the invitation to sign the passport */
.cp-x { position: absolute; top: 6px; right: 10px; border: 0; background: none; font-size: 26px; line-height: 1; padding: 4px 8px; color: var(--ink); }

@media (max-width: 720px) {
  .sealq-head h3 { font-size: 22px; }
  .q-opt { font-size: 16px; }
}

/* ---------- the Fading Passport ---------- */
.pp-stamp { position: relative; filter: saturate(var(--ink, 1)) opacity(calc(.35 + .65 * var(--ink, 1))); transition: filter 1.2s ease; }
.pp-slot.fading { box-shadow: 0 0 0 2px #e9c46a, 0 0 18px #e9c46a66; }
.pp-stamp .kept { position: absolute; right: -6px; bottom: 8px; transform: rotate(-12deg); background: #e9c46a; color: var(--ink); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; border: 1.5px solid var(--ink); }
.ink-line { font-weight: 700; margin: 2px 0 6px; }
.reink { margin: 2px auto 8px; padding: 6px 14px; font-size: 14px; }
.pp-how { margin: -4px 0 14px; font-size: 13px; line-height: 1.45; color: #f4ead8bb; text-align: center; }
.recall { display: grid; gap: 4px; }
.recall-head { display: flex; gap: 12px; align-items: center; }
.recall-head b { display: block; font-size: 18px; }
.recall-head small { color: #f4ead8bb; }
.pp-stamp.small { width: 48px; margin: 0; flex: none; }
.pp-stamp.big { width: 140px; margin: 0 auto 6px; }
.recall .q-opt { color: #f4ead8; }
.recall.done { justify-items: center; text-align: center; gap: 8px; }
.recall.done b { font-size: 22px; }
.recall.done p { margin: 0 0 8px; }
.pp-stamp.reinked { animation: reink 1.2s ease both; }
@keyframes reink { from { filter: saturate(.4) opacity(.6); transform: rotate(-3deg) scale(1.25); } 60% { transform: rotate(-3deg) scale(.96); } to { filter: none; transform: rotate(-3deg) scale(1); } }

/* ---------- the record and the memory ---------- */
.ev-info.two-sides { width: min(560px, 44vw); transform: translateY(-46%); }
/* make room for both sides: the drawing and the stamp step back */
.ev:has(.two-sides) .element { width: min(20vw, 250px); right: 4vw; }
.ev:has(.two-sides) .snap.stamp { width: min(10vw, 120px); }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.side { border-radius: 8px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; }
.side small { font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.side p { margin: 0; font-size: clamp(14.5px, 1.25vw, 16.5px); line-height: 1.5; }
.side a { font-size: 13px; font-weight: 700; color: inherit; opacity: .85; }
.side.record { background: #f6ead2; color: #2c1e10; box-shadow: inset 0 0 0 1.5px #6b503466; }
.side.record small { color: #7a5c3c; }
.side.memory { background: #f6ead212; color: #f6ead2; border: 1.5px dashed #e9c46a88; }
.side.memory small { color: #e9c46a; }
.argued { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: #f6ead2cc; }
.argued b { color: #e9c46a; }
@media (max-width: 720px) {
  .ev-info.two-sides { width: auto; }
  .sides { grid-template-columns: 1fr; gap: 6px; }
  .side { padding: 8px 10px; }
  .side p { font-size: 14px; }
}

/* ---------- water and crowded places on the map ---------- */
.story-water { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .3s; }
.story-water .lake { fill: #3f63b8; fill-opacity: .55; stroke: #9fb5ea; stroke-width: 1.5; stroke-opacity: .8; }
.story-water .river { fill: none; stroke: #6f86c9; stroke-opacity: .6; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.story-water .water-name { fill: #c9d6f5; font: italic 600 14px var(--read); letter-spacing: .04em; paint-order: stroke; stroke: #221a16; stroke-width: 3px; }
.places .pp.bare { display: none; }
.places.show-bare .pp.bare { display: block; }
.places .pp.in-cluster { visibility: hidden; }
.pp-cluster {
  position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 2px solid #2a1d12; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ffd77a, #f7b733 55%, #d98a1c); color: #2a1d12; font: 800 14px/1 var(--font);
  box-shadow: 0 0 0 4px #f7b73344, 0 6px 14px #0008; transform: scale(0); transition: transform .35s cubic-bezier(.2,.9,.3,1.4);
}
.places.on .pp-cluster { transform: scale(1); pointer-events: auto; }
.chip.list-chip, .chip.bare-chip { --c: #f6ead2; }
.place-list {
  position: absolute; right: 5vw; top: 50%; transform: translateY(-50%); width: min(360px, 32vw); max-height: 70vh; overflow: auto; z-index: 4;
  background: #fbf3e0; color: #2a1d12; border-radius: 14px; padding: 6px 6px 10px; box-shadow: 0 0 0 4px #d8a93b, 0 0 0 6px #6b4a12, 0 30px 60px -20px #000;
}
.place-list[hidden] { display: none; }
.pl-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 6px 10px; position: sticky; top: -6px; background: #fbf3e0; }
.place-list ul { list-style: none; margin: 0; padding: 0; display: grid; }
.place-list li button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; min-height: 44px; color: inherit; }
.place-list li button:hover, .place-list li button:focus-visible { background: #2a1d1210; }
.place-list li i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, #f7b733); flex: none; box-shadow: 0 0 0 1.5px #2a1d1240; }
.place-list li span { display: grid; font-weight: 700; font-size: 15px; line-height: 1.25; }
.place-list li small { font-weight: 600; font-size: 12px; color: #7a5c3c; }
@media (max-width: 720px) {
  .place-list { left: 12px; right: 12px; top: auto; bottom: 40px; width: auto; transform: none; max-height: 56svh; }
}
.chip.bare-chip[aria-pressed="false"], .chip.list-chip { text-decoration: none; opacity: .85; }
.chip.bare-chip[aria-pressed="true"] { background: #f6ead2; color: #2a1d12; }
.story-water .water-name { font-size: 12px; }

/* ---------- real photographs: postcards on the letter, photos on the cards ---------- */
.letter-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 6px; }
.postcard { margin: 0; background: #fffdf6; padding: 8px 8px 6px; box-shadow: 0 10px 20px -12px #3a2410, 0 0 0 1px #6b503433; }
.postcard.p0 { transform: rotate(-2deg); } .postcard.p1 { transform: rotate(1.5deg) translateY(6px); } .postcard.p2 { transform: rotate(-1deg); }
.postcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #d9cdb4; }
.postcard figcaption, .card-photo figcaption { display: grid; gap: 1px; padding-top: 6px; font-size: 12px; line-height: 1.35; color: #5a4a30; }
.postcard figcaption span { font-family: var(--hand); font-size: 17px; color: #2c1e10; }
.postcard figcaption a, .card-photo figcaption a { color: #7a6650; font-size: 11px; text-decoration: none; overflow-wrap: anywhere; }
.postcard figcaption a:hover, .card-photo figcaption a:hover { text-decoration: underline; }
.card.has-photo { padding-top: 10px; }
.card-photo { margin: 0 0 8px; }
.card-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: 2px; background: #d9cdb4; }
.card-photo figcaption span { display: none; }
@media (max-width: 720px) {
  .letter-photos { grid-template-columns: 1fr 1fr; }
  .letter-photos .p2 { display: none; }
}

/* ---------- the Project Kit ---------- */
.kit-call { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 26px 0 0; padding: 14px 16px; border: 2px dashed #6b503488; border-radius: 10px; }
.kit-call b { display: block; font-size: 17px; color: #2c1e10; }
.kit-call span { font-size: 15px; color: #5a4a30; }
.kit { position: fixed; inset: 0; z-index: 95; overflow: auto; background: #2a2320e6; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
body.kit-open { overflow: hidden; }
.kit-bar { position: sticky; top: 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 8px 0 14px; z-index: 1; }
.kit-page { max-width: 780px; margin: 0 auto; background: #fff; color: #1d1714; padding: clamp(20px, 5vw, 48px); font-family: var(--font); border-radius: 4px; box-shadow: 0 30px 80px -20px #000; }
.kit-head { border-bottom: 3px solid #1d1714; padding-bottom: 10px; margin-bottom: 14px; }
.kit-kicker { margin: 0; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #b5281c; }
.kit-page h2 { margin: 2px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 5vw, 44px); line-height: 1.05; }
.kit-page h2 span { font-family: 'Anek Devanagari', 'Anek Bangla', sans-serif; font-weight: 800; color: #b5281c; }
.kit-sub { margin: 4px 0 0; color: #5a4a42; }
.kit-intro { font-family: var(--read); font-size: 17px; line-height: 1.55; margin: 0 0 14px; }
.kit-page h3 { margin: 18px 0 6px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
.kit-page ul, .kit-page ol { margin: 0; padding-left: 1.2em; display: grid; gap: 5px; font-size: 15.5px; line-height: 1.45; }
.kit-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.kit-facts div { border: 1.5px solid #1d171433; border-radius: 6px; padding: 6px 10px; }
.kit-facts dt { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5a4a42; }
.kit-facts dd { margin: 0; font-weight: 700; }
.kit-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.kit-photos figure { margin: 0; }
.kit-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.kit-photos figcaption { font-size: 12px; color: #5a4a42; padding-top: 3px; }
.kit-time { columns: 2; column-gap: 28px; display: block !important; }
.kit-time li { break-inside: avoid; margin-bottom: 4px; }
.kit-learnt li { border-bottom: 1.5px solid #1d171455; height: 30px; }
.kit-foot { margin-top: 20px; border-top: 1px solid #1d171433; padding-top: 10px; font-size: 11.5px; line-height: 1.5; color: #5a4a42; overflow-wrap: anywhere; }
.kit-foot p { margin: 0 0 6px; }
@media (max-width: 560px) { .kit-photos { grid-template-columns: 1fr 1fr; } .kit-time { columns: 1; } }
@media print {
  body.kit-open > *:not(#kit) { display: none !important; }
  body.kit-open { overflow: visible; background: #fff; }
  .kit { position: static; background: none; padding: 0; overflow: visible; }
  .kit .no-print { display: none !important; }
  .kit-page { box-shadow: none; max-width: none; padding: 0; }
}

/* ---------- classes ---------- */
.class-title { font-family: var(--display); font-weight: 400; text-align: center; margin: 0; font-size: 26px; }
.pp-classes { margin: 6px 0 14px; background: #f4ead8; color: var(--ink); border-radius: 12px; padding: 10px 14px; }
.pp-sub { margin: 0 0 6px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.cl-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #00000022; }
.cl-row small { display: block; color: var(--ink-soft); font-size: 13px; }
.cl-row .hw { color: #b5281c; font-weight: 700; }
.cl-empty { margin: 4px 0 8px; font-size: 14px; color: var(--ink-soft); }
.cl-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.cl-new { display: flex; gap: 6px; flex: 1; min-width: 220px; }
.cl-new input { flex: 1; min-width: 0; font: inherit; padding: 6px 10px; border: 2px solid #00000026; border-radius: 10px; }
.btn.small { padding: 6px 12px; font-size: 14px; border-radius: 10px; }
.cl-head h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 400; font-size: 24px; color: #e9c46a; }
.cl-head p { margin: 0 0 10px; font-size: 14px; overflow-wrap: anywhere; }
.cl-code { font-size: 18px; letter-spacing: .18em; color: #e9c46a; }
.cl-hw { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin: 6px 0; }
.cl-hw label { font-size: 13px; font-weight: 700; display: grid; gap: 2px; }
.cl-hw select, .cl-hw input { font: inherit; padding: 5px 8px; border-radius: 8px; border: 0; }
.cl-hwlist { font-size: 13px; margin: 4px 0 8px; }
.cl-table-wrap { overflow-x: auto; background: #f4ead8; border-radius: 10px; }
.cl-table { border-collapse: collapse; width: 100%; color: var(--ink); font-size: 14px; }
.cl-table th, .cl-table td { padding: 8px 10px; border-bottom: 1px solid #00000018; text-align: left; white-space: nowrap; }
.cl-table th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.cl-cell { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; }
.cl-cell.none { color: #8a7a6a; font-weight: 500; }
.cl-cell i.st { width: 12px; height: 12px; border-radius: 50%; background: #b5281c; opacity: .45; }
.cl-cell i.st.b2 { opacity: .65; } .cl-cell i.st.b3 { opacity: .85; } .cl-cell i.st.b4 { opacity: 1; box-shadow: 0 0 0 2px #e9c46a; }
.cl-key { font-size: 12px; color: #f4ead8aa; margin: 8px 0 12px; }

/* ---------- fixes from the visual check (30 Oct) ---------- */
/* a year like "c. 1536" or "1620s" stays on one line, a little smaller */
.ev-year { white-space: nowrap; }
.ev-year.long { font-size: clamp(44px, 6.4vw, 84px); }
/* a polaroid's words in hand, its photo credit in small print underneath */
.snap figcaption span { display: block; }
.snap figcaption small { display: block; margin-top: 4px; font: 500 11px/1.35 var(--font); color: #6b5a44; overflow-wrap: anywhere; }
/* a crowded spot on the map gets a bigger bubble */
.pp-cluster.many { width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: 15px; }
/* the Kit's buttons sit on a bar of their own, so they never cover the page */
.kit-bar { background: #2a2320; margin: -16px -16px 14px; padding: 12px 16px; box-shadow: 0 6px 14px -8px #000a; }
/* night reaches below the street too */
body.is-night .about { background: #1d1714; }
body.is-night .about h2 { color: #f6ead2; }
body.is-night .about p, body.is-night .foot { color: #d9ccb4; }
body.is-night .mini-card { background: #2a2320; color: #f6ead2; box-shadow: 0 10px 24px -12px #000; }
/* seal answers that were not picked fade back once the question is answered */
.q-opt:disabled:not(.right):not(.wrong) { opacity: .45; }

@media (max-width: 720px) {
  /* on a phone the letter takes nearly the whole width; the rollers' knobs get smaller to make room */
  .scroll { width: calc(100% - 60px); }
  .knob { width: calc(var(--roll) * .62); }
  .knob.l { right: calc(100% + var(--roll) * .18); } .knob.r { left: calc(100% + var(--roll) * .18); }
  .letter { padding-left: 16px; padding-right: 16px; }
  .ev-year.long { font-size: 40px; }
  .snap figcaption { font-size: 15px; }
  .map-end p { font-size: 19px; margin-bottom: 10px; }
}

/* ---------- the end of the timeline: the way on, in the event card's place ---------- */
.story-end {
  position: absolute; left: clamp(180px, 20vw, 300px); right: 6vw; top: 50%; translate: 0 -50%; max-width: 620px;
  opacity: 0; visibility: hidden; pointer-events: auto;
}
.story-end small { font-weight: 800; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #e9c46a; }
.story-end h3 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; margin: 8px 0 10px; }
.story-end p { font-family: var(--read); font-size: clamp(17px, 1.8vw, 20px); line-height: 1.5; color: #f6ead2cc; margin: 0 0 22px; max-width: 46ch; }
.end-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.end-btns .btn { color: var(--ink); }
.end-btns .btn.big { font-size: 18px; padding: 14px 24px; }
.end-btns .btn.ghost { background: none; color: #f6ead2; border-color: #f6ead266; box-shadow: none; }
@media (max-width: 720px) {
  .story-end { left: 84px; right: 16px; }
  .end-btns .btn { width: 100%; }
}

/* ---------- a city's Explore page ---------- */
.explore {
  --night: #221a16; --cream: #f6ead2;
  position: fixed; inset: 0; z-index: 70; overflow: hidden auto; overscroll-behavior: contain; color: var(--cream);
  background: radial-gradient(ellipse at 50% 0%, #3a2b22 0%, #0000 60%), radial-gradient(#ffffff08 1px, #0000 1.4px) 0 0 / 22px 22px, var(--night);
  animation: exIn .7s cubic-bezier(.2,.8,.2,1);
}
.explore[hidden] { display: none; }
@keyframes exIn { from { opacity: 0; transform: translateY(18px); } }
.ex-top { display: grid; justify-items: center; gap: 14px; padding: 18px 16px 8px; text-align: center; }
.ex-top .post-back { position: absolute; left: 18px; top: 18px; }
.ex-title { margin-top: 44px; }
.ex-title small { font-weight: 800; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #e9c46a; }
.ex-title h1 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 6vw, 64px); line-height: 1; margin: 6px 0 0; color: var(--cream); }
.ex-title h1 .native { font-family: 'Anek Devanagari', 'Anek Bangla', sans-serif; font-weight: 800; color: color-mix(in srgb, var(--accent) 45%, #f6ead2); font-size: .8em; }
.ex-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 99px; background: #0000004d; border: 1.5px solid #f6ead22e; }
.ex-tab { border: 0; background: none; color: #f6ead2b3; font: 800 15px/1 var(--font); padding: 10px 18px; border-radius: 99px; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ex-tab.on { background: var(--cream); color: var(--ink); }
.ex-map-wrap { max-width: 1240px; margin: 0 auto; padding: 10px 16px 40px; }
.explore .place-legend { position: static; padding: 6px 0 14px; }
.ex-grid { display: grid; grid-template-columns: 1fr minmax(280px, 340px); gap: 22px; align-items: start; }
.ex-map {
  position: relative; height: min(68vh, 640px); min-height: 380px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #2e231c, #1a130f 75%);
  box-shadow: inset 0 0 0 1.5px #f6ead21f, 0 24px 60px -30px #000;
}
.ex-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ex-land { fill: color-mix(in srgb, var(--accent) 22%, #2b2019); fill-opacity: .7; }
.ex-edge { fill: none; stroke: #f2b33d; stroke-width: 3.2; stroke-linejoin: round; filter: drop-shadow(0 0 6px #f2b33d66); }
.ex-svg.inking .ex-edge { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: exInk 2.2s cubic-bezier(.45,.05,.3,1) .2s forwards; }
.ex-svg.inking .ex-land, .ex-svg.inking .lake, .ex-svg.inking .river { opacity: 0; animation: exFade 1.2s ease 1.2s forwards; }
@keyframes exInk { to { stroke-dashoffset: 0; } }
@keyframes exFade { to { opacity: 1; } }
.ex-svg .lake { fill: #3f63b8; fill-opacity: .55; stroke: #9fb5ea; stroke-width: 1.5; stroke-opacity: .8; }
.ex-svg .river { fill: none; stroke: #6f86c9; stroke-opacity: .6; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.ex-svg .water-name { fill: #c9d6f5; font: italic 600 13px var(--read); letter-spacing: .04em; paint-order: stroke; stroke: #1a130f; stroke-width: 3px; }
.explore .place-card { position: sticky; top: 16px; right: auto; transform: none; width: auto; }
.explore .place-list { right: 16px; width: min(360px, 60%); }
.ex-note { font-family: var(--hand); font-size: 22px; color: #f6ead2bb; margin: 14px 0 0; text-align: center; }
.ex-src { font-size: 12px; color: #f6ead270; margin: 8px 0 0; text-align: center; }
@media (max-width: 860px) {
  .ex-grid { grid-template-columns: 1fr; }
  .ex-map { height: 62svh; min-height: 320px; }
  .explore .place-card { position: relative; top: 0; max-height: none; left: auto; right: auto; bottom: auto; }
  .explore .place-list { left: 10px; right: 10px; width: auto; bottom: 10px; top: auto; transform: none; max-height: 70%; }
}
@media (prefers-reduced-motion: reduce) { .explore, .ex-svg.inking .ex-edge, .ex-svg.inking .ex-land, .ex-svg.inking .lake, .ex-svg.inking .river { animation: none; stroke-dashoffset: 0; opacity: 1; } }

/* privacy links: under the sign-in box and in the passport */
.foot a { color: inherit; }
.auth-privacy, .pp-privacy { text-align: center; font-size: 13px; color: var(--ink-soft); margin: 10px 0 0; }
.auth-privacy a, .pp-privacy a { color: inherit; }
.pp-privacy { color: #e9dcc3; }
.pp-privacy .link-btn { font-size: 13px; color: inherit; }

/* ---------- Explore: tabs, map tools, flashcards and games ---------- */
.ex-tab:focus-visible, .gm-tile:focus-visible, .fc-card:focus-visible, .ex-zoom button:focus-visible { outline: 3px solid #e9c46a; outline-offset: 2px; }
.ex-panel { max-width: 1240px; margin: 0 auto; padding: 10px 16px 48px; }
.ex-panel[hidden] { display: none; }
.explore .btn { color: var(--ink); }

/* the map: search, surprise, zoom */
.ex-tools { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 4px 0 2px; }
.ex-search { position: relative; width: min(420px, 100%); }
.ex-search input { width: 100%; border: 1.5px solid #f6ead240; background: #1e150dcc; color: var(--cream); border-radius: 99px; padding: 10px 16px 10px 40px; font: 600 16px var(--font); min-height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9c46a' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px 50%; background-size: 18px; }
.ex-search input::placeholder { color: #f6ead280; }
.ex-search input:focus { outline: none; border-color: #e9c46a; box-shadow: 0 0 0 3px #e9c46a33; }
.ex-found { position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fbf3e0; color: #2a1d12; border-radius: 12px;
  box-shadow: 0 20px 40px -10px #000c; max-height: 50vh; overflow: auto; text-align: left; }
.ex-found[hidden] { display: none; }
.ex-found li { padding: 9px 12px; border-radius: 8px; cursor: pointer; font-weight: 700; display: grid; line-height: 1.25; }
.ex-found li small { font-weight: 600; font-size: 12px; color: #7a5c3c; }
.ex-found li[aria-selected="true"], .ex-found li:hover { background: #2a1d1214; }
.ex-found li.none { cursor: default; color: #7a5c3c; font-weight: 600; }
.chip.ex-surprise { --c: #e9c46a; min-height: 44px; padding: 8px 16px; font-size: 14px; color: #e9c46a; }
.ex-stage { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.ex-map { cursor: grab; user-select: none; -webkit-user-select: none; }
.ex-map:active { cursor: grabbing; }
.ex-zoom { position: absolute; right: 12px; top: 12px; display: grid; gap: 6px; z-index: 3; }
.ex-zoom button { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid #f6ead240; background: #1e150de6; color: var(--cream); font: 800 22px/1 var(--font); cursor: pointer; box-shadow: 0 6px 16px #0008; }
.ex-zoom button:hover { border-color: #e9c46a; color: #e9c46a; }
.ex-hint { position: absolute; left: 12px; bottom: 10px; margin: 0; font-size: 12px; font-weight: 700; color: #f6ead280; pointer-events: none; transition: opacity .4s; }
.ex-map.zoomed .ex-hint { opacity: 0; }

/* flashcards */
.fc-decks { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 4px 0 18px; }
.chip.fc-deck { min-height: 40px; font-size: 14px; }
.chip.fc-deck[aria-pressed="false"] { opacity: .7; text-decoration: none; }
.chip.fc-deck[aria-pressed="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.chip.fc-deck[aria-pressed="true"] b { color: #7a5c3c; }
.fc-stage { width: min(560px, 100%); margin: 0 auto; display: grid; gap: 12px; }
.fc-progress { height: 6px; border-radius: 99px; background: #f6ead21f; overflow: hidden; }
.fc-progress i { display: block; height: 100%; background: linear-gradient(90deg, #e9c46a, #f2b33d); border-radius: inherit; transition: width .4s; }
.fc-count { margin: 0; text-align: center; font-weight: 700; font-size: 14px; color: #f6ead2aa; }
.fc-card { perspective: 1400px; cursor: pointer; height: clamp(340px, 54svh, 480px); position: relative; -webkit-tap-highlight-color: transparent; border-radius: 20px; }
.fc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.7,.2,1); }
.fc-card.flipped .fc-inner { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 20px; background: #fbf3e0; color: #2a1d12; overflow: hidden;
  box-shadow: 0 0 0 4px #d8a93b, 0 0 0 6px #6b4a12, 0 30px 60px -24px #000; display: flex; flex-direction: column; }
.fc-front { text-align: center; }
.fc-art { flex: 1; min-height: 0; background: #e8dcc2; display: grid; position: relative; overflow: hidden; }
.fc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-motif { display: grid; place-items: center; background: radial-gradient(circle, #fff6e2, #ead8b4); }
.fc-motif svg { width: min(180px, 50%); height: auto; }
.fc-motif span { font-size: 84px; }
.fc-kicker { margin: 14px 18px 0; font: 800 12px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #8a5a17; }
.fc-front h3 { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 4vw, 32px); line-height: 1.05; margin: 6px 18px 0; color: color-mix(in srgb, var(--accent) 70%, #2a1d12); }
.fc-ask { margin: 8px 18px 16px; font-family: var(--hand); font-size: 19px; color: #7a5c3c; }
.fc-back { transform: rotateY(180deg); padding: 28px 26px 20px; justify-content: center;
  background: radial-gradient(#2a1d1208 1px, #0000 1.4px) 0 0 / 14px 14px, #fbf3e0; }
.fc-back .fc-kicker { margin: 0 0 8px; font-size: 13px; }
.fc-year { font-family: var(--display); font-size: clamp(54px, 10vw, 76px); line-height: 1; margin: 0 0 10px; color: color-mix(in srgb, var(--accent) 75%, #2a1d12); }
.fc-text { font-family: var(--read); font-size: clamp(18px, 2.4vw, 21px); line-height: 1.45; margin: 0; }
.fc-foot { margin: 16px 0 0; font-size: 12px; display: flex; gap: 12px; flex-wrap: wrap; color: #7a5c3c; }
.fc-foot a { color: #b5530a; font-weight: 700; }
.fc-card.lean-got .fc-face { box-shadow: 0 0 0 4px #6fbf73, 0 0 0 6px #2f6b33, 0 30px 60px -24px #000; }
.fc-card.lean-again .fc-face { box-shadow: 0 0 0 4px #e48a78, 0 0 0 6px #7a2d20, 0 30px 60px -24px #000; }
.fc-actions { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; }
.fc-actions .btn { min-height: 48px; }
.fc-help { text-align: center; font-size: 13px; color: #f6ead290; margin: 16px 0 0; }
.fc-done { text-align: center; padding: 30px 18px; border-radius: 20px; background: #f6ead212; border: 1.5px solid #f6ead22e; }
.fc-done-mark { font-size: 64px; animation: pop .5s cubic-bezier(.2,.9,.3,1.4); }
.fc-done h3, .gm-end h3 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4vw, 38px); margin: 8px 0 6px; }
.fc-done p, .gm-end p { margin: 0 auto 18px; max-width: 420px; color: #f6ead2cc; }
.fc-done-btns, .gm-end-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* games */
.gm-intro { text-align: center; color: #f6ead2bb; margin: 4px 0 18px; font-size: 17px; }
.gm-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.gm-tile { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 20px 20px 18px; border-radius: 18px; cursor: pointer; color: #2a1d12; border: 0;
  background: #fbf3e0; box-shadow: 0 0 0 3px #d8a93b, 0 18px 40px -20px #000; transition: transform .2s, box-shadow .2s; font: inherit; }
.gm-tile:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 0 0 3px #f2b33d, 0 24px 46px -18px #000; }
.gm-icon { font-size: 40px; line-height: 1; }
.gm-tile b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.1; color: color-mix(in srgb, var(--accent) 70%, #2a1d12); }
.gm-tile span:not(.gm-icon) { font-size: 15px; line-height: 1.35; color: #5a4535; }
.gm-tile small { margin-top: 6px; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8a5a17; }
.gm-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 0 0 14px; }
.explore .gm-back { position: static; font-size: 14px; justify-self: start; }
.gm-bar h2 { margin: 0; text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 3vw, 28px); }
.gm-score { margin: 0; font-weight: 800; font-size: 14px; color: #e9c46a; text-align: right; min-width: 120px; }
.gm-area { width: min(860px, 100%); margin: 0 auto; }
.gm-help { text-align: center; color: #f6ead2cc; margin: 12px 0; font-size: 16px; line-height: 1.5; }
.gm-help b { color: #e9c46a; }
.gm-help .btn { margin: 10px auto 0; display: flex; width: fit-content; }
.gm-row { display: flex; justify-content: center; margin-top: 14px; }
.gm-end { text-align: center; padding: 30px 18px; border-radius: 20px; background: #f6ead212; border: 1.5px solid #f6ead22e; }
.gm-flowers { display: flex; justify-content: center; gap: 10px; font-size: 52px; line-height: 1; }
.gm-flowers i { font-style: normal; color: #f6ead22a; }
.gm-flowers i.on { color: #f2b33d; text-shadow: 0 0 18px #f2b33d88; animation: flowerIn .5s cubic-bezier(.2,.9,.3,1.5) both; animation-delay: var(--d); }
@keyframes flowerIn { from { transform: scale(0) rotate(-90deg); } }

/* pin it */
.pin-ask { display: flex; gap: 14px; align-items: center; justify-content: center; text-align: left; margin: 0 0 12px; }
.pin-ask img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 3px #d8a93b; flex: none; }
.pin-ask small { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: #e9c46a; }
.pin-ask h3 { margin: 2px 0; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.05; }
.pin-ask p { margin: 0; font-size: 14px; color: #f6ead2aa; }
.gm-map { position: relative; height: min(58svh, 540px); min-height: 300px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #2e231c, #1a130f 75%); box-shadow: inset 0 0 0 1.5px #f6ead21f, 0 24px 60px -30px #000; }
.gm-map.aim { cursor: crosshair; box-shadow: inset 0 0 0 2px #e9c46a66, 0 24px 60px -30px #000; }
.pin-marks { position: absolute; inset: 0; pointer-events: none; }
.pin-line { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin-line line { stroke: #f6ead2; stroke-width: 2; stroke-dasharray: 6 6; }
.pin-mark { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; z-index: 1; animation: pop .35s cubic-bezier(.2,.9,.3,1.4); }
.pin-mark.guess { background: #f6ead2; border: 3px solid #2a1d12; }
.pin-mark.real { background: #f2b33d; border: 3px solid #2a1d12; box-shadow: 0 0 0 6px #f2b33d55, 0 0 24px #f2b33d; }
.pin-mark b { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; background: #f6ead2; color: #2a1d12; font: 800 12px/1 var(--font);
  padding: 5px 9px; border-radius: 99px; box-shadow: 0 4px 10px #0008; }
.pin-about { display: block; max-width: 620px; margin: 8px auto 0; font-family: var(--read); color: #f6ead2bb; font-size: 15px; }

/* time travel */
.ord-list { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 10px; width: min(620px, 100%); }
.ord-card { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; border: 2px solid #f6ead244; background: #f6ead212; color: var(--cream); border-radius: 14px;
  padding: 10px 14px 10px 10px; min-height: 72px; font: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.ord-card:hover:not([disabled]) { border-color: #e9c46a; }
.ord-card img, .ord-dot { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: none; display: grid; place-items: center; background: #f6ead21f; font-size: 26px; }
.ord-n { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px dashed #f6ead266; display: grid; place-items: center; font: 800 16px/1 var(--font); }
.ord-card.picked { border-color: #e9c46a; background: #e9c46a1f; }
.ord-card.picked .ord-n { border: 0; background: #e9c46a; color: #2a1d12; }
.ord-t { display: grid; gap: 2px; }
.ord-t b { font-size: 17px; line-height: 1.25; }
.ord-year { display: none; font-family: var(--display); font-size: 18px; color: #e9c46a; }
.ord-card.shown .ord-year { display: block; }
.ord-card.right { border-color: #9ad08a; background: #5d9a4a40; }
.ord-card.right .ord-n { background: #9ad08a; color: #1c3313; border: 0; }
.ord-card.wrong { border-color: #e48a78; background: #b5281c33; }
.ord-card.wrong .ord-n { background: #e48a78; color: #3a1209; border: 0; }
.ord-card[disabled] { cursor: default; opacity: 1; }

/* picture this */
.pic-frame { margin: 0 auto; width: min(620px, 100%); }
.pic-frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: 16px; background: #2e231c; box-shadow: 0 0 0 4px #d8a93b, 0 0 0 6px #6b4a12, 0 30px 60px -24px #000; }
.pic-frame figcaption { font-size: 11px; color: #f6ead270; margin-top: 8px; text-align: right; }
.pic-opts { width: min(620px, 100%); margin: 0 auto; }

/* memory pairs */
.mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: min(560px, 100%); margin: 0 auto; }
.mem-card { aspect-ratio: 1; border: 0; padding: 0; background: none; perspective: 900px; cursor: pointer; font: inherit; }
.mem-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,.7,.2,1); }
.mem-card.up .mem-in { transform: rotateY(180deg); }
.mem-back, .mem-face { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; overflow: hidden; }
.mem-back { font-size: 38px; color: #f2b33d; background: repeating-linear-gradient(45deg, #3a2b22 0 10px, #33251d 10px 20px); box-shadow: inset 0 0 0 2px #f2b33d55; }
.mem-card:hover .mem-back { box-shadow: inset 0 0 0 2px #f2b33d; }
.mem-face { transform: rotateY(180deg); background: #fbf3e0; color: #2a1d12; box-shadow: inset 0 0 0 3px #d8a93b; padding: 8px; text-align: center; }
.mem-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mem-face b, .mem-alt { font-size: clamp(13px, 1.8vw, 17px); line-height: 1.2; }
.mem-card.done .mem-face { box-shadow: inset 0 0 0 4px #6fbf73; }
.mem-card.done { animation: memDone .4s ease; }
@keyframes memDone { 50% { transform: scale(1.06); } }

/* sort the city */
.sort-item { display: flex; gap: 16px; align-items: center; justify-content: center; min-height: 120px; padding: 14px; margin: 0 auto 16px; width: min(560px, 100%);
  background: #fbf3e0; color: #2a1d12; border-radius: 16px; box-shadow: 0 0 0 3px #d8a93b, 0 20px 40px -20px #000; }
.sort-item img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; flex: none; }
.sort-item h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.1; }
.sort-baskets { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; width: min(720px, 100%); margin: 0 auto; }
.sort-basket { display: grid; justify-items: center; gap: 4px; padding: 16px 10px 12px; border-radius: 16px 16px 30px 30px; border: 2px solid #f6ead244; background: #f6ead212; color: var(--cream); font: inherit; cursor: pointer; min-height: 120px; transition: transform .15s, border-color .15s, background .15s; }
.sort-basket:hover:not([disabled]) { border-color: #e9c46a; transform: translateY(-3px); }
.sort-basket[disabled] { cursor: default; }
.sb-icon { font-size: 40px; line-height: 1; }
.sort-basket b { font-size: 16px; }
.sb-n { font-weight: 800; color: #e9c46a; }
.sort-basket.right { border-color: #9ad08a; background: #5d9a4a40; }
.sort-basket.wrong { border-color: #e48a78; background: #b5281c33; animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

@media (max-width: 720px) {
  .ex-tab { padding: 10px 13px; font-size: 14px; }
  .gm-bar { grid-template-columns: 1fr auto; }
  .gm-bar h2 { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .gm-score { min-width: 0; }
  .mem-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .fc-actions { grid-template-columns: 1fr 1fr; }
  .fc-actions .fc-flip { grid-column: 1 / -1; grid-row: 2; }
  .pin-ask img { width: 64px; height: 64px; }
  .sort-baskets { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sort-basket { min-height: 100px; padding: 12px 6px 10px; }
  .sort-basket b { font-size: 13px; }
  .sort-item img { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-inner, .mem-in { transition: none; }
  .gm-flowers i.on, .mem-card.done, .sort-basket.wrong, .pin-mark { animation: none; }
}

/* ---------- the street map under the Explore map and the map game ---------- */
.ex-tiles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tile-layer { position: absolute; inset: 0; }
.tile-layer img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; }
.ex-tiles:not(.loaded) { opacity: 0; }
.ex-tiles.loaded { opacity: 1; transition: opacity .6s; }
.ex-map.street, .gm-map.street { background: #f2efe9; }
.ex-svg .ex-outside { fill: #1a130f; fill-opacity: .42; }
.ex-svg .ex-land.street { fill: color-mix(in srgb, var(--accent) 30%, #f2b33d); fill-opacity: .07; }
.ex-svg .ex-edge.street { stroke: #e0901c; stroke-width: 3.6; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px #f2b33dcc); }
.street .ex-svg.inking .ex-outside { opacity: 0; animation: exFade 1.2s ease 1s forwards; }
.street .pp-cluster { box-shadow: 0 0 0 4px #ffffffaa, 0 6px 14px #0006; }
.map-credit { position: absolute; right: 8px; bottom: 6px; margin: 0; z-index: 3; font-size: 10.5px; line-height: 1.3; padding: 2px 6px; border-radius: 6px;
  background: #ffffffd9; color: #3a2b22; }
.map-credit a { color: inherit; }
.ex-map.street .ex-hint { color: #2a1d12; background: #ffffffd9; padding: 3px 8px; border-radius: 6px; bottom: 6px; }
.gm-map.street.aim { box-shadow: inset 0 0 0 2px #e0901c, 0 24px 60px -30px #000; }
.street .pin-line line { stroke: #2a1d12; }
@media (max-width: 720px) { .ex-map.street .ex-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .street .ex-svg.inking .ex-outside { animation: none; opacity: 1; } }
.street .pp::before { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--r), 0 2px 6px #0006; }
.street .pp.big::before { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #2a1d12, 0 2px 8px #0008; }

/* ---------- photos are never cut to fit their frame ----------
   A frame with a fixed shape used to crop its photo from the middle (object-fit: cover), which could
   cut off heads and faces. Now the whole photo is shown, and the empty edges are filled with a soft,
   blurred copy of it (set from lib.js), or with the frame's own paper colour for photos that are not
   on Cloudinary. Small thumbnails keep a crop, but Cloudinary picks it around faces and people. */
.snap:not(.stamp) img, .pc-photo img, .postcard img, .card-photo img, .kit-photos img,
.fc-art img, .pic-frame img, .mem-face img, .city-hero .hero-photo {
  object-fit: contain; object-position: 50% 50%;
  background-color: #d9cdb4; background-size: cover; background-position: center; background-repeat: no-repeat;
}
.kit-photos img { background-color: #eee7dc; }
.fc-art img { background-color: #e8dcc2; }
.pic-frame img { background-color: #2e231c; }
/* the city poster is shown whole too; a blurred, darker copy of it fills the sides on wide screens */
.city-hero .hero-photo { background: none; }
.city-hero .hero-soft { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: blur(26px) brightness(.72) saturate(1.1); transform: scale(1.15); }
/* the memory card's photo sits inside its gold rim, not under it */
.mem-face img { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 11px; }
/* small crops: Cloudinary chooses the subject; anything else is shown from just above the middle */
.medal img, .pin-ask img, .ord-card img, .sort-item img { object-position: 50% 35%; }