:root{--bg:#11100f;--paper:#e9e3da;--ink:#171513;--muted:#aaa39a;--line:rgba(233,227,218,.22);--card:#eee9e1;--card2:#eee9e1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--paper);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}img{display:block;width:100%}
.hero{position:relative;min-height:92svh;overflow:hidden;background:#0c0b0a}.hero__image{position:absolute;inset:0;height:100%;object-fit:cover;object-position:53% 42%;animation:slowZoom 16s ease-out both}.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.08) 45%,rgba(0,0,0,.68))}.topbar{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:24px 32px;font-size:12px;letter-spacing:.18em}.lang{border:0;background:none;color:inherit;font:inherit;letter-spacing:.14em;cursor:pointer}.hero__copy{position:absolute;z-index:2;left:clamp(24px,6vw,90px);bottom:clamp(36px,8vh,96px);max-width:760px}.eyebrow{margin:0 0 18px;text-transform:uppercase;letter-spacing:.18em;font-size:11px}.hero h1{margin:0;max-width:720px;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(42px,7vw,96px);line-height:.96;letter-spacing:-.035em}.hero__link{display:inline-block;margin-top:34px;padding-bottom:7px;border-bottom:1px solid currentColor;font-size:13px;letter-spacing:.08em}
.intro{max-width:1280px;margin:auto;padding:110px 32px 96px;display:grid;grid-template-columns:82px minmax(0,1fr);gap:42px;border-bottom:1px solid var(--line)}.intro__index{margin:4px 0 0;color:var(--muted);font-size:12px}.intro__lead{max-width:910px;margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(28px,4vw,52px);line-height:1.16}.story-gateway{width:100%;max-width:1040px;margin-top:52px}.destinations{display:grid}.destinations--paired{grid-template-columns:1fr 1fr;gap:1px;background:rgba(17,16,15,.55);border:1px solid var(--line);border-bottom:0}.destination{position:relative;min-height:500px;padding:26px 28px 24px;background:var(--card);color:var(--ink);display:flex;flex-direction:column;overflow:hidden;transition:background .35s ease,transform .35s ease}.destination--boosty{background:#eee9e1}.destination:hover{background:#e5dfd6}.destination__number{position:absolute;right:24px;top:22px;font-size:10px;letter-spacing:.14em;opacity:.48}.destination__meta{font-size:10px;letter-spacing:.17em;text-transform:uppercase;opacity:.56}.destination__visual{position:relative;display:block;width:100%;height:190px;margin:28px auto 4px}.destination__visual--notebook{max-width:180px}.notebook-sheet{position:absolute;inset:0;border:1px solid rgba(23,21,19,.2);box-shadow:0 18px 38px rgba(0,0,0,.18)}.notebook-sheet--back{transform:translate(10px,8px) rotate(5deg);background:#aaa39a}.notebook-sheet--front{padding:10px 10px 18px;background:#eee8de;transform:rotate(1deg);overflow:hidden}.notebook-sheet--front:before{content:"";position:absolute;left:24px;top:0;bottom:0;width:1px;background:rgba(126,76,76,.28)}.notebook-sheet img{height:112px;object-fit:cover;filter:saturate(.78) contrast(.96)}.notebook-sheet i{display:block;height:1px;background:rgba(23,21,19,.18);margin:12px 4px 0 20px}.destination__visual--polaroid{max-width:206px}.polaroid{position:absolute;width:138px;height:176px;padding:8px 8px 27px;background:#eee8de;box-shadow:0 18px 40px rgba(0,0,0,.22);transition:transform .45s ease}.polaroid img{height:100%;object-fit:cover;filter:saturate(.72) contrast(.95)}.polaroid--back{left:8px;top:12px;transform:rotate(-8deg);filter:brightness(.78)}.polaroid--front{right:8px;top:0;transform:rotate(5deg)}.polaroid--front i{position:absolute;left:8px;right:8px;bottom:7px;text-align:center;font-family:Georgia,'Times New Roman',serif;font-size:10px;font-weight:400;letter-spacing:.04em}.destination:hover .polaroid--front{transform:translate(5px,-5px) rotate(8deg)}.destination:hover .polaroid--back{transform:translate(-5px,3px) rotate(-11deg)}.destination__title{display:flex;align-items:flex-end;justify-content:center;min-height:92px;margin:8px 0 0;padding:0 6px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(32px,3vw,46px);line-height:1.02;text-align:center;text-wrap:balance}.destination__text{max-width:430px;min-height:68px;margin:18px auto 0;font-size:13px;line-height:1.55;text-align:center;opacity:.68}.destination__action{margin-top:auto;padding-top:26px;border-top:1px solid rgba(23,21,19,.2);display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.08em}.destination__action b{font-size:21px;font-weight:400;transition:transform .3s ease}.destination:hover .destination__action b{transform:translateX(6px)}
.gateway-photo{margin:0;border:1px solid var(--line);overflow:hidden}.gateway-photo img{height:min(70vw,760px);object-fit:cover;object-position:center 40%;transition:transform 1.2s ease}.gateway-photo.visible img{transform:scale(1.015)}figcaption{display:flex;justify-content:space-between;padding:12px 2px 0;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em}.gateway-photo figcaption{padding:12px 14px 14px;background:var(--bg)}
.story{max-width:1280px;margin:auto;padding:96px 32px}.story figure{margin:0}.story img{object-fit:cover;background:#1a1917}.story__pair{display:grid;grid-template-columns:1fr 1fr;gap:28px}.story__pair img{height:620px}.story__pair figure:first-child img{object-position:center 45%}.closing{min-height:78svh;display:grid;grid-template-columns:1.1fr .9fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.closing>img{height:100%;min-height:78svh;object-fit:cover}.closing__content{padding:clamp(48px,8vw,120px);display:flex;flex-direction:column;justify-content:center}.closing h2{margin:0 0 24px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,6vw,82px);font-weight:400;line-height:1}.closing__content>p:not(.eyebrow){max-width:460px;color:var(--muted);font-size:15px;line-height:1.6}.closing__links{display:flex;gap:24px;margin-top:36px;font-size:12px;text-transform:uppercase;letter-spacing:.14em}.closing__links a{border-bottom:1px solid var(--line);padding-bottom:6px}footer{display:flex;justify-content:space-between;padding:24px 32px;color:var(--muted);font-size:10px;letter-spacing:.12em}.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}@keyframes slowZoom{from{transform:scale(1)}to{transform:scale(1.025)}}
@media(max-width:900px){.intro{grid-template-columns:1fr}.intro__index{display:none}.destination{min-height:510px}.destination__title{font-size:38px}.story__pair img{height:560px}}
@media(max-width:760px){.topbar{padding:18px 20px}.hero__copy{left:20px;right:20px;bottom:34px}.hero h1{font-size:46px}.intro{padding:72px 20px}.story-gateway{margin-top:36px}.destinations--paired{grid-template-columns:1fr}.destination{min-height:470px;padding:24px 20px 20px}.destination__visual{margin-top:24px}.destination__title{min-height:auto;margin-top:8px;font-size:38px}.destination__text{min-height:auto}.gateway-photo img{height:72svh}.story{padding:72px 20px}.story__pair{grid-template-columns:1fr;gap:56px}.story__pair img{height:68svh}.closing{grid-template-columns:1fr}.closing>img{min-height:auto;height:68svh}.closing__content{padding:64px 20px}.closing__links{flex-wrap:wrap}footer{padding:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero__image{animation:none}.reveal{opacity:1;transform:none}.destination,.destination__action b,.polaroid,.gateway-photo img{transition:none}}


/* Site 10: unified editorial width and restored motion */
.intro__content{width:100%;max-width:1040px}
.story-gateway{max-width:1040px}
.destinations--paired{background:rgba(233,227,218,.2)}
.destination,
.destination--boosty{background:#eee9e1;color:var(--ink)}
.destination:hover,
.destination--boosty:hover{background:#f5f1ea}

.destination__visual--notebook{transition:transform .55s cubic-bezier(.2,.75,.2,1)}
.notebook-sheet{transition:transform .55s cubic-bezier(.2,.75,.2,1),box-shadow .55s ease}
.destination--telegram:hover .destination__visual--notebook{transform:translateY(-7px) rotate(-1deg)}
.destination--telegram:hover .notebook-sheet--front{transform:translate(-5px,-4px) rotate(-2deg);box-shadow:0 24px 48px rgba(0,0,0,.23)}
.destination--telegram:hover .notebook-sheet--back{transform:translate(15px,11px) rotate(8deg)}
.destination--telegram .destination__visual--notebook{animation:notebookFloat 5.5s ease-in-out infinite}
@keyframes notebookFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4px) rotate(-.6deg)}}

.gateway-photo img{height:min(62vw,690px);object-position:center 44%;transform:none}
.gateway-photo.visible img{transform:scale(1.008)}

.story{width:100%;max-width:1040px;margin:auto;padding:96px 0}
.story__pair{display:grid;grid-template-columns:1fr;gap:78px;width:100%}
.story__pair figure{width:100%}
.story__pair img{width:100%;height:min(62vw,690px);object-fit:cover}
.story__pair figure:first-child img{object-position:center 48%}
.story__pair figure:last-child img{object-position:center 43%}

@media(min-width:1400px){
  .hero__image{left:50%;right:auto;width:min(94vw,1460px);transform:translateX(-50%);object-position:53% 43%}
  @keyframes slowZoom{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.018)}}
}
@media(max-width:1100px){
  .story{padding-left:32px;padding-right:32px}
}
@media(max-width:760px){
  .hero{min-height:88svh}
  .hero__image{object-position:54% 42%}
  .gateway-photo img{height:68svh}
  .story{padding:72px 20px}
  .story__pair{gap:56px}
  .story__pair img{height:68svh}
}
@media(prefers-reduced-motion:reduce){.destination--telegram .destination__visual--notebook{animation:none}}

/* Site 11: landscape desktop hero and one visual width */
@media (min-width:761px){
  .hero{min-height:100svh}
  .hero picture{position:absolute;inset:0;display:block}
  .hero__image{width:100%;height:100%;object-fit:cover;object-position:center 44%;animation:heroLandscapeZoom 16s ease-out both}
  @keyframes heroLandscapeZoom{from{transform:scale(1.015)}to{transform:scale(1.075)}}
}

/* The content line from cards through the three photographs uses one width. */
.intro{max-width:1380px}
.intro__content{max-width:1160px}
.story-gateway{max-width:1160px}
.story{max-width:1160px;padding-left:0;padding-right:0}

/* Both notebook photographs are now visible and move apart. */
.notebook-sheet--back{overflow:hidden;background:#aaa39a;padding:7px}
.notebook-sheet--back img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:saturate(.68) brightness(.72)}
.destination--telegram:hover .notebook-sheet--front{transform:translate(-13px,-6px) rotate(-4deg)}
.destination--telegram:hover .notebook-sheet--back{transform:translate(18px,10px) rotate(9deg)}

/* The gateway and following photographs share the same landscape geometry. */
.gateway-photo img,
.story__pair img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.gateway-photo img{object-position:center 48%}
.story__pair figure:first-child img{object-position:center 48%}
.story__pair figure:last-child img{object-position:center 43%}

@media(max-width:1224px){
  .intro{padding-left:32px;padding-right:32px}
  .story{padding-left:32px;padding-right:32px}
}
@media(max-width:760px){
  .hero picture{position:absolute;inset:0}
  .hero__image{width:100%;height:100%;object-fit:cover;animation:slowZoom 16s ease-out both}
  .intro,.story{padding-left:20px;padding-right:20px}
  .gateway-photo img,.story__pair img{aspect-ratio:auto;height:68svh}
}

/* Site 12: centered hero, graphite cards and one exact editorial width */
:root{
  --gateway-width:1160px;
  --card-dark:#242321;
  --card-dark-hover:#2d2b28;
  --card-ink:#eee9e1;
  --card-muted:#aaa39a;
}

/* Keep the desktop hero centered; scroll sets --hero-scroll from 0 to 1. */
@media (min-width:761px){
  .hero__image{
    left:50%;
    right:auto;
    width:100%;
    max-width:none;
    object-position:50% 44%;
    transform:translateX(-50%) scale(calc(1.015 + var(--hero-scroll,0) * .055));
    animation:none;
    will-change:transform;
    transition:transform .08s linear;
  }
}

/* One width from the paired destinations through every editorial photograph. */
.intro__content,
.story-gateway,
.story{
  width:100%;
  max-width:var(--gateway-width);
}
.destinations--paired,
.gateway-photo,
.story__pair,
.story__pair figure{
  width:100%;
}

/* Dark graphite destination cards, intentionally close to the page background. */
.destinations--paired{
  gap:1px;
  background:rgba(233,227,218,.18);
}
.destination,
.destination--boosty{
  background:var(--card-dark);
  color:var(--card-ink);
}
.destination:hover,
.destination--boosty:hover{
  background:var(--card-dark-hover);
}
.destination__meta,
.destination__number,
.destination__text{
  color:var(--card-muted);
  opacity:1;
}
.destination__action{
  border-top-color:rgba(233,227,218,.18);
}

/* Telegram is now a true two-photo polaroid stack; both images fill square frames. */
.destination__visual--notebook{
  width:214px;
  max-width:214px;
  height:196px;
  margin-top:24px;
}
.notebook-sheet{
  inset:auto;
  width:158px;
  height:184px;
  padding:8px 8px 18px;
  background:#e9e3da;
  border:0;
  box-shadow:0 18px 44px rgba(0,0,0,.38);
  transition:transform .55s cubic-bezier(.2,.75,.2,1),box-shadow .55s ease;
}
.notebook-sheet img{
  width:100%;
  height:142px;
  aspect-ratio:1/1;
  object-fit:cover;
  filter:saturate(.82) contrast(.98);
}
.notebook-sheet--front:before,
.notebook-sheet i{
  display:none;
}
.notebook-sheet--back{
  left:7px;
  top:11px;
  transform:rotate(-8deg);
  padding:8px 8px 18px;
  background:#ddd7ce;
}
.notebook-sheet--back img{
  width:100%;
  height:142px;
  object-fit:cover;
  object-position:center 42%;
  filter:saturate(.7) brightness(.8);
}
.notebook-sheet--front{
  right:7px;
  top:0;
  transform:rotate(5deg);
  padding:8px 8px 18px;
  background:#eee8de;
}
.destination--telegram .destination__visual--notebook{animation:telegramFloat 5.6s ease-in-out infinite}
.destination--telegram:hover .destination__visual--notebook{transform:translateY(-5px)}
.destination--telegram:hover .notebook-sheet--front{transform:translate(8px,-7px) rotate(9deg);box-shadow:0 24px 52px rgba(0,0,0,.48)}
.destination--telegram:hover .notebook-sheet--back{transform:translate(-9px,5px) rotate(-12deg)}
@keyframes telegramFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Keep the Boosty visuals in the same polaroid language and scale. */
.destination__visual--polaroid{
  width:214px;
  max-width:214px;
  height:196px;
  margin-top:24px;
}
.polaroid{
  width:158px;
  height:184px;
  padding:8px 8px 26px;
  background:#eee8de;
  box-shadow:0 18px 44px rgba(0,0,0,.38);
}
.polaroid img{height:142px;aspect-ratio:1/1;object-fit:cover}
.polaroid--back{left:7px;top:11px}
.polaroid--front{right:7px;top:0}

/* The replacement image and the two following images have identical geometry. */
.gateway-photo img,
.story__pair img{
  width:100%;
  aspect-ratio:3/2;
  height:auto;
  object-fit:cover;
}
.gateway-photo img{object-position:center 48%}
.gateway-photo.visible img{transform:scale(1.012)}
.story{padding-top:78px}
.story__pair{gap:78px}

@media(max-width:1224px){
  .intro__content,.story-gateway,.story{max-width:100%}
}
@media(max-width:760px){
  .destination__visual--notebook,
  .destination__visual--polaroid{width:206px;max-width:206px}
  .notebook-sheet,.polaroid{width:150px;height:176px}
  .notebook-sheet img,.notebook-sheet--back img,.polaroid img{height:134px}
  .gateway-photo img,.story__pair img{aspect-ratio:auto;height:68svh}
}
@media(prefers-reduced-motion:reduce){
  .destination--telegram .destination__visual--notebook{animation:none}
  .hero__image{transition:none}
}

/* Site 13: autonomous hero motion, explicit destinations and one centered editorial axis */
:root{--editorial-width:1160px}

/* The hero stays centered and breathes on its own, independent of scrolling. */
@media (min-width:761px){
  .hero__image{
    left:50%;
    right:auto;
    width:100%;
    max-width:none;
    object-position:50% 44%;
    transform-origin:center center;
    animation:heroBreath 18s ease-in-out infinite alternate;
    transition:none;
    will-change:transform;
  }
  @keyframes heroBreath{
    from{transform:translateX(-50%) scale(1.01)}
    to{transform:translateX(-50%) scale(1.065)}
  }
}

/* Remove the old grid offset: every editorial element now shares the viewport center. */
.intro{
  position:relative;
  display:block;
  width:100%;
  max-width:none;
  padding:110px 32px 96px;
}
.intro__content,
.story-gateway,
.story{
  width:min(100%,var(--editorial-width));
  max-width:var(--editorial-width);
  margin-left:auto;
  margin-right:auto;
}
.intro__index{
  position:absolute;
  top:114px;
  left:max(32px,calc(50% - var(--editorial-width)/2 - 70px));
}
.story{
  padding-left:0;
  padding-right:0;
}
.destinations--paired,
.gateway-photo,
.story__pair,
.story__pair figure{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* More explicit platform wording without changing the visual construction. */
.destination__title{
  font-size:clamp(30px,2.7vw,43px);
  text-wrap:balance;
}
.destination__text{max-width:440px}

/* New gateway photograph, with the same exact centered geometry as Home and Water. */
.gateway-photo img,
.story__pair img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  margin:0 auto;
}
.gateway-photo img{object-position:center 47%}
.gateway-photo.visible img{transform:scale(1.01)}
.story__pair figure:first-child img{object-position:center 49%}
.story__pair figure:last-child img{object-position:center 44%}

@media(max-width:1300px){
  .intro__index{display:none}
}
@media(max-width:1224px){
  .intro{padding-left:32px;padding-right:32px}
  .story{width:calc(100% - 64px)}
}
@media(max-width:760px){
  .hero__image{animation:mobileHeroBreath 18s ease-in-out infinite alternate}
  @keyframes mobileHeroBreath{from{transform:scale(1.01)}to{transform:scale(1.055)}}
  .intro{padding-left:20px;padding-right:20px}
  .story{width:calc(100% - 40px)}
  .destination__title{font-size:35px}
  .gateway-photo img,.story__pair img{aspect-ratio:auto;height:68svh}
}
@media(prefers-reduced-motion:reduce){.hero__image{animation:none}}

/* Site 14: quicker hero breath, amber/B&W sequence and colored social icons */
@media (min-width:761px){
  .hero__image{animation-duration:12s}
}
@media (max-width:760px){
  .hero__image{animation-duration:12s}
}
.gateway-photo img{object-position:center 46%}
.story__pair figure:first-child img{object-position:center 52%}

.closing__links{align-items:center;gap:16px;flex-wrap:wrap}
.social-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 13px 9px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.social-link:hover{transform:translateY(-2px);border-color:rgba(233,227,218,.46);background:rgba(255,255,255,.035)}
.social-link svg{width:19px;height:19px;display:block}
.social-link--vk svg{fill:#2787f5}
.social-link--telegram svg{fill:#2aabee}
.social-link--instagram svg{fill:none;stroke:#e4405f;stroke-width:1.8}
.social-link--instagram .social-dot{fill:#e4405f;stroke:none}
.social-link span{padding-bottom:0}
@media(max-width:760px){.social-link{padding:8px 11px 8px 9px}.social-link svg{width:18px;height:18px}}


/* Site 15: faster breathing hero, intimate Boosty, horizontal editorial sequence and monochrome icon buttons */
@media (min-width:761px){
  .hero__image{animation-duration:9.5s}
}
@media (max-width:760px){
  .hero__image{animation-duration:9.5s}
}

/* Keep both destination cards quiet and graphite instead of paper-white. */
.destination--telegram,
.destination--boosty{
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border-color:rgba(233,227,218,.18);
}
.destination--telegram:hover,
.destination--boosty:hover{
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.022));
}

/* Subtle film texture and floating-paper movement. */
.destination::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.09) 0 1px,transparent 1.5px),
    radial-gradient(circle at 72% 64%,rgba(255,255,255,.07) 0 1px,transparent 1.5px),
    radial-gradient(circle at 42% 82%,rgba(255,255,255,.06) 0 1px,transparent 1.5px);
  background-size:11px 13px,17px 19px,23px 29px;
  mix-blend-mode:soft-light;
  transition:opacity .35s ease;
}
.destination:hover::after{opacity:.36;animation:grainShift .42s steps(2,end) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}50%{transform:translate(-1px,1px)}100%{transform:translate(1px,-1px)}}
.destination--boosty:hover .polaroid--front{transform:translate(9px,-10px) rotate(8deg);box-shadow:0 28px 62px rgba(0,0,0,.55)}
.destination--boosty:hover .polaroid--back{transform:translate(-8px,5px) rotate(-11deg)}

