/* Solim · Концепт B — компоненты
 * Журнал из 90-х: обложка выпуска, разворот, колонки, рубрикация
 */

/* ===== HEADER ===== */

.masthead {
  border-bottom: 3px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--paper);
  transition: padding-block var(--d-med) var(--ease-out);
}

.masthead__top {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--graphite);
}

.masthead__top-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
}

.masthead__main {
  padding-block: var(--s-3);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
}

.masthead__logo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  line-height: 1;
}

.masthead__logo b {
  font-style: italic;
  font-weight: 700;
}

.masthead__logo small {
  font-family: var(--font-mono);
  font-size: 0.55em;
  letter-spacing: var(--ls-widest);
  color: var(--graphite);
  text-transform: uppercase;
  font-weight: 400;
}

.masthead__nav {
  display: flex;
  justify-content: center;
  gap: var(--s-6);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.masthead__nav a {
  color: var(--ink);
  padding: var(--s-2) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}

.masthead__nav a:hover { color: var(--accent); }
.masthead__nav a.is-active { border-bottom-color: var(--ink); }

.masthead__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: 600;
  border-radius: var(--r-pill);
  transition: background var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.masthead__cta:hover { transform: translateY(-1px); }

.masthead__cta:hover { background: var(--accent); }

.menu-toggle {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  padding: var(--s-2);
}

@media (max-width: 920px) {
  .masthead__main { grid-template-columns: auto 1fr auto; }
  .masthead__nav {
    position: fixed;
    inset: 0;
    background: var(--paper);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: var(--s-7) var(--s-5);
    gap: var(--s-5);
    transform: translateY(-100%);
    transition: transform var(--d-med) var(--ease-out);
    z-index: calc(var(--z-header) + 1);
    overflow-y: auto;
  }
  .masthead__nav.is-open { transform: translateY(0); }
  .masthead__nav a {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    line-height: 1;
    color: var(--ink);
  }
  .masthead__cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .menu-toggle.is-open { color: var(--paper); position: fixed; right: var(--s-5); top: var(--s-5); z-index: calc(var(--z-header) + 2); }
}

/* ===== HERO ОБЛОЖКИ ВЫПУСКА ===== */

.cover {
  padding-block: var(--s-8) var(--s-9);
  position: relative;
  border-bottom: 1px solid var(--rule);
}

.cover__masthead-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-7);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--graphite);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s-3);
}

.cover__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6) var(--s-7);
  align-items: end;
}

@media (min-width: 920px) {
  .cover__grid {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--s-7) var(--s-9);
  }
}

.cover__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-block: var(--s-2);
}

.cover__title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 700;
}

.cover__title .display--italic {
  font-style: italic;
  font-weight: 400;
}

.cover__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-xl);
  color: var(--ink-soft);
  margin-top: var(--s-4);
  line-height: 1.3;
  max-width: 24ch;
}

.cover__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ink-soft);
}

.cover__meta strong {
  color: var(--ink);
  font-weight: 600;
}

.cover__portrait {
  aspect-ratio: 4/5;
  background: var(--paper-deep);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px -16px rgba(34, 31, 27, 0.25);
}

.cover__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.92);
}

.cover__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(34,31,27,0.18));
  pointer-events: none;
}

.cover__caption {
  position: absolute;
  left: var(--s-4); bottom: var(--s-4);
  font-family: var(--font-hand);
  font-size: 1.25rem;
  color: var(--paper);
  transform: rotate(-1deg);
  z-index: 2;
}

.cover__toc {
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 3px double var(--ink);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3) var(--s-5);
  align-items: baseline;
}

.cover__toc-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--graphite);
  padding-right: var(--s-4);
  border-right: 1px solid var(--rule);
}

.cover__toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-6);
}

.cover__toc-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--ink);
  font-weight: 400;
  transition: color var(--d-fast) var(--ease-out);
}

.cover__toc-item:hover { color: var(--accent); }

.cover__toc-item__num {
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: var(--graphite);
  letter-spacing: var(--ls-wide);
}

/* ===== HERO QUOTE — цитата-якорь после обложки ===== */

.hero-quote {
  margin: var(--s-9) auto;
  max-width: 28ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.8rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  padding-block: var(--s-6);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.hero-quote::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
}

@media (max-width: 720px) {
  .hero-quote { margin: var(--s-6) auto; padding-block: var(--s-5); }
}

/* ===== SECTION HEAD ===== */

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-4);
  border-bottom: 3px solid var(--ink);
}

.section-head__group { max-width: 70ch; }

.section-head__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--accent);
  margin-bottom: var(--s-2);
}

