@import url("reset.css");
@import url("font.css");

:root { --paper: #f7f4f0; --ink: #000; --pad: clamp(18px, 4vw, 62px); }
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { font-family: Inter, Arial, sans-serif; background: var(--paper); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.menu-page { position: relative; min-height: 100svh; overflow: hidden; background: linear-gradient(120deg, rgb(221 230 241 / 92%), var(--paper) 42%, rgb(229 233 241 / 84%)); }.menu-page::before, .menu-page::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; background: rgb(180 201 224 / 52%); filter: blur(52px); }.menu-page::before { top: 12%; left: -12%; width: 35vw; height: 35vw; }.menu-page::after { right: -9%; bottom: 5%; width: 32vw; height: 32vw; }
.menu-header { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 25px var(--pad); }.menu-header__logo img { width: 56px; height: 56px; }.menu-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 46px); padding: 13px 30px; border-radius: 999px; background: rgb(188 188 188 / 86%); font-size: clamp(13px, 1.25vw, 19px); white-space: nowrap; }.menu-nav a:hover, .menu-nav [aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }.menu-menu { display: flex; grid-column: 3; justify-self: end; flex-direction: column; gap: 6px; width: 54px; padding: 11px 0 11px 18px; border: 0; background: transparent; cursor: pointer; }.menu-menu span { display: block; width: 36px; height: 2px; background: var(--ink); }
.menu-current { position: relative; z-index: 1; width: min(100%, 1100px); margin: 0 auto; padding: clamp(28px, 5vw, 70px) var(--pad) clamp(34px, 6vw, 80px); }.menu-current > h1, .menu-content > h2 { width: fit-content; margin: 0 auto clamp(24px, 4vw, 48px); padding: 7px clamp(25px, 4vw, 55px); border: 1.5px solid var(--ink); border-radius: 999px; font-size: clamp(25px, 3.1vw, 44px); font-weight: 500; }.menu-current__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }.menu-product { display: block; min-width: 0; padding: 18px; border-radius: 42px; background: #bcbcbc; transition: transform .2s ease; }.menu-product:hover { transform: translateY(-6px); }.menu-product__image { position: relative; aspect-ratio: 1 / 1.08; overflow: hidden; border-radius: 30px; background: #fff; }.menu-product__image img { width: 100%; height: 100%; object-fit: cover; }.menu-product__image span { position: absolute; top: 0; right: 0; padding: 5px 18px 17px 22px; border-radius: 0 30px 0 30px; background: #bcbcbc; font-size: clamp(11px, 1.2vw, 16px); }.menu-product h2 { margin: 15px 0 10px; font-size: clamp(16px, 1.8vw, 24px); font-weight: 500; }.menu-product p { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }.menu-product i { padding: 5px 9px; border-radius: 999px; background: #fff; font-size: clamp(9px, .8vw, 12px); font-style: normal; }.menu-content { position: relative; z-index: 1; width: min(100%, 860px); margin: 0 auto; padding: clamp(28px, 5vw, 70px) var(--pad) clamp(50px, 8vw, 110px); }.menu-content img { width: 100%; border: 1.5px solid var(--ink); border-radius: 38px; box-shadow: 0 20px 50px rgb(0 0 0 / 12%); }.menu-footer { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 32px; padding: clamp(34px, 5vw, 74px) var(--pad); background: #bcbcbc; }.menu-footer > img { width: min(44vw, 390px); }.menu-footer address { display: flex; flex-direction: column; gap: 5px; font-size: clamp(14px, 1.6vw, 24px); font-style: normal; text-align: right; }
@media (max-width: 850px) { .menu-nav { position: absolute; top: 92px; left: var(--pad); right: var(--pad); display: none; flex-direction: column; gap: 0; padding: 15px; text-align: center; box-shadow: 0 12px 24px rgb(0 0 0 / 12%); }.menu-nav.is-open { display: flex; }.menu-nav a { padding: 12px; } }
@media (max-width: 520px) { .menu-header { padding-block: 16px; }.menu-header__logo img { width: 42px; height: 42px; }.menu-menu { width: 42px; }.menu-menu span { width: 30px; }.menu-current { padding-inline: 12px; }.menu-current__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.menu-product { padding: 7px; border-radius: 16px; }.menu-content { padding-inline: 12px; }.menu-content img { border-radius: 24px; }.menu-footer { flex-direction: column; align-items: flex-start; }.menu-footer > img { width: 250px; }.menu-footer address { text-align: left; } }