:root{
  /* ═══ ЧЕТЫРЕ ЦВЕТА. Пятого нет нигде: ни в тексте, ни в знаках ═══ */
  --fon:#16110E;                /* ФОН страницы: почти чёрный, тёплый подтон */
  --krem:#FFF4DC;               /* текст НА ФОНЕ */
  --zelenyj:111,212,78;         /* травяной. Подложка */
  --mandarin:255,138,61;        /* мандарин. Подложка и кнопка действия */

  /* ═══ Подложки. Обе 82%: светлее фона, текст на них тёмный ═══ */
  --podlozhka-zel:rgba(var(--zelenyj),.82);
  --podlozhka-mand:rgba(var(--mandarin),.82);
  --podlozhka-zel-flat:#5EB042;   /* то же сплошным, где стекло невозможно */
  --podlozhka-mand-flat:#D47434;
  --na-podlozhke:var(--fon);      /* текст ВНУТРИ подложки - цвета фона */

  /* ═══ Тёмно-травяной: не новый цвет, а травяной, притушенный коричневым ═══ */
  --svetlo-travyanoj:#8FCF72;   /* обводка подложек: травяной, осветлённый */
  --obvodka:1px solid rgba(255,244,220,.22);

  /* ═══ Тень от букв: уходит вниз и вдаль, тремя слоями ═══ */
  --ten-bukv:0 1px 0 rgba(22,17,14,.55),
             0 3px 4px rgba(22,17,14,.38),
             0 8px 18px rgba(22,17,14,.30);

  /* ═══ Подсветка подложек. Тени у подложек нет ═══ */
  --podsvetka:
    0 1px 0 rgba(255,244,220,.55),
    0 6px 0 -2px rgba(255,244,220,.18),
    0 14px 26px rgba(255,244,220,.20),
    0 30px 50px rgba(0,0,0,.55);
  /* Кнопка НА ПОДЛОЖКЕ - тень. Кнопка НА ФОНЕ - подсветка. */
  --ten-knopki:
    0 2px 4px rgba(22,17,14,.35),
    0 8px 20px rgba(22,17,14,.40);
  --podsvetka-knopka:
    0 1px 0 rgba(255,220,180,.6),
    0 10px 18px rgba(var(--mandarin),.45),
    0 22px 34px rgba(var(--mandarin),.22),
    0 18px 30px rgba(0,0,0,.45);

  /* ═══ Роли коричневого. Это не новые цвета ═══ */
  --tihij:rgba(255,244,220,.70);  /* вторичный текст НА ФОНЕ */
  --tihij-na-podlozhke:rgba(22,17,14,.72);
  --linija:rgba(255,244,220,.20); /* разделители */
  --knopka-fon:rgb(var(--mandarin));  /* заливка главной кнопки */

  --radius:12px;

  /* ── КЕГЛЬ. Промежуточных нет ───────────────────────────── */
  --k-12:12px;  --k-14:14px;  --k-16:16px;  --k-20:20px;
  --k-28:28px;  --k-40:40px;  --k-56:56px;

  /* ── ВЫСОТА СТРОКИ. Своя для каждого кегля ──────────────── */
  --v-12:1.4;   --v-14:1.5;   --v-16:1.6;   --v-20:1.35;
  --v-28:1.2;   --v-40:1.1;   --v-56:0.98;

  /* ── ЖИРНОСТЬ ───────────────────────────────────────────── */
  /* Регулируется только у Bona Nova: у Maratype и Atziluth
     по одному начертанию, менять там нечего. */
  --zh-tekst:400;        /* основной текст, подписи, вторичное */
  --zh-zagolovok:700;    /* заголовки абзацев, метки, кнопки */

  /* ── МЕЖБУКВЕННОЕ ───────────────────────────────────────── */
  --tr-text:0;            /* основной текст - не трогаем */
  --tr-zagolovok:-0.02em; /* крупное сжимаем */
  --tr-display:0.01em;    /* Maratype узкий, буквам нужен воздух */
  --tr-melkoe:0.01em;     /* 12-14px разряжаем */
  --tr-metka:0.08em;      /* КАПСЛОК-метки */

  /* ── ОТСТУПЫ. Шаг 4px, ряд фиксирован ───────────────────── */
  --o-4:4px;   --o-8:8px;   --o-12:12px;  --o-16:16px;
  --o-24:24px; --o-32:32px; --o-48:48px;  --o-64:64px;

  /* ── ОТСТУПЫ ПО НАЗНАЧЕНИЮ ──────────────────────────────── */
  --vnutri-podlozhki:var(--o-24);
  --vnutri-podlozhki-mob:var(--o-16);
  --mezhdu-podlozhkami:var(--o-24);
  --mezhdu-blokami:var(--o-48);
  --posle-zagolovka:var(--o-12);
  --mezhdu-abzacami:var(--o-16);
  --polya-stranicy:var(--o-32);
  --kolonka-max:720px;

  /* ── ШРИФТЫ. Три, у каждого своя работа ─────────────────── */
  --sh-zagolovok:"Maratype",Impact,sans-serif;
  --sh-rukopis:"Atziluth",cursive;
  --sh-tekst:'Bona Nova','Georgia',serif;

  /* Рукописный набирается НА СТУПЕНЬ ВЫШЕ соседнего кегля:
     у него мелкие строчные, на одном размере он теряется. */
  --rk-pri-16:var(--k-20);
  --rk-pri-20:var(--k-28);
  --rk-pri-28:var(--k-40);
  --rk-pri-40:var(--k-56);
}