.section-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
}

.section-head__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.section-head__lead {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-lg);
  color: var(--ink-soft);
  max-width: 50ch;
}

.section-head__link {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
  transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}

.section-head__link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ===== FEATURED — главная статья выпуска ===== */

.featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6) var(--s-8);
  margin-bottom: var(--s-9);
  align-items: center;
}

@media (min-width: 900px) {
  .featured { grid-template-columns: 1.4fr 1fr; }
}

.featured__media {
  aspect-ratio: 4/3;
  background: var(--paper-deep);
  overflow: hidden;
  position: relative;
  border-radius: var(--r-lg);
}

.featured__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}

.featured:hover .featured__media img { transform: scale(1.03); }

.featured__eyebrow {
  margin-bottom: var(--s-3);
}

.featured__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-4);
  text-wrap: balance;
}

.featured__title a:hover { color: var(--accent); }

.featured__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--ink-soft);
  line-height: 1.4;
  max-width: 40ch;
}

.featured__meta {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--graphite);
  text-transform: uppercase;
}

/* ===== JOURNAL GRID — 3-колоночный газетный список ===== */

.journal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7) var(--s-6);
}

@media (min-width: 640px) {
  .journal-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .journal-grid { grid-template-columns: repeat(3, 1fr); }
}

.journal-grid--asym {
  grid-auto-flow: dense;
}

.journal-grid--asym .article-card:nth-child(7n+1) {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .journal-grid--asym .article-card:nth-child(7n+1) {
    grid-column: span 1;
  }
}

/* ===== ARTICLE CARD — карточка статьи в журнале ===== */

.article-card {
  display: block;
  color: var(--ink);
  position: relative;
  isolation: isolate;
}

.article-card__media {
  aspect-ratio: 4/5;
  background: var(--paper-deep);
  overflow: hidden;
  margin-bottom: var(--s-4);
  position: relative;
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px -12px rgba(34, 31, 27, 0.2);
}

.journal-grid--asym .article-card:nth-child(7n+1) .article-card__media {
  aspect-ratio: 16/9;
}

.article-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out), filter 600ms var(--ease-out);
  filter: contrast(1.03);
}

.article-card:hover .article-card__media img {
  transform: scale(1.04);
}

/* Декоративный номер статьи в углу */
.article-card__no {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--paper);
  background: var(--ink);
  padding: 4px 8px;
  text-transform: uppercase;
}

.article-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--accent);
  margin-bottom: var(--s-2);
  font-weight: 500;
}

.article-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: var(--s-2);
  transition: color var(--d-fast) var(--ease-out);
}

.article-card:hover .article-card__title { color: var(--accent); }

.journal-grid--asym .article-card:nth-child(7n+1) .article-card__title {
  font-size: var(--fs-2xl);
}

.article-card__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--ink-soft);
  line-height: 1.4;
  max-width: 40ch;
}

.article-card__meta {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--graphite);
  text-transform: uppercase;
}

/* ===== POST — статья из журнала ===== */

.post-issue-banner {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  text-align: center;
}

.breadcrumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--graphite);
  padding-block: var(--s-4);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.breadcrumbs a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color var(--d-fast) var(--ease-out);
}

.breadcrumbs a:hover { border-color: var(--accent); color: var(--accent); }

.breadcrumbs__sep {
  color: var(--rule);
}

.breadcrumbs__current {
  color: var(--graphite);
}

.post-back {
  position: sticky;
  top: 80px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  margin-bottom: var(--s-5);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
  border-radius: var(--r-pill);
  box-shadow: 0 4px 12px -4px rgba(34, 31, 27, 0.1);
}

.post-back:hover {
  background: var(--ink);
  color: var(--paper);
}

.post-hero {
  padding-block: var(--s-6) var(--s-7);
  text-align: center;
}

.post-hero__eyebrow {
  margin-bottom: var(--s-4);
}

.post-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: 1;
  letter-spacing: var(--ls-tighter);
  margin-block: var(--s-4);
  text-wrap: balance;
}

.post-hero__title em { font-style: italic; }

.post-hero__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-xl);
  color: var(--ink-soft);
  max-width: 50ch;
  margin-inline: auto;
  line-height: 1.4;
}

.post-hero__author {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--graphite);
}

.post-hero__author strong {
  color: var(--ink);
  font-weight: 600;
}

.post-cover {
  margin-bottom: var(--s-7);
  background: var(--paper-deep);
  overflow: hidden;
  position: relative;
  border-radius: var(--r-xl);
  box-shadow: 0 16px 40px -20px rgba(34, 31, 27, 0.3);
}

