/* Inginerul Cafegiu — стили сайта. ЖИВОЙ слой (не ядро).
   Источник: рабочий макет M4 «Amestec» с выбранным набором ?var=ales (решения Михаила 08–10.11.2026):
   сетка d1a, заголовок d2b, конец статьи k2, «Citește și» d4b, служебные тексты одним размером S.
   Правила, числа и запреты — docs/design.md. Новое значение — сначала токен в :root, потом правило.
   Слои: здесь только то, что работает во всех браузерах; свежие «украшения» — блоком в конце,
   без них ничего не ломается. Без скрипта меню показывает css/fara-js.css. */

/* Pangea (Fontwerk, лицензия Base, куплена 30.09.2026) — урезанные файлы, замена = новое имя файла. */
@font-face {
  font-family: 'Pangea';
  src: url('/assets/fonts/pangea-400-2026-11-10.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Pangea';
  src: url('/assets/fonts/pangea-600-2026-11-10.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Pangea';
  src: url('/assets/fonts/pangea-700-2026-11-10.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
/* Метрический запасной шрифт: Arial, подогнанный под Pangea (расчёт 05.11.2026 — журнал решений).
   Safari понимает только size-adjust; ascent/descent/line-gap — для Chrome и Firefox. */
@font-face {
  font-family: 'Pangea Fallback';
  src: local('Arial'), local('ArialMT');
  font-weight: 400;
  size-adjust: 95.49%;
  ascent-override: 103.05%;
  descent-override: 29.74%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Pangea Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 600;
  size-adjust: 92.43%;
  ascent-override: 106.46%;
  descent-override: 30.73%;
  line-gap-override: 0%;
}
/* 700 — расчёт 10.11.2026 тем же способом: ширина Pangea Bold к Arial Bold, привязана к записанному 600 */
@font-face {
  font-family: 'Pangea Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 700;
  size-adjust: 94.06%;
  ascent-override: 104.61%;
  descent-override: 30.19%;
  line-gap-override: 0%;
}

/* ---------- токены ---------- */

:root {
  /* цвета; в скобках — контраст к белому листу */
  --hartie: #ffffff;        /* лист */
  --cerneala: #161616;      /* чернила (18.1:1) */
  --gri: #6b6b6b;           /* мета и второстепенное (5.3:1) */
  --subliniere: #bdbdbd;    /* подчёркивание ссылок в покое — не текст */
  --registru: #d6d6d6;      /* тонкие линии — не текст */
  --tigla-soare: #e0836c;   /* черепица на солнце: подчёркивание при наведении, выделение — не текст */
  --tigla-mare: #d0644a;    /* черепица: «40», черта текущего раздела — фигуры (3.6:1) */
  --tigla-text: #a94a32;    /* черепица в тени: акцентный текст (5.7:1) */

  --font: 'Pangea', 'Pangea Fallback', sans-serif;

  /* шкала — ровно три размера. Корень: 20 px на телефоне, 24 px от 900 px (в % — уважает настройку шрифта в браузере)
     S = 0.75rem — 15 / 18 px: служебные тексты (дата, меню, метки, «Citește și», «Trimite», подвал)
     M = 1rem    — 20 / 24 px: текст, лид, заголовки заметок, подзаголовки в тексте
     L = 2.2rem  — 44 / 53 px: заголовок статьи и главной статьи на главной, «40» */
  --s: 0.75rem;
  --l: 2.2rem;
  /* название сайта в шапке — знак, не текст, поэтому вне шкалы: на телефоне чуть крупнее M (решение Михаила 10.11),
     от 900 px — обычный M */
  --marca: 1.1rem;                         /* 22 px на телефоне */

  --masura: 36rem;                         /* колонка текста: до 720 px на телефоне и планшете; от 900 px — 749 px (ниже) */
  --cutie: calc(var(--masura) + 2rem);     /* колонка + поля по 1rem */
  --ax: 2.8rem;                            /* отступ выносной цитаты */
}

/* ---------- основа ---------- */

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

[hidden] { display: none !important; }

h1, h2, h3, button { font: inherit; color: inherit; }

html {
  font-size: 125%;                         /* 20 px при обычной настройке браузера */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.65;
  color: var(--cerneala);
  background: var(--hartie);
  font-synthesis: none;                    /* не рисовать поддельный жирный и курсив */
  overflow-wrap: break-word;               /* склеенный типографом кусок рвётся, только если иначе вылез бы за край (текст ×2 на узком экране) */
}

::selection { background: var(--tigla-soare); color: var(--cerneala); }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--tigla-text); outline-offset: 3px; }

strong, b { font-weight: 600; }
em, i { font-style: normal; }              /* курсивных начертаний нет — курсив не используем */

.invelis {
  max-width: var(--cutie);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* слова с дефисом и числовые промежутки, которые не рвутся («s-a», «într-o», «8–10») — обёртку ставит типограф сборки */
.lipit { white-space: nowrap; }

.ascuns {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* S — все служебные тексты одним размером (решение 10.11) */
.meta,
.meniu,
.eticheta,
.timp-citire,
.coloana-titlu,
.lista .nota-titlu,
.vezi-toate,
.mai-mult,
.distribuie,
.subsol {
  font-size: var(--s);
  line-height: 1.45;
}

.meta { color: var(--gri); }

/* L — заголовки и «40»: настоящий Bold (Pangea 700) */
.titlu-mare,
.patruzeci-cifra {
  font-size: var(--l);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.titlu-mare {
  margin-top: 0.3rem;
  text-wrap: balance;
  overflow-wrap: break-word;               /* слово шире строки переносится — без прокрутки вбок на 320 */
}

/* ссылка: чернила + серое подчёркивание; при наведении черта — черепица */
.legatura,
.proza a {
  text-decoration: underline;
  text-decoration-color: var(--subliniere);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
.legatura:focus-visible,
.proza a:focus-visible { text-decoration-color: var(--tigla-soare); }
/* наведение — только там, где есть мышь: на телефоне цвет после касания не «залипает» */
@media (hover: hover) {
  .legatura:hover,
  .proza a:hover { text-decoration-color: var(--tigla-soare); }
}

/* рубрика (раздел или метка на карточке главной): «12 februarie 2026 · Jurnal».
   Серая и обычным начертанием, как дата (решения Михаила 10.11; было черепицей, полужирным). При наведении — черепица */
.rubrica { color: var(--gri); }           /* обычное начертание, как дата (решение Михаила 10.11) */
/* ссылка-рубрика: зона касания 44 px по высоте; поверх растянутой ссылки карточки */
a.rubrica { position: relative; z-index: 1; }
a.rubrica::after {
  content: "";
  position: absolute;
  left: -0.2rem;
  right: -0.2rem;
  top: calc(50% - 22px);
  height: 44px;
}
@media (hover: hover) {
  a.rubrica:hover { color: var(--tigla-text); text-decoration: underline; text-decoration-color: var(--tigla-soare); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
}
a.rubrica:focus-visible { color: var(--tigla-text); }

/* метка секции: капс с разрядкой, S, полужирный */
.eticheta {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ---------- шапка: название и «бургер» (телефон), название и разделы (от 900 px) ---------- */

.antet { padding-top: 0.55rem; }

.antet-rand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 0.4rem;
}

/* название занимает всё место слева от «бургера» и переносится, только если не помещается (текст увеличен вдвое) */
.marca-grup { flex: 1 1 0; min-width: 0; }
.marca { position: relative; font-size: var(--marca); font-weight: 600; }
.marca::after {                            /* зона касания 44 px по высоте */
  content: "";
  position: absolute;
  left: -0.2rem;
  right: -0.2rem;
  top: calc(50% - 22px);
  height: 44px;
}
.marca-punct { color: var(--tigla-text); }

/* «бургер» — три линии; кнопка 44×44 px, линии доходят до правого края колонки.
   Открыто — крестик, программа чтения слышит «Închide» (Закрыть). */
.meniu-buton {
  position: relative;                      /* скрытая надпись «Meniu» — внутри кнопки, не за краем экрана */
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -12px;
  border: 0;
  background: none;
  color: var(--cerneala);
  cursor: pointer;
}
.meniu-buton:focus-visible { outline-offset: -2px; }
.burger { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.burger-inchide,
.meniu-buton[aria-expanded="true"] .burger-deschide { display: none; }
.meniu-buton[aria-expanded="true"] .burger-inchide { display: inline; }
@media (hover: hover) { .meniu-buton:hover { color: var(--tigla-text); } }

.meniu { font-weight: 600; }
.meniu a { padding-block: 0.6rem; }        /* касание ≥ 44 px */
@media (hover: hover) { .meniu a:hover { color: var(--tigla-text); } }

/* текущий раздел: черепичный текст + черепичная черта (второй признак — для тех, кто плохо различает цвета) */
.meniu a[aria-current] {
  color: var(--tigla-text);
  text-decoration: underline;
  text-decoration-color: var(--tigla-mare);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* телефон: меню закрыто — не видно; открыто — список под шапкой размером M, сдвигает текст */
@media (max-width: 899.98px) {
  .meniu { display: none; }
  .meniu-buton[aria-expanded="true"] ~ .meniu {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding-bottom: 0.4rem;
    font-size: 1rem;
    line-height: 1.65;
  }
  .meniu-buton[aria-expanded="true"] ~ .meniu a { display: block; padding-block: 0.45rem; }
}

/* ---------- главная ---------- */

/* главная статья — вариант A (решение Михаила 10.11): как начало статьи, теми же отступами —
   заголовок L → «дата · раздел» → лид на всю колонку → фото 3:2 на всю колонку */
.erou { margin-top: 2rem; }
.erou .meta { margin-top: 0.7rem; }
.erou .lead { margin-top: 0.9rem; }
.erou .timp-citire { margin-top: 0.9rem; }
.erou .foto { margin-top: 1.6rem; }
@media (hover: hover) {
  .titlu-mare a:hover { text-decoration: underline; text-decoration-color: var(--tigla-soare); text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; }
}

.foto { display: block; }
.foto .poza { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.sectiune { margin-top: 4rem; }

.doua { display: grid; gap: 2rem; margin-top: 1.1rem; }

/* карточка заметки (главная, страница раздела): заголовок → «дата · раздел» → анонс (решение Михаила 10.11 — дата под заголовком) */
.nota { position: relative; }
.nota-titlu { margin-top: 0.3rem; font-weight: 600; line-height: 1.3; max-width: 18em; }
.nota .nota-titlu { margin-top: 0; }
.nota .meta { margin-top: 0.2rem; }
.nota-titlu a::after { content: ""; position: absolute; inset: 0; }   /* вся карточка — одна зона касания (ведёт на заметку) */
.nota-titlu a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--tigla-soare);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
@media (hover: hover) {
  .nota-titlu a:hover { text-decoration: underline; text-decoration-color: var(--tigla-soare); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
}
.nota-text { margin-top: 0.4rem; color: var(--gri); max-width: 24em; }

.despre-corp { margin-top: 1.1rem; }
.despre-corp .foto .poza { aspect-ratio: 1 / 1; object-position: 55% 40%; }
.despre-text { margin-top: 1.1rem; max-width: 22em; }
.mai-mult { display: inline-block; margin-top: 0.2rem; padding-block: 0.6rem; }   /* касание 45.75 / 54.9 px */

.patruzeci { margin-top: 2rem; }
.patruzeci-cifra { color: var(--tigla-mare); line-height: 0.9; }
.nota-40 { margin-top: 0.4rem; }

.acasa-intro { margin-top: 2rem; }

/* страница раздела: заметки одна под другой */
.note { display: grid; gap: 2rem; margin-top: 2.6rem; }

/* ---------- статья ---------- */

.articol-antet { margin-top: 2rem; }
.articol-antet .meta { margin-top: 0.7rem; }
.articol-antet .lead { margin-top: 0.9rem; max-width: none; }   /* лид — до правого края колонки */

/* без записи — тонкая серая строка «N min de citit» на месте плеера */
.timp-citire { color: var(--gri); }        /* строка сейчас не выводится (решение Михаила 10.11) — стили на её возвращение */
.articol-antet + .timp-citire { margin-top: 1.1rem; }

/* обложка — по ширине колонки, 3:2 (решение 10.11) */
.coperta { margin-top: 1.6rem; }
.coperta .poza { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.proza { margin-top: 2rem; }
.proza > * + * { margin-top: 1.1em; }

/* подзаголовок ## в тексте: M, полужирный, воздух сверху */
.proza h2,
.proza h3 { font-weight: 600; line-height: 1.3; text-wrap: balance; }
.proza h2 { margin-top: 2.2rem; }
.proza h3 { margin-top: 1.8rem; }
.proza h2 + *,
.proza h3 + * { margin-top: 0.5rem; }

/* цитата «> …» — выносная: черепица в тени, полужирный, отступ слева */
.proza blockquote {
  margin-block: 2.2rem;
  padding-left: var(--ax);
  font-weight: 600;
  line-height: 1.4;
  color: var(--tigla-text);
}
.proza blockquote > * + * { margin-top: 0.6em; }

.proza ul,
.proza ol { padding-left: 1.3em; }
.proza li + li { margin-top: 0.35em; }

/* фото в тексте: по колонке, в своей пропорции; вертикальное — не выше 85% видимого экрана, без растяжения */
.proza img {
  width: 100%;
  max-height: 85vh;
  max-height: 85svh;
  object-fit: contain;
}

/* длинный адрес в тексте не вылезает за экран телефона: переносится, только если не помещается */
.proza a { overflow-wrap: anywhere; }

.proza hr { border: 0; border-top: 1px solid var(--registru); margin-block: 2.2rem; }

.proza table { border-collapse: collapse; }
.proza th,
.proza td { padding: 0.35rem 0.75rem 0.35rem 0; border-bottom: 1px solid var(--registru); text-align: left; }
.proza th { font-weight: 600; }
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

/* конец статьи — «письмо с P.S.» (k2, решение 10.11): фото и «Cu drag, Mihai» одной строкой →
   P.S. на всю ширину колонки → тонкая линия → одна полоса действий */
.final {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  grid-template-areas:
    "foto text"
    "scrie scrie"
    "reactii reactii";
  column-gap: 0.9rem;
  align-items: center;
  margin-top: 2rem;
}
.semnatura-foto { grid-area: foto; width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; }
.semnatura-text { grid-area: text; }      /* тем же голосом, что текст: M, 400 */
.scrie-mi { grid-area: scrie; margin-top: 0.8rem; }

.reactii {
  grid-area: reactii;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  margin-top: 1.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--registru);
}

.distribuie { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.7rem; }
.distribuie-eticheta { color: var(--gri); }
.distribuie a,
.distribuie button { padding-block: 0.6rem; }   /* касание 45.75 / 54.9 px */
.distribuie button { border: 0; background: none; padding-inline: 0; cursor: pointer; }

/* «Citește și» — d4b: строки «дата | заголовок», Jurnal и Cafenele друг под другом; дата и заголовок серым, S */
.citeste-si { margin-top: 2.6rem; }
.coloane { display: grid; gap: 2.6rem; margin-top: 1.1rem; }
.coloana { display: flex; flex-direction: column; }
.coloana-titlu {
  font-weight: 600;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--registru);
}
.lista { list-style: none; }
.lista li { position: relative; margin-top: 1.1rem; }
.lista .nota-titlu { margin-top: 0.2rem; max-width: none; font-weight: 400; color: var(--gri); text-wrap: balance; }
/* вся запись — одна зона касания: растянутая ссылка заголовка (правило .nota-titlu a::after выше) */
.vezi-toate { align-self: flex-start; margin-top: 0.6rem; padding-block: 0.6rem; }

/* ---------- подвал: тонкая линия по колонке, ссылки, «Oradea, 2026» ---------- */

.subsol { margin-top: 4rem; padding-bottom: 2rem; }
.subsol .invelis::before {
  content: "";
  display: block;
  border-top: 1px solid var(--registru);
  margin-bottom: 0.6rem;
}
.subsol-meniu { display: flex; flex-wrap: wrap; gap: 0 1.3rem; color: var(--gri); }
.subsol-meniu a { padding-block: 0.6rem; }
@media (hover: hover) { .subsol-meniu a:hover { color: var(--cerneala); } }
.subsol-loc { margin-top: 0.8rem; color: var(--gri); }

/* ---------- от 600 px: «Citește și» строками ---------- */

@media (min-width: 600px) {
  .lista li {
    display: grid;
    grid-template-columns: 6.6rem minmax(0, 1fr);   /* самая широкая дата 2026–2029 («30 septembrie 2028») — 129 / 155 px */
    column-gap: 1rem;
    align-items: baseline;
    margin-top: 1.2rem;
  }
  .lista .meta { white-space: nowrap; }
  .lista .nota-titlu { margin-top: 0; }
  .lista .nota-titlu a::after { inset: -0.6rem 0; }   /* 45.75 / 54.9 px; шаг между записями такой же — зоны стыкуются */
}

/* ---------- от 900 px: компьютер ---------- */

@media (min-width: 900px) {
  html { font-size: 150%; }                /* 24 px */
  :root {
    --masura: 31.2083rem;                  /* колонка 749 px при корне 24 px (решение Михаила 10.11; было 36rem = 864 px) */
    --marca: 1rem;                         /* название сайта — 24 px, как было */
  }

  .antet { padding-top: 1.4rem; }
  .antet-rand { align-items: baseline; column-gap: 1.6rem; }
  .meniu-buton { display: none; }
  .meniu { display: flex; gap: 0 1.1rem; }

  .erou { margin-top: 3.2rem; }
  .erou .foto { margin-top: 2.4rem; }

  .doua { grid-template-columns: 1fr 1fr; }

  .despre-corp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
  }
  .despre-text { margin-top: 0; }

  .articol-antet { margin-top: 3.2rem; }
  .articol-antet + .timp-citire { margin-top: 1.3rem; }
  .coperta { margin-top: 2.4rem; }
  .proza { margin-top: 2.6rem; }

  .inima + .distribuie { margin-left: auto; }   /* сердце слева, «поделиться» справа */
}

/* ---------- движение — только по согласию системы ---------- */

@media (prefers-reduced-motion: no-preference) {
  a, button { transition: color 0.12s ease, border-color 0.12s ease, text-decoration-color 0.12s ease; }
}

/* ---------- украшения: работают не во всех браузерах, без них ничего не ломается ---------- */

p { text-wrap: pretty; }