:root {
  --ink: #16181d;
  --bg: #ffffff;
  --muted: #3a3d45;
  --muted2: #6a6d75;
  --accent: #1a4fd6;
  --orange: #ff5a1f;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Golos Text', ui-sans-serif, system-ui, sans-serif;
}
/* Home page only: locked to exactly one screen (see body.home below).
   Other pages (catalogs, articles) scroll normally — their content
   grows over time and must never be clipped. */
body.home { min-height: 100vh; display: flex; flex-direction: column; }
.page-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; }

/* Desktop/tablet: home page locked to exactly one screen, no scroll.
   Mobile keeps normal scrolling — forcing a phone page to never scroll
   fights how people actually use a phone. */
@media (min-width: 641px) {
  body.home { height: 100dvh; min-height: 0; overflow: hidden; }
}

a { text-decoration: none; }
button { font: inherit; cursor: pointer; appearance: none; border: none; background: none; }
::selection { background: var(--orange); color: #ffffff; }

.nav-link { color: var(--ink); border-bottom: 2px solid transparent; transition: border-color .15s ease; }
.nav-link:hover, .nav-link.is-active { border-bottom-color: var(--orange); }
.contact-link { color: var(--ink); border-bottom: 2px solid var(--ink); transition: color .15s ease, border-color .15s ease; }
.contact-link:hover { color: var(--orange); border-bottom-color: var(--orange); }

.header-bar { border-bottom: 3px solid var(--ink); flex: none; }
.header {
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(10px, 1.8vh, 16px) 32px;
  flex-wrap: wrap; gap: 16px; max-width: 1120px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 22px; height: 22px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-weight: 900; font-size: 16px; letter-spacing: .01em; }
.brand-tag { font-weight: 700; font-size: 10px; letter-spacing: .14em; color: var(--muted2); margin-top: 4px; }
.nav { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 13px; flex-wrap: wrap; }
.nav-btn {
  display: inline-block; padding: 9px 18px; border: 2px solid var(--ink);
  font-weight: 700; font-size: 13px;
  transition: filter .15s ease;
}
.nav-btn-solutions { background: var(--accent); color: #ffffff; }
.nav-btn-blog { background: var(--orange); color: #ffffff; }
.nav-btn:hover { filter: brightness(0.88); }

.hero { padding: clamp(16px, 4vh, 36px) 32px clamp(12px, 2.5vh, 24px); }
.hero-inner { max-width: 1120px; margin: 0 auto; }
.eyebrow-pill {
  display: inline-block; background: var(--orange); color: #ffffff; font-weight: 700;
  font-size: 12px; letter-spacing: .12em; padding: 7px 14px; margin-bottom: clamp(8px, 1.4vh, 14px);
}
h1.hero-title { font-weight: 900; font-size: clamp(26px, 3.2vw + 1.2vh, 40px); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 clamp(8px, 1.4vh, 14px); max-width: 780px; }
.hero-rule { width: 56px; height: 4px; background: var(--ink); margin: 0 0 clamp(8px, 1.4vh, 14px); }
.hero-sub { font-size: clamp(14px, 0.9vw + 0.6vh, 16px); line-height: 1.45; color: var(--muted); max-width: 620px; margin: 0; font-weight: 500; }

.section { padding: clamp(12px, 2.8vh, 26px) 32px clamp(16px, 3vh, 28px); border-top: 3px solid var(--ink); }
.section-inner { max-width: 1120px; margin: 0 auto; }
.eyebrow { font-weight: 700; font-size: 12px; letter-spacing: .14em; color: var(--accent); margin-bottom: clamp(4px, 0.9vh, 8px); }
h2.section-title { font-weight: 900; font-size: clamp(19px, 1.1vw + 1vh, 23px); margin: 0 0 clamp(8px, 1.8vh, 16px); }
p.section-lede { font-size: 15px; line-height: 1.4; color: var(--muted); max-width: 640px; margin: 0 0 12px; font-weight: 500; }

.card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--ink); border: 3px solid var(--ink);
}
.card { background: #ffffff; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-tag {
  display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: .1em;
  color: var(--accent); border: 2px solid var(--accent); padding: 4px 10px; width: fit-content;
}
.card-date { font-weight: 700; font-size: 11px; letter-spacing: .06em; color: var(--muted2); }
.card h3 { font-weight: 900; font-size: 20px; line-height: 1.3; margin: 0; }
.card p { font-size: 14.5px; line-height: 1.55; margin: 0; color: var(--muted); }
.card-link { color: var(--ink); }
.card-link:hover h3 { color: var(--orange); }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; border: 3px solid var(--ink); }
.pillar { padding: clamp(12px, 2.2vh, 22px) clamp(16px, 2.2vw, 28px); }
.pillar-a { background: var(--accent); color: #ffffff; border-right: 3px solid var(--ink); }
.pillar-b { background: var(--orange); color: #ffffff; }
.pillar-head { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(5px, 1vh, 10px); }
.pillar-icon { width: 20px; height: 20px; flex: none; border: 2px solid #ffffff; }
.pillar-label { font-weight: 700; font-size: 12px; letter-spacing: .08em; opacity: .9; }
.pillar h3 { font-weight: 900; font-size: 17px; margin: 0 0 clamp(4px, 0.8vh, 7px); }
.pillar p { font-size: 13.5px; line-height: 1.4; margin: 0; font-weight: 500; opacity: .94; }

.post-header { padding: 52px 32px 32px; border-bottom: 3px solid var(--ink); }
.post-header-inner { max-width: 760px; margin: 0 auto; }
.post-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
h1.post-title { font-weight: 900; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.1; margin: 0; }
.post-body { padding: 44px 32px 60px; }
.post-body-inner { max-width: 760px; margin: 0 auto; font-size: 16.5px; line-height: 1.65; color: var(--muted); font-weight: 500; }
.post-stub { font-style: italic; color: var(--muted2); }

/* Normal article flow — blocks stay exactly where markdown put them, natural
   height, no forced screens, no snapping. The only effect: the block you're
   reading stays at full opacity, the ones you've scrolled away from dim down,
   so attention follows the current thought instead of the whole page
   competing for it at once. */
body.story .header-bar { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.story-slide { opacity: .45; transition: opacity .4s ease; }
.story-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .story-slide { opacity: 1; transition: none; }
}
.back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; margin-top: 36px; }

/* Taxonomy: difficulty pill next to tag/date, collections eyebrow, audience line, tag pills after body */
.post-difficulty { font-weight: 700; font-size: 11px; letter-spacing: .06em; color: var(--muted2); border: 2px solid var(--muted2); padding: 3px 9px; }
.post-collections { font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--orange); margin: 0 0 8px; text-transform: uppercase; }
.post-audience { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.post-audience-label { font-size: 13px; font-weight: 700; color: var(--muted2); }
.post-audience-pill { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--accent); border: 1.5px solid var(--accent); padding: 4px 10px; border-radius: 999px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; }
.post-tag-pill { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted2); border: 1px solid var(--muted2); padding: 4px 10px; border-radius: 999px; }

