/* ==========================================================================
   Tsarevets 3D — promotional site (tsarevets3d.com)
   The WalkNessebar / WalkBurgas promo's layout and motion, in the app's own
   materials: dark stone and its granite grain, parchment, brass, the tsars'
   red, and the battlements of its slabs. Cormorant for display, Jost for the rest.
   ========================================================================== */

@font-face { font-family: 'TSV Serif'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../../fonts/cormorant-garamond-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'TSV Serif'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../../fonts/cormorant-garamond-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'TSV Serif'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../../fonts/cormorant-garamond-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'TSV Serif'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(../../fonts/cormorant-garamond-latin-wght-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'TSV Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../../fonts/jost-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'TSV Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../../fonts/jost-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+2C60-2C7F; }
@font-face { font-family: 'TSV Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../../fonts/jost-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --ink:        #120f0c;          /* the app's stone: the night, the deep shadow */
  --ink-2:      #1a1511;
  --ink-3:      #2a231d;
  --paper:      #f6eedc;          /* parchment, a shade lighter than the app's #f3e7cc for long reading */
  --paper-2:    #ede0c3;
  --paper-3:    #e2d2ae;

  --gold:       #e5c27a;          /* the app's brass, lit */
  --gold-lit:   #f0d699;
  --gold-deep:  #7a5718;          /* brass type on parchment (small caps read at 5.6:1 on the paper) */
  --ember:      #b8402f;          /* the tsars' red */
  --river:      #6fa59a;          /* the Yantra */
  --navy:       #1d1814;          /* (dark type on the light bar) */

  --text-dark:  #2a2119;
  --text-mid:   #5e5040;
  --text-light: rgba(243, 231, 204, .78);
  --text-faint: rgba(243, 231, 204, .56);
  --on-dark:    #f3e7cc;          /* the app's parchment ink */

  --serif: 'TSV Serif', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'TSV Sans', 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --wrap: 1120px;
  --nav-h: 54px;
  --pad: clamp(22px, 5vw, 40px);
  --sec-y: clamp(84px, 12vw, 168px);

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* the app's stone glass: the fine speckle of granite, and the battlements of the menu's slab */
  --granite: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.86  0 0 0 0 0.76  0 0 0 0 0.6  0 0 0 1.5 -0.92'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --granite-dark: 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.65' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.03  0 0 0 0 0.02  0 0 0 2.4 -1.3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --merlons-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='14'><path d='M0 14h34v-4H27.5V1.8A1.8 1.8 0 0 0 25.7 0H8.3a1.8 1.8 0 0 0-1.8 1.8V10H0z'/></svg>");
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-dark);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

::selection { background: rgba(229, 194, 122, .34); }

/* ------------------------------------------------------------------ layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--wide { max-width: 1320px; }

.sec {
  position: relative;
  padding-block: var(--sec-y);
  overflow: hidden;
}
.sec--paper { background: var(--paper); }
.sec--gray  { background: var(--paper-2); }

.sec--dark {
  background: var(--ink);
  color: var(--on-dark);
}
.sec--dark h1, .sec--dark h2, .sec--dark h3 { color: var(--on-dark); }
.sec--dark p { color: var(--text-light); }

.sec--tight { padding-block: clamp(60px, 8vw, 110px); }

/* ------------------------------------------------------------------- type  */

h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -.015em; }

.eyebrow {
  margin: 0 0 20px;
  font-family: var(--sans);
  font-size: clamp(11px, 1.1vw, 12px);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold);
}
.sec--paper .eyebrow, .sec--gray .eyebrow { color: var(--gold-deep); }

.h1 {
  font-family: var(--serif);
  /* also bound by viewport height so the hero composition survives a laptop */
  font-size: clamp(34px, min(5.7vw, 8.6vh), 76px);
  line-height: 1.04;
  letter-spacing: -.022em;
}
.h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.08;
  letter-spacing: -.018em;
  /* on a phone a line can break inside a half — keep the rows even, never a lone last word */
  text-wrap: balance;
}
.h3 {
  font-family: var(--serif);
  font-size: clamp(25px, 2.9vw, 38px);
  line-height: 1.14;
  /* let a longer heading find its own even break rather than orphaning a word */
  text-wrap: balance;
}
.h4 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.lede {
  margin: 22px 0 0;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.5;
  color: var(--text-mid);
  max-width: 40ch;
}
.sec--dark .lede { color: var(--text-light); }
.lede--wide { max-width: 56ch; }

.center { text-align: center; }
.center .lede { margin-inline: auto; }

.gold { color: var(--gold); }
.sec--paper .gold, .sec--gray .gold { color: var(--gold-deep); }

.rule {
  width: 34px; height: 1px; margin: 30px 0 0;
  background: var(--gold);
  opacity: .8;
}
.center .rule { margin-inline: auto; }

/* -------------------------------------------------------------------- nav  */

/* Three states, all driven by script:
   bare       — at rest on the hero, nothing behind the links at all
   .is-bar    — a dark frosted pane, from the moment the hero copy reaches it
   + .is-solid — the light pane, whenever a paper section is behind it
   Without a pane the white links ran straight over the hero headline. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  box-shadow: none;
  transition: background .45s var(--ease), box-shadow .45s var(--ease);
}
.nav.is-bar {
  background: rgba(18, 15, 12, .74);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.nav__in {
  width: 100%; max-width: 1320px; margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

.nav.is-bar.is-solid {
  background: rgba(246, 238, 220, .8);
  box-shadow: 0 1px 0 rgba(42, 33, 25, .12);
}

/* mark + wordmark: the stacked app lockup is unreadable at nav height, so the
   mark is paired with the name set in the same serif */
