:root{
  --navy:#0b1f3a; --navy-2:#123058; --gold:#b88600; --gold-soft:#f0c14b;
  --accent:#1a5fb4;
  --ink:#14181f; --muted:#5b6472; --line:#e3e8ef;
  --bg:#ffffff; --surface:#f5f7fa; --card:#ffffff;
  --shadow:0 1px 2px rgba(11,31,58,.06), 0 6px 20px rgba(11,31,58,.07);
  --shadow-lift:0 6px 14px rgba(11,31,58,.10), 0 20px 44px rgba(11,31,58,.16);
  --radius:12px;
  --serif:"Georgia","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e6edf3; --muted:#98a5b6; --line:#232b36;
    --bg:#0d1117; --surface:#141a22; --card:#161d26;
    --accent:#5a9ded; --gold:#d9a520;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
    --shadow-lift:0 6px 14px rgba(0,0,0,.45), 0 20px 44px rgba(0,0,0,.55);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
     font:17px/1.65 var(--sans); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:1180px; margin:0 auto; padding:0 22px}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 22px}

/* ------------------------------------------------------- верхняя строка */
.topbar{background:var(--bg); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; gap:26px; height:74px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; white-space:nowrap}
/* Знак берём тем же файлом, что и фавикон: рисовать его второй раз в CSS
   означало бы два источника правды и неизбежное расхождение. */
.brand-mark{width:38px; height:38px; flex:0 0 auto; border-radius:50%; display:block}
.brand-text{font:400 26px/1 var(--serif); color:var(--ink); letter-spacing:.2px}
.brand-text b{font-weight:700}

.ticker{display:flex; gap:22px; overflow:hidden; flex:1; min-width:0}
.ticker div{white-space:nowrap; font-size:13.5px; line-height:1.3; color:var(--muted)}
.ticker b{display:block; font-size:16px; color:var(--ink); font-weight:600}
.top-actions{margin-left:auto; display:flex; gap:10px}
.chip{
  display:inline-flex; align-items:center; padding:9px 17px; border-radius:4px;
  font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap;
  background:var(--accent); color:#fff; transition:opacity .18s, transform .18s;
}
.chip.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.chip:hover{opacity:.88; transform:translateY(-1px)}

/* -------------------------------------------------------------- меню */
/* Меню закреплено, шапка с показателями уезжает: навигация всегда под рукой,
   но не съедает пол-экрана на телефоне. */
.mainnav{
  position:sticky; top:0; z-index:60;
  background:var(--bg); border-bottom:3px solid var(--accent);
  box-shadow:0 4px 14px rgba(11,31,58,.06);
}
.mainnav .wrap{display:flex; gap:34px; overflow-x:auto; scrollbar-width:none}
.mainnav .wrap::-webkit-scrollbar{display:none}
.mainnav a{
  padding:15px 0; text-decoration:none; font-size:16.5px; color:var(--ink);
  white-space:nowrap; position:relative; transition:color .18s;
}
.mainnav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:3px;
  background:var(--gold); transition:right .25s ease;
}
.mainnav a:hover{color:var(--accent)}
.mainnav a:hover::after,.mainnav a.on::after{right:0}

/* ------------------------------------------------------------ раскладка */
.layout{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:34px; padding:28px 0 10px}
.sidebar{display:flex; flex-direction:column; gap:26px; min-width:0}

/* --------------------------------------------------------------- герой */
.lead-story{
  position:relative; display:block; overflow:hidden; border-radius:var(--radius);
  text-decoration:none; color:#fff; box-shadow:var(--shadow); background:var(--navy);
  transition:box-shadow .3s ease;
}
.lead-story .shot{aspect-ratio:16/9; overflow:hidden}
.lead-story img{width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.lead-story::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,18,34,.05) 38%, rgba(7,18,34,.78) 74%, rgba(7,18,34,.95) 100%);
}
.lead-body{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:30px 34px}
.badge{
  display:inline-block; background:var(--accent); color:#fff; font-size:12.5px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:3px; margin-bottom:14px;
}
.lead-story h2{font:700 clamp(24px,3.3vw,38px)/1.18 var(--serif); margin:0 0 12px; max-width:22ch}
.lead-story p{margin:0; font-size:16.5px; line-height:1.55; color:#d6e1ee; max-width:62ch}
.lead-story:hover img{transform:scale(1.05)}
.lead-story:hover{box-shadow:var(--shadow-lift)}

/* --------------------------------------------- ротация главного баннера */
.slider{position:relative}
/* все слайды в одной ячейке грида: высота по самому высокому, без скачков */
.slides{display:grid}
.slides > .lead-story{grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .55s ease}
.slides > .lead-story.is-on{opacity:1; visibility:visible}
.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(9,22,40,.55); color:#fff; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s, background .2s;
}
.slider:hover .slider-nav,.slider-nav:focus-visible{opacity:1}
.slider-nav:hover{background:var(--accent)}
.slider-nav.prev{left:14px}
.slider-nav.next{right:14px}
.slider-dots{position:absolute; z-index:4; right:22px; bottom:18px; display:flex; gap:8px}
.slider-dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.45); transition:background .2s, transform .2s;
}
.slider-dots button.on{background:var(--gold-soft); transform:scale(1.35)}
@media (max-width:640px){
  .slider-nav{display:none}
  .slider-dots{right:14px; bottom:12px}
}