/* Видео — оригинальный формат (Reels — 9:16) */
.post-cover.is-video {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 540px;
  margin-inline: auto;
  background: var(--ink);
  border-radius: var(--r-xl);
}

.post-cover.is-video video {
  width: 100%;
  height: auto;
  max-height: 88vh;
  aspect-ratio: 9/16;
  object-fit: contain;
  border-radius: var(--r-xl);
}

/* Фото — широкий формат */
.post-cover.is-image {
  aspect-ratio: 4/3;
  max-height: 78vh;
}

.post-cover.is-image img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.post-cover__caption {
  position: absolute;
  left: var(--s-4); bottom: var(--s-4);
  font-family: var(--font-hand);
  color: var(--paper);
  font-size: 1.1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.post-body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--ink);
  line-height: 1.65;
  max-width: 64ch;
  margin-inline: auto;
}

.post-body p + p { margin-top: var(--s-4); }

.post-body__lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: var(--s-5);
  text-wrap: balance;
}

.post-body__lead::first-line { font-variant: small-caps; }

/* Drop cap для первого абзаца body */
.post-body--with-cap > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  margin: 0.05em 0.08em 0 0;
  color: var(--accent);
}

/* ===== INGREDIENTS + STEPS — журнальный рецепт ===== */

.recipe-card {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-block: var(--s-7);
  background: var(--paper-light);
  padding: var(--s-6);
  position: relative;
  border-radius: var(--r-xl);
  box-shadow: 0 4px 12px -4px rgba(34, 31, 27, 0.06), 0 24px 48px -24px rgba(34, 31, 27, 0.2);
}

@media (min-width: 760px) {
  .recipe-card { padding: var(--s-7) var(--s-8); }
}

.recipe-card::before {
  content: "РЕЦЕПТ";
  position: absolute;
  top: -14px;
  left: var(--s-6);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 12px -4px rgba(34, 31, 27, 0.25);
}

.recipe-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}

@media (min-width: 760px) {
  .recipe-card__grid {
    grid-template-columns: 1fr 1.6fr;
    gap: var(--s-8);
  }
}

.ingredients h3,
.steps h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--ink);
}

.ingredients ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ingredients li {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  padding-block: var(--s-2);
  border-bottom: 1px dashed var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
}

.ingredients li:last-child { border-bottom: 0; }

.steps ol {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-2);
}

.steps li + li {
  border-top: 1px dashed var(--rule);
  padding-top: var(--s-3);
}

.steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
  min-width: 2ch;
  text-align: right;
}

/* ===== OLYA NOTE — рукописная вставка ===== */

.olya-note {
  background: var(--paper-light);
  padding: var(--s-5) var(--s-6);
  margin-block: var(--s-7);
  position: relative;
  transform: rotate(-0.7deg);
  max-width: 56ch;
  margin-inline: auto;
  border-radius: var(--r-lg);
  box-shadow: 0 4px 12px -4px rgba(34, 31, 27, 0.08), 0 16px 32px -16px rgba(34, 31, 27, 0.18);
}

.olya-note::before {
  content: "ОТ АВТОРА";
  position: absolute;
  top: -12px; left: var(--s-4);
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 6px 12px;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 12px -4px rgba(184, 60, 30, 0.4);
}

.olya-note__text {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--ink);
}

.olya-note__sig {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--accent);
  text-align: right;
}

/* ===== PULL QUOTE ===== */

.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 0.9rem + 1.5vw, 2rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: 60ch;
  margin: var(--s-8) auto var(--s-7);
  padding: var(--s-7) var(--s-5) var(--s-4);
  text-align: center;
  position: relative;
  text-wrap: balance;
}

.pullquote::before {
  content: "“";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  font-size: 4em;
  line-height: 1;
  color: var(--accent);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
}

.pullquote::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background: var(--rule);
  margin: var(--s-4) auto 0;
}

/* ===== TV SHOW STRIP ===== */

.tv-strip {
  background: var(--paper-deep);
  padding: var(--s-7) 0;
  margin-block: var(--s-7);
}

.tv-strip__inner {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .tv-strip__inner { grid-template-columns: auto 1fr; align-items: center; }
}

.tv-strip__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-2xl);
  color: var(--ink);
  line-height: 1;
}

.tv-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
}

.tv-show {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ink);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
  border-radius: var(--r-pill);
}

.tv-show:hover { background: var(--ink); color: var(--paper); }

.tv-show small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--graphite);
}

/* ===== EDITOR'S LETTER (about-mini) ===== */

