@font-face{font-family:Prata;src:url(/a/prata.woff2) format("woff2");font-display:swap}
@font-face{font-family:Manrope;src:url(/a/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--paper:#F7F3EE;--raised:#FDFBF7;--ink:#1B1B1A;--blue:#2E6389;--blue-deep:#24506F;--bronze:#997E5B;
 --muted:#69655B;--hair:#DCD5CA;--red:#B04943;--serif:Prata,Georgia,"Times New Roman",serif;
 --sans:Manrope,-apple-system,"Helvetica Neue",Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* 🧭 Денис 04.10.2026: «не делаю настолько широким», «много воздуха» — вся страница в колонке 880, воздух вдвое меньше */
body>header,main>*:not(.hero),main.doc,main.nf{max-width:880px;margin-left:auto;margin-right:auto}
body>footer{max-width:1180px;margin-left:auto;margin-right:auto}
/* первый экран — во всю ширину окна (Денис 04.10.2026) */
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.cap{font:600 12px/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--bronze)}
.act{color:var(--blue);font:600 16px/1.3 var(--sans);text-decoration:none;white-space:nowrap}
.act:hover{color:var(--blue-deep)}
.act:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* шапка */
.top{display:flex;justify-content:space-between;align-items:center;height:72px;padding:0 24px;position:relative;z-index:3}
.word{font:400 21px/1 var(--serif);letter-spacing:-.025em;text-decoration:none}
.langs{display:flex;gap:6px;font:500 11px/1 var(--sans);letter-spacing:.13em;color:var(--muted)}
.langs a{text-decoration:none;padding:12px 4px}
.langs a[aria-current]{color:var(--blue)}
.langs span{padding:12px 0}
.top .right{display:flex;align-items:center;gap:28px}
.top .act{font-size:13px}

/* первый экран = заставка приложения */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;max-height:1080px;overflow:hidden}
.hero .langs{position:absolute;top:14px;right:20px;z-index:3}
.bot{position:absolute;pointer-events:none;will-change:transform,opacity}
.bot img{position:absolute;max-width:none}
.hero .center{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;padding:0 24px;z-index:2}
.hero h1{font-weight:400}
.hero .wm{display:block;font:400 60px/1 var(--serif);letter-spacing:-.025em}
.hero .tg{display:block;margin-top:20px;font:400 14px/1 var(--sans);letter-spacing:.31em}
.hero .go{margin:0 auto;max-width:600px}
.hero .go .cap{margin-top:44px}
.hero .lead{font:400 25px/1.4 var(--serif);letter-spacing:-.015em;margin:16px auto 0;text-wrap:balance}
.hero .go .act{display:inline-block;margin-top:28px}
.hero .meta{margin-top:14px;font-size:12px;color:var(--muted)}
/* шалфей приподнят — низ стебля уходит в бумагу, а не обрывается */
#osmanthus{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 110px);mask-image:linear-gradient(to top,transparent 0,#000 110px)}
.js .hero .wm,.js .hero .tg,.js .hero .go,.js .bot{opacity:0}

/* о приложении */
.intro{text-align:center;padding:72px 24px 8px;max-width:760px;margin:0 auto}
.intro .lead{font:400 30px/1.32 var(--serif);letter-spacing:-.02em;margin:26px auto 0;max-width:760px;text-wrap:balance}
.story h2,.quiet p,.final h2,.doc h1,.rep h1,.intro .meta{text-wrap:balance}
.intro .meta{margin-top:26px;font-size:13px;color:var(--muted)}

/* развороты */
.story{display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:64px;align-items:center;padding:56px 24px}
.story.flip{grid-template-columns:minmax(0,1fr) 340px}
.story.flip .shot{order:2}
.story .no{font:400 56px/1 var(--serif);color:var(--bronze);opacity:.6;letter-spacing:-.02em}
.story .cap{margin-top:26px}
.story h2{font:400 36px/1.18 var(--serif);letter-spacing:-.03em;margin-top:16px}
.story p{margin-top:20px;font-size:17px;line-height:29px;color:var(--muted)}

