/* ═══════════════════════════════════════════════════════════════════════════
   WalkBurgas — design prototype v2
   Page 1 (Welcome / Language) and Page 2 (Choose your Burgas).
   Same family as WalkNessebar — one photo landing, the logo at WalkNessebar's
   exact scale, a serif display face, glass controls, gold = "go" — in a warmer,
   more artistic register: cream, blush, powder blue, honey; wave-edged layers;
   slow water motion; Burgas as a city of the sea, the arts and heritage.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --cream: #faf3ea;
  --sand: #e4d0b8;
  --blush: #f3cfd3;
  --rose: #e5a9b5;
  --rose-deep: #a9586c;
  --sky: #bfd7ee;
  --sea: #7fa7cf;
  --sea-deep: #3a6594;
  --butter: #f6e4b8;
  --honey: #e3bd76;
  --honey-deep: #a87a24;
  --sage: #8fbfae;             /* In the Vicinity: sea glass — the lagoons, and the forests beyond the city */
  --sage-deep: #3c7465;
  --gold: #d9a441;
  --gold-2: #ecc476;
  --navy: #013064;
  --ink: #342e4a;             /* velvet plum — the day ink */
  --ink-2: #625a78;
  --ink-3: #8c85a0;
  --tick: #4f9fd0;

  --glass: rgba(250, 243, 234, 0.6);
  --glass-strong: rgba(250, 243, 234, 0.9);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-shade: rgba(74, 52, 60, 0.14);
  --blur: blur(18px) saturate(120%);
  --halo: 0 1px 0 rgba(255, 252, 246, 0.5), 0 0 16px rgba(255, 250, 240, 0.65);

  /* Where the sea horizon sits in the pier photos (fraction of image height,
     measured on open water: 61.2%). Used as the cover-crop anchor. */
  --horizon: 61.2%;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --chrome-top: max(14px, var(--safe-top));
  --side: 12px;               /* side clearance of the wave panels: language + info sheets, menu, tour shore */

  /* ── Type pairings (all three carry Latin + Cyrillic for bg / ru / uk) ── */
  --font-display: "WB Cormorant", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --font-ui: "WB Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --w-display: 500;
  --w-name: 600;
  --fs-title: 42px;
  --fs-name: 27px;
  --fs-prompt: 26px;
  --fs-sub: 18px;
  --fs-lang: 21px;
  --fs-tour: 46px;
  --ui-caps: 0.24em;
  --w-ui: 400;
  --w-ui-strong: 500;
}
@media (max-width: 359px) { :root { --side: 8px; } }
/* Editorial: Playfair Display + Manrope */
[data-font="editorial"] {
  --font-display: "WB Playfair", Georgia, serif;
  --font-ui: "WB Manrope", -apple-system, system-ui, sans-serif;
  --w-display: 500; --w-name: 500;
  --fs-title: 34px; --fs-name: 22px; --fs-prompt: 21px; --fs-sub: 15.5px; --fs-lang: 17px; --fs-tour: 38px;
  --ui-caps: 0.2em; --w-ui: 500; --w-ui-strong: 700;
}
/* Modern: Noto Serif Display + Jost */
[data-font="modern"] {
  --font-display: "WB Noto Display", Georgia, serif;
  --w-display: 400; --w-name: 500;
  --fs-title: 35px; --fs-name: 23px; --fs-prompt: 22px; --fs-sub: 16px; --fs-lang: 18px; --fs-tour: 40px;
}

[data-theme="night"] {
  --ink: #f7efe4;
  --ink-2: rgba(247, 239, 228, 0.8);
  --ink-3: rgba(247, 239, 228, 0.58);
  --glass: rgba(16, 28, 66, 0.48);
  --glass-strong: rgba(13, 22, 54, 0.92);
  --glass-edge: rgba(255, 255, 255, 0.2);
  --glass-shade: rgba(3, 8, 24, 0.5);
  --halo: 0 1px 2px rgba(5, 14, 40, 0.7), 0 0 16px rgba(5, 14, 40, 0.45);
  --tick: #7cc3ec;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100%;
  background: #0e1a3a;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: var(--w-ui);
  font-size: 16px;
  line-height: 1.4;
  font-variant-numeric: lining-nums;   /* Cormorant's default old-style figures make "11" read as "ıı" */
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { display: block; }
[hidden] { display: none !important; }

.app {
  position: relative;
  width: min(100%, 480px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--cream);
  isolation: isolate;
}
.screen { position: absolute; inset: 0; overflow: hidden; }

/* Every photo that has a night edit is a stacked pair; night fades in over day. */
.ph-night { opacity: 0; transition: opacity 0.9s ease; }
[data-theme="night"] .ph-night { opacity: 1; }

/* ── Shared chrome ───────────────────────────────────────────────────────── */
.chrome {
  position: absolute; top: var(--chrome-top); left: 10px; right: 12px; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  animation: fadeIn 0.9s ease backwards;
}
.chrome__right { display: flex; align-items: center; gap: 2px; }

.sound, .round {
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--ink);
  transition: transform 0.15s ease, color 0.3s ease;
}
/* WalkNessebar's speaker (same glyph and 24px size), in WalkBurgas ink so it reads on the light day sky. */
.sound svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(255, 252, 246, 0.55)); }
[data-theme="night"] .sound svg { filter: drop-shadow(0 1px 2px rgba(3, 8, 24, 0.7)); }
.sound:active, .round:active { transform: scale(0.9); }
.sound .i-sound__off { display: none; }
.sound[aria-pressed="true"] .i-sound__on { display: none; }
.sound[aria-pressed="true"] .i-sound__off { display: block; }
/* The sound waves sit a little dim until the music is actually playing, then gently breathe. */
.sound .i-sound__on { opacity: 0.62; transition: opacity 0.4s ease; }
.music-playing .sound .i-sound__on { opacity: 1; }
.music-playing .sound .i-sound__on path { animation: soundArc 2.4s ease-in-out infinite; }
.music-playing .sound .i-sound__on path:nth-child(2) { animation-delay: 0.35s; }
@keyframes soundArc { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .music-playing .sound .i-sound__on path { animation: none; } }

/* The round buttons (the back arrow, the tour's pause) are cut from the same thick
   sea glass as the sun/moon capsule, so they never sink into the night sky. */
