/* how-to-calculate-gpa: align with site fresh-sky palette (loaded after tailwind.css) */
:root { --sky:#0EA5E9; --sky-dk:#0284C7; --ink:#0F2E46; }
body { font-family:'Atkinson Hyperlegible', system-ui, sans-serif !important;
  background-color:#F4F9FE !important;
  background-image:radial-gradient(#DDEBF7 1px, transparent 1.2px);
  background-size:22px 22px; color:#3C5A72 !important; }
h1,h2,h3,h4 { font-family:'Bricolage Grotesque', system-ui, sans-serif !important;
  letter-spacing:-0.6px !important; color:var(--ink) !important; }
.bg-emerald-500 { background-color:var(--sky) !important; }
.hover\:bg-emerald-600:hover { background-color:var(--sky-dk) !important; }
.bg-emerald-50 { background-color:#E8F4FD !important; }
.text-emerald-600, .text-emerald-700 { color:var(--sky-dk) !important; }
.dark\:text-emerald-300, .dark\:text-emerald-400 { color:var(--sky) !important; }
.border-emerald-500, .border-emerald-200 { border-color:#C9E1F5 !important; }
.ring-emerald-500 { --tw-ring-color:var(--sky) !important; }
.text-zinc-900 { color:var(--ink) !important; }
.text-zinc-600, .text-zinc-500 { color:#6E93AE !important; }
.border-zinc-900\/5 { border-color:#C9E1F5 !important; }
header.sticky { background-color:rgba(255,255,255,0.92) !important; }
/* Keep the generic link color inside Tailwind's base layer so utilities
   like .text-white (in the utilities layer) still win on buttons. */
@layer base {
  a { color:var(--sky); }
  a:hover { color:var(--sky-dk); }
}

body > header.sticky { display:none !important; }
main { padding-top:8px; }