:root {
  --night: #22111b;
  --wine: #7b2340;
  --candle: #e9b872;
  --rose: #f2dcd6;
  --smoke: #a8959c;
  --serif: "Gloock", "Didot", Georgia, serif;
  --sans: "Jost", "Futura", system-ui, sans-serif;
}

body { background: var(--night); color: var(--rose); font: 400 1.0625rem/1.65 var(--sans); }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -0.01em; }
h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
p { max-width: 56ch; }

.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 22px clamp(16px, 4vw, 56px); font-weight: 500; letter-spacing: 0.02em;
}
.top a { text-decoration: none; }
.top a:hover { color: var(--candle); }
.top a:last-child { justify-self: end; }
.top__name { font: 400 2rem/1 var(--serif); color: var(--candle); }

/* ---------- hero: centred like a wine list ---------- */
.hero { text-align: center; padding: clamp(32px, 6vw, 80px) clamp(16px, 4vw, 56px) 0; }
.hero__where { margin: 0 auto 24px; color: var(--smoke); }
.hero h1 { font-size: clamp(2.6rem, 7vw, 6.4rem); max-width: 16ch; margin: 0 auto clamp(40px, 6vw, 72px); }
.hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 700px) { .hero img { aspect-ratio: 4 / 3; } }

/* ---------- by the glass ---------- */
.glass { max-width: 1040px; margin: 0 auto; padding: clamp(64px, 10vw, 128px) clamp(16px, 4vw, 40px); text-align: center; }
.glass__intro { margin: 16px auto 48px; color: var(--smoke); }
.list { text-align: left; border-top: 1px solid rgb(242 220 214 / 0.2); }
.list details { border-bottom: 1px solid rgb(242 220 214 / 0.2); }
.list summary {
  display: grid; grid-template-columns: 1fr auto 3.5rem; align-items: baseline; gap: 8px 24px;
  padding: 20px 4px; cursor: pointer; list-style: none; transition: color 0.2s;
}
.list summary::-webkit-details-marker { display: none; }
.list summary:hover, .list details[open] summary { color: var(--candle); }
.w { font: 400 clamp(1.3rem, 2.6vw, 1.9rem)/1.2 var(--serif); }
.r { color: var(--smoke); font-size: 0.95rem; }
.p { font: 400 1.4rem/1 var(--serif); text-align: right; font-variant-numeric: tabular-nums; }
.list details p { padding: 0 4px 22px; color: var(--rose); font-size: 1.05rem; }
.glass__unit { margin: 28px auto 0; color: var(--smoke); font-size: 0.92rem; }
@media (max-width: 640px) {
  .list summary { grid-template-columns: 1fr 3rem; }
  .r { grid-row: 2; }
}

/* ---------- plates ---------- */
.plates { display: grid; grid-template-columns: 1fr 1fr; background: var(--wine); }
.plates__img img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.plates__text { padding: clamp(40px, 7vw, 104px) clamp(20px, 5vw, 80px); align-self: center; }
.plates h2 { margin-bottom: 28px; color: var(--candle); }
.plates li { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid rgb(242 220 214 / 0.25); }
.plates li span:last-child { font-family: var(--serif); font-size: 1.25rem; }
@media (max-width: 800px) { .plates { grid-template-columns: 1fr; } .plates__img img { min-height: 0; aspect-ratio: 4 / 3; } }

/* ---------- table ---------- */
.table { text-align: center; padding: clamp(64px, 10vw, 128px) clamp(16px, 4vw, 56px); }
.table > p { margin: 20px auto 0; }
.table__phone a { display: inline-block; margin-top: 24px; font: 400 clamp(2rem, 5vw, 3.4rem)/1 var(--serif); color: var(--candle); text-decoration: none; border-bottom: 1px solid currentColor; }
.table__hours { max-width: 460px; margin: 48px auto 0; text-align: left; }
.table__hours div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgb(242 220 214 / 0.2); }
.table__hours dd { margin: 0; font-variant-numeric: tabular-nums; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 24px clamp(16px, 4vw, 56px) 88px; color: var(--smoke); font-size: 0.9rem; border-top: 1px solid rgb(242 220 214 / 0.12); }