@font-face{font-family:Cormorant;src:url('fonts/Cormorant.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:Cormorant;src:url('fonts/Cormorant-Italic.ttf') format('truetype');font-style:italic;font-weight:400 700;font-display:swap}
@font-face{font-family:Manrope;src:url('fonts/Manrope.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}

/* Ночь — фон; кость — текст; пепел — второстепенное; лампа — тебя услышали; экран — ты один ночью. */
:root{
 --night:#0c1113;
 --bone:#ece6da;
 --ash:#aaa498;
 --lamp:#d9b46f;
 --screen:#8fb4cb;
 --wax:#7d2b23;
 --gutter:clamp(20px,7vw,112px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-snap-type:y proximity;background:var(--night)}
body{margin:0;background:var(--night);color:var(--bone);font-family:Manrope,system-ui,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,p,ul,fieldset{margin:0;padding:0}
a{color:var(--lamp)}
:focus-visible{outline:2px solid var(--lamp);outline-offset:4px}

.screen{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
 padding:clamp(72px,12vh,140px) var(--gutter) clamp(96px,14vh,150px);overflow:hidden;isolation:isolate;scroll-snap-align:start}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;z-index:-2}
.scene-missing{background:radial-gradient(circle at 70% 50%,#26302f,#0c1113 70%)}
.shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,rgba(9,13,15,.94) 0%,rgba(9,13,15,.86) 30%,rgba(9,13,15,.45) 52%,rgba(9,13,15,0) 76%)}
.warm .shade{background:linear-gradient(90deg,rgba(14,11,8,.94) 0%,rgba(14,11,8,.86) 30%,rgba(14,11,8,.45) 52%,rgba(14,11,8,0) 76%)}

.copy{max-width:min(40rem,48vw)}
.hero{font-family:Cormorant,Georgia,serif;font-weight:600;font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
.body{margin-top:1.4rem;font-size:clamp(1.08rem,1.55vw,1.5rem);line-height:1.5;color:var(--bone);max-width:34rem;text-wrap:pretty}
.sign{margin-top:1.4rem;font-family:Cormorant,Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(1.45rem,2vw,1.9rem);color:var(--bone)}

/* Переход — вопрос читателя. Холодный, пока ты один; тёплый, когда тебя слышат. */
.next{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,6vh,64px);
 font-family:Cormorant,Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(1.5rem,2.4vw,2.3rem);line-height:1.2;color:var(--screen)}
.warm .next{color:var(--lamp)}

.call .hero{font-size:clamp(2.8rem,5.6vw,5.4rem)}
.long .hero{font-size:clamp(2.1rem,3.7vw,3.5rem)}

.truths{list-style:none;margin-top:2rem;display:grid;gap:1.6rem;max-width:36rem}
.truths li{border-left:2px solid var(--lamp);padding-left:1.1rem}
.truths q{display:block;font-family:Cormorant,Georgia,serif;font-size:clamp(1.45rem,2.2vw,2rem);line-height:1.2;quotes:"“" "”"}
.truths .answered{display:block;margin-top:.45rem;font-size:1.08rem;color:var(--ash)}

/* Финал: рассвет, форма поверх левой части. */
.final{justify-content:flex-start;padding-top:clamp(40px,7vh,72px);padding-bottom:clamp(40px,7vh,72px)}
.final .copy{max-width:min(36rem,52vw)}
.final .hero{font-size:clamp(2.2rem,4vw,3.8rem)}
form{margin-top:1.3rem;display:grid;gap:.85rem}
.field{display:grid;gap:.45rem}
.field span,.keep legend{font-size:1.02rem;color:#c9c2b5}
input[type=text],input[type=date],textarea{width:100%;font:inherit;font-size:1.05rem;color:var(--bone);background:rgba(12,17,19,.72);
 border:1px solid rgba(236,230,218,.28);border-radius:10px;padding:.8rem .95rem}
textarea{font-family:Cormorant,Georgia,serif;font-size:1.35rem;line-height:1.3;resize:vertical}
input::placeholder,textarea::placeholder{color:#8d877c}
.keep{border:0;display:grid;gap:.4rem}
.keep legend{margin-bottom:.4rem}
.keep label,.check{display:flex;gap:.65rem;align-items:flex-start;font-size:1.04rem;line-height:1.35}
.keep input,.check input{accent-color:var(--lamp);margin-top:.2rem;flex:none;width:1.05rem;height:1.05rem}
.keep .date{padding-left:1.7rem;align-items:center}
.keep .date input{max-width:12rem}
.act{justify-self:start;font:inherit;font-size:1.1rem;font-weight:600;color:#1d150b;background:var(--lamp);border:0;border-radius:999px;padding:.95rem 1.7rem;cursor:pointer}
.act:hover{background:#e6c486}
.act.quiet{background:transparent;color:var(--lamp);border:1px solid var(--lamp)}
.error{color:#f0a48f;font-size:.98rem}
.note{color:var(--ash);font-size:.98rem;margin-top:.6rem}
.soon-note{margin-top:2rem;font-family:Cormorant,Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.25;color:var(--lamp);max-width:30rem}
.soon{justify-content:center}
.done{display:grid;gap:1rem;justify-items:start}
.done:focus{outline:none}
.done .act{margin-top:.2rem}
.witness-ask{margin-top:1.4rem}
.witness{display:grid;gap:1rem;width:100%;margin-top:.4rem}
.witness q{font-family:Cormorant,Georgia,serif;font-size:1.6rem;line-height:1.2;border-left:2px solid var(--lamp);padding-left:1rem;quotes:"“" "”"}

footer{padding:2.5rem var(--gutter) 3rem;display:grid;gap:.6rem;color:var(--ash);font-size:.95rem;background:var(--night)}
footer .preview{color:#7f7a70}

/* Переход проявляется с задержкой, как вопрос, который приходит сам. */
@media (prefers-reduced-motion:no-preference){
 .js .next{opacity:0;transform:translateY(8px);transition:opacity .9s ease .9s,transform .9s ease .9s}
 .js .seen .next{opacity:1;transform:none}
 .js .done:not([hidden]){animation:rise .7s ease both}
 @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* Телефон: картинка сверху видна целиком справа, текст — внизу на затемнении. */
@media screen and (max-width:760px){
 .screen{justify-content:flex-end;padding:96px 20px 108px}
 .scene{object-position:78% center}
 .shade,.warm .shade{background:linear-gradient(180deg,rgba(9,13,15,0) 18%,rgba(9,13,15,.55) 42%,rgba(9,13,15,.9) 62%,rgba(9,13,15,.96) 100%)}
 .warm .shade{background:linear-gradient(180deg,rgba(14,11,8,0) 18%,rgba(14,11,8,.55) 42%,rgba(14,11,8,.9) 62%,rgba(14,11,8,.96) 100%)}
 .copy,.final .copy{max-width:none}
 .hero{font-size:clamp(2.05rem,8.6vw,2.6rem)}
 .call .hero{font-size:clamp(2.3rem,9.6vw,2.9rem)}
 .long .hero{font-size:clamp(1.85rem,7.6vw,2.3rem)}
 .body{font-size:1.06rem}
 .next{left:20px;right:20px;bottom:36px;font-size:1.45rem}
 .feed{justify-content:flex-end}
 .truths{gap:1.1rem;margin-top:1.4rem}
 .truths q{font-size:1.3rem}
 .final{justify-content:flex-start;padding-top:34svh;padding-bottom:56px}
 .final .scene{height:58svh;object-position:70% 30%}
 .final .shade{background:linear-gradient(180deg,rgba(14,11,8,0) 0%,rgba(14,11,8,.15) 18%,rgba(14,11,8,.85) 36%,rgba(14,11,8,.97) 48%,rgba(14,11,8,1) 100%)}
 .final .hero{font-size:2rem}
}

/* Печать в PDF: один экран — одна страница 1280×800, переход виден сразу. */
@media print{
 @page{size:1280px 800px;margin:0}
 html{scroll-snap-type:none}
 html,body{background:var(--night);-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .screen{height:800px;min-height:0;break-after:page;page-break-after:always}
 .js .next{opacity:1!important;transform:none!important;transition:none!important}
 footer{display:none}
 .screen{padding:96px 112px 120px}
 .copy{max-width:600px}
 .hero{font-size:62px}
 .call .hero{font-size:76px}
 .long .hero{font-size:50px}
 .final .hero{font-size:52px}
 .body{font-size:22px;max-width:540px}
 .next{left:112px;bottom:56px;font-size:34px}
 .truths q{font-size:29px}
 .truths .answered{font-size:16px}
 .sign{font-size:26px}
 .final{padding-top:56px;padding-bottom:40px}
 .final .copy{max-width:600px}
}