.hero__cake--fallback{mix-blend-mode:normal;filter:none}

/* Keep text and the photographic collection in separate, fluid columns. */
.hero.hero--static{grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:clamp(16px,2vw,40px);align-items:center;min-height:calc(100svh - 72px);padding:clamp(36px,4vw,64px) clamp(24px,4vw,96px)}
.hero--static .hero__copy{width:100%;min-width:0;padding:0}
.hero--static h1{max-width:100%;font-size:clamp(3.25rem,6vw,10rem);line-height:.91;letter-spacing:-.052em}
.hero--static h1 span{white-space:normal;overflow-wrap:break-word}
.hero--static h1 span:last-child{margin-top:.025em}
.hero--static .hero__label{margin-bottom:clamp(28px,2.5vw,42px);font-size:.75rem}
.hero--static .hero__lead{max-width:470px;margin-top:clamp(28px,2.2vw,38px);font-size:1.125rem;line-height:1.5}
.hero--static .hero__actions{margin-top:28px}
.hero--static .hero__actions .button{min-height:60px;min-width:min(100%,300px);font-size:.875rem}
.hero__print-dots{display:none}
/* Blend the photograph and animated flame patches as one group with the paper.
   Light image pixels cannot leave a white rectangle behind the cakes. */
.hero__visual{position:relative;z-index:2;inset:auto;display:block;align-self:center;min-height:0;width:100%;max-width:1240px;justify-self:center;overflow:visible;mix-blend-mode:darken}
.hero__visual::after{display:none}
/* View the occupied part of the original image: x=540, y=130, w=1132, h=811.
   Both dimensions use the same scale, so no cake can be stretched or cropped. */
.hero__image-frame{position:relative;width:100%;aspect-ratio:1132/811;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent),linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent),linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);mask-composite:intersect}
.hero__art{position:absolute;inset:auto;left:calc(-54000% / 1132);top:calc(-13000% / 811);width:calc(167200% / 1132);height:calc(94100% / 811);margin:0;aspect-ratio:1672/941}
.hero__cake{width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.hero__cake--fallback{position:static;-webkit-mask-image:none;mask-image:none}
.hero__image-caption{position:relative;right:auto;bottom:auto;display:table;margin:8px 0 0 auto;font-size:.625rem}

.header-counter{display:grid;min-width:92px;grid-template-columns:auto auto;gap:2px 9px;align-items:end;padding:7px 10px;border-left:1px solid #b9b1a1;color:#111}
.header-counter span{grid-row:1/3;align-self:center;max-width:54px;color:#777;font-size:.52rem;font-weight:800;line-height:1.05;letter-spacing:.05em;text-transform:uppercase}
.header-counter strong{font-size:1.5rem;font-weight:500;line-height:.9;letter-spacing:-.05em}
.header-counter::after{content:"открыток";font-size:.48rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}

.how{overflow:hidden;background:var(--paper)}
.how__intro{position:relative;z-index:5}
.how-route{position:relative;z-index:6;display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(42px,5vw,72px) 0 0;padding:0;border:1px solid #111;background:#fff;list-style:none}
.how-route li{display:grid;min-height:84px;grid-template-columns:36px 1fr;gap:12px;align-items:center;padding:16px 20px;border-right:1px solid #111}
.how-route li:last-child{border-right:0;color:#fff;background:#111}
.how-route b{display:grid;width:34px;height:34px;place-items:center;border:1px solid currentColor;font-size:.58rem}
.how-route span{font-size:.82rem;font-weight:800;text-transform:lowercase}
.postcard-scatter{position:relative;min-height:720px;margin-top:clamp(48px,6vw,86px)}
.postcard-shot{position:absolute;width:clamp(270px,27vw,410px);aspect-ratio:3/4;overflow:hidden;margin:0;border:1px solid #111;background:#f1ebdc;box-shadow:0 30px 65px rgba(5,5,5,.18)}
.postcard-shot img{display:block;width:100%;height:100%;object-fit:cover}
.postcard-shot--left{top:12%;left:4%;transform:rotate(-7deg)}
.postcard-shot--center{z-index:3;top:0;left:50%;transform:translateX(-50%) rotate(2.5deg)}
.postcard-shot--right{top:10%;right:4%;transform:rotate(7deg)}

.birthday-story .eyebrow{color:#949494}
.birthday-story .manifesto__copy p{max-width:720px}
.cta__content>p{max-width:640px;margin:30px 0 0;color:#4e4a43;font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.55}

@media(max-width:1060px){
  .site-nav{margin-left:auto}
  .header-counter{min-width:82px}
  .postcard-scatter{min-height:650px}
  .postcard-shot{width:32vw;min-width:260px}
  .postcard-shot--left{left:1%}
  .postcard-shot--right{right:1%}
}

@media(max-width:1200px) and (min-width:901px){
  .hero.hero--static{gap:20px;padding-inline:28px}
  .hero--static .hero__lead{font-size:1rem;max-width:390px}
}
@media(max-width:900px){
  .hero.hero--static{grid-template-columns:minmax(0,1fr);gap:24px;min-height:auto;padding:40px 24px 28px}
  .hero--static .hero__copy{max-width:680px;justify-self:center}
  .hero--static h1{font-size:clamp(3rem,10.4vw,5.75rem)}
  .hero--static .hero__lead{max-width:520px;font-size:1rem}
  .hero__visual{max-width:740px;margin:0;aspect-ratio:auto}
}

@media(max-width:820px){
  .header-counter{min-width:0;margin-left:auto;margin-right:10px;padding:5px 4px;border-left:0;grid-template-columns:auto auto;column-gap:8px}
  .header-counter span{display:block;max-width:76px;color:#514c42;font-size:.75rem;line-height:1.1;letter-spacing:0;text-transform:none}
  .header-counter strong{font-size:1.375rem}
  .header-counter::after{display:block;font-size:.75rem;line-height:1.1;letter-spacing:0;text-transform:none}
  .postcard-scatter{display:flex;min-height:0;gap:14px;margin-right:-20px;margin-left:-20px;padding:16px 20px 34px;overflow-x:auto;scroll-snap-type:x mandatory}
  .postcard-shot{position:relative;top:auto!important;right:auto!important;left:auto!important;width:min(76vw,390px);min-width:min(76vw,390px);transform:none!important;scroll-snap-align:center}
  .how-route{grid-template-columns:1fr;margin-top:34px}
  .how-route li{min-height:66px;border-right:0;border-bottom:1px solid #111}
  .how-route li:last-child{border-bottom:0}
}

@media(max-width:520px){
  .hero.hero--static{padding:32px 20px 24px;gap:24px}
  .hero--static h1{font-size:clamp(2.625rem,11vw,3.5rem)}
  .hero--static .hero__label{margin-bottom:24px}
  .hero--static .hero__lead{margin-top:24px}
  .hero--static .hero__actions .button{width:100%;min-width:0}
  .postcard-shot{width:82vw;min-width:82vw}
  .postcard-scatter{margin-right:-16px;margin-left:-16px;padding-inline:16px}
}