:root {
  --ink: #45427a;
  --pine: #5e6ad2;
  --cream: #fffaf5;
  --paper: #e9edff;
  --coral: #ff7f8e;
  --gold: #ffd166;
  --sage: #a9ebc7;
  --orange: #ffae7a;
  --line: #d7dcff;
  --muted: #656ca5;
}

.intro { color: #eff0ff; }
.updated { color: #dfe2ff; }
.guide-strip { display: flex; flex-wrap: wrap; gap: 9px 16px; align-items: center; margin-top: 40px; color: #eff0ff; font: 500 .72rem "DM Mono", monospace; }
.guide-strip > span:first-child { color: #ffd1dc; text-transform: uppercase; letter-spacing: .1em; }
.guide-strip strong { color: white; }
.coming-soon { color: #dfe2ff; }
.hero-art {
  width: min(580px, 48vw);
  height: auto;
  aspect-ratio: 1409 / 1117;
  right: 2%;
  bottom: -10px;
  border: 0;
  background: none;
  opacity: 1;
}

.hero-image { display: block; width: 100%; height: 100%; object-fit: contain; }

.ad-slot {
  display: grid;
  place-items: center;
  min-height: 96px;
  margin: 34px 0 0;
  border-block: 1px solid var(--line);
  color: var(--muted);
  font: 500 .62rem "DM Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ad-slot--directory { margin-top: 30px; }
.ad-slot ins { width: min(100%, 970px); }

.notice-inner { color: #45427a; }
.notice-icon { border-color: #5e6ad2; }
.craving { border-color: #cbd2ff; }
.restaurant-card:hover { box-shadow: 0 10px 25px rgb(94 106 210 / 16%); }
.badge { color: #555b97; }
.summary,
.card-details ul { color: #5b639e; }
.checklist li { color: #545d99; }
.checklist li span { color: white; }

.snacks { background: var(--sage); }
.snacks { color: #37466f; }
.snacks p { color: #4c5f84; }
.snack-columns h3 { color: #5e6ad2; }
.snack-columns ul { color: #405579; }
.snack-columns li { border-color: rgb(69 66 122 / 20%); }
footer { background: #45427a; color: #eff0ff; }
.footer-copy { max-width: 620px; }
.disclaimer { margin-top: 8px !important; color: #dfe2ff; font-size: .68rem; line-height: 1.45; }

.footer-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.footer-links a { color: white; }
.page-hero { min-height: 330px; background: var(--pine); color: white; }
.page-hero-content { padding: 58px 0 72px; }
.page-hero h1 { max-width: 820px; font-size: clamp(3rem, 7vw, 5.4rem); }
.page-content { max-width: 760px; padding: 92px 0 110px; }
.page-content section + section { margin-top: 52px; padding-top: 52px; border-top: 1px solid var(--line); }
.page-content h2 { margin: 0 0 16px; font-size: clamp(2rem, 4vw, 3rem); }
.page-content p { color: #5b639e; font-size: 1.02rem; line-height: 1.7; }
.page-content a { color: var(--pine); font-weight: 700; }
.page-updated { margin: 0 0 42px; color: var(--muted) !important; font: 500 .72rem "DM Mono", monospace; }

@media (max-width: 800px) {
  .hero-art { right: -100px; bottom: -12px; width: 420px; opacity: .42; }
  .page-content { padding: 70px 0 82px; }
}