/* glossary.css — typography and layout for /glossary/ only.
   Scoped under .gl so nav, footer and every other page are untouched.
   Written as plain CSS on purpose: assets/css/output.css is tree-shaken and
   many utilities (all gap-y-*, mt-12, py-6, hover:underline) are absent from it. */

.gl { --gl-measure: 36rem; --gl-aside: 360px; --gl-gap: 4rem; }

.gl a { text-decoration: none; }

/* ─── breadcrumb bar ─────────────────────────────────────────── */
.gl-crumb {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}
.gl-crumb-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0.9rem var(--container-padding);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: 0.9375rem; line-height: 1.4;
}
.gl-crumb a { color: var(--color-text-muted); font-weight: 500; transition: color var(--transition-fast); }
.gl-crumb a:hover { color: var(--color-accent); }
.gl-crumb-sep { color: var(--color-border); }
.gl-crumb-current { color: var(--color-text); font-weight: 600; }

/* ─── page shell ─────────────────────────────────────────────── */
.gl-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); }

/* separator after the definition, matching the rule used on the hub */
.gl-hero { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--color-border); margin-bottom: 2.5rem; }
.gl-eyebrow {
  display: inline-block; font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent);
  margin-bottom: 0.875rem;
}
.gl-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.12; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 1.25rem; max-width: 24ch;
}
.gl-lede {
  font-size: clamp(1.125rem, 1.9vw, 1.375rem); line-height: 1.6;
  color: var(--color-text); max-width: 60ch; margin: 0;
}

/* ─── two-column body ────────────────────────────────────────── */
.gl-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; padding-bottom: 4.5rem; }
@media (min-width: 1024px) {
  .gl-layout { grid-template-columns: minmax(0, 1fr) var(--gl-aside); gap: var(--gl-gap); align-items: start; }
}

/* ─── prose ──────────────────────────────────────────────────── */
.gl-prose { min-width: 0; }
.gl-prose > section { max-width: var(--gl-measure); }
.gl-prose h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.25; font-weight: 700;
  letter-spacing: -0.01em; margin: 2.75rem 0 1rem; scroll-margin-top: 6rem;
}
.gl-prose > section:first-child h2 { margin-top: 0; }
.gl-prose p {
  font-size: 1.0625rem; line-height: 1.78; color: var(--color-text);
  margin: 0 0 1.25rem; max-width: var(--gl-measure);
}
.gl-prose p:last-child { margin-bottom: 0; }

/* ─── sidebar ────────────────────────────────────────────────── */
.gl-aside { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 1024px) { .gl-aside { position: sticky; top: 5.5rem; } }

.gl-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); padding: 1.375rem 1.5rem;
}
.gl-card-title {
  position: relative;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--color-text-muted);
  margin: 0 0 1.125rem; padding-bottom: 0.75rem;
}
.gl-card-title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2rem; height: 2px; border-radius: 1px;
  background: var(--color-accent); opacity: 0.55;
}
.gl-card-accent .gl-card-title::after { opacity: 0.85; }
.gl-card ul { list-style: none; margin: 0; padding: 0; }
.gl-card li + li { margin-top: 0.8125rem; }
.gl-card li a {
  display: block; font-size: 1rem; line-height: 1.5; font-weight: 500;
  color: var(--color-text); transition: color var(--transition-fast);
}
.gl-card li a:hover { color: var(--color-accent); }
.gl-jump li a { color: var(--color-text-muted); }

.gl-card-accent {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}
.gl-card-accent p {
  font-size: 1rem; line-height: 1.65; color: var(--color-text); margin: 0 0 1rem;
}
.gl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.6875rem 1.375rem; border-radius: var(--radius-full);
  background: var(--color-accent); color: var(--color-bg);
  font-weight: 600; font-size: 0.9688rem;
  transition: background var(--transition-fast);
}
.gl-btn:hover { background: var(--color-accent-hover); }
.gl-reviewed {
  font-size: 0.875rem; line-height: 1.6; color: var(--color-text-muted);
  padding: 0 1.5rem;
}

