/* ============================================================
   MAGIC INSTITUTE — Brand foundation
   Warm & human · forest green · student-centered
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* — Forest greens — */
  --forest-900: oklch(0.27 0.045 158);   /* deepest ink-green */
  --forest-800: oklch(0.33 0.055 158);
  --forest-700: oklch(0.40 0.065 159);   /* primary brand */
  --forest-600: oklch(0.48 0.085 160);
  --emerald-500: oklch(0.60 0.115 162);  /* interactive / bright */
  --emerald-400: oklch(0.70 0.105 164);

  /* — Warm neutrals — */
  --cream: oklch(0.985 0.008 92);         /* page bg, warm white */
  --cream-2: oklch(0.965 0.012 92);       /* alt section bg */
  --sand: oklch(0.93 0.018 88);           /* cards / borders-light */
  --ink: oklch(0.24 0.012 155);           /* body text */
  --ink-soft: oklch(0.42 0.012 155);      /* secondary text */
  --line: oklch(0.88 0.015 120);          /* hairlines */

  /* — Human warm accent (ochre) — */
  --ochre: oklch(0.76 0.105 70);
  --ochre-soft: oklch(0.88 0.055 78);
  --clay: oklch(0.66 0.10 48);

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --maxw: 1200px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px oklch(0.27 0.045 158 / 0.06), 0 2px 8px oklch(0.27 0.045 158 / 0.05);
  --shadow-md: 0 4px 14px oklch(0.27 0.045 158 / 0.09), 0 12px 34px oklch(0.27 0.045 158 / 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--forest-900);
}

p { line-height: 1.6; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest-600);
}

/* — Buttons — */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.98rem;
  padding: 0.85em 1.5em; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--forest-700); color: var(--cream); }
.btn-primary:hover { background: var(--forest-800); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--forest-800); border-color: var(--forest-700); }
.btn-ghost:hover { background: var(--forest-700); color: var(--cream); }
.btn-on-dark { background: var(--cream); color: var(--forest-900); }
.btn-on-dark:hover { background: var(--ochre-soft); transform: translateY(-1px); }
.btn-on-dark-ghost { background: transparent; color: var(--cream); border-color: oklch(1 0 0 / 0.5); }
.btn-on-dark-ghost:hover { border-color: var(--cream); background: oklch(1 0 0 / 0.08); }

/* — Image placeholder — */
.ph {
  position: relative; overflow: hidden;
  background-color: var(--forest-700);
  background-image: repeating-linear-gradient(
    -45deg,
    oklch(1 0 0 / 0.06) 0 2px,
    transparent 2px 11px
  );
  display: flex; align-items: flex-end;
}
.ph::after {
  content: attr(data-label);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.72rem; letter-spacing: 0.04em;
  color: oklch(1 0 0 / 0.82);
  background: oklch(0.27 0.045 158 / 0.55);
  padding: 0.35em 0.7em; margin: 0.7em;
  border-radius: 6px;
  border: 1px solid oklch(1 0 0 / 0.18);
}
.ph.ph-sand { background-color: var(--forest-600); }
.ph.ph-ochre { background-color: var(--clay); }