.brand { display: flex; align-items: center; gap: 9px; }
.brand__mark { position: relative; flex: none; width: 20px; height: 27px; }
.brand__mark img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  transition: opacity .4s var(--ease);
}
.brand__word {
  font-family: var(--serif);
  font-size: 18px; line-height: 1;
  color: #fff;
  transition: color .4s var(--ease);
}
.brand__navy  { opacity: 0; }
.nav.is-solid .brand__white { opacity: 0; }
.nav.is-solid .brand__navy  { opacity: 1; }
.nav.is-solid .brand__word  { color: var(--navy); }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.nav__links a {
  font-size: 13px; font-weight: 400; letter-spacing: -.005em;
  color: rgba(255, 255, 255, .84);
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
.nav__links a:hover { color: #fff; }
.nav.is-solid .nav__links a { color: rgba(42, 33, 25, .84); }
.nav.is-solid .nav__links a:hover { color: var(--navy); }

.nav__cta {
  padding: 6px 15px; border-radius: 980px;
  background: var(--gold); color: var(--ink) !important;
  font-weight: 600; font-size: 12.5px !important;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.nav__cta:hover { background: var(--gold-lit); transform: translateY(-1px); }

.nav__burger {
  display: none; width: 34px; height: 34px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.nav__burger span {
  display: block; width: 18px; height: 1.5px; margin: 4px auto;
  background: #fff; border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease),
              background .4s var(--ease);
}
.nav.is-solid .nav__burger span { background: var(--text-dark); }
/* the open menu is a dark overlay — a frosted white bar across its top would
   read as a seam, so the nav drops back to its transparent state */
/* (as specific as the light pane's own rules, or a paper section left a cream bar over the menu) */
body.menu-open .nav, body.menu-open .nav.is-bar, body.menu-open .nav.is-bar.is-solid {
  background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.menu-open .nav .brand__white, body.menu-open .nav.is-solid .brand__white { opacity: 1; }
body.menu-open .nav .brand__navy,  body.menu-open .nav.is-solid .brand__navy  { opacity: 0; }
body.menu-open .nav .brand__word,  body.menu-open .nav.is-solid .brand__word  { color: #fff; }
body.menu-open .nav .nav__burger span, body.menu-open .nav.is-solid .nav__burger span { background: #fff; }
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 0 var(--pad);
  background: rgba(18, 15, 12, .97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden;
  transition: opacity .42s var(--ease), visibility .42s var(--ease);
}
body.menu-open .menu { opacity: 1; visibility: visible; }
.menu a {
  font-family: var(--serif);
  font-size: clamp(30px, 8vw, 46px);
  color: #fff; padding: 10px 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
body.menu-open .menu a { opacity: 1; transform: none; }
body.menu-open .menu a:nth-child(1) { transition-delay: .06s; }
body.menu-open .menu a:nth-child(2) { transition-delay: .10s; }
body.menu-open .menu a:nth-child(3) { transition-delay: .14s; }
body.menu-open .menu a:nth-child(4) { transition-delay: .18s; }
body.menu-open .menu a:nth-child(5) { transition-delay: .22s; }
body.menu-open .menu a:nth-child(6) { transition-delay: .26s; }
body.menu-open .menu a:nth-child(7) { transition-delay: .30s; }
body.menu-open .menu a:nth-child(8) { transition-delay: .34s; }
/* eight links outgrow a landscape phone: the list scrolls, starting under the bar. Centred by
   auto margins, not "safe center" (Safari before 17.6 ignores "safe" and lets the first link
   slide under the bar) */
.menu { overflow-y: auto; justify-content: flex-start; padding-block: calc(var(--nav-h) + 12px) 24px; }
.menu a:first-child { margin-top: auto; }
.menu a:last-child { margin-bottom: auto; }
@media (max-height: 520px) { .menu a { font-size: 26px; padding: 6px 0; } }

/* ------------------------------------------------------------------- hero  */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding-top: calc(var(--nav-h) + clamp(18px, 4vh, 56px));
  padding-bottom: clamp(34px, 6vh, 80px);
  background: var(--ink);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

/* a slow warm dawn behind the devices — cinematic, never busy */
.hero__glow {
  position: absolute; left: 50%; top: 38%;
  width: min(1500px, 165vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(229, 194, 122, .26), rgba(229, 194, 122, 0) 70%),
    radial-gradient(closest-side, rgba(184, 64, 47, .2), rgba(184, 64, 47, 0) 68%);
  background-position: 42% 44%, 66% 62%;
  background-size: 92% 92%, 78% 78%;
  background-repeat: no-repeat;
  filter: blur(14px);
  pointer-events: none;
}
.hero__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 78% at 50% 30%, rgba(18, 15, 12, 0) 40%, rgba(18, 15, 12, .82) 100%),
    linear-gradient(to bottom, rgba(18, 15, 12, .55), rgba(18, 15, 12, 0) 30%);
}
.hero > .wrap { position: relative; z-index: 2; }

/* WalkBurgas's line is longer per row than WalkNessebar's: two rows, not four */
.hero .h1 { max-width: 23ch; margin-inline: auto; }
.hero .lede {
  max-width: 54ch; margin-inline: auto;
  color: var(--text-light);
  font-size: clamp(16px, 1.35vw, 19px);
}

/* The two devices — day and night, side by side. Both source renders are 1160px
   tall, so driving them off a shared stage height keeps their scale honest and
   lets the composition track the viewport instead of overflowing it. */
.hero__stage {
  position: relative; z-index: 2;
  width: 100%; max-width: 900px;
  height: clamp(250px, 39vh, 470px);     /* 41vh left the badges just under the fold on a 1366x768 laptop */
  margin: clamp(22px, 3.4vh, 48px) auto 0;
  padding-inline: var(--pad);
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(0px, 1.2vw, 22px);
}
.hero__phone { height: 100%; }
.hero__phone > .float { height: 100%; }
.hero__phone img { height: 100%; width: auto; }
/* The shadow belongs to the FLOATING wrapper, not the picture inside it. iOS Safari paints a
   child's drop-shadow into its animated parent's own box and cuts it off there — on the phone
   that showed as a dark square with hard edges round each hero device (found 2026-10-21). */
.hero__phone > .float { filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .58)); }
.hero__phone--night { margin-left: -2.5%; }

.hero__actions {
  position: relative; z-index: 3;
  margin-top: clamp(18px, 2.8vh, 44px);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 16px; z-index: 2;
  transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-faint);
}
/* only shown when the composition leaves real room beneath the buttons */
@media (max-height: 1000px) { .scroll-cue { display: none; } }
.scroll-cue span {
  display: block; width: 1px; height: 30px; margin: 12px auto 0;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { opacity: 0; transform: scaleY(.3); transform-origin: top; }
  40%      { opacity: 1; transform: scaleY(1);  transform-origin: top; }
  70%      { opacity: 0; transform: scaleY(1);  transform-origin: bottom; }
}

/* ------------------------------------------------------------ store badges */

.badge {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 20px 0 17px;
  border-radius: 11px;
  background: #000; color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
.badge:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .45);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}
.badge svg { flex: none; }
.badge__txt { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.badge__txt b {
  font-size: 17px; font-weight: 500; letter-spacing: -.02em;
}
.badge__txt i {
  font-style: normal; font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; opacity: .82;
}
.sec--paper .badge, .sec--gray .badge { border-color: rgba(42, 33, 25, .16); }
.sec--paper .badge:hover, .sec--gray .badge:hover { border-color: rgba(0, 0, 0, .28); }

.badge-note {
  margin: 16px 0 0;
  font-size: 12px; letter-spacing: .02em;
  color: var(--text-faint);
}
.sec--paper .badge-note, .sec--gray .badge-note { color: var(--text-mid); }

/* --------------------------------------------------------------- trailer   */

.trailer { background: linear-gradient(to bottom, var(--ink), var(--ink-2) 42%); }
.trailer::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 70%;
  background: radial-gradient(closest-side, rgba(229, 194, 122, .12), transparent 72%);
  pointer-events: none;
}

.device {
  position: relative;
  width: min(330px, 74vw);
  margin: clamp(34px, 5vw, 56px) auto 0;
  aspect-ratio: 296 / 608;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .55));
}
.device__frame {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* screen hole measured from the frame artwork itself */
.device__screen {
  position: absolute;
  left: 4.7297%; top: 1.9737%;
  width: 90.5405%; height: 96.0526%;
  z-index: 1;
  overflow: hidden;
  border-radius: 12.4% / 6.1%;
  background: #000;
}
.device__screen video,
.device__screen img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* the same shell used to hold a still screenshot rather than the trailer */
.device--still { margin: 0; width: 100%; }

.device__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(to bottom, rgba(18, 15, 12, .1), rgba(18, 15, 12, .42));
  border-radius: 12.4% / 6.1%;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.device__play i {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.device__play:hover i { transform: scale(1.07); background: rgba(255, 255, 255, .24); }
.device__play svg { margin-left: 3px; }
.device.is-playing .device__play { opacity: 0; visibility: hidden; }

/* ---------------------------------------------------------------- devices  */

.phone { filter: drop-shadow(0 30px 55px rgba(42, 30, 16, .3)); }
.sec--dark .phone { filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .55)); }

