/* Об авторе */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.about-visual{position:relative}
.about-visual .frame{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line2);box-shadow:var(--shadow);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.about-visual .frame img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .75s cubic-bezier(.16,1,.3,1)}
.about-visual .frame::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(8,9,12,.85));
  transition:opacity .35s ease;
}
.about-badge{
  transform:translateY(0);
  transition:transform .25s ease, box-shadow .25s ease;
  position:absolute;right:-14px;bottom:-14px;z-index:3;
  background:var(--red);color:#fff;border-radius:14px;padding:14px 18px;
  font:700 13px/1.3 var(--head);letter-spacing:1.5px;text-transform:uppercase;
  box-shadow:0 16px 34px rgba(230,51,41,.4);max-width:190px;
}
.about-txt p{color:#b9c1d0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.stat{
  border:1px solid var(--line);border-radius:14px;padding:18px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.stat b{display:block;font:700 34px/1 var(--head);color:var(--yellow);transition:transform .22s ease}
.stat span{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mut)}

/* Что это такое */
.what{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.what-img{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line2);
  box-shadow:var(--shadow);position:relative;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.what-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .75s cubic-bezier(.16,1,.3,1)}
.what-img::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(230,51,41,.12),transparent 55%,rgba(31,182,201,.14));
}
.what-txt p{color:#b9c1d0}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* Мысли */
.th-grid{
  columns:3;column-gap:20px;margin-top:40px;
}
.th{
  break-inside:avoid;margin-bottom:20px;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  padding:22px 22px 16px;transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;position:relative;
  will-change:transform;
}
.th:hover{border-color:var(--line2);transform:translateY(-4px) scale(1.01);box-shadow:0 18px 36px rgba(0,0,0,.24)}
.th.pin{border-color:rgba(245,197,24,.4);background:linear-gradient(180deg,#1c1a12,#12141a)}
.th-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.th-mood{
  font:700 10.5px/1 var(--head);letter-spacing:2px;text-transform:uppercase;
  color:var(--red);border:1px solid rgba(230,51,41,.35);border-radius:999px;padding:5px 10px;
}
.th-pin{font:700 10.5px/1 var(--head);letter-spacing:2px;text-transform:uppercase;color:var(--yellow)}
.th-date{margin-left:auto;font-size:12px;color:#69707f}
.th-body{font-size:16.5px;color:#dfe4ee;margin:0 0 16px;line-height:1.6}
.th-foot{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.vote{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(255,255,255,.035);border:1px solid var(--line2);
  border-radius:999px;padding:8px 14px;color:var(--mut);
  font:700 13px/1 var(--font);transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.vote svg{width:16px;height:16px;fill:currentColor}
.vote:hover{color:var(--tx);background:rgba(255,255,255,.07)}
.vote.up.on{color:#fff;background:rgba(37,196,106,.18);border-color:rgba(37,196,106,.55)}
.vote.down.on{color:#fff;background:rgba(230,51,41,.18);border-color:rgba(230,51,41,.55)}
.vote.bump{animation:bump .32s}
@keyframes bump{40%{transform:scale(1.16)}100%{transform:scale(1)}}
.th-ratio{margin-left:auto;font-size:12px;color:#69707f}

/* Видео */
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.vid{
  position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--panel);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;display:block;
  will-change:transform;
}
.vid:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:var(--shadow)}
.vid-ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a0c10}
.vid-ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .35s ease;opacity:.86}
.vid:hover .vid-ph img{transform:scale(1.07);opacity:1}
.vid-ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,12,.15),rgba(8,9,12,.75))}
.play{
  position:absolute;inset:0;margin:auto;width:62px;height:62px;z-index:2;
  border-radius:50%;background:rgba(230,51,41,.92);
  display:grid;place-items:center;box-shadow:0 12px 30px rgba(230,51,41,.45);
  transition:.3s;
}
.play::before{content:'';border-left:17px solid #fff;border-top:11px solid transparent;
  border-bottom:11px solid transparent;margin-left:5px}
.vid:hover .play{transform:scale(1.12)}
.vid-dur{
  position:absolute;right:12px;bottom:12px;z-index:2;
  background:rgba(0,0,0,.7);border:1px solid var(--line2);border-radius:8px;
  padding:3px 8px;font:700 12px/1.4 var(--head);letter-spacing:1px;
}
.vid-body{padding:16px 18px 20px}
.vid-body h3{font-size:18px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.vid-body p{margin:0;font-size:13.5px;color:var(--mut)}
.vid-vk{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font:700 11px/1 var(--head);letter-spacing:2px;text-transform:uppercase;color:var(--teal);
}

/* Как это сделано */
.bs-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;
}
.bs{
  position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3;background:#0a0c10;cursor:zoom-in;
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  will-change:transform;
}
.bs img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1), filter .35s ease;filter:grayscale(.25)}
.bs:hover img{transform:scale(1.06);filter:none}
.bs figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(8,9,12,.92));
  font-size:13px;color:#dbe1ec;
}
.bs:nth-child(1),.bs:nth-child(6){grid-column:span 1}

/* footer */
.foot{border-top:1px solid var(--line);background:#0a0c10;padding:56px 0 40px}
.foot-in{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.foot-note{color:var(--mut);font-size:14px}
.foot-links{margin-left:auto;display:flex;gap:18px}
.foot-links a{font:700 12px/1 var(--head);letter-spacing:2px;text-transform:uppercase;color:var(--mut)}
.foot-links a:hover{color:var(--red)}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(4,5,8,.94);backdrop-filter:blur(8px);padding:5vh 5vw;
  animation:lbIn .18s ease;
}
.lb.on{display:grid}
.lb img{max-width:100%;max-height:82vh;border-radius:14px;border:1px solid var(--line2)}
.lb p{margin-top:14px;text-align:center;color:var(--mut);font-size:14px}
.lb-x{position:absolute;top:22px;right:26px;background:none;border:1px solid var(--line2);
  color:#fff;border-radius:10px;width:42px;height:42px;font-size:20px;cursor:pointer}

@media (max-width:1020px){
  .about,.what{grid-template-columns:1fr;gap:34px}
  .th-grid{columns:2}
  .vid-grid,.bs-grid{grid-template-columns:repeat(2,1fr)}
}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
@media (max-width:620px){
  .th-grid{columns:1}
  .vid-grid,.bs-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}