:root {
  --bg: #efe8d8;
  --paper: #fffaf0;
  --ink: #2a211a;
  --muted: #74695f;
  --line: rgba(67, 52, 39, .16);
  --brown: #5f4128;
  --brown-2: #8c653a;
  --shadow: 0 22px 60px rgba(46, 36, 24, .11);
  --radius: 16px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --max: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 250, 239, .8), rgba(239, 232, 216, .92)),
    url("/img/fon2.jpg");
  background-attachment: fixed;
  font: 16px/1.62 Georgia, "Times New Roman", serif;
}

a { color: #664116; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #2b1c0e; }
img { display: block; max-width: 100%; height: auto; }

.site-bg-ad {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.site-bg-ad span {
  position: absolute;
  inset: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: .28;
  pointer-events: auto;
}

.site-bg-ad::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(0px, calc((100vw - var(--max)) / 2 - 220px));
  width: max(0px, calc((100vw - var(--max)) / 2 + 220px));
  pointer-events: auto;
}

.site-bg-ad::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: max(0px, calc((100vw - var(--max)) / 2 - 220px));
  width: max(0px, calc((100vw - var(--max)) / 2 + 220px));
  pointer-events: auto;
}

.page { width: min(var(--max), calc(100% - 28px)); margin: 14px auto 0; }
.page { position: relative; z-index: 1; }

@media (min-width: 921px) {
  body.has-bg-ad .page {
    margin-top: var(--bg-ad-top-offset, 76px);
  }
}
.top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.logo-box, .ad-box, .menu, .content, .article, .side-card, .footer {
  border: 1px solid rgba(72, 55, 38, .18);
  background: rgba(255, 250, 240, .84);
  box-shadow: var(--shadow);
}

.logo-box {
  min-height: 116px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, .92), rgba(238, 224, 198, .88)),
    url("/img/rheader-bg.jpg");
  background-size: cover;
  background-position: center;
  text-decoration: none;
}

.logo-img {
  width: min(100%, 330px);
  height: auto;
  filter: drop-shadow(0 12px 26px rgba(62, 42, 22, .14));
}

.ad-box {
  min-height: 116px;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 250, 240, .95), rgba(255, 250, 240, .76)),
    url("/img/atheader-bg.jpg");
  background-size: cover;
  background-position: center;
}

.ad-text { padding: 18px 24px; }
.ad-label, .label, .kicker, .section-label {
  color: var(--brown-2);
  text-transform: uppercase;
  letter-spacing: .12em;
  font: 700 11px/1.2 Arial, sans-serif;
}

.slogan {
  height: 100%;
  min-height: 116px;
  padding: 18px 20px;
  color: #fff5df;
  background: linear-gradient(135deg, rgba(61, 42, 23, .92), rgba(120, 73, 34, .78));
  display: grid;
  place-items: center;
  text-align: center;
  font-style: italic;
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-top: 12px;
  border-radius: 13px;
  overflow: hidden;
  color: #fff7e7;
  background: linear-gradient(180deg, rgba(96, 65, 40, .98), rgba(67, 45, 28, .98));
}