/* Article body typography (rendered from Markdown) */
.post-body-inner h2 { font-weight: 900; font-size: 24px; line-height: 1.25; margin: 40px 0 14px; color: var(--ink); }
.post-body-inner h3 { font-weight: 900; font-size: 19px; line-height: 1.3; margin: 28px 0 10px; color: var(--ink); }
.post-body-inner p { margin: 0 0 16px; }
.post-body-inner ul { margin: 0 0 16px; padding-left: 22px; }
.post-body-inner li { margin-bottom: 6px; }
.post-body-inner strong { color: var(--ink); font-weight: 800; }
.post-body-inner code { background: #f1f2f5; padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.post-body-inner a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.post-body-inner table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14.5px; }
.post-body-inner th, .post-body-inner td { border: 1px solid var(--ink); padding: 8px 10px; text-align: left; vertical-align: top; }
.post-body-inner th { background: var(--ink); color: #ffffff; font-weight: 700; }

/* Collapsible blocks (native <details>) inside article bodies */
.post-body-inner details { border: 2px solid var(--ink); padding: 14px 18px; margin: 0 0 16px; }
.post-body-inner details summary { cursor: pointer; font-weight: 700; }
.post-body-inner details[open] summary { margin-bottom: 10px; }

/* Inline term footnote — read the article "pure" and skip these, or hover
   (desktop) / tap (touch, via article.js toggling .is-open) a term for a
   short clarification without leaving the sentence. */
.term { position: relative; border-bottom: 2px dotted var(--accent); color: var(--accent); font-weight: 600; cursor: help; }
.term-note {
  position: absolute; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: 320px;
  background: #ffffff; color: var(--muted); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 12px 14px; font-size: 13.5px; font-weight: 500; line-height: 1.5; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease;
  z-index: 50;
}
.term:hover .term-note, .term:focus .term-note, .term.is-open .term-note { opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 640px) {
  .term-note { left: 50%; transform: translate(-50%, 4px); }
  .term:hover .term-note, .term:focus .term-note, .term.is-open .term-note { transform: translate(-50%, 0); }
}

/* Citation footnotes — small square marker, click opens a compact card with
   source + one-line core takeaway; the whole card is a link (target=_blank). */
.cite-wrap { position: relative; display: inline-block; }
.cite {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 2px; border-radius: 2px;
  border: 1.5px solid var(--accent); background: #ffffff; color: var(--accent);
  font-size: 10px; font-weight: 700; line-height: 1; vertical-align: super;
  cursor: pointer; padding: 0;
}
.cite:hover, .cite-wrap.is-open .cite { background: var(--accent); color: #ffffff; }
.cite-card {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 60;
  display: none; flex-direction: column; gap: 6px; width: max-content; max-width: 320px;
  background: #ffffff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 9px 12px;
}
.cite-wrap.is-open .cite-card { display: flex; }
/* Line 1: the takeaway — plain text, not a link, not clickable. */
.cite-takeaway { font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
/* Line 2: the actual source — this is the only clickable part. */
.cite-source { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.cite-source:hover { text-decoration: underline; }
.cite-share { font-size: 12px; flex: none; }
@media (max-width: 640px) {
  .cite-card { left: auto; right: 0; max-width: 260px; }
}

/* Pixel-tile map: a real 10×6 grid (Kenney "Tiny Battle" pack, CC0 —
   site/assets/tiles/) with Депо → rails → 3 Станции → Пользователь routed
   across it, a hand-drawn train token that steps tile-to-tile on Далее/
   Назад, a small particle burst on each move, and a modal per stop. */
.iso-wrap { border: 3px solid var(--ink); margin: 0 0 16px; }
.iso-viewport { position: relative; }
.iso-grid {
  position: relative; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(10, 1fr);
  width: 100%; height: 480px;
  background-image: linear-gradient(to right, var(--muted2) 1px, transparent 1px), linear-gradient(to bottom, var(--muted2) 1px, transparent 1px);
  background-size: calc(100% / 16) calc(100% / 10);
  border-right: 1px solid var(--muted2); border-bottom: 1px solid var(--muted2);
}
@media (max-width: 640px) {
  .iso-grid { height: 340px; }
}
/* Real grid cells, not percentage-positioned absolute divs — CSS Grid's own
   track sizing avoids the sub-pixel seams that calc(100%/N) positioning left
   showing as thin white lines between tiles. */
.iso-cell { position: relative; width: 100%; height: 100%; background-size: cover; image-rendering: pixelated; transition: filter .35s ease, opacity .35s ease; }
.iso-cell.has-tile { z-index: 1; }
.iso-cell.iso-dimmed { filter: grayscale(60%) brightness(.55); }

/* Own focus mechanic for the visualization, independent of the chapter-level
   scroll fade: a start button appears once the map itself scrolls into
   view; clicking it begins a guided tour — one stop lit up at a time while
   the rest of the map dims, each stop paired with a modal. */
.iso-start-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 10; border: 2px solid var(--ink); background: var(--accent); color: #ffffff;
  font-weight: 800; font-size: 15px; letter-spacing: .04em; padding: 14px 28px;
  cursor: pointer; box-shadow: 5px 5px 0 var(--ink);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease, transform .15s ease;
}
.iso-start-btn.is-visible { opacity: 1; visibility: visible; }
.iso-start-btn:hover { transform: translate(-50%, -50%) scale(1.04); }
.iso-spotlight {
  position: absolute; border: 3px solid #e3342f; border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(227, 52, 47, .25), 0 0 18px rgba(227, 52, 47, .55);
  pointer-events: none; z-index: 5; opacity: 0; visibility: hidden;
  /* Position (left/top/width/height) is NOT transitioned on purpose — it
     should pop out at the old spot and pop in at the new one, not glide. */
  transition: opacity .2s ease, visibility .2s ease;
}
.iso-spotlight.is-visible { opacity: 1; visibility: visible; }
.iso-train {
  position: absolute; z-index: 6; pointer-events: none;
  background-image: url('tiles/vehicle.png'); background-repeat: no-repeat; background-position: center; background-size: contain;
  image-rendering: pixelated; opacity: 0; visibility: hidden;
  transition: left .44s linear, top .44s linear, transform .3s ease, opacity .15s ease, visibility .15s ease;
}
.iso-train.is-visible { opacity: 1; visibility: visible; }
.iso-popup-next[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .iso-train { transition: opacity .15s ease, visibility .15s ease; }
}
/* Small popup near the spotlight — same weight as .term-note/.cite-card,
   not a full-screen modal (that darkened the whole article, not just the
   map: .modal is position:fixed + inset:0). */
.iso-popup {
  position: absolute; z-index: 20; width: max-content; max-width: 220px;
  background: #ffffff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 10px 12px; opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease, left .4s cubic-bezier(.4,0,.2,1), top .4s cubic-bezier(.4,0,.2,1);
}
.iso-popup.is-visible { opacity: 1; visibility: visible; }
.iso-popup-close { position: absolute; top: 4px; right: 6px; background: none; border: none; font-size: 15px; font-weight: 900; line-height: 1; color: var(--muted2); cursor: pointer; padding: 2px; }
.iso-popup h4 { margin: 0 22px 4px 0; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.iso-popup p { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.iso-popup-next { display: block; margin-left: auto; border: 2px solid var(--ink); background: var(--accent); color: #ffffff; font-weight: 700; font-size: 11.5px; padding: 5px 10px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .iso-cell, .iso-spotlight, .iso-start-btn, .iso-popup { transition: none; }
}
.iso-cell-label {
  position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 800; white-space: nowrap; color: var(--ink);
  background: #ffffff; padding: 0 3px; border: 1px solid var(--ink); z-index: 3;
}

/* Modal component — shared by article.js across all article pages */
.modal-trigger { display: inline-block; border: 2px solid var(--ink); padding: 9px 16px; font-weight: 700; font-size: 13px; background: var(--accent); color: #ffffff; cursor: pointer; margin: 0 0 16px; }
.modal-trigger:hover { filter: brightness(0.92); }
.modal { position: fixed; inset: 0; background: rgba(22, 24, 29, .72); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 100; }
.modal.is-open { display: flex; }
.modal-panel { background: #ffffff; border: 3px solid var(--ink); max-width: 640px; width: 100%; max-height: 86vh; overflow-y: auto; padding: 28px; position: relative; }
.modal-panel h3 { margin: 0 0 12px; font-weight: 900; }
.modal-close { position: absolute; top: 12px; right: 14px; font-size: 22px; font-weight: 900; line-height: 1; background: none; border: none; cursor: pointer; color: var(--ink); }

.contact-cta {
  display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 19px;
  border-bottom: 2px solid var(--ink); padding-bottom: 9px;
}

@media (max-width: 640px) {
  .header, .hero, .section, .post-header, .post-body { padding-left: 20px; padding-right: 20px; }
  .pillars, .card-grid { grid-template-columns: 1fr; }
  .pillar-a { border-right: none; border-bottom: 3px solid var(--ink); }
  .nav { gap: 8px; }
  .nav-btn { padding: 8px 14px; font-size: 12px; }
  .header { gap: 10px; }
  .brand-name { font-size: 14px; }
  .brand-tag { font-size: 9px; }
}