.quiet{text-align:center;padding:64px 24px 8px;max-width:760px;margin:0 auto}
.quiet p{font:400 29px/1.48 var(--serif);letter-spacing:-.01em}
.quiet .act{display:inline-block;margin-top:28px;font-size:13px}
/* последний экран вместе с подвалом — ровно окно: внизу страницы видны только они, айфон сверху не заходит; --fh ставит stack.js */
.final{text-align:center;padding:72px 24px;min-height:calc(100vh - var(--fh,100px));min-height:calc(100svh - var(--fh,100px));display:flex;flex-direction:column;justify-content:center;align-items:center}
.final h2{font:400 40px/1.1 var(--serif);letter-spacing:-.03em}
.final .act{display:inline-block;margin-top:30px}

/* подвал */
footer{display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;gap:14px 32px;padding:32px 24px 48px;font-size:12px;line-height:1.6;color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}
footer nav a{text-decoration:none}
footer nav a:hover{color:var(--ink)}

/* документ */
.doc{padding:48px 24px 80px}
.doc h1{font:400 46px/1.12 var(--serif);letter-spacing:-.035em;margin-top:22px}
.doc .rev{margin-top:20px;font-size:13px;color:var(--muted)}
.doc .body{margin:40px 0 0;max-width:720px}
.doc .body h2{font:400 27px/36px var(--serif);letter-spacing:-.015em;margin:44px 0 14px}
.doc .body h2 .no{display:block;font:600 12px/1 var(--sans);letter-spacing:.13em;color:var(--bronze);margin-bottom:14px}
.doc .body p,.doc .body li{font-size:16px;line-height:29px;color:#403E39}
.doc .body p+p{margin-top:14px}
.doc .body ul{list-style:none;margin:12px 0}
.doc .body li{position:relative;padding-left:22px}
.doc .body li+li{margin-top:8px}
.doc .body li::before{content:"–";position:absolute;left:0;color:var(--bronze)}
.doc .body a{color:var(--blue);text-decoration:none}
.doc .others{margin-top:56px}
.doc .others a{display:block;margin-top:12px}

/* форма */
.rep{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:64px;padding:48px 24px 80px}
.rep h1{font:400 40px/48px var(--serif);letter-spacing:-.03em;margin-top:22px}
.rep .introp{margin-top:34px;font-size:16px;line-height:28px;color:var(--muted)}
.fld{display:block;margin-bottom:46px}
.fld .lab{display:block;font:600 11px/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--bronze);margin-bottom:12px}
.fld input,.fld textarea,.fld select{display:block;width:100%;border:0;border-bottom:1px solid var(--hair);background:transparent;
 font:400 15px/1.5 var(--sans);color:var(--ink);padding:6px 0 12px;border-radius:0;outline:0;-webkit-appearance:none;appearance:none}
