/* Chef's Table — the restaurant's own look, carried into the network.
   Taken from chefstable.sg: Inter throughout, an almost entirely achromatic
   palette (gray-900 ink on near-white), silver rules and a single amber
   accent. Fine dining reads as restraint, so this stylesheet mostly REMOVES
   things the shared satellite theme adds — colour, roundness, shadow.

   Layout identity: a FULL-BLEED hero with the title over the image, then a
   strict 3-up grid of square-ish cards with hairline rules and uppercase,
   wide-tracked headings. No other network site uses full-bleed + hairline;
   messybaker owns the overlay hero on a rounded card, cccakes the centred
   2-up, redeemingthetable the magazine 2-up. */
:root {
  --s-paper:     #ffffff;
  --s-surface:   #ffffff;
  --s-surface-2: #fafafa;
  --s-ink:       #111827;   /* the site's dominant colour, by far */
  --s-ink-soft:  #374151;
  --s-muted:     #6b7280;
  --s-line:      #e5e7eb;
  --s-line-soft: #f8f9fa;
  --s-accent:    #111827;   /* the brand IS the near-black; no colour pop */
  --s-accent-ink:#ffffff;
  --s-accent-2:  #c0c0c0;   /* silver rules */
  --s-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --s-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --s-radius: 8px;          /* their .restaurant-link cards use 8px */
  --s-card-ratio: 3 / 2;
  --s-wrap: 1200px;
}

/* Chrome ------------------------------------------------------------- */
.sat-header { background: var(--s-ink); border-bottom: none; }
.sat-logo { letter-spacing: .22em; text-transform: uppercase; font-weight: 500; font-size: .95rem; }
.sat-logo em { font-style: normal; font-weight: 300; opacity: .65; }
.sat-nav a { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 500; }
.sat-btn {
  border-radius: 0; text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; font-weight: 500; padding: 14px 30px;
  border: 1px solid var(--s-ink); background: var(--s-ink); color: #fff;
}
.sat-btn:hover { background: transparent; color: var(--s-ink); }
.sat-eyebrow {
  text-transform: uppercase; letter-spacing: .24em; font-size: .66rem;
  color: var(--s-muted); font-weight: 500;
}

/* Headings: uppercase and widely tracked, as on the restaurant site ---- */
h1, h2 { font-weight: 300; letter-spacing: .04em; }   /* .sat-section-head h2 is set below */
.sat-section-head {
  border-bottom: 1px solid var(--s-accent-2);
  padding-bottom: 14px; margin-bottom: 34px;
}
.sat-section-head h2 {
  /* .section-title on the live site: 2rem, weight 300, letter-spacing .2em */
  text-transform: uppercase; letter-spacing: .2em; font-size: 2rem; font-weight: 300;
}

/* ── Layout identity: THEIR hero, measured from chefstable.sg ───────────
   Not an interpretation — these are the live site's own values:
     .hero          min-height:100vh; flex-centred; background:#fff; pad-top:80px
     .hero-title    clamp(2.5rem,8vw,6rem); weight 300; letter-spacing .2em
     .hero-divider  2px solid #111827; max-width 600px; margin 2rem auto
     .hero-subtitle clamp(1.25rem,4vw,2.5rem); weight 300; letter-spacing .3em
   Crucially the hero carries NO IMAGE. A first pass here used a full-bleed
   photo behind the title, which looked like a food blog and read nothing like
   the restaurant: the whole effect is a near-empty white screen with very
   large, very thin, very widely tracked type. */
.sat-hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #fff; padding: 80px 0 0; text-align: center;
}
.sat-hero-grid { grid-template-columns: 1fr; gap: 0; position: static; }
.sat-hero-img { display: none; }            /* their hero has no image */
.sat-hero-text { position: static; padding: 0; color: var(--s-ink); }
.sat-hero-brand {
  font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 300; letter-spacing: .2em;
  color: var(--s-ink); margin: 0; line-height: 1.1; text-transform: uppercase;
}
.ct-hero-divider {
  width: 100%; max-width: 600px; height: 2px;
  background: var(--s-ink); margin: 2rem auto;
}
.sat-hero-feature {
  font-size: clamp(1.25rem, 4vw, 2.5rem); font-weight: 300;
  letter-spacing: .3em; color: var(--s-ink); margin: 0; text-transform: uppercase;
}
.sat-hero-text .sat-lede { color: var(--s-muted); margin: 26px auto 0; max-width: 56ch; }