.shot {
  border-radius: 0;                    /* corners are baked into the artwork */
  filter: drop-shadow(0 20px 40px rgba(42, 30, 16, .26));
}
.sec--dark .shot { filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .5)); }

/* A fanned trio: the framed device forward, two bare screens tucked behind.
   Overlap comes from negative margins, not transforms, so the section still
   reserves the right height. */
.fan {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(18px, 3vw, 34px);
}
/* Direct children only — as a descendant selector these also caught the <img>s
   inside a framed device sitting in the fan, rotating its screen and resizing
   its frame. */
.fan > img { width: clamp(124px, 18vw, 214px); }
.fan > img:nth-child(1) { transform: rotate(-6deg); margin-right: -5%; z-index: 1; }
.fan > img:nth-child(2) { width: clamp(178px, 25.5vw, 296px);          z-index: 3; }
.fan > img:nth-child(3) { transform: rotate(6deg);  margin-left: -5%;  z-index: 2; }

/* a horizontal rail of screenshots */
.rail {
  display: flex; gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(36px, 5vw, 60px);
  padding-inline: var(--pad);
  /* a row that scrolls also clips: 30px cut the shots' shadows (they reach ~66px) into a hard
     line, so the row reaches lower and gives the room back underneath */
  padding-bottom: 70px; margin-bottom: -40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* centred when the items fit, flush-left the moment they overflow */
  justify-content: safe center;
  /* soft edges so it reads as "this continues" on any background */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.rail::-webkit-scrollbar { display: none; }
.rail::before, .rail::after { content: ""; flex: none; width: max(0px, calc((100vw - var(--wrap)) / 2 - var(--pad))); }
.rail img {
  flex: none;
  width: clamp(168px, 21vw, 244px);
  scroll-snap-align: center;
}
.rail--tall img { width: clamp(190px, 24vw, 280px); }

/* A two-up, offset pair. The offset is a margin, not a transform, so the
   section still reserves room for it. A bare screenshot reads larger than a
   framed render at equal width, so the framed one is given more. */
.duo {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(10px, 2.4vw, 40px);
  margin-top: clamp(34px, 5vw, 58px);
  padding-bottom: clamp(16px, 2.4vw, 30px);
}
.duo .shot  { width: clamp(132px, 20vw, 246px); }
.duo .phone { width: clamp(164px, 24.5vw, 296px); }
.duo > :first-child { margin-bottom: clamp(14px, 2.4vw, 30px); }

/* a pair shown in device shells rather than as bare screens */
.duo__dev { flex: none; width: clamp(146px, 21vw, 268px); }
.duo--devices { gap: clamp(16px, 3vw, 52px); }

/* split: text one side, device the other */
.split {
  display: grid; gap: clamp(38px, 6vw, 90px);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.split--flip .split__media { order: -1; }
.split__media { display: flex; justify-content: center; }
.split__media img { width: min(100%, 330px); }
.split__text .lede { max-width: 38ch; }
/* a half-width column cannot carry full display size without wrapping raggedly */
.split__text .h2 { font-size: clamp(29px, 3.5vw, 47px); }

/* two equal feature columns (Two Ways to Explore) */
.pair {
  display: grid; gap: clamp(44px, 6vw, 78px);
  grid-template-columns: 1fr 1fr;
  /* the guided-tour column carries an extra cluster, so both columns hang from
     the top rather than stretching to match */
  align-items: start;
  margin-top: clamp(40px, 5vw, 70px);
}
.pair__col { text-align: center; }
.pair__col img { width: min(100%, 300px); margin-inline: auto; }
.pair__col .h3 { margin-top: clamp(26px, 3vw, 40px); }
.pair__col p {
  margin: 14px auto 0; max-width: 34ch;
  color: var(--text-mid); font-size: 16px;
}
.sec--dark .pair__col p { color: var(--text-light); }

/* ------------------------------------------------------------ full-bleed   */

.bleed {
  position: relative;
  min-height: min(86svh, 720px);
  padding-block: clamp(72px, 9vw, 130px);
  display: flex; align-items: center;
  color: #fff;
  overflow: hidden;
}
/* devices inside a band stay clear of its edges */
.bleed .split__media img { width: min(100%, 292px); }
.bleed__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.bleed__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(18, 15, 12, .88) 0%, rgba(18, 15, 12, .62) 46%, rgba(18, 15, 12, .34) 100%);
}
.bleed__scrim--even {
  background: linear-gradient(to bottom, rgba(18, 15, 12, .58), rgba(18, 15, 12, .78));
}
.bleed .wrap { position: relative; z-index: 2; }
.bleed .lede { color: rgba(255, 255, 255, .8); }

/* A band with no photograph: a colour wash lit by the same soft glow as the
   hero, so it still feels cinematic rather than flat. */
.bleed--plain { background: var(--band-bg); }
.bleed__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 68% at 24% 28%, var(--band-a), transparent 72%),
    radial-gradient(52% 62% at 80% 76%, var(--band-b), transparent 74%);
}
.bleed--plain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 84% at 50% 46%, transparent 42%, rgba(0, 0, 0, .5) 100%);
}

.bleed--sage {                           /* In the Vicinity — sea glass, lagoons and the forests beyond */
  --band-bg: #0b211d;
  --band-a: rgba(143, 191, 174, .26);
  --band-b: rgba(229, 194, 122, .14);
}
.bleed--night {                          /* Look around — moonlight and one gold compass */
  --band-bg: #0b1736;
  --band-a: rgba(229, 194, 122, .22);
  --band-b: rgba(127, 167, 207, .2);
}
.bleed--fest {                           /* Festivals & Culture — stage light on a summer night */
  --band-bg: #1b1230;
  --band-a: rgba(229, 169, 181, .26);
  --band-b: rgba(229, 194, 122, .2);
}
.bleed--dusk {                           /* Built around discovery — bookends the hero */
  --band-bg: var(--ink);
  --band-a: rgba(229, 169, 181, .24);
  --band-b: rgba(127, 167, 207, .2);
}

