/* ──────────────────────────────────────────────────────────────────────
   GameDev Reports — публичный сайт.

   Цвета — те же, что в кабинете, один в один (блоки :root ниже не
   трогали, кроме прозрачности шапки). По умолчанию светлая тема,
   тёмная — по кнопке. Типографика своя (Schibsted Grotesk), тонкие
   линии-направляющие по краям колонки, логотипы и карточки в сетке
   с общими границами.
   ────────────────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#08080c; --surface:#101017; --surface-2:#16161f;
  --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.055);
  --violet:#8b5cf6; --violet-bright:#a78bfa; --violet-deep:#6d28d9;
  --teal:#2dd4bf;
  --text:#f4f4f6; --muted:#9a9aa6; --muted-dim:#6e6e7a;
  --glow-1:rgba(139,92,246,.20); --glow-2:rgba(45,212,191,.09);
  --card-from:rgba(255,255,255,.035); --card-to:rgba(255,255,255,.012);
  --card-shadow:0 30px 70px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
  --nav-bg:rgba(8,8,12,.78);
}

/* Светлая тема. Фиолетовый на белом берём насыщенный: --violet-bright
   рисует текст и подписи, и в исходном (светлом) виде он на белом нечитаем. */
html[data-theme="light"]{
  --bg:#ffffff; --surface:#f6f6f7; --surface-2:#fafafb;
  --line:rgba(16,16,24,.13); --line-soft:rgba(16,16,24,.075);
  --violet:#7c3aed; --violet-bright:#6d28d9; --violet-deep:#5b21b6;
  --teal:#0f766e;
  --text:#15151a; --muted:#5c5c66; --muted-dim:#8a8a94;
  --glow-1:rgba(139,92,246,.10); --glow-2:rgba(45,212,191,.06);
  --card-from:#ffffff; --card-to:#ffffff;
  --card-shadow:0 24px 60px -28px rgba(16,16,24,.28), 0 1px 2px rgba(16,16,24,.05);
  --nav-bg:rgba(255,255,255,.82);
}

/* ── шрифты ───────────────────────────────────────────────────────────
   Schibsted Grotesk — заголовки и текст, Fragment Mono — даты и подписи.
   Лежат в fonts/ — свои копии, а не ссылка на Google: не зависим от
   чужого сервера, не отдаём Google адреса посетителей (для Европы это
   вопрос GDPR) и не ждём лишнего соединения при загрузке.
   Оба под SIL Open Font License — бесплатно и для коммерции, см.
   fonts/README.md. */
@font-face{font-family:"Schibsted Grotesk"; src:url(fonts/schibsted-grotesk.woff2) format("woff2"); font-weight:400 900; font-display:swap}
@font-face{font-family:"Fragment Mono"; src:url(fonts/fragment-mono.woff2) format("woff2"); font-weight:400; font-display:swap}

/* --d-* — крупные заголовки, --t — текст, --m — моноширинные подписи.
   Вынесены в переменные, чтобы шрифт менялся в одном месте. */
:root{
  --d:"Schibsted Grotesk"; --t:"Schibsted Grotesk"; --m:"Fragment Mono";
  --d-weight:760; --d-stretch:100%; --d-track:-.045em; --m-stretch:100%;
}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text); min-height:100vh;
  font-family:var(--t),-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative; overflow-x:hidden;
}
/* Мягкое свечение сверху — фирменный приём кабинета, только тише:
   в этом варианте характер держат шрифт и линии, а не подсветка. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(900px 520px at 50% -18%, var(--glow-1), transparent 70%);
}
/* Направляющие по краям колонки через всю страницу — главный приём
   Vercel. Сетка видна, но не шумит: линия того же тона, что рамки. */
body::after{
  content:""; position:fixed; top:0; bottom:0; left:50%; z-index:0; pointer-events:none;
  width:min(1120px, calc(100% - 32px)); transform:translateX(-50%);
  border-left:1px solid var(--line-soft); border-right:1px solid var(--line-soft);
}
@media (max-width:640px){ body::after{display:none} }

