/* ============================================================
   Shift Studio — shared site styles
   Used by every page (index.html, intro/index.html, and any
   pages added later). Keep this as the single source of truth
   for fonts, colour tokens, resets and layout utilities.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* type */
  --font-head: 'Big Shoulders Display', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;

  /* core palette */
  --color-ink: oklch(15% 0.02 50);       /* primary text / dark section backgrounds */
  --color-cream: oklch(97% 0.01 75);     /* page background */
  --color-lime: oklch(91% 0.17 122);     /* accent: highlights, tags, tile 01 */
  --color-blue: oklch(75% 0.16 256);     /* accent: tile 03 / Human shift */
  --color-violet-fill: oklch(66% 0.15 295);  /* accent as a solid fill (tile 02, link hover) — needs dark/light text on top, not for small text on cream */
  --color-violet-text: oklch(54% 0.15 295);  /* same hue, darkened for legible running text (quotes, subheads) on the cream background */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
}

.head { font-family: var(--font-head); }

a { color: var(--color-ink); text-decoration: none; }
a:hover { color: var(--color-violet-fill); }

p { text-wrap: pretty; }

.btn { transition: opacity 0.15s ease; }
.btn:hover { opacity: 0.65; }
.rule-link { border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* layout utilities */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .stack-mobile { flex-direction: column !important; }
  .founders-meta { align-items: flex-start !important; text-align: left !important; margin-top: 24px; }
}