/* Guided-tour cluster: a tilted device on the left, two flat screens stepping
   down on the right. Sits inside the GPS column, so it is sized against half
   the wrap rather than the full page. */
.tour {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 1.5vw, 20px);
  margin: clamp(28px, 3.4vw, 44px) auto clamp(30px, 3.6vw, 46px);
  max-width: 100%;
}
.tour__frame {
  flex: none;
  width: clamp(104px, 11.5vw, 152px);
  transform: rotate(-5deg);
}
.tour__side {
  display: flex; align-items: flex-start;
  gap: clamp(10px, 1.3vw, 18px);
}
.tour__side figure { margin: 0; width: clamp(80px, 9vw, 120px); }
.tour__side figure:first-child { margin-top: clamp(12px, 2.2vw, 32px); }
.tour__side figcaption {
  margin-top: 10px;
  font-size: 11.5px; letter-spacing: .01em; line-height: 1.4;
  color: var(--text-dark);               /* sits in the shot's shadow: the mid tone fell below 4.5:1 there */
}

/* below 900 the pair is a single column, so the cluster gets the full width */
@media (max-width: 900px) {
  .tour { gap: clamp(14px, 3vw, 34px); margin-top: clamp(30px, 5vw, 46px); }
  .tour__frame { width: clamp(132px, 27vw, 224px); }
  .tour__side { gap: clamp(12px, 2.6vw, 30px); }
  .tour__side figure { width: clamp(104px, 21vw, 174px); }
  .tour__side figcaption { font-size: 12.5px; }
}
/* three across stops fitting on a narrow phone */
@media (max-width: 430px) {
  .tour { flex-direction: column; gap: 26px; }
  .tour__frame { width: 48vw; }
  .tour__side { justify-content: center; gap: 14px; }
  .tour__side figure { width: 40vw; margin-top: 0 !important; }
}

/* a wide, chrome-free photograph pulled from the app itself */
.wide {
  margin: clamp(30px, 4vw, 54px) auto 0;
  max-width: 1320px;
  padding-inline: var(--pad);
}
.wide img { width: 100%; border-radius: clamp(10px, 1.2vw, 18px); }
.wide figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 13.5px; letter-spacing: .01em;
  color: var(--text-faint);
}

/* the framed centrepiece of a fan, when it is a device shell rather than an <img> */
.fan__dev { position: relative; flex: none; width: clamp(178px, 25.5vw, 296px); z-index: 3; }

/* a second screen tucked in behind the hero device, peeking out on the left */
.split__media > .phone { position: relative; z-index: 1; }
.split__media .split__behind {
  order: -1; flex: none;
  position: relative; z-index: 0;
  width: min(48%, 196px);
  align-self: center;
  margin-right: -12%;
  transform: rotate(-8deg) translateY(-5%);
}
/* on a phone the two together are wider than the column, so both give ground */
@media (max-width: 620px) {
  .split__media .split__behind { width: 34%; margin-right: -13%; }
  .split__media > .phone { width: min(74%, 250px); }
}

/* a bare screen tucked in beside a framed render */
.split__media { position: relative; }
.gems__pin {
  width: min(38%, 150px) !important;
  align-self: flex-end;
  margin: 0 -6% clamp(20px, 3vw, 44px) 0;
  order: -1;
}
@media (max-width: 900px) {
  .gems__pin { margin-inline: -4% 0; }
}
@media (max-width: 560px) {
  .gems__pin { display: none; }
}

/* --------------------------------------------------------------- features  */

.features {
  display: grid; gap: 2px;
  margin-top: clamp(34px, 4vw, 50px);
  padding: 0;                 /* .features IS the <ul> — without this it keeps
                                 the browser's 40px list indent */
  max-width: 460px;
}
.features li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 0;
  list-style: none;
  border-bottom: 1px solid rgba(42, 33, 25, .12);
}
.sec--dark .features li { border-bottom-color: rgba(255, 255, 255, .1); }
.features li:last-child { border-bottom: 0; }
.features svg { flex: none; margin-top: 1px; color: var(--gold); }
.features b { font-weight: 600; font-size: 16px; display: block; }
.features span { font-size: 14.5px; color: var(--text-mid); }
.sec--dark .features span { color: var(--text-faint); }

/* -------------------------------------------------------------- travellers */

/* No card chrome — seven quiet marks in a row reads calmer than seven boxes. */
.who {
  display: flex; flex-wrap: wrap; justify-content: center;
  /* sized so all seven sit on one row at desktop widths */
  gap: clamp(26px, 3.4vw, 44px) clamp(14px, 2vw, 26px);
  margin-top: clamp(46px, 5.5vw, 74px);
}
.who__item {
  flex: 0 0 auto;
  width: clamp(92px, 8.6vw, 120px);
  text-align: center;
  transition: transform .45s var(--ease);
}
.who__item:hover { transform: translateY(-3px); }
.who__item svg {
  width: 30px; height: 30px;
  margin: 0 auto 12px;
  color: var(--gold-deep);
  opacity: .85;
}
.who__item b {
  display: block;
  font-size: 14px; font-weight: 500; letter-spacing: -.005em;
  color: var(--text-dark);
  line-height: 1.35;
}