.menu-inner { min-height: 46px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 6px 12px; }
.mobile-brand { display: none; color: #fff5df; text-decoration: none; font: 900 21px/.9 Arial, sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.mobile-brand span { display: block; margin-top: 3px; color: rgba(255, 245, 223, .7); font: 700 9px/1 Arial, sans-serif; letter-spacing: .1em; }
.menu a { color: #fff5df; text-decoration: none; padding: 8px 10px; border-radius: 10px; font: 700 13px/1.2 Arial, sans-serif; }
.menu a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.menu-button span, .menu-button:before, .menu-button:after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  border-radius: 2px;
  background: #fff5df;
  transition: transform 180ms var(--ease), opacity 180ms var(--ease);
}

.menu-button span { top: 21px; }
.menu-button:before { top: 14px; }
.menu-button:after { top: 28px; }
.grid, .layout { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 16px; align-items: start; }

.content, .article {
  border-radius: 18px;
  padding: clamp(22px, 2.5vw, 34px);
  background: rgba(255, 250, 240, .92);
}

.content {
  background:
    linear-gradient(180deg, rgba(255, 250, 240, .95), rgba(255, 250, 240, .9)),
    url("/img/rheader-bg.jpg");
  background-size: cover;
  background-position: top right;
}

.intro { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 24px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
h1 { margin: 8px 0 10px; color: #251a12; font: 700 clamp(2rem, 3.4vw, 3.05rem)/1.02 Arial, sans-serif; letter-spacing: -.045em; }
.subtitle, .lead { margin: 0; max-width: 68ch; color: #5f554c; font-size: 18px; }
.dwarf-note { border-radius: 16px; padding: 14px; color: #fff5df; background: linear-gradient(180deg, rgba(48, 34, 23, .18), rgba(48, 34, 23, .88)), url("/img/gnomki-niki.jpg"); background-size: cover; background-position: center; min-height: 170px; display: flex; align-items: end; font: 700 13px/1.25 Arial, sans-serif; }
.section { margin-top: 28px; }
.section h2, .article-body h2 { margin: 0 0 14px; color: #2b1d12; font: 700 26px/1.1 Arial, sans-serif; letter-spacing: -.035em; }
.section p, .article-body p, .story p, .about p { margin: 0 0 16px; color: #3f352d; }

.directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dir-link { min-height: 106px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .42); text-decoration: none; }
.dir-link:hover, .news a:hover, .popular a:hover { background: rgba(255, 255, 255, .72); }
.dir-link strong { display: block; color: #3a2716; font: 700 20px/1.1 Arial, sans-serif; margin-bottom: 6px; }
.dir-link span { color: var(--muted); font-size: 15px; }
.contact-note, .copyright-note { border: 1px solid var(--line); border-radius: 14px; padding: 15px; background: rgba(255, 255, 255, .38); color: #5b4633; }
.contact-note { font: 700 15px/1.45 Arial, sans-serif; }
.copyright-note { font-size: 13px; line-height: 1.55; }

.news { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .36); }
.news a { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 72px; padding: 12px 14px; border-top: 1px solid var(--line); text-decoration: none; }
.news a:first-child { border-top: 0; }
.news small { color: var(--brown-2); font: 700 11px Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.news b { display: block; color: #352517; font: 700 16px/1.25 Arial, sans-serif; }
.popular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.popular a { overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .44); text-decoration: none; }
.popular img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.popular span { display: block; padding: 11px 12px 13px; color: #382715; font: 700 15px/1.25 Arial, sans-serif; }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; color: var(--muted); font: 13px Arial, sans-serif; }
.breadcrumbs a { color: #7a552c; text-decoration: none; }
.article-head { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.article-body { max-width: 820px; margin-top: 24px; }
.legacy-content { max-width: 820px; color: #3f352d; }
.legacy-content center { text-align: center; }
.legacy-content center img { margin-left: auto; margin-right: auto; }
.legacy-content img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
.legacy-content > img, .legacy-content center > img { display: block; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .42); }
.legacy-content table { width: 100% !important; max-width: 100%; margin: 18px auto; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid rgba(67, 52, 39, .22) !important; border-radius: 14px; background: rgba(255, 255, 255, .42) !important; color: #2f251d; font: 15px/1.45 Arial, sans-serif; }
.legacy-content td { padding: 12px; border-color: rgba(67, 52, 39, .2) !important; vertical-align: top; }
.legacy-content table[bgcolor="#333333"], .legacy-content table[bgcolor="#333"] { background: #f8f1e5 !important; }
.legacy-content table[bgcolor="#333333"] td, .legacy-content table[bgcolor="#333"] td { color: #2f251d; }
.legacy-content strong { color: #2d2118; }

.related-links { margin: 28px 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .42); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.related-links h2 { grid-column: 1 / -1; margin: 0 0 4px; color: #2b1d12; font: 700 24px/1.12 Arial, sans-serif; letter-spacing: -.03em; }
.related-links a { padding: 10px 12px; border-radius: 10px; background: rgba(95, 65, 40, .08); color: #5f3d1e; font: 700 14px/1.25 Arial, sans-serif; text-decoration: none; }
.related-links a:hover { background: rgba(95, 65, 40, .14); color: #2b1c0e; }

.not-found-box {
  margin: 8px 0 26px;
  min-height: 230px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 42px);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, .92), rgba(235, 220, 194, .78)),
    url("/img/rheader-bg.jpg");
  background-size: cover;
  background-position: center;
}

.not-found-box strong {
  color: #5b3a1e;
  font: 900 clamp(4rem, 9vw, 7.5rem)/.85 Arial, sans-serif;
  letter-spacing: -.08em;
}

.not-found-box p {
  max-width: 520px;
  margin: 0;
  color: #5f554c;
  font-size: 18px;
}

.not-found-box a {
  margin-top: 8px;
  padding: 11px 16px;
  border-radius: 12px;
  color: #fff5df;
  background: linear-gradient(180deg, #704a2a, #4a301d);
  text-decoration: none;
  font: 700 14px/1 Arial, sans-serif;
}

.contact-social-box {
  margin: 28px auto 34px;
  width: min(100%, 640px);
  min-height: 128px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, .9), rgba(235, 220, 194, .68)),
    url("/img/rheader-bg.jpg");
  background-size: cover;
  background-position: center;
}

.contact-social-box a {
  min-width: 128px;
  min-height: 48px;
  border-radius: 14px;
  padding: 11px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff5df;
  background: linear-gradient(180deg, #704a2a, #4a301d);
  text-decoration: none;
  font: 700 14px/1 Arial, sans-serif;
  box-shadow: 0 12px 24px rgba(46, 36, 24, .14);
}

.contact-social-box a:hover {
  color: #fff;
  background: linear-gradient(180deg, #845634, #563720);
}

.contact-social-box svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex: 0 0 auto;
}

.notice-box {
  margin: 30px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .38);
  color: #3f352d;
  font: 16px/1.55 Arial, sans-serif;
}

.sidebar { display: grid; gap: 14px; position: sticky; top: 78px; }
.side-card { border-radius: 16px; overflow: hidden; background: rgba(255, 250, 240, .9); }
.side-card h3 { margin: 0; padding: 15px 16px; color: #fff5df; background: linear-gradient(180deg, #604027, #3f2a1a); font: 700 16px/1.2 Arial, sans-serif; }
.side-list { padding: 10px 16px 14px; display: grid; gap: 9px; font: 700 14px/1.25 Arial, sans-serif; }
.side-list a { padding-bottom: 9px; border-bottom: 1px solid var(--line); text-decoration: none; }
.side-list a:last-child { border-bottom: 0; padding-bottom: 0; }

.l2dom-ad { clear: both; margin: 28px auto; max-width: 100%; text-align: center; }
.ad-text .l2dom-ad { margin: 8px 0 0; text-align: left; }
.sidebar .l2dom-ad { margin: 0; text-align: left; }
.l2dom-banner-link { display: block; overflow: hidden; border-radius: 14px; background: rgba(255, 250, 240, .72); text-decoration: none; }
.l2dom-banner-link img { width: 100%; height: auto; max-height: 250px; object-fit: cover; }
.ad-text .l2dom-banner-link { max-width: 520px; border: 1px solid rgba(95, 65, 40, .14); }
.ad-text .l2dom-banner-link img { max-height: 74px; object-fit: contain; background: rgba(255, 250, 240, .65); }
.sidebar .l2dom-banner-ad { border-radius: 16px; overflow: hidden; border: 1px solid rgba(72, 55, 38, .18); background: rgba(255, 250, 240, .9); box-shadow: var(--shadow); }
.sidebar .l2dom-banner-link, .sidebar .l2dom-ad-placeholder { border-radius: 16px; }
.sidebar .l2dom-banner-link img, .sidebar .l2dom-ad-placeholder { min-height: 250px; object-fit: cover; }
.l2dom-ad-placeholder { min-height: 118px; border: 1px dashed rgba(95, 65, 40, .36); border-radius: 14px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 18px; color: #5f4128; background: linear-gradient(135deg, rgba(255, 250, 240, .88), rgba(235, 220, 194, .76)), url("/img/lagheader-bg.jpg"); background-size: cover; background-position: center; font: 700 15px Arial, sans-serif; text-decoration: none; }
.l2dom-ad-placeholder span { padding: 5px 8px; border-radius: 8px; background: rgba(95, 65, 40, .1); color: #8c653a; font-size: 12px; }

.footer { margin: 18px 0 26px; border-radius: 16px; padding: 16px 20px; display: grid; grid-template-columns: 210px minmax(0, 1fr) 150px; gap: 20px; align-items: center; color: var(--muted); font: 14px Arial, sans-serif; }
.footer-logo { display: inline-block; color: #5b3a1e; text-decoration: none; font: 900 24px/.9 Arial, sans-serif; letter-spacing: -.065em; text-transform: uppercase; text-align: center; }
.footer-logo span { display: block; margin-top: 4px; color: #8c653a; font: 700 9px/1 Arial, sans-serif; letter-spacing: .11em; text-transform: uppercase; text-align: center; }
.footer-center { text-align: center; color: #6b4b2a; }
.footer-center strong { display: block; margin-bottom: 5px; color: #5b3a1e; font-size: 14px; }
.footer-center small { display: block; color: #8c653a; font-size: 12px; line-height: 1.35; }
.social { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.social a { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff6e6; background: linear-gradient(180deg, #704a2a, #4a301d); }
.social svg { width: 19px; height: 19px; fill: currentColor; }
.site-counters {
  width: min(var(--max), calc(100% - 28px));
  margin: -14px auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 20px;
  opacity: .78;
}

.site-counters a,
.site-counters img {
  display: inline-block;
}

@media (max-width: 920px) {
  .site-bg-ad-desktop-only { display: none; }
  .top, .grid, .layout, .intro { grid-template-columns: 1fr; }
  .ad-box { grid-template-columns: 1fr; }
  .slogan { min-height: auto; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
  .sidebar { position: static; }
  .article-body { max-width: none; }
}

@media (max-width: 720px) {
  .site-bg-ad-desktop-only { display: none; }
  .page { width: min(100% - 20px, var(--max)); margin-top: 10px; }
  .logo-box { min-height: 112px; }
  .logo-img { width: min(100%, 300px); }
  .menu-inner { justify-content: space-between; }
  .mobile-brand, .menu-button { display: block; }
  .menu-links { width: 100%; display: none; grid-template-columns: 1fr; gap: 4px; padding: 8px 0; }
  .nav-toggle:checked ~ .menu-inner .menu-links { display: grid; }
  .nav-toggle:checked ~ .menu-inner .menu-button span { opacity: 0; }
  .nav-toggle:checked ~ .menu-inner .menu-button:before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .menu-inner .menu-button:after { transform: translateY(-7px) rotate(-45deg); }
  .content, .article { padding: 20px; }
  h1 { font-size: 2.1rem; }
  .subtitle, .lead { font-size: 17px; }
  .directory, .popular, .related-links { grid-template-columns: 1fr; }
  .news a { grid-template-columns: 1fr; }
  .legacy-content table, .legacy-content tbody, .legacy-content tr, .legacy-content td { display: block; width: 100% !important; }
  .legacy-content td + td { border-top: 1px solid rgba(67, 52, 39, .18); }
  .footer { display: grid; justify-items: center; grid-template-columns: 1fr; }
  .footer-center { text-align: center; }
  .social { justify-content: center; }
}