/* The "Start here" page of Learn (../brainfuck/index.html). */
main.learnhub { max-width: var(--wide); margin: 0 auto; padding: var(--s5) var(--gutter) 0; }
.learnhub > * { max-width: none; }

/* ---- 1. the row of the eight commands in the title band ---- */
.title .g { display: inline-flex; gap: .2em; margin-left: .2em; white-space: nowrap; }
.title .g i { font-style: normal; }
.g .mv { color: var(--c-gt); } .g .pl { color: var(--c-plus); } .g .mi { color: var(--c-minus); }
.g .br { color: var(--c-open); } .g .in { color: var(--c-in); } .g .ou { color: var(--c-out); }

/* ---- 2. where to begin ---- */
.begin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin: 0 0 var(--s5); }
.begin > * { margin: 0; }
.begin .btn { min-height: 3.5rem; padding: var(--s2) var(--s5); max-width: 100%; box-shadow: var(--drop); font-size: 1rem; text-align: left; }
.begin .skip-ahead { max-width: 24rem; }
.begin .note { flex: 1 0 100%; }

/* ---- 3. the two courses ---- */
.learnhub h2 { max-width: none; margin-top: var(--s6); }
.courses { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
.course { min-width: 0; padding: var(--s4) var(--s4) var(--s3); border: var(--edge) solid var(--ink); border-top: 8px solid var(--c-plus); background: var(--panel); }
.course > * { max-width: none; }
.course > .label { margin: 0; }
.course h3 { margin: var(--s1) 0 var(--s3); font-size: var(--fs-h2); line-height: 1.2; }
.course h3 a { display: inline-flex; align-items: center; min-height: var(--target); color: var(--ink); text-decoration: none; }
.course h3 a:hover { text-decoration: underline; text-decoration-thickness: var(--edge); text-underline-offset: 4px; }
.course > p { font-size: var(--fs-ui); line-height: 1.55; }
.course .start { font-weight: 600; color: var(--ink); }
.course .count { margin: var(--s4) 0 0; font: var(--ctl); }

.lessons { list-style: none; margin: var(--s2) 0 0; padding: 0; border-top: var(--edge) solid var(--ink); }
.lessons > li { margin: 0; border-bottom: 1px solid var(--line); }
.lessons a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-height: var(--target); padding: var(--s2) var(--s2); color: var(--ink); text-decoration: none; font: 500 var(--fs-ui)/1.35 var(--sans); }
.lessons a:hover { background: var(--hot); }
.lessons a:focus-visible { outline-offset: -3px; }
.lessons .n { display: grid; place-items: center; height: 2rem; border: var(--edge) solid var(--ink); font: 700 .8125rem/1 var(--mono); }
.lessons .s { color: var(--muted); font: var(--lab); letter-spacing: var(--ls-lab); text-transform: uppercase; text-align: right; }
.lessons .s:empty { display: none; }
.lessons li.done .n { background: var(--ink); color: var(--bg); }
.lessons li.next a { font-weight: 700; box-shadow: inset 5px 0 0 var(--ink); }
.lessons li.next .s { color: var(--ink); font-weight: 700; }

/* ---- 4. Reference and Play: smaller than the courses ---- */
.learnhub .dest { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s3); }
.learnhub .dest a { padding: var(--s3); }

/* ---- narrower ---- */
@media (max-width: 61.99em) {
  .courses { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 36em) {
  main.learnhub { padding-top: var(--s3); }
  main.learnhub > header.title { padding: var(--s4) var(--s4) var(--s5); }
  .begin { gap: var(--s3); }
  .begin .btn { width: 100%; box-shadow: 3px 3px 0 var(--drop-c); }
  .course { padding: var(--s3) var(--s3) var(--s2); }
  .lessons a { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--s2); }
}
@media print { .begin { display: none; } main.learnhub > header.title { background: none; border-color: var(--ink); } main.learnhub > header.title :is(h1, .lead, .kicker) { color: var(--ink); } }