main,header,footer{position:relative; z-index:1}
a{color:var(--violet-bright); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
img{max-width:100%; display:block}
.hidden{display:none !important}

/* Общая колонка: её края совпадают с направляющими. На телефоне —
   16px по бокам, без горизонтальной прокрутки. */
.container{width:min(1120px, calc(100% - 32px)); margin:0 auto; padding:0 40px}
.narrow{max-width:none}
@media (max-width:640px){ .container{width:100%; padding:0 16px} }

/* Моноширинные подписи: даты, метки разделов, подписи к цифрам. */
.eyebrow, .label, .issue time, .quote cite, .copy, .stat-cell span,
.person-role, .foot-col h4, .feature-meta, .mcp-tool, .mcp-date, .mcp-bar, .mcp-n, .mcp-note{
  font-family:var(--m),ui-monospace,SFMono-Regular,Menlo,monospace;
  font-stretch:var(--m-stretch); font-weight:400;
}

/* ── шапка ─────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:40;
  background:var(--nav-bg); backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.topbar .container{display:flex; align-items:center; gap:10px; min-height:60px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.brand img{height:28px; width:auto}
.brand .wordmark{font-weight:650; letter-spacing:-.02em; font-size:17px; color:var(--text)}
.nav{display:flex; align-items:center; gap:2px; flex-wrap:wrap}
.nav a{
  color:var(--muted); font-size:14px; padding:6px 11px; border-radius:999px;
  border:1px solid transparent; transition:color .15s, background .15s, border-color .15s;
  white-space:nowrap;
}
.nav a:hover{color:var(--text); background:var(--surface); text-decoration:none}
.nav a.current{color:var(--text)}
.nav a.accent{
  color:var(--text); background:var(--surface-2); border-color:var(--line);
  margin-left:6px; font-weight:500;
}
.nav a.accent:hover{border-color:var(--violet)}

.theme-btn{
  width:32px; height:32px; flex:0 0 32px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid var(--line-soft); color:var(--muted);
  font-size:14px; line-height:1; transition:.15s; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
}
.theme-btn:hover{border-color:var(--violet); color:var(--violet-bright)}
/* На телефоне шапка должна уместиться в одну строку: «Home» дублирует
   логотип — убираем, отступы ужимаем. */
@media (max-width:560px){
  .topbar .container{flex-wrap:nowrap; gap:6px}
  .brand img{height:24px}
  .nav{flex-wrap:nowrap}
  .nav a{padding:6px 7px; font-size:13.5px}
  .nav a[href="index.html"]{display:none}
  .nav a.accent{margin-left:2px}
}

/* ── секции и линии между ними ───────────────────────────────────────
   Отступы живут внутри .container, а не у section: так разделитель
   ложится ровно между направляющими и крестики попадают в их углы. */
/* Сетки логотипов и отзывов прижимаются к следующему разделителю
   отрицательным отступом — считаем его от той же переменной. */
:root{--sec-pad:80px}
@media (max-width:640px){ :root{--sec-pad:64px} }
section > .container{padding-top:var(--sec-pad); padding-bottom:var(--sec-pad); position:relative}
/* Под лентой выпусков свой край — список и карточка сами дают воздух. */
#issues > .container{padding-bottom:56px}
main > section:not(.hidden) ~ section > .container{border-top:1px solid var(--line-soft)}
main > section:not(.hidden) ~ section > .container::before,
main > section:not(.hidden) ~ section > .container::after{
  content:""; position:absolute; top:-6px; width:11px; height:11px;
  background:
    linear-gradient(var(--muted-dim),var(--muted-dim)) center/1px 100% no-repeat,
    linear-gradient(var(--muted-dim),var(--muted-dim)) center/100% 1px no-repeat;
}
main > section:not(.hidden) ~ section > .container::before{left:-6px}
main > section:not(.hidden) ~ section > .container::after{right:-6px}
@media (max-width:640px){
  main > section ~ section > .container::before,
  main > section ~ section > .container::after{display:none}
}

.section-head{margin-bottom:44px; max-width:680px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-head p{color:var(--muted); font-size:17px}
.label{
  display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--violet-bright); margin-bottom:14px;
}

h1, h2, .num, .stat-cell b{
  font-family:var(--d),var(--t),sans-serif; font-weight:var(--d-weight);
  font-stretch:var(--d-stretch); letter-spacing:var(--d-track);
  font-optical-sizing:auto;
}
h1, h2{text-wrap:balance}
h1{font-size:clamp(40px, 7.2vw, 82px); line-height:.98; margin-bottom:26px}
h2{font-size:clamp(28px, 4.2vw, 46px); line-height:1.05; margin-bottom:14px}
h3{font-size:17px; font-weight:600; letter-spacing:-.01em}

/* ── первый экран ──────────────────────────────────────────────────── */
.hero > .container{padding-top:84px; padding-bottom:0}
.eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--violet-bright); margin-bottom:22px;
}
.hero h1{max-width:960px}
/* Паттерн (класс .pattern): цифры из выпусков и игровые значки, едва
   видные, края растворяются маской. Чисто украшение — aria-hidden; на
   узких экранах, где текст на всю ширину, его нет. Цифры по очереди
   подсвечиваются — см. site.js. Где стоит и какого размера — задают
   .hero-art и .page-art ниже. */
