/* Nomad Bistro — page styles (v5, "Buổi tối") */
/* Nomad Bistro website v5 · "Buổi tối" — dark, image-led, one warm light (Ánh đèn).
   Loaded after nomad-tokens.css and the design system's bundle.css. Every colour is a token. */

/* ---------- page shell ---------- */
.n5 { background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
.n5 *, .n5 *::before, .n5 *::after { box-sizing: border-box; }
.n5 img { display: block; max-width: 100%; }
.n5 a:not(.nb-btn) { color: inherit; }
.n5 [id] { scroll-margin-top: 72px; }
.n5 :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.n5-wrap { max-width: calc(var(--size-content) + 2 * var(--space-5)); margin: 0 auto; padding: 0 var(--space-5); }
.n5-sec { padding: var(--space-8) 0; }
.n5-sunken { background: var(--surface-sunken); }
.n5-raised { background: var(--surface-raised); }
@media (max-width: 899.98px) { .n5 .n5-d { display: none !important; } }
@media (min-width: 900px) { .n5 .n5-m { display: none !important; } }

/* ---------- type ---------- */
.n5-eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0; }
.n5-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.n5-h1 { font-family: var(--font-serif); font-weight: 400; font-size: 42px; line-height: 46px; letter-spacing: -0.015em; margin: 0; }
.n5-h2 { font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 40px; letter-spacing: -0.01em; margin: 0; }
.n5-h3 { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 30px; margin: 0; }
.n5-lead { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 32px; margin: 0; }
.n5-body { font-size: 16px; line-height: 26px; margin: 0; }
.n5-small { font-size: 14px; line-height: 22px; margin: 0; }
.n5-muted { color: var(--ink-muted); }
.n5-en { font-family: var(--font-serif); font-style: italic; color: var(--ink-muted); }
.n5-script { font-family: "Ephesis", var(--font-serif); font-weight: 400; font-size: 44px; line-height: 52px; color: var(--accent); margin: 0; }
.n5-ph { color: var(--accent); white-space: nowrap; }
.n5-stack { display: flex; flex-direction: column; }
.n5-row { display: flex; flex-wrap: wrap; align-items: center; }
.n5-g1 { gap: var(--space-1); } .n5-g2 { gap: var(--space-2); } .n5-g3 { gap: var(--space-3); } .n5-g4 { gap: var(--space-4); } .n5-g5 { gap: var(--space-5); } .n5-g6 { gap: var(--space-6); } .n5-g7 { gap: var(--space-7); }

/* section head: the lintel line from the brand, eyebrow + title */
.n5-head-sec { display: flex; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--rule); padding-top: var(--space-4); margin-bottom: var(--space-6); }
.n5-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }

/* "Mẫu" chip: marks sample content that must be replaced before launch */
.n5-sample { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px dashed var(--accent); color: var(--accent); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }

/* ---------- photos & the door frame motif ---------- */
.n5-photo { position: relative; overflow: hidden; margin: 0; background: var(--surface-sunken); }
.n5-photo img { width: 100%; height: 100%; object-fit: cover; }
.n5-r45 { aspect-ratio: 4 / 5; } .n5-r35 { aspect-ratio: 3 / 5; } .n5-r11 { aspect-ratio: 1 / 1; } .n5-r34 { aspect-ratio: 3 / 4; } .n5-r169 { aspect-ratio: 16 / 9; } .n5-r43 { aspect-ratio: 4 / 3; }
/* door: a doorway frame — thin lintel of light above the image, like the logo's half-open door */
.n5-door { position: relative; padding-top: 10px; }
.n5-door::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rule); opacity: .9; }
.n5-door-slit::after { content: ""; position: absolute; top: 10px; right: 0; bottom: 0; width: 10px; background: var(--slit); clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%); z-index: 2; }
.n5-cap { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-2); }

