/* The page around the lesson, the brand bar and the 404 page. Served as is; the lesson's own styles are built by Vite from src/.
   The brand bar has the look of the bar on grunertlabs.ca: the same colors, font and sizes. */
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans/instrument-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans/instrument-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --hero-ground: #0B1519; --hero-rule: #22343A; --hero-text-strong: #EEF2F0; --hero-text: #C9D4D0;
  --f-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pad: clamp(20px, 5vw, 80px);
}
* { box-sizing: border-box; }
body { margin: 0; background: #faf9f6; color: #1c1c1a; font-family: var(--f-sans); }

.bar { background: var(--hero-ground); border-bottom: 1px solid var(--hero-rule); }
.bar :focus-visible { outline: 2px solid var(--hero-text-strong); outline-offset: 3px; }
.bar-in { display: flex; flex-wrap: wrap; align-items: center; min-height: 64px; padding: 0 var(--pad); }
.wordmark { font: 500 14px/22px var(--f-sans); color: var(--hero-text-strong); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.nav-list { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: 24px; font: 400 14px/22px var(--f-sans); }
.nav-list a { color: var(--hero-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.nav-list a:hover { color: var(--hero-text-strong); }
.nav-list a[aria-current="page"] { color: var(--hero-text-strong); text-decoration: underline 1px; text-underline-offset: 6px; }
.bar nav { margin-left: auto; }
@media (max-width: 599.98px) { .bar-in { min-height: 56px; } .nav-list { gap: 16px; } }

.page { max-width: 1560px; margin: 0 auto; padding: 28px var(--pad) 48px; }
/* The lesson switcher: one tab for each lesson, the same place on each lesson page. */
.lessons ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lessons a, .lessons .soon { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid #c9c8c2; border-radius: 8px; font-size: 14px; text-decoration: none; color: #1c1c1a; }
.lessons a > span, .lessons .soon > span { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #6b6b66; }
.lessons a[aria-current="page"] { border-color: #1c1c1a; background: #1c1c1a; color: #fff; }
.lessons a[aria-current="page"] > span { color: #c9c8c2; }
.lessons .soon { border-style: dashed; color: #6b6b66; }
.page h1 { margin: 0 0 6px; font-size: 26px; font-weight: 500; }
.page .lede { margin: 0 0 24px; max-width: 62ch; font-size: 16px; line-height: 1.5; color: #45453f; }
.page a { color: inherit; }
.page a:focus-visible { outline: 2px solid #1c1c1a; outline-offset: 2px; }
noscript p { max-width: 62ch; font-size: 16px; line-height: 1.5; }