.pattern{
  position:absolute; z-index:0; pointer-events:none;
  display:grid; grid-template-columns:repeat(5,1fr); align-content:space-evenly; justify-items:center;
  font-family:var(--m),monospace; color:var(--text); user-select:none;
  -webkit-mask-image:radial-gradient(ellipse 60% 62% at 60% 50%, #000 35%, transparent 80%);
          mask-image:radial-gradient(ellipse 60% 62% at 60% 50%, #000 35%, transparent 80%);
}
.pattern span{font-size:13px; opacity:.13; transition:opacity .9s, color .9s; white-space:nowrap; padding:10px 0}
.pattern span.big{font-size:26px; font-family:var(--d),sans-serif; font-weight:700; letter-spacing:-.03em}
.pattern span.g{font-size:20px}
.pattern span.on{opacity:.55; color:var(--violet-bright)}
html[data-theme="dark"] .pattern span{opacity:.16}
html[data-theme="dark"] .pattern span.on{opacity:.7}
.hero .container > :not(.pattern), .prose .container > :not(.pattern){position:relative; z-index:1}
.hero-art{top:236px; right:28px; width:40%; height:320px}
/* На текстовых страницах (Contact) — правая половина, рядом с текстом. */
.page-art{top:130px; right:44px; width:36%; height:500px}
/* Узкий экран: на Contact паттерна нет (текст на всю ширину), а на
   главной он остаётся — меньше и бледнее, справа от заголовка, который
   всё равно не доходит до правого края. Клеток вдвое меньше, иначе
   крупные цифры не помещаются в колонку. */
@media (max-width:1000px){
  .page-art{display:none}
  .hero-art{top:34px; right:0; width:56%; height:250px; grid-template-columns:repeat(3,1fr)}
  .hero-art span:nth-child(n+16){display:none}
  .hero-art span{opacity:.1}
  .hero-art span.big{font-size:21px}
  .hero-art span.g{font-size:17px}
}
@media (max-width:640px){ .hero-art{top:18px; width:58%; height:232px} }
.hero h1 em{font-style:normal; color:var(--violet-bright); display:block}
.lede{font-size:clamp(17px,2.1vw,20px); color:var(--muted); max-width:640px; margin-bottom:34px}
.hero-actions{display:flex; flex-direction:column; gap:14px; max-width:520px; padding-bottom:76px}

/* ── форма подписки ────────────────────────────────────────────────── */
.subscribe{
  display:flex; gap:6px; padding:5px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); transition:.15s;
}
.subscribe:focus-within{border-color:var(--violet)}
.subscribe input[type="email"]{
  flex:1 1 auto; min-width:0; font-family:inherit; font-size:15px;
  padding:10px 14px; border:0; background:transparent; color:var(--text);
}
.subscribe input[type="email"]::placeholder{color:var(--muted-dim)}
.subscribe input[type="email"]:focus{outline:none}
.btn{
  font-family:inherit; font-size:15px; font-weight:550; cursor:pointer;
  padding:11px 22px; border-radius:999px; border:1px solid transparent;
  background:var(--violet); color:#fff; transition:.15s; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:hover{background:var(--violet-deep); text-decoration:none; color:#fff}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn.ghost:hover{background:var(--surface); border-color:var(--violet); color:var(--text)}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}
.form-note{font-size:13px; color:var(--muted-dim); line-height:1.6}
@media (max-width:420px){
  .subscribe{flex-direction:column; border-radius:18px}
  .subscribe .btn{width:100%}
}

/* ── полоса цифр под первым экраном ─────────────────────────────────
   Растянута до направляющих, а не до внутреннего отступа колонки.
   Клеток четыре или пять: пятую («Issues published») вставляет site.js,
   когда кабинет отдаёт число выпусков, — поэтому колонки не задаём
   числом, а раскладываем клетки в одну строку поровну. */
.stats{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
  border-top:1px solid var(--line-soft); margin:0 -40px;
}
.stat-cell{padding:28px 24px 30px; border-right:1px solid var(--line-soft)}
.stat-cell:first-child{padding-left:40px}
.stat-cell:last-child{border-right:0}
.stat-cell b{display:block; font-size:clamp(28px,3.1vw,42px); line-height:1; margin-bottom:10px}
.stat-cell span{font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-dim)}
/* Уже — две колонки. Линии между клетками рисует фон сетки в зазорах:
   так они верны при любом числе клеток. Нечётная последняя — во всю ширину. */
@media (max-width:820px){
  .stats{grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line-soft)}
  .stat-cell, .stat-cell:first-child{padding:22px 24px 24px; border:0; background:var(--bg)}
  .stat-cell:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:640px){
  .stats{margin:0 -16px}
  .stat-cell, .stat-cell:first-child{padding:22px 16px 24px}
}

