/* dossier — VBeauty. Сайт розбирає склади, а не веде колонку, тож і мова
   тут етикеткова: конденсований Oswald як на упаковці, Literata для довгих
   розборів, оливковий акцент, майже прямі кути (radius 2px), нуль тіней.

   Чим свідомо НЕ схожий на gloss (nailportal), від якого його треба було
   відвести: там дідона в дисплеї + грот у тексті, тут конденсована + серіф
   у ТЕКСТІ; там фото праворуч від типографіки, тут аркуш специфікації;
   там масштхед, тут шапка-етикетка; там 344°, тут 73°. */

/* ── шапка-етикетка ────────────────────────────────────────────────────── */

.site-header { background: var(--paper); border-bottom: 0; }
.label-plate .wrap {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.label-mark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  border: 2px solid var(--ink); padding: 0.3rem 0.7rem;
  text-decoration: none; color: var(--ink);
}
.label-mark span {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.label-mark img { width: 26px; height: 26px; }
.label-meta {
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--mute); margin-left: auto; text-align: right; line-height: 1.5;
}
.site-header .main-nav {
  display: block; width: 100%; margin: 0;
  border-top: 1px solid var(--rule); border-bottom: 3px solid var(--accent);
}
.site-header .main-nav .wrap {
  display: flex; gap: 1.6rem; flex-wrap: wrap;
}
.site-header .main-nav a {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.5rem 0; border-bottom: 0;
}
.site-header .main-nav a:hover,
.site-header .main-nav a[aria-current="page"] { color: var(--accent); }

/* ── аркуш специфікації замість журнального героя ──────────────────────── */

.dossier-head { padding: 2.4rem 0 1.4rem; }
.doc-label {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--accent); margin: 0 0 0.6rem;
}
.dossier-head h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-display); letter-spacing: -0.005em; max-width: 17em;
}
.dossier-head .lede { font-family: var(--font-body); opacity: 1; color: var(--mute); }

.spec-sheet {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1.6rem; align-items: start; margin-top: 1.8rem;
  border-top: 2px solid var(--ink); padding-top: 0.2rem;
}
.spec-rows { margin: 0; }
.spec-rows > div {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule);
}
.spec-rows dt {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track-label); color: var(--mute);
  padding-top: 0.15rem;
}
.spec-rows dd { margin: 0; font-size: 0.95rem; }
.spec-rows dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.spec-rows dd a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* фото як «зразок» у рамці, а не як журнальна ілюстрація */
.sample { margin: 0; border: 1px solid var(--rule); padding: 0.5rem; background: var(--paper); }
.sample img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.sample figcaption {
  font-family: var(--font-display); font-size: 0.66rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--mute); margin-top: 0.5rem;
}

/* ── підпис системи: рядок специфікації під матеріалом ─────────────────── */

.spec {
  display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center;
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--mute); margin: 0.5rem 0 0;
}
.spec .k { color: var(--accent); }
.spec .bar { width: 1px; height: 0.85em; background: var(--rule); }

.feed { gap: 0; }
.entry-doc { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.entry-doc:last-child { border-bottom: 0; }
.entry-doc .entry-title {
  font-family: var(--font-display); font-weight: 500; font-size: 1.25rem;
  letter-spacing: -0.005em;
}
.entry-doc p { max-width: 46em; }

/* рубрики — простий перелік БЕЗ нумерації: рубрики не є послідовністю,
   а нумеровані маркери доречні тільки там, де порядок щось означає */
.rubric-rows { margin-top: -0.4rem; }
.rubric-rows a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
.rubric-rows a:hover { color: var(--accent); }
.rubric-rows .name {
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.rubric-rows .n {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--track-label); color: var(--mute);
}

.section-head h2 {
  font-family: var(--font-display); font-weight: 500; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: var(--track-label); color: var(--mute);
  padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink);
}

/* ── стаття ────────────────────────────────────────────────────────────── */

.article-head { border-bottom: 2px solid var(--ink); }
.article-head h1 { font-family: var(--font-display); font-weight: 600; }
.prose h2 { font-family: var(--font-display); font-weight: 500; }
.takeaways { border: 1px solid var(--ink); background: var(--paper); border-radius: 0; }
.takeaways h2 { font-family: var(--font-display); font-weight: 500; }

/* ── футер-специфікація ────────────────────────────────────────────────── */

.spec-footer { background: var(--paper); border-top: 3px solid var(--accent); }
.spec-footer .colophon-line {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--mute); margin: 0 0 1.4rem;
}
.spec-footer .spec-rows > div:last-child { border-bottom: 0; }
.spec-tail {
  margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule);
  color: var(--mute); font-size: 0.85rem;
}

@media (max-width: 900px) {
  .spec-sheet { grid-template-columns: 1fr; }
  .sample { max-width: 320px; }
}
@media (max-width: 700px) {
  .label-meta { margin-left: 0; text-align: left; width: 100%; }
  .spec-rows > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .site-header .main-nav { overflow-x: auto; }
}