@font-face {
  font-family: "Playfair Form"; font-weight: 600; font-display: swap;
  src: url(../fonts/playfair-display-cyrillic-600-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Form"; font-weight: 600; font-display: swap;
  src: url(../fonts/playfair-display-latin-600-form.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Golos Form"; font-weight: 400 700; font-display: swap;
  src: url(../fonts/golos-text-cyrillic-form.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Form"; font-weight: 400 700; font-display: swap;
  src: url(../fonts/golos-text-latin-form.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+2191, U+2193, U+2212;
}

:root {
  --ink:      #24130d;
  --ink-soft: #3f2317;
  --paper:    #f3eef9;
  --paper-2:  #ede6f6;
  --line:     rgba(36, 19, 13, .09);
  --accent:   #6a3b26;
  --accent-2: #96603c;
  --accent-fill: #3f2317;
  --accent-rgb: 63, 35, 23;
  --ink-rgb: 36, 19, 13;
  --muted:    #7d6355;
  --faint:    #a08a7d;
  --ok:       #367047;
  --ok-strong: #2a5a39;
  --warn:     #8a571a;
  --warn-bg:  #f8efe4;
  --star:     #e3a53a;
  --danger:   #b5493f;
  --surface:  #ffffff;
  --surface-2:#f8f4fb;
  --surface-3:#efe9f4;
  --theme-color: #f3eef9;
  --serif: "Playfair Form", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Golos Form", "Golos Text", -apple-system, "Segoe UI", Roboto, sans-serif;
}


:root {
  --page-aurora:
    radial-gradient(56% 40% at 12% 8%, rgba(255, 205, 166, .9), transparent 70%),
    radial-gradient(52% 44% at 88% 30%, rgba(186, 182, 255, .8), transparent 70%),
    radial-gradient(60% 46% at 50% 96%, rgba(244, 187, 228, .55), transparent 70%),
    linear-gradient(var(--paper), var(--paper));
  --page-lines:
    repeating-linear-gradient(115deg, rgba(36, 19, 13, .1) 0 1.5px, transparent 1.5px 30px),
    repeating-linear-gradient(25deg, rgba(36, 19, 13, .06) 0 1px, transparent 1px 44px);
}
#bg { background: var(--page-lines), var(--page-aurora); }

html::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") repeat;
  background-size: 180px 180px; opacity: .045; mix-blend-mode: multiply;
}