/* ========================
   ROOT TOKENS
   ======================== */
:root {
  --bg-body: #171919;
  --bg-scene: #1e1f1f;
  --dot: #2a2a2a;
  --text: #f3efe6;
  --text-hero: #f6efe0;
  --text-2: #bdb8ae;
  --text-desc: #d8d3c8;
  --text-muted: #8f8a80;
  --line: #3a3a3a;
  --line-2: #4a4744;
  --line-muted: #2b2c2c;
  --accent: #e8962e;
  --on-accent: #141311;
  --stage-1: #e8962e;
  --stage-2: #6e93ad;
  --stage-3: #7fae5c;
  --stage-4: #d9583f;
  --role-all: #fdae37;
  --role-editor: #81c67b;
  --role-designer: #5ea4dd;
  --role-writer: #f94a38;
  --role-sound: #9a988f;
  --role-lead: #a877e8;
  --section: #e8962e;
}

.is-research { --section: #e8962e; }
.is-game { --section: #e8962e; }
.is-narrative { --section: #6e93ad; }
.is-production { --section: #7fae5c; }
.is-audience { --section: #7fae5c; }
.is-comm { --section: #d9583f; }

/* ========================
   RESET
   ======================== */
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg-scene);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--accent);
}
h1, h2, h3, h4, p {
  margin: 0;
}
img {
  display: block;
  height: auto;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ========================
   I18N GUARD
   ======================== */
.i18n-pending body {
  visibility: hidden;
  animation: i18n-reveal 0s 1.5s forwards;
}
@keyframes i18n-reveal {
  to { visibility: visible; }
}

/* ========================
   VISIBILITY UTILITIES
   ======================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

/* ========================
   PAGE CONTAINER
   ======================== */
.page {
  min-height: 100vh;
  background: var(--bg-scene);
  /* Виньетка убрана 2026-09-18: на широком окне её переход занимал ~427px, а градаций
     между базой (30,31,31) и краем (17,17,17) всего 13-14 — ступень каждые ~33px читалась
     как полосы. Остаётся ровная база и точечная сетка; ровный цвет не полосит. */
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 24px 24px;
  position: relative;
}

/* ========================
   HEADER
   ======================== */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px 48px;
}
.header__brand {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header__brand a[href="https://polden.gg"] img {
  height: 44px;
  width: auto;
  display: block;
}
.header__divider {
  width: 1px;
  height: 30px;
  background: var(--line-2);
}
.header__brand a[href="./"] img {
  height: 46px;
  width: auto;
  display: block;
}

/* ========================
   LANG SWITCH
   ======================== */
.lang {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 12px 'IBM Plex Mono';
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lang__link {
  color: var(--text-muted);
}
html:not([lang="en"]) [data-lang-switch="ru"],
html[lang="en"] [data-lang-switch="en"] {
  color: var(--text);
}
.lang__slash {
  color: var(--line-2);
}

/* ========================
   LAYOUT & SIDEBAR
   ======================== */
.layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 8px 48px 80px;
}
.sidebar {
  position: sticky;
  top: 24px;
  width: 190px;
  flex: none;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font: 400 12px 'IBM Plex Mono';
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sidebar__link[aria-current="page"] {
  color: var(--accent);
}
.sidebar__link--feedback {
  margin-top: 14px;
}

/* ========================
   TOC (SIDEBAR TABLE OF CONTENTS)
   ======================== */
.toc {
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  text-transform: none;
  letter-spacing: 0;
  font: 400 13px/1.35 'IBM Plex Sans';
  color: var(--text-2);
}

/* ========================
   CONTENT
   ======================== */
.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 28px;
}
.content--860 {
  max-width: 860px;
}
.content--980 {
  max-width: 980px;
}
.content--1100 {
  max-width: 1100px;
}
.content--wide {
  max-width: none;
}

/* ========================
   PAGE HEADER
   ======================== */
.page-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kicker {
  font: 400 11px 'IBM Plex Mono';
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.page-title {
  font: 400 44px/1.05 'Peace Sans';
  text-transform: uppercase;
  color: var(--text-hero);
}
.page-title--game {
  font: 400 56px/1 'Peace Sans';
}
.page-lead {
  font: 400 16px/1.6 'IBM Plex Sans';
  color: var(--text-2);
  max-width: 640px;
  text-wrap: pretty;
}

/* ========================
   PILL LINK
   ======================== */
.pill {
  align-self: flex-start;
  font: 400 12px 'IBM Plex Mono';
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--line-muted);
  padding: 7px 12px;
}

/* ========================
   BLOCKS & CARDS
   ======================== */
.block {
  background: #232424;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
}
.block--compact {
  padding: 22px 26px;
}
.block--accent {
  border-left: 3px solid var(--section);
}
.block__title {
  font: 400 11px 'IBM Plex Mono';
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--section);
}

/* ========================
   PARAGRAPH
   ======================== */
.para {
  font: 400 15.5px/1.65 'IBM Plex Sans';
  color: var(--text-desc);
  text-wrap: pretty;
}

/* ========================
   LIST
   ======================== */
.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.list__item {
  display: flex;
  gap: 12px;
  font: 400 15px/1.6 'IBM Plex Sans';
  color: var(--text-desc);
}
.list__item::before {
  content: '—';
  color: var(--section);
  flex: none;
}

/* ========================
   CHIP
   ======================== */
.chip {
  font: 500 12.5px 'IBM Plex Sans';
  color: var(--text-desc);
  background: var(--line-muted);
  padding: 5px 12px;
}

/* ========================
   QUOTE
   ======================== */
.quote {
  border-left: 3px solid var(--section);
  background: var(--bg-scene);
  padding: 14px 20px;
  font: 400 16px/1.6 'IBM Plex Sans';
  font-style: italic;
  color: var(--text);
}

/* ========================
   THESIS (orange banner)
   ======================== */
.thesis {
  background: var(--accent);
  color: var(--on-accent);
  font: 400 22px/1.3 'Peace Sans';
  text-transform: uppercase;
  padding: 24px 28px;
  text-wrap: balance;
}

/* ========================
   BUTTON CARD (dark)
   ======================== */
.btn-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--line-muted);
  font: 400 13px 'IBM Plex Mono';
  color: var(--text-desc);
  padding: 12px 16px;
}

/* ========================
   CTA
   ======================== */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  background: var(--accent);
  color: var(--on-accent);
  font: 400 18px 'Peace Sans';
  text-transform: uppercase;
  white-space: nowrap;
}
.cta--secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  background: #232424;
  color: var(--text);
  font: 400 18px 'Peace Sans';
  text-transform: uppercase;
  white-space: nowrap;
}
/* a:hover would turn text ochre; on an ochre fill that erases it, so filled buttons keep their text.
   Dark buttons take the site-wide ochre hover (README «Hover ссылок #e8962e»). */
