@import url('https://vaibik.ru/site-fonts/v1/library-pinned-v9.css');
:root{--tea:#b5521d;--tea-deep:#8a3810;--tea-hi:#e98a4a;--ink:#0c0b0a;--panel:#171513;--paper:#efe9df;--stone:#c9c1b4;--muted:#8e877c;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
body{margin:0;font-family:'TikTok Sans',sans-serif;font-stretch:100%;font-weight:400;letter-spacing:0;line-height:1.45}
section{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--ink);color:var(--paper)}
h1,h2,p,ul,figure{margin:0;padding:0}
img{display:block;object-fit:cover}

/* deck chrome: one utility bar on every photo page */
.bar{position:absolute;inset:0 0 auto 0;height:52px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding:0 80px;font-size:22px;border-bottom:1px solid rgba(239,233,223,.18);background:var(--ink);color:var(--paper);z-index:3;view-transition-name:bar}
.bar span:nth-child(3){text-align:center}.bar span:nth-child(4){text-align:right}

/* poster pages: giant condensed type, tone on tone */
.poster{background:var(--tea);color:var(--tea-deep)}
.poster .huge{position:absolute;left:0;right:0;text-align:center;font-family:'Vaibik Lanze',sans-serif;font-variation-settings:"opsz" 1000;font-weight:800;letter-spacing:0;line-height:.9;text-transform:uppercase}
.line{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
.line>span{display:block}
.cap{position:absolute;font-size:24px;line-height:1.25;color:var(--tea-deep);text-align:center}
.still{position:absolute;width:300px;height:170px;z-index:2}
.still img{width:100%;height:100%}

/* cover */
.cover .huge{top:150px;font-size:300px}
.cover .cap.top{top:60px;left:0;right:0}
.cover .cap.bottom{bottom:64px;left:0;right:0}
.cover .side{top:470px;width:300px;font-size:30px;line-height:1.15}
.cover .side.l{left:80px}.cover .side.r{right:80px}
.cover .s1{left:80px;top:150px}.cover .s2{right:80px;top:150px}
.cover .s3{left:80px;bottom:150px}.cover .s4{right:80px;bottom:150px}
.cover .s5{left:810px;top:455px}

/* steps */
.steps .photo{position:absolute;left:0;top:52px;width:620px;height:1028px}
.steps .photo img{width:100%;height:100%}
.credit{position:absolute;left:24px;bottom:22px;font-size:18px;color:rgba(239,233,223,.85);display:flex;gap:10px;align-items:center}
.credit::before{content:'';width:12px;height:12px;border:1.5px solid currentColor}
.steps .head{position:absolute;left:720px;top:150px}
.title-light{font-weight:300;font-size:150px;line-height:.98;letter-spacing:-.02em;text-transform:uppercase}
.sub-light{font-weight:300;font-size:54px;line-height:1.1;text-transform:uppercase;margin-top:44px}
.steps ol{position:absolute;left:720px;right:80px;top:640px;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:48px}
.steps li{font-size:28px;line-height:1.4;color:var(--muted)}
.steps li b{display:block;font-weight:400;font-size:28px;color:var(--tea-hi);margin-bottom:18px}
.card{position:absolute;right:80px;top:150px;width:420px;background:var(--panel)}
.card .tab{display:inline-block;padding:10px 18px;background:var(--paper);color:var(--ink);font-size:22px}
.card p{padding:26px 26px 30px;font-size:34px;line-height:1.2}
.card small{display:block;margin-top:10px;font-size:22px;color:var(--muted)}

/* temperatures */
.temps .left{position:absolute;left:0;top:52px;width:820px;height:1028px;background:var(--stone);color:var(--ink);padding:110px 80px}
.temps h2{font-weight:400;font-size:116px;line-height:.98;letter-spacing:-.02em}
.temps .lead{font-size:48px;line-height:1.12;margin-top:40px;letter-spacing:-.01em}
.temps .copy{font-size:27px;line-height:1.45;margin-top:60px;max-width:600px;color:#3a352f}
.temps .plot{position:absolute;left:920px;top:190px;width:900px;height:640px;--vx-chart-fill:#3d352d;--vx-chart-accent:var(--tea-hi);--vx-chart-label:var(--muted);--vx-chart-number:var(--paper);--vx-chart-grid:rgba(239,233,223,.14);--vx-chart-gap:44px;--vx-chart-radius:2px;--vx-chart-label-size:26px;--vx-chart-number-size:40px}
.temps .note{position:absolute;left:920px;top:880px;font-size:22px;color:var(--muted)}

/* twenty seconds */
.twenty .huge{top:330px;font-size:430px}
.twenty .cap.top{top:150px;left:0;right:0;font-size:34px}
.twenty .cap.bottom{bottom:150px;left:0;right:0;font-size:34px}
.twenty .s1{left:780px;top:420px;width:360px;height:240px}

/* teas */
.teas .head{position:absolute;left:80px;top:150px}
.teas ul{position:absolute;left:80px;top:500px;width:960px;list-style:none}
.teas li{display:flex;justify-content:space-between;align-items:baseline;padding:26px 0;border-top:1px solid rgba(239,233,223,.18);font-size:50px;font-weight:300;letter-spacing:-.01em}
.teas li:last-child{border-bottom:1px solid rgba(239,233,223,.18)}
.teas li span{font-size:24px;font-weight:400;color:var(--muted);letter-spacing:0}
.teas .pic{position:absolute;width:520px}
.teas .pic img{width:520px;height:360px}
.teas .pic figcaption{margin-top:12px;font-size:20px;color:var(--muted)}
.teas .p1{left:1200px;top:150px}.teas .p2{left:1200px;top:570px}

/* close */
.close .left{position:absolute;left:0;top:52px;width:1100px;height:1028px;background:var(--stone);color:var(--ink);padding:150px 80px}
.close h2{font-weight:400;font-size:150px;line-height:.96;letter-spacing:-.02em}
.close .lead{font-size:46px;line-height:1.2;margin-top:52px}
.close .card{left:80px;right:auto;top:auto;bottom:110px;width:520px;background:var(--ink);color:var(--paper)}
.close .photo{position:absolute;right:0;top:52px;width:820px;height:1028px}
.close .photo img{width:100%;height:100%}

/* one motion system: masked rises, wiped stills, lifted rows */
section[data-vx-active] .line>span{animation:rise .8s var(--ease) both}
section[data-vx-active] .line:nth-child(2)>span{animation-delay:.08s}
section[data-vx-active] .line:nth-child(3)>span{animation-delay:.16s}
section[data-vx-active] .still,section[data-vx-active] .photo,section[data-vx-active] .pic img{animation:wipe .9s var(--ease) both}
section[data-vx-active] .s2,section[data-vx-active] .p2 img{animation-delay:.1s}
section[data-vx-active] .s3{animation-delay:.2s}
section[data-vx-active] .s4{animation-delay:.3s}
section[data-vx-active] .s5{animation-delay:.4s}
section[data-vx-active] .lift{animation:lift .7s var(--ease) both}
section[data-vx-active] .lift:nth-child(2){animation-delay:.08s}
section[data-vx-active] .lift:nth-child(3){animation-delay:.16s}
section[data-vx-active] .lift:nth-child(4){animation-delay:.24s}
@keyframes rise{from{transform:translateY(105%)}}
@keyframes wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lift{from{opacity:0;transform:translateY(28px)}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:var(--ease)}
@media (prefers-reduced-motion:reduce){section *{animation:none!important}}