/* ------------------------------------------------------- сетка карточек */
.section-title{
  display:flex; align-items:center; gap:14px; margin:38px 0 22px;
  font:700 22px/1.2 var(--sans); color:var(--ink);
}
.section-title::after{content:""; flex:1; height:1px; background:var(--line)}
.section-title a{margin-left:auto; font-size:15px; font-weight:600; color:var(--accent);
  text-decoration:none; transition:transform .2s}
.section-title a:hover{transform:translateX(3px)}

.grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}
.card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--card); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.card-top{display:flex; gap:10px; padding:14px 16px 10px; font-size:13px; color:var(--muted)}
.card-top .sec{color:var(--accent); font-weight:600}
.thumb{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--surface)}
.thumb img{width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card-body{padding:16px 18px 20px; display:flex; flex-direction:column; flex:1}
.card h3{font:700 18.5px/1.35 var(--serif); margin:0 0 9px}
.card p{margin:0; font-size:15.5px; line-height:1.55; color:var(--muted)}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift)}
.card:hover .thumb img{transform:scale(1.07)}
.card:hover h3{color:var(--accent)}

/* ------------------------------------------------------- правая колонка */
.widget{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.widget-head{
  background:var(--surface); border-bottom:1px solid var(--line); padding:12px 18px;
  font-size:15px; font-weight:700; letter-spacing:.02em;
}
.widget-body{padding:16px 18px}
.searchbox{display:flex; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.searchbox input{
  flex:1; min-width:0; border:0; padding:12px 14px; font:16px var(--sans);
  background:var(--bg); color:var(--ink);
}
.searchbox input:focus{outline:none}
.searchbox button{border:0; background:var(--accent); color:#fff; padding:0 18px; cursor:pointer; font-size:16px}
#search-results{margin-top:12px}
#search-results a{
  display:block; padding:9px 0; border-bottom:1px solid var(--line);
  text-decoration:none; font-size:15.5px; line-height:1.45;
}
#search-results a:hover{color:var(--accent)}
#search-results .none{color:var(--muted); font-size:15px; padding:8px 0}

.feed{margin:0; padding:0; list-style:none}
.feed li{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line)}
.feed li:last-child{border-bottom:0; padding-bottom:0}
.feed time{flex:0 0 44px; font-size:14px; font-weight:700; color:var(--accent); padding-top:1px}
.feed a{text-decoration:none; font-size:15.5px; line-height:1.45; transition:color .18s}
.feed a:hover{color:var(--accent)}
.feed .lead-text{display:block; color:var(--muted); font-size:14px; margin-top:4px; line-height:1.45}

/* --------------------------------------------------------------- статья */
.post-hero{background:var(--surface); border-bottom:1px solid var(--line); padding:40px 0 0}
.post-hero .kicker{font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); font-weight:700; text-decoration:none}
.post-hero h1{font:700 clamp(28px,4.1vw,45px)/1.16 var(--serif); margin:13px 0 14px; letter-spacing:-.3px}
.post-hero .meta{color:var(--muted); font-size:15px; margin:0 0 30px}
.post-cover{margin:0; border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; box-shadow:var(--shadow)}
/* height:auto обязателен: атрибут height браузер применяет как
   презентационную подсказку, и тогда aspect-ratio молча игнорируется —
   кадр выходит квадратным. Соотношение берём родное, обложки и так 16:9. */
.post-cover img{width:100%; height:auto; display:block}
.post-body{padding:42px 0 10px; font-size:18.5px; line-height:1.72}
.post-body h2{font:700 clamp(22px,2.6vw,29px)/1.28 var(--serif); margin:42px 0 14px}
.post-body h3{font:700 20px/1.35 var(--sans); margin:30px 0 10px; color:var(--gold)}
.post-body h4{font:600 18px/1.4 var(--sans); margin:24px 0 8px}
.post-body p{margin:0 0 20px}
.post-body ul,.post-body ol{margin:0 0 22px; padding-left:26px}
.post-body li{margin:0 0 10px}
.post-body blockquote{margin:0 0 24px; padding:16px 22px; border-left:4px solid var(--gold);
  background:var(--surface); border-radius:0 10px 10px 0}
