/* ---------- the shared big-number block ---------- */
.bignum{flex:0 0 auto;min-width:230px}
.bnrow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bnrow b{font-size:40px;font-weight:600;line-height:1;color:var(--green);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.bnof{font-size:26px;font-weight:400;color:var(--ink-3);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.bnchip{font-size:12.5px;font-weight:500;color:var(--ink-2);background:var(--line-2);
  border-radius:99px;padding:5px 12px;white-space:nowrap}
.bnbar{height:6px;background:var(--line-2);border-radius:99px;overflow:hidden;margin-top:14px}
.bnbar span{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .4s ease}
.bnunit{font-size:13px;color:var(--ink-3);margin:10px 0 0;max-width:52ch;line-height:1.5}

/* ---------- the Dojo header ---------- */
.dojohead{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap}
.dhleft{flex:1;min-width:240px}

/* ---------- the wall of classrooms ---------- */
.classrooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.classroom{display:flex;flex-direction:column;text-align:left;padding:0;font:inherit;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.classroom:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(17,27,22,.06),0 18px 36px -20px rgba(17,27,22,.35)}
.classroom.soon{cursor:default}
.classroom.soon:hover{transform:none;box-shadow:var(--shadow)}

/* the mat the belt is lying on */
.croom-art{aspect-ratio:16/9;width:100%;position:relative;overflow:hidden;
  background:radial-gradient(115% 95% at 28% 8%,var(--g) 0%,rgba(0,0,0,0) 62%),
             linear-gradient(165deg,#13241C 0%,#0A140F 100%)}
.croom-art svg{position:absolute;inset:0;width:100%;height:100%;display:block}

.croom-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.croom-eyebrow{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.ebar{width:16px;height:6px;border-radius:99px;flex:0 0 16px;box-shadow:inset 0 0 0 1px rgba(17,27,22,.22)}
.croom-title{font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin-top:5px}
.croom-line{font-size:13px;color:var(--ink-2);line-height:1.5;margin:7px 0 0;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.croom-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:12.5px;color:var(--ink-3);margin-top:16px;font-variant-numeric:tabular-nums}
.croom-bar{height:4px;background:var(--line-2);border-radius:99px;overflow:hidden;margin-top:8px}

/* 6 Nov 2026: no eyebrow labels; a topic line under the title instead */
.croom-topic{margin:2px 0 0;font-size:13px;font-weight:500;color:var(--gold)}
.croom-bar span{background:linear-gradient(90deg,#B98431,#D4A85A)}
.classroom:disabled{cursor:default}
.lesson{width:100%;background:none;border:0;border-bottom:1px solid var(--line-2);font:inherit;color:inherit;text-align:left}
.lesson .lnum{flex:0 0 22px;font-size:13px;color:var(--ink-3);text-align:right}
.lesson .ltext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lesson .ltitle{font-weight:500}
.lesson .ldesc{font-size:13px;color:var(--ink-3)}
.lesson.soon{cursor:default;opacity:.62}
.lesson.soon:hover{background:none}
.lesson.soon .play{background:transparent;box-shadow:0 0 0 1px var(--line) inset}
.lesson:focus-visible{outline:2px solid #B98431;outline-offset:2px}