/* Страницы документов «Вогульского крокодила», второй вариант (politika.html, soglasie.html, pravila.html):
   уголь в шапке и подвале, лист — лён, медь — акцент. Source Serif 4 + Google Sans. */
:root {
  --voda: #171513;
  --voda-2: #211E1B;
  --gory: #A39B8F;
  --pesok: #F4F1EA;
  --list: #FBFAF7;
  --pesok-3: #DCD4C5;
  --chernila: #1C1B19;
  --chernila-2: #5E5A53;
  --salat: #D39A6A;
  --derevo: #7A5034;
  --zag: "Source Serif 4", Georgia, serif;
  --tekst: "Google Sans", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pesok); color: var(--chernila-2); font: 400 16.5px/1.7 var(--tekst); }
.in { max-width: 860px; margin: 0 auto; padding-left: clamp(16px, 5vw, 40px); padding-right: clamp(16px, 5vw, 40px); }

.dok-shapka { background: var(--voda); border-bottom: 1px solid rgba(211, 154, 106, .5); }
.dok-shapka .in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px; padding-block: 16px; }
.dok-nazad { color: var(--pesok); font: 400 22px/1.1 var(--zag); text-decoration: none; }
.dok-nazad:hover { color: var(--salat); }
.dok-drugoy { color: var(--gory); font-size: 14px; text-underline-offset: 3px; }
.dok-drugoy:hover { color: var(--salat); }

.dok { margin-block: clamp(22px, 5vw, 48px); padding-block: clamp(30px, 6vw, 60px) 52px; background: var(--list); overflow-wrap: break-word; border-radius: 26px; }
.dok-metka { margin: 0 0 14px; color: #A65D30; font: 500 12.5px/1.2 var(--tekst); letter-spacing: .2em; text-transform: uppercase; }
.dok h1 { margin: 0 0 12px; color: var(--chernila); font: 300 clamp(32px, 5.6vw, 54px)/1.05 var(--zag); letter-spacing: -.02em; }
.dok-podzag { margin: 0 0 30px; color: var(--chernila-2); font-size: 16.5px; }
.dok h2 { margin: 38px 0 12px; color: var(--chernila); font: 400 clamp(22px, 3vw, 29px)/1.2 var(--zag); }
.dok p { margin: 0 0 12px; }
.dok .punkt { position: relative; padding-left: 1.5em; }
.dok .punkt::before { content: ""; position: absolute; left: .35em; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: #A65D30; }
.dok b { color: var(--chernila); font-weight: 700; }
.dok a { color: var(--chernila); text-decoration-color: #A65D30; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pusto { padding: 0 .35em; background: rgba(211, 154, 106, .3); color: var(--chernila); }

.dok-podval { background: var(--voda); color: var(--gory); }
.dok-podval .in { display: flex; flex-wrap: wrap; gap: 6px 24px; padding-block: 22px 34px; font-size: 13px; line-height: 1.6; }
.dok-podval p { margin: 0; }
.dok-podval a { color: var(--pesok); text-underline-offset: 3px; text-decoration-color: rgba(244, 241, 234, .35); }

@media (max-width: 600px) {
  .dok { margin-block: 0; border-radius: 0; }
}

@media print {
  body { background: #fff; color: #000; }
  .dok-shapka, .dok-podval { display: none; }
  .dok { margin: 0; padding: 0; background: none; clip-path: none; }
  .dok h1, .dok h2, .dok b, .dok-metka, .dok-podzag, .dok a { color: #000; }
  .dok .punkt::before { background: #000; box-shadow: none; }
  .pusto { background: none; color: #000; }
}