.round {
  position: relative; isolation: isolate;
  /* state the centring here too: place-items alone does not centre a flex child
     horizontally, which left the arrow sitting 5px off-centre. */
  display: grid; place-items: center; padding: 0;
  width: 40px; height: 40px; border-radius: 50%;
  box-shadow: 0 0 0 0.5px var(--pill-edge), 0 1px 2px var(--pill-drop), 0 8px 20px var(--pill-drop), 0 0 16px var(--pill-glow);
}
.round::before, .round::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.round::before {
  inset: 0; border-radius: 50%;
  background: var(--pill-glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--pill-rim), inset 0 0 0 1px var(--pill-ring), inset 0 -3px 6px var(--pill-lip);
}
.round::after {
  top: 2px; left: 8px; right: 8px; height: 44%;
  border-radius: 999px 999px 10px 10px / 999px 999px 6px 6px;
  background: linear-gradient(180deg, var(--pill-sheen), rgba(255, 255, 255, 0) 92%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
.round svg { width: 20px; height: 20px; }

/* The sun / moon glass pill — WalkNessebar's switch (two 32×28 buttons, its own 15px
   sun and moon, the lit one in its gold) in thicker glass: a bright top rim, a glowing
   lower lip and a sheen across the upper half, like a piece of sea glass. At night the
   glass is moonlit periwinkle, so it lifts off the indigo sky. */
.mode, .round, .grabber, .mapfab, .counter, .wchip, .poibanner {
  --pill-glass: rgba(250, 243, 234, 0.5);
  --pill-rim: rgba(255, 255, 255, 0.95);
  --pill-ring: rgba(255, 255, 255, 0.5);
  --pill-lip: rgba(255, 255, 255, 0.4);
  --pill-sheen: rgba(255, 255, 255, 0.55);
  --pill-edge: rgba(74, 52, 60, 0.12);
  --pill-drop: rgba(72, 48, 60, 0.16);
  --pill-glow: transparent;
}
/* The capsule's own shape. The round buttons share only the glass above, never this:
   inheriting the pill's flex layout and 5px padding pushed their icon off-centre. */
.mode {
  position: relative; isolation: isolate;
  display: flex; gap: 2px; padding: 5px;
  border-radius: 999px;
  box-shadow: 0 0 0 0.5px var(--pill-edge), 0 1px 2px var(--pill-drop), 0 8px 20px var(--pill-drop), 0 0 16px var(--pill-glow);
}
[data-theme="night"] .mode, [data-theme="night"] .round,
[data-theme="night"] .grabber, [data-theme="night"] .mapfab,
[data-theme="night"] .counter, [data-theme="night"] .wchip, [data-theme="night"] .poibanner {
  --pill-glass: rgba(146, 164, 226, 0.3);
  --pill-rim: rgba(226, 234, 255, 0.6);
  --pill-ring: rgba(196, 212, 255, 0.26);
  --pill-lip: rgba(176, 196, 255, 0.24);
  --pill-sheen: rgba(226, 234, 255, 0.24);
  --pill-edge: rgba(210, 222, 255, 0.3);
  --pill-drop: rgba(3, 8, 24, 0.4);
  --pill-glow: rgba(150, 172, 236, 0.22);
}
/* The frosted glass lives on a layer behind the two buttons, never on their parent:
   on iOS Safari a backdrop-filter element makes the buttons INSIDE it untappable. */
.mode::before, .mode::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
}
.mode::before {
  inset: 0; border-radius: inherit;
  background: var(--pill-glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--pill-rim), inset 0 0 0 1px var(--pill-ring), inset 0 -3px 6px var(--pill-lip);
}
/* the sheen: a soft streak of light caught in the upper half of the glass */
.mode::after {
  top: 1.5px; left: 6px; right: 6px; height: 50%;
  border-radius: 999px 999px 10px 10px / 999px 999px 6px 6px;
  background: linear-gradient(180deg, var(--pill-sheen), rgba(255, 255, 255, 0) 92%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.mode__btn {
  width: 32px; height: 28px; padding: 0;
  border: 0; border-radius: 999px;
  display: grid; place-items: center;
  background: transparent; color: var(--ink); opacity: 0.78;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}
.mode__btn svg { width: 15px; height: 15px; }
/* lit: WalkNessebar's gold, by day and by night (.mainmenu__mode button.is-on) */
.mode__btn[aria-pressed="true"] {
  opacity: 1; color: #0c1c24;
  background: linear-gradient(150deg, var(--gold-2), var(--gold));
  box-shadow: 0 2px 6px rgba(217, 164, 65, 0.3);
}

/* ── Page 1: Welcome ─────────────────────────────────────────────────────── */
/* The welcome screen is a size container so positions can be computed from the
   PHOTO, not the screen: --img-h is the rendered height of the cover-cropped
   photo, and (100cqh − --img-h) × 0.612 is how far its top sits above/below the
   screen's top. A feature at image fraction f is therefore at:
     calc((100cqh − var(--img-h)) * 0.612 + var(--img-h) * f)
   which lands on the same stone of the pier on every screen and device. */
.screen--welcome { container-type: size; }

.hero { position: absolute; inset: 0; background: #0e1a3a; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--horizon); }
.hero__wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250, 243, 234, 0) 62%, rgba(250, 243, 234, 0.12) 80%, rgba(250, 243, 234, 0.3) 100%); transition: opacity 0.9s ease; }
[data-theme="night"] .hero__wash { opacity: 0; }

.foam { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; overflow: hidden; pointer-events: none; z-index: 1; }
.foam__layer { position: absolute; bottom: -2px; left: 0; width: 200%; height: 100%; }
.foam__layer path { transition: fill 0.9s ease; }
.foam__layer--1 { animation: drift 42s linear infinite; }
.foam__layer--1 path { fill: rgba(250, 243, 234, 0.14); }
.foam__layer--2 { animation: drift 31s linear infinite reverse; }
.foam__layer--2 path { fill: rgba(243, 207, 211, 0.16); }
.foam__layer--3 { animation: drift 24s linear infinite; }
.foam__layer--3 path { fill: rgba(250, 243, 234, 0.22); }
[data-theme="night"] .foam__layer--1 path { fill: rgba(140, 150, 205, 0.1); }
[data-theme="night"] .foam__layer--2 path { fill: rgba(240, 200, 150, 0.07); }
[data-theme="night"] .foam__layer--3 path { fill: rgba(250, 243, 234, 0.08); }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Logo — WalkNessebar's scale and hierarchy, exactly. WalkNessebar renders its
   logo box at min((W − 56) × 0.72, 296px) wide from top clamp(40px, 7vh, 76px);
   the visible mark inside that box is 42% of the box width tall and starts 9.3%
   of the box width down. The WalkBurgas file is trimmed to its mark (866×1013),
   so matching the visible mark means: width = 35.9% of that box, and a top
   offset of 6.7% of it. (390×844 phone: WalkNessebar mark 97×101 at y 81 —
   WalkBurgas mark 86×101 at y 81.) */
.logo {
  --wn-box: min((min(100vw, 480px) - 56px) * 0.72, 296px);
  position: absolute; left: 0; right: 0; margin: 0 auto; z-index: 3;
  top: calc(clamp(40px, 7vh, 76px) + var(--wn-box) * 0.093);
  width: calc(var(--wn-box) * 0.3162);   /* 0.42 × the logo's 0.7529 aspect: WalkNessebar's visible mark height */
  animation: fadeIn 0.9s ease both;
}
.logo__img { width: 100%; height: auto; filter: drop-shadow(0 6px 18px rgba(1, 48, 100, 0.16)); transition: opacity 0.9s ease; }
.logo__img.ph-night { position: absolute; inset: 0; filter: drop-shadow(0 6px 18px rgba(3, 8, 24, 0.45)); }
[data-theme="night"] .logo__img:not(.ph-night) { opacity: 0; }

/* The language tab hangs under the horizon on the pier; the prompt sits below it,
   laid onto the dark slate band of paving between 82.4% and 86.6% of the photo. */
.langtab { position: absolute; inset: 0; z-index: 4; pointer-events: none; --img-h: max(100cqh, 133.333cqw); }
.shell {
  position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content;
  top: calc((100cqh - var(--img-h)) * 0.612 + var(--img-h) * 0.718);
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 8px 0 16px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(160deg, rgba(255, 252, 246, 0.74), rgba(250, 243, 234, 0.5));
  -webkit-backdrop-filter: blur(6px) saturate(115%); backdrop-filter: blur(6px) saturate(115%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.85), inset 0 -2px 0 rgba(74, 52, 60, 0.12), 0 14px 30px rgba(60, 40, 50, 0.2);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.4s ease;
  /* "backwards", not "both": once the entrance ends the animation lets go of the
     transform, so the press effect below can actually show. */
  animation: shellIn 0.8s 0.25s ease backwards;
}
[data-theme="night"] .shell {
  background: linear-gradient(160deg, rgba(255, 252, 246, 0.16), rgba(20, 30, 70, 0.28));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 0 rgba(3, 8, 24, 0.4), 0 14px 30px rgba(3, 8, 24, 0.4);
}
.shell:active { transform: translateY(2px) scale(0.985); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(74, 52, 60, 0.14), 0 5px 12px rgba(60, 40, 50, 0.24); }
.shell__flags { display: flex; }
.shell__flags i { display: block; width: 22px; height: 22px; margin-left: -7px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(255, 252, 246, 0.95); box-shadow: 0 1px 3px rgba(60, 40, 50, 0.22); }
.shell__flags i:first-child { margin-left: 0; }
.shell__flags svg { width: 100%; height: 100%; display: block; }
.shell__more { font-size: 12px; font-weight: var(--w-ui-strong); letter-spacing: 0.04em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.shell__go {
  flex: none; width: 36px; height: 36px; margin-left: 2px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(120, 80, 10, 0.25), 0 5px 12px rgba(120, 80, 10, 0.26);
}
.shell__go svg { width: 22px; height: 22px; }
/* At night the go-disc takes the logo's navy. */
[data-theme="night"] .shell__go {
  background: linear-gradient(180deg, #0b3f7e, #013064);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -2px 0 rgba(0, 8, 28, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.16), 0 5px 14px rgba(0, 8, 28, 0.5);
}
.shell__go { transition: background 0.9s ease, box-shadow 0.9s ease; }

.langtab__prompt {
  position: absolute; left: 0; right: 0; margin: 0;
  top: calc((100cqh - var(--img-h)) * 0.612 + var(--img-h) * 0.845);
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-display); font-weight: 500; font-style: normal;
  /* Sized from the band itself (4.2% of the photo) so the words always rest
     inside the stone, from an SE-sized phone to a tall Android. */
  font-size: clamp(17px, calc(var(--img-h) * 0.031 * var(--prompt-k, 1)), var(--fs-prompt));
  line-height: 1;
  letter-spacing: 0.035em;
  color: var(--navy);                 /* day: the logo's navy, laid straight onto the stone */
  transition: color 0.9s ease;
  animation: fadeIn 1s 0.45s ease both;
}
[data-theme="night"] .langtab__prompt { color: #fffaf1; text-shadow: 0 1px 2px rgba(5, 12, 34, 0.55), 0 0 14px rgba(5, 12, 34, 0.35); }
[data-font="editorial"] .langtab__prompt, [data-font="modern"] .langtab__prompt { --prompt-k: 0.84; }

/* ── Language sheet — WalkNessebar's drawer, in the WalkBurgas material ──── */
/* Sheets sit above the menu (70): the language sheet is opened FROM the menu. */
.drawer { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(30, 24, 40, 0.34); animation: fadeIn 0.3s ease both; }
[data-theme="night"] .drawer__scrim { background: rgba(3, 8, 24, 0.55); }
.drawer.is-closing .drawer__scrim { animation: fadeOut 0.26s ease both; }
.drawer__sheet {
  /* isolation keeps the glass layer (::before, z-index −1) inside the sheet and in
     front of the scrim; unlike opacity or a held animation it does not seal the
     backdrop, so the frost still sees the page behind. */
  position: relative; isolation: isolate; width: min(calc(100% - var(--side) * 2), 456px);
  /* Opens below the top controls (music, sun/moon), so its wave never runs into them.
     On the welcome page openDrawer() lowers it further, to sit below the logo. */
  max-height: calc(100dvh - var(--sheet-cap, calc(var(--chrome-top) + 74px)));
  display: flex; flex-direction: column;
  color: var(--ink);
  animation: sheetUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  touch-action: pan-y;
}
.drawer.is-closing .drawer__sheet { animation: sheetDown 0.26s ease-in both; }
.drawer__sheet.is-dragging { animation: none; transition: none; }
/* The body lives on a pseudo-element (the wave top edge is a mask), so the
   blurred, masked layer never contains the buttons — the iOS tap trap. */
.drawer__sheet::before, .drawer__sheet::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 30px 30px 0 0;       /* the wave meets each side in a soft shoulder */
  -webkit-mask-image: var(--wave-mask), linear-gradient(#000, #000); mask-image: var(--wave-mask), linear-gradient(#000, #000);
  -webkit-mask-size: 140px 26px, 100% calc(100% - 25px); mask-size: 140px 26px, 100% calc(100% - 25px);
  -webkit-mask-position: 0 0, 0 25px; mask-position: 0 0, 0 25px;
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
  animation: lap 18s ease-in-out infinite alternate;   /* the wave keeps moving, like the tour panels' */
}
/* The rim: the same wave 1.5px higher, peeking above the sheet's edge at the same thickness as the panel's sides. */
.drawer__sheet::after { z-index: -2; top: -1.5px; left: -1px; right: -1px; border-radius: 31px 31px 0 0; }
.drawer__head {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 32px 12px 10px 20px;
  touch-action: none;
}
.drawer__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: calc(var(--fs-lang) + 5px); letter-spacing: 0.01em; }
/* flex: none — beside a title that wraps to two lines, a shrinkable button was squeezed
   narrower than it is tall: an oval, not a circle. */
.drawer__close {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(74, 52, 60, 0.14);
  background: rgba(255, 252, 246, 0.6);
  color: var(--ink);
  transition: transform 0.14s ease;
}
[data-theme="night"] .drawer__close { border-color: rgba(247, 239, 228, 0.2); background: rgba(255, 252, 246, 0.08); }
.drawer__close:active { transform: scale(0.92); }
.drawer__close svg { width: 20px; height: 20px; }

.langs {
  list-style: none; margin: 0; padding: 4px 12px calc(18px + var(--safe-bottom));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 8px;
}
/* A scrolling flex column shrinks its items by default: without this the
   "Remove this language?" row stays one line tall and its Keep / Remove buttons
   spill out of the card. */
.langs > * { flex: none; }
.langs__head { padding: 12px 8px 2px; font-size: 11px; font-weight: var(--w-ui-strong); letter-spacing: var(--ui-caps); text-transform: uppercase; color: var(--ink-3); }
.langs__head:first-child { padding-top: 0; }
.lrow {
  display: flex; align-items: center; gap: 6px;
  min-height: 58px; padding: 0 6px 0 0;
  border: 1px solid rgba(74, 52, 60, 0.1); border-radius: 18px;
  background: rgba(255, 252, 246, 0.62);
  transition: background 0.2s ease, border-color 0.2s ease;
}
[data-theme="night"] .lrow { border-color: rgba(247, 239, 228, 0.13); background: rgba(255, 252, 246, 0.06); }
.lrow.is-active { border-color: rgba(217, 164, 65, 0.75); background: rgba(252, 240, 214, 0.9); box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.16); }
[data-theme="night"] .lrow.is-active { background: rgba(217, 164, 65, 0.16); }
.lrow.is-confirming { flex-wrap: wrap; row-gap: 10px; padding: 12px 12px 12px 14px; }
.lrow__tap { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 14px; padding: 0 0 0 14px; border: 0; background: none; cursor: pointer; text-align: left; }
.lrow__tap:disabled { cursor: default; }
.lrow__flag { flex: none; width: 32px; height: 22px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px rgba(60, 40, 50, 0.14), 0 1px 3px rgba(60, 40, 50, 0.2); }
.lrow__flag svg { width: 100%; height: 100%; display: block; }
.lrow__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lrow__name { font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-lang); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow__size, .lrow__pct { flex: none; font-size: 12.5px; letter-spacing: 0.01em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lrow__pct { min-width: 34px; text-align: right; color: var(--honey-deep); font-weight: var(--w-ui-strong); }
[data-theme="night"] .lrow__pct { color: var(--gold-2); }
.lrow__prog { display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(74, 52, 60, 0.12); overflow: hidden; }
[data-theme="night"] .lrow__prog { background: rgba(247, 239, 228, 0.16); }
.lrow__prog i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width 0.25s ease; }
.lrow__icon { flex: none; width: 38px; height: 38px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: var(--honey-deep); transition: transform 0.15s ease, color 0.2s ease; }
[data-theme="night"] .lrow__icon { color: var(--gold-2); }
.lrow__icon svg { width: 22px; height: 22px; }
.lrow__icon--quiet { color: var(--ink-3); }
[data-theme="night"] .lrow__icon--quiet { color: var(--ink-3); }
.lrow__icon:active { transform: scale(0.9); }
.lrow__confirm { flex: 1 1 auto; font-size: 14px; color: var(--ink); }
.lrow__answers { flex: 1 1 100%; display: flex; justify-content: flex-end; gap: 8px; }
.lrow__word { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(74, 52, 60, 0.18); background: none; font-size: 13px; cursor: pointer; }
[data-theme="night"] .lrow__word { border-color: rgba(247, 239, 228, 0.24); }
.lrow__word--go { border-color: rgba(217, 164, 65, 0.7); color: var(--honey-deep); font-weight: var(--w-ui-strong); }
[data-theme="night"] .lrow__word--go { color: var(--gold-2); }
.lrow__fail { font-size: 12px; color: var(--rose-deep); }

/* ── Page 2: Choose your Burgas ──────────────────────────────────────────── */
/* The monument photo has 300px of extra sky painted above it, so the knot sits
   lower and the title gets calm, empty sky to breathe in. */
.cbg { position: absolute; inset: 0; background: #0e1a3a; }
.cbg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.cbg__wash { position: absolute; inset: 0; background: none; }
[data-theme="night"] .cbg__wash { background: radial-gradient(90% 38% at 50% 12%, rgba(8, 16, 46, 0.34), rgba(8, 16, 46, 0) 72%); }

.choose__head {
  position: absolute; left: 24px; right: 24px; z-index: 3;
  /* below the menu and the way back beside it (2026-10-20): the 48px disc, then air */
  top: calc(var(--chrome-top) + 56px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: var(--ink);
  animation: fadeUp 0.9s 0.1s ease both;
}
.choose__eyebrow { margin: 0 0 6px; font-size: 10.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-2); padding-left: 0.34em; }
.choose__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: clamp(30px, calc(var(--fs-title) * min(1, 100vw / 390px)), var(--fs-title)); line-height: 1; letter-spacing: -0.005em; white-space: nowrap; }
.choose__rule { width: 46px; height: 7px; margin: 9px 0 7px; color: var(--honey-deep); overflow: visible; }
[data-theme="night"] .choose__rule { color: var(--gold-2); }
/* Night keeps a soft dark shadow for the cream type over the indigo sky. */
[data-theme="night"] .choose__head { text-shadow: var(--halo); }
.choose__sub { margin: 0; max-width: 100%; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-sub); line-height: 1.25; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
@media (max-height: 700px) {
  /* the heading sits lower now, under the menu and the way back (2026-10-20): its own gaps
     give that room back, so the subtitle stays as clear of the monument as before */
  .choose__eyebrow { margin-bottom: 2px; }
  .choose__title { font-size: min(var(--fs-title), 36px); }
  .choose__rule { margin: 3px 0 2px; }
}

/* One wave shape used for every undulating edge: 140px period, 26px strip. */
:root { --wave-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 26' preserveAspectRatio='none'><path d='M0 15C25 2 45 2 70 15S115 28 140 15V26H0z' fill='black'/></svg>"); }

/* Tour identities */
.tour--blue, [data-tone="blue"]     { --accent: var(--sea);   --accent-deep: var(--sea-deep);   --body: rgba(196, 218, 239, 0.8); --tint: #dce9f5; }
.tour--yellow, [data-tone="yellow"] { --accent: var(--honey); --accent-deep: var(--honey-deep); --body: rgba(247, 230, 190, 0.84); --tint: #f9eed3; }
.tour--pink, [data-tone="pink"]     { --accent: var(--rose);  --accent-deep: var(--rose-deep);  --body: rgba(244, 212, 216, 0.86); --tint: #f8e2e5; }
[data-tone="vicinity"]              { --accent: var(--sage);  --accent-deep: var(--sage-deep);  --body: rgba(206, 230, 220, 0.86); --tint: #e3f0ea; }
[data-theme="night"] .tour--blue, [data-theme="night"] [data-tone="blue"]     { --body: rgba(46, 76, 132, 0.72); --tint: rgba(191, 215, 238, 0.2); }
[data-theme="night"] .tour--yellow, [data-theme="night"] [data-tone="yellow"] { --body: rgba(112, 88, 42, 0.74); --tint: rgba(246, 228, 184, 0.2); }
[data-theme="night"] .tour--pink, [data-theme="night"] [data-tone="pink"] { --body: rgba(118, 60, 80, 0.76); --tint: rgba(243, 207, 211, 0.2); }
[data-theme="night"] [data-tone="vicinity"] { --body: rgba(40, 92, 82, 0.76); --tint: rgba(206, 230, 220, 0.2); }

/* ── WAVE LAYERS — three waves reaching the shore, each lapping over the one
   behind it. Every measurement below exists to keep the words clear:
     • a band's text starts 36px below its top — under its own wave (26px) + air;
     • it ends by --reveal − 8px — above the next wave's highest crest;
     • it starts 26px beyond the photo (plus its ring) — never touching it.
   The layout sweep (scripts) checks all three rules on every phone size. */
.screen--choose {
  --reveal: clamp(136px, 16.2vh, 154px);
  --last: calc(max(150px, 19vh) + var(--safe-bottom));
  --stack: calc(var(--reveal) * 2 + var(--last));
  --photo: clamp(98px, 28vw, 122px);
}
.screen--choose.is-two-line { --reveal: clamp(138px, 16.2vh, 154px); }   /* a subtitle on two lines (fitTags) */
.tours { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tour { position: absolute; left: 0; right: 0; pointer-events: none; animation: tideIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(0.15s + var(--i) * 0.14s); }
.tour--blue   { bottom: calc(var(--last) + var(--reveal) - 40px); height: calc(var(--reveal) + 40px); z-index: 1; }
.tour--yellow { bottom: calc(var(--last) - 40px); height: calc(var(--reveal) + 40px); z-index: 2; }
.tour--pink   { bottom: 0; height: var(--last); z-index: 3; }
.tour::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--body);
  -webkit-backdrop-filter: blur(10px) saturate(115%); backdrop-filter: blur(10px) saturate(115%);
  -webkit-mask-image: var(--wave-mask), linear-gradient(#000, #000); mask-image: var(--wave-mask), linear-gradient(#000, #000);
  -webkit-mask-size: 140px 26px, 100% calc(100% - 25px); mask-size: 140px 26px, 100% calc(100% - 25px);
  -webkit-mask-position: 0 0, 0 25px; mask-position: 0 0, 0 25px;
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
  transition: background 0.9s ease;
  animation: lap 14s ease-in-out infinite alternate;
}
.tour--yellow::before { animation-duration: 17s; animation-direction: alternate-reverse; }
.tour--pink::before { animation-duration: 21s; }
@keyframes lap { from { -webkit-mask-position: 0 0, 0 25px; mask-position: 0 0, 0 25px; } to { -webkit-mask-position: 140px 0, 0 25px; mask-position: 140px 0, 0 25px; } }
.tour::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: -1; filter: blur(10px); background: rgba(60, 40, 50, 0.14); transform: translateY(6px); }

.tour__hit { position: absolute; inset: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; pointer-events: auto; }
.tour__hit:active .tour__photo { transform: scale(0.97); }

.tour__photo {
  position: absolute; top: 26px; z-index: 1;
  width: var(--photo); height: var(--photo); overflow: hidden;
  border-radius: 58% 42% 46% 54% / 52% 46% 54% 48%;
  box-shadow: 0 10px 22px rgba(60, 40, 50, 0.2), 0 0 0 4px var(--tint);
  transition: transform 0.16s ease, box-shadow 0.9s ease;
  animation: blob 11s ease-in-out infinite alternate;
}
.tour--blue .tour__photo, .tour--pink .tour__photo { left: 18px; }
.tour--yellow .tour__photo { right: 18px; }
.tour__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes blob {
  0%   { border-radius: 58% 42% 46% 54% / 52% 46% 54% 48%; }
  50%  { border-radius: 46% 54% 56% 44% / 48% 58% 42% 52%; }
  100% { border-radius: 54% 46% 40% 60% / 58% 44% 56% 42%; }
}

.tour__body { position: absolute; top: 36px; z-index: 2; display: flex; flex-direction: column; min-width: 0; }
.tour--blue .tour__body, .tour--pink .tour__body { left: calc(18px + var(--photo) + 26px); right: 18px; align-items: flex-start; }
.tour--yellow .tour__body { left: 18px; right: calc(18px + var(--photo) + 26px); align-items: flex-end; text-align: right; }
.tour__eyebrow, .tour__name, .tour__tag { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; }
.tour__eyebrow { font-size: 10.5px; line-height: 1.3; font-weight: var(--w-ui-strong); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-deep); }
[data-theme="night"] .tour__eyebrow { color: var(--accent); }
.tour__name { margin: 3px 0 4px; font-family: var(--font-display); font-weight: var(--w-name); font-size: var(--fs-name); line-height: 1.08; color: var(--ink); }
/* the subtitle larger than it was (Hristo, 2026-10-16: +50%, then 20% smaller again) — two balanced lines where one will not hold it */
.tour__tag { font-size: 16.5px; line-height: 1.2; color: var(--ink-2); padding-bottom: 0.1em; margin-bottom: -0.1em; }   /* the padding keeps a "g" whole */
@keyframes tideIn { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }

/* ── Page 3: a walk — The Blue / Golden / Rose Hour ───────────────────────
   The photograph owns the top of the screen; a wave-edged "shore" rises from
   the bottom carrying the walk's name, its route and the three ways to begin.
   No words sit on the photograph, so nothing needs a glow to be read. */
.screen--tour { --shore-top: 50%; }
/* Below the photograph there is only colour: its very bottom edge melts into white by day
   and into black by night, and the glass shore rises out of that colour. */
.tourbg { --fade-day: 255, 255, 255; position: absolute; inset: 0; isolation: isolate; overflow: hidden; background-color: rgb(var(--fade-day)); transition: background-color 0.9s ease; }
[data-theme="night"] .tourbg { background-color: #000; }
.tourbg__frame {
  position: absolute; left: 0; right: 0; top: 0; height: calc(var(--shore-top) + 64px); overflow: hidden;
  --fade-from: max(0px, calc(var(--shore-top) - 44px));   /* only the very bottom edge fades */
  --fade-to: calc(var(--shore-top) + 20px);
}
.tourbg__frame::before, .tourbg__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--fade-rgb), 0) var(--fade-from),
    rgba(var(--fade-rgb), 0.28) calc(var(--fade-from) + (var(--fade-to) - var(--fade-from)) * 0.35),
    rgba(var(--fade-rgb), 0.72) calc(var(--fade-from) + (var(--fade-to) - var(--fade-from)) * 0.68),
    rgba(var(--fade-rgb), 1) var(--fade-to));
  transition: opacity 0.9s ease;
}
.tourbg__frame::before { --fade-rgb: var(--fade-day); }
.tourbg__frame::after { --fade-rgb: 0, 0, 0; z-index: 2; opacity: 0; }
[data-theme="night"] .tourbg__frame::before { opacity: 0; }
[data-theme="night"] .tourbg__frame::after { opacity: 1; }
.tourbg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 45%); }
[data-tone="blue"] .tourbg { --focus: 50% 40%; }
[data-tone="yellow"] .tourbg { --focus: 38% 46%; }
[data-tone="pink"] .tourbg { --focus: 50% 74%; }
[data-tone="blue"]   { --tint-rgb: 220, 233, 245; --shore-rgb: 196, 218, 239; }
[data-tone="yellow"] { --tint-rgb: 249, 238, 211; --shore-rgb: 247, 230, 190; }
[data-tone="pink"]   { --tint-rgb: 248, 226, 229; --shore-rgb: 244, 212, 216; }
[data-tone="vicinity"] { --tint-rgb: 227, 240, 234; --shore-rgb: 206, 230, 220; }
[data-theme="night"] [data-tone="blue"]   { --shore-rgb: 46, 76, 132; }
[data-theme="night"] [data-tone="yellow"] { --shore-rgb: 140, 104, 34; }   /* warmer than the card: over dark foliage the card hue reads khaki */
[data-theme="night"] [data-tone="pink"]   { --shore-rgb: 118, 60, 80; }
[data-theme="night"] [data-tone="vicinity"] { --shore-rgb: 40, 92, 82; }

