/* Блог «Хан Солопренёр» — направление «Фирменный плакат» (docs/design/blog-direction.md).
   Графит владеет шапкой, титульным полем и финальной полосой; текст читается на белом.
   Только токены библиотеки API Company: своих цветов здесь нет. */

:root {
  --blog-ink: var(--gray-900);          /* графит: поле, линейки, заголовки */
  --blog-ink-text: var(--gray-0);       /* текст на графите */
  --blog-ink-soft: var(--gray-200);     /* подзаголовок на графите */
  --blog-ink-muted: var(--gray-300);    /* дата и время чтения на графите */
  --blog-page: var(--gray-0);
  --blog-link: var(--accent-600);
  --blog-gutter: var(--space-7);        /* поля страницы на компьютере */
  --blog-rail: 200px;                   /* колонка паспорта */
  --blog-measure: 620px;                /* около 64 знаков Inter Tight при 18 px */
  --blog-overlap: 128px;                /* насколько обложка заходит на графит */
}

* { box-sizing: border-box; }
html { scrollbar-color: var(--gray-300) var(--blog-page); }
body {
  margin: 0;
  background: var(--blog-page);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-50); color: var(--gray-950); }
a { color: var(--blog-link); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent-700); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); }
img { display: block; max-width: 100%; height: auto; }

.layout {
  max-width: calc(1180px + 2 * var(--blog-gutter));
  margin: 0 auto;
  padding: 0 var(--blog-gutter);
}

