*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a,
a:visited {
  color: inherit;
  text-decoration: none;
}

img {
  display: inline-block;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
}

[rel='icon'] {
  width: var(--icon-size, 1rem);
  height: var(--icon-size, 1rem);
}

[rel='icon'][data-size='lg'] {
  --icon-size: 1.5rem;
}

mark {
  color: var(--color-orange);
  background: inherit;
}

:root {
  --color-cream: #fff9e9;
  --color-orange: #ff4600;
  --color-bright-orange: #be3b22;
  --color-dark-orange: #b13720;
  --color-ridge-color: #902a18;
  --color-light-blue: #55a9bc;
  --color-shadow: rgba(0, 0, 0, 0.3);

  --bg-wall: repeating-linear-gradient(
    90deg,
    var(--color-bright-orange) 0px,
    var(--color-bright-orange) 1rem,
    var(--color-ridge-color) calc(1rem + 1px),
    var(--color-dark-orange) calc(1rem + 2px),
    var(--color-dark-orange) calc(3rem - 1px),
    var(--color-ridge-color) 3rem
  );

  --box-shadow: 0.25rem 0.25rem 0.25rem var(--color-shadow);

  font-size: 0.75rem;
}

body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  margin: 0 auto;
  min-width: 320px;
  max-width: 1024px;
  background: radial-gradient(circle, #000, #2d2d37) fixed;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
  color: #fff;
}

header {
  display: grid;
  grid: minmax(0, 1fr) / 1fr 1fr;
  gap: 0.5rem;
  max-height: 16rem;
  text-align: center;
}

.logo,
.hours {
  display: grid;
  height: 100%;
  font-family: 'Bungee Inline', sans-serif;
  box-shadow: inset 0.25rem 0.25rem 0.25rem var(--color-shadow), inset -0.25rem -0.25rem 0.25rem var(--color-shadow);
}

.logo > :last-child,
.hours > :first-child {
  padding: 1rem 0;
}

.logo {
  grid: minmax(0, 1fr) auto / 1fr;
  background: var(--color-cream);
  color: #000;
}

.hours {
  grid: auto minmax(0, 1fr) / 1fr;
  background: var(--bg-wall);
  text-shadow: var(--color-shadow) 0.2rem 0.2rem;
}

.hours > img {
  mix-blend-mode: multiply;
}

.knife-and-fork {
  background: var(--color-cream);
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  margin: -4rem auto -1rem auto;
  box-shadow: 0 -0.125rem 0.25rem 0.125rem var(--color-shadow);
}

.slogan {
  font-family: 'Bungee Inline', serif;
  font-size: 1.75rem;
  text-align: center;
}

.slogan > mark:first-of-type {
  font-size: 1.5em;
}

.featured {
  position: relative;
  display: grid;
  grid: minmax(0, 1fr) auto / repeat(3, minmax(0, 1fr));
  place-items: center;
  gap: 0.5rem 2rem;
}

.featured::before {
  content: '';
  position: absolute;
  inset: -2rem;
  z-index: -1;
  background: url('/static/img/smoke.png') no-repeat bottom center / 100%;
}

.featured-price {
  grid-row-start: 2;
  font-family: 'Bungee Inline';
}

.featured-photo {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
}

.review {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: 'Bungee Inline';
  font-size: 0.85rem;
  padding-inline: 1rem;
}

.review::before {
  content: '★★★★★';
  color: var(--color-orange);
}
.review--right {
  text-align: right;
}

.ingredients {
  --icon-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-block: 1rem;
}

.menu {
  display: grid;
  gap: 2rem;
}

.menu > img {
  box-shadow: var(--box-shadow);
}

.location {
  position: relative;
  display: grid;
  grid: minmax(0, 1fr) / 1fr;
  max-height: 24rem;
  margin-top: 1rem;
}

.location > img {
  object-fit: cover;
  box-shadow: var(--box-shadow);
}

.address {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid: 1fr / auto 1fr;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(1px);
}

@media (min-width: 425px) {
  :root {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  :root {
    font-size: 1.125rem;
  }

  .menu {
    grid: auto / 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  :root {
    font-size: 1.25rem;
  }
}