@font-face {
  font-family: "Owners XL";
  src:
    local("Owners XL"),
    local("Owners XL Bold"),
    local("OwnersXL-Bold"),
    local("Owners Extra Wide Bold"),
    local("Owners ExtraWide Bold"),
    local("Owners-XL-Bold");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --yellow: #f9e977;
  --white: #f4f4f2;
  --line: rgba(244, 244, 242, 0.92);
  --note: rgba(244, 244, 242, 0.92);
  --pad-x: clamp(1.15rem, 6.4vw, 2.1rem);
  --pad-y: clamp(1.35rem, 5.5vh, 2.4rem);
  --title: clamp(1.85rem, 8.6vw, 2.7rem);
  --item: clamp(1.08rem, 5vw, 1.4rem);
  --section: clamp(1.14rem, 5.2vw, 1.48rem);
  --note-size: clamp(0.54rem, 2.45vw, 0.7rem);
  --gap-item: clamp(0.48rem, 1.7vh, 0.82rem);
  --gap-section: clamp(1.45rem, 5vh, 2.6rem);
  color-scheme: dark;
}

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  min-height: 100svh;
  color: var(--white);
  font-family: "Owners XL", "Archivo", "Arial Narrow", Arial, sans-serif;
  font-weight: 800;
  font-stretch: extra-expanded;
  font-synthesis: none;
  background-color: #0a131e;
  background-image:
    radial-gradient(ellipse 80% 55% at 0% 22%, rgba(46, 130, 160, 0.38), transparent 62%),
    radial-gradient(ellipse 70% 50% at 100% 68%, rgba(32, 110, 140, 0.32), transparent 60%),
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(24, 80, 110, 0.28), transparent 70%),
    url("bg.svg");
  background-size: auto, auto, auto, cover;
  background-position: center;
  background-repeat: no-repeat;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, transparent 36%, rgba(3, 6, 11, 0.55) 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.menu {
  position: relative;
  z-index: 1;
  width: min(100%, 28.5rem);
  margin: 0 auto;
  min-height: 100dvh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: max(var(--pad-y), env(safe-area-inset-top))
    max(var(--pad-x), env(safe-area-inset-right))
    max(var(--pad-y), env(safe-area-inset-bottom))
    max(var(--pad-x), env(safe-area-inset-left));
}

.title {
  color: var(--yellow);
  font-size: var(--title);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: var(--gap-section);
}

.items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-item);
}

.row {
  display: grid;
  grid-template-columns: auto minmax(0.7rem, 1fr) auto;
  align-items: end;
  column-gap: 0.42em;
  min-width: 0;
}

.name,
.price {
  font-size: var(--item);
  font-weight: 800;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}

.price {
  font-variant-numeric: tabular-nums;
}

.rule {
  height: 0;
  border-bottom: 1.5px solid var(--line);
  margin-bottom: 0.22em;
  min-width: 0;
}

.section {
  margin-top: var(--gap-section);
}

.section-title {
  color: var(--yellow);
  font-size: var(--section);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: calc(var(--gap-item) * 1.55);
}

.note {
  margin-top: calc(var(--gap-item) * 1.65);
  color: var(--note);
  font-size: var(--note-size);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.35;
  max-width: 22.5em;
  margin-left: auto;
  margin-right: auto;
}

.chooser,
.menu--compact {
  justify-content: center;
}

.chooser {
  text-align: center;
}

.chooser .title {
  margin-bottom: 0.35rem;
}

.chooser-sub {
  color: var(--white);
  font-size: var(--item);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.75rem;
  opacity: 0.9;
}

.chooser-links {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.chooser-links a {
  display: block;
  color: var(--yellow);
  text-decoration: none;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 6vw, 1.7rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  border: 1.5px solid var(--yellow);
  padding: 0.95rem 1rem;
  line-height: 1;
}

.chooser-links a:active {
  background: rgba(249, 233, 119, 0.12);
}

.chooser-links a span {
  display: block;
  margin-top: 0.45rem;
  color: var(--white);
  font-size: 0.55em;
  letter-spacing: 0.04em;
}

@media (min-width: 640px) {
  .menu {
    width: min(100%, 34rem);
  }
}

@media (max-height: 620px) {
  :root {
    --gap-item: 0.32rem;
    --gap-section: 1rem;
    --pad-y: 1rem;
  }
}

@media print {
  body {
    background: #0c1522;
    background-attachment: scroll;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}