/* ---------- reveal on scroll (no JS; only where supported, never with reduced motion) ---------- */
@keyframes n5-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes n5-drift { from { transform: translateY(0) scale(1.06); } to { transform: translateY(64px) scale(1.06); } }
@keyframes n5-shrink { from { min-height: 88px; } to { min-height: 68px; } }
@keyframes n5-logo { from { width: 184px; } to { width: 160px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .n5-rv { animation: n5-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    .n5-slide img { animation: n5-drift linear both; animation-timeline: scroll(root); animation-range: 0 800px; }
  }
}

/* ---------- top bar (desktop) ---------- */
.n5-top { background: var(--surface-sunken); color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.n5-top .n5-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: var(--space-5); }
.n5-top-info { display: flex; align-items: center; gap: var(--space-6); }
.n5-top-info span { display: inline-flex; align-items: center; gap: var(--space-2); }
.n5-top .nb-icon { width: 16px; height: 16px; color: var(--accent); }

/* ---------- header ---------- */
.n5-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.n5-header-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 64px; }
.n5-header .nb-logo { display: inline-flex; }
.n5-header-tools { display: flex; align-items: center; gap: var(--space-2); }
.n5-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; padding: 0; }
.n5-iconbtn:hover { border-color: var(--ink); }
.n5-iconbtn[disabled] { opacity: .5; cursor: not-allowed; }
.n5-nav { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.n5-nav a { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .04em; text-decoration: none; padding: 12px 0; border-bottom: 1px solid transparent; }
.n5-nav a:hover { border-bottom-color: var(--ink); }
/* mobile sheet */
.n5-sheet { border-top: 1px solid var(--line); background: var(--surface); padding: var(--space-5) 0 var(--space-6); }
.n5-sheet ul { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.n5-sheet li a { display: block; font-family: var(--font-serif); font-size: 28px; line-height: 36px; padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.n5-sheet-info { display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink-muted); font-size: 15px; line-height: 22px; margin-bottom: var(--space-5); }

/* ---------- hero slideshow ---------- */
.n5-hero { position: relative; background: var(--surface-sunken); }
.n5-hero-media { position: relative; height: 460px; overflow: hidden; }
.n5-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.n5-slide.is-on { opacity: 1; }
.n5-slide img { width: 100%; height: 100%; object-fit: cover; }
.n5-hero-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(180deg, rgba(28, 42, 32, 0), rgba(28, 42, 32, 1)); pointer-events: none; z-index: 1; }
.n5-hero-copy { position: relative; z-index: 2; padding: var(--space-3) var(--space-5) var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); }
.n5-hero-copy .n5-body { color: var(--ink); max-width: 560px; }
.n5-hero-ctl { display: flex; align-items: center; gap: var(--space-2); }
.n5-hero-count { font-size: 13px; line-height: 20px; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 72px; }
.n5-hero-cap { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.n5-dots { display: flex; gap: 0; }
.n5-dot { width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.n5-dot span { display: block; width: 28px; height: 2px; background: var(--line-strong); }
.n5-dot[aria-current="true"] span { background: var(--accent); }

/* ---------- story ---------- */
.n5-story { display: flex; flex-direction: column; gap: var(--space-7); }
.n5-story-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.n5-story-imgs > :nth-child(2n) { margin-top: var(--space-7); }
.n5-chef { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-4); align-items: end; border-top: 1px solid var(--line); padding-top: var(--space-5); }

/* ---------- cuisines: large names, photo floats in on hover ---------- */
.n5-cats { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.n5-cat { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 64px; gap: var(--space-3); align-items: center; padding: var(--space-4) 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.n5-cat-num { font-size: 12px; line-height: 16px; letter-spacing: .12em; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.n5-cat-name { font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 38px; letter-spacing: -0.01em; transition: transform .35s ease; }
.n5-cat-name .n5-en { display: block; font-size: 16px; line-height: 22px; letter-spacing: 0; }
.n5-cat-meta { display: none; }
.n5-cat-thumb { width: 64px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-raised); }
.n5-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.n5-cat-thumb-empty { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line-strong); background: transparent; }
.n5-cat-thumb-empty .nb-icon { color: var(--ink-muted); }
.n5-cat-float { display: none; }
.n5-cat-arrow { display: none; }

/* ---------- signature dishes ---------- */
.n5-dishes { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); margin: 0 calc(-1 * var(--space-5)); padding-left: var(--space-5); padding-right: var(--space-5); scroll-padding-inline: var(--space-5); }
.n5-dish { scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.n5-dish .n5-photo { position: relative; }
.n5-dish-pick { position: absolute; left: var(--space-3); top: calc(10px + var(--space-3)); z-index: 3; }
.n5-dish-pick .nb-badge { background: var(--surface); }
.n5-dish-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-3); margin-top: auto; }
.n5-price { font-size: 16px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--accent); }
.n5-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.n5-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink); }
.n5-tag .nb-icon { width: 16px; height: 16px; color: var(--ink-muted); }

