/* The Spice Kitchen — rebuilt from the 2014 archived site.
   The original was a small hand-built site and carried almost no colour:
   #c3112e (a deep chilli red) against #333333 text on white. That red is the
   whole identity, so it is used as the accent rather than diluted, and the
   palette around it is warmed to brass and clove to suit the subject.

   Type: the original declared no webfont and fell back to system Georgia/
   Arial. Marcellus (a warm inscriptional serif) over Karla gives it the same
   restrained, slightly formal feel a 2013 restaurant site had, without
   pretending to be a face the site never used.

   Layout identity: a DEEP-RED banded hero with a centred serif wordmark, over
   a 2-up editorial grid with a rule above each title. dimsumhaus owns
   black+gold with a dense 3-up; mariaandsingh the teal colour-block;
   chefstable full-viewport white. No overlap. */
:root {
  --s-paper:     #fffdf9;
  --s-surface:   #ffffff;
  --s-surface-2: #f7f1e8;
  --s-ink:       #2b2320;
  --s-ink-soft:  #4a3f39;
  --s-muted:     #7a6c63;
  --s-line:      #e8ded1;
  --s-line-soft: #f4ece1;
  --s-accent:    #c3112e;   /* the site's own red */
  --s-accent-ink:#ffffff;
  --s-accent-2:  #b8863b;   /* brass */
  --s-display: "Marcellus", Georgia, "Times New Roman", serif;
  --s-body:    "Karla", -apple-system, BlinkMacSystemFont, sans-serif;
  --s-radius: 2px;
  --s-card-ratio: 3 / 2;
  --s-wrap: 1140px;
}

/* Header. colour set explicitly — satellite.css pairs .sat-header's
   background with var(--s-accent-ink), so overriding only the background is
   what produced the dark-on-dark bug on mariaandsingh. */
.sat-header {
  background: var(--s-accent); color: #fff;
  border-bottom: 3px solid var(--s-accent-2);
}
.sat-header a { color: #fff; }
.sat-nav a { color: #fff; opacity: .92; font-size: .74rem; }
.sat-nav a:hover { opacity: 1; color: var(--s-accent-2); }
.sat-nav-toggle { color: #fff; border-color: #fff; }
.sat-logo {
  font-family: var(--s-display); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; font-size: 1.05rem;
}
.sat-logo em { font-style: normal; color: var(--s-accent-2); }
.sat-btn {
  background: var(--s-accent); color: #fff; border: none; border-radius: 2px;
  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); font-weight: 600;
}
h1, h2, h3 { font-family: var(--s-display); font-weight: 400; letter-spacing: .01em; }

/* Layout identity: red banded hero, centred serif wordmark, 2-up grid */
.sat-hero { background: var(--s-accent); padding: 0; }
.sat-hero-grid { grid-template-columns: 1fr; gap: 0; position: static; }
.sat-hero-img { display: none; }
.sat-hero-text { position: static; padding: 78px 0 70px; text-align: center; color: #fff; }
.sat-hero-brand {
  font-family: var(--s-display); font-size: clamp(2rem, 5.4vw, 3.6rem);
  font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin: 0 0 16px;
}
.sat-hero-feature {
  font-family: var(--s-body); font-weight: 300;
  font-size: clamp(.9rem, 2vw, 1.2rem); letter-spacing: .24em;
  text-transform: uppercase; color: rgba(255,255,255,.9); margin: 0;
}
.sat-hero-text .sat-lede { color: rgba(255,255,255,.85); max-width: 56ch; margin: 22px auto 0; }

.sat-section-head { border-bottom: 2px solid var(--s-accent-2); padding-bottom: 10px; margin-bottom: 30px; }
.sat-section-head h2 { text-transform: uppercase; letter-spacing: .16em; font-size: 1.3rem; }
.sat-grid-4, .sat-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 42px 36px; }
.sat-card { gap: 0; }
.sat-card-img { border-radius: 2px; margin-bottom: 14px; }
.sat-card-title { font-family: var(--s-display); font-weight: 400; font-size: 1.15rem; }
.sat-card-meta {
  order: -1; text-transform: uppercase; letter-spacing: .18em; font-size: .6rem;
  color: var(--s-accent); font-weight: 600; margin-bottom: 8px;
  border-top: 2px solid var(--s-line); padding-top: 10px;
}
.sat-card-desc { color: var(--s-muted); margin-top: 8px; font-size: .9rem; }
.sat-ingredients, .sat-facts { border-top: 3px solid var(--s-accent); border-radius: 2px; }
.sat-footer { background: var(--s-ink); border-top: 3px solid var(--s-accent); }

/* Mobile: the 2-up is unconditional and this file loads after satellite.css,
   so the collapse is restated here. */
@media (max-width: 700px) {
  .sat-grid-4, .sat-grid-3 { grid-template-columns: 1fr; gap: 30px; }
  .sat-hero-text { padding: 56px 0 50px; }
}