/* Шапка: графит, белый мини-знак API Company, название блога справа. */
.masthead { background: var(--blog-ink); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.masthead__logo img { height: 24px; width: auto; }
.masthead__name { color: var(--blog-ink-text); font-weight: 600; text-decoration: none; }
.masthead__name:hover { color: var(--blog-ink-text); text-decoration: underline; }
.masthead :focus-visible, .field :focus-visible, .band :focus-visible { outline-color: var(--blog-ink-text); }

/* Титульное поле: заголовок и подзаголовок справа, дата и время чтения слева. */
.field { background: var(--blog-ink); color: var(--blog-ink-text); padding: var(--space-7) 0 var(--space-7); }
.post--cover .field { padding-bottom: calc(var(--blog-overlap) + var(--space-6)); }
.post__head {
  display: grid;
  grid-template-columns: var(--blog-rail) minmax(0, 1fr);
  column-gap: var(--space-7);
}
.post__title {
  grid-column: 2;
  margin: 0;
  max-width: 18ch;
  font-size: clamp(32px, 2.2rem + 1.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 700;
  text-wrap: balance;
}
.post__sub {
  grid-column: 2;
  margin: var(--space-4) 0 0;
  max-width: 34ch;
  color: var(--blog-ink-soft);
  font-size: clamp(19px, 1rem + .5vw, 24px);
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 500;
  text-wrap: balance;
}
.post__meta {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-top: var(--space-3);
  display: grid;
  align-content: start;
  gap: var(--space-1);
  color: var(--blog-ink-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Тело статьи: обложка наезжает на поле, паспорт слева, колонка текста справа. */
.post__layout {
  display: grid;
  grid-template-columns: var(--blog-rail) minmax(0, 1fr);
  column-gap: var(--space-7);
  grid-template-areas:
    "side cover"
    "side body"
    "side sources";
  align-items: start;
}
.post__cover { grid-area: cover; margin: calc(-1 * var(--blog-overlap)) 0 0; }
.post__cover img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  background: var(--surface-sunken);
  animation: settle .9s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes settle { from { transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .post__cover img { animation: none; } }

.post figcaption {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.post__side { grid-area: side; align-self: stretch; padding-top: var(--space-5); }
.passport {
  position: sticky;
  top: var(--space-6);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 2px solid var(--blog-ink);
}
.passport__row + .passport__row { margin-top: var(--space-4); }
.passport__row:first-child dd { font-size: var(--text-xl); letter-spacing: -.02em; }
.passport dt { color: var(--text-muted); font-size: var(--text-sm); }
.passport dd {
  margin: 2px 0 0;
  font-weight: 700;
  font-size: var(--text-md);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.post__body {
  grid-area: body;
  max-width: var(--blog-measure);
  padding-top: var(--space-6);
  font-size: 18px;
  line-height: var(--leading-loose);
}
.post__body > :first-child { margin-top: 0; }
.post__body p, .post__body ul, .post__body ol { margin: 0 0 var(--space-4); text-wrap: pretty; }
.post__body li { margin-bottom: var(--space-1); }
/* Bullets are drawn, not list-style: browser extensions that hide list markers
   with !important cannot remove them, and the small graphite square matches the rules. */
.post__body ul, .post__sources ul { list-style: none; padding-left: 0; }
.post__body ul > li, .post__sources ul > li { position: relative; padding-left: 1.5em; }
.post__body ul > li::before, .post__sources ul > li::before {
  content: "";
  position: absolute;
  left: .3em;
  top: .72em;
  width: 6px;
  height: 6px;
  background: var(--blog-ink);
}
.post__sources ul > li::before { top: .6em; }
.post__body ol { padding-left: 1.5em; }
.post__body ol > li { list-style-type: decimal; }
.post__body ol > li::marker { color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Разделы открываются графитовой линейкой — тот же знак, что над паспортом. */
.post__body h2, .post__sources h2 {
  margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-3);
  border-top: 2px solid var(--blog-ink);
  font-size: clamp(22px, 1.2rem + .6vw, 28px);
  line-height: var(--leading-tight);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.post__body strong { font-weight: 700; }
.post__body figure { margin: var(--space-7) 0; }
/* Site screenshots are often white: a hairline keeps the picture's edge visible on white. */
.post__body figure img, .entry__cover { outline: 1px solid var(--border); outline-offset: -1px; }
.post__body figure img { border-radius: var(--radius-sm); background: var(--surface-sunken); }
/* Таблица расходов прокручивается внутри своего блока, не расширяя страницу. */
.post__body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 var(--space-5);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-variant-numeric: tabular-nums;
}
.post__body th, .post__body td {
  border-bottom: var(--border-width) solid var(--border);
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  text-align: left;
  vertical-align: top;
}
.post__body th { border-bottom: 2px solid var(--blog-ink); font-weight: 600; }

.post__sources {
  grid-area: sources;
  max-width: var(--blog-measure);
  margin-bottom: var(--space-8);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}
.post__sources ul { margin: 0; }

/* Финальная полоса: куда идти дальше. */
.band { background: var(--blog-ink); color: var(--blog-ink-text); }
.post:not(:has(.post__sources)) .band { margin-top: var(--space-8); }
.band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
.band__text { margin: 0; max-width: 28ch; font-size: clamp(20px, 1rem + .6vw, 26px); font-weight: 700; letter-spacing: -.015em; line-height: var(--leading-tight); }
.band__action {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border-radius: 0;
  background: var(--blog-ink-text);
  color: var(--blog-ink);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition);
}
.band__action:hover { color: var(--blog-ink); transform: translateY(-1px); }

/* Главная: название блога на графите, ниже список разборов. */
.field--index { padding: var(--space-7) 0 var(--space-8); }
.intro { max-width: 760px; }
.intro__title { margin: 0; font-size: clamp(32px, 2rem + 1.4vw, 52px); line-height: 1.04; letter-spacing: -.03em; }
.intro__tagline { margin: var(--space-4) 0 0; color: var(--blog-ink-soft); font-size: clamp(18px, 1rem + .4vw, 22px); line-height: 1.35; max-width: 40ch; }
.intro__tagline a { color: var(--blog-ink-text); }

.entries { list-style: none; margin: 0; padding: var(--space-7) 0 var(--space-8); display: grid; gap: var(--space-7); }
.entry + .entry { padding-top: var(--space-7); border-top: var(--border-width) solid var(--border); }
.entry__link {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-6);
  align-items: start;
  color: inherit;
  text-decoration: none;
}
.entry__cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.entry__text { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 2px solid var(--blog-ink); }
.entry__title { font-size: clamp(22px, 1.2rem + .7vw, 30px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.entry__sub { font-size: var(--text-md); font-weight: 500; color: var(--gray-700); text-wrap: balance; }
.entry__lead { color: var(--text-muted); line-height: var(--leading-normal); text-wrap: pretty; }
.entry__meta { color: var(--text-muted); font-size: var(--text-sm); }
/* Andrei's call: the list's headline turns API Company red on hover. */
.entry__link:hover .entry__title { color: var(--red-600); }
.empty { padding: var(--space-7) 0 var(--space-8); color: var(--text-muted); font-size: var(--text-md); }

.foot { border-top: var(--border-width) solid var(--border); color: var(--text-muted); font-size: var(--text-sm); }
.foot__inner { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-top: var(--space-5); padding-bottom: var(--space-5); }
.foot a { color: inherit; }

/* Планшет и телефон: одна колонка — заголовок, подзаголовок, дата, обложка, паспорт, текст. */
@media (max-width: 860px) {
  :root { --blog-gutter: var(--space-4); --blog-overlap: 56px; }
  .field { padding-top: var(--space-6); }
  .post__head { grid-template-columns: minmax(0, 1fr); }
  .post__title, .post__sub { grid-column: 1; }
  .post__meta { grid-row: auto; grid-column: 1; padding-top: var(--space-4); display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
  .post__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "cover" "side" "body" "sources";
  }
  .post__side { padding-top: var(--space-5); }
  .passport { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
  .passport__row + .passport__row { margin-top: 0; }
  .passport__row:first-child { grid-column: 1 / -1; }
  /* A last row left without a pair takes the full width instead of half of it. */
  .passport__row:last-child:nth-child(even) { grid-column: 1 / -1; }
  .post__body { padding-top: var(--space-5); font-size: 17px; }
  .post__cover img { aspect-ratio: 16 / 10; }
  .entry__link { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .masthead__name { font-size: var(--text-sm); }
}