:root {
  --circus-yellow: #f8c63f;
  --circus-black: #090909;
  --circus-cream: #f5f0e5;
}

/* Bold editorial direction inspired by the reference, using Garage assets. */
.button,
.nav-toggle {
  border-radius: 0;
}

.button {
  border: 3px solid #111;
  box-shadow: 5px 5px 0 #111;
}

.button:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #111;
}

.button.yellow {
  background: var(--circus-yellow);
  border-color: #111;
}

/* Home: full-bleed photography and centered statement. */
.is-home .site-header {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  border: 0;
  background: linear-gradient(#000b, transparent);
  backdrop-filter: none;
}

.is-home .brand img {
  filter: invert(1);
}

.is-home .main-nav a {
  color: #fff;
}

.is-home .main-nav a:hover {
  color: var(--circus-yellow);
}

.is-home .reserve {
  border-color: #111;
  background: var(--circus-yellow);
  color: #111;
}

.is-home .hero {
  min-height: 100svh;
  align-items: center;
}

.is-home .hero > img {
  object-position: center 28%;
}

.is-home .hero-shade {
  background: linear-gradient(#0006, #0007), radial-gradient(circle at center, transparent 10%, #0008 100%);
}

.is-home .hero-copy {
  place-self: center;
  width: min(1080px, 100%);
  padding: 8rem 2rem 5rem;
  text-align: center;
}

.is-home .hero-copy h1 {
  max-width: none;
  margin-inline: auto;
  font-size: clamp(5rem, 12vw, 10rem);
  line-height: 0.82;
  text-wrap: balance;
}

.is-home .hero-copy > p:not(.kicker) {
  max-width: 42rem;
  margin-inline: auto;
}

.is-home .hero-copy .kicker {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  background: #111;
  color: #fff;
}

.is-home .actions {
  justify-content: center;
}

.is-home .open-badge {
  right: 2rem;
  bottom: 2rem;
  width: auto;
  min-width: 150px;
  aspect-ratio: auto;
  padding: 0.75rem 1rem;
  border: 3px solid #111;
  border-radius: 0;
  background: var(--circus-yellow);
  box-shadow: 5px 5px 0 #111;
  transform: rotate(-2deg);
}

.statement {
  border-top: 4px solid #111;
  border-bottom: 4px solid #111;
  background: var(--circus-yellow);
}

.statement .kicker {
  color: #111;
}

.choice {
  border-bottom: 4px solid #111;
}

.choice.red {
  background: #111;
}

.choice.yellow-card {
  background: var(--circus-yellow);
}

/* Menu chooser: graphic blocks, high contrast and minimal ornament. */
.is-hub {
  background: var(--circus-yellow);
}

.is-hub .site-header {
  border-bottom: 3px solid #111;
  background: var(--circus-yellow);
}

.is-hub .nav-toggle {
  border: 3px solid #111;
  background: #fff;
  box-shadow: 3px 3px 0 #111;
}

.is-hub .menu-choice-hub {
  background: var(--circus-yellow);
}

.is-hub .menu-choice-hub .hub-heading {
  text-align: center;
}

.is-hub .menu-choice-hub .kicker,
.is-hub .menu-choice-hub .hub-heading > p:last-child {
  color: #111;
}

.is-hub .menu-choice-hub .hub-grid {
  margin-inline: auto;
}

.is-hub .menu-choice-hub .hub-grid a {
  border: 3px solid #111;
  border-radius: 0;
  box-shadow: 7px 7px 0 #111;
}

.is-hub .menu-choice-hub .hub-grid a:hover {
  transform: translate(3px, 3px);
  box-shadow: 4px 4px 0 #111;
}

.is-hub .menu-choice-hub .hub-grid .english-card {
  background: #111;
  color: #fff;
}

.is-hub .menu-choice-hub .hub-grid .buffet {
  background: var(--red);
  color: #fff;
}

/* Menus: mustard masthead, squared navigation and editorial cards. */
.is-menu .menu-top {
  border-top: 0;
  border-bottom: 4px solid #111;
  background: var(--circus-yellow);
  color: #111;
}

.is-menu .menu-top .kicker,
.is-menu .menu-intro {
  color: #111;
}

.is-menu .language {
  border: 3px solid #111;
  border-radius: 0;
  background: #fff;
  box-shadow: 4px 4px 0 #111;
}

.is-menu .language a {
  border-radius: 0;
}

.is-menu .language a[aria-current="true"] {
  background: #111;
  color: #fff;
}

.is-menu .menu-tools {
  border-bottom: 3px solid #111;
  background: rgba(245, 240, 229, 0.98);
  box-shadow: none;
}

.is-menu .menu-tools nav a {
  border: 2px solid #111;
  border-radius: 0;
  box-shadow: 2px 2px 0 #111;
}

.is-menu .menu-tools nav a:hover,
.is-menu .menu-tools nav a:focus-visible,
.is-menu .menu-tools nav a[aria-current="true"] {
  border-color: #111;
  background: var(--circus-yellow);
  color: #111;
}

.is-menu .allergen {
  border: 2px solid #111;
  border-radius: 0;
  background: #fff;
  box-shadow: 4px 4px 0 #111;
}

.is-menu .section-title {
  margin-bottom: 0.4rem;
  border-bottom: 5px solid var(--circus-yellow);
}

.is-menu .menu-item {
  border: 2px solid #111;
  border-radius: 0;
  box-shadow: 4px 4px 0 #111;
}

.is-menu .menu-item strong {
  border: 2px solid #111;
  border-radius: 0;
  background: var(--circus-yellow);
  color: #111;
}

.is-menu .menu-item.featured {
  border-color: #111;
  background: #fff8dc;
  box-shadow: 6px 6px 0 var(--circus-yellow);
}

.buffet-rules {
  border-bottom: 4px solid #111;
  background: var(--circus-yellow);
  color: #111;
}

.buffet-rules .kicker {
  color: #111;
}

.prices p {
  border-color: #111;
  border-radius: 0;
  background: #fff;
  box-shadow: 5px 5px 0 #111;
}

.buffet-rules details {
  border-color: #111;
}

@media (max-width: 900px) {
  .is-home .main-nav {
    background: #111;
  }

  .is-home .nav-toggle {
    border-color: #111;
    background: var(--circus-yellow);
    color: #111;
    box-shadow: 3px 3px 0 #111;
  }
}

@media (max-width: 600px) {
  .is-home .hero-copy {
    padding: 7rem 1rem 8rem;
  }

  .is-home .hero-copy h1 {
    font-size: clamp(4rem, 19vw, 5.4rem);
  }

  .is-home .hero-copy .actions {
    max-width: 230px;
    margin-inline: auto;
  }

  .is-home .open-badge {
    top: auto;
    right: 1rem;
    bottom: 1rem;
    min-width: 125px;
    padding: 0.55rem 0.75rem;
  }

  .is-hub .menu-choice-hub {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }

  .is-hub .menu-choice-hub .hub-grid a,
  .is-hub .menu-choice-hub .hub-grid .buffet {
    min-height: 136px;
    border-radius: 0;
  }

  .is-menu .menu-top {
    padding-top: 1.15rem;
    padding-bottom: 1.25rem;
  }

  .is-menu .menu-item {
    box-shadow: 3px 3px 0 #111;
  }
}