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

   Переменные скопированы из cabinet.html один в один: сайт и кабинет
   должны выглядеть одной вещью, а не двумя похожими. Если меняете цвет
   здесь — поменяйте и там (и наоборот).
   ────────────────────────────────────────────────────────────────────── */

*,*::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;
  --serif:'Iowan Old Style',Georgia,'Times New Roman',serif;
  --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(16,16,23,.86);
}

/* Светлая тема. Фиолетовый на белом берём насыщенный: --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,.9);
}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text); min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative; overflow-x:hidden; line-height:1.55;
}
/* Мягкое свечение фона — тот же приём, что в кабинете. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(760px 480px at 50% -10%, var(--glow-1), transparent 70%),
    radial-gradient(560px 380px at 90% 104%, var(--glow-2), transparent 70%);
}
main,header,footer{position:relative; z-index:1}
a{color:var(--violet-bright); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.hidden{display:none !important}

/* Общая колонка. 16px по бокам на телефоне — без горизонтальной прокрутки. */
.container{width:100%; max-width:1040px; margin:0 auto; padding:0 16px}
.narrow{max-width:760px}

/* ── шапка ─────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:40;
  background:var(--nav-bg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.topbar .container{
  display:flex; align-items:center; gap:14px; min-height:62px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.brand img{height:30px; width:auto}
.brand .wordmark{font-weight:600; letter-spacing:-.01em; font-size:17px; color:var(--text)}
.nav{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.nav a{
  color:var(--muted); font-size:14px; padding:7px 11px; border-radius:9px;
  border:1px solid transparent; transition:.15s; white-space:nowrap;
}
.nav a:hover{color:var(--text); border-color:var(--line-soft); background:var(--surface); text-decoration:none}
.nav a.current{color:var(--text); border-color:var(--line-soft)}
.nav a.accent{color:var(--violet-bright); border-color:rgba(139,92,246,.35)}
.nav a.accent:hover{border-color:var(--violet); background:rgba(139,92,246,.08)}

/* Кнопка темы — размеры и рамка как у пунктов меню, чтобы строка читалась
   одним рядом, а не кнопкой рядом с кнопками другого сорта. */
.theme-btn{
  width:32px; height:32px; flex:0 0 32px; border-radius:9px; cursor:pointer;
  background:var(--surface); 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:rgba(139,92,246,.45); color:var(--violet-bright)}

/* ── первый экран ──────────────────────────────────────────────────── */
.hero{padding:76px 0 58px; text-align:center}
.eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--violet-bright); border:1px solid rgba(139,92,246,.3);
  padding:5px 12px; border-radius:999px; margin-bottom:22px;
}
h1{
  font-family:var(--serif); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(34px, 6vw, 56px); line-height:1.1; margin-bottom:18px;
}
.lede{font-size:clamp(16px,2.2vw,19px); color:var(--muted); max-width:620px; margin:0 auto 30px}

/* ── форма подписки ────────────────────────────────────────────────── */
.subscribe{display:flex; gap:10px; max-width:480px; margin:0 auto; flex-wrap:wrap}
.subscribe input[type="email"]{
  flex:1 1 220px; min-width:0; font-family:inherit; font-size:15px;
  padding:13px 15px; border-radius:12px; color:var(--text);
  background:var(--surface); border:1px solid var(--line); transition:.15s;
}
.subscribe input[type="email"]::placeholder{color:var(--muted-dim)}
.subscribe input[type="email"]:focus{outline:none; border-color:var(--violet); background:var(--surface-2)}
.btn{
  font-family:inherit; font-size:15px; font-weight:500; cursor:pointer;
  padding:13px 22px; border-radius:12px; 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)}
.form-note{font-size:13px; color:var(--muted-dim); margin-top:12px}

/* ── секции ────────────────────────────────────────────────────────── */
section{padding:56px 0}
.section-head{text-align:center; margin-bottom:34px}
h2{
  font-family:var(--serif); font-weight:400; letter-spacing:-.015em;
  font-size:clamp(25px,3.6vw,34px); line-height:1.2; margin-bottom:10px;
}
.section-head p{color:var(--muted); max-width:560px; margin:0 auto}

.cards{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:linear-gradient(180deg, var(--card-from), var(--card-to));
  border:1px solid var(--line); border-radius:18px; padding:26px 24px;
  box-shadow:var(--card-shadow); backdrop-filter:blur(8px);
}
.card h3{font-size:17px; font-weight:600; margin-bottom:9px; letter-spacing:-.01em}
.card p{color:var(--muted); font-size:15px}
.card .stat{
  font-family:var(--serif); font-size:34px; line-height:1;
  color:var(--violet-bright); margin-bottom:12px; display:block;
}

