/* learn.peterkaminski.ai — additions on top of house.css */

/* hero: the level staircase */
.stairs text { font-family: var(--mono); }

/* the four ways */
.ways-grid { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 720px) { .ways-grid { grid-template-columns: repeat(4, 1fr); } }
.way { background: var(--paper-2); border: 1px solid var(--rule); border-top: 4px solid var(--accent); border-radius: 6px; padding: 18px 18px 20px; }
.way h3 { margin: 0 0 .35em; font-size: 1.15rem; }
.way p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.way.free { border-top-color: var(--ok); }

/* level jump list */
.levels-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.levels-nav a { display: inline-block; font: 500 14px/1 var(--mono); text-decoration: none; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); }
.levels-nav a:hover { border-color: var(--accent); }

/* catalog rows are links */
.module h3 a { text-decoration: none; }
.module h3 a:hover { text-decoration: underline; }
.level { scroll-margin-top: 16px; }

/* module page */
.module-head { padding-top: 48px; padding-bottom: 40px; }
.module-head .num { font: 600 15px/1 var(--mono); color: var(--glow); margin: 0 0 14px; }
.module-head .num a { color: inherit; text-decoration: none; }
.module-head .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.film .badge.ok { color: #8fe0b4; } .film .badge.warn { color: #f2c27a; } .film .badge.dim { color: #b7c9d1; } .film .badge.acc { color: #ffb59a; }
.take { display: grid; gap: 16px; margin: 8px 0 0; }
@media (min-width: 720px) { .take { grid-template-columns: 1fr 1fr; } }
.take .way .btn { margin-top: 16px; font-size: 14px; padding: 11px 16px; }
.take .way ul { margin: 10px 0 0; padding-left: 1.1em; font-size: .95rem; }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; font: 500 14px/1.4 var(--mono); }
.pager a { text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* House bar: the same four sites, in the same order, on every house site.
 * Each site's own nav sits below it and lists only that site's pages. */
.housebar { background: #0d1622; color: #b7c9d1; font: 500 13px/1 "IBM Plex Mono", ui-monospace, monospace; }
.housebar ul { display: flex; gap: 2px 22px; margin: 0 auto; max-width: 72rem; padding: 0 16px; list-style: none; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 720px) { .housebar ul { padding: 0 32px; } }
.housebar a { display: block; padding: 10px 0 8px; color: #b7c9d1; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.housebar a:hover { color: #fff; }
.housebar a[aria-current="true"] { color: #fff; border-bottom-color: #c2512f; }
@media (max-width: 419px) { .housebar { font-size: 12px; } .housebar ul { gap: 2px 14px; } }