@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Ma Shan Zheng"; src: url("/fonts/mashanzheng.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
:root { color-scheme: light; --paper: #f4f1e8; --ink: #252820; --muted: #64685d; --toolbar: 76px; color: var(--ink); background: var(--paper); font-family: "Instrument Sans", Arial, sans-serif; font-synthesis: none; font-optical-sizing: auto; }
* { box-sizing: border-box; }
body { margin: 0; padding-bottom: var(--toolbar); --page-font: "Instrument Sans", Arial, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid #43816f; outline-offset: 7px; }
h1, p { margin: 0; }
.restaurant-page { min-height: calc(100svh - var(--toolbar)); display: flex; flex-direction: column; font-family: var(--page-font); }
.site-caption { display: flex; justify-content: flex-end; padding: 37px 6.8vw 0; }
.site-caption .caption-reveal { font-size: 12px; line-height: 1.5; }
.composition { width: 100%; display: grid; grid-template-columns: minmax(310px, 460px) minmax(300px, 1fr); align-items: start; gap: 7.5vw; padding: 88px 6.8vw 96px; margin: auto 0; }
.restaurant-copy h1 { font-size: 29px; font-weight: 550; line-height: 1.35; letter-spacing: -.65px; margin-bottom: 31px; max-width: 390px; }
.restaurant-copy p { font-size: 20px; line-height: 1.55; letter-spacing: -.15px; font-weight: 400; }
.restaurant-copy .food-copy { margin-bottom: 5px; }
.restaurant-copy .sharing-copy { margin-bottom: 25px; }
.restaurant-copy .message-copy { margin-bottom: 0; }
.bilingual { position: relative; display: inline-grid; grid-template-areas: "word"; grid-template-columns: minmax(0,1fr); align-items: center; justify-items: start; max-width: 100%; border: 0; background: transparent; padding: 0; text-align: left; font: inherit; color: inherit; vertical-align: baseline; }
.language-layer { grid-area: word; min-width: 0; pointer-events: none; }
.chinese { font-family: "Ma Shan Zheng", "Noto Serif CJK SC", serif; font-weight: 400; font-size: 1.12em; line-height: 1.4; letter-spacing: .02em; opacity: 0; }
.ink-character { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; overflow: visible; }
.ink-unit { display: inline-block; white-space: nowrap; }
.latin-name { font-family: var(--page-font); font-size: .91em; letter-spacing: inherit; }
.bilingual.is-chinese .ink-stroke { animation: write-ink var(--ink-duration) linear var(--ink-delay) both; }
@keyframes write-ink { to { stroke-dashoffset: 0; } }
.sentence { width: 100%; }
.word { text-decoration: underline; text-decoration-color: #25282050; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.word .chinese { font-size: 1.22em; line-height: 1; }
.bilingual.is-chinese > .italian { opacity: 0; }
.bilingual.is-chinese > .chinese { opacity: 1; }
.heading-reveal .chinese { font-size: 1.1em; line-height: 1.35; }
.contact-block { position: relative; display: inline-block; max-width: 100%; margin-top: 35px; padding-bottom: 17px; font-size: 19px; font-weight: 550; line-height: 1.5; }
.contact-reveal { width: auto; }
.contact-reveal .chinese { font-size: 1.08em; }
.brush-underline { position: absolute; left: -4px; bottom: -1px; width: calc(100% + 8px); height: 17px; fill: currentColor; pointer-events: none; transform: rotate(-1.5deg); }
.brush-grain { fill: var(--paper); opacity: .85; }
.calligraphy { align-self: center; text-align: center; font-family: "Ma Shan Zheng", "Noto Serif CJK SC", serif; font-size: clamp(150px, 19vw, 290px); line-height: 1.1; font-weight: 400; white-space: nowrap; letter-spacing: -.11em; padding-right: .1em; transform: rotate(-4deg); user-select: none; }
.language-controls { position: fixed; z-index: 4; bottom: 0; left: 0; right: 0; min-height: var(--toolbar); display: flex; align-items: center; justify-content: flex-end; padding: 14px 6.8vw; background: var(--paper); font-family: "Instrument Sans", Arial, sans-serif; }
.language-switch { background: transparent; border: 0; padding: 10px 12px; min-height: 44px; min-width: 44px; font-size: 13px; white-space: nowrap; text-decoration: underline; text-decoration-color: #25282050; text-underline-offset: 5px; }
.language-switch:hover { text-decoration-color: currentColor; }
.skip-link { position: absolute; z-index: 5; left: 24px; top: -80px; padding: 12px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.no-script { padding: 20px; font-size: 14px; }
@media (max-width: 1120px) {
  .composition { gap: 5vw; grid-template-columns: minmax(300px, 1fr) minmax(280px, 1fr); }
  .calligraphy { font-size: 21vw; }
}
@media (max-width: 760px) {
  .site-caption { padding: 25px 25px 0; }
  .composition { margin: 0; grid-template-columns: 1fr; padding: 35px 25px 68px; gap: 36px; }
  .calligraphy { order: -1; width: 100%; max-width: 450px; font-size: clamp(128px, 28vw, 190px); text-align: right; padding-right: 13px; }
  .restaurant-copy { max-width: 480px; }
  .restaurant-copy h1 { font-size: 27px; margin-bottom: 27px; max-width: 390px; }
  .restaurant-copy p { font-size: 19px; }
  .contact-block { margin-top: 30px; }
  .language-controls { padding: 12px 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .bilingual .ink-stroke { animation: none !important; stroke-dashoffset: 0; }
}