/* Glossary (POP-114) — definition pages + hub.
   Reading layout for term pages; card grid for the hub.
   Reuses styles.css tokens + the core neobrutalist recipe. No inline CSS. */

/* ── Term page: reading column ── */
.gl-term { padding: 40px 0 88px; }
.gl-term .gl-wrap { max-width: 760px; }

.gl-breadcrumb { font-size: 13px; font-weight: 700; color: var(--g500); margin-bottom: 22px; }
.gl-breadcrumb a { color: var(--g500); text-decoration: none; }
.gl-breadcrumb a:hover { color: var(--ink); }
.gl-breadcrumb .sep { margin: 0 8px; color: var(--g400); }

.gl-term h1 {
    font-family: var(--disp);
    font-weight: 800;
    font-size: clamp(34px, 6vw, 52px);
    letter-spacing: -.03em;
    line-height: 1.05;
    margin-bottom: 20px;
}

/* Lead definition — the extractable answer. Sticker accent: lime left border. */
.gl-def {
    font-size: 21px;
    line-height: 1.55;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    border: var(--bd);
    border-left: 8px solid var(--lime);
    border-radius: 14px;
    box-shadow: var(--sh);
    padding: 20px 22px;
    margin-bottom: 36px;
}

/* Body prose */
.gl-body { font-size: 18px; line-height: 1.7; color: var(--g700); }
.gl-body h2 { font-family: var(--disp); font-size: 26px; letter-spacing: -.02em; margin: 38px 0 12px; color: var(--ink); }
.gl-body p { margin: 0 0 18px; }
.gl-body a { color: var(--coral); font-weight: 600; }
.gl-body ul { margin: 0 0 18px; padding-left: 22px; }
.gl-body li { margin-bottom: 8px; }

/* Related terms */
.gl-related { margin-top: 44px; padding-top: 28px; border-top: var(--bd); }
.gl-related .gl-related-head { display: block; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--g500); margin-bottom: 16px; }
.gl-related-list { display: flex; flex-wrap: wrap; gap: 12px; }
.gl-related-list a {
    display: inline-flex;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    text-decoration: none;
    background: #fff;
    border: var(--bd);
    border-radius: 12px;
    padding: 9px 15px;
    box-shadow: var(--sh-sm);
    transition: transform .12s, box-shadow .12s;
}
.gl-related-list a:hover { transform: translate(-2px, -2px); box-shadow: var(--sh); }

/* ── Hub: hero + term grid ── */
.gl-hero { padding: 48px 0 8px; }
.gl-hero h1 { font-family: var(--disp); font-weight: 800; font-size: clamp(34px, 6vw, 54px); letter-spacing: -.03em; margin: 18px 0 12px; }
.gl-hero .gl-intro { font-size: 18px; color: var(--g500); font-weight: 600; max-width: 640px; }

.gl-grid-sec { padding: 32px 0 80px; }
.gl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.gl-card {
    background: #fff;
    border: var(--bd);
    border-radius: 14px;
    padding: 22px;
    box-shadow: var(--sh);
    transition: transform .12s, box-shadow .12s;
}
.gl-card:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-lg); }
.gl-card h2 { font-family: var(--disp); font-weight: 800; font-size: 20px; letter-spacing: -.02em; margin-bottom: 8px; }
.gl-card h2 a { color: var(--ink); text-decoration: none; }
.gl-card p { color: var(--g500); font-size: 15px; font-weight: 500; line-height: 1.5; margin: 0; }

@media (max-width: 760px) {
    .gl-grid { grid-template-columns: 1fr; }
    .gl-def { font-size: 19px; }
}