:root{
  --paper:#fff8f3;
  --paper-2:#f9efe8;
  --ink:#302724;
  --muted:#756a65;
  --accent:#d66b63;
  --line:rgba(48,39,36,.12);
  --phone-w:430px;
  --phone-h:932px;
}

*{box-sizing:border-box}
html{background:#eee8e3}
body{
  margin:0;
  height:100svh;
  min-height:100vh;
  overflow:hidden;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 20% 10%,#fff4ed 0,transparent 35rem),
    radial-gradient(circle at 90% 90%,#eadff4 0,transparent 32rem),
    #eee8e3;
}

.device{
  position:relative;
  width:100%;
  height:100svh;
  min-height:0;
  margin:0 auto;
  background:var(--paper);
  overflow:hidden;
}

.device__island{display:none}

.app{
  width:100%;
  height:100%;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--paper);
  scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.app::-webkit-scrollbar{display:none}

.hero,
.intro-note,
.story,
.future-intro,
.finale{
  scroll-snap-align:start;
}

.story{
  scroll-snap-stop:always;
}

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding:calc(36px + env(safe-area-inset-top)) 24px calc(44px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 75% 18%,rgba(237,183,176,.55),transparent 35%),
    radial-gradient(circle at 15% 72%,rgba(220,204,232,.65),transparent 38%),
    linear-gradient(145deg,#fffaf6,#f7eee9);
  overflow:hidden;
}

.hero__grain{
  position:absolute;inset:0;
  opacity:.12;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
}
.hero__content{position:relative;z-index:1;max-width:340px}
.kicker{
  margin:0 0 14px;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:650;
}
h1,h2,p{margin-top:0}
.hero h1{
  margin-bottom:22px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(54px,15vw,76px);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:500;
}
.hero__copy{
  max-width:310px;
  margin-bottom:42px;
  color:var(--muted);
  font-size:18px;
  line-height:1.48;
}
.scroll-hint{
  display:flex;align-items:center;gap:12px;
  color:var(--muted);
  font-size:13px;
}
.scroll-hint__line{
  width:54px;height:1px;background:var(--line);
  position:relative;overflow:hidden;
}
.scroll-hint__line:after{
  content:"";position:absolute;inset:0;
  background:var(--ink);
  transform:translateX(-100%);
  animation:hint 1.8s ease-in-out infinite;
}
@keyframes hint{50%,100%{transform:translateX(100%)}}

.intro-note{
  min-height:68svh;
  display:grid;
  place-items:center;
  padding:70px 28px;
  background:var(--paper);
}
.intro-note p{
  max-width:330px;
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:30px;
  line-height:1.28;
  letter-spacing:-.025em;
}

.story{height:165svh;position:relative;background:var(--paper)}
.story__sticky{
  position:sticky;top:0;
  min-height:100svh;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  overflow:hidden;
  background:var(--paper);
}
.story__media{position:relative;min-height:0;background:#e7dfda;overflow:hidden}
.story__video,.story__fallback{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.story__video{
  z-index:2;
  opacity:0;
  transition:opacity .45s ease;
  /* cover срезал кадр по краям, contain вписывает ролик целиком. */
  object-fit:contain;
}
.story.is-video-ready .story__video{opacity:1}
.story__fallback{
  z-index:1;
  opacity:1;
  transition:opacity .35s ease, visibility .35s ease;
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.08)),
    url("assets/images/placeholder.svg") center/cover no-repeat;
}
.story.is-video-ready .story__fallback{
  opacity:0;
  visibility:hidden;
}
.story.needs-tap .story__media::after{
  content:"\25B6";
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:4;
  width:66px;height:66px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(29,22,20,.42);
  color:#fff;font-size:20px;
  pointer-events:none;
}
.story__shade{
  position:absolute;inset:auto 0 0;height:28%;
  z-index:3;
  background:linear-gradient(transparent,rgba(29,22,20,.20));
  pointer-events:none;
}
.story__caption{
  min-height:220px;
  padding:24px 24px calc(36px + env(safe-area-inset-bottom));
  background:var(--paper);
  border-top:1px solid rgba(48,39,36,.05);
}
.story__age{
  margin:0 0 9px;
  color:var(--accent);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}
.story__title{
  margin:0 0 10px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:37px;
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:500;
}
.story__text{
  max-width:340px;
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.48;
}

.future-intro{
  min-height:82svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:70px 24px;
  background:linear-gradient(180deg,var(--paper),#f5ebe7);
}
.future-intro h2{
  max-width:350px;
  margin-bottom:18px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:46px;
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:500;
}
.future-intro>p:last-child{
  max-width:320px;
  color:var(--muted);
  font-size:17px;
  line-height:1.5;
}

.finale{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:80px 26px calc(70px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 10%,rgba(231,183,179,.42),transparent 34%),
    #fffaf7;
}
.finale__heart{
  margin-bottom:30px;
  color:var(--accent);
  font-size:26px;
}
.finale h2{
  max-width:360px;
  margin-bottom:24px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  font-size:46px;
  line-height:1.02;
  letter-spacing:-.04em;
}
.finale p{
  max-width:350px;
  color:var(--muted);
  font-size:18px;
  line-height:1.55;
}
.finale__small{
  margin-top:46px!important;
  color:var(--ink)!important;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
}

/* Desktop: the page becomes a phone mockup, exactly as requested. */
@media (min-width: 700px){
  body{
    display:grid;
    place-items:center;
    padding:4vh 0;
    overflow:hidden;
  }
  .device{
    width:min(var(--phone-w),calc(100vw - 48px));
    height:min(var(--phone-h),92vh);
    min-height:0;
    border:9px solid #171717;
    border-radius:52px;
    box-shadow:
      0 40px 100px rgba(38,31,28,.22),
      0 0 0 1px rgba(255,255,255,.7) inset;
    overflow:hidden;
  }
  .device:before{
    content:"";
    position:absolute;inset:0;
    border-radius:42px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
    pointer-events:none;
    z-index:99;
  }
  .device__island{
    display:block;
    position:absolute;
    z-index:100;
    top:12px;left:50%;
    width:108px;height:30px;
    transform:translateX(-50%);
    border-radius:999px;
    background:#070707;
    pointer-events:none;
  }
  .hero,.story__sticky,.finale{min-height:calc(min(var(--phone-h),92vh) - 18px)}
  .story{height:1450px}
}

/* very small phones */
@media (max-width:360px){
  .story__caption{min-height:205px;padding-left:20px;padding-right:20px}
  .story__title{font-size:33px}
  .hero{padding-left:20px;padding-right:20px}
}