/* ---------- journey: a route line through the menu's origins ---------- */
.n5-stops { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); list-style: none; margin: 0; padding: 0 0 0 40px; }
.n5-stops::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; border-left: 1px dashed var(--accent); }
.n5-stop { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.n5-stop::before { content: ""; position: absolute; left: -40px; top: 4px; width: 15px; height: 15px; border-radius: var(--radius-circle); border: 1px solid var(--accent); background: var(--surface-sunken); }
.n5-stop.is-end::before { background: var(--accent); }
.n5-stop-name { font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 40px; margin: 0; }
.n5-stop-list { font-size: 15px; line-height: 24px; color: var(--ink); margin: 0; }

/* ---------- private dining ---------- */
.n5-events { display: flex; flex-direction: column; gap: var(--space-6); }
.n5-occ { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.n5-occ li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.n5-occ .nb-icon { color: var(--accent); margin-top: 3px; }

/* ---------- reviews ---------- */
.n5-reviews { display: flex; flex-direction: column; gap: var(--space-6); }
.n5-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.n5-score { border: 1px solid var(--line); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.n5-score-num { font-family: var(--font-serif); font-size: 40px; line-height: 44px; color: var(--accent); }
.n5-stars { display: inline-flex; gap: 2px; color: var(--accent); }
.n5-stars .nb-icon { width: 16px; height: 16px; fill: currentColor; }
.n5-quote { font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 36px; margin: 0; }
.n5-quote-ctl { display: flex; align-items: center; gap: var(--space-2); }

/* ---------- instagram ---------- */
.n5-insta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }

/* ---------- reservation ---------- */
.n5-book { display: flex; flex-direction: column; gap: var(--space-6); }
.n5-book-card { background: var(--surface-raised); padding: var(--space-5); }
.n5-facts { margin: 0; border-top: 1px solid var(--line); }
.n5-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.n5-facts dt { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.n5-facts dd { margin: 0; font-size: 16px; line-height: 22px; }
.n5-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.n5-quick .nb-btn { width: 100%; }

/* ---------- footer ---------- */
.n5-foot { background: var(--surface-sunken); padding: var(--space-8) 0 var(--space-6); }
.n5-foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
.n5-foot h2 { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-3); }
.n5-foot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: 15px; line-height: 22px; }
.n5-foot-k { display: block; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.n5-map { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); background:
  repeating-linear-gradient(0deg, transparent 0 39px, rgba(154, 158, 152, .14) 39px 40px),
  repeating-linear-gradient(90deg, transparent 0 39px, rgba(154, 158, 152, .14) 39px 40px), var(--surface); display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-4); }
.n5-map p { font-size: 13px; line-height: 19px; letter-spacing: .06em; color: var(--ink-muted); margin: 0; }
.n5-map .nb-icon { color: var(--accent); width: 28px; height: 28px; margin: 0 auto var(--space-2); }
.n5-news { display: flex; flex-direction: column; gap: var(--space-3); }
.n5-news-row { display: flex; gap: var(--space-2); }
.n5-news-row .nb-field { flex: 1 1 auto; }
.n5-news-row .nb-btn { flex: none; align-self: flex-end; }
.n5-proto { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 14px; line-height: 21px; color: var(--ink); background: var(--surface-raised); border-left: 0; padding: var(--space-3); }
.n5-proto .nb-icon { color: var(--accent); flex: none; margin-top: 1px; }
.n5-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.n5-descriptor { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }

.n5-bar { position: sticky; bottom: 0; z-index: 50; }

