/* Обычный вид — класс is-journal на <html>, его ставит читатель переключателем (выбор помнит браузер).
   Здесь всё, что есть только у этого вида: его палитра и размеры и его блоки — шапка, афоризм
   во всю колонку, обращение автора на главной. Без этого файла и разметки этих блоков сайт
   остаётся газетой. */

.is-journal {
  --bg: #f6f3ec;
  --surface: #efeadf;
  --card: #fffdf8;
  --ink: #24221e;
  --muted: #6b655a;
  --rule: #e2dccf;
  --rule-strong: #24221e;
  --badge-border: #cfc8b8;
  --leader: #a39b89;
  --accent: #2f5e3a; /* глубокий зелёный — отсылка к старому сайту */
  --accent-dark: #193720;

  --font-display: 'PT Serif', Georgia, serif;
  --font-label: 'PT Mono', ui-monospace, monospace;

  --container: 1360px;
  --radius: 8px;

  --link-style: dotted;

  --paper-block: none;
  --paper-flex: none;
  --paper-inline: none;
  --journal-block: block;
  --journal-flex: flex;
  --journal-inline: inline;

  --layout-cols: 280px minmax(0, 1fr);
  --layout-gap: 56px;
  --aside-order: -1;
  --aside-border: 0;
  --aside-pad: 0;
  --main-pad-right: 0;
  --reading-cols: 280px minmax(0, 1fr);
  --reading-max: 720px;

  --section-border-top: 0;
  --section-border-bottom: 2px solid var(--rule-strong);
  --section-pad: 0 0 12px;
  --section-title: 700 30px/1.2 var(--font-text);
  --section-title-spacing: 0;
  --section-title-transform: none;

  --page-title: 700 clamp(34px, 4.4vw, 46px)/1.15 var(--font-text);
  --page-title-stretch: 100%;
  --label: 400 13px/1.3 var(--font-label);
  --label-spacing: .1em;

  --card-title: 700 22px/1.3 var(--font-text);
  --card-title-stretch: 100%;
  --card-title-color: var(--accent);
  --card-dir: row;
  --card-gap: 4px 24px;
  --card-pad: 16px 0;
  --pub-cols: minmax(0, 1fr);
  --card-body-basis: 280px;

  --list-font: 400 16px/1.35 var(--font-ui);
  --list-border: 1px solid var(--rule);
  --list-pad: 8px 0;
  --count-font: 400 13px var(--font-label);
  --count-color: var(--muted);

  --row-name: 400 20px/1.3 var(--font-text);
  --row-name-color: var(--accent);
  --row-pad: 15px 0;
  --row-border: 1px solid var(--rule);
  --row-count: 400 14px var(--font-label);

  --prose: 400 20px/1.7 var(--font-text);
  --dropcap-font: inherit;
  --dropcap-float: none;
  --dropcap-color: inherit;
  --dropcap-margin: 0;

  --note-bg: var(--surface);
  --note-border: 0;
  --note-pad: 18px 20px;
  --note-radius: 6px;

  --search-bg: var(--surface);
  --search-margin: 0;
  --search-pad: 18px var(--gutter);
  --search-border: 1px solid var(--rule);
  --input-border: 1px solid var(--badge-border);
  --input-border-bottom: 1px solid var(--badge-border);
  --input-radius: var(--radius);
  --input-bg: var(--card);
  --input-font: 400 18px var(--font-ui);
  --input-pad: 0 18px;
  --focus-ring: 0 0 0 3px rgba(47, 94, 58, 0.18);
  --input-focus-shadow: var(--focus-ring);
  --button-font: 700 17px var(--font-ui);
  --button-spacing: 0;
  --button-transform: none;

  --footer-margin: 0;
  --footer-border: 1px solid var(--rule);
}

/* ---------- site-header: шапка обычного вида; на телефоне — компактная, прилипает сверху ---------- */
.site-header { position: sticky; top: 0; z-index: 20; display: var(--journal-flex); align-items: center; justify-content: space-between; gap: 24px; padding: var(--compact-header-pad); background: var(--bg); border-bottom: 1px solid var(--rule); box-shadow: 0 -16px 0 var(--bg); }
.site-header__brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; }
.site-header__brand:hover { color: var(--ink); }
/* шарж без фона и рамки, высотой с блок «имя + слоган» */
.site-header__logo { flex: none; width: auto; height: clamp(46px, 4.6vw, 58px); }
.site-header__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.site-header__name { font: 700 clamp(20px, 2.2vw, 26px)/1 var(--font-text); }
.site-header__tagline { font-size: clamp(13px, 1.3vw, 15px); color: var(--muted); }
.site-header__utility { display: none; position: absolute; top: 8px; right: var(--gutter); align-items: center; gap: 20px; font-size: 14px; color: var(--muted); }
.site-header__search-button { display: flex; align-items: center; gap: 7px; padding: 0; background: none; border: 0; color: var(--muted); }
.site-header__search-button:hover { color: var(--ink); }
.site-header__divider { width: 1px; height: 14px; background: var(--control-border); }
.site-header__nav { display: none; }

/* ---------- home__quote: афоризм дня во всю колонку главной ---------- */
.home__quote { padding-bottom: 40px; border-bottom: 1px solid var(--rule); }

/* ---------- greeting: обращение автора и шарж-иллюстрация справа ---------- */
.greeting { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 36px; } /* 36px — как отступ иллюстрации от текста на «Обо мне» */
.greeting__body { flex: 1 1 420px; max-width: 680px; display: flex; flex-direction: column; gap: 14px; }
.greeting__title { font: 700 28px/1.2 var(--font-text); }
/* текст обращения — HTML из редактора (content-body) */
.greeting__text { --content-font: 400 19px/1.6 var(--font-text); --content-paragraph-gap: 14px; }
/* шарж-иллюстрация (illustration--small) в колонке 170px — подпись в 3 строки; на телефоне её нет */
.greeting__figure { display: none; flex: 0 0 170px; }

/* ---------- компьютер ---------- */
@media (min-width: 1080px) {
  .site-header { position: relative; padding: 34px var(--gutter) 22px; box-shadow: none; }
  .site-header__utility { display: flex; }
  .site-header__nav { display: flex; }
  .greeting__figure { display: flex; }
}