/* ============================================================
   fantasy.saarthm.com hub - the rules that belong to this one page

   The hub is two big square cards and a short hero, so it runs tighter than
   the homepage: a compact hero, bigger card type, thicker borders, less air.
   Everything else (topbar, nav, monogram, theme toggle, footer, the theme
   behaviour) comes from sitekit, built into assets/sitekit/ and never
   restated here. Loaded after sitekit.css, so a rule here wins any tie.

   Before sitekit this page carried its own copy of the design system, and
   that copy had drifted: secondary text failed WCAG AA in dark mode, light
   mode flashed green on load, and scrollbars stayed light in the dark theme.
   Taking the kit closed all of those in one change; see
   docs/drift-report.md.
   ============================================================ */

/* The brand reads "fantasy saarthm com" on one line; never let it wrap. */
.brand span { white-space: nowrap; }

/* compact hero, bigger type, thicker borders, less air */
.hero { text-align: center; padding: clamp(44px, 7vw, 64px) 0 26px; }
.hero h1 { max-width: 24ch; margin-left: auto; margin-right: auto; }
.hero-sub { max-width: 52ch; margin: 14px auto 0; font-size: 14.5px; line-height: 1.6; color: var(--tag); }
.hero-sub b { color: var(--ink); font-weight: 600; }
section { padding-top: 26px; }
/* min(320px, 100%): at 320px wide the wrap leaves 276px, and a 320px minimum
   pushed two cards past the edge. */
.grid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.card {
  aspect-ratio: 1 / 1;
  text-align: center; align-items: center; justify-content: center;
  gap: 8px; padding: 18px 16px; border-radius: 14px;
  border: 1px solid var(--card-edge);
  border-top: 3px solid var(--card-top);
}
.card h2 { font-size: 26px; }
.card .tag { font-size: 11.5px; }
.card .desc { font-size: 13.5px; max-width: 30ch; margin: 0 auto; }
.card .go { font-size: 12.5px; }

/* The footer sits closer and pads more than the homepage's; the copper rule
   above it comes from the kit. */
footer { margin-top: 36px; padding: 22px 0 36px; }

@media (max-width: 560px) {
  .card { aspect-ratio: auto; }
  .card h2 { font-size: 24px; }
}