:root { --bg:#0b0b12; --fg:#f4f6fb; --muted:#9aa3b2; --brand:#9b8cff; --card:#151526; }
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Inter',sans-serif;background:var(--bg);color:var(--fg);}
a{color:var(--fg);text-decoration:none} .brand{font-weight:800;letter-spacing:.5px}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:rgba(255,255,255,.02);backdrop-filter:saturate(1.2) blur(6px);position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(255,255,255,.06)}
.nav a{margin-left:16px;color:var(--muted)} .nav a.active{color:var(--brand)}
.container{max-width:1024px;margin:0 auto;padding:24px}
.muted{color:var(--muted)}
/* общая сетка (2 колонки) */
.posts-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
@media (max-width: 900px){
  .posts-grid{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .page-blog .posts-grid{ grid-template-columns: 1fr; }
}

/* только для страницы блога — 3 колонки на десктопе */
.page-blog .posts-grid{
  grid-template-columns:repeat(3,1fr);
}
/* Адаптивка карточек на мобильных устройствах */
@media (max-width: 900px){
  .page-blog .posts-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .post-card .card-cover{ aspect-ratio: 2 / 1; } /* было 16/9; на мобиле чуть короче по высоте */
}
.btn{background:var(--brand);color:#0b0b12;border:none;padding:8px 12px;border-radius:10px;cursor:pointer}
.post-view{background:var(--card);border-radius:16px;padding:20px;border:1px solid rgba(255,255,255,.06)}
.post-view .cover{width:100%;border-radius:12px;margin:12px 0}
.hidden{ display:none !important; }

/* ===== Lightbox (одна финальная версия) ===== */
.lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.8);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:24px;

  opacity:0; transform:scale(.985);
  transition:opacity .18s ease, transform .18s ease;
}
.lightbox.show{ opacity:1; transform:scale(1); }
.lightbox.hidden{ display:none !important; }
.lightbox img{ max-width:95vw; max-height:85vh; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.lb-title{ text-align:center; color:var(--muted); margin-top:14px; line-height:1.35; }
.lb-close{
  position:fixed; top:16px; right:16px; z-index:10000;
  background:transparent; border:1px solid rgba(255,255,255,.5);
  color:#fff; font-size:22px; width:40px; height:40px; border-radius:20px; cursor:pointer;
}

/* ===== Галерея: Masonry + «широкий» первый ===== */
.gallery-grid{ column-count:3; column-gap:12px; }
@media (max-width:900px){ .gallery-grid{ column-count:2; } }
@media (max-width:600px){ .gallery-grid{ column-count:1; } }
.gallery-grid .art{ break-inside:avoid; display:inline-block; width:100%; margin:0 0 12px; cursor:pointer; }
.gallery-grid .art img{ width:100%; height:auto; object-fit:contain; border-radius:12px; }
.art figcaption{ display:none; }

/* «Широкий» элемент на всю ширину колонок */
.gallery-grid .art.art-wide{ column-span:all; display:block; width:100%; margin:0 0 16px; }
/* Если когда-нибудь вернём grid: */
.gallery-grid.is-grid .art.art-wide{ grid-column:1 / -1; }

/* Live blog */
.live-blog-footer{margin-top:12px}

/* === ABOUT: текст слева, картинка справа, выровненные высоты === */
#about .about-preview{
  display:flex; align-items:stretch; gap:24px;
}
#about .about-text{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
}
#about .about-text .cta-row{ margin-top:auto; }
#about .about-visual{ flex:0 0 420px; display:flex; align-items:stretch; }
#about .about-visual img{ width:100%; height:auto; display:block; border-radius:14px; }
@media (max-width:900px){
  #about .about-preview{ flex-direction:column; align-items:flex-start; }
  #about .about-visual{ flex:0 0 auto; width:100%; max-width:520px; }
  #about .about-text .cta-row{ margin-top:12px; }
}