.editors-letter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6) var(--s-8);
  align-items: center;
  margin-block: var(--s-8);
}

@media (min-width: 800px) {
  .editors-letter { grid-template-columns: 1fr 1.4fr; }
}

.editors-letter__portrait {
  aspect-ratio: 4/5;
  background: var(--paper-deep);
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: 0 12px 36px -16px rgba(34, 31, 27, 0.25);
}

.editors-letter__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.9);
}

.editors-letter__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--s-3);
}

.editors-letter__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-5);
}

.editors-letter__text {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--ink);
  line-height: 1.6;
  max-width: 52ch;
}

.editors-letter__text p + p { margin-top: var(--s-4); }

.editors-letter__sig {
  margin-top: var(--s-5);
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--accent);
  transform: rotate(-2deg);
  display: inline-block;
}

/* ===== SUPPORT BLOCK (Boosty) ===== */

.support-block {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-8) var(--s-6);
  margin-block: var(--s-8);
  text-align: center;
  border-radius: var(--r-xl);
}

.support-block__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.6;
  margin-bottom: var(--s-3);
}

.support-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-3xl);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-4);
  color: var(--paper);
}

.support-block__text {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  color: var(--paper);
  opacity: 0.85;
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--s-6);
  line-height: 1.5;
}

.support-block__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  transition: transform var(--d-fast) var(--ease-out);
  border-radius: var(--r-pill);
}

.support-block__cta:hover { transform: translateY(-2px); }

/* ===== OZON BLOCK ===== */

.ozon-block {
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  padding: var(--s-7) 0;
  margin-block: var(--s-7);
}

.ozon-block__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: center;
}

@media (min-width: 720px) {
  .ozon-block__inner { grid-template-columns: 1fr auto; }
}

.ozon-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-xl);
  color: var(--ink);
  margin-bottom: var(--s-2);
}

.ozon-block__text {
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: var(--fs-md);
  max-width: 56ch;
}

.ozon-block__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
  border-radius: var(--r-pill);
}

.ozon-block__cta:hover { background: var(--accent); }

/* ===== RELATED ARTICLES ===== */

.related {
  margin-block: var(--s-8);
  padding-top: var(--s-7);
  border-top: 3px solid var(--ink);
}

.related__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-2xl);
  margin-bottom: var(--s-6);
  letter-spacing: var(--ls-tight);
}

/* ===== FILTERS BAR ===== */

.filter-bar {
  position: sticky;
  top: 64px;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  padding-block: var(--s-3);
  margin-bottom: var(--s-7);
}

.filter-bar__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.filter-bar__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--graphite);
  margin-right: var(--s-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
  min-height: 44px;
  border-radius: var(--r-pill);
}

.chip:hover { background: var(--paper-deep); }
.chip.is-active { background: var(--ink); color: var(--paper); }

.chip small {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.7;
}

/* ===== FOOTER — колофон ===== */

.colophon {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s-8) var(--s-6);
  margin-top: var(--s-10);
}

.colophon__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6) var(--s-8);
}

@media (min-width: 720px) {
  .colophon__main { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

.colophon__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  font-style: italic;
  margin-bottom: var(--s-3);
}

.colophon__desc {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--paper);
  opacity: 0.7;
  max-width: 38ch;
}

.colophon h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  margin-bottom: var(--s-3);
  opacity: 0.8;
}

.colophon ul { display: flex; flex-direction: column; gap: var(--s-2); }

.colophon a {
  color: var(--paper);
  opacity: 0.85;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  transition: opacity var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}

.colophon a:hover { opacity: 1; color: var(--accent-soft); }

.colophon__bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(237,231,216,0.2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  opacity: 0.55;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ===== SUPPORT CARDS ===== */

.support-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-block: var(--s-7);
}

@media (min-width: 800px) {
  .support-cards { grid-template-columns: repeat(3, 1fr); }
}

.support-card {
  background: var(--paper-light);
  padding: var(--s-6);
  border-radius: var(--r-xl);
  position: relative;
  box-shadow: 0 4px 12px -4px rgba(34, 31, 27, 0.06), 0 24px 48px -24px rgba(34, 31, 27, 0.2);
  display: flex;
  flex-direction: column;
  transition: transform var(--d-med) var(--ease-out);
}

.support-card:hover { transform: translateY(-4px); }

.support-card--primary {
  background: var(--ink);
  color: var(--paper);
}

.support-card--soft {
  background: var(--paper-deep);
}

.support-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}

.support-card--primary .support-card__num { color: var(--tomato); opacity: 0.9; }

