/* =====================================================================
   The field guide index. Cards and reading paths; no rail, no dial.
   ===================================================================== */

.hubGrid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:14px; margin-bottom:34px;
}
.hubGrid > *{min-width:0}

.hubCard{
  position:relative; display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--glass);
  padding:20px 22px 18px; overflow:hidden;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.hubCard::before{
  content:''; position:absolute; inset:0 auto 0 0; width:2px;
  background:linear-gradient(180deg, var(--b), transparent);
  opacity:0; transition:opacity .2s var(--ease);
}
.hubCard:hover{
  border-color:rgba(94,236,208,.5); background:rgba(46,208,192,.07); transform:translateY(-2px);
}
.hubCard:hover::before{opacity:1}
.hubCard:focus-visible{outline:2px solid var(--b); outline-offset:3px}

.hubNum{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--muted2);
  display:block; margin-bottom:9px;
}
.hubCard h2{
  font-size:20px; margin:0 0 3px; letter-spacing:-.01em; line-height:1.2;
}
.hubSub{
  margin:0 0 12px; font-size:12.5px; color:var(--b); font-family:var(--mono);
}
.hubBody{margin:0 0 14px; font-size:13px; line-height:1.6; color:var(--muted)}

.hubLab{
  display:flex; align-items:baseline; gap:8px; margin:0 0 12px;
  font-size:12px; color:var(--muted2); line-height:1.45;
}
.hubLab span{
  flex:0 0 auto; font-family:var(--mono); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#04131a; background:var(--b);
  border-radius:999px; padding:2px 7px;
}

.hubTags{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:5px}
.hubTags li{
  font-family:var(--mono); font-size:9.5px; color:var(--muted2);
  border:1px solid var(--line); border-radius:999px; padding:2px 8px;
}

/* ---------- reading paths ---------- */
.pathWrap{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px; margin-bottom:26px;
}
.pathWrap > *{min-width:0}

.path{
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(3,7,12,.55); padding:16px 18px;
}
.pathTitle{
  margin:0 0 5px; font-family:var(--mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--b);
}
.pathNote{margin:0 0 11px; font-size:11.5px; line-height:1.5; color:var(--muted2)}

.pathList{list-style:none; margin:0; padding:0; counter-reset:p; font-size:12.5px}
.pathList li{
  counter-increment:p; position:relative; padding:6px 0 6px 22px;
  border-bottom:1px solid rgba(255,255,255,.05); color:var(--muted2); line-height:1.5;
}
.pathList li:last-child{border-bottom:0}
.pathList li::before{
  content:counter(p); position:absolute; left:0; top:7px;
  font-family:var(--mono); font-size:9.5px; color:var(--muted2);
}
.pathList a{color:var(--text); text-decoration:none; border-bottom:1px solid rgba(94,236,208,.35)}
.pathList a:hover{color:var(--b)}