/* ---------- reservation form (Reserve.dc.html) ---------- */
.rs { color: var(--ink); font-family: var(--font-sans); }
.rs *, .rs *::before, .rs *::after { box-sizing: border-box; }
.rs-form { display: flex; flex-direction: column; gap: var(--space-5); }
.rs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.rs-dg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; }
@media (max-width: 599.98px) { .rs-two, .rs-dg { grid-template-columns: minmax(0, 1fr); } .rs-stepper button { width: 44px; } .rs-stepper output { min-width: 52px; } }
.rs-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rs-group > legend { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 0; margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rs-sub { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: 0; }
.rs-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.rs-chip { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.rs-chip:hover { border-color: var(--ink); }
.rs-chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.rs-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rs-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rs-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); width: fit-content; }
.rs-stepper button { width: 48px; min-height: 48px; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rs-stepper button:hover { background: var(--surface); }
.rs-stepper button[disabled] { opacity: .4; cursor: not-allowed; }
.rs-stepper output { min-width: 72px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 24px; font-variant-numeric: tabular-nums; border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); }
.rs-err { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--danger); margin: 0; }
.rs-err .nb-icon { width: 18px; height: 18px; flex: none; }
.rs-invalid .rs-chip, .rs-invalid .rs-stepper { border-color: var(--danger); }
.rs-proto { display: flex; gap: var(--space-3); align-items: flex-start; border: 1px solid var(--accent); padding: var(--space-4); }
.rs-proto .nb-icon { color: var(--accent); flex: none; }
.rs-sum { display: grid; grid-template-columns: 112px minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
.rs-sum dt, .rs-sum dd { margin: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 22px; }
.rs-sum dt { color: var(--ink-muted); }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .n5-wrap { padding: 0 var(--space-9); max-width: none; }
  .n5-sec { padding: var(--space-9) 0; }
  .n5-h1 { font-size: 64px; line-height: 68px; letter-spacing: -0.02em; }
  .n5-h2 { font-size: 52px; line-height: 58px; letter-spacing: -0.02em; }
  .n5-h3 { font-size: 28px; line-height: 34px; }
  .n5-body { font-size: 17px; line-height: 28px; }
  .n5-lead { font-size: 26px; line-height: 38px; }
  .n5-script { font-size: 48px; line-height: 56px; }
  .n5-head-sec { margin-bottom: var(--space-7); }

  .n5-header-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 88px; }
  .n5-header-in > :last-child { justify-self: end; }
  .n5-header .nb-logo svg { width: 184px; height: auto; }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .n5-header-in { animation: n5-shrink linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
      .n5-header .nb-logo svg { animation: n5-logo linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
    }
  }

  .n5-hero { height: 820px; overflow: hidden; }
  .n5-hero-media { position: absolute; inset: 0; height: auto; }
  .n5-hero-media::after { top: 0; height: auto; background: linear-gradient(90deg, rgba(28, 42, 32, .94) 0%, rgba(28, 42, 32, .78) 34%, rgba(28, 42, 32, 0) 64%); }
  .n5-hero-copy { position: absolute; left: var(--space-9); right: auto; bottom: var(--space-9); width: 620px; padding: 0; gap: var(--space-5); }
  .n5-hero-side { position: absolute; z-index: 2; right: var(--space-9); bottom: var(--space-9); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); background: rgba(28, 42, 32, .82); padding: var(--space-4); }

  .n5-story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: start; }
  .n5-story-imgs { grid-column: 1 / 7; grid-row: 1; gap: var(--space-5); }
  .n5-story-imgs > :nth-child(2n) { margin-top: var(--space-7); }
  .n5-story-text { grid-column: 8 / 13; grid-row: 1; position: sticky; top: 120px; }

  .n5-cat { grid-template-columns: 64px minmax(0, 1fr) 220px 44px; gap: var(--space-5); padding: var(--space-5) 0; }
  .n5-cat-name { font-size: 72px; line-height: 80px; letter-spacing: -0.02em; }
  .n5-cat-name .n5-en { display: inline; font-size: 24px; line-height: 32px; margin-left: var(--space-4); opacity: 0; transition: opacity .35s ease; }
  .n5-cat-meta { display: block; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
  .n5-cat-arrow { display: inline-flex; color: var(--ink-muted); transition: transform .35s ease, color .35s ease; }
  .n5-cat-thumb { display: none; }
  .n5-cat-float { display: block; position: absolute; right: 300px; top: 50%; width: 240px; aspect-ratio: 4 / 5; transform: translateY(-46%) scale(.94); opacity: 0; transition: opacity .35s ease, transform .45s ease; pointer-events: none; z-index: 5; overflow: hidden; background: var(--surface-raised); }
  .n5-cat-float img { width: 100%; height: 100%; object-fit: cover; }
  .n5-cat-float.n5-cat-thumb-empty { display: flex; background: var(--surface-raised); }
  .n5-cat-float span { font-size: 13px; line-height: 19px; letter-spacing: .06em; color: var(--ink-muted); text-align: center; padding: var(--space-4); }
  .n5-cat:hover .n5-cat-name, .n5-cat:focus-visible .n5-cat-name, .n5-cat.is-hover .n5-cat-name { transform: translateX(var(--space-4)); }
  .n5-cat:hover .n5-en, .n5-cat:focus-visible .n5-en, .n5-cat.is-hover .n5-en { opacity: 1; }
  .n5-cat:hover .n5-cat-float, .n5-cat:focus-visible .n5-cat-float, .n5-cat.is-hover .n5-cat-float { opacity: 1; transform: translateY(-50%) scale(1); }
  .n5-cat:hover .n5-cat-arrow, .n5-cat:focus-visible .n5-cat-arrow, .n5-cat.is-hover .n5-cat-arrow { transform: translateX(6px); color: var(--ink); }

  .n5-dishes { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); overflow: visible; margin: 0; padding: 0; }

  .n5-stops { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); padding: 40px 0 0; }
  .n5-stops::before { left: 8px; right: 0; top: 7px; bottom: auto; border-left: 0; border-top: 1px dashed var(--accent); }
  .n5-stop::before { left: 0; top: -40px; }
  .n5-stop-name { font-size: 44px; line-height: 50px; }

  .n5-events { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: center; }
  .n5-events-img { grid-column: 1 / 7; }
  .n5-events-text { grid-column: 8 / 13; }

  .n5-reviews { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: start; }
  .n5-reviews-scores { grid-column: 1 / 5; }
  .n5-reviews-quote { grid-column: 6 / 13; }
  .n5-scores { grid-template-columns: minmax(0, 1fr); }
  .n5-quote { font-size: 36px; line-height: 48px; }

  .n5-insta { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }

  .n5-book { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: start; }
  .n5-book-info { grid-column: 1 / 6; position: sticky; top: 120px; }
  .n5-book-card { grid-column: 7 / 13; padding: var(--space-7); }

  .n5-foot { padding: var(--space-9) 0 var(--space-6); }
  .n5-foot-grid { grid-template-columns: 4fr 2fr 3fr 3fr; gap: var(--space-6); }
}