*{box-sizing:border-box}

body{margin:0;padding:var(--polya-stranicy);background:var(--fon);color:var(--krem);
  font-family:var(--sh-tekst);font-weight:var(--zh-tekst);
  font-size:var(--k-16);line-height:var(--v-16);letter-spacing:var(--tr-text)}

@media (max-width:480px){
  body{padding:var(--o-16)}
  .card,.podlozhka{padding:var(--vnutri-podlozhki-mob)}
}

p{margin:0 0 var(--mezhdu-abzacami)}
h1,h2,h3{margin:0 0 var(--posle-zagolovka);letter-spacing:var(--tr-zagolovok);font-weight:var(--zh-zagolovok)}
h1{font-size:var(--k-40);line-height:var(--v-40)}
h2{font-size:var(--k-28);line-height:var(--v-28)}
h3{font-size:var(--k-20);line-height:var(--v-20)}

/* Рукописный - того же цвета, что весь текст. Обводки и тени у текста нет. */
/* Рукописный - второй главный заголовочный. Цвет как у всего текста. */
.rukopis{font-family:var(--sh-rukopis);color:var(--krem);text-shadow:var(--ten-bukv)}

.zagolovok{font-family:var(--sh-zagolovok);letter-spacing:var(--tr-display);color:var(--krem);
  -webkit-text-stroke:1px var(--fon);paint-order:stroke fill;
  text-shadow:var(--ten-bukv)}
/* Maratype - заголовки на подложках и заголовки абзацев.
   Кремовые, с тонкой тёмной обводкой и лёгкой тенью: без обводки
   светлый заголовок на светлой подложке не держится. */

/* Метка капслоком: мелкая, поэтому полужирная - иначе теряется */
.metka{font-size:var(--k-12);line-height:var(--v-12);letter-spacing:var(--tr-metka);
  text-transform:uppercase;font-weight:var(--zh-zagolovok);color:var(--tihij)}
.card .metka{color:var(--tihij-na-podlozhke)}

/* Кнопки ВСЕГДА светлые - мандариновые или кремовые. Тёмной кнопки не бывает.
   На фоне отделяет подсветка. На подложке ни один светлый цвет не даёт
   нужной границы (мандарин на травяной 1.15, крем 2.48 при норме 3.0),
   поэтому там кнопка получает тонкую тёмную обводку и тень. */
.knopka{border:0;border-radius:var(--radius);padding:var(--o-16) var(--o-24);
  font-family:var(--sh-tekst);font-weight:var(--zh-zagolovok);font-size:var(--k-16);
  background:var(--knopka-fon);color:var(--fon);cursor:pointer}
.knopka-na-fone{box-shadow:var(--podsvetka-knopka)}
.knopka-na-podlozhke{box-shadow:var(--ten-knopki);border:1.5px solid var(--fon)}
/* На мандариновой подложке мандариновая кнопка сливается.
   Там кнопка кремовая - но всё равно СВЕТЛАЯ. Тёмных кнопок не бывает. */
.knopka-na-mandarinovoj{background:var(--krem);color:var(--fon);box-shadow:var(--ten-knopki);border:1.5px solid var(--fon)}

/* Подложки: полупрозрачные, с обводкой, с тенью ИЛИ подсветкой */
.card,.podlozhka{background:var(--podlozhka-zel);border-radius:var(--radius);
  padding:var(--vnutri-podlozhki);border:var(--obvodka);box-shadow:var(--podsvetka);
  color:var(--na-podlozhke);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.podlozhka-mand{background:var(--podlozhka-mand)}


.note{margin-top:var(--o-16);font-size:var(--k-14);line-height:var(--v-14);
  color:var(--tihij);border-left:3px solid var(--knopka-fon);padding-left:var(--o-12)}