* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: #f2e7d1;
  background:
    radial-gradient(circle at 15% 15%, rgba(121, 86, 49, 0.4), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(94, 62, 38, 0.45), transparent 35%),
    linear-gradient(135deg, #1d140f, #2d1f16 35%, #20150f 70%, #17100c);
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.page-wrap {
  width: 980px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #6d4d2f;
  background:
    linear-gradient(180deg, rgba(95, 59, 35, 0.4), rgba(41, 27, 19, 0.85)),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0.02) 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    );
  box-shadow: 0 0 0 3px #3d281a, 0 0 26px rgba(0, 0, 0, 0.75);
}

.site-header {
  padding: 20px 24px 14px;
  border-bottom: 2px solid #8f6b3f;
  background:
    linear-gradient(180deg, rgba(139, 100, 62, 0.38), rgba(70, 46, 30, 0.55)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 30%, rgba(0, 0, 0, 0.2));
}

.site-header h1 {
  margin: 0 0 6px;
  letter-spacing: 1px;
  font-size: 34px;
  color: #deb270;
  text-shadow: 1px 1px 0 #3c271a, 0 0 8px rgba(222, 178, 112, 0.25);
}

.site-header p {
  margin: 0 0 14px;
  color: #f0d9b8;
  font-size: 14px;
}

.site-header nav {
  display: inline-block;
  padding: 6px;
  border: 1px solid #8f6b3f;
  background: linear-gradient(180deg, #4a3221, #352216);
}

.site-header a {
  color: #efc179;
  text-decoration: none;
  margin: 0 8px;
  font-size: 14px;
}

.site-header a:hover {
  color: #ffe1a5;
  text-decoration: underline;
}

.site-header a.is-active {
  color: #ffe1a5;
  text-decoration: underline;
}

.mobile-sidebar-menus {
  display: none;
  margin-top: 10px;
  gap: 8px;
}

.mobile-menu {
  margin-bottom: 8px;
}

.mobile-menu summary {
  list-style: none;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 8px 10px;
  color: #efc179;
  border: 1px solid #8f6b3f;
  background: linear-gradient(180deg, #4a3221, #352216);
  font-size: 14px;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu-panel {
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #7f5a37;
  background:
    linear-gradient(180deg, rgba(102, 67, 40, 0.45), rgba(47, 31, 21, 0.92)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0.02) 1px,
      rgba(0, 0, 0, 0.05) 1px,
      rgba(0, 0, 0, 0.05) 3px
    );
  box-shadow: inset 0 0 0 1px rgba(222, 178, 112, 0.25);
}

.columns {
  display: flex;
  gap: 14px;
  padding: 14px;
  flex: 1;
}

.sidebar,
.main-content {
  border: 1px solid #7f5a37;
  background:
    linear-gradient(180deg, rgba(102, 67, 40, 0.45), rgba(47, 31, 21, 0.92)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0.02) 1px,
      rgba(0, 0, 0, 0.05) 1px,
      rgba(0, 0, 0, 0.05) 3px
    );
  box-shadow: inset 0 0 0 1px rgba(222, 178, 112, 0.25);
}

.sidebar {
  width: 220px;
  padding: 12px;
}

.main-content {
  width: 512px;
  padding: 16px;
}

h2,
h3 {
  margin-top: 0;
  color: #e4ba78;
  border-bottom: 1px solid rgba(191, 139, 73, 0.65);
  padding-bottom: 5px;
}

p,
li {
  color: #f4e8d1;
  line-height: 1.5;
  font-size: 14px;
}

ul {
  margin: 0 0 14px 18px;
  padding: 0;
}

article {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid rgba(164, 115, 60, 0.65);
  background: linear-gradient(180deg, rgba(118, 79, 50, 0.25), rgba(63, 41, 27, 0.4));
}

.widget {
  margin-bottom: 14px;
  padding: 10px;
  border: 1px dashed rgba(219, 167, 98, 0.55);
  background: rgba(36, 24, 16, 0.38);
}

blockquote {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 4px solid #b9894c;
  color: #f7dfbf;
  background: rgba(0, 0, 0, 0.2);
  font-style: italic;
}

.site-footer {
  padding: 10px 16px;
  border-top: 2px solid #8f6b3f;
  text-align: center;
  font-size: 12px;
  color: #e4c79f;
  background: linear-gradient(180deg, rgba(61, 39, 25, 0.8), rgba(38, 23, 15, 0.9));
}

.noscript-warning {
  margin: 12px auto;
  width: 980px;
  padding: 10px 14px;
  border: 1px solid #8f6b3f;
  background: linear-gradient(180deg, #4a3221, #352216);
  color: #ffe1a5;
  text-align: center;
}

@media (max-width: 980px) {
  .page-wrap {
    width: 100%;
  }

  .noscript-warning {
    width: 100%;
  }

  .columns {
    gap: 0;
  }

  .main-content {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .site-header {
    padding: 16px;
  }

  .site-header h1 {
    font-size: 28px;
  }

  .site-header nav {
    display: block;
    margin-bottom: 8px;
  }

  .site-header a {
    display: inline-block;
    margin: 3px 8px 3px 0;
  }

  .columns {
    display: block;
    padding: 10px;
  }

  .sidebar {
    display: none;
  }

  .main-content {
    width: 100%;
    padding: 12px;
  }

  .mobile-sidebar-menus {
    display: block;
  }
}