@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,500;6..72,600;6..72,700&display=swap');

:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0 !important;
  padding: 1.25rem 1.25rem 4rem !important;
  background: #f8f3ea !important;
  color: #1c1813 !important;
  font-family: Manrope, system-ui, sans-serif !important;
  line-height: 1.7;
}
nav.top {
  max-width: 980px !important;
  margin: 0 auto 1.25rem !important;
  display: flex !important;
  align-items: center;
  gap: .35rem 1.2rem !important;
  padding: 1rem 1.25rem;
  border-radius: 1.25rem;
  background: #17251e;
  box-shadow: 0 20px 44px -34px rgba(23,37,30,.75);
}
nav.top::before {
  content: "DMV Halal Eats";
  margin-right: auto;
  color: white;
  font-family: Newsreader, Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
}
nav.top a { color: rgba(255,255,255,.65) !important; font-size: .75rem; font-weight: 800; text-decoration: none; }
nav.top a:hover { color: #f2b441 !important; }
.wrap {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: clamp(1.5rem,5vw,4.5rem) !important;
  border: 1px solid #e7ded2 !important;
  border-radius: 2rem !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 30px 70px -55px rgba(28,24,19,.5);
}
h1, h2, h3 { font-family: Newsreader, Georgia, serif !important; letter-spacing: -.025em; color: #1c1813; }
h1 { max-width: 760px; margin: 0 0 1rem !important; font-size: clamp(2.5rem,7vw,4.75rem) !important; line-height: .98; font-weight: 600; }
h2 { margin: 2.5rem 0 .8rem !important; font-size: 1.8rem !important; line-height: 1.1; }
p, li { color: #5d5446 !important; font-size: .95rem !important; }
a { color: #a23e48 !important; font-weight: 700; }
.muted { color: #8a7e6e !important; font-size: .76rem !important; font-weight: 700; letter-spacing: .04em; }
.cta {
  display: inline-block;
  margin-top: 1.25rem !important;
  padding: .8rem 1.1rem !important;
  border-radius: .8rem !important;
  background: #a23e48 !important;
  color: #fff !important;
  font-size: .82rem !important;
  font-weight: 800;
  box-shadow: 0 12px 24px -16px rgba(162,62,72,.8);
}
.place {
  gap: 1rem !important;
  margin: .7rem 0 !important;
  padding: .8rem !important;
  border: 1px solid #e7ded2 !important;
  border-radius: 1rem !important;
  background: #fff;
  box-shadow: 0 14px 28px -26px rgba(28,24,19,.5);
}
.place img { width: 100px !important; height: 100px !important; border-radius: .8rem !important; }
.place h3 { margin: .2rem 0 .15rem !important; font-size: 1.15rem !important; }
.place p { font-size: .8rem !important; }
.badge { background: #faeef0 !important; color: #a23e48 !important; font-family: Manrope, sans-serif; font-size: .62rem !important; font-weight: 800; }
.cityrow { gap: .6rem !important; }
.cityrow li { border: 1px solid #e7ded2; border-radius: 999px; background: white; padding: .35rem .8rem; }
.foot { max-width: 980px !important; border-color: #e7ded2 !important; }
.foot nav a { color: #756b5e !important; font-size: .75rem; font-weight: 700; }
.back { display: inline-block; margin-top: 2rem; }

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  body { background: #13100c !important; color: #f3ede4 !important; }
  .wrap { background: #1c1813 !important; border-color: #342d25 !important; }
  h1, h2, h3 { color: #f8f3ea; }
  p, li { color: #cfc3b5 !important; }
  .place, .cityrow li { background: #242019; border-color: #3b332a !important; }
  .foot { border-color: #342d25 !important; }
}

@media (max-width: 640px) {
  body { padding: .75rem .75rem 3rem !important; }
  nav.top { align-items: flex-start; padding: .9rem 1rem; }
  nav.top::before { width: 100%; }
  nav.top a:nth-of-type(n+3) { display: none; }
  .wrap { border-radius: 1.4rem !important; }
  .place img { width: 78px !important; height: 78px !important; }
}