@font-face{font-family:'Durik';src:url(../fonts/Durik.otf) format('opentype');font-display:swap}
:root{--paper:#efe6d2;--ink:#1d1a16;--red:#c3241d;--w:#fbf7ee;--pr:#a8261f;--disp:'Durik','PT Sans','Arial Narrow',Impact,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:#14110e;color:var(--w);font:400 20px/1.5 'PT Sans',sans-serif;overflow-x:hidden}
:focus-visible{outline:3px solid #ffd34d;outline-offset:3px}
.scene,.sticky{position:relative;height:100svh;overflow:hidden}.sticky{position:sticky;top:0}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos);filter:saturate(.85) contrast(1.05) sepia(.12);transition:filter 1.2s}
.placeholder{display:grid;place-items:center;text-align:center;background:repeating-linear-gradient(135deg,#3a3329 0 24px,#332d24 24px 48px);font:14px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#d8cdb4}
.scene::after,.sticky::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 22%,transparent 60%,rgba(0,0,0,.5))}
.mono{font:13px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.hud{position:absolute;z-index:5;top:max(18px,env(safe-area-inset-top));left:24px;right:24px;display:flex;justify-content:space-between;gap:16px}
.hud span+span{text-align:right}
/* 01 приезд */
/* 01 приезд: слои привязаны к координатам фото (--sw/--sh — размер cover-кадра), поэтому HTML-бумага точно ложится на фото при любом экране */
.arrival{--sw:max(100vw,150svh);--sh:max(100svh,66.667vw);--sx:calc((100vw - var(--sw))/2);--sy:calc((100svh - var(--sh))/2)}
.a-stage{position:absolute;width:var(--sw);height:var(--sh);left:var(--sx);top:var(--sy)}
.a-stage img{width:100%;height:100%;display:block;filter:saturate(.9) contrast(1.04) sepia(.08)}
.arrival .shade{background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 20%,transparent 75%,rgba(0,0,0,.25))}
.arrival .hud span{display:block;padding-bottom:10px;border-bottom:1px solid rgba(251,247,238,.7);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.a-paper{position:absolute;z-index:4;left:calc(var(--sx) - .012*var(--sw));top:calc(var(--sy) + .135*var(--sh));width:calc(.48*var(--sw));height:calc(.31*var(--sh));display:flex;align-items:center;justify-content:center;padding-left:calc(.05*var(--sw));background:var(--paper);clip-path:polygon(0 3%,5% 0,24% 2%,43% 0,64% 2.5%,84% 0,100% 3%,99.3% 50%,100% 97%,85% 100%,62% 98%,40% 100%,18% 98%,0 100%)}
.a-paper::before{content:"";position:absolute;left:0;top:0;bottom:0;width:15%;background:rgba(150,150,145,.55)}
.a-tab{position:absolute;z-index:5;left:calc(var(--sx) + .333*var(--sw));top:calc(var(--sy) + .138*var(--sh));width:calc(.058*var(--sw));height:calc(.044*var(--sh));background:var(--pr)}
h1{position:relative;margin:0;font:400 calc(var(--sw)*.335/3.276)/1 var(--disp);color:var(--pr);letter-spacing:0;white-space:nowrap}
.a-side{position:absolute;z-index:4;left:62vw;top:30vh;width:min(340px,32vw)}
.a-side p{margin:0 0 24px;font-size:clamp(18px,1.7vw,22px);line-height:1.45;text-shadow:0 1px 12px rgba(0,0,0,.65)}
.btn{display:flex;justify-content:space-between;gap:30px;min-width:240px;background:var(--paper);color:var(--ink);border:0;padding:16px 22px;font:700 15px 'PT Sans';letter-spacing:.16em;cursor:pointer}
.btn:hover{background:var(--pr);color:var(--w)}
/* телефон/портрет: отдельное кадрирование — нижняя часть фото (ворота, дети); заголовок в экранных координатах */
@media(max-aspect-ratio:1/1){
.arrival .a-stage{width:calc(265.5*1svh);height:calc(177*1svh);left:calc(-.38*265.5*1svh);top:calc(-.435*177*1svh)}
.arrival .shade{background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 18%,transparent 48%,rgba(0,0,0,.72))}
.a-paper{left:3vw;top:max(64px,9svh);width:94vw;height:auto;padding:5vw 4vw 5vw 8vw}
.a-paper::before{width:9%}.a-tab{left:58vw;top:calc(max(64px,9svh) - 12px);width:16vw;height:3.4vw;min-height:12px}
h1{font-size:calc(74vw/3.276)}
.a-side{left:5vw;top:auto;bottom:max(24px,env(safe-area-inset-bottom));width:90vw}
.a-side p{font-size:18px;margin-bottom:16px}.btn{min-width:0;width:100%}}
/* диалоги: одна текстовая область */
.say{position:absolute;z-index:4;left:5vw;width:min(560px,90vw);padding:6px 0 6px 22px;border-left:5px solid var(--red);text-shadow:0 1px 14px rgba(0,0,0,.7);visibility:hidden}
.say.show{visibility:visible}.say.tl{top:12vh}.say.bl{bottom:12vh}
.say .prev{margin:0 0 14px;color:#d5ccb8;font-size:18px;min-height:1.5em}
.say .who{margin:0 0 4px;color:#ff6a5f;font:700 14px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase}
.say .cur{margin:0;font:700 clamp(26px,3vw,38px)/1.22 'PT Sans'}
.say .in{animation:up .4s both}@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.say.tl::before,.say.bl::before{content:"";position:absolute;z-index:-1;inset:-30px -60px -30px -40px;background:radial-gradient(ellipse at 20% 50%,rgba(8,6,4,.62),transparent 72%)}
.caption{position:absolute;z-index:4;left:50%;bottom:6vh;width:min(680px,90vw);transform:translate(-50%,12px);margin:0;text-align:center;font:italic 22px/1.4 'PT Sans';text-shadow:0 1px 14px #000;opacity:0;transition:.6s}
.caption.on{opacity:1;transform:translate(-50%,0)}
.dorm .say .cur{font-size:clamp(22px,2.3vw,30px);font-weight:400}.dorm .say{border-left-width:3px}.dim .photo{filter:saturate(.8) contrast(1.05) sepia(.15) brightness(.72)}
.hint{position:absolute;z-index:4;bottom:22px;left:0;right:0;text-align:center;margin:0;font-size:16px}
/* 03 столовая */
.dining .table{position:absolute;inset:0;touch-action:pan-y}
.d-text{position:absolute;z-index:4;left:5vw;bottom:8vh;width:min(520px,88vw);pointer-events:none;text-shadow:0 1px 16px rgba(0,0,0,.8)}
.d-text p{margin:6px 0 0;font-size:22px}
.dining .shade{background:linear-gradient(0deg,rgba(8,6,4,.78),transparent 42%),linear-gradient(180deg,rgba(0,0,0,.35),transparent 20%)}
.mug{position:absolute;z-index:3;width:clamp(110px,15vw,230px);aspect-ratio:1;transform:translate(-50%,-80%);touch-action:none;cursor:grab}
.mug img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 10px 7px rgba(0,0,0,.35))}
.mug .ph{width:100%;height:100%;display:grid;place-items:center;text-align:center;border:2px dashed #d8cdb4;border-radius:50%;font:11px 'IBM Plex Mono';color:#d8cdb4;background:rgba(0,0,0,.25)}
.mug.lift{filter:brightness(1.06)}
/* 04 после обеда */
.play .photo{transform:scale(1.1) translateY(calc(var(--p,0)*-3%))}
.p-text{position:absolute;z-index:4;right:5vw;bottom:14vh;width:min(520px,88vw);font:700 clamp(24px,2.6vw,34px)/1.3 'PT Sans';text-shadow:0 2px 20px rgba(0,0,0,.8);opacity:0;transform:translateY(16px);transition:.7s}
.p-text.on{opacity:1;transform:none}.play .shade{background:linear-gradient(0deg,rgba(8,6,4,.7),transparent 50%)}
/* 06 переход */
.transition{background:#d6cbb2;color:var(--ink)}
.t-photo{position:absolute;right:6vw;top:10vh;bottom:10vh;width:min(38vw,520px);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.3)}.bw{filter:grayscale(1) contrast(1.1)!important}
.t-day{position:absolute;z-index:3;left:5vw;top:24vh;background:var(--paper);padding:28px 38px 24px;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:rotate(-1.5deg)}
.t-day h2{margin:0;font:400 clamp(64px,11vw,170px)/.95 var(--disp);color:var(--ink)}
.t-day i{display:block;height:8px;background:var(--pr);margin:6px 0 14px;transform:skewX(-20deg)}.t-day p{margin:0;font-size:20px}
.nav{position:fixed;z-index:20;right:16px;bottom:16px;display:flex;gap:10px;align-items:center;background:rgba(20,17,14,.8);padding:6px 10px;border-radius:30px;font:13px 'IBM Plex Mono',monospace;color:var(--w)}
.nav button{background:none;border:1px solid var(--w);color:var(--w);border-radius:50%;width:38px;height:38px;font-size:18px;cursor:pointer}.nav button:disabled{opacity:.3}
@media(max-width:700px){body{font-size:17px}.photo{object-position:var(--mpos)}
.say,.say.tl,.say.bl{top:auto;bottom:13vh;width:90vw}.say .cur{font-size:24px}.say .prev{font-size:16px}.caption{font-size:18px;bottom:11vh}
.d-text p{font-size:18px}.d-text{bottom:12vh}.p-text{right:5vw;left:5vw;width:auto;bottom:14vh}
.t-photo{left:8vw;right:8vw;width:auto;top:38%;bottom:8%}.t-day{top:8vh;left:5vw;padding:20px 24px}.t-day p{font-size:16px}.hud .hide-m{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.play .photo{transform:none}}

/* Редакционная доработка первого экрана — без изменения остальных сцен */
.arrival{isolation:isolate;background:#19221b}
.arrival .a-stage{inset:0;width:100%;height:100%;left:0;top:0}
.arrival .a-stage img{width:100%;height:100%;object-fit:cover;object-position:center center;filter:saturate(.84) contrast(.98)}
.arrival .shade{background:linear-gradient(90deg,rgba(15,16,12,.12),transparent 48%),linear-gradient(0deg,rgba(12,13,9,.48),transparent 35%)}
.arrival .hud{top:clamp(22px,4vh,48px);left:clamp(24px,4.5vw,76px);right:clamp(24px,4.5vw,76px);font-size:11px;letter-spacing:.18em}
.arrival .hud span{border:0;padding:0}
.a-paper{left:0;top:clamp(100px,16vh,180px);width:min(51vw,760px);height:auto;min-height:clamp(165px,26vh,310px);padding:22px 3.4vw 28px 5vw;clip-path:polygon(0 4%,9% 2%,27% 0,45% 2%,66% 0,84% 2%,100% 1%,99% 97%,79% 99%,58% 98%,38% 100%,18% 98%,0 100%);justify-content:flex-start}
.a-paper::before{width:9%;background:rgba(85,76,64,.14)}
.a-paper h1{font-size:clamp(72px,10.5vw,180px);line-height:.95;letter-spacing:-.015em}
.a-tab{left:min(36vw,540px);top:clamp(87px,14vh,165px);width:clamp(65px,7vw,112px);height:19px;transform:rotate(-3deg)}
.a-side{left:auto;right:clamp(28px,6vw,100px);top:auto;bottom:clamp(64px,13vh,130px);width:min(360px,34vw)}
.a-side p{font-size:clamp(19px,1.7vw,24px);line-height:1.38;letter-spacing:-.012em;margin-bottom:26px}
.arrival .btn{min-width:0;width:100%;max-width:280px;padding:17px 22px;font-size:15px;letter-spacing:.11em;transition:background .2s,color .2s}
body:has(#arrival:hover) .nav{opacity:1}
.nav{transition:opacity .2s}
@media (min-width:701px){body:has(#arrival:is(:hover,:focus-within)) .nav{opacity:0;pointer-events:none}}
@media(max-width:700px){
.arrival .a-stage{inset:0;width:100%;height:100%;left:0;top:0}
.arrival .a-stage img{object-position:53% center}
.arrival .shade{background:linear-gradient(180deg,rgba(10,12,10,.22),transparent 28%,transparent 43%,rgba(10,12,10,.76) 100%)}
.arrival .hud{left:5vw;right:5vw;top:max(22px,env(safe-area-inset-top));font-size:9px;letter-spacing:.09em}
.a-paper{left:0;top:13svh;width:92vw;min-height:0;padding:20px 8vw 25px 8vw}
.a-paper h1{font-size:clamp(58px,17vw,104px)}
.a-tab{left:61vw;top:calc(13svh - 10px);width:15vw;height:14px}
.a-side{left:5vw;right:5vw;bottom:max(55px,calc(env(safe-area-inset-bottom) + 38px));width:90vw}
.a-side p{font-size:19px;line-height:1.4;margin-bottom:18px;max-width:370px}
.arrival .btn{max-width:none}
}