/* ===== Формы / чекбоксы / селекты (по 1 разу) ===== */
.form .agree{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; border:1px solid rgba(255,255,255,.14);
  border-radius:12px; background:rgba(255,255,255,.05); margin-top:8px;
}
.form .agree input[type=checkbox]{
  appearance:none; width:22px; height:22px; border-radius:6px;
  border:2px solid rgba(255,255,255,.7); background:transparent;
  cursor:pointer; margin-top:2px; position:relative; flex:0 0 22px;
}
.form .agree input[type=checkbox]:checked{ background:#2d9da6; border-color:#2d9da6; }
.form .agree input[type=checkbox]:checked::after{
  content:""; position:absolute; width:8px; height:14px;
  border-right:3px solid #082129; border-bottom:3px solid #082129;
  left:50%; top:50%; transform:translate(-50%,-60%) rotate(45deg); box-sizing:border-box;
}
.form .agree label{ margin:0; color:var(--ink); }

.form .error { border-color:#ff6b6b !important; }
.form .agree.error { border-color:#ff6b6b !important; background:rgba(255,77,77,.06); }
.form small.error { display:block; color:#ff6b6b; margin-top:6px; }
@keyframes field-flash{0%{box-shadow:0 0 0 0 rgba(255,77,77,0)}30%{box-shadow:0 0 0 4px rgba(255,77,77,.25)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
.flash{ animation:field-flash .6s ease-out 1; }

select{ background:rgba(255,255,255,.05); color:var(--ink); }
select:invalid{ color:var(--muted); }
.form.was-validated select:invalid{ border-color:#ff6b6b !important; }
select option{ background:#0f1e2e; color:#f7fafc; }

.form button[type=submit]{border:0;outline:0;box-shadow:none}
.form .agree label{margin:0}

button[disabled]{ opacity:.6; cursor:not-allowed; }

/* ===== Burger (оставляем единожды в keto.css) ===== */
.burger{ display:none; background:transparent; border:1px solid rgba(255,255,255,.25);
  color:var(--ink); width:42px; height:42px; border-radius:10px; cursor:pointer; }
@media (max-width:900px){
  .nav{ height:auto; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }
  #siteNav{
    display:none; position:fixed; right:14px; top:68px; z-index:1001;
    background:rgba(15,30,46,.96); border:1px solid rgba(255,255,255,.08);
    border-radius:14px; padding:10px 14px; width:min(88vw,420px);
    box-shadow:var(--shadow); flex-direction:column; gap:8px;
    max-height:calc(100vh - 96px); overflow:auto;
  }
  #siteNav a{ display:block; padding:10px 6px; margin:0; border-top:1px solid rgba(255,255,255,.06); }
  #siteNav a:first-child{ border-top:0; }
  #siteNav a.cta{ align-self:flex-start; }
  header .scrim{
    position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px);
    z-index:1000;
  }
  header.open #siteNav{ display:flex; }
  header.open .scrim{ display:block; }
}
body.menu-open{ overflow:hidden; }

/* Автор поста (как в live-blog) */
.author{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.author .avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block;border:1px solid rgba(255,255,255,.12)}
.author .avatar.placeholder{background:rgba(255,255,255,.08)}
.author .by{display:flex;flex-direction:column;line-height:1.15}
.author .by .date{color:var(--muted);font-size:.9rem}
.author.large .avatar{width:42px;height:42px}
.author.large{margin-bottom:12px}

.post-meta h3{margin:6px 0 6px}

/* =========================
   ЛИПКИЙ ФУТЕР, НО БЕЗ ВЛИЯНИЯ НА КОНТЕНТ
   ========================= */

/* На странице /blog (когда список карточек), футер прибит книзу */
body.page.page-blog:not(.post-open){
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto; /* header / content / footer */
}

/* Когда открыт пост — убираем любую «сетку» у body, чтобы не было побочных эффектов */
body.page.page-blog.post-open{
  display: block;
  min-height: 0;
}

/* Контейнер блога всегда на всю доступную ширину */
.page .container{
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 24px;
}

/* =========================
   СЕТКА КАРТОЧЕК / МОБИЛЬНАЯ АДАПТАЦИЯ
   ========================= */

/* Карточка — колонка: «Читать» прижата к низу */
.post-card{
  background:var(--card);
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
}

/* Превью карточки — честное 16:9 */
.post-card > img{
  width:100%;
  height:auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display:block;
}

/* Мета и кнопка */
.post-card .post-meta{
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex: 1 1 auto;
}
.post-card .post-meta p{ margin:0; }
.post-card .post-meta .btn{
  margin-top:auto;            /* ← позволяет кнопке уехать к низу карточки */
  align-self:flex-start;
}

/* =========================
   МЕДИА В ОТКРЫТОМ ПОСТЕ
   ========================= */

/* Секция медиа — блочный поток (без грида), чтобы не было коллизий с абсолютно позиционированными детьми */
.post-view .media{
  display:block;
}
.post-view .media figure{
  display:block;
  width:100%;
  max-width:100%;
  margin:0 0 14px 0;
}

/* Изображения как прежде */
.post-view .media img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* Единая 16:9-рамка для превью и плееров */
.video-frame,
.vbox{
  position:relative;
  width:100%;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
.video-frame::before,
.vbox::before{
  content:"";
  display:block;
  padding-top:56.25%; /* 16:9 */
}
.video-frame > iframe,
.video-frame > video,
.vbox > iframe,
.vbox > video,
.vbox > img,
.vbox > .embed-thumb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
  border-radius:12px;
  object-fit:cover;
}

/* Плейсхолдер на случай отсутствия постера — не тонкий */
.vbox > .embed-thumb{ background:rgba(255,255,255,.05); }

/* Плей-кнопка на превью локального видео */
.vbox .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border-radius:50%;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.vbox .play::before{
  content:""; border-left:18px solid #fff;
  border-top:12px solid transparent; border-bottom:12px solid transparent;
  margin-left:4px;
}
.vbox:hover .play{ background:rgba(0,0,0,.6); }

/* =========================
   ПРОЧЕЕ
   ========================= */

/* "Скрыть" всегда бьёт любые дисплеи */
.hidden{ display:none !important; }

/* === Select (аккуратная стрелка, без ломания полей) === */
/* Ничего не меняем в размерах: берем только стрелку и её цвет */
.form select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* стрелка (пассивная) — однострочный, URL-encoded SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23b9c7d6' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;  /* совмещаем с текущим padding-right:14px */
  background-size: 14px 14px;
}

/* на hover/focus — стрелка ярче; рамки/паддинги не трогаем */
.form select:hover,
.form select:focus{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23f4f6fb' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  outline: none;
}

/* Windows (старые движки): скрыть системную стрелку */
.form select::-ms-expand{ display:none; }

/* Карточка: обложка с жёстким 16:9, кроп по краям */
.post-card .card-cover{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

/* Заполняем всю обложку независимо от тега (picture/img/div) */
.post-card .card-cover picture,
.post-card .card-cover img,
.post-card .card-cover .embed-thumb{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* высота фикс-хедера: 72–96px */
#apply { scroll-margin-top: 92px; }