.support-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-4);
  color: inherit;
}

.support-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: inherit;
  opacity: 0.92;
  flex: 1;
  margin-bottom: var(--s-4);
}

.support-card__hint {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--graphite);
  letter-spacing: 0.02em;
  margin-bottom: var(--s-5);
}

.support-card--primary .support-card__hint { color: var(--dust); opacity: 0.6; }

.support-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  border-radius: var(--r-pill);
  align-self: flex-start;
  transition: transform var(--d-fast) var(--ease-out);
}

.support-card__cta:hover { transform: translateY(-1px); }

.support-card--primary .support-card__cta {
  background: var(--paper);
  color: var(--ink);
}

/* ===== QR BLOCK ===== */

.qr-block {
  background: var(--paper-light);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  margin-block: var(--s-7);
  box-shadow: 0 4px 12px -4px rgba(34, 31, 27, 0.06), 0 24px 48px -24px rgba(34, 31, 27, 0.2);
}

.qr-block__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}

@media (min-width: 760px) {
  .qr-block__inner { grid-template-columns: 240px 1fr; gap: var(--s-8); }
}

.qr-block__placeholder {
  aspect-ratio: 1;
  background: var(--paper-deep);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--graphite);
  text-align: center;
  letter-spacing: var(--ls-wide);
}

.qr-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-4);
}

.qr-block__title em { font-style: italic; color: var(--accent); }

.qr-block__text {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: var(--s-3);
}

.qr-block__small {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--graphite);
  letter-spacing: var(--ls-wide);
}

/* ===== HAND-LINE — рукописная подпись секции ===== */

.hand-line {
  margin: var(--s-8) auto;
  text-align: center;
  font-family: var(--font-hand);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  color: var(--accent);
  transform: rotate(-1deg);
}

/* ===== GHOST CARD (сборник «скоро») ===== */

.sbornik--ghost {
  opacity: 0.7;
  position: relative;
}

.sbornik--ghost .sbornik__cover {
  background: linear-gradient(135deg, var(--rule), var(--graphite)) !important;
}

.sbornik--ghost .sbornik__cta {
  pointer-events: none;
  background: var(--rule);
  color: var(--paper-light);
}

.sbornik--ghost::after {
  content: "СКОРО";
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--paper);
  color: var(--ink);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-widest);
  border-radius: var(--r-pill);
  z-index: 3;
}

/* ===== GARDEN EXTRAS (materials + mistakes + when) ===== */

.garden-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-block: var(--s-7);
  max-width: var(--container-narrow);
  margin-inline: auto;
}

@media (min-width: 760px) {
  .garden-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}

.garden-materials,
.garden-mistakes {
  padding: var(--s-5);
  background: var(--paper-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.garden-materials { border-left: 4px solid var(--olive); }
.garden-mistakes { border-left: 4px solid var(--tomato); }

.garden-materials h3,
.garden-mistakes h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  margin-bottom: var(--s-4);
  letter-spacing: var(--ls-tight);
}

.garden-materials h3 { color: var(--olive); }
.garden-mistakes h3 em { color: var(--tomato); font-style: italic; }

.garden-materials ul,
.garden-mistakes ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.garden-materials li {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  padding-block: var(--s-2);
  padding-left: var(--s-4);
  border-bottom: 1px dashed var(--rule);
  position: relative;
  color: var(--ink);
}

.garden-materials li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--olive);
  font-weight: 700;
}

.garden-materials li:last-child { border-bottom: none; }

.garden-mistakes li {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  padding-block: var(--s-2);
  padding-left: var(--s-5);
  position: relative;
  color: var(--ink-soft);
  line-height: 1.45;
}

.garden-mistakes li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: var(--s-2);
  color: var(--tomato);
  font-weight: 700;
}

.garden-when {
  max-width: var(--container-narrow);
  margin: var(--s-5) auto var(--s-7);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--ink);
  padding: var(--s-4);
  background: var(--paper-deep);
  border-radius: var(--r-pill);
}

.garden-when strong {
  font-style: normal;
  color: var(--accent);
  margin-right: var(--s-2);
}

/* ===== MISTAKES PAGE ===== */

.mistakes-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-block: var(--s-6);
}

.mistake-card {
  display: block;
  color: inherit;
}

.mistake-card a {
  display: grid;
  grid-template-columns: 60px 200px 1fr;
  gap: var(--s-5);
  padding: var(--s-5);
  background: var(--paper-light);
  border-radius: var(--r-lg);
  border-left: 4px solid var(--tomato);
  box-shadow: var(--shadow-card);
  transition: transform var(--d-med) var(--ease-out);
  align-items: start;
}