/* The main-menu launcher: WalkNessebar's round glass button, with a wave rim.
   It turns a little as the menu opens, like a wheel. */
.menubtn {
  position: relative; width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--ink);
}
.menubtn__disc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 14px rgba(72, 48, 60, 0.2)); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.menubtn__disc path { fill: rgba(250, 243, 234, 0.78); stroke: rgba(255, 255, 255, 0.9); stroke-width: 1; transition: fill 0.9s ease, stroke 0.9s ease; }
[data-theme="night"] .menubtn__disc path { fill: rgba(22, 36, 80, 0.72); stroke: rgba(196, 212, 244, 0.4); }
[data-theme="night"] .menubtn__disc { filter: drop-shadow(0 6px 14px rgba(3, 8, 24, 0.45)); }
.menubtn__icon { position: relative; width: 22px; height: 22px; }
.menubtn[aria-expanded="true"] .menubtn__disc { transform: rotate(40deg); }
.menubtn:active .menubtn__disc { transform: rotate(20deg) scale(0.94); }
/* On arrival, two soft gold rings so the eye finds the menu, then stillness. */
.menubtn::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; pointer-events: none; animation: menuHalo 2.2s ease-out 1.1s 2 both; }
@keyframes menuHalo { from { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0.5); } to { box-shadow: 0 0 0 16px rgba(217, 164, 65, 0); } }

.shore {
  position: absolute; left: var(--side); right: var(--side); bottom: 0; z-index: 3;
  padding: 46px 18px calc(18px + var(--safe-bottom));
  color: var(--ink);
  animation: tideIn 0.9s 0.05s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.shore::before, .shore::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 30px 30px 0 0;
  -webkit-mask-image: var(--wave-mask), linear-gradient(#000, #000); mask-image: var(--wave-mask), linear-gradient(#000, #000);
  -webkit-mask-size: 140px 26px, 100% calc(100% - 25px); mask-size: 140px 26px, 100% calc(100% - 25px);
  -webkit-mask-position: 0 0, 0 25px; mask-position: 0 0, 0 25px;
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
  animation: lap 16s ease-in-out infinite alternate;
}
.shore::after { z-index: -2; top: -1.5px; left: -1px; right: -1px; border-radius: 31px 31px 0 0; }

.shore__eyebrow { margin: 0 0 7px; font-size: 10.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-deep); }
[data-theme="night"] .shore__eyebrow { color: var(--accent); }
.shore__name { margin: 0; max-width: 100%; font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-tour); line-height: 1; white-space: nowrap; overflow: hidden; }
.shore__tag { margin: 7px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-sub); line-height: 1.3; color: var(--ink-2); }
.routechip {
  margin-top: 12px; min-height: 38px; padding: 0 10px 0 11px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(74, 52, 60, 0.14); border-radius: 999px;
  background: rgba(255, 252, 246, 0.66);
  font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink-2); cursor: pointer;
  transition: transform 0.14s ease;
}
[data-theme="night"] .routechip { border-color: rgba(247, 239, 228, 0.2); background: rgba(255, 252, 246, 0.08); }
.routechip:active { transform: scale(0.97); }
.routechip svg { width: 18px; height: 18px; color: var(--accent-deep); }
[data-theme="night"] .routechip svg { color: var(--accent); }
.routechip .routechip__go { width: 14px; height: 14px; color: var(--ink-3); }

