:root {
  --ink: #163d40 !important;
  --cream: #f7f0df !important;
  --paper: #fffaf0 !important;
  --cherry: #b4832f !important;
  --pink: #e8dfcc !important;
  --leaf: #6d7650 !important;
  --gold: #c49336 !important;
  --night: #083f46 !important;
  --mist: #e8e2d2 !important;
  --line: rgba(8, 63, 70, 0.16) !important;
}

body {
  color: var(--ink);
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(196, 147, 54, 0.08),
      transparent 25rem
    ),
    var(--paper);
}

.nav {
  background: rgba(5, 57, 64, 0.96) !important;
  border-bottom: 1px solid rgba(218, 177, 93, 0.32) !important;
  box-shadow: 0 8px 28px rgba(4, 42, 47, 0.16);
  color: #fff9e9;
}

.brand {
  position: relative;
  color: #f7e8bd !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}

.brand i,
.brand span {
  color: #ddb35f !important;
  font-style: normal !important;
}

.brand::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin-top: 4px;
  background: linear-gradient(90deg, #ddb35f, transparent);
}

.links a,
.mobile summary {
  color: #fff9e9 !important;
}
.links a:hover {
  color: #e8c879 !important;
}
.links .pill {
  background: #c49336 !important;
  color: #083f46 !important;
}
.mobile div,
.mobile-menu nav {
  background: #083f46 !important;
  border: 1px solid rgba(221, 179, 95, 0.35) !important;
  color: #fff9e9 !important;
  box-shadow: 0 18px 45px rgba(4, 42, 47, 0.28) !important;
}

.mobile a,
.mobile-menu nav a {
  color: #fff9e9 !important;
}

.mobile a:hover,
.mobile a:focus-visible,
.mobile-menu nav a:hover,
.mobile-menu nav a:focus-visible {
  color: #083f46 !important;
  background: #f7e8bd !important;
}

.mobile summary,
.mobile-menu summary {
  color: #fff9e9 !important;
  background: #083f46 !important;
  border: 1px solid rgba(247, 232, 189, 0.72) !important;
  border-radius: 4px !important;
  padding: 9px 13px !important;
  line-height: 1 !important;
}

.mobile summary:focus-visible,
.mobile-menu summary:focus-visible {
  outline: 3px solid #ddb35f;
  outline-offset: 3px;
}

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 80% 12%,
      rgba(221, 179, 95, 0.17),
      transparent 28rem
    ),
    linear-gradient(135deg, #f8f1e2, #eee3cd) !important;
}

.hero-art {
  background:
    linear-gradient(180deg, rgba(8, 63, 70, 0.02), rgba(8, 63, 70, 0.12)),
    url("assets/what-the-house-held-latest-cover.png") center 42% / cover
      no-repeat !important;
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(247, 240, 223, 0.12),
    transparent 28%
  );
  pointer-events: none;
}

.hero::before,
.hero::after {
  content: none !important;
  display: none !important;
}

.kicker,
.tag,
.social,
.clock {
  color: #a77728 !important;
}
h1,
h2,
h3 {
  font-family: "Fraunces", Georgia, serif !important;
}
h1 {
  letter-spacing: -0.025em !important;
}
h1 span,
h1 em {
  color: #9b6e25 !important;
}

.btn {
  border-radius: 3px !important;
  letter-spacing: 0.035em;
}
.btn.primary,
.hero-serial button,
.arcade-form button,
.download-link {
  background: #083f46 !important;
  color: #fff9e9 !important;
  box-shadow: 0 8px 20px rgba(8, 63, 70, 0.14) !important;
}
.btn.secondary {
  background: #fffaf0 !important;
  border-color: rgba(8, 63, 70, 0.22) !important;
}

.btn.kindle {
  background: #c49336 !important;
  color: #082f34 !important;
  border: 1px solid #d8b66f !important;
  box-shadow: 0 8px 20px rgba(83, 58, 16, 0.16) !important;
}
.btn.kindle:hover {
  background: #d7ad59 !important;
  transform: translateY(-1px);
}
.purchase-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.hero-serial,
.book,
.panel,
.arcade-card,
.coloring-card {
  border-radius: 5px !important;
  border-color: rgba(8, 63, 70, 0.15) !important;
}

.books,
.about,
.game {
  background: #fffaf0 !important;
}
.book-visual {
  background: #eee5d4 !important;
  border-radius: 3px !important;
}
.book-cover {
  border-radius: 1px !important;
}

.play,
.book-teaser {
  background:
    linear-gradient(rgba(8, 63, 70, 0.96), rgba(8, 63, 70, 0.96)), #083f46 !important;
  color: #fff8e8 !important;
}
.play p,
.book-teaser p {
  color: #e7ddc9 !important;
}

footer {
  background: #052f35 !important;
  color: #e9ddc4 !important;
  border-top: 1px solid rgba(221, 179, 95, 0.35);
}

@media (max-width: 820px) {
  .brand {
    font-size: 1.02rem !important;
  }

  .mobile,
  .mobile-menu {
    z-index: 100 !important;
  }

  .mobile div,
  .mobile-menu nav {
    min-width: min(280px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
}