.n5-dish-pick .nb-badge { padding: 6px 10px; }

/* ================= Menu page (ThucDon.dc.html) ================= */
.mn5-head { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.mn5-head-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; }
.mn5-info { display: none; }
.mn5-tools { display: flex; align-items: center; gap: var(--space-2); }
.mn5-booklink { display: none; }
/* full-screen menu panel */
.mn5-overlay { position: fixed; inset: 0; z-index: 100; background: var(--surface-sunken); overflow-y: auto; }
.mn5-overlay-top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid var(--line); }
.mn5-overlay-grid { display: flex; flex-direction: column; gap: var(--space-7); padding: var(--space-6) 0 var(--space-8); }
.mn5-nav { list-style: none; margin: 0; padding: 0; }
.mn5-nav a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.mn5-nav a[aria-current="page"] .mn5-nav-label { color: var(--accent); }
.mn5-nav-thumb { width: 64px; height: 64px; overflow: hidden; background: var(--surface-raised); }
.mn5-nav-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mn5-nav-label { font-family: var(--font-serif); font-size: 30px; line-height: 36px; }
.mn5-panel-info { display: flex; flex-direction: column; gap: var(--space-5); }
.mn5-panel-info dl { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.mn5-panel-info dt { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.mn5-panel-info dd { margin: 4px 0 0; font-size: 16px; line-height: 24px; }
/* title */
.mn5-title { text-align: center; padding-top: var(--space-8); padding-bottom: var(--space-7); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.mn5-h1 { font-family: var(--font-serif); font-weight: 400; font-size: 56px; line-height: 60px; letter-spacing: -0.02em; margin: 0; }
.mn5-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-4); list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.mn5-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); font-size: 14px; line-height: 20px; text-decoration: none; border-bottom: 1px solid transparent; }
.mn5-jump a:hover { border-bottom-color: var(--ink); }
.mn5-jump li { display: inline-flex; align-items: center; }
/* intro */
.mn5-intro { display: flex; flex-direction: column; gap: var(--space-6); }
.mn5-note { display: flex; gap: var(--space-3); align-items: flex-start; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-4) 0; }
.mn5-note .nb-icon { color: var(--accent); flex: none; margin-top: 2px; }
/* categories */
.mn5-cat { max-width: 760px; margin: 0 auto; }
.mn5-divider { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.mn5-divider::before, .mn5-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.mn5-cat-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.mn5-cat-h { font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 46px; letter-spacing: -0.01em; margin: 0; }
.mn5-list { list-style: none; margin: 0; padding: 0; }
.mn5-item { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.mn5-item:first-child { border-top: 1px solid var(--line); }
.mn5-item-top { display: flex; align-items: baseline; gap: var(--space-3); }
.mn5-name { font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 28px; margin: 0; }
.mn5-lead { flex: 1 1 auto; border-bottom: 1px dotted var(--line-strong); transform: translateY(-6px); min-width: 24px; }
.mn5-price { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mn5-en { font-size: 13px; line-height: 18px; letter-spacing: .02em; color: var(--ink-muted); margin: 0; }
.mn5-desc { font-size: 15px; line-height: 23px; color: var(--ink); margin: 2px 0 0; }
.mn5-drinks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.mn5-drinks h3 { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-2); }
.mn5-drinks .mn5-item { padding: var(--space-3) 0; }
.mn5-drinks .mn5-name { font-size: 19px; line-height: 26px; }
.mn5-sep { height: var(--space-8); }
/* hours */
.mn5-hours { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); text-align: center; }
.mn5-hours > div { border-top: 1px solid var(--line); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }
/* closing CTA */
.mn5-cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

@media (min-width: 900px) {
  .mn5-head-in { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 88px; }
  .mn5-head-in > :last-child { justify-self: end; }
  .mn5-info { display: flex; justify-self: center; gap: var(--space-5); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
  .mn5-info span { display: inline-flex; align-items: center; gap: var(--space-2); }
  .mn5-info .nb-icon { width: 16px; height: 16px; color: var(--accent); }
  .mn5-booklink { display: inline-flex; }
  .mn5-overlay-top { min-height: 88px; }
  .mn5-overlay-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); padding: var(--space-8) 0; }
  .mn5-overlay-grid > nav { grid-column: 1 / 8; }
  .mn5-panel-info { grid-column: 9 / 13; }
  .mn5-nav a { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4) 0; }
  .mn5-nav-thumb { width: 96px; height: 96px; }
  .mn5-nav-label { font-size: 48px; line-height: 56px; }
  .mn5-title { padding-top: var(--space-9); padding-bottom: var(--space-8); }
  .mn5-h1 { font-size: 112px; line-height: 112px; letter-spacing: -0.03em; }
  .mn5-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: center; }
  .mn5-intro-text { grid-column: 1 / 7; grid-row: 1; }
  .mn5-intro-img { grid-column: 8 / 13; grid-row: 1; }
  .mn5-cat-h { font-size: 56px; line-height: 62px; }
  .mn5-name { font-size: 24px; line-height: 30px; }
  .mn5-drinks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); }
  .mn5-sep { height: var(--space-9); }
  .mn5-hours { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- v5.1 · conversion layout ---------- */
.n5-hero-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: 15px; line-height: 22px; }
.n5-hero-facts li { display: flex; align-items: flex-start; gap: var(--space-2); }
.n5-hero-facts .nb-icon { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; }
.n5-sec-sm { padding: var(--space-7) 0; }
/* quick strip */
.n5-strip { background: var(--surface-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-6) 0; }
.n5-strip-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: end; }
.n5-strip-lead { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-2); }
.n5-strip-go { grid-column: 1 / -1; }
.n5-strip-note { margin-top: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* booking sheet */
.n5-sheetbg { position: fixed; inset: 0; z-index: 90; background: rgba(28, 42, 32, .72); }
.n5-booksheet { position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; max-height: 92vh; background: var(--surface-raised); display: flex; flex-direction: column; box-shadow: 0 -8px 32px rgba(0, 0, 0, .35); }
.n5-booksheet-top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); flex: none; }
.n5-booksheet-body { overflow-y: auto; padding: var(--space-5); }
@keyframes n5-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) { .n5-booksheet { animation: n5-sheet-up .3s ease both; } }
@media (min-width: 900px) {
  .n5-hero-facts { flex-direction: row; gap: var(--space-5); }
  .n5-strip-in { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)) auto; gap: var(--space-4); }
  .n5-strip-lead { grid-column: auto; margin-bottom: 0; }
  .n5-strip-go { grid-column: auto; }
  .n5-strip-go .nb-btn { width: auto; }
  .n5-booksheet { left: auto; top: 0; bottom: 0; width: 640px; max-height: none; box-shadow: -8px 0 32px rgba(0, 0, 0, .35); }
  .n5-booksheet-body { padding: var(--space-6) var(--space-7); }
  @keyframes n5-sheet-up { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ================= Gather & Experience (GapGo.dc.html) ================= */
.gx-hero { padding-top: var(--space-8); padding-bottom: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; }
.gx-hero .n5-h1 { font-size: 44px; line-height: 48px; }
/* 1 · dining: the prominent one — full-bleed photo, copy on a raised panel overlapping it */
.gx-dine { position: relative; }
.gx-dine-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-sunken); }
.gx-dine-photo img { width: 100%; height: 100%; object-fit: cover; }
.gx-dine-panel { background: var(--surface-raised); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); margin: calc(-1 * var(--space-7)) var(--space-4) 0; position: relative; z-index: 2; }
.gx-dine-panel .n5-h2 { font-size: 38px; line-height: 44px; }
/* 2 · café: text left, tall slot right, small coffee photo tucked under */
.gx-cafe { display: flex; flex-direction: column; gap: var(--space-6); }
.gx-cafe-media { position: relative; display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3); align-items: end; }
/* 3 · experience: photo left, text right, status chip */
.gx-exp { display: flex; flex-direction: column; gap: var(--space-6); }
.gx-status { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 10px; border: 1px solid var(--line-strong); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); width: fit-content; }
.gx-status::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-circle); border: 1px solid var(--accent); }
/* inquiry */
.gx-form { background: var(--surface-raised); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.gx-kinds { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 900px) {
  .gx-hero { padding: var(--space-9) 0 var(--space-8); }
  .gx-hero .n5-h1 { font-size: 72px; line-height: 76px; letter-spacing: -0.025em; }
  .gx-dine { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: center; }
  .gx-dine-photo { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 16 / 10; }
  .gx-dine-panel { grid-column: 7 / 13; grid-row: 1; margin: 0; padding: var(--space-7); }
  .gx-dine-panel .n5-h2 { font-size: 52px; line-height: 58px; }
  .gx-cafe { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: center; }
  .gx-cafe-text { grid-column: 1 / 6; }
  .gx-cafe-media { grid-column: 7 / 13; }
  .gx-exp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: center; }
  .gx-exp-media { grid-column: 1 / 6; }
  .gx-exp-text { grid-column: 7 / 12; }
  .gx-form { padding: var(--space-7); }
  .gx-inq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: start; }
  .gx-inq-text { grid-column: 1 / 5; position: sticky; top: 120px; }
  .gx-inq-form { grid-column: 6 / 13; }
}

