/* Повадка — общий стиль. Телефон в первую очередь; на широком экране лента по центру, по бокам колонки. */
@font-face{font-family:"Rubik";font-weight:400;font-display:swap;src:url(fonts/rubik-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Rubik";font-weight:400;font-display:swap;src:url(fonts/rubik-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-weight:500;font-display:swap;src:url(fonts/rubik-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Rubik";font-weight:500;font-display:swap;src:url(fonts/rubik-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-weight:700;font-display:swap;src:url(fonts/rubik-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Rubik";font-weight:700;font-display:swap;src:url(fonts/rubik-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-weight:400;font-display:swap;src:url(fonts/lora-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Lora";font-weight:400;font-display:swap;src:url(fonts/lora-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/lora-cyrillic-400-italic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Lora";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/lora-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-weight:600;font-display:swap;src:url(fonts/lora-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Lora";font-weight:600;font-display:swap;src:url(fonts/lora-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--moss:#17211d;--moss2:#22302a;--paper:#f2eee4;--card:#fbf8f1;--ink:#1e2622;--mute:#6a726c;--line:#d9d2c2;--klukva:#b8324f;--lishay:#9fb08a;--tab:54px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 "Rubik",-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:50;background:#fff;padding:6px 10px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* каркас */
.shell{min-height:100vh}
.rail,.side{display:none}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:1.15rem;letter-spacing:.01em}
.logo small{display:block;font-weight:400;font-size:.72rem;color:var(--mute);letter-spacing:0}
.logo svg{width:32px;height:32px;flex:none}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.top .logo{font-size:1.05rem}
.top .sp{flex:1}
.top a.ic{display:flex;padding:6px;text-decoration:none}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:var(--tab);display:flex;background:var(--moss);color:#d9dccf;border-top:1px solid #000;padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:.66rem;text-decoration:none;color:#aeb5a9}
.tabbar a svg.i{width:22px;height:22px}
.tabbar a.on{color:#fff}
.tabbar a.on svg.i{stroke:var(--lishay)}
.page{padding:14px 16px calc(var(--tab) + 30px);max-width:760px;margin:0 auto}
.foot{font-size:.8rem;color:var(--mute);padding:18px 0 0;border-top:1px solid var(--line);margin-top:34px;display:flex;flex-wrap:wrap;gap:6px 14px}
.foot a{color:var(--mute)}

h1{font:600 1.55rem/1.2 "Lora",Georgia,serif;margin:.4em 0 .35em}
h2{font:600 1.2rem/1.25 "Lora",Georgia,serif;margin:1.5em 0 .5em}
h3{font-size:1rem;margin:1.2em 0 .3em}
.lead{font-size:1.04rem;color:#3b4540}
.note{font-size:.86rem;color:var(--mute)}
.prose p,.prose li{max-width:64ch}
.prose{font-family:"Lora",Georgia,serif;font-size:1.02rem}
.prose h2,.prose h3{font-family:"Rubik",sans-serif}
.crumbs{font-size:.82rem;color:var(--mute);margin-top:4px}
.crumbs a{color:var(--mute)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.tags a{font-size:.85rem;text-decoration:none;color:var(--klukva);background:#f6e3e3;border-radius:3px;padding:1px 7px}
.tags a b{font-weight:400;color:var(--mute);margin-left:4px;font-size:.75rem}
.btn{display:inline-block;background:var(--moss);color:#fff;text-decoration:none;border:0;border-radius:4px;padding:8px 14px;font-weight:500;cursor:pointer;margin:4px 6px 4px 0}
.btn.alt{background:transparent;color:var(--ink);border:1px solid var(--line)}

/* сетка превью (профиль, подборка, тег, архив) */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:10px -16px}
.tile{position:relative;display:block;aspect-ratio:9/16;background:#26312c;overflow:hidden;text-decoration:none;color:#fff}
.tile img{width:100%;height:100%;object-fit:cover}
.tile .d,.tile .v{position:absolute;bottom:4px;font-size:.72rem;text-shadow:0 1px 2px #000}
.tile .d{right:6px}.tile .v{left:6px;display:flex;align-items:center;gap:2px}
.tile .v svg.i{width:13px;height:13px;stroke-width:2.2}
.tile .pin{position:absolute;top:5px;left:5px;font-size:.66rem;background:var(--klukva);padding:0 5px;border-radius:2px}
.more{display:block;text-align:center;margin:14px 0}

/* лента */
body.feedpage{background:#0d1210;color:#eef0ea}
body.feedpage .top{display:none}
.feed{height:calc(100vh - var(--tab));height:calc(100dvh - var(--tab));overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.clip{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#000}
.clip video,.clip .pst{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.clip .pst{object-fit:cover}
.clip .ov{position:absolute;left:0;right:62px;bottom:0;padding:60px 14px 14px;background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0));pointer-events:none}
.clip .ov a,.clip .ov button{pointer-events:auto}
.clip .who{display:flex;align-items:center;gap:7px;font-weight:500;text-decoration:none;margin-bottom:4px}
.ava{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.92rem;color:#fff;flex:none;border:2px solid rgba(255,255,255,.85)}
.clip .cap{margin:0;font-size:.95rem;line-height:1.35;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.clip .ht{margin-top:3px;font-size:.88rem}
.clip .ht a{color:#f3c9d2;text-decoration:none;margin-right:6px}
.clip .meta{font-size:.74rem;color:#c8cdc4;margin-top:5px}
.clip .act{position:absolute;right:6px;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:14px}
.clip .act button,.clip .act a{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;font-size:.7rem;color:#fff;text-decoration:none;text-shadow:0 1px 2px #000;min-width:48px}
.clip .act svg.i{width:30px;height:30px;stroke-width:1.7;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.clip .act .on svg.i{fill:var(--klukva);stroke:var(--klukva)}
.clip .act .save.on svg.i{fill:#e9d38a;stroke:#e9d38a}
.clip .snd{position:absolute;top:50px;right:10px;background:rgba(0,0,0,.45);border:0;border-radius:3px;color:#fff;padding:5px 8px;font-size:.75rem;display:flex;gap:5px;align-items:center;cursor:pointer}
.clip .snd svg.i{width:18px;height:18px}
.clip .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.18)}
.clip .bar i{display:block;height:100%;width:0;background:#fff}
.clip .heart{position:absolute;left:50%;top:45%;width:90px;height:90px;margin:-45px;opacity:0;pointer-events:none;color:var(--klukva)}
.clip .heart.go{animation:pop .7s ease-out}
.clip .heart svg.i{width:90px;height:90px;fill:var(--klukva);stroke:none}
@keyframes pop{0%{opacity:0;transform:scale(.6)}25%{opacity:.95;transform:scale(1.05)}100%{opacity:0;transform:scale(1.2)}}
.clip .paused{position:absolute;left:50%;top:50%;margin:-28px;width:56px;height:56px;display:none;color:#fff;opacity:.8;pointer-events:none}
.clip.pz .paused{display:block}
.clip .paused svg.i{width:56px;height:56px;fill:rgba(255,255,255,.75);stroke:none}
.ftop{position:fixed;top:0;left:0;right:0;z-index:15;display:flex;align-items:center;gap:13px;padding:10px 14px;font-weight:500;font-size:.95rem;white-space:nowrap;overflow:hidden;color:#fff;text-shadow:0 1px 2px #000;pointer-events:none}
.ftop a{pointer-events:auto;text-decoration:none;color:#d9dccf;opacity:.85}
.ftop a.on{color:#fff;opacity:1;border-bottom:2px solid #fff}
.ftop .sp{flex:1}
.ftop .lg{font-family:"Lora",serif;font-weight:600;font-size:1.05rem;color:#fff;opacity:1}
.endcard{height:100%;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;padding:30px;text-align:center;color:#c8cdc4}
.endcard a{color:#fff}

/* лист «описание» */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:40;max-height:72vh;overflow-y:auto;background:var(--card);color:var(--ink);border-radius:10px 10px 0 0;padding:8px 18px calc(var(--tab) + 16px);transform:translateY(105%);transition:transform .22s ease-out;border-top:1px solid var(--line)}
.sheet.open{transform:none}
.sheet .grip{width:42px;height:4px;background:#c9c2b1;border-radius:2px;margin:4px auto 10px}
.sheet h3{margin-top:.3em;font:600 1.1rem "Lora",serif}
.sheet .x{float:right;background:none;border:0;padding:4px;cursor:pointer}
.shade{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.35);display:none}
.shade.open{display:block}

/* страница ролика */
.rolik{display:block}
.vbox{position:relative;width:min(100%,420px,calc(78vh*9/16));aspect-ratio:9/16;margin:0 auto;background:#000;border-radius:6px;overflow:hidden}
.vbox video{width:100%;height:100%;object-fit:contain;background:#000}
.vbox .snd{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.45);border:0;border-radius:3px;color:#fff;padding:5px 8px;font-size:.75rem;display:flex;gap:5px;align-items:center;cursor:pointer}
.rbar{display:flex;align-items:center;gap:6px;margin:10px 0;flex-wrap:wrap}
.rbar button,.rbar a{display:flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:5px 12px;cursor:pointer;text-decoration:none;font-size:.88rem}
.rbar button.on{border-color:var(--klukva);color:var(--klukva)}
.rbar svg.i{width:19px;height:19px}
.rbar .sp{flex:1}
.author{display:flex;align-items:center;gap:10px;text-decoration:none;margin:12px 0}
.author b{display:block}.author small{color:var(--mute)}
.desc{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:4px 16px 10px;margin:12px 0}
.desc h2{margin-top:.6em;font-size:1.05rem}
.desc dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:.88rem;margin:8px 0}
.desc dt{color:var(--mute)}
.desc dd{margin:0}
.pn{display:flex;gap:10px;margin:18px 0}
.pn a{flex:1;border:1px solid var(--line);border-radius:4px;padding:8px 10px;text-decoration:none;font-size:.88rem;background:var(--card)}
.pn a small{display:block;color:var(--mute)}
.pn a.nx{text-align:right}

/* длинные выпуски */
.vlist{list-style:none;padding:0;margin:0}
.vlist li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.vlist .th{position:relative;display:block;aspect-ratio:16/9;background:#26312c}
.vlist .th img{width:100%;height:100%;object-fit:cover}
.vlist .th span{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.75);color:#fff;font-size:.72rem;padding:0 4px;border-radius:2px}
.vlist h3{margin:0 0 3px;font-size:.98rem}
.vlist h3 a{text-decoration:none}
.vlist p{margin:0;font-size:.85rem;color:var(--mute)}
.wide{position:relative;aspect-ratio:16/9;background:#000;margin:10px -16px}
.wide video{width:100%;height:100%;background:#000}
.qbar{display:flex;gap:10px;align-items:center;font-size:.85rem;color:var(--mute);flex-wrap:wrap}
.qbar select{font:inherit;padding:2px 4px}
.chap{list-style:none;padding:0;font-size:.92rem}
.chap li{padding:3px 0;border-bottom:1px dotted var(--line)}
.chap button{background:none;border:0;color:var(--klukva);cursor:pointer;padding:0 8px 0 0;font-variant-numeric:tabular-nums}

/* авторы, подборки */
.prof{display:flex;gap:14px;align-items:center;margin:8px 0}
.prof .ava{width:72px;height:72px;font-size:1.8rem;border:0}
.prof h1{margin:0;font-family:"Rubik",sans-serif;font-size:1.25rem}
.prof .nums{display:flex;gap:16px;font-size:.88rem;color:var(--mute);margin-top:3px}
.prof .nums b{color:var(--ink);font-weight:500}
.alist{list-style:none;padding:0}
.alist li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.alist li a{text-decoration:none}
.alist p{margin:2px 0 0;font-size:.88rem;color:var(--mute)}
.plist{display:grid;grid-template-columns:1fr;gap:16px;margin-top:10px}
.pl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;text-decoration:none}
.pl .cv{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;aspect-ratio:3/4;background:#26312c;overflow:hidden;border-radius:3px}
.pl .cv img{width:100%;height:100%;object-fit:cover}
.pl .cv img:first-child{grid-row:span 2}
.pl h3{margin:0 0 2px}
.pl p{margin:0;font-size:.86rem;color:var(--mute)}

/* поиск, архив, заметки */
.sform{display:flex;gap:6px;margin:10px 0}
.sform input{flex:1;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:#fff}
.cloud{line-height:2}
.cloud a{text-decoration:none;color:var(--klukva);margin-right:10px;white-space:nowrap}
.cloud a.s1{font-size:.85rem;color:#93576a}.cloud a.s2{font-size:1rem}.cloud a.s3{font-size:1.2rem;font-weight:500}
.years{margin:10px 0}
.years h2{margin:1em 0 .3em}
.months{display:flex;flex-wrap:wrap;gap:6px}
.months a,.months span{min-width:84px;padding:4px 8px;border:1px solid var(--line);border-radius:3px;font-size:.86rem;text-decoration:none;background:var(--card)}
.months span{color:#aaa;background:none;border-style:dashed}
.months a b{font-weight:500;color:var(--klukva);margin-left:4px}
.nlist{list-style:none;padding:0}
.nlist li{padding:10px 0;border-bottom:1px solid var(--line)}
.nlist time{font-size:.8rem;color:var(--mute);display:block}
.nlist a{font-weight:500;text-decoration:none}
.nlist p{margin:3px 0 0;font-size:.9rem;color:#4a534e}

/* форма */
form.f{display:grid;gap:4px;max-width:520px}
form.f label{font-size:.88rem;margin-top:8px}
form.f input,form.f select,form.f textarea{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:4px;background:#fff;width:100%}
form.f textarea{min-height:130px}
form.f .chk{display:flex;gap:8px;align-items:flex-start}
form.f .chk input{width:auto;margin-top:5px}
form.f button{justify-self:start;margin-top:12px}
.hp{position:absolute;left:-5000px}
table.t{border-collapse:collapse;font-size:.9rem;width:100%}
table.t td,table.t th{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:top}

/* широкий экран: колонка меню слева, лента по центру, справа описание текущего ролика */
@media (min-width:900px){
  :root{--tab:0px}
  .tabbar,.ftop{display:none}
  .shell{display:grid;grid-template-columns:230px minmax(0,1fr);max-width:1240px;margin:0 auto}
  body.feedpage .shell{grid-template-columns:230px minmax(0,1fr) 320px}
  .rail{display:block;position:sticky;top:0;height:100vh;overflow-y:auto;padding:18px 16px;border-right:1px solid var(--line)}
  body.feedpage .rail,body.feedpage .side{border-color:#26302b}
  body.feedpage .logo small{color:#8f9890}
  .rail nav{margin:20px 0;display:flex;flex-direction:column}
  .rail nav a{display:flex;align-items:center;gap:10px;padding:7px 8px;text-decoration:none;border-radius:4px;font-weight:500}
  .rail nav a:hover{background:rgba(127,127,127,.12)}
  .rail nav a.on{color:var(--klukva)}
  body.feedpage .rail nav a.on{color:#f0a3b4}
  .rail .small{font-size:.78rem;color:var(--mute);line-height:1.45}
  body.feedpage .rail .small{color:#8f9890}
  .rail .small a{color:inherit}
  .side{display:block;position:sticky;top:0;height:100vh;overflow-y:auto;padding:22px 18px;border-left:1px solid var(--line);font-size:.92rem}
  .side h2{font-size:1.05rem;margin:0 0 .4em}
  .side h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:#8f9890;margin:1.6em 0 .4em}
  .side p{margin:.4em 0}
  .side a{color:#f0c3cd}
  .side ul{padding-left:18px;margin:.3em 0}
  .top{display:none}
  .page{padding:16px 28px 40px;max-width:820px;margin:0}
  .feed{height:100vh}
  .clip{height:100vh;background:transparent}
  .clip .frame{position:absolute;top:16px;bottom:16px;left:50%;transform:translateX(-50%);aspect-ratio:9/16;max-width:calc(100% - 140px);border-radius:8px;overflow:hidden;background:#000}
  .clip .act{left:calc(50% + min(28.125vh - 9px, 50% - 70px) + 12px);right:auto;bottom:40px}
  .clip .act button,.clip .act a{color:#dfe3dc}
  .clip .ov{right:0}
  .clip .snd{top:12px}
  .side .tags a{background:#3a2a2e;color:#f0c3cd}
  .rolik{grid-template-columns:auto minmax(0,1fr)}
  .sheet{display:none}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:10px 0}
  .wide{margin:10px 0}
  .plist{grid-template-columns:1fr 1fr}
  .rolik{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:28px;align-items:start}
  .rolik .vbox{position:sticky;top:16px}
  .vlist li{grid-template-columns:220px minmax(0,1fr)}
}
@media (max-width:899px){ .clip .frame{position:absolute;inset:0} }
@media (prefers-reduced-motion:reduce){.sheet{transition:none}.clip .heart.go{animation:none}}
[hidden]{display:none!important}
@media (max-width:389px){.ftop .lg{display:none}}