:root {
  color-scheme: light;
  --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --color-ink: #30313f;
  --color-paper: #f4f1dc;
  --color-cream: #eeedc9;
  --color-brand: #ed6b4c;
  --color-accent: #d85f42;
  --color-muted: #66655f;
  --color-on-dark: #f7f3d9;
  --content-max: 74rem;
  font-family: var(--font-body);
  background: var(--color-paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--color-paper); }

.loading-state,
.error-state,
.not-found main {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 2rem;
  color: var(--color-ink);
  text-align: center;
}
.loading-state__logo,
.not-found img { width: min(72vw, 21rem); height: auto; }
.loading-state p,
.error-state p { margin: 0; color: var(--color-muted); font-size: 1rem; }
.not-found { background: var(--color-ink); color: var(--color-on-dark); }
.not-found main { color: inherit; }
.not-found h1 { margin: 1rem 0 0; font-size: clamp(2rem, 8vw, 4rem); }
.not-found a { color: var(--color-on-dark); font-weight: 700; }
noscript { display: block; padding: 1rem; text-align: center; }

.site-header { border-bottom: 1px solid #ffffff16; }
.site-header__wordmark { width: 6.1rem; height: 3rem; }
.nav-drawer__brand { width: 10rem; height: auto; }
.section-nav { box-shadow: 0 8px 22px #30313f0c; }
.section-nav a { letter-spacing: .01em; }

.hero { min-height: clamp(30rem, 64svh, 36rem); }
.hero__identity { min-height: clamp(30rem, 64svh, 36rem); }
.hero__media::after {
  background:
    linear-gradient(180deg, #30313f00 52%, #30313f38 72%, #30313f 100%),
    linear-gradient(90deg, #30313f00 12%, #30313f24 48%, #30313fd4 100%);
}
.hero__photo { object-position: 20% 72%; }
.hero__wordmark-image { width: min(74vw, 22rem); }
.hero__intro { max-width: 34ch; font-size: 1.05rem; color: #faf5df; }

.menu-section {
  --section-bg: var(--color-paper);
  --capsule-bg: var(--color-ink);
  --capsule-ink: var(--color-on-dark);
  --capsule-border: transparent;
}
.menu-section--comida {
  --section-bg: #30313f;
  --color-ink: #f5f1d8;
  --color-muted: #d5d0bb;
  --color-accent: #ff9878;
  --capsule-bg: #ed6b4c;
  --capsule-ink: #282936;
  background: var(--section-bg);
  color: var(--color-ink);
}
.menu-section--cervezas {
  --section-bg: #f4f1dc;
  --capsule-bg: #30313f;
  --capsule-ink: #f7f3d9;
}
.menu-section--cocteleria {
  --section-bg: #f4f1dc;
  --capsule-bg: #30313f;
  --capsule-ink: #f7f3d9;
}
.menu-section--destilados {
  --section-bg: #f4f1dc;
  --capsule-bg: #30313f;
  --capsule-ink: #f7f3d9;
}
.menu-section--sin-alcohol {
  --section-bg: #f4f1dc;
  --capsule-bg: #ed6b4c;
  --capsule-ink: #2f303e;
}
.menu-section__title {
  font-size: clamp(2.35rem, 7vw, 4.8rem);
  font-weight: 750;
  letter-spacing: -.055em;
}
.category__title { font-size: clamp(1.45rem, 4vw, 1.9rem); }
.category__note { font-size: .9rem; line-height: 1.5; }
.menu-item { padding-block: .9rem; }
.menu-item__name { font-size: 1.02rem; }
.menu-item__prices { font-size: .98rem; color: var(--color-accent); }
.menu-item__description { max-width: 58ch; font-size: .95rem; line-height: 1.55; }
.menu-item__badge {
  display: inline-block;
  width: fit-content;
  margin-top: .45rem;
  padding: .16rem .52rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--color-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.menu-item__beer-meta { margin: .25rem 0 0; color: var(--color-muted); font-size: .9rem; line-height: 1.45; }
.menu-item__beer-ibu { font-size: .9em; opacity: .78; }
.menu-item__variant { font-size: .92rem; }
.menu-item__variant-price { color: var(--color-accent); font-weight: 700; }
.category__price-headings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: end;
  padding: .75rem 0 .25rem;
}
.category__price-heading-labels,
.menu-item__prices--columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(3.65rem, 1fr));
  gap: .4rem;
  min-width: 12rem;
  text-align: right;
}
.category__price-headings,
.menu-item--size-columns .menu-item__top {
  grid-template-columns: minmax(12rem, 1fr) minmax(15rem, 17rem);
}
.category--beer .menu-item__top,
.category--packaged-beer .menu-item__top {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "name" "meta";
  gap: .15rem;
}
.menu-item--size-columns .menu-item__top {
  grid-template-areas: "name prices" "meta prices";
  align-items: start;
}
.category--beer .menu-item__name,
.category--packaged-beer .menu-item__name { grid-area: name; }
.category--beer .menu-item__beer-meta,
.category--packaged-beer .menu-item__beer-meta { grid-area: meta; }
.category--beer .menu-item__prices,
.category--packaged-beer .menu-item__prices { grid-area: prices; align-self: center; }
.menu-item__price-cell { display: block; }
.menu-item__price-label { display: none; }
.menu-item__price-value { display: block; }
.menu-item__price-cell--missing { visibility: hidden; }
.category__price-heading-labels {
  color: var(--color-muted);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
}
.menu-section--comida .category__header,
.menu-section--comida .menu-item { border-color: #f5f1d824; }
.menu-section--comida .category-nav { border-color: #f5f1d824; }

.section-photo,
.category-photo { border-radius: 0; }
.section-photo img,
.category-photo img {
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.section-photo::after,
.category-photo::after { display: none; }
.section-atmosphere img { object-position: 50% 52%; }
.section-atmosphere::after { height: 3.5rem; }
.menu-section--comida .section-photo { border: 1px solid #f5f1d824; }
.menu-section--cervezas .section-photo img { object-position: 50% 45%; }
.contact__photo { max-height: 32rem; overflow: hidden; }
.contact__photo img { width: 100%; height: 32rem; object-fit: cover; object-position: 50% 58%; }
.contact__inner { min-height: 17rem; }
.contact__wordmark { width: min(58vw, 15rem); }
.contact__title { font-size: 1.1rem; letter-spacing: .02em; text-transform: uppercase; }
.contact__field--hours { grid-column: 1 / -1; container-type: inline-size; }
.contact__hours {
  display: grid;
  gap: .42rem;
  width: min(100%, 25rem);
  margin: 0;
  font-size: .9rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.contact__hours-row {
  display: grid;
  grid-template-columns: minmax(6.8rem, .6fr) minmax(12rem, 1fr);
  align-items: baseline;
  column-gap: 1rem;
}
.contact__hours-day { margin: 0; font-weight: 650; }
.contact__hours-time { margin: 0; white-space: nowrap; }
.contact__canonical { font-size: 1rem; font-weight: 700; color: var(--color-on-dark); }

@media (max-width: 23rem) {
  .contact__hours-row { grid-template-columns: minmax(0, 1fr); gap: .08rem; }
  .contact__hours-time { white-space: normal; }
}

@container (max-width: 20rem) {
  .contact__hours-row { grid-template-columns: minmax(0, 1fr); gap: .08rem; }
  .contact__hours-time { white-space: normal; }
}

@media (max-width: 38rem) {
  .category__price-headings { display: none; }
  .menu-item--size-columns .menu-item__top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "meta" "prices";
  }
  .menu-item__prices--columns {
    grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr));
    gap: .45rem;
    width: 100%;
    min-width: 0;
    margin-top: .7rem;
    text-align: left;
  }
  .menu-item__price-cell {
    display: grid;
    gap: .12rem;
    min-width: 0;
    padding: .55rem .6rem;
    border: 1px solid #30313f24;
    border-radius: .45rem;
    background: #ffffff42;
  }
  .menu-item__price-label {
    display: block;
    color: var(--color-muted);
    font-size: .7rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: normal;
  }
  .menu-item__price-value { font-size: 1rem; }
  .menu-item__price-cell--missing { display: none; }
  .menu-item__top { gap: .6rem; }
  .menu-item__description { font-size: .93rem; }
  .menu-item__beer-meta { font-size: .88rem; }
}

@media (max-width: 47.999rem) {
  .section-photo { height: clamp(15rem, 72vw, 19rem); }
  .section-photo img { width: 100%; height: 100%; object-fit: cover; }
  .section-photo[data-photo='smoke'] img { object-position: 50% 54%; }
  .section-photo[data-photo='beers'] img { object-position: 50% 37%; }
  .section-photo[data-photo='cocktails'] img { object-position: 50% 56%; }
}

@media (min-width: 48rem) {
  .hero { min-height: clamp(34rem, 68svh, 39rem); }
  .hero__identity { min-height: clamp(34rem, 68svh, 39rem); margin-left: 58%; }
  .hero__media::after {
    background:
      linear-gradient(180deg, #30313f00 58%, #30313f52 82%, #30313f 100%),
      linear-gradient(90deg, #30313f00 18%, #30313f1f 46%, #30313fdd 84%, #30313f 100%);
  }
  .hero__photo { object-position: 50% 68%; }
  .menu-section { padding-top: 4.5rem; padding-bottom: 5rem; }
  .menu-section--with-atmosphere { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}