.mistake-card:hover a { transform: translateY(-2px); }

@media (max-width: 760px) {
  .mistake-card a { grid-template-columns: 60px 1fr; }
  .mistake-card__cover { display: none; }
}

.mistake-card__no {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-2xl);
  color: var(--tomato);
  line-height: 1;
}

.mistake-card__cover {
  aspect-ratio: 1;
  background: var(--paper-deep);
  border-radius: var(--r-md);
  overflow: hidden;
}

.mistake-card__cover img {
  width: 100%; height: 100%; object-fit: cover;
}

.mistake-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--tomato);
  margin-bottom: var(--s-2);
}

.mistake-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--s-3);
}

.mistake-card__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--ink-soft);
  line-height: 1.45;
  margin-bottom: var(--s-3);
}

.mistake-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.mistake-card__list li {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  padding-left: var(--s-4);
  position: relative;
  color: var(--ink-soft);
}

.mistake-card__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--tomato);
  font-weight: 700;
}

/* ===== CROSS-KITCHEN LINK ===== */

.cross-kitchen {
  margin-block: var(--s-7);
  padding: var(--s-6);
  background: var(--paper-light);
  border-radius: var(--r-xl);
  border-left: 4px solid var(--olive);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

@media (min-width: 720px) {
  .cross-kitchen { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-6); }
}

.cross-kitchen__icon {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 3rem;
  color: var(--olive);
  line-height: 1;
}

.cross-kitchen__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--olive);
  margin-bottom: var(--s-2);
}

.cross-kitchen__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-xl);
  color: var(--ink);
  line-height: 1.2;
}

.cross-kitchen__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--olive);
  color: var(--paper);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.cross-kitchen__cta:hover { background: var(--ink); }

/* ===== STAMP «ОДОБРЕНО КОТОМ» ===== */

.cat-stamp {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 110px;
  height: 110px;
  pointer-events: none;
  z-index: 3;
  color: #c1342b;
  opacity: 0.88;
  transform: rotate(-12deg);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.cat-stamp svg { width: 100%; height: 100%; }
.cat-stamp::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: rgba(254, 251, 245, 0.78);
  z-index: -1;
}

@media (max-width: 720px) {
  .cat-stamp { width: 78px; height: 78px; top: 12px; right: 12px; }
}

/* ===== TIMELINE ===== */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 760px;
  margin-inline: auto;
  margin-block: var(--s-7);
  border-top: 1px solid var(--rule);
}

.timeline__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-5);
  align-items: baseline;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
}

.timeline__year {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-xl);
  color: var(--accent);
  letter-spacing: -0.01em;
}

.timeline__event {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
}

@media (max-width: 600px) {
  .timeline__item { grid-template-columns: 80px 1fr; gap: var(--s-3); }
  .timeline__year { font-size: var(--fs-lg); }
  .timeline__event { font-size: var(--fs-md); }
}

/* ===== MANIFESTO ===== */

.manifesto {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-block: var(--s-7);
}

@media (min-width: 720px) {
  .manifesto { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}

.manifesto__col {
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--paper-light);
  box-shadow: 0 4px 12px -4px rgba(34, 31, 27, 0.06), 0 24px 48px -24px rgba(34, 31, 27, 0.2);
}

.manifesto__col--no {
  background: var(--paper-deep);
}

.manifesto__col--yes {
  background: var(--paper-light);
  border: 2px solid var(--accent);
}

.manifesto__col h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--ink);
}

.manifesto__col--yes h3 { color: var(--accent); }

.manifesto__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.manifesto__col li {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.45;
  padding-left: var(--s-4);
  position: relative;
}

.manifesto__col--no li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--graphite);
  font-weight: 700;
}

.manifesto__col--yes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.manifesto__sig {
  text-align: center;
  margin-top: var(--s-6);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--ink);
}

.manifesto__hand {
  font-family: var(--font-hand);
  font-style: normal;
  color: var(--accent);
  font-size: 1.6rem;
  margin-left: var(--s-2);
}

/* ===== SBORNIKI (PDF витрина) ===== */

.sbornik {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--paper-light);
  margin-bottom: var(--s-5);
  transition: transform var(--d-med) var(--ease-out);
  border-radius: var(--r-xl);
  box-shadow: 0 6px 18px -8px rgba(34, 31, 27, 0.12), 0 24px 48px -24px rgba(34, 31, 27, 0.2);
}

.sbornik:hover { transform: translateY(-2px); }