.post-body blockquote p{margin:0}
.post-body figure{margin:34px 0}
/* height:auto обязателен — иначе браузер берёт высоту из атрибута и кадр
   растягивается. Соотношение здесь не задаём: фото в тексте 3:2, и обрезать
   их до 16:9 нельзя, теряется смысл кадра. */
.post-body figure img{width:100%; height:auto; border-radius:12px; box-shadow:var(--shadow)}
.post-body figcaption{margin-top:10px; font-size:14.5px; color:var(--muted); line-height:1.5}
.post-body a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.sources{font-size:14.5px; color:var(--muted); line-height:1.6;
  border-top:1px solid var(--line); padding-top:18px; margin-top:40px}

.page-body{padding:46px 0}
.page-body h1{font:700 clamp(28px,3.6vw,40px)/1.18 var(--serif); margin:0 0 20px}
.page-body h2{font:700 24px/1.28 var(--serif); margin:34px 0 12px}
.page-body p{margin:0 0 17px}
.page-body ul{margin:0 0 19px; padding-left:26px}
.page-body li{margin:0 0 9px}

/* -------------------------------------------------------------- подписка */
.subscribe{padding:34px 0 0}
.sub-card{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:var(--radius); background:var(--card); padding:22px 26px;
}
.sub-card b{font:700 19px/1.3 var(--serif); display:block; margin-bottom:5px}
.sub-card p{margin:0; color:var(--muted); font-size:15.5px; line-height:1.5}
.sub-links{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
.sub-btn{
  display:inline-flex; align-items:center; gap:9px; padding:10px 18px;
  border:1px solid var(--line); border-radius:999px; text-decoration:none;
  font-size:15.5px; font-weight:600; background:var(--bg);
  transition:border-color .18s, transform .18s, color .18s;
}
.sub-btn:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px)}
.sub-icon{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 6px; border-radius:50px;
  background:var(--accent); color:#fff; font-size:12px; font-weight:700;
}
@media (max-width:640px){
  .sub-card{padding:18px 20px; gap:16px}
  .sub-links{margin-left:0}
  .sub-btn{flex:1 1 auto; justify-content:center}
}

/* ---------------------------------------------------- комментарии и формы */
.band{padding:44px 0}
.band-soft{background:var(--surface); border-top:1px solid var(--line)}
.feedback{border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  padding:18px 22px; margin-bottom:38px}
.link-btn{background:none; border:0; padding:0; cursor:pointer;
  font:600 16px/1.5 var(--sans); color:var(--accent);
  text-decoration:underline; text-underline-offset:3px}
.link-btn:hover{opacity:.8}
.comments-title{font:700 clamp(22px,2.6vw,28px)/1.25 var(--serif); margin:0 0 20px}
.comment-list{margin:0 0 30px}
.comment{background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:15px 18px; margin-bottom:13px}
.comment-head{display:flex; gap:12px; align-items:baseline; margin-bottom:7px}
.comment-head b{font-size:15.5px}
.comment-head span{font-size:13px; color:var(--muted)}
.comment p{margin:0; font-size:16px; line-height:1.6; white-space:pre-wrap}
.comment-empty{color:var(--muted); font-size:16px; margin:0 0 8px}
.form{display:flex; flex-direction:column; gap:15px; margin:0}
.field{display:flex; flex-direction:column; gap:6px}
.field span{font-size:14px; color:var(--muted); font-weight:600}
.field input,.field textarea,.field select{
  width:100%; padding:11px 13px; font:16px/1.5 var(--sans); color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:8px; resize:vertical;
  transition:border-color .18s, box-shadow .18s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(26,95,180,.16);
}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border:0;
  border-radius:6px; font:600 16px var(--sans); cursor:pointer; text-decoration:none;
  transition:transform .18s, opacity .18s}
