:root {
  --ink: #26140f;
  --brown: #4a2519;
  --cream: #f2eadb;
  --paper: #fbf7ef;
  --matcha: #6d7c48;
  --matcha-dark: #3f4c2b;
  --line: rgba(38, 20, 15, 0.18);
  --serif: "Newsreader", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --display: "Manrope", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}
a {
  color: inherit;
}
button {
  font: inherit;
}
img {
  display: block;
  max-width: 100%;
}
:focus-visible {
  outline: 3px solid #91a05f;
  outline-offset: 3px;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: -80px;
  left: 12px;
  padding: 12px 16px;
  background: var(--ink);
  color: white;
}
.skip-link:focus-visible {
  top: 12px;
}
.demo-note {
  padding: 8px 18px;
  background: var(--matcha-dark);
  color: white;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 82px;
  padding: 14px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
}
.back,
.location {
  font-size: 0.74rem;
  font-weight: 600;
  text-underline-offset: 5px;
}
.location {
  justify-self: end;
}
.wordmark {
  display: inline-flex;
  width: fit-content;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.wordmark strong {
  font-family: var(--display);
  font-size: 1.45rem;
  letter-spacing: 0.16em;
}
.wordmark span {
  margin-top: 5px;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
main {
  min-height: 80vh;
}
.menu-hero {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  gap: 70px;
  align-items: end;
  padding: clamp(70px, 10vw, 135px) 0 70px;
}
.eyebrow {
  margin: 0 0 22px;
  color: var(--matcha-dark);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.6rem, 8vw, 8rem);
  font-weight: 600;
  letter-spacing: -0.07em;
  line-height: 0.82;
}
h1 em {
  font-family: var(--serif);
  font-weight: 400;
}
.menu-intro {
  padding-top: 22px;
  border-top: 1px solid var(--ink);
}
.menu-intro p {
  margin: 0 0 28px;
  color: #685045;
  line-height: 1.7;
}
.menu-intro span {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.filters {
  position: sticky;
  z-index: 10;
  top: 0;
  padding: 0 clamp(18px, 4vw, 48px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(251, 247, 239, 0.96);
  backdrop-filter: blur(15px);
}
.filters > div {
  display: flex;
  width: min(1200px, 100%);
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.filters > div::-webkit-scrollbar {
  display: none;
}
.filters button {
  position: relative;
  flex: 0 0 auto;
  padding: 20px 22px;
  border: 0;
  background: transparent;
  color: #6e574c;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
}
.filters button::after {
  position: absolute;
  right: 22px;
  bottom: 0;
  left: 22px;
  height: 3px;
  background: var(--matcha);
  content: "";
  transform: scaleX(0);
}
.filters button.active {
  color: var(--ink);
}
.filters button.active::after {
  transform: scaleX(1);
}
.menu-content {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 100px;
}
.menu-category {
  display: grid;
  grid-template-columns: 0.38fr 1fr;
  gap: clamp(40px, 7vw, 100px);
  padding: 92px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 70px;
}
.menu-category[hidden] {
  display: none;
}
.category-heading {
  position: sticky;
  top: 92px;
  align-self: start;
}
.category-heading > span {
  display: block;
  margin-bottom: 24px;
  color: var(--matcha);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}
.category-heading h2 {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 5.7rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.9;
}
.category-heading p {
  max-width: 320px;
  margin: 0;
  color: #735b4f;
  font-size: 0.88rem;
  line-height: 1.7;
}
.items {
  display: grid;
  gap: 0;
  padding-top: 38px;
}
.menu-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.menu-item:first-child {
  padding-top: 0;
}
.menu-item:last-child {
  border-bottom: 0;
}
.menu-item img,
.item-mark {
  width: 120px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.item-mark {
  display: grid;
  place-items: center;
  background: #ded0bc;
  color: var(--brown);
}
.item-mark span {
  font-family: var(--serif);
  font-size: 3rem;
  opacity: 0.62;
}
.item-mark-salado {
  background: #c9a788;
}
.item-mark-matcha {
  background: #aeb58d;
  color: #304020;
}
.item-mark-cafe {
  background: #9c755e;
  color: white;
}
.item-mark-te {
  background: #d6c7a8;
}
.item-mark-noche {
  background: #31221d;
  color: #e3c39f;
}
.item-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}
.item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.item-title h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 500;
}
.item-title > span {
  padding: 5px 7px;
  background: var(--matcha);
  color: white;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.item-copy > p {
  max-width: 610px;
  margin: 10px 0 18px;
  color: #725b50;
  font-size: 0.86rem;
  line-height: 1.6;
}
.item-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #8b7469;
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.item-meta b {
  color: var(--ink);
  white-space: nowrap;
}
.menu-disclaimer {
  display: grid;
  grid-template-columns: 0.35fr 1fr;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto 110px;
  padding: 50px;
  background: var(--matcha-dark);
  color: white;
}
.menu-disclaimer > span {
  font-size: clamp(4rem, 11vw, 8rem);
  line-height: 1;
}
.menu-disclaimer h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 400;
}
.menu-disclaimer p {
  max-width: 670px;
  margin: 0;
  color: #d8dec3;
  line-height: 1.7;
}
footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 56px clamp(24px, 5vw, 72px);
  background: #17100d;
  color: white;
}
footer > div {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}
footer > div:last-child {
  justify-content: end;
}
footer p,
footer span,
footer a {
  color: #baa99d;
  font-size: 0.68rem;
}
.wordmark-light {
  align-items: flex-start;
  color: white;
}

@media (max-width: 800px) {
  .menu-hero {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-top: 70px;
  }
  .menu-category {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 72px 0;
  }
  .category-heading {
    position: static;
  }
  .menu-disclaimer {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 36px 24px;
  }
  footer {
    grid-template-columns: 1fr;
  }
  footer > div {
    align-items: flex-start;
    flex-direction: column;
  }
  footer > div:last-child {
    justify-content: start;
  }
}

@media (max-width: 560px) {
  .demo-note {
    font-size: 0.54rem;
  }
  header {
    min-height: 70px;
    padding: 12px 16px;
  }
  .back span {
    display: none;
  }
  .location {
    font-size: 0.64rem;
  }
  .wordmark strong {
    font-size: 1.12rem;
  }
  .wordmark span {
    font-size: 0.44rem;
  }
  .menu-hero,
  .menu-content,
  .menu-disclaimer {
    width: min(100% - 32px, 1200px);
  }
  .menu-hero {
    padding-bottom: 50px;
  }
  h1 {
    font-size: clamp(3.5rem, 17vw, 5.3rem);
  }
  .filters {
    padding: 0 6px;
  }
  .filters button {
    padding: 17px 13px;
  }
  .filters button::after {
    right: 13px;
    left: 13px;
  }
  .menu-category {
    padding: 62px 0;
  }
  .category-heading h2 {
    font-size: 3.4rem;
  }
  .menu-item {
    grid-template-columns: 86px 1fr;
    gap: 16px;
    padding: 22px 0;
  }
  .menu-item img,
  .item-mark {
    width: 86px;
  }
  .item-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .item-title h3 {
    font-size: 1.6rem;
  }
  .item-copy > p {
    margin: 8px 0 14px;
    font-size: 0.8rem;
  }
  .item-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .menu-disclaimer {
    margin-bottom: 70px;
  }
}

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