.cta:hover {
  color: var(--on-accent);
}
.cta--secondary:hover,
.btn-card:hover,
.pill:hover {
  color: var(--accent);
}

/* ========================
   ADAPTIVE < 1000px
   ======================== */
@media (max-width: 999.98px) {
  .header {
    padding: 16px 20px;
    flex-wrap: nowrap;
    gap: 12px;
  }
  /* The home page's mobile marks (26px / 28px), allowed to shrink below ~325px instead of pushing the
     page sideways. */
  .header__brand {
    gap: 12px;
    min-width: 0;
  }
  .header__brand a {
    min-width: 0;
  }
  .header__brand a[href="https://polden.gg"] img {
    height: 26px;
  }
  .header__brand a[href="./"] img {
    height: 28px;
  }
  .header__divider {
    height: 20px;
  }
  .header__brand img {
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }
  .lang {
    flex: none;
  }
  /* stretch, not the desktop flex-start: in a column, flex-start sizes the sidebar strip and the
     content to their widest child, which is what pushed every inner page 500px sideways. */
  .layout {
    flex-direction: column;
    align-items: stretch;
    padding: 0 20px 40px;
    gap: 0;
  }
  .sidebar {
    flex-direction: row;
    /* Переносится, а не прокручивается. Прокруткой на телефоне было видно 4 пункта из 8, а 372px
       навигации лежали за правым краем — без полосы прокрутки, без затухания, без единого признака,
       что её можно тянуть. Читатель видел «Home · Pipeline · Guide (text) · Game Brief» и имел все
       основания считать, что это весь сайт. Перенос стоит ~80px высоты и снимает жест, который
       нужно было угадать. */
    flex-wrap: wrap;
    gap: 0 14px;
    padding: 0 0 4px;
    width: auto;
    position: static;
  }
  .sidebar__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    flex: none;
    /* На ссылке, а не на .sidebar: контейнер обязан переноситься, подпись — никогда. Раньше nowrap
       стоял на контейнере и держал всё одной строкой; сними его там и ничего не удержит «Guide
       (text)» от разрыва посередине, когда подпись однажды станет длиннее. */
    white-space: nowrap;
  }
  .sidebar__link--feedback {
    margin-top: 0;
  }
  .toc {
    display: none;
  }
  /* No mobile mocks for inner pages: titles take the home page's mobile size, long Russian words may
     break, and CTA labels wrap instead of running off the screen. */
  .page-title,
  .page-title--game {
    font-size: 34px;
  }
  .content h1,
  .content h2,
  .content h3 {
    hyphens: auto;
  }
  /* anywhere, not break-word: it also lowers min-content, so a long word inside a grid tile cannot
     widen the tile past a 320px screen. */
  .content {
    overflow-wrap: anywhere;
  }
  .cta,
  .cta--secondary {
    white-space: normal;
  }
  .content {
    max-width: none;
    padding-top: 20px;
    padding-bottom: 40px;
  }
  .content--860,
  .content--980,
  .content--1100,
  .content--wide {
    max-width: none;
  }
  .header__brand a {
    position: relative;
  }
  .header__brand a::after {
    content: '';
    position: absolute;
    width: 44px;
    height: 44px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}