/* «Кухня изнутри» — тёмный кинематографичный editorial.
   Всё оформление — через переменные из tokens.css. Хардкод здесь — ошибка. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--cream);
  font: var(--fs-2)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ember); }

.wrap { max-width: 66rem; margin: 0 auto; padding: 0 var(--s-3); }
.col  { max-width: var(--measure); margin-inline: auto; }

/* ── Движение при прокрутке (включается только если есть JS и нет reduce) ── */
.anim [data-reveal] { opacity: 0; transform: translateY(14px); }
.anim [data-reveal].in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

/* ── Шапка ── */
.site-header {
  border-bottom: 1px solid var(--line-dark);
  padding: var(--s-3) 0;
}
.site-header .wrap { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.brand {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cream);
  text-decoration: none;
  line-height: 1;
}
.brand:hover { color: var(--ember); }
.tagline {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  letter-spacing: 0.04em;
  color: var(--muted-dark);
}

/* ── Надзаголовок-эйбрау (дата, служебное) ── */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dark);
}

/* ── Лента на главной ── */
main.wrap { padding-top: var(--s-5); padding-bottom: var(--s-6); }

.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.card { position: relative; }
.card-link {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--s-3);
  align-items: stretch;
  text-decoration: none;
  color: inherit;
}
.card-link:not(:has(.card-cover)) { grid-template-columns: 1fr; }

/* Обложка ИЛИ тёплый ember-фолбэк, когда фото ещё нет */
.card-cover, .card-nocover {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-1);
  overflow: hidden;
}
.card-cover { width: 100%; object-fit: cover; background: var(--ground-2); }
.card-nocover {
  background:
    radial-gradient(120% 100% at 15% 0%, rgba(207,90,34,0.5), transparent 60%),
    linear-gradient(160deg, var(--ground-2), var(--ground));
  border: 1px solid var(--line-dark);
}

.card-body { display: flex; flex-direction: column; gap: var(--s-1); justify-content: center; }
.card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--cream);
  text-wrap: balance;
}
.card-link:hover .card-title { color: var(--ember); }
.card-desc { margin: 0; color: var(--muted-dark); font-size: var(--fs-2); line-height: 1.5; }
.card-date { margin-top: var(--s-1); }

/* ── Страница статьи ── */
.article { }

/* Герой: обложка на весь экран с затемнением и титулом поверх; без фото — ember-полоса */
.hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  padding: var(--s-5) 0 var(--s-4);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top, var(--ground) 4%, rgba(20,17,14,0.35) 60%, rgba(20,17,14,0.15));
}
.hero-img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
}
.hero--nocover {
  background:
    radial-gradient(90% 120% at 12% 10%, rgba(207,90,34,0.42), transparent 55%),
    linear-gradient(160deg, var(--ground-2), var(--ground));
}
.hero .wrap { position: relative; z-index: 1; }
.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--cream);
  margin: var(--s-2) 0 0;
  max-width: 20ch;
  text-wrap: balance;
}

/* Тело статьи — «печатная страница на стальном столе» */
.sheet {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-page);
  margin: calc(var(--s-5) * -1) auto var(--s-6);
  position: relative; z-index: 2;
  max-width: calc(var(--measure) + var(--s-5) * 2);
  padding: var(--s-5) var(--s-5) var(--s-4);
}
.back { margin: 0 0 var(--s-3); font-family: var(--font-ui); font-size: var(--fs-1); }
.back a { color: var(--muted-light); text-decoration: none; }
.back a:hover { color: var(--ember-deep); }

.article-body { font-size: var(--fs-2); }
.article-body > * { max-width: var(--measure); }
.article-body p { margin: 0 0 1.15em; }
.article-body a { color: var(--ember-deep); text-underline-offset: 2px; }
.article-body h1, .article-body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: 600; line-height: 1.15;
  margin: 1.5em 0 0.4em; color: var(--ink); text-wrap: balance;
}
.article-body h3, .article-body h4 {
  font-family: var(--font-display);
  font-size: var(--fs-3); font-weight: 600; margin: 1.3em 0 0.3em;
}
.article-body ul, .article-body ol { padding-left: 1.25em; margin: 0 0 1.15em; }
.article-body li { margin: 0.3em 0; }
.article-body blockquote {
  margin: 1.4em 0; padding: 0.2em 0 0.2em var(--s-3);
  border-left: 3px solid var(--ember);
  color: var(--muted-light); font-style: italic;
}
.article-body img, .article-body video, .article-body figure img {
  max-width: 100%; height: auto; border-radius: var(--r-1);
}
.article-body figure { margin: 1.5em 0; }

/* Пустое состояние и подвал */
.empty {
  color: var(--muted-dark); font-family: var(--font-ui);
  padding: var(--s-6) 0; text-align: center;
}
.empty a { color: var(--ember); }
.site-footer {
  border-top: 1px solid var(--line-dark);
  padding: var(--s-3) 0; margin-top: var(--s-5);
  font-family: var(--font-ui); font-size: var(--fs-1); color: var(--muted-dark);
}
.site-footer p { margin: 0; }

@media (max-width: 640px) {
  :root { --fs-5: 2.3rem; --fs-4: 1.6rem; }
  .card-link, .card-link:not(:has(.card-cover)) { grid-template-columns: 1fr; }
  .card-cover, .card-nocover { aspect-ratio: 16 / 9; }
  .sheet { margin-top: calc(var(--s-4) * -1); padding: var(--s-4) var(--s-3); border-radius: var(--r-1); }
  .hero { min-height: 38vh; }
}

@media (prefers-reduced-motion: reduce) {
  .anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}