/* Intro page: vakken → delen → lessen. Add a lesson as another <li class="lesson"> in index.html. */
.hero{display:flex;flex-direction:column;gap:10px;padding-top:12px}
.hero p{font-size:1.1rem;color:var(--muted);max-width:34em}
.subject{display:flex;flex-direction:column;gap:14px}
.subject>header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:3px solid var(--ink);padding-bottom:8px}
.part{display:flex;flex-direction:column;gap:10px}
.part h3{font-size:1rem;color:var(--muted);font-family:var(--f-body);font-weight:700;letter-spacing:.04em}
.lessons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lesson a{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;transition:border-color .15s,transform .15s}
.lesson a:hover{border-color:var(--accent);transform:translateY(-1px)}
.lesson .mark{width:56px;height:56px;border-radius:14px;background:var(--band);color:var(--band-ink);display:grid;place-items:center;font-family:var(--f-mono);font-size:1.3rem}
.lesson b{font-family:var(--f-display);font-size:1.25rem;font-weight:800;display:block;line-height:1.2}
.lesson .desc{font-size:.95rem;color:var(--muted);display:block;margin-top:2px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tags span{font-size:.78rem;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--muted)}
.lesson .go{font-weight:700;color:var(--accent);font-size:1.3rem}
footer{font-size:.85rem;color:var(--muted);padding-top:12px}
@media (max-width:420px){.lesson a{grid-template-columns:44px 1fr}.lesson .mark{width:44px;height:44px;font-size:1.05rem}.lesson .go{display:none}}