@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/BodoniModa-Variable-Latin.woff2') format('woff2'); }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('fonts/BodoniModa-Italic-Variable-Latin.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/Jost-Variable-Latin.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('fonts/Jost-Italic-Variable-Latin.woff2') format('woff2'); }
@font-face { font-family: 'Noto Serif SC'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/NotoSerifSC-500-site.woff2') format('woff2'); }
@font-face { font-family: 'Noto Serif SC'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/NotoSerifSC-700-site.woff2') format('woff2'); }
@font-face { font-family: 'Ma Shan Zheng'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/MaShanZheng-site.woff2') format('woff2'); }

:root { --surface: #f4ede0;--surface-raised: #fbf8f1;--surface-sunk: #eae0cc;--text: #261a15;--text-muted: #6b5a4d;--text-accent: #7c2219;--text-gilt: #76581c;--accent: #7c2219;--on-accent: #fbf8f1;--ornament: #b38a3a;--line: #d8c9ae;--line-strong: #6b5a4d;--spicy: #b03a1e;--veg: #2f6448;--focus: #7c2219; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --surface: #16100e;--surface-raised: #201816;--surface-sunk: #0e0a09;--text: #f2eadb;--text-muted: #bcad99;--text-accent: #e0695a;--text-gilt: #d9b870;--accent: #d9b870;--on-accent: #48110b;--ornament: #b38a3a;--line: #3a2e29;--line-strong: #8c7c6e;--spicy: #f4a283;--veg: #93ccaa;--focus: #d9b870; color-scheme: dark; } }
.lacquer { --surface: #62190f;--surface-raised: #711f14;--surface-sunk: #48110b;--text: #f4ede0;--text-muted: #e8cfc2;--text-accent: #edd9a8;--text-gilt: #d9b870;--accent: #d9b870;--on-accent: #48110b;--ornament: #d9b870;--line: #8a3b30;--line-strong: #d9a99a;--spicy: #f4a283;--veg: #93ccaa;--focus: #edd9a8; }
.t-display-xl { font-family: 'Bodoni Moda', 'Noto Serif SC', 'Bodoni 72', Didot, Georgia, serif; font-size: 64px; line-height: 68px; font-weight: 500; letter-spacing: -0.01em; font-variation-settings: 'opsz' 72 }
.t-display-l { font-family: 'Bodoni Moda', 'Noto Serif SC', 'Bodoni 72', Didot, Georgia, serif; font-size: 44px; line-height: 50px; font-weight: 500; letter-spacing: -0.005em; font-variation-settings: 'opsz' 48 }
.t-display-m { font-family: 'Bodoni Moda', 'Noto Serif SC', 'Bodoni 72', Didot, Georgia, serif; font-size: 30px; line-height: 36px; font-weight: 500; font-variation-settings: 'opsz' 28 }
.t-hanzi-2xl { font-family: 'Noto Serif SC', 'Songti SC', STSong, SimSun, serif; font-size: 88px; line-height: 96px; font-weight: 700; letter-spacing: 0.08em }
.t-hanzi-xl { font-family: 'Noto Serif SC', 'Songti SC', STSong, SimSun, serif; font-size: 56px; line-height: 64px; font-weight: 700; letter-spacing: 0.08em }
.t-hanzi-l { font-family: 'Noto Serif SC', 'Songti SC', STSong, SimSun, serif; font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: 0.04em }
.t-hanzi-m { font-family: 'Noto Serif SC', 'Songti SC', STSong, SimSun, serif; font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: 0.04em }
.t-eyebrow { font-family: Jost, 'Futura', 'Century Gothic', 'Noto Serif SC', system-ui, sans-serif; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase }
.t-dish { font-family: Jost, 'Futura', 'Century Gothic', 'Noto Serif SC', system-ui, sans-serif; font-size: 18px; line-height: 26px; font-weight: 500 }
.t-price { font-family: Jost, 'Futura', 'Century Gothic', 'Noto Serif SC', system-ui, sans-serif; font-size: 18px; line-height: 26px; font-weight: 500 }
.t-body { font-family: Jost, 'Futura', 'Century Gothic', 'Noto Serif SC', system-ui, sans-serif; font-size: 16px; line-height: 24px; font-weight: 400 }
.t-english { font-family: Jost, 'Futura', 'Century Gothic', 'Noto Serif SC', system-ui, sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; font-style: italic }
.t-english-l { font-family: Jost, 'Futura', 'Century Gothic', 'Noto Serif SC', system-ui, sans-serif; font-size: 18px; line-height: 26px; font-weight: 400; font-style: italic }
.t-body-s { font-family: Jost, 'Futura', 'Century Gothic', 'Noto Serif SC', system-ui, sans-serif; font-size: 14px; line-height: 20px; font-weight: 400 }
.t-caption { font-family: Jost, 'Futura', 'Century Gothic', 'Noto Serif SC', system-ui, sans-serif; font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: 0.02em }
.t-button { font-family: Jost, 'Futura', 'Century Gothic', 'Noto Serif SC', system-ui, sans-serif; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.14em }
@media (min-width: 720px) { .t-display-l.up { font-family: 'Bodoni Moda', 'Noto Serif SC', 'Bodoni 72', Didot, Georgia, serif; font-size: 64px; line-height: 68px; font-weight: 500; letter-spacing: -0.01em; font-variation-settings: 'opsz' 72 } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--text); font-family: Jost, system-ui, sans-serif; font-size: 16px; line-height: 24px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lacquer { background: var(--surface); color: var(--text); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
.measure { max-width: 640px; }
.band { padding: 64px 0; }
@media (min-width: 720px) { .band { padding: 96px 0; } }
.brush { font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif; font-weight: 400; line-height: 1; color: var(--text-accent); }
.muted { color: var(--text-muted); }
.gilt { color: var(--text-gilt); }
.ornament-rule { display: flex; align-items: center; gap: 14px; color: var(--ornament); }
.ornament-rule::before, .ornament-rule::after { content: ''; flex: 1; height: 1px; background: var(--ornament); }
.ornament-rule span { display: block; width: 6px; height: 6px; background: var(--ornament); transform: rotate(45deg); }
.sec-head { text-align: center; margin-bottom: 40px; }
.sec-head .brush { font-size: 56px; margin-bottom: 12px; }
.sec-head h2 { margin: 0; }
.sec-head .sub { margin-top: 8px; font-style: italic; color: var(--text-muted); }
.sec-head .ornament-rule { justify-content: center; margin-top: 16px; }
.sec-head .ornament-rule::before, .sec-head .ornament-rule::after { max-width: 80px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; border-radius: 2px; border: 1px solid currentColor; text-decoration: none; cursor: pointer; font: inherit; }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(0.86); }
.btn-secondary { background: transparent; color: inherit; }
.btn-secondary:hover { border-color: var(--text); }
.btn .t-button { font-size: 14px; }
a.textlink { text-decoration: underline; text-underline-offset: 3px; }
a.textlink:hover { text-decoration-thickness: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px; z-index: 9; }

/* header: lacquer bar with the round logo (the logo carries its own disc) */
.site-head { background: var(--surface); color: var(--text); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 72px; padding-top: 8px; padding-bottom: 8px; }
.site-head .logo img { height: 56px; width: auto; border-radius: 50%; box-shadow: 0 0 0 1px var(--ornament); }  /* a gold ring keeps the one-colour disc visible on the red bar */
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-left: auto; }
.site-head .phone-link { margin-left: 20px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-nav a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* wide screens: logo left, links centred, phone right (owner 2026-10-09) */
@media (min-width: 560px) {
  .site-head .wrap { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-head .logo { justify-self: start; }
  .site-nav { margin-left: 0; justify-content: center; gap: 4px 32px; }
  .site-head .phone-link { justify-self: end; margin-left: 0; }
}
@media (max-width: 559px) {
  .site-head .phone-link { order: 2; margin: 0 0 0 auto; min-width: 44px; padding: 0 12px; }
  .site-head .phone-link .phone-num { display: none; }
  .site-nav { order: 3; width: 100%; margin-left: 0; justify-content: center; gap: 4px 28px; }
}

/* hero */
.hero { padding: 56px 0 96px; background: var(--surface); color: var(--text); overflow: hidden; position: relative; isolation: isolate; }
.hero.lacquer { background-color: var(--surface); background-image: url('photos/cover-ink.jpg'); background-size: cover; background-position: center bottom; background-repeat: no-repeat; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--surface); opacity: 0.55; }  /* enough lacquer over the mist for the gold lines (WCAG AA) */
.hero .hero-info { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0 0; color: var(--text); }
.hero .hero-info svg { flex: none; margin-top: 3px; color: var(--text-accent); }
.hero .hero-info a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 10px 0; margin: -10px 0; }
@media (min-width: 720px) { .hero { padding: 88px 0 96px; } }
.hero .kicker { color: var(--text-accent); margin-bottom: 20px; font-size: 14px; line-height: 20px; letter-spacing: 0.18em; }  /* a size up from the 12 px eyebrow: this line names the restaurant */
@media (min-width: 720px) { .hero .kicker { font-size: 16px; line-height: 24px; } }
.hero h1 { margin: 0; max-width: 900px; }
.hero .slogan { margin-top: 28px; }
.hero .slogan .brush { font-size: 36px; color: var(--text-accent); }
@media (min-width: 720px) { .hero .slogan .brush { font-size: 46px; } }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-grid { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .hero-grid { padding: 0 32px; } }
.hero-text { min-width: 0; }
@media (min-width: 900px) {
  .hero { min-height: min(90vh, 900px); max-height: 900px; display: flex; flex-direction: column; }  /* min-height would override max-height, so the cap goes into it too */
  .hero-grid { margin-top: auto; width: 100%; }
}

/* dish cards (recommended) */
.gallery { --gx: max(16px, calc((100% - 1200px) / 2 + 32px)); --gc: max(var(--gx), calc(50% - var(--sw) / 2)); display: flex; gap: 36px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gc) 24px; scroll-padding-inline: var(--gc); -webkit-overflow-scrolling: touch; }
.gallery-wrap { --sw: min(72vw, 340px); position: relative; }  /* 72vw: the next card peeks in on a phone */
.gal-hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -16px 0 20px; color: var(--text-muted); font-size: 14px; line-height: 20px; }
.gal-hint svg { flex: none; }
.gal-hint .l { transform: scaleX(-1); }
.gal-hint .mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .gal-hint .touch { display: none; } .gal-hint .mouse { display: inline; } }
.gal-count { font-variant-numeric: tabular-nums lining-nums; }
.gal-btn { position: absolute; top: calc(var(--sw) * 0.375 + 4px - 22px); z-index: 20; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.gal-btn:hover { border-color: var(--text); }
.gal-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gal-btn.prev { left: 8px; } .gal-btn.prev svg { transform: scaleX(-1); }
.gal-btn.next { right: 8px; }
.gal-ready .gal-btn { display: flex; }
.gal-btn[hidden] { display: none !important; }
@media (max-width: 559px) { .gal-btn { width: 40px; height: 40px; top: calc(var(--sw) * 0.375 + 4px - 20px); } }
.gallery:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gallery { scrollbar-width: thin; scrollbar-color: var(--ornament) transparent; }
.gallery::-webkit-scrollbar { height: 3px; }
.gallery::-webkit-scrollbar-track { background: transparent; }
.gallery::-webkit-scrollbar-thumb { background: var(--ornament); border-radius: 2px; }
.slide { flex: 0 0 var(--sw); scroll-snap-align: center; margin: 0; display: flex; flex-direction: column; }
.slide .stext { display: flex; flex-direction: column; flex: 1; margin-top: 12px; }
.slide .top { display: flex; align-items: center; justify-content: space-between; }
.slide .no { color: var(--text-gilt); font-weight: 400; font-variant-numeric: tabular-nums lining-nums; }
.slide .zh { font-family: 'Noto Serif SC', serif; font-size: 18px; line-height: 26px; font-weight: 500; color: var(--text-accent); margin: 4px 0 0; }
.slide .de { margin: 2px 0 0; }
.slide .foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.slide .codes { font-family: Jost, 'Futura', 'Century Gothic', 'Noto Serif SC', system-ui, sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-muted); }
.slide .price { font-size: 18px; line-height: 26px; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.photo { position: relative; aspect-ratio: 4 / 3; }
.photo img { width: 100%; height: 100%; object-fit: contain; }
.card .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 0; }
.card .no { color: var(--text-gilt); font-weight: 400; font-variant-numeric: tabular-nums lining-nums; }
.card .hz { margin-top: 4px; color: var(--text-accent); font-family: 'Noto Serif SC', serif; font-size: 28px; line-height: 36px; font-weight: 700; }
.card .de { margin-top: 0; }
.card .en { margin-top: 0; font-style: italic; color: var(--text-muted); }
.card .foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-top: auto; padding-top: 6px; }
.card .codes { font-family: Jost, 'Futura', 'Century Gothic', 'Noto Serif SC', system-ui, sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.card .price { font-family: 'Bodoni Moda', 'Noto Serif SC', 'Bodoni 72', Didot, Georgia, serif; font-size: 30px; line-height: 36px; font-weight: 500; font-variation-settings: 'opsz' 28; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* plain info blocks */
.info-grid { display: grid; grid-template-columns: 1fr; gap: 40px 48px; }
@media (min-width: 720px) { .info-grid { grid-template-columns: 1fr 1fr; } }
.info-row { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 16px; }
.info-row svg { margin-top: 3px; }
.lunch-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lunch-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.lunch-band > .wrap { padding-top: 24px; padding-bottom: 24px; }
@media (min-width: 720px) { .lunch-band > .wrap { padding-top: 32px; padding-bottom: 32px; } }

/* menu list */
.rows.cols2 { column-count: 1; column-gap: 40px; margin-bottom: 40px; }
.rows.cols2 .row { break-inside: avoid; }
@media (min-width: 1200px) { .rows.cols2 { column-count: 2; } }  /* below 1200 px a column is too narrow for number, photo, names and price */
.page-title { text-align: center; margin: 0 0 12px; font-size: 14px; line-height: 20px; }
.jump { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 4px; margin: 0 0 40px; padding: 0; list-style: none; }
@media (max-width: 599px) {
  .jump { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px 32px; padding: 0 16px 4px; scrollbar-width: none; }
  .jump::-webkit-scrollbar { display: none; }
  .jump li { flex: none; }
  .jump a { white-space: nowrap; }
}
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 2px; text-decoration: none; font-size: 14px; }
.jump a:hover { border-color: var(--text); }
.jump .hz { font-family: 'Noto Serif SC', serif; color: var(--text-accent); margin-right: 8px; }
.group { scroll-margin-top: 88px; margin-bottom: 56px; }
.group > details > summary { display: block; list-style: none; cursor: pointer; }
.group > details > summary::-webkit-details-marker { display: none; }
.group > details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.group .label .chev { position: absolute; right: 0; top: 7px; color: var(--text-muted); transition: transform 0.2s; }
.group > details:not([open]) .label { margin-bottom: 0; }
.group > details:not([open]) .chev { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .group .label .chev { transition: none; } }
.group h2 { margin: 0 0 8px; text-align: left; }
.group .label { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 24px; }
.group summary .label { padding-right: 36px; }
.group .label .hz { font-family: 'Noto Serif SC', serif; font-size: 28px; line-height: 36px; font-weight: 700; color: var(--text-accent); }
.group .label .de { font-family: 'Bodoni Moda', 'Noto Serif SC', 'Bodoni 72', Didot, Georgia, serif; font-size: 30px; line-height: 36px; font-weight: 500; }
.group .label .en { font-style: italic; color: var(--text-muted); font-size: 18px; line-height: 24px; }
.note { margin: 0 0 20px; color: var(--text-muted); font-size: 14px; line-height: 20px; }
.note .en { font-style: italic; }
.rows { margin: 0; padding: 0; list-style: none; }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 150px auto; column-gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row .no { grid-column: 1; grid-row: 1; color: var(--text-gilt); font-variant-numeric: tabular-nums lining-nums; }
.row .thumb { grid-column: 3; grid-row: 1; }
.row img.thumb { width: 150px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.row span.thumb { width: 150px; }
.row .names { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.row .pc { grid-column: 4; grid-row: 1; text-align: right; }
.row .zh { font-family: 'Noto Serif SC', serif; font-size: 18px; line-height: 26px; font-weight: 500; color: var(--text-accent); display: flex; align-items: center; gap: 8px; }
.row .de { font-size: 18px; line-height: 26px; font-weight: 500; }
.row .de-line { display: inline; }
.row .de-line > span[title] { display: inline-flex !important; vertical-align: -2px; margin-left: 6px; }
.row .sub { font-size: 14px; line-height: 20px; font-style: italic; color: var(--text-muted); }
.row .codes { font-family: Jost, 'Futura', 'Century Gothic', 'Noto Serif SC', system-ui, sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-muted); }
.row .price { font-size: 18px; line-height: 26px; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }  /* the amount keeps together ( ); „pro Person“ may wrap on narrow phones */
.row .price small { font-size: 14px; color: var(--text-muted); font-weight: 400; white-space: nowrap; }
.rows.noimg .row { grid-template-columns: 44px minmax(0, 1fr) auto; }
.rows.noimg .thumb { display: none; }
.rows.noimg .names { grid-column: 2; grid-row: 1; }
.rows.noimg .pc { grid-column: 3; grid-row: 1; }
/* a dish without a photo takes no photo slot: its name starts where the number ends (an empty slot read as a gap) */
.row.nophoto { grid-template-columns: 44px minmax(0, 1fr) auto; }  /* no photo column at all: the names reach the price */
.row.nophoto .thumb { display: none; }
.row.nophoto .names { grid-column: 2; grid-row: 1; }
.row.nophoto .pc { grid-column: 3; grid-row: 1; }
@media (max-width: 599px) {
  .row, .rows.noimg .row { grid-template-columns: 40px minmax(0, 1fr) 96px; column-gap: 12px; align-items: start; }
  .row .no { grid-column: 1; grid-row: 1 / span 2; }
  .row .thumb { grid-column: 3; grid-row: 1 / span 2; }
  .row img.thumb, .row span.thumb { width: 96px; }
  .row .names { grid-column: 2; grid-row: 1; }
  .row .pc { grid-column: 2; grid-row: 2; text-align: left; margin-top: 4px; }
  .rows.noimg .row, .row.nophoto { grid-template-columns: 40px minmax(0, 1fr); }
  .rows.noimg .names, .row.nophoto .names { grid-column: 2; grid-row: 1; }
  .rows.noimg .pc, .row.nophoto .pc { grid-column: 2; grid-row: 2; }
  .rows.noimg .no, .row.nophoto .no { grid-row: 1 / span 2; }
  /* framed lists (lunch, set menus) on phones: less frame padding and smaller photos, so the names keep room */
  .frame .row:not(.nophoto) { grid-template-columns: 40px minmax(0, 1fr) 72px; }
  .frame .row img.thumb, .frame .row span.thumb { width: 72px; }
}
/* inside a frame the desktop row is too narrow below 900 px: keep the phone layout there */
@media (min-width: 600px) and (max-width: 899px) {
  .frame .row, .frame .rows.noimg .row { grid-template-columns: 40px minmax(0, 1fr) 96px; column-gap: 12px; align-items: start; }
  .frame .row .no { grid-column: 1; grid-row: 1 / span 2; }
  .frame .row .thumb { grid-column: 3; grid-row: 1 / span 2; }
  .frame .row img.thumb, .frame .row span.thumb { width: 96px; }
  .frame .row .names { grid-column: 2; grid-row: 1; }
  .frame .row .pc { grid-column: 2; grid-row: 2; text-align: left; margin-top: 4px; }
  .frame .rows.noimg .row, .frame .row.nophoto { grid-template-columns: 40px minmax(0, 1fr); }
  .frame .rows.noimg .names, .frame .row.nophoto .names { grid-column: 2; grid-row: 1; }
  .frame .rows.noimg .pc, .frame .row.nophoto .pc { grid-column: 2; grid-row: 2; }
  .frame .rows.noimg .no, .frame .row.nophoto .no { grid-row: 1 / span 2; }
}
.row.drink { grid-template-columns: minmax(0, 1fr) auto; }
.row.drink .sizes { text-align: right; font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums lining-nums; }
.row.drink .sizes div { white-space: nowrap; }
/* drinks have no photo column: name in column 1, sizes in column 2 (on phones the dish rules would push them into column 3 and they overlapped) */
.row.drink .names { grid-column: 1; grid-row: 1; }
.row.drink .sizes { grid-column: 2; grid-row: 1; }
.row.drink .sizes span { color: var(--text-muted); }
.row .de .codes { margin-left: 8px; font-weight: 400; white-space: nowrap; }  /* codes after the name, never a line of their own (owner 2026-10-09) */
.sub-head { margin: 40px 0 8px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-gilt); }
.sub-head .hz { font-family: 'Noto Serif SC', serif; letter-spacing: 0.1em; text-transform: none; margin-left: 8px; font-size: 16px; }

/* framed sections (lunch, set menus) on lacquer */
.group.lacquer { padding: 24px; margin-bottom: 56px; }
.frame { border: 1px solid var(--ornament); padding: 6px; }
.frame > div { border: 1px solid var(--ornament); padding: 24px 20px; }
@media (max-width: 599px) { .group.lacquer { padding: 12px; } .frame > div { padding: 16px 12px; } }  /* after the base rules, so they win */
@media (min-width: 720px) { .frame > div { padding: 32px 36px; } }
.frame .row { border-color: var(--line); }
.frame .intro { font-size: 16px; line-height: 24px; }
.frame .intro .en { font-style: italic; color: var(--text-muted); font-size: 14px; line-height: 20px; }
.frame .intro p { margin: 0 0 12px; }

.legend-c { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ornament); }
.legend-c h2 { margin: 0 0 12px; }
.legend-txt { margin: 0 0 12px; font-size: 14px; line-height: 22px; color: var(--text-muted); }
.legend-txt b { font-weight: 500; color: var(--text-gilt); }
.legend { columns: 1; }
@media (min-width: 720px) { .legend { columns: 2; column-gap: 40px; } }
.legend .pair { break-inside: avoid; display: grid; grid-template-columns: 36px 1fr; padding: 4px 0; font-size: 14px; line-height: 20px; }
.legend .pair b { font-weight: 500; color: var(--text-gilt); font-variant-numeric: tabular-nums lining-nums; }
.legend h3 { font-size: 12px; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--text-gilt); margin: 32px 0 8px; break-after: avoid; }
.spice-key { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.spice-key span { display: inline-flex; align-items: center; gap: 8px; }

/* footer */
.site-foot { padding: 48px 0 40px; background: var(--surface); color: var(--text); }
@media (min-width: 720px) { .site-foot { padding: 64px 0 48px; } }
.site-foot .cols { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 720px) { .site-foot .cols { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } }
.site-foot .fine { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ornament); font-size: 14px; line-height: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.site-foot a { text-decoration: none; }
/* small text links get a 44 px tall touch area without moving the text */
.site-foot a, a.textlink { display: inline-block; padding: 10px 0; margin: -10px 0; }
.site-foot .fine a, .note a.textlink { padding: 12px 0; margin: -12px 0; }
.legal h1 { hyphens: auto; overflow-wrap: break-word; }  /* „Datenschutzerklärung“ is wider than a 320 px phone */
.site-foot .info-row { margin-bottom: 12px; }
.site-foot .info-row svg { margin-top: 2px; }
.site-foot a:hover { text-decoration: underline; }

/* legal placeholders */
.legal h1 { margin: 0 0 24px; }
.legal h2 { margin: 32px 0 8px; font-size: 18px; line-height: 26px; font-weight: 500; }
.legal p { margin: 0 0 12px; }
.ph { background: var(--surface-sunk); padding: 0 4px; }

/* map */
.map { margin-top: 40px; }
.map iframe { width: 100%; height: 320px; border: 0; display: block; }
.map-consent { height: 320px; box-sizing: border-box; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; background: var(--surface-sunk); border: 1px solid var(--line); }
.map-consent p { margin: 0; max-width: 46ch; color: var(--text-muted); }