/* glossary-v4.css — the page layer for /glossary, /glossary/category/<slug> and
   /glossary/<term>, on the v4 page kit (docs/v4/SITE-MIGRATION.md section 4b).

   These three templates carried ~380 lines of inline `style.` each, written to
   drag a Foundation hero, a grey band and a client-side card grid back towards
   the kit. The markup is kit markup now (.v4-wrap, .v4-section, .v4-card,
   .v4-head, .v4-display), so this sheet only has to place the few things the
   glossary owns: the term index, the category chips, the term's reading column
   and the one picture under a term that names a DesignerBox job.

   RAW <link>, so its ?v= token is mandatory: app.js serves everything under
   app/public immutable for a year, and an unversioned raw asset pins the old
   bytes in a returning visitor's browser with no revalidation. Bump the token
   to this file's git last-change date on every edit.

   Scoped to body.glossary-page throughout. White page, hairline #E6E4E1,
   radii 24/20/16, headings 40/28/20/16 at 600, nothing moves on hover. */

/* Section rhythm: 80px between blocks at 1440, 56px on a phone, the same as the
   homepage. .v4-section pads BOTH sides, so the token is half the gap. */
body.glossary-page { --v4-section-y: 40px; --v4-section-y-sm: 28px; }
body.glossary-page main { background: #FFFFFF; }
/* app-critical.css carries a legacy `#hero { padding-top: 160px }` for the old
   Foundation hero. These pages keep the id (the skip link points at it) but not
   the reserve: the kit starts the first block 48px under the header bar. */
body.glossary-page main#hero { padding-top: 0; }

/* ---- The hero: one column, centred, its first block 48px under the bar. --- */
body.glossary-page .gl-hero { padding-top: 48px; }
body.glossary-page .gl-hero .v4-head { margin-inline: auto; text-align: center; }
body.glossary-page .gl-hero .v4-cta-row { justify-content: center; }
/* The lead is narrower than its head, so it needs its own auto margin or the
   centred text sits off the page's centre line. Scoped to .v4-head, which only
   the centred hero uses: a term page's lead is left in its reading column. */
body.glossary-page .gl-hero .v4-head .v4-lead { margin-inline: auto; }

/* ---- Category chips: a wrapping row of hairline pills at radius 10. ------- */
body.glossary-page .gl-cats {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0; padding: 0; list-style: none;
}
body.glossary-page .gl-cats a {
    display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
    border: 1px solid #E6E4E1; border-radius: 10px; background: #FFFFFF;
    color: #3D3D3C; font-size: 13px; font-weight: 500; line-height: 1;
    text-decoration: none;
}
body.glossary-page .gl-cats a:hover { background: #F6F5F4; color: #121212; }
body.glossary-page .gl-cats a.is-active { background: #121212; border-color: #121212; color: #FFFFFF; }

/* ---- The term index: a column list, hairline-separated, in three columns at
   desktop. A grid of identical cards reads as a wall at 2,000 entries. ------ */
body.glossary-page .gl-index { margin: 0; padding: 0; list-style: none; columns: 3; column-gap: 32px; }
body.glossary-page .gl-index li { break-inside: avoid; margin: 0; }
body.glossary-page .gl-index a {
    display: block; padding: 10px 0; border-bottom: 1px solid #F1EFEC;
    color: #3D3D3C; font-size: 15px; line-height: 1.5; text-decoration: none;
}
body.glossary-page .gl-index a:hover { color: #121212; text-decoration: underline; text-underline-offset: 3px; }
body.glossary-page .gl-count { margin: 0 0 24px; color: #6F6D6A; font-size: 14px; }

/* ---- A term page: title and text in one 720px column, text left inside. --- */
body.glossary-page .gl-back {
    display: inline-flex; align-items: center; gap: 4px; margin: 0 0 16px;
    color: #6F6D6A; font-size: 13px; font-weight: 500; text-decoration: none;
}
body.glossary-page .gl-back:hover { color: #121212; text-decoration: underline; text-underline-offset: 3px; }
body.glossary-page .gl-term-head { margin-bottom: 32px; }
body.glossary-page .gl-term-cat { margin: 0 0 16px; }
body.glossary-page .gl-prose { color: #3D3D3C; font-size: 16px; line-height: 1.65; }
body.glossary-page .gl-prose > :first-child { margin-top: 0; }
body.glossary-page .gl-prose h2 { margin: 40px 0 12px; color: #121212; font-size: 20px; font-weight: 600; line-height: 1.3; }
body.glossary-page .gl-prose h3 { margin: 32px 0 10px; color: #121212; font-size: 16px; font-weight: 600; line-height: 1.4; }
body.glossary-page .gl-prose p { margin: 0 0 16px; }
body.glossary-page .gl-prose ul, body.glossary-page .gl-prose ol { margin: 0 0 16px; padding-left: 22px; }
body.glossary-page .gl-prose li { margin: 0 0 8px; }
body.glossary-page .gl-prose a { color: #121212; text-decoration: underline; text-underline-offset: 3px; }
body.glossary-page .gl-prose img { max-width: 100%; height: auto; border-radius: 16px; }
body.glossary-page .gl-prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
body.glossary-page .gl-prose th, body.glossary-page .gl-prose td { padding: 12px; border-bottom: 1px solid #E6E4E1; text-align: left; }

/* ---- The one picture under a term that names a DesignerBox job. ---------- */
body.glossary-page .gl-shot { margin: 32px 0 0; }
body.glossary-page .gl-shot img { display: block; width: 100%; height: auto; border-radius: 16px; }
body.glossary-page .gl-shot .v4x-cap { padding: 8px 0 0; }

/* ---- Related terms: a hairline link index, never a card wall. ------------ */
body.glossary-page .gl-related-list { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; }
body.glossary-page .gl-related-list li { break-inside: avoid; }
body.glossary-page .gl-related-list a {
    display: block; padding: 10px 0; border-bottom: 1px solid #F1EFEC;
    color: #3D3D3C; font-size: 15px; line-height: 1.5; text-decoration: none;
}
body.glossary-page .gl-related-list a:hover { color: #121212; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 899.98px) {
    body.glossary-page .gl-index { columns: 2; }
}
@media (max-width: 599.98px) {
    body.glossary-page .gl-index, body.glossary-page .gl-related-list { columns: 1; }
    body.glossary-page .gl-hero { padding-top: 32px; }
    body.glossary-page .gl-hero .v4-cta-row { flex-direction: column; align-items: stretch; }
    body.glossary-page .gl-hero .v4-cta-row > a { justify-content: center; width: 100%; }
}