/* ------------------------------------------------------------- stat strip  */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(26px, 4vw, 54px);
  margin-top: clamp(46px, 6vw, 74px);
  text-align: center;
}
.stats b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400; line-height: 1;
  color: var(--gold);
}
.stats span {
  display: block; margin-top: 10px;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------------------------- chapters  */

/* Each walk carries its own hue — the app's own three breezes — so the chapters
   read as three different parts of the city. All are dark enough for cream type and gold. */
.chapter { position: relative; padding-block: clamp(70px, 9vw, 130px); }
.chapter--blue   { background: #0b1f45; }   /* the Blue Breeze: deep sea blue      */
.chapter--golden { background: #211808; }   /* the Golden Breeze: honey in shadow  */
.chapter--rose   { background: #261220; }   /* the Rose Breeze: dusk over the lake */
.chapter--blue   .chapter__no { color: rgba(127, 167, 207, .8); }
.chapter--golden .chapter__no { color: rgba(236, 196, 118, .72); }
.chapter--rose   .chapter__no { color: rgba(229, 169, 181, .8); }
/* the walk's facts, set small under its story — stops, time, the way it is walked */
.chapter__meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 26px 0 0; padding: 0; list-style: none;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}
.chapter__meta li { display: flex; align-items: center; gap: 8px; }
.chapter__meta li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent, var(--gold));
}
.chapter--blue   { --accent: var(--sea); }
.chapter--golden { --accent: var(--gold); }
.chapter--rose   { --accent: var(--rose); }
.chapter__no {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: .2em;
  color: rgba(255, 255, 255, .34);
  margin-bottom: 14px;
}

/* ------------------------------------------------------------------ footer */

.foot {
  background: var(--ink);
  color: var(--text-faint);
  padding-block: clamp(50px, 6vw, 76px) 40px;
  font-size: 13px;
}
.foot__top {
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.foot__brand img { width: 77px; opacity: .95; }   /* 40% smaller than the first publish (Hristo, 2026-10-21) */
.foot__brand p { margin: 16px 0 0; max-width: 30ch; line-height: 1.6; }
.foot__cols { display: flex; flex-wrap: wrap; gap: clamp(34px, 6vw, 78px); }
.foot__col h5 {
  margin: 0 0 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.foot__col a { display: block; padding: 5px 0; transition: color .3s var(--ease); }
.foot__col a:hover { color: #fff; }
.foot__bottom {
  padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 12px;
}

.foot__col--contact { max-width: 220px; }
/* sits under the "Contact" heading (~67px wide), a touch larger so the
   wordmark stays legible */
.foot__cc { width: 96px; margin: 2px 0 14px; opacity: .95; }

/* ------------------------------------------------------- legal / privacy  */

.legal {
  padding-block: calc(var(--nav-h) + clamp(52px, 8vw, 96px)) clamp(70px, 9vw, 120px);
  background: var(--paper);
}
.legal .wrap { max-width: 760px; }

.legal__head { padding-bottom: clamp(30px, 4vw, 46px); border-bottom: 1px solid rgba(0, 0, 0, .1); }
.legal__head .h2 { margin-bottom: 10px; }
.legal__date {
  margin: 0 0 22px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mid);
}
.legal__head .lede { margin-top: 0; max-width: none; }

.legal__sec { padding-block: clamp(26px, 3.4vw, 40px); }
.legal__sec + .legal__sec { border-top: 1px solid rgba(0, 0, 0, .07); }
.legal__sec .h4 { margin-bottom: 14px; font-size: 19px; }
.legal__sec p {
  margin: 0 0 15px;
  color: #3b2f22;
  font-size: 16.5px; line-height: 1.62;
}
.legal__sec p:last-child { margin-bottom: 0; }
.legal__sec a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

/* the safety section is the one people must actually read */
.legal__sec--flag {
  margin-block: 10px;
  padding: clamp(24px, 3.4vw, 38px);
  border: 0; border-radius: 16px;
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
}
.legal__sec--flag + .legal__sec { border-top: 0; }

.legal__operator {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid rgba(0, 0, 0, .1);
  color: var(--text-mid); font-size: 15px; line-height: 1.7;
}
.legal__operator-logo { width: 168px; margin-bottom: 18px; }
.legal__operator p { margin: 0 0 12px; }
.legal__operator b { color: var(--text-dark); font-weight: 600; }
.legal__operator a { color: var(--gold-deep); }

/* ------------------------------------------------------------------ reveal */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  /* no will-change: it kept every revealed block a layer of its own for good, and iOS Safari
     cuts the shadows of the phones inside such a layer off at its edges */
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .09s; }
.reveal[data-d="2"] { transition-delay: .18s; }
.reveal[data-d="3"] { transition-delay: .27s; }
.reveal[data-d="4"] { transition-delay: .36s; }

.float { animation: float 7s ease-in-out infinite; }
.float--b { animation-duration: 8.5s; animation-delay: -2.5s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}
/* the hero devices carry their own offsets, so float them via a wrapper */
.hero__phone--day .float   { animation-duration: 8s; }
.hero__phone--night .float { animation-duration: 9.4s; animation-delay: -3s; }

/* ------------------------------------------------------------- responsive  */

@media (max-width: 900px) {
  .split, .pair { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__text { text-align: center; }
  .split__text .lede, .split__text .features { margin-inline: auto; }
  .split__text .rule { margin-inline: auto; }
  .split__text .chapter__meta { justify-content: center; }
  .bleed__scrim {
    background: linear-gradient(to bottom, rgba(18, 15, 12, .5), rgba(18, 15, 12, .85));
  }
}

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .hero__stage { gap: 0; max-width: 460px; }
  .hero__phone { width: 52%; }
  .hero__phone--night { width: 48%; margin-left: -8%; }
  /* direct children only, and sized so the trio fits the column without
     spilling past the section's edges */
  .fan > img   { width: 28vw; }
  .fan__dev    { width: 39vw; }
  .fan > img:nth-child(1) { transform: rotate(-7deg); margin-right: -8%; }
  .fan > img:nth-child(3) { transform: rotate(7deg);  margin-left: -8%; }
  .duo img:first-child { transform: translateY(16px); }
  .rail::before, .rail::after { width: 0; }
  .foot__top { flex-direction: column; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .badge { height: 48px; padding: 0 16px 0 14px; }
  .badge__txt b { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .float, .scroll-cue span { animation: none; }
  .bleed__bg { transform: none !important; }
}

/* ==========================================================================
   WalkBurgas additions — pieces the WalkNessebar promo did not need
   ========================================================================== */

/* ------------------------------------------------------- the phone tour  */
/* No film yet: the device in the film's place plays the app itself — six
   screens crossfading in turn, 4 s each, with a hairline counting them down. */
.reel .device__screen { background: var(--ink-2); }
.reel__slide {
  position: absolute; inset: 0;
  opacity: 0;
  animation: reel 24s infinite;
}
.reel__slide img { width: 100%; height: 100%; object-fit: cover; }
.reel__slide:nth-child(1) { animation-delay: 0s; }
.reel__slide:nth-child(2) { animation-delay: 4s; }
.reel__slide:nth-child(3) { animation-delay: 8s; }
.reel__slide:nth-child(4) { animation-delay: 12s; }
.reel__slide:nth-child(5) { animation-delay: 16s; }
.reel__slide:nth-child(6) { animation-delay: -4s; }   /* on screen at once, so the first frame is never empty */
@keyframes reel {
  0%      { opacity: 0; transform: scale(1.015); }
  3%      { opacity: 1; }
  16.67%  { opacity: 1; transform: scale(1); }
  20%     { opacity: 0; }
  100%    { opacity: 0; }
}
.reel__caps {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px;
  margin: 30px auto 0; padding: 0; list-style: none;
  max-width: 680px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}
.reel__caps li { position: relative; padding-bottom: 8px; }
.reel__caps li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform-origin: left; transform: scaleX(0);
  animation: reelcap 24s infinite linear;
}
.reel__caps li:nth-child(1)::after { animation-delay: 0s; }
.reel__caps li:nth-child(2)::after { animation-delay: 4s; }
.reel__caps li:nth-child(3)::after { animation-delay: 8s; }
.reel__caps li:nth-child(4)::after { animation-delay: 12s; }
.reel__caps li:nth-child(5)::after { animation-delay: 16s; }
.reel__caps li:nth-child(6)::after { animation-delay: 20s; }
@keyframes reelcap {
  0%      { transform: scaleX(0); opacity: 1; }
  16.6%   { transform: scaleX(1); opacity: 1; }
  16.7%   { transform: scaleX(1); opacity: 0; }
  100%    { transform: scaleX(0); opacity: 0; }
}

/* ------------------------------------------------- thirteen languages   */
/* every language in its own script, as the language sheet lists them */
.roll {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .15em 1.05em;
  margin: clamp(30px, 4vw, 46px) auto 0; padding: 0; list-style: none;
  max-width: 860px;
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.6;
  color: rgba(247, 239, 228, .7);
}
.roll li { white-space: nowrap; }
.roll__note {
  margin: 18px 0 0;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------------------------- festivals: four seasons */
.seasons {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none;
}
.season {
  padding-top: 18px;
  border-top: 1px solid rgba(247, 239, 228, .16);
}
.season b {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--season);
}
.season b::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--season);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--season) 22%, transparent);
}
.season p {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.45;
  color: rgba(247, 239, 228, .78);
}
/* the app's own season colours (Festivals & Culture, its night set — this band is dark) */
.season--spring { --season: #9fd4bf; }
.season--summer { --season: #ecc476; }
.season--autumn { --season: #eda48a; }
.season--winter { --season: #a9c9ec; }
.fest__note {
  margin: 26px 0 0;
  font-size: 13px; color: var(--text-faint);
}
@media (max-width: 900px) {
  .seasons { grid-template-columns: 1fr 1fr; text-align: left; }
}
@media (max-width: 480px) {
  .seasons { grid-template-columns: 1fr; }
}

/* a festival band carries a phone beside its text, then the seasons beneath */
.bleed--fest { display: block; }
.bleed--fest .split { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .reel__slide { animation: none; }
  .reel__slide:nth-child(1) { opacity: 1; }
  .reel__caps li::after { animation: none; }
}

/* the three walks sit on the night sheets' blue, each chapter in its own breeze */
.chapters { background: var(--ink-2); }

/* thirteen languages, on cream: the names in the app's plum, the dots in honey */
.sec--paper .roll { color: var(--text-mid); }
.sec--paper .roll li:nth-child(-n+4) { color: var(--navy); }   /* the four that come with the app */
.sec--paper .roll__note { color: var(--text-mid); }

/* each half of a two-line heading is its own block, so a phone balances the half that wraps
   ("in the language / you think in.") instead of leaving a lone last word */
.h2__l { display: block; text-wrap: balance; }

/* a short laptop window (1280x720, or 1366 with the browser's bars): the hero breathes a little
   less so the store badges stay on the first screen */
@media (min-width: 761px) and (max-height: 740px) {
  .hero { padding-top: calc(var(--nav-h) + 12px); }
  .hero .lede { margin-top: 16px; }
  .hero__stage { margin-top: 16px; }
}
.legal .eyebrow { color: var(--gold-deep); }   /* the privacy page is cream: the deep gold, as on every light section */

/* ------------------------------------------- Saint Anastasia Island in 3D  */
/* Deep water off the island, lit by its lighthouse's gold. */
.bleed--isle {
  --band-bg: #061d27;
  --band-a: rgba(96, 178, 190, .24);
  --band-b: rgba(229, 194, 122, .16);
  display: block;
}
.bleed--isle .split { margin-bottom: clamp(48px, 7vw, 96px); }

/* one view of the island at four hours: the pictures cross-fade, the chips choose */
.hours { margin: 0; }
.hours__stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: clamp(12px, 1.5vw, 22px); background: #0a1a26;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.hours__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.3s var(--ease);
}
.hours__img.is-on { opacity: 1; }
.hours__bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hours__chip {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 17px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .8); font: 600 13px/1 var(--sans); letter-spacing: .02em;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.hours__chip b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gold); }
.hours__chip:hover { background: rgba(255, 255, 255, .1); }
.hours__chip[aria-pressed="true"] { background: rgba(229, 194, 122, .18); border-color: rgba(229, 194, 122, .62); color: #fff; }
.hours__chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hours figcaption {
  max-width: 62ch; margin: 16px auto 0; text-align: center;
  font-size: 13.5px; line-height: 1.5; letter-spacing: .01em; color: var(--text-faint);
}
/* four across on a phone: the hour over its name */
@media (max-width: 620px) {
  .hours__bar { gap: 6px; flex-wrap: nowrap; }
  .hours__chip { flex-direction: column; align-items: center; gap: 4px; padding: 9px 12px; font-size: 12px; }
}
/* the narrowest phones (iPhone SE): still four across */
@media (max-width: 360px) {
  .hours__bar { gap: 4px; }
  .hours__chip { padding: 8px 9px; font-size: 11.5px; letter-spacing: 0; }
}

/* the three ways in, a phone each */
.trip {
  list-style: none; margin: clamp(44px, 6vw, 72px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 4vw, 64px);
  text-align: center;
}
.trip img { display: block; width: min(100%, 250px); margin: 0 auto 28px; }
.trip__title { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.1vw, 27px); line-height: 1.15; color: var(--on-dark); }
.trip p { max-width: 31ch; margin: 0 auto; font-size: 15.5px; line-height: 1.55; color: var(--text-light); }
@media (max-width: 760px) {
  .trip { grid-template-columns: 1fr; gap: 58px; }
  .trip img { width: min(62vw, 250px); }
}

/* and what else it does, in four short lines */
.isle-feats {
  list-style: none; margin: clamp(60px, 8vw, 104px) 0 0; padding: 34px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px, 3vw, 40px);
}
.isle-feats b { display: block; margin-bottom: 8px; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--on-dark); }
.isle-feats span { display: block; font-size: 14.5px; line-height: 1.55; color: var(--text-light); }
@media (max-width: 900px) { .isle-feats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .isle-feats { grid-template-columns: 1fr; gap: 24px; } }
@media (prefers-reduced-motion: reduce) { .hours__img { transition: none; } }