.ways { margin-top: 18px; }
.ways__q { margin: 0 0 10px; font-size: 10.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.way { position: relative; border: 0; cursor: pointer; text-align: left; color: var(--ink); -webkit-tap-highlight-color: transparent; transition: transform 0.14s ease, box-shadow 0.14s ease; }
.way:active { transform: translateY(2px) scale(0.985); }
.way__icon { flex: none; display: grid; place-items: center; border-radius: 50%; }
.way__icon svg { width: 22px; height: 22px; }
.way__title { display: block; font-family: var(--font-display); font-weight: var(--w-name); line-height: 1.08; }
.way__desc { display: block; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }

/* The primary way — Walk with a Guide: a deep wave of the walk's own colour,
   with water slowly moving along its lower edge. */
[data-tone="blue"]   { --deep-1: #2c5687; --deep-2: #4876a8; }
[data-tone="yellow"] { --deep-1: #86601a; --deep-2: #ad8230; }
[data-tone="pink"]   { --deep-1: #8c4257; --deep-2: #b06276; }
[data-tone="vicinity"] { --deep-1: #2f6a5c; --deep-2: #4f8c7c; }
.way--guide {
  width: 100%; min-height: 76px; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 14px;
  border-radius: 26px 22px 24px 22px / 24px 22px 26px 22px;
  color: #fffaf1;
  background: linear-gradient(120deg, var(--deep-1), var(--deep-2));
  box-shadow: 0 12px 26px rgba(40, 30, 50, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.way--guide::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; pointer-events: none;
  background: rgba(255, 255, 255, 0.1);
  -webkit-mask-image: var(--wave-mask); mask-image: var(--wave-mask);
  -webkit-mask-size: 120px 20px; mask-size: 120px 20px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.way--guide .way__icon { width: 42px; height: 42px; background: rgba(255, 252, 246, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); }
.way--guide .way__text { flex: 1; min-width: 0; position: relative; }
.way--guide .way__title { font-size: calc(var(--fs-name) - 2px); color: #fffaf1; white-space: nowrap; overflow: hidden; }
.way--guide .way__desc { margin-top: 3px; color: rgba(255, 250, 241, 0.9); white-space: nowrap; overflow: hidden; }
.way__go { flex: none; position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fffaf1; color: var(--deep-1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); }
.way__go svg { width: 20px; height: 20px; }

/* The other two ways — pebbles side by side. */
.ways__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.way--own, .way--map {
  min-width: 0; min-height: 116px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px 12px 14px;
  border-radius: 22px 26px 22px 24px / 24px 22px 26px 22px;
  background: rgba(255, 252, 246, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 8px 18px rgba(60, 40, 50, 0.1);
}
.way--map { border-radius: 26px 22px 24px 22px / 22px 26px 22px 24px; }
[data-theme="night"] .way--own, [data-theme="night"] .way--map { background: rgba(255, 252, 246, 0.09); box-shadow: inset 0 0 0 1px rgba(247, 239, 228, 0.16); }
.ways__pair .way__icon { width: 36px; height: 36px; background: var(--tint); color: var(--accent-deep); }
/* A way of walking this walk cannot offer yet — See the Map before its stops have
   positions. Plainly inactive, rather than a live-looking button that can't work. */
.way.is-off { opacity: 0.42; pointer-events: none; }
[data-theme="night"] .ways__pair .way__icon { background: rgba(255, 252, 246, 0.14); color: var(--accent); }
.ways__pair .way__title { margin-top: 2px; max-width: calc(100% - 14px); font-size: calc(var(--fs-name) - 8px); white-space: nowrap; overflow: hidden; }
.ways__pair .way__desc { text-wrap: balance; }
.ways__pair .way::after { content: ""; position: absolute; top: 25px; right: 16px; width: 7px; height: 7px; border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3); transform: rotate(-45deg); }


/* ── Two more wave lines ─────────────────────────────────────────────────────
   Along each panel's moving edge ride two hairlines of sea blue, off the axis of
   the main wave: a long shallow one and a short choppy one, drifting at different
   speeds in opposite directions with a slow sway, so the water never repeats the
   same shape. They fade out before the panel's sides. */
:root {
  --wave-line-1: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='22' viewBox='0 0 170 22'><path d='M0 11C30 3 54 3 85 11S140 19 170 11' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'/></svg>");
  --wave-line-2: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='118' height='18' viewBox='0 0 118 18'><path d='M0 9C21 3.5 38 3.5 59 9S97 14.5 118 9' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round'/></svg>");
  --fade-ends: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 11%, #000 89%, rgba(0, 0, 0, 0) 100%);
}
.wavelines {
  position: absolute; left: 0; right: 0; top: -13px; height: 36px; z-index: -1; pointer-events: none;
  --line-1: rgba(74, 129, 184, 0.5);
  --line-2: rgba(127, 167, 207, 0.4);
}
[data-theme="night"] .wavelines { --line-1: rgba(150, 182, 236, 0.5); --line-2: rgba(116, 152, 214, 0.38); }
.wavelines::before, .wavelines::after {
  content: ""; position: absolute; left: 0; right: 0;
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.wavelines::before {
  top: 0; height: 22px; background: var(--line-1);
  -webkit-mask-image: var(--wave-line-1), var(--fade-ends); mask-image: var(--wave-line-1), var(--fade-ends);
  -webkit-mask-size: 170px 22px, 100% 100%; mask-size: 170px 22px, 100% 100%;
  animation: drift1 26s linear infinite, sway1 11s ease-in-out infinite alternate;
}
.wavelines::after {
  top: 14px; height: 18px; background: var(--line-2);
  -webkit-mask-image: var(--wave-line-2), var(--fade-ends); mask-image: var(--wave-line-2), var(--fade-ends);
  -webkit-mask-size: 118px 18px, 100% 100%; mask-size: 118px 18px, 100% 100%;
  animation: drift2 19s linear infinite reverse, sway2 8.5s ease-in-out infinite alternate;
}
@keyframes drift1 { from { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; } to { -webkit-mask-position: 170px 0, 0 0; mask-position: 170px 0, 0 0; } }
@keyframes drift2 { from { -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; } to { -webkit-mask-position: 118px 0, 0 0; mask-position: 118px 0, 0 0; } }
@keyframes sway1 { from { transform: translateY(-1.5px); } to { transform: translateY(2px); } }
@keyframes sway2 { from { transform: translateY(1.5px); } to { transform: translateY(-2px); } }
/* The menu's edge is at its foot, so its lines hang below it and curl the other way. */
.wavelines--down { top: auto; bottom: -13px; transform: scaleY(-1); }

/* ── Main menu — the tide comes down from the top ──────────────────────── */
:root { --wave-mask-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 26' preserveAspectRatio='none'><path d='M0 11C25 24 45 24 70 11S115 -2 140 11V0H0z' fill='black'/></svg>"); }
.menu { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; align-items: flex-start; }
.menu__scrim { position: absolute; inset: 0; background: rgba(30, 24, 40, 0.34); animation: fadeIn 0.3s ease both; }
[data-theme="night"] .menu__scrim { background: rgba(3, 8, 24, 0.55); }
.menu__sheet {
  position: relative; isolation: isolate; width: min(calc(100% - var(--side) * 2), 456px);
  max-height: calc(100dvh - 36px);
  display: flex; flex-direction: column;
  padding: calc(var(--chrome-top) + 4px) 10px 40px;
  color: var(--ink);
  animation: menuDown 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.menu__sheet.is-dragging { animation: none; transition: none; }
.menu.is-closing .menu__scrim { animation: fadeOut 0.26s ease both; }
.menu.is-closing .menu__sheet { animation: menuUp 0.28s ease-in both; }
@keyframes menuDown { from { transform: translateY(-48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes menuUp { to { transform: translateY(-100%); opacity: 0.4; } }
.menu__sheet::before, .menu__sheet::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 0 0 30px 30px;
  -webkit-mask-image: linear-gradient(#000, #000), var(--wave-mask-down); mask-image: linear-gradient(#000, #000), var(--wave-mask-down);
  -webkit-mask-size: 100% calc(100% - 25px), 140px 26px; mask-size: 100% calc(100% - 25px), 140px 26px;
  -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
  -webkit-mask-repeat: no-repeat, repeat-x; mask-repeat: no-repeat, repeat-x;
  animation: lapDown 17s ease-in-out infinite alternate;
}
@keyframes lapDown { from { -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%; } to { -webkit-mask-position: 0 0, 140px 100%; mask-position: 0 0, 140px 100%; } }
/* The rim: the same wave 1.5px lower, peeking below the menu's edge; its light rises from the bottom. */
.menu__sheet::after { z-index: -2; bottom: -1.5px; left: -1px; right: -1px; border-radius: 0 0 31px 31px; --g-dir: 0deg; }

/* ── Thick sea glass ─────────────────────────────────────────────────────────
   One material for the wave panels with side clearance: the language + info sheets,
   the menu and the tour shore. ::before is the pane — a strong blur, the tint, a
   diagonal sheen, a fine frost grain and bright side edges. ::after lies behind it,
   3px proud of the wave, as the rim: solid where it shows, then its light fades
   down into the pane, like the edge of thick glass catching the light. */
:root {
  --grain-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.29  0 0 0 0 0.2  0 0 0 0 0.24  0.07 0 0 0 -0.012'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
  --grain-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.075 0 0 0 -0.02'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
}
.drawer__sheet, .menu__sheet {
  --g-body: rgba(251, 245, 237, 0.78);
  --g-rim: rgba(255, 255, 255, 0.96);
  --g-glow: rgba(255, 255, 255, 0.5);
  --g-side: rgba(255, 255, 255, 0.7);
  --g-sheen: rgba(255, 255, 255, 0.28);
  --g-sheen-2: rgba(255, 255, 255, 0.12);
  --g-grain: var(--grain-dark);
}
[data-theme="night"] .drawer__sheet, [data-theme="night"] .menu__sheet {
  --g-body: rgba(52, 78, 134, 0.84);
  --g-rim: rgba(196, 212, 244, 0.6);
  --g-glow: rgba(196, 212, 244, 0.26);
  --g-side: rgba(196, 212, 244, 0.34);
  --g-sheen: rgba(226, 234, 255, 0.14);
  --g-sheen-2: rgba(226, 234, 255, 0.06);
  --g-grain: var(--grain-light);
}
/* The shore keeps the walk's own colour, clearer at the top where the photograph fades through. */
.shore {
  --g-body: linear-gradient(180deg, rgba(var(--shore-rgb), 0.52) 0%, rgba(var(--shore-rgb), 0.72) 42%, rgba(var(--shore-rgb), 0.86) 100%);
  --g-rim: rgba(255, 255, 255, 0.9);
  --g-glow: rgba(255, 255, 255, 0.42);
  --g-side: rgba(255, 255, 255, 0.6);
  --g-sheen: rgba(255, 255, 255, 0.26);
  --g-sheen-2: rgba(255, 255, 255, 0.1);
  --g-grain: var(--grain-dark);
}
[data-theme="night"] .shore {
  --g-body: linear-gradient(180deg, rgba(var(--shore-rgb), 0.5) 0%, rgba(var(--shore-rgb), 0.68) 42%, rgba(var(--shore-rgb), 0.8) 100%), linear-gradient(rgba(196, 212, 244, 0.1), rgba(196, 212, 244, 0.1));
  --g-rim: rgba(196, 212, 244, 0.55);
  --g-glow: rgba(196, 212, 244, 0.22);
  --g-side: rgba(196, 212, 244, 0.3);
  --g-sheen: rgba(226, 234, 255, 0.12);
  --g-sheen-2: rgba(226, 234, 255, 0.05);
  --g-grain: var(--grain-light);
}
.drawer__sheet::before, .menu__sheet::before, .shore::before {
  background: linear-gradient(115deg, var(--g-sheen) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 66%, var(--g-sheen-2) 100%), var(--g-grain), var(--g-body);
  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 1.5px 0 0 var(--g-side), inset -1.5px 0 0 var(--g-side);
}
.drawer__sheet::after, .menu__sheet::after, .shore::after {
  background: linear-gradient(var(--g-dir, 180deg), var(--g-rim) 0, var(--g-rim) 30px, var(--g-glow) 38px, rgba(255, 255, 255, 0) 120px);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

.menu__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px 12px 8px; touch-action: none; }
.menu__headtext { min-width: 0; }
.menu__eyebrow { margin: 0 0 3px; white-space: nowrap; font-size: 10.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.24em; text-transform: uppercase; color: var(--honey-deep); }
[data-theme="night"] .menu__eyebrow { color: var(--gold-2); }
.menu__title { margin: 0; white-space: nowrap; font-family: var(--font-display); font-weight: var(--w-display); font-size: 32px; line-height: 1; }
.menu__ctl { display: flex; align-items: center; gap: 8px; flex: none; }
/* the top bar's speaker, bare as it is there, just left of the day/night pill */
.sound--menu { width: 34px; height: 38px; margin-right: -4px; }   /* the glyph has air inside its box; pull it in to sit with the pill */
.sound--menu svg { filter: none; }
/* phones under 380 wide: the header tightens so "Explore" never runs under the controls */
@media (max-width: 379px) {
  .menu__ctl { gap: 5px; }
  .sound--menu { width: 30px; margin-right: -1px; }
  .menu__title { font-size: 26px; }
  .menu__eyebrow { font-size: 10px; letter-spacing: 0.14em; }   /* "WALKBURGAS" is the widest line here */
  .mode--menu .mode__btn { width: 29px; }
}
/* a hairline outside the capsule (an inset one would sit under the glass layer), so the
   pill still reads against the light menu sheet */
.mode--menu { box-shadow: 0 0 0 1px rgba(74, 52, 60, 0.2); }
.mode--menu::before { background: rgba(255, 252, 246, 0.55); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme="night"] .mode--menu { box-shadow: inset 0 0 0 1px rgba(247, 239, 228, 0.18); }
[data-theme="night"] .mode--menu::before { background: rgba(255, 252, 246, 0.08); }
.menu__flag, .menu__close {
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(74, 52, 60, 0.14); background: rgba(255, 252, 246, 0.6); color: var(--ink);
  transition: transform 0.14s ease;
}
[data-theme="night"] .menu__flag, [data-theme="night"] .menu__close { border-color: rgba(247, 239, 228, 0.2); background: rgba(255, 252, 246, 0.08); }
.menu__flag:active, .menu__close:active { transform: scale(0.92); }
.menu__flag span { display: block; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(60, 40, 50, 0.16); }
.menu__flag svg { display: block; width: 100%; height: 100%; }
.menu__close svg { width: 18px; height: 18px; }

.menu__body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 2px 4px; }
.menu__group { margin: 12px 8px 4px; display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.menu__group:first-child { margin-top: 2px; }
.menu__group i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.menu__rule { display: block; width: 46px; height: 7px; margin: 10px auto 2px; color: var(--honey-deep); opacity: 0.8; }
[data-theme="night"] .menu__rule { color: var(--gold-2); }
.menu__row {
  width: 100%; min-height: 58px;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 8px 6px;
  border: 0; border-radius: 18px; background: none;
  text-align: left; color: var(--ink); cursor: pointer;
  transition: background 0.16s ease;
}
.menu__row:active { background: rgba(74, 52, 60, 0.07); }
[data-theme="night"] .menu__row:active { background: rgba(255, 252, 246, 0.07); }
.menu__chip { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 252, 246, 0.72); box-shadow: inset 0 0 0 1px rgba(74, 52, 60, 0.1); color: var(--accent-deep); }
[data-theme="night"] .menu__chip { background: rgba(255, 252, 246, 0.1); box-shadow: inset 0 0 0 1px rgba(247, 239, 228, 0.16); color: var(--accent); }
.menu__row--primary .menu__chip { background: linear-gradient(120deg, var(--deep-1), var(--deep-2)); color: #fffaf1; box-shadow: none; }
.menu__chip svg { width: 22px; height: 22px; }
.menu__rtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu__rtitle { font-family: var(--font-display); font-weight: var(--w-name); font-size: 19px; line-height: 1.15; }
.menu__rdesc { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.menu__rgo { flex: none; width: 16px; height: 16px; color: var(--ink-3); }
.menu__soon { flex: none; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(74, 52, 60, 0.16); font-size: 9.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
[data-theme="night"] .menu__soon { border-color: rgba(247, 239, 228, 0.22); }
.menu__legal { flex: none; align-self: center; margin-top: 10px; padding: 8px 12px; border: 0; background: none; font-size: 12px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── Info sheet: the route, and what each way of walking does ──────────── */
.drawer__eyebrow { margin: 0 0 4px; font-size: 10.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-deep, var(--honey-deep)); }
[data-theme="night"] .drawer__eyebrow { color: var(--accent, var(--gold-2)); }
.info { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 20px calc(22px + var(--safe-bottom)); }
.info__lead { margin: 0 0 18px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: calc(var(--fs-sub) + 1px); line-height: 1.35; color: var(--ink); }
.info__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: step; }
.info__steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.42; color: var(--ink); }
.info__steps li::before { counter-increment: step; content: counter(step); flex: none; width: 26px; height: 26px; margin-top: -2px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--accent-deep); font-size: 13px; font-weight: var(--w-ui-strong); }
[data-theme="night"] .info__steps li::before { background: rgba(255, 252, 246, 0.14); color: var(--accent); }
.info__note { margin: 20px 0 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.info__note svg { width: 42px; height: 7px; flex: none; color: var(--honey-deep); }
[data-theme="night"] .info__note svg { color: var(--gold-2); }
.info__ok { margin-top: 16px; width: 100%; min-height: 50px; border: 0; border-radius: 999px; background: linear-gradient(120deg, var(--deep-1), var(--deep-2)); color: #fffaf1; font-size: 14px; font-weight: var(--w-ui-strong); letter-spacing: 0.06em; cursor: pointer; transition: transform 0.14s ease; }
.info__ok:active { transform: translateY(2px) scale(0.985); }

.stops { position: relative; list-style: none; margin: 0; padding: 0; }
.stops::before { content: ""; position: absolute; left: 13px; top: 20px; bottom: 20px; border-left: 1.5px dashed var(--accent); opacity: 0.55; }
.stop { position: relative; display: flex; gap: 14px; padding: 8px 0; }
.stop__n { position: relative; z-index: 1; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--deep-1); color: #fffaf1; font-size: 13px; font-weight: var(--w-ui-strong); font-variant-numeric: tabular-nums; }
.stop__body { min-width: 0; padding-top: 2px; }
.stop__name { font-family: var(--font-display); font-weight: var(--w-name); font-size: 19px; line-height: 1.2; }
.stop__note { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-3); }
.stop--tbc .stop__name { font-style: italic; color: var(--ink-3); }
.stop__pois { list-style: none; margin: 4px 0 0; padding: 0; }
.stop__pois li { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.stop__pois svg { width: 14px; height: 14px; flex: none; color: var(--accent-deep); }
[data-theme="night"] .stop__pois svg { color: var(--accent); }
/* After the walk (the Golden Breeze's point 12): apart from the route's dashed line, and its disc
   carries the tree and the bird where a stop has its number. */
.stops__after { margin: 12px 0 0 42px; font-size: 11px; font-weight: var(--w-ui-strong); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.stop--info .stop__n svg { width: 20px; height: 20px; }
.counter__icon { width: 15px; height: 15px; margin: 0 6px 0 -2px; vertical-align: -3px; }

/* A small "coming in a later round" note for the prototype. */
.toast { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: calc(24px + var(--safe-bottom)); z-index: 95; max-width: min(88%, 380px); padding: 10px 16px; border-radius: 999px; background: rgba(40, 34, 56, 0.92); color: #fffaf1; font-size: 13px; text-align: center; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease; }
.toast.is-on { opacity: 1; transform: none; }


/* ── Page 5: the live map ────────────────────────────────────────────────────
   WalkNessebar's own cartography, in WalkBurgas's hand: parchment land and deep
   sea by day, night-navy and gold by night, with the walk's colour on the pin. */
/* #id, deliberately: Mapbox puts its own .mapboxgl-map class on this element and
   that class sets position:relative — which collapsed the container to zero height. */
#mapbox.mapbox { position: absolute; inset: 0; width: auto; height: auto; background: #e7dabc; isolation: isolate; }   /* the markers' z-indexes stay inside the map: never over its panel */
[data-theme="night"] #mapbox.mapbox { background: #0e2536; }
.mapbox canvas { outline: none; }
.mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib-button { opacity: 0.55; }
.mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right { bottom: calc(var(--map-chrome, 210px)); }
.map__panel { padding-top: 38px; }
.map__dist {
  margin: 10px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--fs-sub); line-height: 1.3; color: var(--ink-2);
}
.map__dist strong { font-style: normal; font-weight: var(--w-name); color: var(--ink); font-variant-numeric: tabular-nums; }
.map__panel .intro__go { margin-top: 12px; }
.map__panel.is-arrived .intro__go { animation: pulseGo 1.6s ease-in-out 3; }
@keyframes pulseGo { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px rgba(30, 50, 80, 0.3); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 30px rgba(30, 50, 80, 0.55), 0 0 0 6px rgba(127, 167, 207, 0.25); } }

/* the numbered pin, in the walk's own deep colour */
.wb-marker {
  width: 34px; height: 34px; padding: 0; border: 2px solid #fffaf1; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(150deg, var(--deep-2, #4876a8), var(--deep-1, #2c5687));
  color: #fffaf1;
  /* The same figures the route list uses in the menu (.stop__n): the UI face, not
     the display serif. Cormorant's "1" reads as a Roman I on a small disc, which
     is what sent us round this loop once already. Mapbox sets a `font:` shorthand
     on the map and that resets inherited numeric settings, so state them here. */
  font-family: var(--font-ui); font-weight: var(--w-ui-strong); font-size: 16px;
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1;
  box-shadow: 0 6px 16px rgba(10, 30, 60, 0.45);
}
[data-theme="night"] .wb-marker { border-color: rgba(255, 250, 241, 0.86); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6); }
.wb-marker.is-arrived { background: linear-gradient(150deg, var(--gold-2), var(--gold)); color: #4a3410; }
/* the stop currently being walked to, when the whole route is on the map */
.wb-marker.is-target { box-shadow: 0 0 0 4px rgba(255, 250, 241, 0.5), 0 6px 16px rgba(10, 30, 60, 0.45); }
[data-theme="night"] .wb-marker.is-target { box-shadow: 0 0 0 4px rgba(226, 234, 255, 0.32), 0 6px 16px rgba(0, 0, 0, 0.6); }

/* "you are here": the dot, its pulse and the facing beacon — WalkNessebar's */
.wb-user { position: relative; width: 22px; height: 22px; }
.wb-user__dot {
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #2f86e8; border: 2.5px solid #fff; box-shadow: 0 1px 5px rgba(2, 12, 19, 0.6);
}
.wb-user__pulse {
  position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(47, 134, 232, 0.35); animation: wbPulse 2s ease-out infinite;
}
@keyframes wbPulse { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
.wb-user__beacon {
  position: absolute; left: 50%; bottom: 50%; width: 48px; height: 42px;
  transform-origin: 50% 100%; transform: translateX(-50%);
  background: linear-gradient(to top, rgba(47, 134, 232, 0.5), rgba(47, 134, 232, 0));
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%); pointer-events: none;
}

/* ── The map's own furniture: the pull-down pill, the distance chip, the two
      controls, and the stop counter — all cut from the same thick sea glass as
      the sun/moon capsule, so they read on parchment and on the night sea.
      The blur always sits on ::before, never on the element itself: on iOS a
      backdrop-filter element makes what is inside it untappable. ─────────── */
/* background: none — these are <button>s, and the browser's own grey button fill sat on top of
   the glass layer below, so the counter and the map controls read as flat grey (cream text on
   grey at night). Clear it and the sea glass shows through as designed. */
.grabber, .mapfab, .counter, .wchip, .poibanner {
  position: relative; isolation: isolate; border: 0; background: none; color: var(--ink);
  box-shadow: 0 0 0 0.5px var(--pill-edge), 0 1px 2px var(--pill-drop), 0 8px 20px var(--pill-drop), 0 0 16px var(--pill-glow);
}
.grabber::before, .mapfab::before, .counter::before, .wchip::before, .poibanner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--pill-glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--pill-rim), inset 0 0 0 1px var(--pill-ring), inset 0 -3px 6px var(--pill-lip);
}
/* Centred in the chrome by margin, not by a percentage transform: inside the
   chrome's entrance animation Safari can draw a translated element off-centre. */
.grabber {
  position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content;
  padding: 7px 22px 5px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; touch-action: none; transition: transform 0.15s ease;
}
.grabber:active { transform: scale(0.96); }
.grabber__bar { width: 30px; height: 3.5px; border-radius: 2px; background: currentColor; opacity: 0.45; }
.grabber__chev { width: 18px; height: 18px; }

.wchip {
  position: absolute; top: calc(var(--chrome-top) + 54px); left: 0; right: 0; z-index: 7;
  margin: 0 auto; width: max-content; max-width: calc(100% - 2 * var(--side) - 20px);
  padding: 8px 15px; border-radius: 999px;
  font-size: 13.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums lining-nums; text-align: center;
  animation: fadeIn 0.45s ease backwards;
}
.wchip strong { font-weight: var(--w-ui-strong); }
.wchip.is-weak { color: var(--honey-deep); }
[data-theme="night"] .wchip.is-weak { color: var(--gold-2); }

/* Both controls clear the wave panel: --map-chrome is its measured height. */
.mapfabs {
  position: absolute; right: calc(var(--side) + 4px); z-index: 7;
  bottom: calc(var(--map-chrome, 210px) + 40px);
  display: flex; flex-direction: column; gap: 10px;
}
.mapfab {
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; transition: transform 0.15s ease, color 0.25s ease;
}
.mapfab:active { transform: scale(0.92); }
.mapfab svg { width: 22px; height: 22px; }
.mapfab.is-on { color: var(--accent-deep); }
[data-theme="night"] .mapfab.is-on { color: var(--gold-2); }

.counter {
  position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content;
  max-width: 48%; padding: 9px 14px; border-radius: 999px;
  font-family: var(--font-ui); font-size: 13px; font-weight: var(--w-ui-strong); letter-spacing: 0.05em;
  font-variant-numeric: lining-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; transition: transform 0.15s ease;
}
.counter:active { transform: scale(0.95); }

/* The stop card's way on: the stop behind, the map, the stop ahead. */
.stopacts { margin-top: 14px; display: grid; grid-template-columns: 54px 1fr 54px; gap: 10px; }
.stopacts .intro__go { margin-top: 0; }
.navarrow {
  min-height: 54px; padding: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(74, 52, 60, 0.16); background: rgba(255, 252, 246, 0.6); color: var(--ink);
  transition: transform 0.15s ease, opacity 0.2s ease;
}
[data-theme="night"] .navarrow { border-color: rgba(247, 239, 228, 0.2); background: rgba(255, 252, 246, 0.08); }
.navarrow:active { transform: scale(0.94); }
.navarrow:disabled { opacity: 0.32; cursor: default; }
.navarrow svg { width: 20px; height: 20px; }
@media (max-width: 359px) {
  .stopacts { grid-template-columns: 46px 1fr 46px; gap: 8px; }
  .counter { font-size: 12px; padding: 8px 11px; }
  .grabber { padding-left: 16px; padding-right: 16px; }
}
/* the smallest phones: the centred counter keeps its room from the back arrow beside the menu,
   in every typeface ("Look around" is the widest) */
@media (max-width: 340px) { .counter { padding: 8px 9px; } }

/* ── Page 4a: what to expect, before the first word is spoken ────────────────
   The same wave tab and the same blue as the walk it belongs to. */
.ready__panel { padding-top: 40px; }
/* two classes deep on purpose: the shared .intro__title rule below sets nowrap,
   and this title is a full sentence that must wrap. */
.intro__title.ready__title { white-space: normal; font-size: clamp(27px, 8.4vw, 36px); line-height: 1.12; }
.ready__lead { margin: 12px 0 0; font-size: 15px; line-height: 1.45; }
.ready__note { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.ready__safety {
  margin: 13px 0 0; padding-top: 13px; border-top: 1px solid rgba(74, 52, 60, 0.14);
  font-size: 13px; line-height: 1.4; color: var(--ink-2);
}
[data-theme="night"] .ready__safety { border-top-color: rgba(247, 239, 228, 0.16); }
@media (max-height: 700px) {
  .ready__panel { padding-top: 34px; }
  .ready__lead { font-size: 14px; }
}

/* ── Page 4: the guided walk's opening ───────────────────────────────────────
   The photograph covers the whole screen, edge to edge. Everything else lives in
   the same wave tab as the walk pages — the walk's own colour, the moving wave and
   its two hairlines — holding the greeting, the voice, the text and the way on. */
.introbg { position: absolute; inset: 0; background: #0e1a3a; overflow: hidden; }
.introbg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

.intro__panel { padding-top: 40px; }
.intro__eyebrow {
  margin: 0 0 6px; font-size: 10.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent-deep);
}
[data-theme="night"] .intro__eyebrow { color: var(--accent); }
.intro__title {
  margin: 0; max-width: 100%;
  font-family: var(--font-display); font-weight: var(--w-display);
  /* room under the baseline: at line-height 1 the descender of "Burgas" was clipped */
  /* room under the last line for descenders — the "modern" face's reach further than
     Cormorant's. (Not overflow: clip: Chrome then reports stale widths while a name is
     being fitted, and "Burgas Central Railway Station" measured as fitting at 46px.) */
  font-size: var(--fs-tour); line-height: 1.12; padding-bottom: 0.1em;
  white-space: nowrap; overflow: hidden;
}

/* The voice, laid straight into the tab (no card of its own). */
.narr { position: relative; margin-top: 14px; }
.narr__row { display: grid; grid-template-columns: 50px 1fr 40px; align-items: center; gap: 12px; }
.narr__play {
  width: 50px; height: 50px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.7); color: var(--accent-deep);
  background: var(--tint);
  box-shadow: 0 4px 12px rgba(40, 60, 90, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.15s ease;
}
[data-theme="night"] .narr__play { color: var(--accent); border-color: rgba(191, 215, 238, 0.34); box-shadow: 0 4px 12px rgba(3, 8, 24, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.narr__play:active { transform: scale(0.92); }
.narr__play svg { width: 24px; height: 24px; }
.narr__meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.narr__label { font-size: 14.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.01em; }
.narr__state { font-size: 12px; color: var(--ink-3); }
.narr__collapse {
  width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(74, 52, 60, 0.16); background: rgba(255, 252, 246, 0.6); color: var(--ink);
  transition: transform 0.15s ease;
}
[data-theme="night"] .narr__collapse { border-color: rgba(247, 239, 228, 0.2); background: rgba(255, 252, 246, 0.08); }
.narr__collapse:active { transform: scale(0.92); }
.narr__chev { width: 20px; height: 20px; transition: transform 0.25s ease; }
.narr__collapse[aria-expanded="false"] .narr__chev { transform: rotate(180deg); }

/* the seek bar — the walk's own blue, and the narration only, never the music */
.scrub { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.scrub__t { flex: none; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.scrub__range { flex: 1; min-width: 0; height: 22px; margin: 0; padding: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.scrub__range::-webkit-slider-runnable-track {
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-deep) 0 var(--pct, 0%), rgba(74, 52, 60, 0.18) var(--pct, 0%) 100%);
}
[data-theme="night"] .scrub__range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--accent) 0 var(--pct, 0%), rgba(247, 239, 228, 0.22) var(--pct, 0%) 100%);
}
.scrub__range::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(74, 52, 60, 0.18); }
.scrub__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%;
  background: var(--accent-deep); box-shadow: 0 1px 3px rgba(30, 50, 80, 0.4);
}
[data-theme="night"] .scrub__range::-webkit-slider-thumb { background: var(--accent); }
.scrub__range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--accent-deep); }

/* the transcript: its own scroll, so the page itself never scrolls */
.narr__text {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(74, 52, 60, 0.14);
  max-height: min(28vh, 250px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  /* the last line is cut by the scroll box, so let it fade out instead — and once
     the reader reaches the end, take the fade away. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
}
.narr__text.is-end { -webkit-mask-image: none; mask-image: none; }
[data-theme="night"] .narr__text { border-top-color: rgba(247, 239, 228, 0.16); }
.narr__text p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.45; }
.narr__text p:last-child { margin-bottom: 0; }
.narr.is-collapsed .narr__text { display: none; }

.intro__go {
  margin-top: 14px; width: 100%; min-height: 54px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(120deg, var(--deep-1), var(--deep-2));
  color: #fffaf1; font-size: 14px; font-weight: var(--w-ui-strong); letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px rgba(30, 50, 80, 0.3);
  transition: transform 0.14s ease;
}
.intro__go:active { transform: translateY(2px) scale(0.99); }
.pausebtn svg { width: 20px; height: 20px; }
.pausebtn[aria-pressed="true"] { color: var(--honey-deep); }
.pausebtn:disabled { opacity: 0.45; cursor: default; }
@media (max-height: 700px) {
  .intro__panel { padding-top: 34px; }
  .intro__title { font-size: min(var(--fs-tour), 38px); }
  .narr__text { max-height: min(22vh, 180px); }
}
/* the shortest screens (SE class, and iPhones in Safari with its bars showing): a long name
   on two lines — "Burgas Central Railway Station" — must leave the story its room */
@media (max-height: 660px) {
  .intro__title { font-size: min(var(--fs-tour), 32px); }
}
@media (max-height: 600px) {
  .intro__title { font-size: min(var(--fs-tour), 30px); }
}

/* ── The tide wipe between pages ─────────────────────────────────────────── */
.tide { position: fixed; inset: 0; z-index: 90; pointer-events: none; visibility: hidden; }
.tide.is-running { visibility: visible; }
.tide__layer { position: absolute; left: 0; width: 100%; height: 120%; top: 0; transform: translateY(105%); }
.tide__layer--1 path { fill: var(--blush); }
.tide__layer--2 path { fill: var(--cream); }
[data-theme="night"] .tide__layer--1 path { fill: #2a3466; }
/* Between a walk's own pages the tide carries that walk's colour, not the family pink. */
#tide[data-tone="blue"] .tide__layer--1 path { fill: #bfd7ee; }
#tide[data-tone="blue"] .tide__layer--2 path { fill: #e9f2fb; }
#tide[data-tone="yellow"] .tide__layer--1 path { fill: #f6e4b8; }
#tide[data-tone="yellow"] .tide__layer--2 path { fill: #fdf4e2; }
#tide[data-tone="pink"] .tide__layer--1 path { fill: #f3cfd3; }
#tide[data-tone="pink"] .tide__layer--2 path { fill: #fdeff0; }
#tide[data-tone="vicinity"] .tide__layer--1 path { fill: #cfe5dc; }
#tide[data-tone="vicinity"] .tide__layer--2 path { fill: #eef7f3; }
#tide[data-tone="fest"] .tide__layer--1 path { fill: #efdcb5; }
#tide[data-tone="fest"] .tide__layer--2 path { fill: #fbf4e6; }
[data-theme="night"] #tide[data-tone="blue"] .tide__layer--1 path { fill: #2e4c84; }
[data-theme="night"] #tide[data-tone="blue"] .tide__layer--2 path { fill: #0f1c48; }
[data-theme="night"] #tide[data-tone="yellow"] .tide__layer--1 path { fill: #6a5222; }
[data-theme="night"] #tide[data-tone="yellow"] .tide__layer--2 path { fill: #2a2140; }
[data-theme="night"] #tide[data-tone="pink"] .tide__layer--1 path { fill: #6f3a4e; }
[data-theme="night"] #tide[data-tone="pink"] .tide__layer--2 path { fill: #2a1d3c; }
[data-theme="night"] #tide[data-tone="vicinity"] .tide__layer--1 path { fill: #2a5a50; }
[data-theme="night"] #tide[data-tone="vicinity"] .tide__layer--2 path { fill: #0f2238; }
[data-theme="night"] #tide[data-tone="fest"] .tide__layer--1 path { fill: #5c4720; }
[data-theme="night"] #tide[data-tone="fest"] .tide__layer--2 path { fill: #101a3c; }
[data-theme="night"] .tide__layer--2 path { fill: #0f1c48; }
.tide.is-running .tide__layer--1 { animation: tide 1.15s cubic-bezier(0.7, 0, 0.3, 1) both; }
.tide.is-running .tide__layer--2 { animation: tide 1.15s 0.09s cubic-bezier(0.7, 0, 0.3, 1) both; }
@keyframes tide { from { transform: translateY(105%); } to { transform: translateY(-120%); } }

/* Entrance animations that wrap frosted glass use fill-mode "backwards", never
   "both": an animation that keeps holding its final opacity turns the element into
   a sealed layer in Chromium, and the glass inside it can then no longer see — or
   blur — the photograph behind. (Found 2026-09-11: the tour cards showed the stone
   sharply through their frost.) */
/* ── Motion helpers ──────────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes shellIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sheetUp { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheetDown { to { transform: translateY(100%); opacity: 0.4; } }

/* ── Short phones (iPhone SE class) ──────────────────────────────────────
   Last in the file so it wins: the bands keep just the room their words
   need, the photos get smaller and the monument keeps its place above them. */
@media (max-height: 700px) {
  .shore { padding-top: 40px; }
  .shore__name { font-size: min(var(--fs-tour), 38px); }
  .routechip { margin-top: 8px; }
  .ways { margin-top: 12px; }
  .ways__q { margin-bottom: 7px; }
  .way--guide { min-height: 66px; }
  .way--own, .way--map { min-height: 104px; }
  .screen--choose { --reveal: 118px; --photo: 94px; }
  .screen--choose.is-two-line { --reveal: 136px; }
  .tour__photo { top: 22px; }
}

/* Narrow phones: the eyebrow's tracking tightens so it stays clear of the
   sun/moon pill; very short phones drop the little wave rule for room. */
@media (max-width: 380px) {
  .choose__eyebrow { letter-spacing: 0.24em; padding-left: 0.24em; }
}
@media (max-width: 340px) {
  .choose__eyebrow { font-size: 9.5px; letter-spacing: 0.16em; padding-left: 0.16em; }
  .screen--choose { --photo: 86px; }   /* the walks' two-line subtitles keep their size */
}
@media (max-height: 600px) {
  .ways__q, .shore__tag { display: none; }
  .choose__rule { display: none; }
  .choose__head { top: calc(var(--chrome-top) + 52px); }   /* just clear of the menu and the way back */
  .choose__eyebrow { margin-bottom: 0; }
  .choose__title { margin-bottom: 0; }      /* the subtitle's own leading keeps the two apart */
}

/* Under 360 wide the wave panels keep their side clearance but give the words more room:
   the guide button's own furniture tightens too, so its title stays on one line. */
@media (max-width: 359px) {
  .shore { padding-left: 14px; padding-right: 14px; padding-top: 36px; }
  .menu__sheet { padding-left: 6px; padding-right: 6px; }
  .routechip { margin-top: 8px; }
  .ways { margin-top: 10px; }
  .way--own, .way--map { min-height: 98px; }
  .way--guide { gap: 10px; padding-left: 12px; padding-right: 10px; }
  .way--guide .way__icon { width: 36px; height: 36px; }
  .way--guide .way__icon svg { width: 19px; height: 19px; }
  .way__go { width: 34px; height: 34px; }
  .ways__pair { gap: 8px; }
  .way--own, .way--map { padding-left: 10px; padding-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  /* transition: none, not a 0.01ms duration: with the default transition-property (all),
     a near-zero duration still turns EVERY style change into a transition, so a value set
     by script reads back unchanged in the same frame — fit() could never shrink a title for
     anyone with Reduce Motion switched on. Nothing in the app waits on transitionend. */
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
}


/* ══ Stage 1 — every stop, every place, every compass point ═════════════════
   The cards are built from content.js (Hristo's narration collection and his
   coordinates). Three additions to the stop card, a quieter marker on the map for
   the compass points, and the Rose Hour's own page: places to browse. */

/* What his notes add to a stop — the architect, the address — in the walk's colour. */
.stop__facts {
  margin: 6px 0 0; font-size: 12px; line-height: 1.38; font-weight: var(--w-ui-strong);
  letter-spacing: 0.03em; color: var(--accent-deep);
}
[data-theme="night"] .stop__facts { color: var(--accent); }

/* The voice is still to be recorded: the row stays (it is part of the design), quietly. */
.narr.is-soon .scrub { display: none; }
.narr.is-soon .narr__state { font-style: italic; }
.narr__play:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.narr__play:disabled:active { transform: none; }

/* The compass points around a stop. */
.nearby {
  margin-top: 12px; width: 100%; min-height: 42px; padding: 0 12px 0 13px;
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  border: 1px solid rgba(74, 52, 60, 0.14); border-radius: 999px;
  background: rgba(255, 252, 246, 0.6); color: var(--ink-2);
  font-size: 13px; letter-spacing: 0.01em; transition: transform 0.14s ease;
}
[data-theme="night"] .nearby { border-color: rgba(247, 239, 228, 0.2); background: rgba(255, 252, 246, 0.08); }
.nearby:active { transform: scale(0.985); }
.nearby__icon { flex: none; width: 18px; height: 18px; color: var(--accent-deep); }
[data-theme="night"] .nearby__icon { color: var(--accent); }
.nearby__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nearby__go { flex: none; width: 14px; height: 14px; color: var(--ink-3); }
.nearby + .stopacts { margin-top: 12px; }
@media (max-height: 700px) {
  .nearby { min-height: 38px; margin-top: 10px; }
  .nearby + .stopacts { margin-top: 10px; }
  .stop__facts { font-size: 11.5px; }
}

/* The route list: every stop opens its card; its compass points open theirs. */
.stop { display: block; padding: 0; }
.stop__hit {
  width: 100%; display: flex; align-items: flex-start; gap: 14px; padding: 8px 0;
  border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
}
.stop__hit:active .stop__name { opacity: 0.7; }
.stop__body { flex: 1; }
.stop__go { flex: none; width: 15px; height: 15px; margin-top: 8px; color: var(--ink-3); }
.stop__pois { margin: -4px 0 6px 42px; }
.stop__pois button {
  display: flex; align-items: center; gap: 7px; padding: 3px 0; border: 0; background: none;
  color: var(--ink-2); font-size: 13px; line-height: 1.35; text-align: left; cursor: pointer;
}
[data-theme="night"] .stop__pois svg { color: var(--accent); }

/* A compass point, in the info sheet. */
.poi__info {
  margin: 0 0 14px; padding: 11px 13px; border-radius: 16px;
  background: var(--tint); color: var(--ink-2); font-size: 13px; line-height: 1.45;
}
.poi__p { margin: 0 0 11px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.poi__p:last-child { margin-bottom: 0; }
.poi__p--quiet { font-family: var(--font-display); font-style: italic; font-size: var(--fs-sub); color: var(--ink-2); }
.poi__name { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; font-family: var(--font-display); font-weight: var(--w-name); font-size: 21px; line-height: 1.2; }
.poi__name svg { flex: none; width: 18px; height: 18px; color: var(--accent-deep); }
[data-theme="night"] .poi__name svg { color: var(--accent); }
.poi--item + .poi--item { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(74, 52, 60, 0.12); }
[data-theme="night"] .poi--item + .poi--item { border-top-color: rgba(247, 239, 228, 0.14); }
.poi--item .poi__info { margin-bottom: 10px; }

/* Two stops on one spot share a pin (none do since the Blue Breeze stopped returning to the Compass). */
.wb-marker--multi { width: auto; min-width: 34px; padding: 0 9px; border-radius: 17px; font-size: 14px; letter-spacing: 0.04em; }
/* A compass point: smaller than a stop, never numbered, in the walk's colour. */
.wb-poi {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1.5px solid #fffaf1; background: rgba(255, 250, 241, 0.94); color: var(--accent-deep);
  box-shadow: 0 3px 9px rgba(10, 30, 60, 0.3);
}
.wb-poi svg { width: 15px; height: 15px; }
[data-theme="night"] .wb-poi { background: #18263f; border-color: rgba(236, 196, 118, 0.7); color: var(--gold-2); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.55); }
/* approaching it (the "You are now approaching" banner): a gold ring goes out from it, four times */
.wb-poi.is-near { animation: poiNear 1.8s ease-out 4; }
@keyframes poiNear { 0% { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0.6), 0 3px 9px rgba(10, 30, 60, 0.3); } 100% { box-shadow: 0 0 0 14px rgba(217, 164, 65, 0), 0 3px 9px rgba(10, 30, 60, 0.3); } }
.wb-poi { transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.wb-poi svg { transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* The chosen compass point (TourMap.pickPoi) — one look however it was chosen: the walk's
   own colour (gold by night), a size up, above its neighbours, and one soft ring as it is
   chosen. (A size, not a scale: Mapbox moves the marker with its transform, and a scale
   would scale that move too; the anchor keeps the centre where it was.) */
.wb-poi.is-picked {
  --pick-ring: 0 0 0 3px rgba(255, 250, 241, 0.85), 0 4px 12px rgba(10, 30, 60, 0.35);
  width: 32px; height: 32px; z-index: 4;
  background: var(--accent-deep); border-color: #fffaf1; color: #fffaf1;
  box-shadow: var(--pick-ring);
  animation: poiPick 1.3s ease-out 1;
}
.wb-poi.is-picked svg { width: 18px; height: 18px; }
[data-theme="night"] .wb-poi.is-picked {
  --pick-ring: 0 0 0 3px rgba(24, 38, 63, 0.9), 0 4px 12px rgba(0, 0, 0, 0.55);
  background: var(--gold-2); border-color: #fff4dc; color: #18263f;
}
@keyframes poiPick {
  from { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0.7), var(--pick-ring); }
  to   { box-shadow: 0 0 0 18px rgba(217, 164, 65, 0), var(--pick-ring); }
}
/* approaching the chosen one: its own approach rings, around the chosen look */
.wb-poi.is-picked.is-near { animation: poiNearPicked 1.8s ease-out 4; }
@keyframes poiNearPicked {
  from { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0.6), var(--pick-ring); }
  to   { box-shadow: 0 0 0 14px rgba(217, 164, 65, 0), var(--pick-ring); }
}

/* "Look around": a compass point within a few steps, said once, quietly. */
.poibanner {
  position: absolute; top: calc(var(--chrome-top) + 100px); left: 0; right: 0; z-index: 7;
  margin: 0 auto; width: max-content; max-width: calc(100% - 2 * var(--side) - 20px);
  padding: 7px 12px 7px 10px; border-radius: 18px; display: flex; align-items: center; gap: 10px;
  text-align: left; cursor: pointer; animation: fadeIn 0.45s ease backwards;
}
.poibanner__icon { flex: none; width: 22px; height: 22px; color: var(--honey-deep); }
[data-theme="night"] .poibanner__icon { color: var(--gold-2); }
.poibanner__text { min-width: 0; display: flex; flex-direction: column; }
.poibanner__text small { font-size: 9.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.poibanner__text strong { font-size: 14px; font-weight: var(--w-ui-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poibanner__go { flex: none; width: 14px; height: 14px; color: var(--ink-3); }

/* ── The Rose Hour: places to browse ─────────────────────────────────────────
   A row of cards to swipe. The card in the middle is in focus (the others step
   back), and its photograph, blurred, fills the page behind — so the colour of the
   whole screen follows the place you are looking at. */
.screen--places {
  --pl-bg: #f6ebe7; --pl-edge: 251, 243, 239; --pl-mid: 248, 226, 229; --pl-shade: 96, 52, 70;
  display: flex; flex-direction: column;
  padding: calc(var(--chrome-top) + 60px) 0 calc(14px + var(--safe-bottom));
  background: var(--pl-bg); color: var(--ink);
}
[data-theme="night"] .screen--places { --pl-bg: #17142b; --pl-edge: 23, 20, 43; --pl-mid: 70, 34, 58; }
.screen--places[data-tone="vicinity"] { --pl-bg: #eaf3ef; --pl-edge: 244, 250, 247; --pl-mid: 214, 235, 226; --pl-shade: 40, 80, 70; }
[data-theme="night"] .screen--places[data-tone="vicinity"] { --pl-bg: #0f1e29; --pl-edge: 14, 26, 40; --pl-mid: 30, 70, 64; }
.placesbg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.placesbg__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.placesbg__layer.is-on { opacity: 1; }
.placesbg__layer img {
  position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px);
  object-fit: cover; filter: blur(28px) saturate(120%);
}
.placesbg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--pl-edge), 0.74) 0%, rgba(var(--pl-mid), 0.5) 46%, rgba(var(--pl-edge), 0.84) 100%);
}
[data-theme="night"] .placesbg::after {
  background: linear-gradient(180deg, rgba(var(--pl-edge), 0.72) 0%, rgba(var(--pl-mid), 0.44) 46%, rgba(var(--pl-edge), 0.86) 100%);
}
.places__head, .carousel, .places__foot { position: relative; z-index: 2; }
.places__head { padding: 0 calc(var(--side) + 14px); text-align: center; animation: fadeIn 0.8s ease backwards; }
.places__eyebrow { margin: 0 0 5px; font-size: 10.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-deep); }
[data-theme="night"] .places__eyebrow { color: var(--accent); }
.places__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: clamp(30px, 9vw, 40px); line-height: 1.08; padding-bottom: 2px; white-space: nowrap; overflow: hidden; }
.places__sub { margin: 4px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-sub); line-height: 1.3; color: var(--ink-2); }

.carousel {
  --card-w: min(76vw, 330px);
  flex: 1 1 auto; min-height: 0; margin-top: 14px;
  display: flex; gap: 14px; align-items: stretch;
  padding: 6px calc((100% - var(--card-w)) / 2) 20px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.place {
  --d: 0;
  flex: none; width: var(--card-w); position: relative; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 30px; overflow: hidden;
  background: var(--pc-bg, #fdf5f1); color: var(--ink); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 18px 38px rgba(var(--pl-shade, 96, 52, 70), 0.24);
  transform: scale(calc(1 - var(--d) * 0.08)); opacity: calc(1 - var(--d) * 0.38);
  animation: tideIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
[data-theme="night"] .place { background: var(--pc-bg, #251f3c); box-shadow: inset 0 0 0 1px rgba(247, 239, 228, 0.14), 0 18px 38px rgba(0, 0, 0, 0.45); }
.place:active { filter: brightness(0.97); }
.place__photo { position: relative; flex: 1 1 auto; min-height: 120px; }
.place__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the card's text rides on a wave, as every panel in WalkBurgas does */
.place__body {
  position: relative; isolation: isolate; flex: none; margin-top: -26px;
  display: flex; flex-direction: column; align-items: flex-start; padding: 32px 20px 18px;
}
.place__body::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--pc-wave, rgba(248, 226, 229, 0.96)) 0%, var(--pc-bg, #fdf5f1) 62%);
  -webkit-mask-image: var(--wave-mask), linear-gradient(#000, #000); mask-image: var(--wave-mask), linear-gradient(#000, #000);
  -webkit-mask-size: 140px 26px, 100% calc(100% - 25px); mask-size: 140px 26px, 100% calc(100% - 25px);
  -webkit-mask-position: 0 0, 0 25px; mask-position: 0 0, 0 25px;
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
  animation: lap 18s ease-in-out infinite alternate;
}
[data-theme="night"] .place__body::before { background: linear-gradient(180deg, var(--pc-wave, rgba(118, 60, 80, 0.97)) 0%, var(--pc-bg, #251f3c) 70%); }
.place__tag { font-size: 10px; font-weight: var(--w-ui-strong); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-deep); }
[data-theme="night"] .place__tag { color: var(--accent); }
.place__name { margin-top: 4px; font-family: var(--font-display); font-weight: var(--w-display); font-size: 28px; line-height: 1.08; }
.place__hook {
  margin-top: 6px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 16.5px; line-height: 1.3; color: var(--ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.place__open {
  margin-top: 12px; min-height: 36px; padding: 0 12px 0 16px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(120deg, var(--deep-1), var(--deep-2)); color: #fffaf1;
  font-size: 12px; font-weight: var(--w-ui-strong); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 14px rgba(96, 40, 60, 0.24);
}
.place__open svg { width: 16px; height: 16px; }
/* Saint Anastasia's cards: beside "Read more", the island in 3D — the lighter of the two */
.place__acts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; max-width: 100%; }
.place__acts .place__open, .place__3d { white-space: nowrap; }
.place__3d {
  flex: none; min-height: 36px; padding: 0 14px 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1.5px solid rgba(74, 52, 60, 0.16); background: rgba(255, 252, 246, 0.78); color: var(--accent-deep);
  font-size: 12px; font-weight: var(--w-ui-strong); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(14, 26, 58, 0.1); transition: transform 0.14s ease;
}
.place__3d:active { transform: scale(0.96); }
.place__3d svg { width: 17px; height: 17px; }
[data-tone="yellow"] .place__3d { color: #8c6118; }
[data-theme="night"] .place__3d { border-color: rgba(247, 239, 228, 0.26); background: rgba(255, 252, 246, 0.08); color: var(--accent); box-shadow: none; }
/* the narrowest phones (iPhone SE): the pair drawn a little tighter, so both stay on one line */
@media (max-width: 359px) {
  .place__acts { gap: 6px; }
  .place__acts .place__open { padding: 0 8px 0 12px; letter-spacing: 0.08em; }
  .place__3d { padding: 0 10px 0 7px; letter-spacing: 0.08em; }
  .place__3d svg { width: 15px; height: 15px; }
}

.places__foot { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 var(--side); animation: fadeIn 0.8s 0.2s ease backwards; }
.dots { display: flex; gap: 7px; }
.dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(74, 52, 60, 0.22); transition: width 0.3s ease, background 0.3s ease; }
[data-theme="night"] .dots i { background: rgba(247, 239, 228, 0.26); }
.dots i.is-on { width: 20px; background: var(--accent-deep); }
[data-theme="night"] .dots i.is-on { background: var(--accent); }
.placesmap {
  min-height: 44px; padding: 0 18px 0 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid rgba(74, 52, 60, 0.16); border-radius: 999px; background: rgba(255, 252, 246, 0.72); color: var(--ink);
  font-size: 13.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.03em; transition: transform 0.14s ease;
}
[data-theme="night"] .placesmap { border-color: rgba(247, 239, 228, 0.2); background: rgba(255, 252, 246, 0.1); }
.placesmap:active { transform: scale(0.97); }
.placesmap svg { width: 18px; height: 18px; color: var(--accent-deep); }
[data-theme="night"] .placesmap svg { color: var(--accent); }
@media (max-height: 700px) {
  .screen--places { padding-top: calc(var(--chrome-top) + 54px); }
  .places__title { font-size: min(9vw, 32px); }
  .places__sub { display: none; }
  .carousel { margin-top: 10px; padding-bottom: 14px; }
  .place__body { padding: 30px 18px 14px; }
  .place__name { font-size: 24px; }
  .place__hook { font-size: 15px; -webkit-line-clamp: 2; line-clamp: 2; }
  .place__open { margin-top: 9px; min-height: 32px; }
  .place__3d { min-height: 32px; }
  .places__foot { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) { .place, .place__body::before { animation: none; } }

/* The smallest phones (iPhone SE, 1st generation, and anything under 620 tall): the
   stop card tightens so the photograph keeps a real strip above it. The chevron still
   folds the text away for the whole picture. */
@media (max-height: 620px) {
  .intro__panel { padding-top: 30px; }
  .narr { margin-top: 10px; }
  .narr__row { grid-template-columns: 44px 1fr 38px; gap: 10px; }
  .narr__play { width: 44px; height: 44px; }
  .narr__collapse { width: 38px; height: 38px; }
  .narr__text { margin-top: 9px; padding-top: 9px; max-height: min(17vh, 120px); }
  .nearby { min-height: 36px; margin-top: 8px; }
  .nearby + .stopacts { margin-top: 8px; }
  .stopacts { margin-top: 10px; }
  .stopacts .intro__go, .navarrow { min-height: 48px; }
}

/* However tall a card is — a two-line name, the architect's line, nearby points — the
   photograph keeps its strip: the panel stops short of the top controls by at least
   110px (70px on the smallest phones), and the transcript, which scrolls anyway, gives
   way first. Below that cap nothing changes. */
#stop-panel { display: flex; flex-direction: column; max-height: calc(100dvh - var(--chrome-top) - 64px - 110px); }
#stop-panel > * { flex: none; }
#stop-panel .narr { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
#stop-panel .narr__row { flex: none; }
#stop-panel .narr__text { flex: 0 1 auto; min-height: 66px; }
/* iPhone SE class: the panel may rise 10px higher than the 72px strip it used to keep, to give
   back the room the tide's crest takes (40px at the top) — the photograph is one pull away now. */
@media (max-height: 620px) { #stop-panel { max-height: calc(100dvh - var(--chrome-top) - 64px - 62px); } }

/* ══ The tide — a wave panel over a photograph can be lowered ═══════════════
   High, mid (the story's text put away) and low: only the crest of the wave laps
   at the foot of the screen, the top bar lifts away and the photograph stands
   whole. app.js (makeTide) moves the water — one number, how far the panel has
   sunk — and this is how it looks. */
.has-tide { touch-action: none; }                /* the finger moves the water, never the page… */
.has-tide .narr__text { touch-action: pan-y; }   /* …except inside the story, which scrolls */
.has-tide > :not(.wavelines):not(.crest):not(.tidelight) { opacity: var(--tide-show, 1); }
/* the photograph itself can be pulled too: an invisible layer between it and the panel */
.tidecatch { position: absolute; inset: 0; z-index: 1; touch-action: none; -webkit-tap-highlight-color: transparent; }

/* The arrow in the crest — a handle to pull, or to tap (Hristo, 2026-10-19: an arrow in
   place of the little wave). It points down while the panel is up — tap, and it lowers —
   and turns to point up once the panel lies at the foot of the screen.
   The crest needs the panel's first 40px: the wave's trough dips to 25px, and the arrow
   sits just below it, clear of the eyebrow — so the short-phone compaction (30–36px)
   gives way here. */
.shore.has-tide { padding-top: 40px; }
.crest {
  position: absolute; z-index: 2; top: 16px; left: 50%; margin-left: -38px; width: 76px; height: 28px;
  padding: 0; border: 0; border-radius: 14px; background: none; color: var(--ink-3);
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.crest svg {
  width: 24px; height: 12px; overflow: visible; --nudge: 2.5px;
  transition: rotate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.crest path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
[data-theme="night"] .crest { color: rgba(226, 234, 255, 0.72); }
.crest:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: -2px; }
.is-tiding .crest path, .crest:active path { opacity: 1; }
.is-tiding { cursor: grabbing; }
/* At low tide it is the way back: it turns up, takes the walk's colour and nudges twice
   the way it points (as it does, pointing down, the first time a panel is ever shown). */
.is-low-tide .crest { color: var(--accent-deep); }
[data-theme="night"] .is-low-tide .crest { color: var(--accent); }
.is-low-tide .crest svg { rotate: 180deg; --nudge: -2.5px; }
.is-low-tide .crest svg, .crest.is-hint svg { animation: crestNudge 1.5s ease-in-out 2; }
@keyframes crestNudge { 50% { translate: 0 var(--nudge); } }
.is-tiding, .is-tiding * { -webkit-user-select: none; user-select: none; }   /* a mouse drag never selects the title */

/* At low tide, either side of the arrow: the sun (day) and the moon (night). Sweep the
   photograph sideways — or tap one — to see it in the other light; the one lit is the one showing. */
.tidelight {
  position: absolute; z-index: 2; top: 16px; left: 50%; width: 40px; height: 28px;
  padding: 0; border: 0; border-radius: 14px; background: none; display: grid; place-items: center; cursor: pointer;
  color: var(--ink-3); opacity: 0; visibility: hidden; -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s ease, visibility 0s 0.25s, color 0.3s ease;
}
.tidelight--day { margin-left: -86px; }
.tidelight--night { margin-left: 46px; }
.tidelight svg { width: 17px; height: 17px; opacity: 0.55; transition: opacity 0.3s ease; }
.tidelight[aria-pressed="true"] svg { opacity: 1; }
[data-theme="night"] .tidelight { color: rgba(226, 234, 255, 0.72); }
.is-low-tide .tidelight { opacity: 1; visibility: visible; transition: opacity 0.5s ease 0.3s, visibility 0s, color 0.3s ease; }
.is-low-tide .tidelight[aria-pressed="true"] { color: var(--accent-deep); }
[data-theme="night"] .is-low-tide .tidelight[aria-pressed="true"] { color: var(--accent); }
.tidelight:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: -2px; }
.drawer__head > div { min-width: 0; }   /* the title wraps in its own space, beside the round close button */

/* ── Page 1½: Welcome to Burgas ───────────────────────────────────────────────
   The city's own colours rather than a walk's: the sheets' pearl glass by day, with the
   logo's navy for the voice and the way on; by night the night sheets' blue, lit in gold. */
[data-tone="city"] {
  --accent: var(--sea); --accent-deep: var(--navy);
  --tint: #eef3f8; --tint-rgb: 238, 243, 248; --shore-rgb: 251, 245, 237;
  --deep-1: #013064; --deep-2: #2d5f96;
}
[data-theme="night"] [data-tone="city"] {
  --accent: var(--gold-2); --tint: rgba(246, 228, 184, 0.2); --shore-rgb: 52, 78, 134;
  --deep-1: #c8902f; --deep-2: #ecc476;
}
[data-theme="night"] [data-tone="city"] .intro__go { color: #10214a; }
/* The photograph is a wide aerial of the whole city: at the screen's full height it is
   about three screens wide, so it drifts — very slowly, easing at each end — from the
   port and the old town across to the Sea Garden and the lakes, and back — by day and
   by night. It holds still only while a sweep's edge is crossing it (.is-lit). */
.citybg { container-type: size; }
.citybg__pan {
  position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 1586 / 992; min-width: 100%;
  animation: cityPan 110s ease-in-out -62s infinite alternate;
  will-change: translate;
}
@keyframes cityPan { from { translate: 0 0; } to { translate: calc(100cqw - 100%) 0; } }
.is-lit .citybg__pan { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .citybg__pan { animation: none; translate: calc((100cqw - 100%) * 0.62) 0; }
}

/* ══ Compass points: one card, one page ══════════════════════════════════════
   The card is the Rose places' card, in the walk's own colour: floating over the map
   when a compass is tapped, and side by side in a stop's "Look around". The page is the
   stop card's own layout — the photograph whole, the story in the wave, the tide. */
[data-tone="blue"]   { --pc-bg: #f6f9fc; --pc-wave: rgba(220, 233, 245, 0.96); }
[data-tone="yellow"] { --pc-bg: #fdf8ee; --pc-wave: rgba(249, 238, 211, 0.96); }
[data-tone="pink"]   { --pc-bg: #fdf5f1; --pc-wave: rgba(248, 226, 229, 0.96); }
[data-tone="vicinity"] { --pc-bg: #f4faf7; --pc-wave: rgba(214, 235, 226, 0.96); }
[data-theme="night"] [data-tone="blue"]   { --pc-bg: #1b2547; --pc-wave: rgba(46, 76, 132, 0.97); }
[data-theme="night"] [data-tone="yellow"] { --pc-bg: #2a2117; --pc-wave: rgba(140, 104, 34, 0.97); }
[data-theme="night"] [data-tone="pink"]   { --pc-bg: #251f3c; --pc-wave: rgba(118, 60, 80, 0.97); }
[data-theme="night"] [data-tone="vicinity"] { --pc-bg: #172a33; --pc-wave: rgba(40, 92, 82, 0.97); }
.poicard { width: 100%; height: 100%; transform: none; opacity: 1; animation: none; background: var(--pc-bg); }
.poicard .place__body::before { background: linear-gradient(180deg, var(--pc-wave) 0%, var(--pc-bg) 62%); }
[data-theme="night"] .poicard { background: var(--pc-bg); }
[data-theme="night"] .poicard .place__body::before { background: linear-gradient(180deg, var(--pc-wave) 0%, var(--pc-bg) 70%); }
.poicard .place__tag { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poicard .place__name { font-size: 26px; }
.poicard .place__hook { -webkit-line-clamp: 2; line-clamp: 2; }

/* over the map: the card, a soft dimming behind it; a tap outside, the ×, or Escape closes it */
.poipop { position: fixed; inset: 0; z-index: 60; }
.poipop__scrim { position: absolute; inset: 0; background: rgba(14, 26, 58, 0.18); animation: fadeIn 0.3s ease backwards; }
[data-theme="night"] .poipop__scrim { background: rgba(2, 6, 18, 0.42); }
.poipop__card {
  position: absolute; inset: 0; margin: auto;
  width: min(80vw, 306px); height: min(468px, calc(100dvh - var(--chrome-top) - 150px));
  filter: drop-shadow(0 18px 30px rgba(14, 26, 58, 0.28));
  animation: poipopIn 0.46s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
[data-theme="night"] .poipop__card { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5)); }
@keyframes poipopIn { from { opacity: 0; translate: 0 22px; scale: 0.97; } }
@keyframes poipopOut { to { opacity: 0; translate: 0 14px; scale: 0.98; } }
.poipop.is-closing .poipop__card { animation: poipopOut 0.22s ease-in forwards; }
.poipop.is-closing .poipop__scrim { animation: fadeOut 0.22s ease-in forwards; }
.poipop__x { position: absolute; top: 12px; right: 12px; z-index: 2; }
/* the compass that was tapped, lit in the walk's colour (colour only: Mapbox owns its transform) */

/* "Look around": the cards in a row to swipe */
.poirow {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
  padding: 4px 20px 8px; margin: 0 -20px; overscroll-behavior-x: contain; scrollbar-width: none;
}
.poirow::-webkit-scrollbar { display: none; }
.poirow--one { justify-content: center; }
.poirow .poicard { flex: none; width: min(62vw, 212px); height: 292px; scroll-snap-align: start; }
.poirow .place__body { padding: 30px 16px 14px; }
.poirow .place__name { font-size: 21px; }
.poirow .place__hook { font-size: 14.5px; }
.poirow__hint { margin: 10px 0 0; font-size: 12px; letter-spacing: 0.04em; text-align: center; color: var(--ink-3); }

/* the page: the story is the point of it, so it takes the room the voice row takes on a stop */
#poi-panel { display: flex; flex-direction: column; max-height: calc(100dvh - var(--chrome-top) - 64px - 110px); }
#poi-panel > * { flex: none; }
#poi-panel .poi__text { flex: 0 1 auto; min-height: 66px; max-height: none; }
@media (max-height: 620px) { #poi-panel { max-height: calc(100dvh - var(--chrome-top) - 64px - 62px); } }
.poi__note { padding: 10px 12px; border-radius: 14px; background: rgba(var(--tint-rgb), 0.62); color: var(--ink-2); }
.narr__text p.poi__note { font-size: 13px; line-height: 1.45; }
[data-theme="night"] .poi__note { background: rgba(255, 252, 246, 0.08); }
/* His visitor notes (St. Anastasia, Chengene Skele, the Sand Sculptures): the note's own tinted box after
   the story, under its sign — a boat for the crossings, a ticket for the exhibition — his paragraph as it is. */
.visit { margin: 14px 0 2px; padding: 11px 13px 12px; border-radius: 14px; background: rgba(var(--tint-rgb), 0.62); color: var(--ink-2); }
[data-theme="night"] .visit { background: rgba(255, 252, 246, 0.08); }
.visit__head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--font-ui); font-size: 11px; font-weight: var(--w-ui-strong); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; color: var(--ink); }
.visit__head svg { width: 18px; height: 18px; flex: none; color: var(--deep-1); }
.narr__text .visit p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.visit a { color: var(--deep-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
[data-theme="night"] .visit__head svg, [data-theme="night"] .visit a { color: var(--accent); }
/* the point's page: the menu in its corner, the back arrow just to its right */
.chrome__left { display: flex; align-items: center; gap: 8px; }
/* (the counter stays centred, as on every page — Hristo, 2026-10-21: it used to move right here) */
/* "You are now approaching": a compass point shows its compass, the stop its own number,
   drawn like its pin on the map */
.poibanner__n { display: none; }
.poibanner.is-stop .poibanner__icon { display: none; }
.poibanner.is-stop .poibanner__n {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-deep); color: #fffaf1; box-shadow: 0 0 0 1.5px #fffaf1;
  font-family: var(--font-ui); font-size: 12px; font-weight: var(--w-ui-strong); font-variant-numeric: tabular-nums;
}
[data-theme="night"] .poibanner.is-stop .poibanner__n { background: var(--gold-2); color: #18263f; box-shadow: 0 0 0 1.5px rgba(255, 250, 241, 0.6); }

/* ══ In the Vicinity (2026-10-19): the Rose Breeze's row of cards, in sea glass ══════════════
   Its cards carry Hristo's whole short description, so the words are set in the reading face
   (app.js · Places.fitHooks finds the one size that fits every card) and the photograph —
   his wide photographs suit the card's landscape window — gives them the room. */
.screen--places.is-long .place__photo { min-height: 96px; }
.screen--places.is-long .place__body { padding: 30px 18px 16px; }
.screen--places.is-long .place__name { font-size: 25px; text-wrap: balance; }
.screen--places.is-long .place__hook {
  margin-top: 7px; font-family: var(--font-ui); font-style: normal; font-weight: var(--w-ui); font-size: 15px; line-height: 1.45;
  -webkit-line-clamp: 14; line-clamp: 14;
}
.screen--places.is-long .place__open { margin-top: 11px; }
/* the shortest screens: the photograph narrows to a strip before a word of the description is folded away */
@media (max-height: 600px) { .screen--places.is-long .place__photo { min-height: 58px; } }
@media (max-height: 700px) {
  .screen--places.is-long .place__body { padding: 28px 16px 12px; }
  .screen--places.is-long .place__name { font-size: 22px; }
  .screen--places.is-long .place__hook { -webkit-line-clamp: 14; line-clamp: 14; }
  .screen--places.is-long .place__open { margin-top: 8px; }
}

/* The menu's own place: the part of the app on show is marked, softly. */
.menu__row.is-here { background: rgba(74, 52, 60, 0.05); }
[data-theme="night"] .menu__row.is-here { background: rgba(255, 252, 246, 0.07); }
.menu__row.is-here .menu__rgo { color: var(--accent-deep); }
[data-theme="night"] .menu__row.is-here .menu__rgo { color: var(--accent); }

/* ══ Festivals & Culture (2026-10-19) ══════════════════════════════════════════════════════
   The year in Burgas, set in type rather than photographs: a printed festival programme. The
   paper has a grain and the faint lines of the tide; down the page the tide line runs from
   month to month and each festival hangs from it as a TICKET — its months on a stub behind a
   perforation, then its name, what it is and when. Each season is a chapter
   in its own colour (spring sea glass, summer honey, autumn terracotta, winter the sea), the
   colours of the walks themselves. By night the paper is the night sky and the ink is gold. */
[data-tone="fest"] {
  --accent: var(--gold); --accent-deep: #8c6118; --deep-1: #86601a; --deep-2: #ad8230;
  --tint: #f9eed3; --tint-rgb: 249, 238, 211; --shore-rgb: 247, 230, 190;
}
[data-theme="night"] [data-tone="fest"] { --accent: var(--gold-2); --tint: rgba(246, 228, 184, 0.2); --shore-rgb: 140, 104, 34; }
.screen--fest {
  --fest-bg: #f6eee2;
  --ticket: #fffbf4;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.28  0 0 0 0 0.22  0 0 0 0 0.2  0 0 0 0.075 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --lines: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='96'><path d='M0 48C25 35 45 35 70 48S115 61 140 48S185 35 210 48S255 61 280 48' fill='none' stroke='%23342e4a' stroke-opacity='0.055' stroke-width='1.1'/></svg>");
  background: var(--fest-bg); color: var(--ink);
}
[data-theme="night"] .screen--fest {
  --fest-bg: #101a3c;
  --ticket: rgba(30, 44, 92, 0.86);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.86  0 0 0 0 0.62  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --lines: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='96'><path d='M0 48C25 35 45 35 70 48S115 61 140 48S185 35 210 48S255 61 280 48' fill='none' stroke='%23ecc476' stroke-opacity='0.07' stroke-width='1.1'/></svg>");
}
.festbg {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--grain), var(--lines), radial-gradient(130% 55% at 50% -6%, rgba(255, 249, 236, 0.95), rgba(255, 249, 236, 0) 70%), var(--fest-bg);
  transition: background-color 0.9s ease;
}
[data-theme="night"] .festbg {
  background: var(--grain), var(--lines), radial-gradient(130% 55% at 50% -6%, rgba(58, 78, 150, 0.55), rgba(58, 78, 150, 0) 70%), var(--fest-bg);
}
/* the words slip away under the top controls as the page scrolls */
.fest__veil {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4; pointer-events: none;
  height: calc(var(--chrome-top) + 86px);
  background: linear-gradient(180deg, #f6eee2 0%, #f6eee2 70%, rgba(246, 238, 226, 0) 100%);
  opacity: 0; transition: opacity 0.3s ease;
}
[data-theme="night"] .fest__veil { background: linear-gradient(180deg, #101a3c 0%, #101a3c 70%, rgba(16, 26, 60, 0) 100%); }
.screen--fest.is-scrolled .fest__veil { opacity: 1; }
/* On Festivals the veil is the scroller's first child, held at its top: there it shares one
   stacking context with the bar of seasons, which stacks above it in every engine. (Outside,
   Safari — which gives a scroller its own layer — drew the veil over the bar's top.) It spans
   the scroller's side padding and takes no room in the flow. */
.fest > .fest__veil {
  position: sticky; top: 0;
  margin: 0 calc(-1 * (var(--side) + 2px)) calc(-1 * (var(--chrome-top) + 86px));
}
.fest {
  position: absolute; inset: 0;   /* (no z-index: the bar inside it must stack above the veil) */
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 0 calc(var(--side) + 2px) calc(30px + var(--safe-bottom));   /* (no top padding: a sticky bar would count from inside it) */
}
.fest__head { padding: calc(var(--chrome-top) + 58px) 14px 4px; text-align: center; animation: fadeIn 0.8s ease backwards; }
.fest__eyebrow { margin: 0 0 6px; font-size: 10.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-deep); }
[data-theme="night"] .fest__eyebrow { color: var(--accent); }
.fest__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: clamp(34px, 10.4vw, 44px); line-height: 1.06; padding-bottom: 2px; white-space: nowrap; overflow: hidden; }
.fest__rule { display: block; width: 60px; height: 8px; margin: 8px auto 6px; color: var(--accent); }
.fest__sub { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-sub); line-height: 1.3; color: var(--ink-2); }

/* the bar of seasons: it stays under the top controls */
.seasons {
  position: sticky; top: calc(var(--chrome-top) + 54px); z-index: 5;
  width: 100%; max-width: 380px; margin: 16px auto 4px;
  display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(255, 252, 246, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 8px 22px rgba(74, 52, 60, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  animation: fadeIn 0.8s 0.15s ease backwards;
}
[data-theme="night"] .seasons { background: rgba(24, 36, 80, 0.86); box-shadow: inset 0 0 0 1px rgba(247, 239, 228, 0.14), 0 10px 24px rgba(0, 0, 0, 0.4); }
.seasons__btn {
  position: relative; flex: 1 1 auto; min-width: 0; min-height: 38px; padding: 0 4px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.03em; color: var(--ink-2);
  transition: background 0.25s ease, color 0.25s ease;
}
.seasons__btn svg { width: 16px; height: 16px; flex: none; color: var(--season); }
.seasons__btn[aria-current="true"] { background: var(--season-soft); color: var(--ink); }
/* the season we are in: a small dot */
.seasons__btn[data-now="true"]::after { content: ""; position: absolute; top: 5px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--season); }
@media (max-width: 374px) { .seasons__btn { gap: 4px; font-size: 12px; letter-spacing: 0.01em; } .seasons__btn svg { width: 14px; height: 14px; } }
@media (max-width: 339px) { .seasons__btn svg { display: none; } }

/* each season in its own colour (the strong one is readable as small type) */
.season--spring, .seasons__btn[data-season="spring"] { --season: #3d7862; --season-soft: rgba(95, 156, 132, 0.16); }
.season--summer, .seasons__btn[data-season="summer"] { --season: #8f6213; --season-soft: rgba(217, 164, 65, 0.2); }
.season--autumn, .seasons__btn[data-season="autumn"] { --season: #9b4631; --season-soft: rgba(196, 104, 78, 0.15); }
.season--winter, .seasons__btn[data-season="winter"] { --season: #2f5c8c; --season-soft: rgba(58, 101, 148, 0.15); }
[data-theme="night"] .season--spring, [data-theme="night"] .seasons__btn[data-season="spring"] { --season: #9fd4bf; --season-soft: rgba(143, 191, 174, 0.18); }
[data-theme="night"] .season--summer, [data-theme="night"] .seasons__btn[data-season="summer"] { --season: #ecc476; --season-soft: rgba(236, 196, 118, 0.18); }
[data-theme="night"] .season--autumn, [data-theme="night"] .seasons__btn[data-season="autumn"] { --season: #eda48a; --season-soft: rgba(237, 164, 138, 0.16); }
[data-theme="night"] .season--winter, [data-theme="night"] .seasons__btn[data-season="winter"] { --season: #a9c9ec; --season-soft: rgba(169, 201, 236, 0.16); }

.fest__year { animation: fadeIn 0.9s 0.25s ease backwards; }
.season { padding: 26px 0 4px; }
.season__head { display: grid; grid-template-columns: auto 1fr; column-gap: 13px; align-items: center; padding: 0 4px 6px; }
.season__mark {
  grid-row: span 2; width: 48px; height: 48px; padding: 11px; border-radius: 50%;
  color: var(--season); background: var(--season-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
[data-theme="night"] .season__mark { box-shadow: inset 0 0 0 1px rgba(247, 239, 228, 0.12); }
.season__name { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 38px; line-height: 1; color: var(--ink); padding-bottom: 2px; }
.season__range { margin: 3px 0 0; font-size: 10.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.18em; text-transform: uppercase; color: var(--season); }

/* the tide line, running down the season from month to month */
.tl { position: relative; list-style: none; margin: 0; padding: 0 0 4px 30px; }
.tl::before {
  content: ""; position: absolute; left: 12px; top: 18px; bottom: 26px; width: 12px;
  background: var(--season); opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='44'><path d='M6 0C10.5 7.3 10.5 14.7 6 22S1.5 36.7 6 44' fill='none' stroke='black' stroke-width='1.4'/></svg>") 0 0 / 12px 44px repeat-y;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='44'><path d='M6 0C10.5 7.3 10.5 14.7 6 22S1.5 36.7 6 44' fill='none' stroke='black' stroke-width='1.4'/></svg>") 0 0 / 12px 44px repeat-y;
}
.tl__month { position: relative; display: flex; align-items: center; gap: 9px; min-height: 26px; margin: 14px 0 8px; }
.tl__dot {
  position: absolute; left: -24.5px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%;
  background: var(--fest-bg); border: 2px solid var(--season);
}
.tl__label { font-family: var(--font-display); font-weight: var(--w-name); font-size: 21px; line-height: 1.1; color: var(--ink); }
.tl__now {
  padding: 3px 9px; border-radius: 999px; background: var(--season); color: #fffaf1;
  font-size: 9.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.16em; text-transform: uppercase;
}
[data-theme="night"] .tl__now { color: #101a3c; }
.tl__month.is-now .tl__dot { background: var(--season); box-shadow: 0 0 0 5px var(--season-soft); }

/* the tickets */
.ticket { margin: 0 0 12px; }
.ticket__card {
  position: relative; display: flex; min-height: 108px; border-radius: 18px; overflow: hidden;
  background: var(--grain), var(--ticket);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 10px 26px rgba(74, 52, 60, 0.12);
}
[data-theme="night"] .ticket__card { box-shadow: inset 0 0 0 1px rgba(247, 239, 228, 0.12), 0 12px 28px rgba(0, 0, 0, 0.34); }
/* the perforation: a dotted line, and a notch top and bottom where the stub tears away */
.ticket__card::before, .ticket__card::after {
  content: ""; position: absolute; left: 58px; width: 16px; height: 16px; border-radius: 50%; background: var(--fest-bg); z-index: 1;
}
.ticket__card::before { top: -8px; box-shadow: inset 0 -1px 0 rgba(74, 52, 60, 0.08); }
.ticket__card::after { bottom: -8px; box-shadow: inset 0 1px 0 rgba(74, 52, 60, 0.08); }
.ticket__stub {
  position: relative; flex: none; width: 66px; padding: 12px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--season-soft); color: var(--season); text-align: center;
}
.ticket__stub::after {
  content: ""; position: absolute; top: 10px; bottom: 10px; right: -1px; width: 2px;
  background: radial-gradient(circle, var(--season) 0.9px, transparent 1.3px) 0 0 / 2px 7px repeat-y; opacity: 0.55;
}
.ticket__mon { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; }
.ticket__day { font-family: var(--font-ui); font-weight: var(--w-ui-strong); font-size: 26px; line-height: 0.95; font-variant-numeric: lining-nums; }
.ticket__day + .ticket__mon { font-size: 17px; }
.ticket__to { font-size: 9px; font-weight: var(--w-ui-strong); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; white-space: nowrap; }
.ticket__body { flex: 1; min-width: 0; padding: 13px 15px 13px 16px; }
.ticket__flag {
  margin: 0 0 5px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.18em; text-transform: uppercase; color: #94650f;
}
.ticket__flag svg { width: 11px; height: 11px; }
[data-theme="night"] .ticket__flag { color: var(--gold-2); }
.ticket__flag--special { padding: 3px 9px; border-radius: 999px; background: linear-gradient(120deg, var(--gold-2), var(--gold)); color: #3a2a08; }
[data-theme="night"] .ticket__flag--special { color: #2a1d06; }
.ticket__name { margin: 0; font-family: var(--font-display); font-weight: var(--w-name); font-size: 21px; line-height: 1.12; color: var(--ink); text-wrap: balance; }
.ticket__text { margin: 7px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.ticket__when { margin: 9px 0 0; display: flex; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: var(--w-ui-strong); line-height: 1.35; letter-spacing: 0.02em; color: var(--season); }
.ticket__when svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
/* his highlights: a hairline of gold round the ticket */
.ticket.is-featured .ticket__card { box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.6), 0 10px 26px rgba(150, 110, 30, 0.16); }
[data-theme="night"] .ticket.is-featured .ticket__card { box-shadow: inset 0 0 0 1px rgba(236, 196, 118, 0.5), 0 12px 28px rgba(0, 0, 0, 0.34); }
/* the one-off and the new: a gold stub */
.ticket.is-special .ticket__stub { background: linear-gradient(160deg, #f3d48e, #d9a441); color: #3a2a08; }
.ticket.is-special .ticket__stub::after { background: radial-gradient(circle, #3a2a08 0.9px, transparent 1.3px) 0 0 / 2px 7px repeat-y; opacity: 0.4; }
@media (max-width: 359px) {
  .ticket__stub { width: 58px; }
  .ticket__card::before, .ticket__card::after { left: 50px; }
  .ticket__mon { font-size: 21px; }
  .ticket__body { padding: 12px 12px 12px 13px; }
  .ticket__name { font-size: 19.5px; }
}
.fest__note {
  margin: 18px 24px 0; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: 15px; line-height: 1.4; color: var(--ink-3);
}
@media (prefers-reduced-motion: reduce) { .fest__head, .seasons, .fest__year { animation: none; } }

/* ══ Portrait first (2026-10-19) — WalkNessebar's notice, in WalkBurgas's own colours ═══════
   On a phone turned sideways the app hides behind this prompt, so it is never shown stretched
   across a landscape screen (Safari cannot lock the orientation; a native app would). Turned
   upright again, everything is exactly as it was: nothing underneath is touched. */
.rotate-lock { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
  .rotate-lock {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    padding: 28px; text-align: center;
    background: #f7efe4; color: var(--ink);
  }
  .rotate-lock__icon { width: 56px; height: 56px; color: #b8862b; }
  .rotate-lock__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: 26px; line-height: 1.15; letter-spacing: 0.01em; }
  .rotate-lock__text { margin: 0; max-width: 30ch; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
  [data-theme="night"] .rotate-lock { background: #0e1a3a; color: #f7efe4; }
  [data-theme="night"] .rotate-lock__icon { color: var(--gold-2); }
  [data-theme="night"] .rotate-lock__text { color: rgba(247, 239, 228, 0.66); }
}

/* ══ Privacy, data and safety (2026-10-20) ══════════════════════════════════════════════════
   WalkNessebar's page, in WalkBurgas's paper by day and night sky by night: one column of
   type to read, scrolling under the top controls (the festivals' veil fades the words there). */
.screen--privacy { --fest-bg: #f7efe4; background: var(--fest-bg); color: var(--ink); }
[data-theme="night"] .screen--privacy { --fest-bg: #101a3c; }
.screen--privacy .fest__veil { background: linear-gradient(180deg, #f7efe4 0%, #f7efe4 70%, rgba(247, 239, 228, 0) 100%); }
[data-theme="night"] .screen--privacy .fest__veil { background: linear-gradient(180deg, #101a3c 0%, #101a3c 70%, rgba(16, 26, 60, 0) 100%); }
.screen--privacy.is-scrolled .fest__veil { opacity: 1; }
.privacybg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 50% at 50% -8%, rgba(255, 250, 240, 0.95), rgba(255, 250, 240, 0) 70%), var(--fest-bg);
}
[data-theme="night"] .privacybg { background: radial-gradient(130% 50% at 50% -8%, rgba(58, 78, 150, 0.5), rgba(58, 78, 150, 0) 70%), var(--fest-bg); }
.privacy {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 0 calc(var(--side) + 14px) calc(36px + var(--safe-bottom));
}
.privacy__head { padding: calc(var(--chrome-top) + 62px) 0 6px; text-align: center; animation: fadeIn 0.8s ease backwards; }
.privacy__eyebrow { margin: 0 0 6px; font-size: 10.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-deep); }
[data-theme="night"] .privacy__eyebrow { color: var(--accent); }
.privacy__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: clamp(30px, 9vw, 38px); line-height: 1.08; padding-bottom: 2px; white-space: nowrap; overflow: hidden; }
.privacy__updated { margin: 8px 0 0; font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); }
#privacy-body { max-width: 34em; margin: 0 auto; animation: fadeIn 0.9s 0.2s ease backwards; }
.privacy__lede { margin: 18px 0 4px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.4; color: var(--ink-2); }
.privacy__section { padding-top: 22px; }
.privacy__section + .privacy__section { margin-top: 4px; border-top: 1px solid rgba(74, 52, 60, 0.12); }
[data-theme="night"] .privacy__section + .privacy__section { border-top-color: rgba(247, 239, 228, 0.12); }
.privacy__heading { margin: 0 0 8px; font-family: var(--font-display); font-weight: var(--w-name); font-size: 23px; line-height: 1.15; color: var(--ink); }
.privacy__body { margin: 0 0 11px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.privacy__contact { text-align: left; }
.privacy__logo { display: block; width: 168px; height: auto; margin: 6px 0 12px; }
.privacy__logo--night { display: none; }
[data-theme="night"] .privacy__logo { display: none; }
[data-theme="night"] .privacy__logo--night { display: block; }
.privacy__address { display: flex; flex-direction: column; margin-bottom: 8px; color: var(--ink); }
.privacy__link { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
[data-theme="night"] .privacy__link { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .privacy__head, #privacy-body { animation: none; } }

/* ── Saint Anastasia Island in 3D (island/island.js draws the island) ───────────
   The whole screen is the island; the chrome, the wave panel and the light sheet are the
   app's own pieces in In the Vicinity's sage. The compasses on the island are the map's
   compass points (.wb-poi), with the place's name beside them when you come close. */
.screen--island { background: #0d2233; }
.isle-stage { position: absolute; inset: 0; z-index: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
.isle-stage canvas { outline: none; -webkit-tap-highlight-color: transparent; }
.isle-veil {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(120% 70% at 50% 40%, #e9f3ef 0%, #cfe3dc 60%, #b6d2cb 100%); color: var(--sage-deep);
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
[data-theme="night"] .isle-veil { background: radial-gradient(120% 70% at 50% 40%, #1c3a46 0%, #0f2232 70%, #0b1a28 100%); color: var(--sage); }
.isle-veil.is-gone { opacity: 0; visibility: hidden; }
.isle-veil__icon { width: 46px; height: 46px; animation: isleBob 2.6s ease-in-out infinite; }
@keyframes isleBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.isle-veil__label { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 21px; color: var(--ink); }
.isle-veil__bar { width: 150px; height: 3px; border-radius: 3px; background: rgba(60, 116, 101, 0.18); overflow: hidden; }
.isle-veil__bar span { display: block; height: 100%; width: 0; background: var(--sage-deep); border-radius: inherit; transition: width 0.4s ease; }
[data-theme="night"] .isle-veil__bar span { background: var(--sage); }
@media (prefers-reduced-motion: reduce) { .isle-veil__icon { animation: none; } }

/* compasses on the island */
.isle-pins { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 0.5s ease; }
.isle-pins.is-off { opacity: 0; }
.isle-pins.is-off .isle-pin { pointer-events: none; }
/* the button is a point on the island (0 × 0): the disc is centred on it, the name beside it —
   to its right, or to its left when the right edge is near (.is-flip, main.js) */
.isle-pin {
  position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer;
  pointer-events: none; transform-origin: 0 0; -webkit-tap-highlight-color: transparent; transition: opacity 0.35s ease;
}
.isle-pin:focus-visible { outline: none; }
.isle-pin:focus-visible .isle-pin__disc { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.isle-pin.is-hidden { opacity: 0; pointer-events: none; }
.isle-pin__disc {
  position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 1.25px solid #fffaf1; background: rgba(255, 250, 241, 0.94); color: var(--accent-deep);
  box-shadow: 0 2px 7px rgba(10, 30, 60, 0.32);
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.25s ease, color 0.25s ease;
}
.isle-pin__disc svg { width: 12px; height: 12px; }
/* the compass is small, the finger is not: a touch never stops on a compass (so a drag that starts on one
   still turns the island) — the island finds the nearest compass within 22px of a tap (main.js · pinAt) */
[data-theme="night"] .isle-pin__disc { background: #18263f; border-color: rgba(236, 196, 118, 0.7); color: var(--gold-2); box-shadow: 0 2px 7px rgba(0, 0, 0, 0.55); }
.isle-pin.is-picked .isle-pin__disc { left: -12px; top: -12px; width: 24px; height: 24px; background: var(--accent-deep); color: #fffaf1; box-shadow: 0 0 0 2px rgba(255, 250, 241, 0.85), 0 3px 9px rgba(10, 30, 60, 0.35); animation: poiPick 1.3s ease-out 1; }
.isle-pin.is-picked .isle-pin__disc svg { width: 14px; height: 14px; }
[data-theme="night"] .isle-pin.is-picked .isle-pin__disc { background: var(--gold-2); border-color: #fff4dc; color: #18263f; box-shadow: 0 0 0 2px rgba(24, 38, 63, 0.9), 0 3px 9px rgba(0, 0, 0, 0.55); }
.isle-pin__label {
  position: absolute; left: 16px; top: 0; translate: var(--nx, 0px) -50%; width: max-content; max-width: 150px;
  padding: 4px 9px; border-radius: 13px; line-height: 1.3;
  font-size: 12px; font-weight: var(--w-ui-strong); letter-spacing: 0.02em; color: var(--ink);
  background: rgba(255, 250, 241, 0.86); box-shadow: 0 3px 10px rgba(10, 30, 60, 0.22);
  opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
[data-theme="night"] .isle-pin__label { background: rgba(24, 38, 63, 0.88); color: #fbf3e6; }
.isle-pin.is-picked .isle-pin__label { left: 18px; }
.isle-pin.is-flip .isle-pin__label { left: auto; right: 16px; text-align: right; transform: translateX(6px); }
.isle-pin.is-flip.is-picked .isle-pin__label { right: 18px; }
.isle-pin.is-near .isle-pin__label, .isle-pin.is-picked .isle-pin__label { opacity: 1; transform: none; }

/* the hour, in the counter's place */
.isle-clock { font-variant-numeric: tabular-nums; }
.isle-clock .counter__icon { color: var(--honey-deep, #a4741f); }
[data-theme="night"] .isle-clock .counter__icon { color: var(--gold-2); }

/* north and the postcard, above the panel (its height is measured into --isle-panel) */
.isle-fabs { bottom: calc(var(--isle-panel, 300px) + 18px); transition: bottom 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease; }
.isle-fabs svg { transition: transform 0.2s linear; }
.screen--island.is-legend .isle-fabs, .screen--island.is-loading .isle-fabs { opacity: 0; pointer-events: none; }

/* The wave panel: lowered by the crest to a strip at the foot of the screen. */
.isle-panel { padding-top: 40px; transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }
.isle-panel.is-low { transform: translateY(calc(100% - 58px - var(--safe-bottom))); }
.isle-panel.is-low .isle-body { opacity: 0; pointer-events: none; }
.isle-body { transition: opacity 0.35s ease; }
.isle-crest svg { transition: rotate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.isle-panel.is-low .isle-crest { color: var(--accent-deep); }
.isle-panel.is-low .isle-crest svg { rotate: 180deg; }
[data-theme="night"] .isle-panel.is-low .isle-crest { color: var(--gold-2); }
.isle-panel .intro__title { white-space: nowrap; overflow: hidden; }
.isle-text { max-height: min(26vh, 230px); }
.isle-text p.poi__note { color: var(--ink-2); }
.isle-ways { margin-top: 14px; }
.isle-ways .way--guide .way__title { font-size: min(calc(var(--fs-name) - 3px), 6.4vw); }
.isle-legendchip { margin-top: 12px; }
.isle-legendchip .nearby__icon { color: var(--accent-deep); }
/* the legend, told in the panel as it happens on the water */
.isle-caption {
  margin: 12px 0 2px; min-height: 2.6em; font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 21px; line-height: 1.3; color: var(--ink); transition: opacity 0.45s ease;
}
.isle-caption.is-fading { opacity: 0; }
@media (max-height: 700px) {
  .isle-text { max-height: min(22vh, 180px); }
  .isle-ways { margin-top: 10px; }
  .isle-caption { font-size: 19px; }
  /* short phones: the overview's hint gives way so more of the island shows */
  .isle-panel.is-overview #isle-facts { display: none; }
  .isle-ways .ways__pair .way__desc { display: none; }
}

/* The light sheet. */
.isle-light { padding: 4px 20px calc(22px + var(--safe-bottom)); overflow-y: auto; }
.isle-light__now { margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.isle-light__now strong { font-family: var(--font-display); font-weight: var(--w-display); font-size: 34px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.isle-light__now span { font-size: 13px; color: var(--ink-2); }
.isle-light__range { width: 100%; height: 28px; margin: 4px 0 0; -webkit-appearance: none; appearance: none; background: none; cursor: pointer; }
.isle-light__range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #2c3e66 0%, #e7a46a 7%, #f6d58f 14%, #9fd0e8 35%, #8fc6e6 55%, #f2c070 72%, #e47b54 78%, #3b3f72 84%, #1a2140 100%); }
.isle-light__range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #2c3e66 0%, #e7a46a 7%, #f6d58f 14%, #9fd0e8 35%, #8fc6e6 55%, #f2c070 72%, #e47b54 78%, #3b3f72 84%, #1a2140 100%); }
.isle-light__range::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -9px; width: 24px; height: 24px; border-radius: 50%; background: #fffaf1; border: 2px solid var(--accent-deep); box-shadow: 0 2px 8px rgba(10, 30, 60, 0.3); }
.isle-light__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fffaf1; border: 2px solid var(--accent-deep); }
.isle-light__scale { position: relative; height: 13px; margin: 2px 2px 14px; font-size: 10.5px; line-height: 13px; font-weight: var(--w-ui-strong); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
/* each word under its hour on the slider (4:30 to 23:45): dawn at the start, noon, evening at 18:30, night at the end */
.isle-light__scale span { position: absolute; top: 0; white-space: nowrap; }
.isle-light__scale span:nth-child(1) { left: 0; }
.isle-light__scale span:nth-child(2) { left: 38.96%; transform: translateX(-50%); }
.isle-light__scale span:nth-child(3) { left: 72.73%; transform: translateX(-50%); }
.isle-light__scale span:nth-child(4) { right: 0; margin-right: -0.16em; }
.isle-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.isle-chip {
  min-height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(74, 52, 60, 0.16); background: rgba(255, 252, 246, 0.62); color: var(--ink);
  font-size: 13px; letter-spacing: 0.01em; transition: transform 0.14s ease, background 0.2s ease, color 0.2s ease;
}
[data-theme="night"] .isle-chip { border-color: rgba(247, 239, 228, 0.2); background: rgba(255, 252, 246, 0.08); }
.isle-chip:active { transform: scale(0.96); }
.isle-chip[aria-pressed="true"] { background: linear-gradient(120deg, var(--deep-1), var(--deep-2)); border-color: transparent; color: #fffaf1; }
.isle-light__label { margin: 16px 0 8px; font-size: 10.5px; font-weight: var(--w-ui-strong); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-deep); }
[data-theme="night"] .isle-light__label { color: var(--accent); }
.isle-light__note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.drawer--isle .drawer__sheet { --shore-rgb: 206, 230, 220; }
[data-theme="night"] .drawer--isle .drawer__sheet { --shore-rgb: 40, 92, 82; }
.isle-flash { position: absolute; inset: 0; z-index: 9; background: #fffaf1; pointer-events: none; animation: isleFlash 0.6s ease-out both; }
@media (prefers-reduced-motion: reduce) { .isle-flash { display: none; } }
@keyframes isleFlash { from { opacity: 0.85; } to { opacity: 0; } }