/* ============================================================
   Learning, layered on the live stylesheet chain.
   Uses the site's own tokens (--ink, --on-ink, --ln-d, --blue-d,
   --serif, --sans, --mono), so it matches every other page. The
   only colour that is page-specific is the route accent, which is
   what the routes are for.
   ============================================================ */

.lrn-views{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--ln-d);
  border-radius:99px;background:var(--ink-2);flex-wrap:wrap}
.lrn-views button{font-family:var(--sans);font-size:var(--f13);font-weight:600;
  color:var(--on-ink-2);background:none;border:0;border-radius:99px;padding:10px 18px;
  cursor:pointer;min-height:38px}
.lrn-views button:hover{color:var(--on-ink)}
.lrn-views button[aria-pressed="true"]{color:var(--ink);background:var(--on-ink)}
.lrn-tools{font-family:var(--sans);font-size:var(--f13);font-weight:600;color:var(--on-ink);
  background:none;border:1px solid var(--ln-d);border-radius:99px;padding:10px 16px;
  cursor:pointer;min-height:38px}
.lrn-tools:hover{border-color:rgba(239,237,230,.3)}
.lrn-tools[aria-pressed="true"]{color:var(--ink);background:var(--on-ink);border-color:var(--on-ink)}

.lrn-rail{position:sticky;top:0;z-index:60;background:rgba(21,22,26,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--ln-d)}
.lrn-rail-in{display:flex;gap:2px;overflow-x:auto;padding:9px 0;scrollbar-width:none;
  max-width:var(--w);margin:0 auto;padding-left:28px;padding-right:28px}
.lrn-rail-in::-webkit-scrollbar{display:none}
.lrn-rail a{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);
  font-size:var(--f13);font-weight:600;color:var(--on-ink-2);padding:9px 12px;
  border-radius:99px;white-space:nowrap}
.lrn-rail a:hover{color:var(--on-ink);background:rgba(239,237,230,.06)}
.lrn-rail a.on{color:var(--ink);background:var(--on-ink)}
.lrn-rail a i{font-style:normal;width:6px;height:6px;border-radius:50%;
  background:var(--rc,var(--ln-d));flex:none}
.lrn-rail a.on i{background:var(--ink)}

/* route cards */
.lrn-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;margin-top:var(--s5)}
.lrn-route{display:flex;flex-direction:column;gap:9px;padding:20px;background:var(--ink-2);
  border:1px solid var(--ln-d);border-left:3px solid var(--rc,var(--ln-d));border-radius:var(--r2)}
.lrn-route:hover{background:var(--ink-3)}
.lrn-route .rn{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-3)}
.lrn-route .rn i{font-style:normal;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:var(--rc,var(--ln-d));
  color:var(--ink);font-family:var(--mono);font-size:11px;font-weight:600}
.lrn-route h3{font-family:var(--serif);font-weight:300;font-size:1.42rem;line-height:1.18;
  letter-spacing:-.012em;color:var(--on-ink)}
.lrn-route .tg{font-family:var(--sans);font-size:var(--f14);color:var(--on-ink-2)}
.lrn-route .tm{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--on-ink-3)}
.lrn-route .lrn-ft{margin-top:auto;padding-top:11px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;border-top:1px solid var(--ln-d)}
.lrn-route .lrn-ft span:first-child{font-family:var(--mono);font-size:11.5px;color:var(--on-ink-3)}
.lrn-route .lrn-ft .go{font-family:var(--sans);font-size:var(--f13);font-weight:600;color:var(--blue-d)}

/* sequence */
.lrn-seq{list-style:none;counter-reset:s;border-top:1px solid var(--ln-d);margin-top:var(--s5)}
.lrn-seq>li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);
  gap:16px;padding:18px 0;border-bottom:1px solid var(--ln-d);align-items:baseline}
.lrn-seq>li::before{content:counter(s);width:26px;height:26px;border-radius:50%;
  background:var(--ink-3);border:1px solid var(--ln-d);color:var(--on-ink-2);
  font-family:var(--mono);font-size:12px;display:flex;align-items:center;justify-content:center}
.lrn-seq h4{font-family:var(--serif);font-weight:300;font-size:1.25rem;line-height:1.3;
  color:var(--on-ink);margin-bottom:9px}
.lrn-ls{display:flex;flex-wrap:wrap;gap:8px 10px}
.lrn-ls a{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--sans);
  font-size:15px;font-weight:600;color:var(--on-ink);border:1px solid var(--ln-d);
  border-radius:99px;padding:8px 14px;background:var(--ink-2)}
.lrn-ls a:hover{border-color:rgba(239,237,230,.3);background:var(--ink-3)}
.lrn-ls a i{font-family:var(--mono);font-size:9.5px;font-style:normal;letter-spacing:.05em;
  text-transform:uppercase;color:var(--on-ink-3)}

/* shelf */
.lrn-sec{padding:var(--s5) 0;border-top:1px solid var(--ln-d)}
.lrn-sec>h3{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:300;
  font-size:1.42rem;line-height:1.2;letter-spacing:-.012em;color:var(--on-ink)}
.lrn-sec>h3 i{font-style:normal;width:22px;height:22px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--rc,var(--ln-d));color:var(--ink);
  font-family:var(--mono);font-size:11px;font-weight:600;flex:none}
