/* ============================================================================
 * TOFU Deck Library — hub landing page. Tokens come from shared/css/tokens.css.
 * Typography follows the deck rules: Inter only, 800 display / 600-700 labels.
 * ============================================================================ */
* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; color: var(--white); font-family: var(--font); font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* brand hero background (desktop/mobile variants) + dark overlay for readability */
.backdrop { position: fixed; inset: 0; z-index: -1; background: url('/shared/img/hero-bg.webp') center / cover no-repeat var(--ink); }
.backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,14,17,.72), rgba(20,23,27,.88) 55%, rgba(20,23,27,.97)); }
@media (max-width: 700px) { .backdrop { background-image: url('/shared/img/hero-bg-mobile.webp'); } }

.hub-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px clamp(20px, 5vw, 64px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 15px var(--font); letter-spacing: .04em; }
.brand img { width: 36px; height: 36px; border-radius: 8px; }
.site-link { font: 600 11px var(--font); letter-spacing: .1em; padding: 10px 14px; border: 1px solid rgba(243,245,248,.25); border-radius: 11px; transition: .2s ease; }
.site-link:hover { border-color: var(--mint); color: var(--mint); }

.hub { width: min(1120px, 100% - clamp(40px, 10vw, 128px)); margin: 0 auto; flex: 1; }

.hub-hero { padding: clamp(40px, 9vh, 96px) 0 clamp(28px, 5vh, 48px); }
.eyebrow { margin: 0 0 20px; font: 600 12px var(--font); letter-spacing: .2em; color: var(--mint); }
.hub-hero h1 { margin: 0; font: 800 clamp(44px, 7vw, 96px)/1.02 var(--font); letter-spacing: -.03em; text-transform: uppercase; }
.hub-sub { max-width: 560px; margin: 24px 0 0; color: rgba(243,245,248,.66); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; }

.hub-filters { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 8px 0 26px; border-bottom: 1px solid rgba(243,245,248,.14); }
.filter-group { display: flex; gap: 8px; }
.chip { padding: 9px 15px; border: 1px solid rgba(243,245,248,.22); border-radius: 999px; background: rgba(20,23,27,.4); cursor: pointer; font: 600 11px var(--font); letter-spacing: .08em; transition: .2s ease; }
.chip:hover { border-color: rgba(20,241,149,.6); }
.chip.active { background: var(--mint); border-color: var(--mint); color: var(--ink); }

.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; padding: 30px 0 40px; }
.deck-card { display: flex; flex-direction: column; border: 1px solid rgba(243,245,248,.14); border-radius: 18px; overflow: hidden; background: rgba(29,33,37,.78); backdrop-filter: blur(10px); transition: .25s ease; }
.deck-card:hover { transform: translateY(-5px); border-color: rgba(20,241,149,.65); box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(20,241,149,.25); }
.card-cover { height: 210px; display: grid; place-items: center; background: radial-gradient(circle at 50% 120%, rgba(20,241,149,.22), transparent 60%), linear-gradient(180deg, #171b20, #101317); border-bottom: 1px solid rgba(243,245,248,.1); }
.card-cover img { height: 175px; width: auto; filter: drop-shadow(0 18px 40px rgba(20,241,149,.2)); transition: .25s ease; }
.deck-card:hover .card-cover img { transform: translateY(-4px) scale(1.03); }
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1; }
.card-meta { display: flex; justify-content: space-between; align-items: center; }
.card-tag { padding: 6px 10px; border-radius: 7px; background: rgba(20,241,149,.14); color: var(--mint); font: 700 10px var(--font); letter-spacing: .12em; }
.card-date { color: var(--grey); font: 600 11px var(--font); letter-spacing: .08em; }
.card-body h2 { margin: 2px 0 0; font: 700 21px/1.25 var(--font); letter-spacing: -.01em; }
.card-body p { margin: 0; color: rgba(243,245,248,.6); font-size: 13.5px; line-height: 1.5; }
.card-open { margin-top: auto; padding-top: 10px; color: var(--mint); font: 700 11px var(--font); letter-spacing: .1em; }

.empty-note { padding: 10px 0 40px; color: var(--grey); font-size: 14px; }

.hub-footer { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; padding: 22px clamp(20px, 5vw, 64px); border-top: 1px solid rgba(243,245,248,.12); color: rgba(243,245,248,.5); font: 600 10px var(--font); letter-spacing: .1em; }
.footer-links { display: flex; gap: 18px; }
.footer-links a:hover { color: var(--mint); }

@media (max-width: 640px) {
  .hub-hero { padding-top: 28px; }
  .hub-sub { max-width: 100%; }
  .deck-grid { grid-template-columns: 1fr; }
  .card-cover { height: 180px; }
  .card-cover img { height: 150px; }
}