/* ── стена логотипов читателей ─────────────────────────────────────
   Каждый логотип — в своей клетке с общими границами, как у Vercel.
   Логотипы приходят разноцветные и с разным «весом» — гасим до
   монохрома, на наведении возвращаем цвет. */
/* Сетка растянута до направляющих: они и служат её внешними границами,
   поэтому левой рамки у сетки нет, а у крайних правых клеток — правой. */
.readers{
  display:grid; grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--line-soft); margin:0 -40px calc(-1px - var(--sec-pad));
}
.logo-cell{
  display:flex; align-items:center; justify-content:center; min-height:104px; padding:22px 18px;
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  transition:background .2s;
}
.logo-cell:hover{background:var(--surface)}
.logo-cell:nth-child(6n){border-right:0}
.readers img{
  /* Ширина до 150: вытянутые надписи (Bank of America, Tencent,
     Philips) упираются в неё и иначе мельчают до нечитаемого. */
  height:28px; width:auto; max-width:min(150px, 100%); object-fit:contain;
  filter:grayscale(1) opacity(.62); transition:.2s;
}
html[data-theme="dark"] .readers img{
  /* На тёмном фоне логотипы чаще всего чёрные — инвертируем, иначе
     половина сетки превращается в невидимые прямоугольники. */
  filter:grayscale(1) brightness(0) invert(1) opacity(.55);
}
.logo-cell:hover img{filter:none}
/* Квадратные и высокие знаки (EA, Epic, LEGO) при той же высоте кажутся
   мельче вытянутых надписей — добавляем им немного роста. */
.readers img.tall{height:46px}
/* Team17: у логотипа-наклейки толстая чёрная обводка, белым силуэтом
   в тёмной теме она сливается с цифрами в пятно. Для тёмной темы есть
   отдельный вариант без обводки; обе картинки живут в одной клетке. */
/* «& more» — последней строкой во всю ширину сетки, под логотипами. */
.readers-more{
  grid-column:1 / -1; display:flex; align-items:center; justify-content:center; min-height:64px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--m),monospace; font-size:13px; letter-spacing:.06em; color:var(--muted);
}
.readers img.dark-only{display:none}
html[data-theme="dark"] .readers img.dark-only{display:block}
html[data-theme="dark"] .readers img.light-only{display:none}
@media (max-width:900px){
  .readers{grid-template-columns:repeat(4,1fr)}
  .logo-cell:nth-child(6n){border-right:1px solid var(--line-soft)}
  .logo-cell:nth-child(4n){border-right:0}
}
@media (max-width:560px){
  .readers{grid-template-columns:repeat(3,1fr); margin-left:-16px; margin-right:-16px}
  .logo-cell:nth-child(n){border-right:1px solid var(--line-soft)}
  .logo-cell:nth-child(3n){border-right:0}
  .logo-cell{min-height:76px; padding:16px 10px}
  .readers img{height:20px} .readers img.tall{height:28px}
}

/* ── премиум: сетка из трёх клеток ─────────────────────────────────── */
.bento{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line); border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg, var(--card-from), var(--card-to));
}
.bento-cell{padding:34px 32px 34px; border-right:1px solid var(--line-soft); display:flex; flex-direction:column}
.bento-cell:last-child{border-right:0}
.num{
  font-size:clamp(56px,6.4vw,84px); line-height:.9; margin-bottom:26px;
  color:var(--violet-bright);
}
.bento-cell h3{margin-bottom:8px; font-size:18px}
.bento-cell p{color:var(--muted); font-size:15px}
.bento-foot{display:flex; gap:12px 20px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:26px}
/* Подпись у кнопки — мелко и серым, как примечание, чтобы не спорить с кнопкой. */
.bento-foot p{color:var(--muted-dim); font-size:12.5px; line-height:1.5}
@media (max-width:860px){
  .bento{grid-template-columns:1fr}
  .bento-cell{border-right:0; border-bottom:1px solid var(--line-soft)}
  .bento-cell:last-child{border-bottom:0}
}