.fld textarea{resize:none;min-height:74px;field-sizing:content}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-bottom-color:var(--ink)}
.fld ::placeholder{color:var(--muted);opacity:1}
.fld select{cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 1v9M2 6.5 6 10.5 10 6.5' stroke='%2369655B' fill='none'/%3E%3C/svg%3E") no-repeat right 4px top 12px;padding-right:24px}
.fld select:invalid{color:var(--muted)}
.fld .err{display:none;margin-top:8px;font-size:12px;color:var(--red)}
.fld.bad .err{display:block}
.fld.bad input,.fld.bad textarea,.fld.bad select{border-bottom-color:var(--red)}
.types{display:flex;flex-wrap:wrap;gap:6px 22px;border:0}
.types label{position:relative;cursor:pointer;font-size:15px;color:var(--muted);padding:4px 0}
.fld .types input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.types input:checked+span{color:var(--ink)}
fieldset.fld{border:0;min-width:0}
fieldset.fld legend{padding:0}
.types span::before{content:"";display:inline-block;width:7px;height:7px;border:1px solid var(--muted);border-radius:50%;margin-right:9px;vertical-align:2px}
.types input:checked+span::before{background:var(--ink);border-color:var(--ink)}
.types input:focus-visible+span{outline:2px solid var(--blue);outline-offset:3px}
.note{font-size:12px;color:var(--muted);margin-top:-30px;margin-bottom:40px;display:none}
.good{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:20px;color:var(--muted);cursor:pointer;margin-top:-6px}
.good input{flex:none;width:15px;height:15px;margin-top:2px;-webkit-appearance:none;appearance:none;border:1px solid var(--muted);background:transparent;cursor:pointer}
.good input:checked{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M3 6.8 5.5 9.2 10 4' stroke='%23F7F3EE' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--ink)}
.good.bad{color:var(--red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ferr{margin-top:24px;font-size:13px;line-height:20px;color:var(--red)}
.send[disabled]{opacity:.5;cursor:default}
.sent .ref{margin-top:14px;font:600 12px/1 var(--sans);letter-spacing:.13em;color:var(--bronze)}
.send{margin-top:40px;background:none;border:0;cursor:pointer;padding:8px 0}
.sent{display:none;text-align:center;padding:64px 24px 96px;max-width:640px;margin:0 auto}
.sent img{width:210px;margin:0 auto 46px}
.sent h1{font:400 54px/1.1 var(--serif);letter-spacing:-.03em;margin-top:22px}
.sent p{margin-top:24px;font-size:16px;line-height:27px;color:var(--muted);text-wrap:balance}
.sent .act{display:inline-block;margin-top:40px}
.done .rep{display:none}.done .sent{display:block}

.nf{text-align:center;padding:96px 24px 120px}
.nf h1{font:400 47px/1.15 var(--serif);letter-spacing:-.03em}
.nf .act{display:inline-block;margin-top:30px}

@media (max-width:760px){
 body{font-size:15px}
 .top{height:66px;padding:0 24px}
 .word{font-size:17.5px}
 .top .right{gap:16px}
 .top .langs{display:none}
 .hero{max-height:none}
 .hero{height:auto;min-height:100svh;padding:240px 0 350px}
 .hero .meta{text-wrap:balance}
 .hero .center{position:relative;top:auto;transform:none}
 .hero .lead{font-size:21px}
 .hero .go .cap{margin-top:32px}
 .hero .wm{font-size:42px}
 .hero .tg{font-size:11px;margin-top:16px}
 .act{font-size:14px}
 .intro{padding:56px 24px 0}
 .intro .lead{font-size:25px;line-height:1.36}
 .intro .meta{font-size:12px}
 .story,.story.flip{display:block;padding:56px 24px 0}
 .story .shot{width:290px;margin:0 auto 32px}
 .story .no{font-size:54px}
 .story .cap{font-size:10px;margin-top:18px}
 .story h2{font-size:30px;line-height:38px;margin-top:14px}
 .story p{font-size:15px;line-height:25px;margin-top:16px}
 .quiet{padding:64px 24px 0}
 .quiet p{font-size:24px;line-height:1.5}
 .final{padding:64px 24px}
 .final h2{font-size:36px;line-height:43px}
 footer{padding:40px 24px 56px;flex-direction:column}
 footer nav{flex-direction:column}
 .doc{padding:40px 28px 64px}
 .doc h1{font-size:30px;line-height:1.2}
 .doc .body{margin-top:44px}
 .doc .body h2{font-size:25px;line-height:34px;margin-top:52px}
 .doc .body p,.doc .body li{font-size:15px;line-height:25px}
 .rep{display:block;padding:40px 28px 72px}
 .rep h1{font-size:39px;line-height:49px}
 .rep .introp{font-size:15px;line-height:25px;margin:26px 0 54px}
 .sent{padding:56px 28px 80px}
 .sent img{width:160px}
 .sent h1{font-size:40px}
 .sent p{font-size:15px;line-height:25px}
}
/* первый экран стоит на месте, следующий раздел наезжает на него снизу листом бумаги (Денис 04.10.2026) */
.snap .hero{position:sticky;top:0;z-index:0;transform-origin:50% 0}
/* разделы — обычная прокрутка на бумаге поверх закреплённого первого экрана; «Будуар» наезжает на него
   (решение Дениса 04.10.2026: один яркий момент — первый экран, дальше спокойно) */
.snap main>*:not(.hero),.snap body>footer{position:relative;z-index:1;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}
/* проявление при входе в экран: проступает и поднимается на 32 px; экран приложения — лёгкий параллакс (stack.js) */
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .story .rv+.rv{transition-delay:.12s}
/* низ мимозы растворяется в бумаге — срез стебля не висит в воздухе */
#mimosa{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 90px);mask-image:linear-gradient(to top,transparent 0,#000 90px)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}.snap .hero{position:relative!important;transform:none!important}.js .rv{opacity:1;transform:none;transition:none}.story .shot{translate:none!important}}