/* Josefin Sans stands in for the wide geometric caps of the Bò and Gà sign.
   Be Vietnam Pro, drawn by a Vietnamese type team, carries body copy and
   stacks Vietnamese diacritics cleanly. Latin + Vietnamese subsets only. */
@font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('assets/josefin-sans-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('assets/josefin-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/be-vietnam-pro-400-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/be-vietnam-pro-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/be-vietnam-pro-600-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/be-vietnam-pro-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/be-vietnam-pro-700-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/be-vietnam-pro-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #f5f1e8;      /* placemat stock */
  --paper-2: #ebe4d4;
  --white: #fffdf8;      /* bowl glaze */
  --ink: #141414;        /* logo ink */
  --ink-soft: #4b463f;
  --line: #d6ccb8;
  --cobalt: #213f8c;     /* bowl pinstripe + PHO blade sign */
  --cobalt-deep: #172d66;
  --cobalt-tint: #dde3f1;
  --chili: #b32e1b;      /* "lemongrass spicy" red on the placemat */
  --herb: #3c6a34;
  --display: 'Josefin Sans', 'Be Vietnam Pro', system-ui, sans-serif;
  --body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ko: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --zh: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --stripes: repeating-linear-gradient(90deg, var(--cobalt) 0 2px, var(--white) 2px 10px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
[lang="ko"] { font-family: var(--ko); }
[lang="zh-Hans"] { font-family: var(--zh); }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; text-wrap: balance; }
h2 { font: 700 clamp(2rem, 4.2vw, 3.25rem)/1.05 var(--display); letter-spacing: .01em; text-transform: uppercase; }
p { margin: 0; }
figure { margin: 0; }
.shell { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 14px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.kicker { font: 700 .8125rem/1.2 var(--display); letter-spacing: .28em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 14px; }

/* Demo disclosure */
.demo-note { background: var(--ink); color: var(--paper); font-size: .8125rem; }
.demo-note-inner { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; align-items: center; padding: 8px 0; }
.demo-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.demo-links a { text-underline-offset: 3px; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border: 2px solid transparent; font: 700 .9375rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.button:active { transform: scale(.98); }
.button-ink { background: var(--ink); color: var(--paper); }
.button-ink:hover { background: var(--cobalt); }
.button-cobalt { background: var(--cobalt); color: var(--white); }
.button-cobalt:hover { background: var(--cobalt-deep); }
.button-line { border-color: var(--ink); color: var(--ink); }
.button-line:hover { background: var(--ink); color: var(--paper); }
.button span, .text-link span { font-family: var(--body); letter-spacing: 0; }
.text-link { font-weight: 600; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.text-link:hover { text-decoration-thickness: 3px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1.5px solid var(--ink); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 46px; height: 46px; color: var(--ink); --mark-cut: var(--paper); }
.brand-word { display: grid; font: 700 1.25rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; padding-top: 4px; }
.brand-word small { font-size: .625rem; letter-spacing: .42em; margin-top: 5px; font-weight: 600; }
.site-header nav { display: flex; align-items: center; gap: 26px; }
.site-header nav a:not(.button) { font: 600 .8125rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: 10px 0; }
.site-header nav a:not(.button):hover { color: var(--cobalt); }
.nav-call { min-height: 42px; padding: 0 16px; letter-spacing: .06em; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); min-height: min(760px, calc(100svh - 110px)); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 64px) clamp(40px, 6vw, 88px) max(16px, calc((100vw - 1200px) / 2)); }
.status { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 8px 14px; border: 1.5px solid var(--ink); font-size: .875rem; font-weight: 600; background: var(--white); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-soft); }
.status.is-open .status-dot { background: var(--herb); box-shadow: 0 0 0 4px color-mix(in srgb, var(--herb) 22%, transparent); }
.status.is-break .status-dot { background: #b7791f; }
.status.is-closed .status-dot { background: var(--chili); }
.hero-title { display: grid; gap: 2px; font: 700 clamp(4.5rem, 10.5vw, 9.5rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.hero-title .word { display: flex; align-items: flex-end; gap: 18px; }
.hero-title .vi { padding-top: .18em; }
.hero-title .gloss { font: 600 .875rem/1 var(--display); letter-spacing: .32em; color: var(--cobalt); padding-bottom: 1.1em; border-top: 2px solid var(--cobalt); padding-top: 8px; }
.hero-title .amp { font-size: .22em; letter-spacing: .5em; padding-left: .3em; color: var(--ink-soft); line-height: 1.4; }
.hero-lead { max-width: 30rem; font-size: 1.1875rem; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hero-photo { position: relative; border-left: 1.5px solid var(--ink); overflow: hidden; background: #3b2a1c; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo figcaption { position: absolute; right: 16px; bottom: 16px; padding: 8px 12px; background: var(--paper); border: 1.5px solid var(--ink); font: 700 .75rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; }
.blade {
  position: absolute; top: 28px; left: 28px; display: grid; justify-items: center; gap: 2px; padding: 12px 10px 14px;
  background: var(--cobalt); color: var(--white); border: 3px solid var(--white); outline: 1.5px solid var(--cobalt-deep);
  font: 700 1.75rem/1.05 var(--display); box-shadow: 0 10px 24px rgb(0 0 0 / .28);
}
.blade svg { width: 38px; height: 38px; color: var(--white); --mark-cut: var(--cobalt); margin-bottom: 4px; }
.blade span { display: block; padding-top: 4px; }

/* Bowl-rim pinstripe divider */
.rim { height: 16px; background: var(--stripes); border-block: 1.5px solid var(--ink); }

/* Promise */
.promise { background: var(--ink); color: var(--paper); padding: clamp(48px, 7vw, 88px) 0; }
.promise-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px 56px; align-items: end; }
.promise h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); letter-spacing: .04em; }
.promise h2 span { display: block; color: #9fb3e6; }
.promise-lines { display: grid; gap: 10px; color: #cfc8b9; font-size: 1.0625rem; border-left: 2px solid #9fb3e6; padding-left: 20px; }

/* Section heads */
.section-head { max-width: 44rem; margin-bottom: clamp(28px, 4vw, 48px); }
.section-lead { margin-top: 16px; font-size: 1.125rem; color: var(--ink-soft); }

/* Broths */
.broths { padding: clamp(64px, 9vw, 120px) 0; }
.broth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.broth { display: grid; grid-template-rows: auto 1fr; border: 1.5px solid var(--ink); background: var(--white); }
.broth img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border-bottom: 1.5px solid var(--ink); }
.broth-body { display: grid; align-content: start; gap: 14px; padding: 26px 28px 30px; }
.broth-name { display: flex; align-items: baseline; gap: 16px; font: 700 clamp(3rem, 6vw, 4.5rem)/1 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.broth-name small { font: 700 .8125rem/1 var(--display); letter-spacing: .3em; color: var(--cobalt); }
.broth-pick { padding-top: 14px; border-top: 1.5px dashed var(--line); }
.broth-pick .price { margin-left: 6px; }
.broth-bo { background: var(--ink); color: var(--paper); }
.broth-bo .broth-name small { color: #9fb3e6; }
.broth-bo .broth-pick { border-color: #3a3833; }
.spicy { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; margin-top: 24px; border: 1.5px solid var(--chili); background: var(--white); padding: 14px 28px 14px 14px; }
.spicy img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.spicy h3 { font: 700 1.5rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 8px; }
.spicy-tag { display: inline-block; padding: 5px 10px; background: var(--chili); color: var(--white); font: 700 .8125rem/1 var(--display); letter-spacing: .14em; }

/* Menu placemat */
.menu { padding: clamp(64px, 9vw, 120px) 0; background: var(--paper-2); border-top: 1.5px solid var(--ink); }
.menu-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; max-width: none; }
.lang-switch { display: inline-flex; border: 1.5px solid var(--ink); background: var(--white); }
.lang-switch button { min-height: 44px; padding: 0 16px; border: 0; background: none; font: 600 .875rem/1 var(--body); color: var(--ink); cursor: pointer; }
.lang-switch button + button { border-left: 1.5px solid var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.legend { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--ink-soft); margin-bottom: 16px; }
.thumb { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.placemat {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-auto-flow: dense; gap: 14px; padding: 14px;
  background: var(--white); border: 1.5px solid var(--ink); box-shadow: 0 1px 0 var(--ink), 10px 10px 0 color-mix(in srgb, var(--ink) 9%, transparent);
}
.box { border: 1.5px solid var(--ink); padding: 20px 20px 22px; min-width: 0; }
.box-pho { grid-row: span 3; display: flex; flex-direction: column; }
.box-photo { margin-top: auto; padding-top: 16px; }
.box-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1.5px solid var(--ink); }
.box-photo figcaption { margin-top: 8px; font: 700 .6875rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.box h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font: 700 1.375rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .08em; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1.5px solid var(--ink); }
.box h3 small { font: 400 .875rem/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.box-flag { display: inline-block; margin: 8px 0 4px; padding: 6px 12px; border: 1.5px solid var(--chili); border-radius: 999px; color: var(--chili); font: 700 .75rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.box-note { font-size: .875rem; color: var(--ink-soft); margin: 8px 0 2px; }
.items { list-style: none; margin: 0; padding: 0; }
.item { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 0; border-bottom: 1px dotted #9d9486; align-items: baseline; }
.item:last-child { border-bottom: 0; }
.items-tight .item { padding: 9px 0; }
.code { font: 700 .75rem/1.6 var(--display); letter-spacing: .08em; color: var(--cobalt); }
.item h4 { font: 600 1rem/1.3 var(--body); }
.item h4 em { font-style: normal; font-weight: 400; color: var(--ink-soft); font-size: .875rem; }
.is-pick h4::after {
  content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 8px; vertical-align: -2px; background: var(--cobalt);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.is-feature { background: var(--cobalt-tint); margin: 8px -10px 0; padding: 14px 10px; border-bottom: 0; }
.desc { font-size: .875rem; color: var(--ink-soft); margin-top: 2px; }
.ko, .zh { font-size: .8125rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.45; }
.item .price { font-size: .9375rem; }
[data-lang="en"] .ko, [data-lang="en"] .zh, [data-lang="ko"] .zh, [data-lang="zh"] .ko { display: none; }
[data-lang="ko"] .ko, [data-lang="zh"] .zh { color: var(--ink); font-size: .9375rem; }

.addons { margin-top: 14px; padding: 16px; background: var(--paper); border: 1.5px dashed var(--ink-soft); }
.addons h4 { font: 700 .875rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 8px; }
.addons ul, .bar, .drinks { list-style: none; margin: 0; padding: 0; }
.addons li, .bar li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: .9375rem; }
.addons em, .bar em { display: block; font-style: normal; font-size: .8125rem; color: var(--ink-soft); }
.box-callout { margin-top: 14px; padding: 14px 16px; border: 1.5px solid var(--ink); border-radius: 999px; text-align: center; font-weight: 600; font-size: .9375rem; }
.box-callout small { display: block; font-weight: 400; font-size: .8125rem; color: var(--ink-soft); }
.drinks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 12px; }
.drinks li { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 10px; font-size: .9375rem; line-height: 1.3; }
.drinks .swatch { grid-row: span 2; width: 26px; height: 40px; clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); border: 1px solid var(--ink); }
.drinks .price { font-size: .875rem; }
.sw-thai { background: linear-gradient(#f0b27c, #d9824a); }
.sw-cafe { background: linear-gradient(#c79a73, #7a4f2e); }
.sw-black { background: linear-gradient(#3b2a20, #120c08); }
.sw-blue { background: linear-gradient(#f2f6ff 20%, #3f6fe0); }
.sw-lychee { background: linear-gradient(#f2a6c0, #fbe9ef 70%); }
.sw-grape { background: linear-gradient(#e7c47c, #f5f1e2 70%); }
.bar li { border-bottom: 1px dotted #9d9486; }
.bar li:last-child { border-bottom: 0; }
.menu-foot { margin-top: 20px; max-width: 58rem; font-size: .8125rem; color: var(--ink-soft); }

/* Beyond the bowl */
.table { padding: clamp(64px, 9vw, 120px) 0; }
.table-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(140px, auto); gap: 14px; }
.table-grid figure { position: relative; border: 1.5px solid var(--ink); overflow: hidden; background: var(--paper-2); }
.table-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.table-grid figure:hover img { transform: scale(1.03); }
.table-grid figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; background: var(--paper); border: 1.5px solid var(--ink); font: 700 .6875rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.t-a { grid-column: span 7; grid-row: span 3; }
.t-b { grid-column: span 5; grid-row: span 4; }
.t-c { grid-column: span 4; grid-row: span 2; }
.t-d { grid-column: span 3; grid-row: span 2; }
.t-e { grid-column: span 5; grid-row: span 1; min-height: 200px; }

/* Story */
.story { background: var(--white); border-block: 1.5px solid var(--ink); padding: clamp(56px, 8vw, 104px) 0; }
.story-inner { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; max-width: 1000px; }
.story-mark { width: clamp(120px, 18vw, 220px); height: clamp(120px, 18vw, 220px); color: var(--ink); --mark-cut: var(--white); }
.story h2 { margin-bottom: 20px; }
.story p:not(.kicker) { font-size: 1.1875rem; color: var(--ink-soft); max-width: 40rem; }

/* Visit */
.visit { padding: clamp(64px, 9vw, 120px) 0; }
.visit-inner { display: grid; grid-template-columns: 1fr 1.15fr .55fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.visit-photo img, .visit-room img { border: 1.5px solid var(--ink); width: 100%; object-fit: cover; }
.visit-photo img { aspect-ratio: 3 / 4; }
.visit-room { margin-top: 96px; }
.visit-room img { aspect-ratio: 9 / 16; }
.visit-copy address { font-style: normal; font-size: 1.1875rem; margin: 18px 0 22px; }
.visit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.hours-card { margin-top: 30px; border: 1.5px solid var(--ink); background: var(--white); padding: 20px 22px; }
.hours-card h3 { font: 700 1rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; margin-bottom: 10px; }
.hours { margin: 0; }
.hours div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; margin-inline: -10px; border-bottom: 1px dotted #9d9486; font-variant-numeric: tabular-nums; }
.hours div:last-child { border-bottom: 0; }
.hours dt { font-weight: 600; }
.hours dd { margin: 0; }
.hours .is-today { background: var(--cobalt); color: var(--white); border-bottom-color: transparent; }
.hours-note { margin-top: 12px; font-size: .8125rem; color: var(--ink-soft); }
.order-links { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 22px 0 0; padding: 0; }
.order-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.order-links a:hover { background: var(--ink); color: var(--paper); }

/* Footer */
footer { background: var(--ink); color: var(--paper); padding: 48px 0 32px; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.footer-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.footer-brand svg { width: 64px; height: 64px; color: var(--paper); --mark-cut: var(--ink); }
.footer-brand span { display: grid; font: 700 1.5rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; padding-top: 4px; }
.footer-brand small { font-size: .6875rem; letter-spacing: .42em; margin-top: 6px; font-weight: 600; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a { text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.footer-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid #3a3833; display: grid; gap: 4px; font-size: .8125rem; color: #b9b2a3; }

/* Motion: one entrance for the hero only */
@media (prefers-reduced-motion: no-preference) {
  .hero-title .word, .hero-title .amp { animation: rise .8s var(--ease) both; }
  .hero-title .amp { animation-delay: .08s; }
  .hero-title .word:last-child { animation-delay: .16s; }
  .blade { animation: swing 1s var(--ease) .3s both; transform-origin: 50% 0; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes swing { from { opacity: 0; transform: rotate(-4deg) translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .table-grid img { transition: none; } }

/* Responsive */
@media (max-width: 1080px) {
  .placemat { grid-template-columns: 1fr 1fr; }
  .box-pho { grid-row: span 2; }
  .visit-inner { grid-template-columns: 1fr 1.2fr; }
  .visit-room { display: none; }
}
@media (max-width: 900px) {
  .site-header nav a:not(.button) { display: none; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 40px 16px 36px; }
  .hero-photo { border-left: 0; border-top: 1.5px solid var(--ink); aspect-ratio: 7 / 5; }
  .promise-inner { grid-template-columns: 1fr; }
  .broth-grid { grid-template-columns: 1fr; }
  .table-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; }
  .t-a { grid-column: span 6; grid-row: span 2; }
  .t-b { grid-column: span 3; grid-row: span 3; }
  .t-c, .t-d { grid-column: span 3; grid-row: span 1; min-height: 0; }
  .t-e { grid-column: span 6; grid-row: span 2; }
}
@media (max-width: 720px) {
  .placemat { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .box-pho { grid-row: auto; }
  .box-photo { display: none; }
  .spicy { grid-template-columns: 96px 1fr; gap: 16px; padding: 10px 16px 10px 10px; }
  .spicy h3 { font-size: 1.125rem; }
  .story-inner { grid-template-columns: 1fr; }
  .visit-inner { grid-template-columns: 1fr; }
  .visit-photo img { aspect-ratio: 4 / 3; }
  .drinks { grid-template-columns: 1fr; }
  .lang-switch { width: 100%; }
  .lang-switch button { flex: 1; padding: 0 8px; }
}
@media (max-width: 420px) {
  .brand-word { font-size: 1.0625rem; letter-spacing: .14em; }
  .brand-mark { width: 38px; height: 38px; }
  .nav-call { font-size: .8125rem; padding: 0 12px; }
  .blade { top: 14px; left: 14px; font-size: 1.25rem; padding: 8px 7px 10px; }
  .blade svg { width: 26px; height: 26px; }
  .item { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .item .price { grid-column: 2; }
}

@media print {
  .demo-note, .site-header, .hero-photo, .rim, .table, .lang-switch, .visit-room { display: none; }
  body { background: #fff; }
  .hero { display: block; }
}