.gx-gm { display: flex; flex-direction: column; gap: var(--space-6); }
.gx-gm-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 900px) {
  .gx-gm { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: center; }
  .gx-gm-text { grid-column: 1 / 6; }
  .gx-gm-media { grid-column: 7 / 13; gap: var(--space-3); }
}

/* ---------- static build extras ---------- */
.n5 picture, .nb-invite-media picture, .n5-cat-thumb picture, .n5-cat-float picture { display: block; width: 100%; height: 100%; }
.n5-slide picture { position: absolute; inset: 0; }
.n5-hours-b { font-weight: 500; }
.n5-top a { color: inherit; text-decoration: none; }
.n5-score { text-decoration: none; color: inherit; }
.nb-logo-svg, .nb-mark-svg { display: block; height: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #203027; }

/* ---------- mobile tuning ---------- */
@media (max-width: 899.98px) {
  .n5-sec { padding: var(--space-7) 0; }
  .n5-sec-sm { padding: var(--space-6) 0; }
  .mn5-title { padding-top: var(--space-7); padding-bottom: var(--space-6); }
  .gx-hero { padding-top: var(--space-7); padding-bottom: var(--space-6); }
  .n5-hero-media { height: clamp(240px, 38vh, 380px); }
  .n5-hero-copy .n5-h1 { font-size: 36px; line-height: 40px; }
  .n5-strip-in > .nb-field:has(#q-slot) { grid-column: 1 / -1; }
  .mn5-title > nav { align-self: stretch; margin: 0 calc(-1 * var(--space-5)); }
  .mn5-jump { flex-wrap: nowrap; justify-content: flex-start; gap: var(--space-2); overflow-x: auto; padding: 0 var(--space-5); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mn5-jump::-webkit-scrollbar { display: none; }
  .mn5-jump li { flex: none; }
  .mn5-jump a { white-space: nowrap; padding: 0 var(--space-4); border: 1px solid var(--line); }
  .n5-facts dd a, .n5-book-info p a { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .nb-footer-line[href] { display: inline-flex; align-items: center; min-height: 44px; }
}
.mn5-hours > :only-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 360px); }