@media (min-width: 760px) {
  .sbornik { grid-template-columns: 280px 1fr auto; align-items: center; gap: var(--s-7); }
}

.sbornik__cover {
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, var(--accent), var(--ink));
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
}

.sbornik__cover__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--s-4);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1.05;
}

.sbornik__cover__no {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--paper);
}

.sbornik__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-3);
}

.sbornik__desc {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 50ch;
}

.sbornik__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--accent);
  margin-block: var(--s-3);
}

.sbornik__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
  border-radius: var(--r-pill);
}

.sbornik__cta:hover { background: var(--accent); }


/* ================================================
 * MOBILE — итеративные правки под 375-900px
 * ================================================ */

@media (max-width: 920px) {
  /* Hero — компактнее */
  .cover { padding-block: var(--s-6) var(--s-7); }
  .cover__title { font-size: clamp(3rem, 9vw, 5.5rem); line-height: 0.92; }
  .cover__subtitle { font-size: var(--fs-lg); max-width: none; }
  .cover__meta { gap: var(--s-3) var(--s-4); }
  .cover__masthead-line { font-size: 10px; gap: var(--s-2); }
  .cover__masthead-line span:last-child { display: none; }
  .cover__toc-list { gap: var(--s-3) var(--s-4); }
  .cover__toc-item { font-size: var(--fs-md); }

  /* Topbar layout — компактная шапка */
  .masthead__top { font-size: 10px; }
  .masthead__top-inner span:nth-child(2) { display: none; }
  .masthead__main { grid-template-columns: auto auto; gap: var(--s-3); padding-block: var(--s-3); }
  .masthead__logo { font-size: var(--fs-md); }
  .masthead__logo small { font-size: 0.5em; }

  /* Section heads — меньше воздуха */
  .section-head { margin-bottom: var(--s-5); padding-bottom: var(--s-3); }
  .section-head__title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .section-head__lead { font-size: var(--fs-md); }

  /* Filter-bar — только один ряд на мобиле + scrollable chips */
  .filter-bar { top: 56px; padding-block: var(--s-2); margin-bottom: var(--s-5); }
  .filter-bar__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .filter-bar__row::-webkit-scrollbar { display: none; }
  .chip { padding: 8px 12px; font-size: var(--fs-xs); white-space: nowrap; flex-shrink: 0; min-height: 40px; }
  .filter-bar__label { white-space: nowrap; flex-shrink: 0; }

  /* Featured — на мобиле в 1 колонку */
  .featured { gap: var(--s-5); }
  .featured__title { font-size: var(--fs-2xl); }

  /* Journal-grid — на узких 1 колонку */
  .journal-grid--asym .article-card:nth-child(7n+1) { grid-column: span 1; }

  /* Post-hero — компактный */
  .post-hero { padding-block: var(--s-5) var(--s-5); }
  .post-hero__title { font-size: clamp(2.25rem, 9vw, 3.5rem); line-height: 1.02; }
  .post-hero__lead { font-size: var(--fs-md); padding-inline: 0; }
  .post-hero__author { font-size: 10px; }

  /* Post-cover для видео — на мобиле всю ширину */
  .post-cover.is-video {
    max-width: 100%;
  }
  .post-cover.is-video video {
    max-height: 75vh;
  }

  /* Recipe-card — одна колонка, меньше padding */
  .recipe-card { padding: var(--s-5) var(--s-4); margin-block: var(--s-6); }
  .recipe-card__grid { grid-template-columns: 1fr !important; gap: var(--s-5); }
  .recipe-card::before { left: var(--s-4); padding: 4px 12px; }
  .ingredients li { font-size: var(--fs-md); padding-block: var(--s-2); gap: var(--s-2); }
  .steps li { gap: var(--s-3); }
  .steps li::before { font-size: 1.5rem; min-width: 1.7ch; }

  /* Olya-note — без поворота, без выноса */
  .olya-note { padding: var(--s-4); margin-block: var(--s-5); transform: none; }
  .olya-note__text { font-size: 1.2rem; }
  .olya-note__sig { font-size: 1.05rem; }

  /* Pullquote — меньше */
  .pullquote { font-size: clamp(1.15rem, 4vw, 1.5rem); padding: var(--s-5) var(--s-3) var(--s-3); }
  .pullquote::before { font-size: 3em; }

  /* Post-back sticky — не съезжать к самому верху */
  .post-back { top: 64px; }

  /* TV-strip — компактнее */
  .tv-strip { padding-block: var(--s-5); }
  .tv-strip__heading { font-size: var(--fs-xl); }
  .tv-show { padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); }

  /* Editor's letter — без рамки около портрета */
  .editors-letter { gap: var(--s-5); }
  .editors-letter__portrait { aspect-ratio: 4/5; max-width: 80%; margin-inline: auto; }
  .editors-letter__title { font-size: var(--fs-2xl); }

  /* Support block — компактнее */
  .support-block { padding: var(--s-6) var(--s-4); margin-block: var(--s-5); }
  .support-block__title { font-size: var(--fs-2xl); }
  .support-block__text { font-size: var(--fs-md); }
  .support-block__cta { padding: var(--s-3) var(--s-5); font-size: var(--fs-sm); }

  /* Ozon block — компактнее */
  .ozon-block { padding-block: var(--s-5); }
  .ozon-block__title { font-size: var(--fs-lg); }

  /* Sbornik — на мобиле колоночно */
  .sbornik { padding: var(--s-4); grid-template-columns: 1fr; gap: var(--s-4); }
  .sbornik__cover { aspect-ratio: 4/3; }
  .sbornik__title { font-size: var(--fs-xl); }
  .sbornik__price { font-size: var(--fs-xl); }

  /* Breadcrumbs — компактнее, перенос */
  .breadcrumbs { font-size: 11px; padding-block: var(--s-2); }

  /* Colophon — 1 колонка с разделителями */
  .colophon { padding-block: var(--s-6); margin-top: var(--s-7); }
  .colophon__main { gap: var(--s-4); }
  .colophon__brand { font-size: var(--fs-xl); }
  .colophon__bottom { font-size: 10px; gap: var(--s-2); }
}