.lrn-sec .sub{margin-top:5px;font-family:var(--sans);font-size:var(--f14);color:var(--on-ink-3)}
.lrn-grp{margin-top:18px}
.lrn-grp>h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-ink-3);margin-bottom:9px}

/* the item grid. auto-fill with a hard cap and a filler cell means a short
   group never leaves a pale hole at the end of a row. */
.lrn-items{display:flex;flex-wrap:wrap;gap:1px;background:var(--ln-d);
  border:1px solid var(--ln-d);border-radius:var(--r2);overflow:hidden}
.lrn-item{flex:1 1 258px;min-width:min(258px,100%);display:flex;align-items:baseline;
  justify-content:space-between;gap:12px;background:var(--ink-2);padding:15px 17px}
.lrn-item:hover{background:var(--ink-3)}
.lrn-item b{font-family:var(--sans);font-size:15.5px;font-weight:600;line-height:1.4;color:var(--on-ink)}
.lrn-item:hover b{text-decoration:underline;text-underline-offset:3px}
.lrn-item .tag{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--on-ink-3);border:1px solid var(--ln-d);border-radius:3px;padding:4px 7px;
  flex:none;white-space:nowrap}

/* map: collapsible */
.lrn-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;
  margin-top:var(--s5);align-items:start}
.lrn-col{background:var(--ink-2);border:1px solid var(--ln-d);
  border-left:3px solid var(--rc,var(--ln-d));border-radius:var(--r2);overflow:hidden}
.lrn-col>summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;gap:10px}
.lrn-col>summary::-webkit-details-marker{display:none}
.lrn-col>summary i{font-style:normal;width:20px;height:20px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--rc,var(--ln-d));color:var(--ink);
  font-family:var(--mono);font-size:11px;font-weight:600;flex:none}
.lrn-col>summary b{font-family:var(--serif);font-weight:300;font-size:1.2rem;color:var(--on-ink)}
.lrn-col>summary em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--on-ink-3)}
.lrn-col>summary:hover{background:var(--ink-3)}
.lrn-col ul{list-style:none;border-top:1px solid var(--ln-d)}
.lrn-col li+li{border-top:1px solid var(--ln-d)}
.lrn-col li a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px 18px;font-family:var(--sans);font-size:14.5px;color:var(--on-ink-2)}
.lrn-col li a:hover{color:var(--on-ink);background:var(--ink-3)}
.lrn-col li a span{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-ink-3);flex:none}

/* tools + repos */
.lrn-tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--ln-d);border:1px solid var(--ln-d);border-radius:var(--r2);overflow:hidden;margin-top:var(--s4)}
.lrn-tool{display:block;background:var(--ink-2);padding:16px 18px}
.lrn-tool:hover{background:var(--ink-3)}
.lrn-tool b{display:block;font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--on-ink)}
.lrn-tool:hover b{text-decoration:underline;text-underline-offset:3px}
.lrn-tool span{display:block;margin-top:4px;font-family:var(--sans);font-size:13px;color:var(--on-ink-3)}

.lrn-repos{display:flex;flex-wrap:wrap;gap:1px;background:var(--ln-d);
  border:1px solid var(--ln-d);border-radius:var(--r2);overflow:hidden}
.lrn-repo{flex:1 1 280px;min-width:min(280px,100%);display:block;background:var(--ink-2);padding:14px 16px}
.lrn-repo:hover{background:var(--ink-3)}
.lrn-repo b{font-family:var(--mono);font-size:13.5px;font-weight:500;color:var(--on-ink)}
.lrn-repo:hover b{text-decoration:underline;text-underline-offset:3px}
.lrn-repo p{margin-top:5px;font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--on-ink-3)}
.lrn-cat{margin-top:var(--s5)}
.lrn-cat>h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-ink-3);margin-bottom:9px}

/* exactly four instruments: lay out four, so no filler cell is ever needed */
.lrn-tools-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.lrn-tgroup{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-ink-3);margin:18px 0 9px}
@media (max-width:1000px){.lrn-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.lrn-tools-grid{grid-template-columns:1fr}}

/* ============================================================
   Upscale pass. The numbered colour discs read as a game board;
   the route colour is enough on its own. Number becomes a quiet
   numeral, the name carries the weight in Newsreader, and the
   colour survives only as the left rule and a hairline.
   ============================================================ */
.lrn-route .rn i,
.lrn-sec > h3 i,
.lrn-col > summary i{
  background:none;color:var(--on-ink-3);width:auto;height:auto;
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.08em}
.lrn-route .rn{gap:12px;letter-spacing:.16em}
.lrn-route h3{font-size:1.75rem;line-height:1.12;letter-spacing:-.018em;margin-top:2px}
.lrn-route{padding:24px 24px 20px;gap:7px}
.lrn-route .tm{margin-top:4px}
.lrn-sec > h3{font-size:1.75rem;letter-spacing:-.018em;gap:13px}
.lrn-sec > h3 i{align-self:center}
.lrn-col > summary b{font-size:1.3rem;letter-spacing:-.014em}
.lrn-col > summary{gap:12px;padding:17px 20px}

/* the rail dot is the only place the colour needs to be solid */
.lrn-rail a i{width:5px;height:5px}

/* headings on this page match the rest of the site */
#learn h2{font-family:var(--serif);font-weight:300;letter-spacing:-.018em;
  font-size:clamp(1.6rem,2.8vw,2.1rem);line-height:1.16}
.lrn-seq h4{font-size:1.32rem;letter-spacing:-.012em}