/* ── как работает коннектор ─────────────────────────────────────────
   Слева — три шага и вопросы-кнопки, справа — окно с разговором.
   Высота окна зафиксирована: при смене вопроса страница не прыгает. */
.mcp-demo{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:40px;
  margin-top:40px; align-items:start;
}
.mcp-steps{list-style:none; counter-reset:step; margin:4px 0 26px; display:grid; gap:14px}
.mcp-steps li{counter-increment:step; display:grid; grid-template-columns:28px 1fr; gap:10px; color:var(--muted); font-size:15px}
.mcp-steps li::before{
  content:counter(step); width:26px; height:26px; border-radius:999px; display:grid; place-items:center;
  font-family:var(--m),monospace; font-size:12px; color:var(--violet-bright); border:1px solid var(--line);
}
.mcp-steps b{color:var(--text); font-weight:600}
/* Вопросы — вертикальным списком, как вкладки: полный текст вопроса,
   у выбранного — фиолетовая рамка и стрелка к окну. */
.mcp-chips{display:grid; gap:6px; margin-bottom:18px}
.mcp-chip{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  font:inherit; font-size:15px; text-align:left; cursor:pointer; color:var(--text);
  padding:12px 14px 12px 16px; border-radius:12px; border:1px solid var(--line-soft);
  background:transparent; transition:background .2s, border-color .2s;
}
.mcp-chip::after{content:"→"; color:var(--muted-dim); transition:transform .2s, color .2s}
.mcp-chip:hover{background:var(--surface); border-color:var(--line)}
.mcp-chip:hover::after{transform:translateX(3px)}
.mcp-chip[aria-pressed="true"]{background:var(--surface); border-color:var(--violet)}
.mcp-chip[aria-pressed="true"]::after{color:var(--violet-bright)}
.mcp-note{font-size:11.5px; line-height:1.6; color:var(--muted-dim); letter-spacing:.01em}

.mcp-window{
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:var(--surface-2); box-shadow:var(--card-shadow);
}
.mcp-bar{
  display:flex; align-items:center; gap:10px; padding:12px 18px;
  font-size:12px; letter-spacing:.03em; color:var(--muted-dim);
  border-bottom:1px solid var(--line-soft); background:var(--bg);
}
.mcp-live{width:8px; height:8px; border-radius:999px; background:var(--teal)}
.mcp-body{padding:22px 22px 24px; min-height:560px; display:flex; flex-direction:column; gap:14px}
.mcp-body > *{animation:mcp-in .35s ease both}
@keyframes mcp-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .mcp-body > *{animation:none} }