/* Both selected-story images use the same horizontal geometry and centered axis. */
.gateway-photo img,
.story__pair img{
  aspect-ratio:3/2;
  width:100%;
  height:auto;
  object-fit:cover;
  object-position:center center;
}
.gateway-photo img{object-position:center 48%}
.story__pair figure:first-child img{object-position:center 50%}

/* Monochrome social icon buttons: no labels, equal circles, thin outline. */
.closing__links{gap:12px}
.social-link{
  width:46px;
  height:46px;
  padding:0;
  border-radius:50%;
  justify-content:center;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.34);
  color:#fff;
}
.social-link svg{width:20px;height:20px}
.social-link--vk svg,
.social-link--telegram svg{fill:#fff}
.social-link--instagram svg{fill:none;stroke:#fff;stroke-width:1.8}
.social-link--instagram .social-dot{fill:#fff;stroke:none}
.social-link:hover{
  transform:translateY(-3px) scale(1.04);
  border-color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.07);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
@media(max-width:760px){.social-link{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.destination:hover::after{animation:none}}

/* Site 16: centered scroll cue, paired night series and corrected social geometry */
.hero__copy{right:clamp(24px,6vw,90px)}
.hero__scroll{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:24px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
  color:#fff;
  background:rgba(0,0,0,.12);
  backdrop-filter:blur(4px);
  transition:border-color .25s ease,background .25s ease;
}
.hero__scroll span{font-size:23px;line-height:1;animation:scrollCue 1.8s ease-in-out infinite}
.hero__scroll:hover{border-color:rgba(255,255,255,.8);background:rgba(0,0,0,.25)}
@keyframes scrollCue{0%,100%{transform:translateY(-3px);opacity:.65}50%{transform:translateY(4px);opacity:1}}

/* The two selected frames now come from the same nocturnal city series. */
.story__pair figure:first-child img{object-position:center 48%}
.story__pair figure:last-child img{object-position:center 50%}

/* True optical centering for every social glyph. */
.social-link{position:relative;display:grid;place-items:center;line-height:0}
.social-link svg{display:block;width:21px;height:21px;margin:0;overflow:visible}
.social-link--vk svg{width:22px;height:22px;transform:translateY(.2px)}
.social-link--instagram svg{width:20px;height:20px}
.social-link--telegram svg{width:20px;height:20px;transform:translate(-.4px,.3px)}

@media(max-width:760px){
  .hero__scroll{width:44px;height:44px;bottom:18px}
  .hero__copy{bottom:88px}
}
@media(prefers-reduced-motion:reduce){.hero__scroll span{animation:none}}

/* Site 17: centered arrow, calmer card spacing, polished monochrome social controls */
.hero__copy{
  left:clamp(24px,6vw,90px);
  right:clamp(24px,6vw,90px);
  bottom:clamp(74px,10vh,118px);
}
.hero__scroll{
  position:fixed;
  z-index:5;
  left:50%;
  bottom:clamp(20px,4.5vh,44px);
  width:auto;
  height:auto;
  padding:8px 14px;
  border:0;
  border-radius:0;
  background:transparent;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  animation:arrowReveal .8s ease 1.25s forwards;
}
.hero__scroll span{
  display:block;
  color:#fff;
  font-size:31px;
  font-weight:300;
  line-height:1;
  animation:arrowFloat 1.8s ease-in-out infinite;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.hero__scroll:hover{
  background:transparent;
  border:0;
}
.hero__scroll:hover span{transform:scale(1.1)}
@keyframes arrowFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}
@keyframes arrowReveal{to{opacity:1}}

/* Extra breathing room between the animated photo stacks and their copy. */
.destination__title{
  margin-top:30px;
  min-height:96px;
}
.destination__text{margin-top:20px}

/* Social buttons: stronger ring and explicit optical centering. */
.closing__links{
  display:flex;
  align-items:center;
  gap:14px;
}
.social-link{
  width:50px;
  height:50px;
  min-width:50px;
  padding:0 !important;
  border:2px solid rgba(255,255,255,.82) !important;
  border-radius:50%;
  display:flex !important;
  align-items:center;
  justify-content:center;
  line-height:0;
  background:transparent;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.social-link svg{
  display:block;
  width:21px;
  height:21px;
  margin:0;
  flex:0 0 auto;
}
.social-link--vk svg{width:22px;height:22px;transform:translate(0,0)}
.social-link--instagram svg{width:21px;height:21px;transform:translate(0,0)}
.social-link--telegram svg{width:21px;height:21px;transform:translate(-1px,1px)}
.social-link:hover{
  transform:translateY(-2px) scale(1.04);
  border-color:#fff !important;
  background:rgba(255,255,255,.06);
}

/* Layered first-screen entrance. */
.hero__image{opacity:0;animation-name:heroBreath17,heroFade17 !important;animation-duration:9.5s,.85s !important;animation-timing-function:ease-in-out,ease !important;animation-iteration-count:infinite,1 !important;animation-direction:alternate,normal !important;animation-fill-mode:both,both !important}
.hero__copy h1{opacity:0;transform:translateY(10px);animation:copyReveal17 .8s ease .55s forwards}
@keyframes heroFade17{to{opacity:1}}
@keyframes copyReveal17{to{opacity:1;transform:none}}
@media(min-width:761px){
  @keyframes heroBreath17{from{transform:translateX(-50%) scale(1.02)}to{transform:translateX(-50%) scale(1.085)}}
}
@media(max-width:760px){
  .hero__copy{left:20px;right:20px;bottom:92px}
  .hero__scroll{bottom:18px}
  .hero__scroll span{font-size:28px}
  .destination__title{margin-top:24px;min-height:auto}
  .social-link{width:48px;height:48px;min-width:48px}
  @keyframes heroBreath17{from{transform:scale(1.02)}to{transform:scale(1.075)}}
}
@media(prefers-reduced-motion:reduce){
  .hero__image{opacity:1;animation:none !important}
  .hero__copy h1,.hero__scroll{opacity:1;transform:none;animation:none}
  .hero__scroll span{animation:none}
}


/* Site 18: instant scroll-cue exit, refined editorial typography, borderless gateway caption */
body{
  font-family:"Avenir Next",Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  letter-spacing:.005em;
}
.wordmark,.lang,.destination__meta,.destination__number,.destination__action,
figcaption,.eyebrow,footer{
  font-family:"Avenir Next Condensed","Helvetica Neue",Arial,sans-serif;
}
.hero h1,
.intro__lead,
.destination__title,
.closing h2,
.polaroid--front i{
  font-family:"Iowan Old Style","Baskerville","Times New Roman",serif;
  font-weight:400;
}
.hero h1{letter-spacing:-.045em;line-height:.94}
.intro__lead{letter-spacing:-.025em;line-height:1.12}
.destination__title{letter-spacing:-.028em;line-height:1.01}
.closing h2{letter-spacing:-.035em}
.destination__text,.closing__content>p:not(.eyebrow){font-weight:400;letter-spacing:.01em}

/* The arrow is present only while the viewport is exactly at the top. */
.hero__scroll{
  transition:opacity .08s linear,visibility 0s linear .08s;
}
body.has-scrolled .hero__scroll{
  opacity:0 !important;
  visibility:hidden;
  pointer-events:none;
  animation:none !important;
  transition:opacity 0s,visibility 0s;
}

/* Remove the unique frame/strip around “After the light / Private frame”. */
.gateway-photo{border:0}
.gateway-photo figcaption{
  border:0;
  box-shadow:none;
  padding-left:2px;
  padding-right:2px;
  background:transparent;
}

/* Site 19: dissolving scroll cue, fashion-editorial type and a new cinematic triptych */
body{
  font-family:"Gill Sans","Gill Sans MT","Avenir Next","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.008em;
}
.wordmark,.lang,.destination__meta,.destination__number,.destination__action,
figcaption,.eyebrow,footer{
  font-family:"Gill Sans","Gill Sans MT","Avenir Next Condensed","Helvetica Neue",Arial,sans-serif;
  letter-spacing:.145em;
}
.hero h1,
.intro__lead,
.destination__title,
.closing h2,
.polaroid--front i{
  font-family:"Bodoni 72","Didot","Bodoni MT","Times New Roman",serif;
  font-weight:400;
}
.hero h1{letter-spacing:-.052em;line-height:.91}
.intro__lead{letter-spacing:-.032em;line-height:1.08}
.destination__title{letter-spacing:-.036em;line-height:.98}
.closing h2{letter-spacing:-.046em;line-height:.94}

/* Dissolve instead of abruptly disappearing. */
.hero__scroll{
  opacity:1;
  visibility:visible;
  filter:blur(0);
  transform:translateX(-50%) scale(1);
  will-change:opacity,filter,transform;
  transition:
    opacity .42s cubic-bezier(.22,.61,.36,1),
    filter .42s cubic-bezier(.22,.61,.36,1),
    transform .42s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s;
}
body.has-scrolled .hero__scroll{
  opacity:0 !important;
  visibility:hidden;
  pointer-events:none;
  filter:blur(9px);
  transform:translateX(-50%) translateY(7px) scale(.72);
  animation:none !important;
  transition:
    opacity .34s ease,
    filter .34s ease,
    transform .34s ease,
    visibility 0s linear .34s;
}

/* Remove the remaining divider beneath the first editorial photograph. */
.intro{border-bottom:0}
.gateway-photo figcaption{border-bottom:0 !important}

/* New horizontal images: preserve their original cinematic framing. */
.gateway-photo img,
.story__pair img{
  aspect-ratio:3/2;
  height:auto;
  object-fit:cover;
}
.gateway-photo img{object-position:center center}
.story__pair figure:first-child img{object-position:center 48%}
.story__pair figure:last-child img{object-position:center 43%}

@media(max-width:760px){
  .gateway-photo img,.story__pair img{aspect-ratio:3/2;height:auto}
}
@media(prefers-reduced-motion:reduce){
  .hero__scroll,body.has-scrolled .hero__scroll{filter:none;transition:none}
}

/* Site 20: slower scroll-cue dissolve, softer literary typography, equal editorial rhythm */
body{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.004em;
}
.wordmark,.lang,.destination__meta,.destination__number,.destination__action,
figcaption,.eyebrow,footer{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  letter-spacing:.13em;
}
.hero h1,
.intro__lead,
.destination__title,
.closing h2,
.polaroid--front i{
  font-family:Cochin,"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  font-weight:400;
}
.hero h1{letter-spacing:-.038em;line-height:.94}
.intro__lead{letter-spacing:-.022em;line-height:1.12}
.destination__title{letter-spacing:-.025em;line-height:1.01}
.closing h2{letter-spacing:-.032em;line-height:.97}

/* A slower, more legible dissolve when leaving and returning to the first screen. */
.hero__scroll{
  transition:
    opacity .82s cubic-bezier(.22,.61,.36,1),
    filter .82s cubic-bezier(.22,.61,.36,1),
    transform .82s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s;
}
body.has-scrolled .hero__scroll{
  opacity:0 !important;
  visibility:hidden;
  pointer-events:none;
  filter:blur(6px);
  transform:translateX(-50%) translateY(14px) scale(.88);
  animation:none !important;
  transition:
    opacity .78s cubic-bezier(.22,.61,.36,1),
    filter .78s cubic-bezier(.22,.61,.36,1),
    transform .78s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear .78s;
}

/* The gap after “After the light” now exactly matches the 78px gap between the next two frames. */
.intro{padding-bottom:0}
.story{padding-top:78px}

@media(max-width:760px){
  .intro{padding-bottom:0}
  .story{padding-top:56px}
}

/* Site 21: stronger destination contrast, equal editorial spacing and lifted image reveals */
:root{
  --card-dark:#1d1c1a;
  --card-dark-hover:#34312d;
}

/* Another editorial type direction: elegant on Apple devices, calm elsewhere. */
body{
  font-family:Optima,"Segoe UI",Candara,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.006em;
}
.wordmark,.lang,.destination__meta,.destination__number,.destination__action,
figcaption,.eyebrow,footer{
  font-family:Optima,"Segoe UI",Candara,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  letter-spacing:.145em;
}
.hero h1,
.intro__lead,
.destination__title,
.closing h2,
.polaroid--front i{
  font-family:"Hoefler Text","Baskerville","Iowan Old Style",Georgia,serif;
  font-weight:400;
}
.hero h1{letter-spacing:-.044em;line-height:.93}
.intro__lead{letter-spacing:-.026em;line-height:1.1}
.destination__title{letter-spacing:-.03em;line-height:1}
.closing h2{letter-spacing:-.038em;line-height:.96}

/* Cards begin darker and brighten more noticeably on hover. */
.destination,
.destination--boosty{
  background:var(--card-dark);
  transition:background-color .42s ease,transform .35s ease,box-shadow .42s ease;
}
.destination:hover,
.destination--boosty:hover{
  background:var(--card-dark-hover);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}

/* Exactly the same vertical rhythm between cards and each editorial frame. */
.gateway-photo{margin-top:78px}
.story{padding-top:78px}
.story__pair{gap:78px}

/* The three editorial photographs rise gently into their final position. */
.gateway-photo.reveal,
.story__pair figure.reveal{
  opacity:0;
  transform:translateY(58px) scale(.985);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform 1.05s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.gateway-photo.reveal.visible,
.story__pair figure.reveal.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

@media(max-width:760px){
  .gateway-photo{margin-top:56px}
  .story{padding-top:56px}
  .story__pair{gap:56px}
  .gateway-photo.reveal,
  .story__pair figure.reveal{transform:translateY(38px) scale(.99)}
  .gateway-photo.reveal.visible,
  .story__pair figure.reveal.visible{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .gateway-photo.reveal,
  .story__pair figure.reveal{opacity:1;transform:none;transition:none}
}

/* Site 22: one exact editorial rhythm, reversible reveals, softened hero boundary */
:root{--editorial-gap:78px}

/* One shared value controls every gap in the editorial sequence. */
.gateway-photo{margin-top:var(--editorial-gap)}
.story{padding-top:var(--editorial-gap)}
.story__pair{gap:var(--editorial-gap)}

/* Keep reveal transitions reversible when scrolling in either direction. */
.gateway-photo.reveal,
.story__pair figure.reveal{
  opacity:0;
  transform:translateY(58px) scale(.985);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform 1.05s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.gateway-photo.reveal.visible,
.story__pair figure.reveal.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Gently dissolve the lower edge of the animated opening photograph. */
.hero picture{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 89%,rgba(0,0,0,.96) 92%,rgba(0,0,0,.62) 96%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 89%,rgba(0,0,0,.96) 92%,rgba(0,0,0,.62) 96%,transparent 100%);
}
.hero:after{
  content:"";
  position:absolute;
  z-index:1;
  left:0;right:0;bottom:0;
  height:13%;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(17,16,15,.28) 60%,var(--bg));
}
.hero__copy,.topbar{z-index:3}

@media(max-width:760px){
  :root{--editorial-gap:56px}
  .gateway-photo.reveal,
  .story__pair figure.reveal{transform:translateY(38px) scale(.99)}
  .gateway-photo.reveal.visible,
  .story__pair figure.reveal.visible{transform:none}
  .hero picture{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 91%,rgba(0,0,0,.72) 96%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 91%,rgba(0,0,0,.72) 96%,transparent 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  .gateway-photo.reveal,
  .story__pair figure.reveal{opacity:1;transform:none;transition:none}
}

/* Site 23: smoother downward entrance and direction-safe reverse motion */
.gateway-photo.reveal,
.story__pair figure.reveal{
  opacity:0;
  transform:translate3d(0,46px,0) scale(.992);
  transition:
    opacity 1.18s cubic-bezier(.22,.72,.18,1),
    transform 1.42s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
  backface-visibility:hidden;
}
.gateway-photo.reveal.visible,
.story__pair figure.reveal.visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
@media(max-width:760px){
  .gateway-photo.reveal,
  .story__pair figure.reveal{
    transform:translate3d(0,32px,0) scale(.995);
    transition-duration:1.05s,1.25s;
  }
}
@media(prefers-reduced-motion:reduce){
  .gateway-photo.reveal,
  .story__pair figure.reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* Site 24: persistent upward visibility and mathematically equal visual gaps */
:root{
  --editorial-visual-gap:78px;
  --editorial-caption-height:32px;
  --editorial-figure-gap:calc(var(--editorial-visual-gap) - var(--editorial-caption-height));
}

/* All captions occupy the same fixed row. This lets every visible edge-to-edge
   interval use one exact value, regardless of caption text. */
.gateway-photo figcaption,
.story__pair figcaption{
  height:var(--editorial-caption-height);
  min-height:var(--editorial-caption-height);
  box-sizing:border-box;
  padding:10px 2px 0;
  background:transparent;
}

/* Cards → first photograph = 78px.
   First → second and second → third = 32px caption + 46px space = 78px. */
.gateway-photo{margin-top:var(--editorial-visual-gap)}
.story{padding-top:var(--editorial-figure-gap)}
.story__pair{gap:var(--editorial-figure-gap)}

/* Keep the entrance soft while ensuring a revealed photograph never vanishes
   merely because it has moved above the viewport. */
.gateway-photo.reveal,
.story__pair figure.reveal{
  transition:
    opacity 1.18s cubic-bezier(.22,.72,.18,1),
    transform 1.42s cubic-bezier(.16,1,.3,1);
}

@media(max-width:760px){
  :root{
    --editorial-visual-gap:56px;
    --editorial-caption-height:30px;
  }
  .gateway-photo figcaption,
  .story__pair figcaption{
    padding-top:9px;
  }
}