/* Dim Sum Haus — rebuilt from the archived order site.
   Palette read out of the 2025-02-23 capture, by frequency:

     #1d1d1b  x270   near-black          -> ink, header, footer
     #c2ae83  x32    warm gold / tan     -> accent, rules
     #f7a833  x20    orange-gold         -> highlights
     #b71918  x20    Chinese red         -> secondary accent
     #00803d  x18    green               -> unused here (was order-status UI)

   Type was 'Urbanist' over a custom face called 'Regular'. Urbanist is on
   Google Fonts so it is served as-is; the custom face is not distributable
   and falls back to the system stack.

   Layout identity: BILINGUAL category chrome and a dense 3-up grid on a black
   header — the menu's own structure. No other network site pairs near-black
   with gold, and none carries Chinese alongside English in the nav. */
:root {
  --s-paper:     #ffffff;
  --s-surface:   #ffffff;
  --s-surface-2: #faf7f0;
  --s-ink:       #1d1d1b;
  --s-ink-soft:  #333333;
  --s-muted:     #6b6b68;
  --s-line:      #e6e0d4;
  --s-line-soft: #f3efe6;
  --s-accent:    #c2ae83;   /* the gold the whole site is built on */
  --s-accent-ink:#1d1d1b;
  --s-accent-2:  #b71918;   /* Chinese red */
  --s-display: "Urbanist", -apple-system, BlinkMacSystemFont, sans-serif;
  --s-body:    "Urbanist", -apple-system, BlinkMacSystemFont, sans-serif;
  --s-radius: 4px;
  --s-card-ratio: 1 / 1;
  --s-wrap: 1200px;
}

/* Chrome. NOTE the explicit colour: satellite.css pairs .sat-header's
   background with var(--s-accent-ink), so overriding only the background
   leaves dark-on-dark — the bug that made mariaandsingh's nav invisible. */
.sat-header {
  background: var(--s-ink); color: var(--s-paper);
  border-bottom: 2px solid var(--s-accent);
}
.sat-header a { color: var(--s-paper); }
.sat-nav a { color: var(--s-paper); opacity: .9; font-size: .74rem; }
.sat-nav a:hover { opacity: 1; color: var(--s-accent); }
.sat-nav-toggle { color: var(--s-paper); border-color: var(--s-paper); }
.sat-logo {
  font-family: var(--s-display); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; font-size: .95rem;
}
.sat-logo em { font-style: normal; color: var(--s-accent); }
.sat-btn {
  background: var(--s-accent-2); color: #fff; border: none; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: .74rem;
}
.sat-btn:hover { background: var(--s-ink); }
.sat-eyebrow {
  text-transform: uppercase; letter-spacing: .2em; font-size: .64rem;
  color: var(--s-accent-2); font-weight: 600;
}
h1, h2, h3 { font-family: var(--s-display); font-weight: 600; letter-spacing: .01em; }

/* Layout identity: black hero panel, gold rule, dense 3-up square cards */
.sat-hero { background: var(--s-ink); padding: 0; }
.sat-hero-grid { grid-template-columns: 1fr; gap: 0; position: static; }
.sat-hero-img { display: none; }
.sat-hero-text { position: static; padding: 76px 0 68px; text-align: center; color: #fff; }
.sat-hero-brand {
  font-size: clamp(2rem, 5.6vw, 3.8rem); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; margin: 0 0 14px;
}
.sat-hero-feature {
  font-weight: 300; font-size: clamp(.95rem, 2vw, 1.3rem); letter-spacing: .2em;
  text-transform: uppercase; color: var(--s-accent); margin: 0;
}
.sat-hero-text .sat-lede { color: rgba(255,255,255,.8); max-width: 56ch; margin: 22px auto 0; }

.sat-section-head { border-bottom: 2px solid var(--s-accent); padding-bottom: 10px; margin-bottom: 30px; }
.sat-section-head h2 { text-transform: uppercase; letter-spacing: .14em; font-size: 1.25rem; }
.sat-grid-4, .sat-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }
.sat-card-img { border-radius: 4px; margin-bottom: 12px; }
.sat-card-title { font-weight: 600; font-size: 1rem; }
.sat-card-meta {
  order: -1; text-transform: uppercase; letter-spacing: .16em; font-size: .6rem;
  color: var(--s-accent-2); font-weight: 600; margin-bottom: 6px;
}
.sat-card-desc { color: var(--s-muted); margin-top: 6px; font-size: .88rem; }
.sat-ingredients, .sat-facts { border-top: 3px solid var(--s-accent); border-radius: 4px; }
.sat-footer { background: var(--s-ink); border-top: 2px solid var(--s-accent); }

/* Mobile: the 3-up above is unconditional and this file loads after
   satellite.css, so the collapse must be restated here. */
@media (max-width: 900px) { .sat-grid-4, .sat-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; } }
@media (max-width: 560px) { .sat-grid-4, .sat-grid-3 { grid-template-columns: 1fr; } .sat-hero-text { padding: 52px 0 46px; } }