/* СТИЛІ СТОРІНОК-ВІДПОВІДЕЙ — один файл на всі, а не копія в кожній.

   Правила тут ті самі, що лежали всередині `about.html` і `privacy.html`
   власними копіями. Винесено, бо сторінок стало сорок із гаком (шість тем
   сімома мовами), і сорок копій розійдуться так само певно, як розійшлися
   чотири копії шапки до появи `site.css`.

   Змінні теми лишаються ТУТ, а не в `site.css`: той файл лінкує й
   `index.html`, якому потрібні лише шрифт із шапкою, а тема в нього своя,
   зав'язана на живу сцену.

   `about.html`, `privacy.html` і `index.html` поки везуть власні копії цих
   самих правил. Це залишок, не задум: їх треба перевести сюди окремим
   заходом і звірити посимвольно, а не «на око». */

:root { --paper:#F2EDE1; --ink:#141412; --soft:rgba(20,20,18,.62); --hair:rgba(20,20,18,.22); }
@media (prefers-color-scheme: dark) {
  :root { --paper:#16140F; --ink:#EDE6D4; --soft:rgba(237,230,212,.62); --hair:rgba(237,230,212,.22); }
}
/* Тема йде за ГОДИНОЮ, а не за системою: клас ставить скрипт у сторінці.
   Обидва правила потрібні — системне як запасне, доки скрипт не відпрацював. */
html.day { --paper:#F2EDE1; --ink:#141412; --soft:rgba(20,20,18,.62); --hair:rgba(20,20,18,.22); }
html.night { --paper:#16140F; --ink:#EDE6D4; --soft:rgba(237,230,212,.62); --hair:rgba(237,230,212,.22); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-weight: 300; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 22px 72px; }
/* Шапка липка, тож вона поза `.wrap`, але тримає ту саму колонку. */
#top { max-width: 720px; margin: 0 auto; }

h1 { font-weight: 100; font-size: clamp(26px,5vw,34px); line-height: 1.15; margin: 44px 0 0; }
.lede { color: var(--soft); font-size: 16px; line-height: 1.55; margin: 14px 0 0; }
h2 { font-weight: 100; font-size: 25px; line-height: 1.15; margin: 44px 0 10px; scroll-margin-top: 24px; }
p { color: var(--soft); font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
p a { color: var(--ink); }
ul { color: var(--soft); font-size: 14px; line-height: 1.6; padding-left: 1.1em; margin: 0 0 12px; }
li { margin: 0 0 6px; }

/* Таблиці тут маленькі — два стовпці чисел і пояснень. Волосінь замість
   рамок, бо решта сайту теж тримається на волосіні. Перший стовпець не
   переноситься: у ньому стоїть число або короткий ярлик, і перенесений
   навпіл він читається як два рядки. */
table { border-collapse: collapse; width: 100%; margin: 0 0 12px; }
td { color: var(--soft); font-size: 14px; line-height: 1.6; padding: 7px 0;
     border-bottom: 1px solid var(--hair); vertical-align: top; }
td:first-child { color: var(--ink); white-space: nowrap; padding-right: 18px; }
/* На вузькому екрані «не переноситься» ламає розкладку сильніше, ніж
   перенесення: 320 пікселів не тримають довгий ярлик і текст поруч. */
@media (max-width: 420px) {
  td:first-child { white-space: normal; padding-right: 12px; }
}

/* Розділ джерел — дрібніший за решту: його читає той, хто вже дочитав. */
h2.src { font-size: 18px; }
p.src { font-size: 13px; }

hr { border: 0; border-top: 1px solid var(--hair); margin: 48px 0 0; }
footer { color: var(--soft); font-size: 13px; margin: 20px 0 0; }
footer a { color: inherit; }