/* ==========================================================================
   Tsarevets additions
   ========================================================================== */

/* the stone: every dark section carries the app's granite grain over its colour */
.sec--dark, .hero, .foot, .chapter, .bleed--plain {
  background-image: var(--granite), var(--granite-dark);
  background-blend-mode: normal;
}
.sec--dark { background-color: var(--ink); }
.hero { background-color: var(--ink); }
.foot { background-color: #0d0b09; }
.sec--paper { background: var(--paper); }
.sec--gray  { background: var(--paper-2); }

/* a battlement along the top of a stone section that follows a parchment one — the edge of the app's slabs */
.crenel { position: relative; }
.crenel::before {
  content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; z-index: 3; pointer-events: none;
  background: inherit;
  -webkit-mask: var(--merlons-up) 0 0 / 34px 14px repeat-x; mask: var(--merlons-up) 0 0 / 34px 14px repeat-x;
}
.crenel::after {        /* the brass rim under the battlement */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(229, 194, 122, .45) 18%, rgba(229, 194, 122, .45) 82%, transparent);
}
.sec.crenel, .bleed.crenel, .chapters.crenel { overflow: visible; }
.sec.crenel > .wrap, .bleed.crenel > .wrap { position: relative; }
/* the sections that keep their overflow clipped still need the battlement drawn: they clip below it */
.sec.crenel { overflow-x: clip; overflow-y: visible; }

