:root {
  color-scheme: light;
  --wine: #71170f;
  --wine-deep: #4e100d;
  --gold: #e8b82e;
  --ink: #241d18;
  --muted: #705d51;
  --paper: #fbf7ee;
  --card: #fffdf8;
  --line: #e8ddcb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 100; padding: .65rem 1rem; background: #fff; color: var(--wine); font-weight: 700; }
.skip-link:focus { top: 1rem; }

.hero { background: radial-gradient(circle at 82% 0%, #913020, transparent 35%), linear-gradient(135deg, var(--wine-deep), var(--wine)); color: #fffdf8; border-bottom: 5px solid var(--gold); }
.hero-inner { display: flex; align-items: center; gap: 1.35rem; max-width: 1192px; min-height: 214px; margin: auto; padding: 1.4rem 1.5rem 1.5rem; }
.brand-logo { display: block; width: 116px; height: 116px; object-fit: contain; flex: none; }
.hero-copy { min-width: 0; }
.hero-unit { margin: 0 0 .1rem; color: #ffe8a0; font-size: .9rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font: 700 clamp(2.6rem, 6vw, 4.5rem)/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.hero-instruction { display: inline-block; margin: .9rem 0 0; padding: .35rem .7rem; border-left: 3px solid var(--gold); background: #ffffff13; font-weight: 600; }

.page-shell { display: grid; grid-template-columns: 238px minmax(0, 1fr); gap: 2.1rem; max-width: 1192px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.category-nav { position: sticky; top: 1rem; align-self: start; padding: 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 5px 20px #3b1d0d0b; }
.nav-shelf + .nav-shelf { margin-top: 1.3rem; }
.nav-label { display: block; margin: 0 0 .55rem .5rem; color: var(--wine); font-size: .77rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-links { display: flex; flex-direction: column; gap: .1rem; }
.nav-links a { padding: .36rem .5rem; border-radius: 6px; color: var(--ink); font-size: .9rem; line-height: 1.25; text-decoration: none; }
.nav-links a:hover { background: #f9edcd; color: var(--wine); }
.menu-content { min-width: 0; }
.menu-kind + .menu-kind { margin-top: 3rem; }
.kind-heading { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .5rem; border-bottom: 2px solid var(--wine); }
.kind-heading span { color: var(--wine); font: 700 1.1rem Georgia, serif; }
.kind-heading h2 { margin: 0 0 .45rem; color: var(--wine); font: 700 clamp(1.65rem, 3vw, 2.25rem)/1.1 Georgia, serif; }
.menu-section { margin-top: 1rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: 0 5px 20px #3b1d0d0b; scroll-margin-top: 1rem; }
.menu-section[open] { border-color: #b18738; }
.section-cover { position: relative; display: flex; align-items: end; min-height: 205px; padding: 1.4rem 1.55rem; overflow: hidden; color: #fff; cursor: pointer; list-style: none; isolation: isolate; }
.section-cover::-webkit-details-marker { display: none; }
.section-cover::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #1e100de8 0%, #2a130d9c 40%, #21120d14 100%); content: ''; }
.cover-image { position: absolute; z-index: -2; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cover-content { width: 100%; }
.section-number { display: block; margin-bottom: .2rem; color: #ffe28e; font: 700 .9rem Georgia, serif; letter-spacing: .1em; }
.cover-content h3 { margin: 0; color: #fff; font: 700 clamp(1.6rem, 3vw, 2.25rem)/1.12 Georgia, serif; text-shadow: 0 2px 8px #1a0e0acc; }
.cover-action { display: inline-block; margin-top: .55rem; color: #ffe28e; font-size: .86rem; font-weight: 800; letter-spacing: .025em; }
.action-open, .menu-section[open] .action-closed { display: none; }
.menu-section[open] .action-open { display: inline; }
.section-body { padding: .65rem 1.45rem 1.55rem; }
.section-note { margin: .35rem 0 0; color: var(--muted); font-size: .95rem; }
.item-group + .item-group { margin-top: 1.3rem; }
.item-group-title { margin: 1.05rem 0 .3rem; padding-bottom: .25rem; border-bottom: 1px solid var(--gold); color: var(--wine); font-size: .96rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.55rem; list-style: none; margin: 0; padding: 0; }
.menu-item { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; padding: .72rem 0; border-bottom: 1px solid var(--line); }
.item-copy { min-width: 0; width: 100%; }
.item-line { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.item-name { font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.item-price { flex: none; color: var(--wine); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-description { margin: .28rem 0 0; color: var(--muted); font-size: .87rem; line-height: 1.4; }
.item-photo { width: 78px; aspect-ratio: 1; object-fit: cover; border-radius: 6px; flex: none; }
.footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.footer a { color: var(--wine); font-weight: 700; }

@media (max-width: 850px) {
  .page-shell { display: block; padding: 0 1rem 2.5rem; }
  .category-nav { z-index: 10; top: 0; display: flex; gap: .6rem; margin: 0 -1rem 1.4rem; padding: .65rem 1rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; overflow-x: auto; scrollbar-width: thin; }
  .nav-shelf { display: flex; align-items: center; flex: none; gap: .35rem; }
  .nav-shelf + .nav-shelf { margin: 0; padding-left: .65rem; border-left: 1px solid var(--line); }
  .nav-label { margin: 0 .2rem 0 0; font-size: .7rem; }
  .nav-links { flex-direction: row; gap: .25rem; }
  .nav-links a { padding: .35rem .6rem; background: #f6eee1; white-space: nowrap; font-size: .82rem; }
  .menu-section { scroll-margin-top: 5rem; }
}
@media (max-width: 620px) {
  .hero-inner { min-height: 164px; gap: .7rem; padding: 1rem; }
  .brand-logo { width: 77px; height: 77px; }
  .hero-unit { font-size: .75rem; }
  h1 { font-size: 2.45rem; }
  .hero-instruction { margin-top: .65rem; font-size: .9rem; }
  .items { grid-template-columns: minmax(0, 1fr); }
  .section-cover { min-height: 178px; padding: 1.15rem 1.2rem; }
  .section-body { padding: .55rem 1rem 1.25rem; }
  .item-description { font-size: .88rem; }
  .footer { flex-direction: column; }
}
@media (max-width: 360px) {
  .brand-logo { width: 62px; height: 62px; }
  h1 { font-size: 2.05rem; }
  .hero-instruction { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}