/* ── последние выпуски ─────────────────────────────────────────────── */
.issues{display:grid; gap:2px}
.issue{
  display:flex; align-items:baseline; gap:16px; padding:15px 4px;
  border-bottom:1px solid var(--line-soft); transition:.15s;
}
.issue:hover{background:var(--surface); border-radius:10px; text-decoration:none}
.issue time{
  flex:0 0 96px; font-size:13px; color:var(--muted-dim);
  font-variant-numeric:tabular-nums;
}
.issue span{color:var(--text); font-size:16px}
.issue:hover span{color:var(--violet-bright)}
.issues-foot{text-align:center; margin-top:26px}
.issues-empty{text-align:center; color:var(--muted); padding:18px 0}
@media (max-width:560px){
  .issue{flex-direction:column; gap:4px}
  .issue time{flex:none}
}

/* ── полоса с призывом ─────────────────────────────────────────────── */
.band{
  background:linear-gradient(180deg, var(--card-from), var(--card-to));
  border:1px solid var(--line); border-radius:20px;
  padding:40px 30px; text-align:center; box-shadow:var(--card-shadow);
}
.band h2{margin-bottom:12px}
.band p{color:var(--muted); max-width:520px; margin:0 auto 24px}
.band-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ── текстовые страницы ────────────────────────────────────────────── */
.prose{padding:56px 0}
.prose h1{text-align:left; margin-bottom:26px}
.prose h2{margin:34px 0 12px}
/* Строку длиннее ~75 знаков читать тяжело, а без фотографии колонка
   разворачивается во всю ширину. Ограничиваем сам текст, не заголовки. */
.prose p, .prose ul{max-width:74ch}
.prose p{margin-bottom:16px; color:var(--muted); font-size:16px}
.prose strong{color:var(--text); font-weight:600}
.prose ul{margin:0 0 16px 20px; color:var(--muted)}
.prose li{margin-bottom:8px}

/* ── подвал ────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line-soft); padding:34px 0 44px; margin-top:34px}
.foot{display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:space-between}
.foot-links{display:flex; gap:18px; flex-wrap:wrap}
.foot-links a{color:var(--muted); font-size:14px}
.foot-links a:hover{color:var(--text)}
.copy{color:var(--muted-dim); font-size:13px}

/* ── стена логотипов читателей ─────────────────────────────────────
   Логотипы приходят разноцветные и с разным «весом». Гасим их до
   монохрома и приглушаем, иначе строка рассыпается на десять ярких
   пятен и спорит с текстом. На наведении — исходный цвет. */
.readers{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:22px 44px;
}
.readers img{
  /* 180, а не 140: вытянутые надписи (Bank of America, Tencent, Philips)
     упираются в ширину и иначе мельчают до нечитаемого. */
  height:30px; width:auto; max-width:180px; 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);
}
.readers img:hover{filter:none; opacity:1}
/* Квадратные и высокие знаки (EA, Epic, LEGO) при той же высоте кажутся
   мельче вытянутых надписей — добавляем им немного роста. */
.readers img.tall{height:40px}
@media (max-width:560px){ .readers{gap:18px 28px} .readers img{height:24px} }

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

/* ── портрет ───────────────────────────────────────────────────────── */
.person{text-align:center}
/* Фотографии нет — колонка схлопывается, иначе справа остаётся пустота
   в пол-экрана, а имя висит в воздухе. Подпись уходит под текст. */
.split.no-portrait{grid-template-columns:1fr; gap:0}
.split.no-portrait .person{
  text-align:left; margin-top:26px; padding-top:22px;
  border-top:1px solid var(--line-soft);
}
.split.no-portrait .person-name{font-size:21px}
.person img{
  width:100%; max-width:320px; margin:0 auto 20px; border-radius:20px;
  border:1px solid var(--line); box-shadow:var(--card-shadow);
}
.person-name{margin:0 0 6px; font-size:clamp(23px,3vw,30px)}
.person-role{color:var(--muted); font-size:15px}

/* ── форма обратной связи ──────────────────────────────────────────── */
.contact-card{padding:28px 26px}
.field{display:block; margin-bottom:16px}
.field span{
  display:block; font-size:13px; color:var(--muted);
  margin-bottom:7px; letter-spacing:.01em;
}
.field input, .field textarea{
  width:100%; font-family:inherit; font-size:15px; color:var(--text);
  padding:12px 14px; border-radius:12px; resize:vertical;
  background:var(--surface); border:1px solid var(--line); transition:.15s;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--violet); background:var(--surface-2);
}
.contact-card .btn{width:100%}
.contact-card .form-note{margin-top:12px; text-align:center}
.form-note.error{color:#f87171}
html[data-theme="light"] .form-note.error{color:#b91c1c}