/* the brand: his gold gate-tower and the name */
.brand__mark { width: 28px; height: 28px; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 1px rgba(229, 194, 122, .35); }
.brand__mark img { position: static; }
.brand__word { font-size: 21px; font-weight: 500; letter-spacing: .01em; color: var(--on-dark); }
.brand__word i { font-style: normal; color: var(--gold); margin-left: 3px; }
.nav.is-solid .brand__word { color: var(--text-dark); }
.nav.is-solid .brand__word i { color: var(--gold-deep); }
.nav__links a { font-size: 13.5px; letter-spacing: .02em; }
.nav__cta { color: #1a130a !important; background: linear-gradient(180deg, #ecd08f 0%, #c9a35a 55%, #a9823f 100%); }

/* type: Cormorant is lighter and smaller on the line than Cochin — a touch larger, a touch heavier */
.h1 { font-weight: 500; font-size: clamp(38px, min(6.2vw, 9.2vh), 84px); line-height: 1.0; }
.h2 { font-weight: 500; font-size: clamp(36px, 5vw, 68px); line-height: 1.04; }
.h3 { font-weight: 500; font-size: clamp(28px, 3.1vw, 42px); }
.split__text .h2 { font-size: clamp(33px, 3.9vw, 52px); }
.eyebrow { font-weight: 500; letter-spacing: .24em; }
.lede { font-weight: 400; }
.menu a { font-weight: 500; }
.gold { color: var(--gold); }

/* ---------------------------------------------------------------- hero ---- */
.hero__stage--duo { max-width: 1080px; height: clamp(270px, 46vh, 560px); align-items: flex-end; gap: 0; }
.hero__tab { height: 92%; position: relative; z-index: 1; }
.hero__tab > .float { height: 100%; animation-duration: 9s; filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .62)); }
.hero__tab img { height: 100%; width: auto; }
.hero__stage--duo .hero__phone { position: relative; z-index: 2; height: 100%; margin-left: -9%; margin-bottom: -2%; }
.hero__stage--duo .hero__phone .float { animation-duration: 7.4s; animation-delay: -2s; }

/* the way in: the app's own crenellated disc, breathing, a gold ring going out from it now and then */
.disc {
  position: relative; display: inline-grid; place-items: center;
  width: 112px; height: 112px; flex: none;
  color: #e5c27a; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.disc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 20px rgba(8, 5, 3, .65)); animation: discBreath 2.8s ease-in-out infinite; }
.disc__stone { fill: url(#discStone); stroke: #e5c27a; stroke-width: 1.1; stroke-linejoin: round; }
.disc__ring { fill: none; stroke: rgba(236, 202, 140, .42); stroke-width: .8; stroke-dasharray: 1.2 2.2; }
.disc__label {
  position: relative; max-width: 80px; text-align: center;
  font: 600 13px/1.15 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: #f1d58f; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  animation: discBreath 2.8s ease-in-out infinite;
}
.disc::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; pointer-events: none; animation: discHalo 2.8s 1s ease-out infinite; }
.disc:hover svg, .disc:focus-visible svg { transform: rotate(10deg); }
.disc:focus-visible { outline: none; }
.disc:focus-visible::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--gold); }
@keyframes discBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes discHalo { 0% { box-shadow: 0 0 0 0 rgba(229, 194, 122, .6); } 70%, 100% { box-shadow: 0 0 0 30px rgba(229, 194, 122, 0); } }