@media (max-width: 600px) {
  .cover__title { font-size: clamp(2.8rem, 12vw, 4rem); }
  .featured__title { font-size: var(--fs-xl); }
  .article-card__title { font-size: var(--fs-lg); }
  .journal-grid--asym .article-card:nth-child(7n+1) .article-card__title { font-size: var(--fs-xl); }
  .post-hero__title { font-size: clamp(2rem, 10vw, 3rem); }
  .container { width: min(100% - 1.5rem, var(--container)); }
}

@media (max-width: 380px) {
  .masthead__cta { display: none; }
  .cover__masthead-line { font-size: 9px; }
}

/* Уменьшить размер видео-cover на мобилке — макс. 65vh высоты */
@media (max-width: 768px) {
  .post-cover.is-video video {
    max-height: 65vh;
  }
}

/* ===== 14-BLOCK ГЛАВЫ (топ-5 viral) ===== */

.chapters {
  max-width: var(--container-narrow);
  margin: var(--s-7) auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.chapter {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s-5);
  align-items: start;
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule);
}
.chapter:first-child { border-top: none; padding-top: 0; }
.chapter__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 6px;
  position: relative;
}
.chapter__label::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 24px;
  height: 2px;
}
.chapter--usually .chapter__label::before { background: var(--ink-soft); }
.chapter--but .chapter__label::before { background: var(--tomato); }
.chapter--me .chapter__label::before { background: var(--olive); }
.chapter--tell .chapter__label::before { background: var(--accent); }
.chapter__text {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink);
}
.chapter__text p:not(:last-child) { margin-bottom: var(--s-3); }
.chapter--but .chapter__text { color: var(--ink); }
.chapter--me .chapter__text { font-weight: 500; }

@media (max-width: 720px) {
  .chapter {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .chapter__label { padding-top: 0; }
}

.signoff {
  max-width: var(--container-narrow);
  margin: var(--s-7) auto;
  text-align: center;
  font-family: var(--font-hand);
  font-size: var(--fs-xl);
  color: var(--ink);
  line-height: 1.4;
  padding: var(--s-5) var(--s-4);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ===== КАРТА «3 СОТКИ» ===== */

.dacha-map {
  max-width: var(--container-narrow);
  margin: var(--s-6) auto var(--s-7);
}
.dacha-map__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  background: #fefbf5;
}
.dacha-map__hotspot {
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  transform-origin: center;
  transform-box: fill-box;
}
.dacha-map__hotspot:hover {
  opacity: 0.85;
  transform: scale(1.02);
}
.dacha-map__hotspot:hover rect,
.dacha-map__hotspot:hover circle {
  stroke-width: 2.5;
}
.dacha-map__caption {
  margin-top: var(--s-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.dacha-map__hand {
  display: block;
  font-family: var(--font-hand);
  font-size: var(--fs-lg);
  color: var(--ink);
  margin-bottom: var(--s-2);
}

@media (max-width: 600px) {
  .dacha-map__svg { border-radius: var(--r-lg); }
}