/* Recipes Network — utilitarian and dense.
   A reference site, not a magazine: tighter grid, squarer corners, high
   contrast, no decorative flourish. The visual opposite of The Messy Baker
   on purpose. */
:root {
  --s-paper:     #ffffff;
  --s-surface:   #ffffff;
  --s-surface-2: #eef1f4;
  --s-ink:       #12171c;
  --s-ink-soft:  #3a444e;
  --s-muted:     #667381;
  --s-line:      #d9dfe5;
  --s-line-soft: #eaeef2;
  --s-accent:    #16456b;
  --s-accent-ink:#ffffff;
  --s-accent-2:  #c2451f;
  --s-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --s-body: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --s-radius: 2px;
  --s-card-ratio: 16 / 10;
  --s-wrap: 1240px;
}
h1, h2, h3 { letter-spacing: -.02em; }
.sat-logo em { font-style: normal; font-weight: 500; opacity: .75; }
.sat-section { padding: 42px 0; }
.sat-grid { gap: 26px 22px; }
.sat-hero-grid { gap: 40px; }

/* ── Layout identity: no hero image, index-style rows ─────────────────────
   A reference site. The homepage leads with text and a dense 4-up grid; card
   images are small and secondary because people arrive knowing what they want. */
.sat-hero { padding: 34px 0 6px; border-bottom: 3px solid var(--s-ink); margin-bottom: 8px; }
.sat-hero-grid { grid-template-columns: 1fr; gap: 14px; }
.sat-hero-img { display: none; }               /* text-first landing */
.sat-hero-text h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.sat-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sat-card { gap: 8px; }
.sat-card-img { aspect-ratio: 16 / 10; border-radius: 2px; }
.sat-card-title { font-size: 1rem; font-weight: 600; }
.sat-card-desc { display: none; }              /* keep rows tight */
.sat-section-head {
  border-bottom: 2px solid var(--s-ink); padding-bottom: 8px; margin-bottom: 22px;
}
.sat-section-head h2 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; }
.sat-facts { border-radius: 2px; }
.sat-cols { grid-template-columns: 300px 1fr; gap: 44px; }