.hero__actions { align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.hero__actions .badge { opacity: .92; }
.badge-note b { color: var(--gold); font-weight: 600; }
.badge[aria-disabled="true"] { cursor: default; }
.badge[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
.sec--paper .badge-note b { color: var(--gold-deep); }

/* ----------------------------------------------------------- the reel ---- */
.reel__slide:nth-child(n+7) { display: none; }

/* --------------------------------------------- wide picture, rounded ---- */
.wide img { box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sec--paper .wide figcaption, .sec--gray .wide figcaption { color: var(--text-mid); }

/* ------------------------------------------------ then and now: 1390 ---- */
.bleed--ember { --band-bg: #1f0d09; --band-a: rgba(184, 64, 47, .32); --band-b: rgba(229, 194, 122, .16); display: block; }
.bleed--night { --band-bg: #0c0b14; --band-a: rgba(110, 90, 200, .2); --band-b: rgba(229, 194, 122, .16); display: block; }
.bleed--sky   { --band-bg: #0f1418; --band-a: rgba(111, 165, 154, .2); --band-b: rgba(229, 194, 122, .14); display: block; }
.bleed--dusk  { --band-bg: var(--ink); --band-a: rgba(184, 64, 47, .22); --band-b: rgba(229, 194, 122, .16); }
.bleed .split + .compare, .bleed .split + .hours { margin-top: clamp(48px, 7vw, 96px); }

.compare { margin: 0; }
.compare__stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; touch-action: pan-y;
  border-radius: clamp(12px, 1.5vw, 22px); background: #140c08; user-select: none; -webkit-user-select: none;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
  --at: 50%;
}
.compare__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare__then { clip-path: inset(0 0 0 var(--at)); }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--at); width: 2px; margin-left: -1px; background: linear-gradient(#f1d58f, #c9a35a); box-shadow: 0 0 12px rgba(0, 0, 0, .5); pointer-events: none; }
.compare__knob {
  position: absolute; top: 50%; left: var(--at); width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: var(--granite), radial-gradient(circle at 35% 30%, #6a4f37, #2a1d13); border: 1.5px solid #e5c27a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55); color: #f1d58f;
}
.compare__knob svg { width: 26px; height: 26px; }
.compare__tag {
  position: absolute; top: 16px; padding: 7px 13px; border-radius: 999px; pointer-events: none;
  font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  background: rgba(18, 15, 12, .66); color: var(--on-dark); border: 1px solid rgba(229, 194, 122, .4);
}
.compare__tag--now { left: 16px; }
.compare__tag--then { right: 16px; color: #f1d58f; }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.compare__range:focus-visible + .compare__knob { outline: 2px solid var(--gold); outline-offset: 4px; }
.compare__bar { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.compare figcaption { max-width: 64ch; margin: 16px auto 0; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--text-faint); }
@media (max-width: 620px) { .compare__tag { top: 10px; font-size: 10px; padding: 6px 10px; } .compare__knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; } }

/* --------------------------------------------------- the four seasons ---- */
.four {
  list-style: none; margin: clamp(30px, 4vw, 48px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.6vw, 22px);
}
.four img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: clamp(8px, 1vw, 14px); box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
.four b { display: flex; align-items: center; gap: 9px; margin-top: 14px; font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--season); }
.four b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--season); box-shadow: 0 0 0 4px color-mix(in srgb, var(--season) 22%, transparent); }
.four span { display: block; margin-top: 8px; font-family: var(--serif); font-size: clamp(16px, 1.45vw, 19px); line-height: 1.4; color: var(--text-light); }
.four .s-spring { --season: #9fd4a4; } .four .s-summer { --season: #ecc476; } .four .s-autumn { --season: #eda48a; } .four .s-winter { --season: #b9d2ec; }
@media (max-width: 760px) { .four { grid-template-columns: 1fr 1fr; gap: 22px 14px; } }

/* --------------------------------------------- the places, all of them ---- */
.places {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px);
  margin-top: clamp(44px, 5.5vw, 72px); text-align: left;
}
.places h3 { margin: 0 0 6px; font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.places p.places__sub { margin: 0 0 18px; font-size: 14.5px; color: var(--text-mid); }
.places ol { margin: 0; padding: 0; list-style: none; counter-reset: pl; }
.places li {
  counter-increment: pl; display: grid; grid-template-columns: 2.1em 1fr; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid rgba(42, 33, 25, .12);
  font-family: var(--serif); font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; line-height: 1.25; color: var(--text-dark);
}
.places li::before { content: counter(pl, decimal-leading-zero); font: 500 12px/1 var(--sans); letter-spacing: .08em; color: var(--gold-deep); }
@media (max-width: 760px) { .places { grid-template-columns: 1fr; } }

/* ------------------------------------------------ on every screen ---- */
.screens { position: relative; display: flex; align-items: flex-end; justify-content: center; margin-top: clamp(40px, 5vw, 70px); padding-inline: var(--pad); }
.screens__laptop { width: min(100%, 860px); filter: drop-shadow(0 30px 50px rgba(42, 30, 16, .3)); }
.screens__tab { position: absolute; width: min(36%, 330px); left: max(0px, calc(50% - 560px)); bottom: -3%; filter: drop-shadow(0 24px 40px rgba(42, 30, 16, .34)); }
.screens__phone { position: absolute; width: min(15%, 140px); right: max(4px, calc(50% - 520px)); bottom: -4%; filter: drop-shadow(0 24px 40px rgba(42, 30, 16, .34)); }
@media (max-width: 760px) { .screens__tab { width: 40%; left: 0; bottom: -8%; } .screens__phone { width: 21%; right: 2%; bottom: -8%; } .screens { margin-bottom: 40px; } }

/* ----------------------------------------------------- small features ---- */
.isle-feats { border-top-color: rgba(229, 194, 122, .2); }
.sec--paper .isle-feats { border-top-color: rgba(42, 33, 25, .14); }
.sec--paper .isle-feats b { color: var(--text-dark); }
.sec--paper .isle-feats span { color: var(--text-mid); }
.trip__title { font-weight: 500; font-size: clamp(25px, 2.3vw, 30px); }
.sec--gray .trip__title, .sec--paper .trip__title { color: var(--text-dark); }
.sec--gray .trip p, .sec--paper .trip p { color: var(--text-mid); }
.trip img.trip__wide { width: min(100%, 360px); }

/* chapters: the Royal Walk in the tsars' red, Below the Walls in the river's green */
.chapter--royal { background-color: #1e0f0b; --accent: #e08a6f; }
.chapter--river { background-color: #0d1714; --accent: var(--river); }
.chapter--royal .chapter__no { color: rgba(224, 138, 111, .85); }
.chapter--river .chapter__no { color: rgba(132, 190, 176, .85); }
.chapters { background: var(--ink-2); }

/* the stats, on parchment */
.sec--paper .stats b, .sec--gray .stats b { color: var(--gold-deep); }
.sec--paper .stats span, .sec--gray .stats span { color: var(--text-mid); }
.sec--dark .roll { color: rgba(243, 231, 204, .74); }

.foot__brand .brand { margin-bottom: 4px; }
.foot__brand .brand__mark { width: 40px; height: 40px; border-radius: 10px; }
.foot__brand .brand__word { font-size: 26px; }

@media (prefers-reduced-motion: reduce) { .disc svg, .disc__label, .disc::after { animation: none; } }

.badge-note.is-ping { animation: ping 1.2s var(--ease); }
@keyframes ping { 0%, 100% { color: inherit; } 30% { color: var(--gold); transform: scale(1.04); } }

/* the hero fits a laptop's first screen (1440 × 900, 1366 × 768): the name, the devices and the way in */
.hero .h1 { font-size: clamp(38px, min(5.8vw, 7.6vh), 84px); }
.hero .lede { max-width: 62ch; }
.hero__stage--duo { height: clamp(240px, 37vh, 540px); margin-top: clamp(18px, 3vh, 40px); }
.hero__actions { margin-top: clamp(14px, 2.4vh, 34px); }
.hero .badge-note { margin-top: 10px; }
/* a phone: the disc on its own above the two badges */
@media (max-width: 600px) {
  .hero__actions .disc { order: -1; margin: 0 calc(50% - 56px) 2px; }
  .hero__actions .badge { height: 46px; padding: 0 14px 0 12px; }
}
/* the closing band is a pause, not a screen */
.bleed--dusk { min-height: min(62svh, 560px); }
/* shorter screens: a laptop at 1366 × 768 or 1280 × 720, an iPad on its side — the way in stays on the first screen */
@media (min-width: 601px) and (max-height: 840px) {
  .hero .h1 { font-size: clamp(36px, min(5.8vw, 7vh), 84px); }
  .hero .lede { margin-top: 14px; font-size: 16.5px; }
  .hero__stage--duo { height: 33vh; margin-top: 18px; }
  .hero .disc { width: 96px; height: 96px; }
  .hero .disc__label { font-size: 11.5px; max-width: 70px; }
  .hero__actions { margin-top: 12px; }
}
@media (min-width: 601px) and (max-height: 740px) { .hero__stage--duo { height: 31vh; } .hero .eyebrow { margin-bottom: 12px; } }
/* phones: the devices a little smaller, so the disc shows without scrolling */
@media (max-width: 600px) {
  .hero__stage--duo { height: 29vh; margin-top: 18px; }
  .hero .lede { font-size: 15.5px; margin-top: 14px; }
  .hero__actions { margin-top: 14px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .hero .h1 { font-size: 31px; }
  .hero .eyebrow { margin-bottom: 10px; }
  .hero__stage--duo { height: 25vh; }
  .hero .disc { width: 92px; height: 92px; }
  .hero__actions .disc { margin: 0 calc(50% - 46px) 0; }
  .hero .disc__label { font-size: 11px; max-width: 66px; }
}