.mcp-ask{
  align-self:flex-end; max-width:85%; padding:11px 16px; border-radius:16px 16px 4px 16px;
  background:var(--violet); color:#fff; font-size:15.5px; min-height:44px;
}
.mcp-tool{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); min-width:0}
.mcp-tool b{font-weight:400; color:var(--violet-bright)}
.mcp-arg{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.mcp-dot{
  width:12px; height:12px; flex:none; border-radius:999px;
  border:2px solid var(--line); border-top-color:var(--violet); animation:mcp-spin .8s linear infinite;
}
.mcp-tool.done .mcp-dot{animation:none; border-color:var(--teal); background:var(--teal); transform:scale(.7)}
@keyframes mcp-spin{to{transform:rotate(360deg)}}

.mcp-hits{list-style:none; display:grid; gap:0; border:1px solid var(--line-soft); border-radius:14px; background:var(--bg)}
.mcp-hit{display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; padding:12px 14px; border-top:1px solid var(--line-soft)}
.mcp-hit:first-child{border-top:0}
.mcp-n{font-size:11px; color:var(--violet-bright); padding-top:3px}
.mcp-title{display:block; color:var(--text); font-size:14.5px; font-weight:600; line-height:1.35}
.mcp-date{display:block; font-size:11px; color:var(--muted-dim); margin:3px 0 4px}
.mcp-snip{
  color:var(--muted); font-size:13.5px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mcp-answer{font-size:15.5px; line-height:1.6; color:var(--text)}
.mcp-answer strong{font-weight:650}
.mcp-ref{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px; margin-left:3px;
  border-radius:6px; font-size:11px; font-weight:600; vertical-align:2px;
  color:var(--violet-bright); background:var(--surface); border:1px solid var(--line);
}
.mcp-ref:hover{text-decoration:none; border-color:var(--violet)}
@media (max-width:900px){
  .mcp-demo{grid-template-columns:1fr; gap:24px}
  .mcp-body{min-height:0}
}
@media (max-width:560px){ .mcp-body{padding:16px 14px 18px} .mcp-ask{max-width:100%} }

/* ── отзывы подписчиков ────────────────────────────────────────────── */
.quotes{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line-soft); margin:0 -40px calc(-1px - var(--sec-pad));
}
.quote{
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  padding:32px 40px 30px;
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.quote blockquote{font-size:17.5px; line-height:1.5; letter-spacing:-.01em; color:var(--text)}
.quote blockquote::before{content:"“"} .quote blockquote::after{content:"”"}
.quote cite{font-style:normal; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-dim)}
.quote cite b{color:var(--text); font-weight:400}
.quote.wide{grid-column:span 2}
.quote.wide blockquote{
  font-family:var(--d),sans-serif; font-weight:560; font-stretch:var(--d-stretch);
  font-size:clamp(22px,2.6vw,30px); line-height:1.22; letter-spacing:-.025em;
}
/* Правую рамку у клеток отзывов не рисуем вовсе: колонок разное число,
   а ряды неровные из-за широких цитат. Колонки разделяет левая рамка,
   у первой в ряду её закрывает направляющая. */
.quote{border-right:0; border-left:1px solid var(--line-soft); margin-left:-1px; position:relative; transition:background .25s}
/* При наведении клетка чуть светлеет, сверху проступает фиолетовая
   черта, имя окрашивается — как у клеток с логотипами, только заметнее. */
.quote::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:var(--violet); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.quote:hover{background:var(--surface)}
.quote:hover::before{transform:scaleX(1)}
.quote cite b{transition:color .25s}
.quote:hover cite b{color:var(--violet-bright)}
@media (max-width:860px){ .quotes{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .quotes{margin-left:-16px; margin-right:-16px} }
@media (max-width:600px){ .quotes{grid-template-columns:1fr} .quote.wide{grid-column:auto} .quote{padding:26px 16px} }

/* ── последние выпуски ─────────────────────────────────────────────
   Слева — свежий выпуск карточкой с обложкой, справа — остальные
   списком. Обложки нет или не загрузилась — карточка остаётся, просто
   без картинки. */
.issues-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:40px}
.issues-head .section-head{margin-bottom:0}
.issues-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:40px; align-items:start}