/* ─── FAQ ────────────────────────────────────────────────────── */
.gl-faq { margin-top: 3.5rem; max-width: var(--gl-measure); }
.gl-faq > h2 { margin-bottom: 0.5rem; }
.gl-faq-intro { font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-muted); margin: 0 0 1.75rem; }
.gl-q {
  border-top: 1px solid var(--color-border);
}
.gl-q:last-of-type { border-bottom: 1px solid var(--color-border); }
.gl-q > button {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.25rem; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.375rem 0; color: var(--color-text);
  font-family: inherit; font-size: 1.0625rem; line-height: 1.5; font-weight: 600;
}
.gl-q > button:hover { color: var(--color-accent); }
.gl-q svg { flex: 0 0 auto; margin-top: 0.1875rem; color: var(--color-text-muted); transition: transform var(--transition-base); }
.gl-q-open svg { transform: rotate(180deg); }
.gl-a { font-size: 1.0313rem; line-height: 1.76; color: var(--color-text); margin: 0; padding: 0 0 1.5rem; }

/* ─── related terms ──────────────────────────────────────────── */
.gl-band { border-top: 1px solid var(--color-border); padding: 3.5rem 0 4rem; }
.gl-band h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.25; font-weight: 700;
  margin: 0 0 0.5rem;
}
.gl-band-sub, .gl-section-sub { font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-muted); margin: 0 0 2rem; max-width: 62ch; }
.gl-section { border-top: 1px solid var(--color-border); background: var(--color-bg-alt); padding: 2.75rem 0 3.5rem; }
.gl-section h2 {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-text-muted); margin: 0 0 1.75rem;
}

.gl-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

.gl-tile {
  display: block; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); padding: 1.625rem 1.75rem;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.gl-tile:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.gl-tile-eyebrow { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.625rem; }
.gl-tile h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 700; margin: 0 0 0.625rem; }
.gl-tile p { font-size: 1rem; line-height: 1.65; color: var(--color-text-muted); margin: 0; }

/* ─── full index ─────────────────────────────────────────────── */
.gl-index { display: grid; grid-template-columns: 1fr; gap: 2.5rem 2rem; }
@media (min-width: 640px) { .gl-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gl-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .gl-index { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gl-index h3 {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-accent); margin: 0 0 0.875rem; padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--color-border);
}
.gl-index ul { list-style: none; margin: 0; padding: 0; }
.gl-index li + li { margin-top: 0.6875rem; }
.gl-index a { font-size: 1rem; line-height: 1.5; color: var(--color-text); transition: color var(--transition-fast); }
.gl-index a:hover { color: var(--color-accent); }
.gl-index .gl-here { font-size: 1rem; line-height: 1.5; color: var(--color-text-muted); font-weight: 600; }

/* ─── closing CTA ────────────────────────────────────────────── */
.gl-close { border-top: 1px solid var(--color-border); background: var(--color-bg-alt); padding: 4rem 0; text-align: center; }
.gl-close h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; font-weight: 700; margin: 0 0 0.875rem; }
.gl-close p { font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-muted); max-width: 48ch; margin: 0 auto 2.25rem; }
.gl-close p.gl-close-links {
  max-width: none;            /* the 48ch cap on .gl-close p was boxing this line in */
  margin: 2.5rem auto 0;      /* auto, or the narrow box sits flush left */
  font-size: 1rem; line-height: 1.7;
}
.gl-close .gl-close-links a { color: var(--color-accent); font-weight: 600; }
.gl-close .gl-close-links a:hover { text-decoration: underline; }

/* ─── hub ────────────────────────────────────────────────────── */
.gl-hub-hero { padding: 3.5rem 0 1rem; }
.gl-hub-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.25rem; max-width: 28ch; }
.gl-hub-hero .gl-lede { max-width: 58ch; }
.gl-hub-stats { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.gl-stat-n { display: block; font-size: 1.625rem; font-weight: 700; line-height: 1; color: var(--color-accent); }
.gl-stat-l { display: block; font-size: 0.875rem; color: var(--color-text-muted); margin-top: 0.375rem; }

.gl-group { padding: 3rem 0 0; }
.gl-group:last-of-type { padding-bottom: 5rem; }
.gl-group-head { margin-bottom: 0.5rem; }
.gl-group-head h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.25; font-weight: 700; margin: 0; }
.gl-group-count { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-text-muted); }