/* Sister restaurants + culinary tools — their own cross-link blocks */
.ct-partner-label {
  font-size: .8rem; font-weight: 500; letter-spacing: .2em; color: var(--s-muted);
  margin: 0 0 1.5rem; text-transform: uppercase;
}
.ct-partners { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.ct-partner-link {
  background: #fff; border: 2px solid var(--s-line); border-radius: 8px;
  padding: 1rem 2rem; box-shadow: 0 2px 4px rgba(0,0,0,.05);
  font-size: 1.1rem; font-weight: 400; letter-spacing: .1em;
  color: var(--s-ink); text-decoration: none;
}
.ct-partner-link:hover { border-color: var(--s-ink); }
.ct-hero-blocks { margin-top: 3.5rem; }
.ct-hero-blocks + .ct-hero-blocks { margin-top: 2.5rem; }

.sat-grid-4, .sat-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 44px 34px; }
.sat-card { gap: 0; }
.sat-card-img { border-radius: 0; margin-bottom: 16px; }
.sat-card-title {
  font-weight: 400; font-size: 1.02rem; letter-spacing: .01em; line-height: 1.35;
}
.sat-card-meta {
  text-transform: uppercase; letter-spacing: .18em; font-size: .62rem;
  color: var(--s-muted); order: -1; margin-bottom: 8px;
}
.sat-card-desc { color: var(--s-muted); font-size: .88rem; margin-top: 8px; }
.sat-ingredients, .sat-facts { border-radius: 0; border-top: 2px solid var(--s-ink); }
.sat-footer { background: var(--s-ink); }

/* ── Mobile ──────────────────────────────────────────────────────────────
   The 3-up grid above is unconditional and this file loads AFTER
   satellite.css, so its collapse has to be restated here or a phone gets
   three columns. */
@media (max-width: 900px) {
  .sat-grid-4, .sat-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 32px 22px; }
  .sat-hero-img { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .sat-grid-4, .sat-grid-3 { grid-template-columns: 1fr; }
  .sat-hero-text { padding: 24px; }
}

/* ── Brand pages (philosophy, menu, team, events) ────────────────────────
   These are the restaurant's own pages, carried over from chefstable.sg. They
   are templates rather than database rows — see render_site_page() in
   app/routes/main.py — so their styling lives here beside the rest of the
   brand rather than in an editor. */
.ct-prose { max-width: 70ch; }
.ct-prose p { color: var(--s-ink-soft); line-height: 1.75; margin-bottom: 16px; }
.ct-block { margin-bottom: 46px; }
.ct-block h2 {
  text-transform: uppercase; letter-spacing: .18em; font-size: .82rem;
  font-weight: 500; margin-bottom: 16px; color: var(--s-ink);
}
.ct-quote {
  margin: 54px 0 0; padding: 32px 0; border-top: 1px solid var(--s-accent-2);
  border-bottom: 1px solid var(--s-accent-2);
}
.ct-quote p { font-size: 1.24rem; font-weight: 300; line-height: 1.6; color: var(--s-ink); }
.ct-quote cite { display: block; margin-top: 14px; font-style: normal; }
.ct-list { list-style: none; padding: 0; }
.ct-list li {
  padding: 10px 0 10px 20px; border-bottom: 1px solid var(--s-line-soft);
  color: var(--s-ink-soft); position: relative;
}
.ct-list li::before { content: "—"; position: absolute; left: 0; color: var(--s-accent-2); }

/* Menu: a numbered progression, hairline-separated, price right-aligned */
.ct-menu { list-style: none; padding: 0; margin: 0; counter-reset: course; }
.ct-course { padding: 26px 0; border-bottom: 1px solid var(--s-line); }
.ct-course-label {
  text-transform: uppercase; letter-spacing: .22em; font-size: .62rem;
  color: var(--s-muted); margin-bottom: 8px;
}
.ct-dish { font-size: 1.22rem; font-weight: 400; margin: 0 0 8px; letter-spacing: .01em; }
.ct-note { color: var(--s-muted); line-height: 1.7; max-width: 62ch; }
.ct-recipe-link {
  display: inline-block; margin-top: 12px; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--s-ink);
  border-bottom: 1px solid var(--s-accent-2); padding-bottom: 3px;
}
.ct-recipe-link:hover { border-bottom-color: var(--s-ink); }
.ct-price { font-weight: 500; letter-spacing: .04em; }

.ct-tiers, .ct-team-grid, .ct-events { display: grid; gap: 34px; }
.ct-tiers { grid-template-columns: repeat(3, 1fr); }
.ct-team-grid { grid-template-columns: repeat(3, 1fr); }
.ct-events { grid-template-columns: repeat(2, 1fr); gap: 44px 40px; }
.ct-tier, .ct-member, .ct-event { border-top: 2px solid var(--s-ink); padding-top: 18px; }
.ct-tier h3, .ct-member h3, .ct-event h3 {
  font-size: 1.05rem; font-weight: 400; margin: 0 0 6px;
}
.ct-lead-bio h4 {
  text-transform: uppercase; letter-spacing: .16em; font-size: .7rem;
  margin: 26px 0 10px; color: var(--s-muted);
}

@media (max-width: 900px) {
  .ct-tiers, .ct-team-grid, .ct-events { grid-template-columns: 1fr; gap: 28px; }
}