/* облачный журнал, стили. правлю руками, без сборки */

@font-face{font-family:"Literata";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/literata-cyr-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Literata";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/literata-lat-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Literata";font-style:italic;font-weight:400;font-display:swap;src:url(/static/fonts/literata-cyr-400i.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Literata";font-style:italic;font-weight:400;font-display:swap;src:url(/static/fonts/literata-lat-400i.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Literata";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/literata-cyr-600.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Literata";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/literata-lat-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/plexmono-cyr-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/plexmono-lat-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

:root{
  --bg:#14181f;
  --bg2:#1b2029;
  --line:#2a303b;
  --text:#c9ced6;
  --dim:#7d8592;
  --amber:#e3a857;
  --amber-dim:#9c7744;
  color-scheme:dark;
}
html{background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:17px/1.62 "Literata",Georgia,"Times New Roman",serif;
  -webkit-text-size-adjust:100%;
}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:visited{color:#d39d55}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.mono,.meta,time{font-family:"Plex Mono",ui-monospace,Menlo,Consolas,monospace}
.meta{font-size:13.5px;color:var(--dim);letter-spacing:.01em}
.meta b{color:var(--text);font-weight:400}

/* шапка */
.top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px;padding:18px 0 14px;font-size:15px}
.top .name{color:var(--text);letter-spacing:.02em}
.top .name:hover{text-decoration:none;color:#fff}
.top nav a{color:var(--dim);margin-right:14px}
.top nav a:last-child{margin-right:0}
.top nav a.on{color:var(--amber)}
.top nav a:hover{color:var(--text)}

h1{font-weight:600;font-size:27px;line-height:1.25;margin:18px 0 6px}
h2{font-weight:600;font-size:20px;margin:34px 0 8px}
h3{font-weight:600;font-size:17px;margin:22px 0 4px}
p{margin:0 0 .85em}
.lead{max-width:720px}
.text{max-width:700px}
.small{font-size:14.5px;color:var(--dim)}
hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.crumbs{font-size:13.5px;color:var(--dim);margin-top:6px}
.crumbs a{color:var(--dim)}
.upd{font-size:13px;color:var(--dim);font-family:"Plex Mono",monospace}

/* плеер */
.player{position:relative;background:#0c0f14;margin:6px 0 8px}
.player video{display:block;width:100%;aspect-ratio:16/9;background:#0c0f14}
.pbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;margin-bottom:14px}
.q{font-family:"Plex Mono",monospace;font-size:13px;color:var(--dim)}
.q button{font:inherit;background:none;border:0;color:var(--dim);padding:0 3px;cursor:pointer}
.q button.on{color:var(--amber)}
.q button:hover{color:var(--text)}
.resume{font-size:13px;color:var(--dim);font-family:"Plex Mono",monospace}
.resume button{font:inherit;background:none;border:0;padding:0;color:var(--amber);cursor:pointer}

/* превью */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 16px;margin:12px 0 10px}
.grid .w2{grid-column:span 2}
.card a{color:var(--text)}
.card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--bg2)}
.card .t{display:block;margin-top:5px;line-height:1.35}
.card .meta{display:block;margin-top:2px}
.card a:hover .t{color:var(--amber)}
.card a:hover{text-decoration:none}

/* список роликов */
.list{list-style:none;padding:0;margin:8px 0}
.list li{display:grid;grid-template-columns:200px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0}
.list img{width:200px;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--bg2)}
.list .t{font-size:17px}
.list p{margin:3px 0 0;font-size:15px}

/* полоса лет */
.years{margin:36px 0 8px;font-family:"Plex Mono",monospace;font-size:13px}
.years table{border-collapse:collapse}
.years th{font-weight:400;text-align:left;padding:2px 12px 2px 0;color:var(--dim)}
.years td{padding:2px 1px}
.years td a,.years td span{display:block;width:30px;text-align:center;line-height:20px}
.years td span{color:#414856}
.years td a{background:#20252f;color:var(--text)}
.years td a.many{background:#3a3125;color:var(--amber)}
.years td a:hover{background:var(--amber);color:var(--bg);text-decoration:none}

/* таблицы */
table.t{border-collapse:collapse;font-size:15px;margin:10px 0 18px;width:100%;max-width:760px}
table.t th,table.t td{border-bottom:1px solid var(--line);padding:6px 10px 6px 0;text-align:left;vertical-align:top}
table.t th{font-weight:400;color:var(--dim);font-size:13.5px}
table.t td.n{font-family:"Plex Mono",monospace;font-size:13.5px;white-space:nowrap}

/* журнал */
.feed{list-style:none;padding:0;margin:10px 0}
.feed li{padding:10px 0 12px;border-top:1px solid var(--line)}
.feed li:first-child{border-top:0}
.feed time{font-size:13px;color:var(--dim);display:block}
.feed p{margin:3px 0 0;font-size:15.5px}
.entry time{color:var(--dim);font-size:13.5px}
.entry figure{margin:16px 0}
.entry figure img{max-width:100%;height:auto;display:block}
.entry figcaption{font-size:13.5px;color:var(--dim);margin-top:4px}
.prevnext{display:flex;justify-content:space-between;gap:20px;font-size:15px;margin:30px 0 0}
.note{border-left:2px solid var(--amber-dim);padding:2px 0 2px 12px;color:#aab0ba;font-size:15.5px}
blockquote{margin:12px 0;padding-left:14px;border-left:2px solid var(--line);color:#aab0ba}

/* месяцы */
.month{margin:0 0 26px}
.month h2{font-size:18px;margin:26px 0 4px}
.month.empty h2{color:var(--dim)}
.month ul{margin:4px 0;padding-left:20px}
.ylinks{font-family:"Plex Mono",monospace;font-size:14px;margin:8px 0 20px}
.ylinks a,.ylinks b{margin-right:12px}
.ylinks b{color:var(--text);font-weight:400}

/* форма */
form.f{max-width:560px}
form.f label{display:block;font-size:14.5px;color:var(--dim);margin:12px 0 3px}
form.f input[type=text],form.f input[type=email],form.f textarea{
  width:100%;box-sizing:border-box;background:var(--bg2);color:var(--text);
  border:1px solid var(--line);padding:7px 8px;font:15px/1.4 "Literata",Georgia,serif}
form.f textarea{min-height:150px;resize:vertical}
form.f input:focus,form.f textarea:focus{outline:1px solid var(--amber-dim);border-color:var(--amber-dim)}
form.f .chk{display:flex;gap:8px;align-items:flex-start;color:var(--dim);font-size:14px;margin-top:14px}
form.f .chk input{margin-top:5px}
form.f button{margin-top:16px;background:none;border:1px solid var(--amber);color:var(--amber);font:15px "Literata",serif;padding:6px 16px;cursor:pointer}
form.f button:hover{background:var(--amber);color:var(--bg)}
.err{color:#e08a6c;font-size:14px}

/* подвал */
.foot{margin:52px 0 0;padding:14px 0 26px;border-top:1px solid var(--line);font-size:13.5px;color:var(--dim)}
.foot a{color:var(--dim)}
.foot a:hover{color:var(--text)}

@media (max-width:720px){
  body{font-size:16px}
  h1{font-size:23px}
  .grid{grid-template-columns:1fr 1fr;gap:14px 10px}
  .grid .w2{grid-column:span 2}
  .list li{grid-template-columns:120px 1fr;gap:10px}
  .list img{width:120px}
  .years{overflow-x:auto}
  .top nav a{margin-right:10px}
}