:root {
  color-scheme: light dark;
  --background: #ffffff;
  --foreground: #171717;
  --muted: #6b7280;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: 'Albert Sans', Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}

.page {
  max-width: 1120px;
  min-height: 100vh;
  padding: 100px 80px 80px 160px;
}

nav { margin-bottom: 40px; font-size: 14px; }
h1 {
  margin: 0 0 32px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 42px;
  font-weight: 300;
  line-height: 1.2;
}
header p { margin: 0 0 40px; }
.course { margin-bottom: 32px; }
h2, h3 { margin: 0; font-size: 16px; font-weight: 300; }
h3 { margin-top: 2px; }
ul { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
li { padding: 2px 0; }
.grid-container { columns: 2; column-gap: 40px; max-width: 640px; }
.grid-item { break-inside: avoid; }
a { color: #2596be; text-decoration: none; }
a:hover { color: #ff6600; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
footer { margin-top: 64px; color: var(--muted); font-size: 14px; }

@media (prefers-color-scheme: dark) {
  :root { --background: #0a0a0a; --foreground: #ededed; --muted: #9ca3af; }
}

@media (max-width: 640px) {
  .page { padding: 48px 24px; }
  h1 { font-size: 36px; }
  .grid-container { columns: 1; }
}