html, body { margin: 0; }
body { font-family: 'Alegreya', serif; background: #0d0906; color: #e2d4b2; }
a { color: #d8b254; text-decoration-color: rgba(216, 178, 84, .4); }
a:hover { color: #e8c96e; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #5a4728; border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: #14100b; }

@keyframes recpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* Hover states from the design's style-hover attributes. !important is needed
   because the base values are inline styles, which outrank stylesheet rules. */
.navlink:hover { color: #e2cd9a !important; }
.btn-gold:hover { filter: brightness(1.1); }
.btn-gold:disabled { opacity: .6; cursor: default; }
.foot-link:hover { color: #d8b254 !important; }

input::placeholder { color: #8a7451; opacity: 1; }

/* Responsive: stack the grids and mockup panels; let fixed-width mockups
   shrink. !important overrides the design's inline widths. */
@media (max-width: 900px) {
  .nav-anchors { display: none !important; }
  .grid3 { grid-template-columns: 1fr !important; }
  .mock-panels { flex-direction: column; }
  .mock-panels > div { width: auto !important; }
}

@media (max-width: 640px) {
  .hero-h1 { font-size: 38px !important; }
  .h2 { font-size: 26px !important; }
  .split-text { min-width: 0 !important; flex-basis: 100%; }
  .index-pill { display: none !important; }
  .codex-mock { max-width: 100%; }
  .codex-mock-body { width: calc(100vw - 170px) !important; }
  .atmo-mock { width: 100% !important; }
  .atmo-mock-art { height: 170px !important; }
}