/* =====================================================================
   hub.css  -  page-local CSS for the WordJax hub at wordjax.com.

   Everything else (tokens, type, cards, buttons, links) comes from
   styles.css, the shared dark design system the two game sites use,
   copied byte for byte. The rules below are the few the game sites keep
   in their own site.css (skip link, sections, footer, legal documents),
   repeated here so the hub needs no file from either game, plus the two
   game cards. No inline style anywhere: the CSP forbids it.
   ===================================================================== */

/* skip link: visible only when it has focus, first thing in the tab order */
.skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--on);
  font-family:var(--sans); font-size:.85rem; font-weight:700;
  padding:10px 14px; border-radius:0 0 var(--r) 0; min-height:var(--tap);
  display:inline-flex; align-items:center;
}
.skip:focus { left:0; }

.mt-14 { margin-top:14px; }
.wrap { padding-top:18px; }
.tagline { margin-top:6px; }

/* sections */
.section { width:100%; margin-top:26px; }
.section > h2 {
  font-family:var(--sans); font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--edge); padding-bottom:6px; margin-bottom:10px;
}

/* the two game cards: whole card is the link, at least a tap target tall */
.games { list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.game { display:flex; flex-direction:column; gap:4px; min-height:var(--tap); padding:16px; }
.game__name {
  font-family:var(--serif); font-size:1.2rem; font-weight:700;
  letter-spacing:.06em; color:var(--ink);
}
.game__line { color:var(--ink); }
.game__go { margin-top:4px; font-weight:600; }

/* footer */
.sitefoot {
  width:100%; margin-top:30px; padding:14px 0 8px;
  border-top:1px solid var(--edge); text-align:center;
}
.sitefoot ul { list-style:none; padding:0; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.sitefoot a { min-height:var(--tap); display:inline-flex; align-items:center; }
.sitefoot .small { margin-top:8px; }

/* legal and 404 pages read as documents */
.doc { text-align:left; width:100%; }
.doc h2 { margin-top:20px; font-size:1.05rem; }
.doc p, .doc li { margin-top:8px; line-height:1.6; font-family:var(--sans); font-size:.9rem; }
.doc ul, .doc ol { padding-left:1.2rem; }
.draftflag {
  border:1px dashed var(--gold); border-radius:var(--r);
  padding:10px 12px; margin-top:10px;
  font-family:var(--sans); font-size:.8rem; color:var(--gold);
}
.btnrow--center { justify-content:center; }