.btn-primary{background:var(--accent); color:#fff}
.btn:hover{transform:translateY(-2px); opacity:.92}
.form .btn{align-self:flex-start}
.form-note{margin:0; font-size:14.5px; min-height:1px}
.form-note.ok{color:#1f7a3f}
.form-note.err{color:#b3261e}
.form-legal{margin:0; font-size:13px; line-height:1.55; color:var(--muted)}
.hp{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important}

/* ------------------------------------------------------- каталог форматов */
.page-lead{font-size:19px; line-height:1.6; color:var(--muted); margin:0 0 26px}
.fmt-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  margin:0 0 34px}
.fmt{border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s}
.fmt:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift)}
/* превью формата: рамка в пропорциях реального места, а не абстрактный квадрат */
.fmt-demo{
  margin:18px auto 4px; max-width:calc(100% - 36px);
  border:2px dashed var(--accent); border-radius:8px;
  background:repeating-linear-gradient(45deg, transparent, transparent 10px,
              rgba(26,95,180,.05) 10px, rgba(26,95,180,.05) 20px);
  display:flex; align-items:center; justify-content:center;
}
.fmt-demo b{font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--accent); opacity:.6}
.fmt-demo.ad-billboard,.fmt-demo.ad-leaderboard{width:100%; min-height:64px}
.fmt-demo.ad-rect{width:150px; min-height:125px}
.fmt-demo.ad-halfpage{width:120px; min-height:240px}
.fmt-demo.ad-video{width:100%; aspect-ratio:16/9; min-height:0}
.fmt-body{padding:14px 18px 20px}
.fmt-body h3{font:700 18px/1.3 var(--serif); margin:0 0 7px}
.fmt-body p{margin:0 0 12px; font-size:15px; color:var(--muted); line-height:1.5}
.fmt-meta{display:flex; gap:8px; flex-wrap:wrap}
.fmt-meta span{font-size:12.5px; padding:4px 10px; border-radius:20px;
  background:var(--surface); border:1px solid var(--line); color:var(--muted)}

/* --------------------------------------------------------------- реклама */
.ad{margin:0 auto; text-align:center}
.ad:empty{display:none}
.ad-wrap{padding:26px 0; display:flex; justify-content:center}
.sidebar .ad-wrap{padding:0}
.ad-label{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px; opacity:.75}
.ad-billboard{width:970px; max-width:100%; min-height:250px}
.ad-leaderboard{width:728px; max-width:100%; min-height:90px}
.ad-rect{width:300px; max-width:100%; min-height:250px}
.ad-halfpage{width:300px; max-width:100%; min-height:600px}
.ad-video{width:100%; max-width:640px; aspect-ratio:16/9}
@media (max-width:760px){
  .ad-billboard{width:320px; min-height:100px}
  .ad-leaderboard{width:320px; min-height:50px}
}
.ad-demo{
  border:2px dashed var(--accent); border-radius:10px;
  background:repeating-linear-gradient(45deg, transparent, transparent 10px,
              rgba(26,95,180,.05) 10px, rgba(26,95,180,.05) 20px);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:6px; line-height:1.4; text-align:center;
}
.ad-demo b{
  font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); opacity:.55;
}
.ad-demo span{font-size:13px; color:var(--muted); opacity:.7}

.post-layout{display:block}
.post-rail{display:none}
@media (min-width:1280px){
  .post-layout{display:grid; grid-template-columns:minmax(0,760px) 300px;
    gap:44px; justify-content:center; align-items:start}
  .post-layout .wrap-narrow{padding:0; max-width:none}
  .post-rail{display:block; position:sticky; top:24px; padding-top:42px}
}

/* --------------------------------------------------------------- подвал */
footer.site{margin-top:44px; background:var(--navy); color:#9fb1c8}
footer.site .wrap{padding:34px 22px; font-size:14.5px; line-height:1.65}
footer.site a{color:#c9d6e6}
.foot-top{display:flex; gap:26px; flex-wrap:wrap; align-items:center; margin-bottom:18px}
.foot-top .brand-text{color:#fff}
.foot-nav{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}

/* --------------------------------------------------------- кнопка наверх */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:46px; height:46px; border:0; border-radius:50%; cursor:pointer;
  background:var(--accent); color:#fff; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(11,31,58,.28);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s, transform .25s, visibility .25s, background .2s;
}
.to-top.on{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--navy)}
@media (max-width:640px){.to-top{right:14px; bottom:14px; width:42px; height:42px}}

/* ------------------------------------------------------------- появление */
.reveal{opacity:0; transform:translateY(16px)}
.reveal.in{opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1)}

@media (max-width:1000px){
  .layout{grid-template-columns:1fr; gap:30px}
  .sidebar{order:2}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .topbar .wrap{height:auto; padding-top:14px; padding-bottom:14px; flex-wrap:wrap; gap:14px}
  .ticker{order:3; flex-basis:100%; overflow-x:auto}
  .top-actions{margin-left:0}
  .brand-text{font-size:23px}
  .grid{grid-template-columns:1fr; gap:20px}
  .post-body{font-size:17.5px}
  /* На узком экране подпись поверх фото съедает саму фотографию:
     заголовок занимал больше половины кадра. Выносим текст под снимок. */
  .lead-story{background:var(--navy)}
  .lead-story::after{display:none}
  .lead-body{position:static; padding:16px 18px 20px}
  .lead-story h2{font-size:21px; max-width:none}
  .lead-story p{font-size:15.5px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}