.feature{
  display:flex; flex-direction:column; overflow:hidden; color:var(--text);
  border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(180deg, var(--card-from), var(--card-to));
  box-shadow:var(--card-shadow); transition:border-color .2s, transform .2s;
}
.feature:hover{text-decoration:none; border-color:var(--violet); transform:translateY(-2px)}
.feature-img{aspect-ratio:16 / 9; overflow:hidden; background:var(--surface); border-bottom:1px solid var(--line-soft)}
.feature-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.feature:hover .feature-img img{transform:scale(1.03)}
.feature-body{padding:24px 26px 26px; display:flex; flex-direction:column; gap:12px}
.feature-meta{display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-dim)}
.feature-meta b{font-weight:400; color:#fff; background:var(--violet); padding:3px 9px; border-radius:999px}
.feature h3{
  font-family:var(--d),sans-serif; font-weight:700; letter-spacing:-.03em;
  font-size:clamp(22px,2.4vw,28px); line-height:1.15; text-wrap:balance;
}
.feature-cta{font-size:14.5px; font-weight:550; color:var(--violet-bright)}
.feature:hover .arr{transform:translateX(3px)}
.feature .arr{display:inline-block; transition:transform .15s}

.issues{display:grid; border-top:1px solid var(--line-soft)}
.issue{
  display:grid; grid-template-columns:104px minmax(0,1fr) auto; align-items:baseline; gap:16px;
  padding:16px 6px; border-bottom:1px solid var(--line-soft); transition:.15s;
}
.issue:hover{text-decoration:none; background:var(--surface)}
.issue time{font-size:12px; color:var(--muted-dim); font-variant-numeric:tabular-nums}
.issue span{color:var(--text); font-size:16px; letter-spacing:-.01em; line-height:1.4}
.issue::after{content:"↗"; color:var(--muted-dim); transition:.15s}
.issue:hover span, .issue:hover::after{color:var(--violet-bright)}
.issues-empty{color:var(--muted); padding:18px 0}
@media (max-width:900px){ .issues-grid{grid-template-columns:1fr; gap:28px} }
@media (max-width:560px){
  .issue{grid-template-columns:minmax(0,1fr) auto; gap:4px 12px}
  .issue time{grid-column:1 / -1}
  .feature-body{padding:20px 18px 22px}
}

/* ── полоса с призывом ─────────────────────────────────────────────── */
.band{
  position:relative; overflow:hidden; text-align:center;
  border:1px solid var(--line); border-radius:26px; padding:72px 28px 76px;
  background:
    radial-gradient(640px 300px at 50% 120%, var(--glow-1), transparent 70%),
    linear-gradient(180deg, var(--card-from), var(--card-to));
}
.band h2{font-size:clamp(34px,5.6vw,64px); margin:0 0 14px}
.band p{color:var(--muted); max-width:520px; margin:0 auto 28px; font-size:17px}
.band-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
/* Подписи у кнопок здесь длинные — на телефоне пусть переносятся. */
.band-actions .btn{white-space:normal; text-align:center}

/* ── карточка (форма обратной связи) ───────────────────────────────── */
.card{
  background:linear-gradient(180deg, var(--card-from), var(--card-to));
  border:1px solid var(--line); border-radius:22px; padding:28px 26px;
}

/* ── текстовые страницы ────────────────────────────────────────────── */
.prose > .container{padding-top:80px}
.prose h1{font-size:clamp(38px,6vw,68px); margin-bottom:28px}
.prose h2{font-size:clamp(24px,3vw,32px); margin:40px 0 12px}
/* Строку длиннее ~75 знаков читать тяжело. Ограничиваем сам текст. */
.prose p, .prose ul{max-width:68ch}
.prose p{margin-bottom:16px; color:var(--muted); font-size:17px}
.prose strong{color:var(--text); font-weight:600}
.prose ul{margin:0 0 16px 20px; color:var(--muted); font-size:17px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--violet-bright)}
.prose .band{margin-top:56px}
/* Внутри блока-призыва заголовку отступы текстовой страницы не нужны. */
.prose .band h2{margin:0 0 14px}

/* ── две колонки: текст и карточка рядом ───────────────────────────── */
.split{
  display:grid; gap:56px; align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
}
@media (max-width:840px){ .split{grid-template-columns:1fr; gap:36px} }

/* ── портрет ───────────────────────────────────────────────────────── */
.person img{
  width:100%; max-width:300px; margin-bottom:18px; border-radius:22px;
  border:1px solid var(--line);
}
.prose .person-name{margin:0 0 6px; font-size:clamp(24px,3vw,30px)}
.prose .person-role{color:var(--muted-dim); font-size:12.5px; letter-spacing:.02em}
/* Фотографии нет — колонка схлопывается, подпись уходит под текст. */
.split.no-portrait{grid-template-columns:1fr; gap:0}
.split.no-portrait .person{margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft)}

/* ── подвал ────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line-soft)}
footer .container{padding-top:48px; padding-bottom:40px}
.foot{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:32px}
.foot-brand .wordmark{
  font-family:var(--d),sans-serif; font-weight:var(--d-weight); font-stretch:var(--d-stretch);
  letter-spacing:var(--d-track); font-size:22px; color:var(--text);
}
.foot-brand p{color:var(--muted); font-size:14px; max-width:300px; margin-top:12px}
.foot-col h4{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-dim); margin-bottom:14px}
.foot-col a{display:block; color:var(--muted); font-size:14px; padding:3px 0}
.foot-col a:hover{color:var(--text); text-decoration:none}
.foot-bottom{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line-soft);
}
.copy{color:var(--muted-dim); font-size:12px; letter-spacing:.02em}
@media (max-width:720px){ .foot{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1 / -1} }

/* ── 404 ───────────────────────────────────────────────────────────── */
.hero.solo > .container{padding-bottom:110px}
.hero.solo .band-actions{justify-content:flex-start}