/* ════════════════════════════════════════════════════════════════════
   kl-learn.css — the Education section design system
   ════════════════════════════════════════════════════════════════════

   Every rule is scoped to .kle- so nothing here can reach the nav, the
   black brand strip, the footer, or any other page. That scoping is not
   politeness: this file is linked into 25+ pages, and an unscoped rule
   here would be the single easiest way to break the chrome site-wide.

   WHY THIS IS AN EXTERNAL FILE when the rest of the site inlines its CSS
   per page. Everywhere else, one page owns one design, so a <style> block
   keeps the design next to the markup it styles. Here, 25+ pages share one
   visual vocabulary — a per-page block would mean 25 copies and 25 chances
   to diverge, and "restyle the articles" would stop being a task anyone
   would volunteer for. The build-time overlay guards were extended to scan
   this file, so moving the CSS out of the page did not move it out of the
   checks.

   The vocabulary deliberately matches .klt- on team.html and .kla- on
   ambassadors.html — same display face, same eyebrow rule, same card
   radius. Someone walking Ambassadors -> Education should not feel a seam.

   Variables are referenced with fallbacks (var(--red,#cc0000)) because the
   chassis defines them in its own <style> block and this file loads first.
   ════════════════════════════════════════════════════════════════════ */

/* ── Layout primitives ──────────────────────────────────────────────── */
.kle-wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.kle-narrow { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; }
.kle-center { text-align: center; }
.kle-hero { padding: 3.5rem 0 2.5rem; }
.kle-section { padding: 3.25rem 0; }
.kle-section-alt { background: #f7f5f2; }

.kle-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--red, #cc0000); margin-bottom: 1.1rem;
}
.kle-rule { width: 24px; height: 2px; background: var(--red, #cc0000); display: inline-block; }

.kle-display {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(42px, 7.5vw, 88px); line-height: .95; letter-spacing: .02em;
  color: var(--text, #111110); margin: 0 0 .5rem;
}
.kle-kicker {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(21px, 3.4vw, 32px); letter-spacing: .08em;
  color: var(--red, #cc0000); margin: 0 0 1.5rem;
}
.kle-h2 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(28px, 4.6vw, 44px); letter-spacing: .04em;
  color: var(--text, #111110); margin: 0 0 1.25rem;
}
.kle-lede {
  font-size: 1.07rem; line-height: 1.75; color: var(--text-mid, #4a4845);
  margin: 0 auto 1.1rem; max-width: 660px;
}
.kle-fineprint {
  font-size: 13px; line-height: 1.65; color: #6f6a63;
  margin: 1.5rem auto 0; max-width: 580px;
}

/* ── Topic cards (the hub) ──────────────────────────────────────────────
   Two-up from 700px, never three. Each card carries a real paragraph, and
   at three-up on a laptop the text column narrows enough that every card
   becomes six ragged lines — the same reason team.html caps its ways-in
   grid at two. */
.kle-topics { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 700px) { .kle-topics { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }

/* The whole card is the anchor, not a "Read more" in the corner. A card
   that looks clickable but only responds on one word is the most common
   way a grid like this frustrates someone on a phone. */
.kle-topic {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid #e7e3dc; border-radius: 12px; padding: 1.6rem 1.5rem;
  text-decoration: none; color: inherit; min-height: 100%;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.kle-topic:hover, .kle-topic:focus-visible {
  border-color: var(--red, #cc0000); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07); outline: none;
}
.kle-topic-count {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red, #cc0000); margin: 0 0 .6rem;
}
.kle-topic-name {
  font-family: 'Bebas Neue', Impact, sans-serif; font-size: 30px; letter-spacing: .04em;
  color: var(--text, #111110); margin: 0 0 .55rem; line-height: 1.1;
}
.kle-topic-body { font-size: .95rem; line-height: 1.7; color: var(--text-mid, #4a4845); margin: 0 0 1.1rem; }
.kle-topic-go {
  margin-top: auto; font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red, #cc0000);
  display: inline-flex; align-items: center; gap: .4rem; min-height: 24px;
}

/* ── Article cards (topic hubs) ─────────────────────────────────────── */
.kle-cards { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 640px) { .kle-cards { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } }
@media (min-width: 1000px) { .kle-cards { grid-template-columns: repeat(3, 1fr); } }

.kle-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid #e7e3dc; border-radius: 12px; padding: 1.35rem 1.3rem;
  text-decoration: none; color: inherit; min-height: 100%;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.kle-card:hover, .kle-card:focus-visible {
  border-color: var(--red, #cc0000); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07); outline: none;
}
.kle-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #8b857e; margin: 0 0 .7rem;
}
.kle-card-topic { color: var(--red, #cc0000); }
.kle-card-dot { color: #d8d2c8; }
.kle-card-name {
  font-family: 'Bebas Neue', Impact, sans-serif; font-size: 24px; letter-spacing: .035em;
  color: var(--text, #111110); margin: 0 0 .5rem; line-height: 1.12;
}
.kle-card-body { font-size: .9rem; line-height: 1.65; color: var(--text-mid, #4a4845); margin: 0 0 1rem; }
.kle-card-go {
  margin-top: auto; font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red, #cc0000);
  display: inline-flex; align-items: center; gap: .35rem; min-height: 24px;
}

/* A scaffolded article. Rendered as a <li>, not an <a>, so there is nothing
   to click and nothing to 404 — the hub says what is coming without lying
   about what exists. Muted rather than hidden: "more is coming" is useful
   information, and an empty-looking hub reads as an abandoned one. */
.kle-card-soon {
  background: #faf9f7; border-style: dashed; border-color: #ddd8d0;
  cursor: default; color: #8b857e;
}
.kle-card-soon .kle-card-name { color: #6f6a63; }
.kle-card-soon .kle-card-body { color: #8b857e; }
.kle-soon-tag {
  margin-top: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #a39d95;
  display: inline-flex; align-items: center; gap: .35rem; min-height: 24px;
}

/* ── Article body typography ────────────────────────────────────────────
   Measure is capped at 68ch rather than a pixel width. The articles are the
   only part of this site that is genuinely long-form reading, and a line
   that runs the full 1100px wrap is where people stop reading. */
.kle-article { max-width: 68ch; margin: 0 auto; padding: 0 1.5rem; }
.kle-article h2 {
  font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(26px, 4vw, 38px);
  letter-spacing: .035em; color: var(--text, #111110);
  margin: 2.75rem 0 1rem; line-height: 1.08;
}
.kle-article h3 {
  font-size: 1.06rem; font-weight: 700; letter-spacing: .01em;
  color: var(--text, #111110); margin: 2rem 0 .65rem; line-height: 1.4;
}
.kle-article p { font-size: 1.04rem; line-height: 1.8; color: #302e2b; margin: 0 0 1.15rem; }
.kle-article strong { color: var(--text, #111110); font-weight: 600; }
.kle-article a { color: var(--red, #cc0000); text-decoration: underline; text-underline-offset: 2px; }
.kle-article a:hover { color: var(--red-dark, #990000); }
.kle-article ul, .kle-article ol { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.kle-article li { font-size: 1.02rem; line-height: 1.75; color: #302e2b; margin: 0 0 .55rem; }
.kle-article blockquote {
  margin: 1.75rem 0; padding: .2rem 0 .2rem 1.25rem;
  border-left: 3px solid var(--red, #cc0000);
  font-size: 1.1rem; line-height: 1.7; color: var(--text-mid, #4a4845); font-style: italic;
}

/* Article header */
.kle-art-head { padding: 3rem 0 1.5rem; }
.kle-art-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #8b857e; margin: 0 0 1rem;
}
.kle-art-meta a { color: var(--red, #cc0000); text-decoration: none; }
.kle-art-meta a:hover { text-decoration: underline; }
.kle-art-title {
  font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(36px, 6.5vw, 68px);
  line-height: .98; letter-spacing: .02em; color: var(--text, #111110); margin: 0 0 .85rem;
}
.kle-art-standfirst { font-size: 1.12rem; line-height: 1.7; color: var(--text-mid, #4a4845); margin: 0; }

/* ── Callout boxes ──────────────────────────────────────────────────────
   Three flavours, all the same shape so the page has one rhythm:
     .kle-note  — neutral aside, "worth knowing"
     .kle-key   — the thing to remember if you remember one thing
     .kle-care  — a safety or wellbeing note. Red-edged on purpose: these
                  carry the weight-cutting warnings and the mental-health
                  signposting, and they must not read as decoration. */
.kle-note, .kle-key, .kle-care {
  margin: 1.9rem 0; padding: 1.2rem 1.3rem; border-radius: 10px;
  border: 1px solid #e7e3dc; background: #faf9f7;
}
.kle-note p:last-child, .kle-key p:last-child, .kle-care p:last-child { margin-bottom: 0; }
.kle-key { border-left: 3px solid var(--red, #cc0000); background: #fdf7f7; }
.kle-care { border-left: 3px solid var(--red, #cc0000); background: #fff; border-color: #f0d8d8; }
.kle-callout-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--red, #cc0000); margin: 0 0 .5rem;
}
.kle-note .kle-callout-label { color: #8b857e; }
.kle-note p, .kle-key p, .kle-care p { font-size: .98rem; line-height: 1.72; margin: 0 0 .8rem; }

/* ── The "at a glance" fact strip on style articles ─────────────────── */
.kle-glance {
  margin: 2rem 0; padding: 0; list-style: none;
  border: 1px solid #e7e3dc; border-radius: 10px; overflow: hidden; background: #fff;
}
.kle-glance li { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .85rem 1.15rem; margin: 0; border-top: 1px solid #f0ece6; font-size: .95rem; line-height: 1.6; }
.kle-glance li:first-child { border-top: 0; }
.kle-glance dt, .kle-glance .kle-glance-k {
  flex: 0 0 9.5rem; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #8b857e; padding-top: .18rem;
}
.kle-glance .kle-glance-v { flex: 1 1 14rem; color: #302e2b; }

/* ── Cross-link to the podcast page for that art ────────────────────── */
.kle-pod {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem;
  margin: 2.25rem 0; padding: 1.2rem 1.3rem;
  background: var(--black, #111110); border-radius: 10px; color: #fff;
}
.kle-pod-txt { flex: 1 1 15rem; }
.kle-pod-label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55); margin: 0 0 .35rem;
}
.kle-pod-name {
  font-family: 'Bebas Neue', Impact, sans-serif; font-size: 23px; letter-spacing: .04em;
  margin: 0; line-height: 1.15; color: #fff;
}
.kle-pod-go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  padding: .7rem 1.15rem; background: var(--red, #cc0000); color: #fff;
  text-decoration: none; border-radius: 7px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; min-height: 44px; box-sizing: border-box;
}
.kle-pod-go:hover { background: var(--red-dark, #990000); }

/* ── Next / previous and related ────────────────────────────────────── */
.kle-related { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 640px) { .kle-related { grid-template-columns: repeat(2, 1fr); } }
.kle-related a {
  display: block; background: #fff; border: 1px solid #e7e3dc; border-radius: 10px;
  padding: 1rem 1.1rem; text-decoration: none; color: inherit;
  transition: border-color .18s, transform .18s;
}
.kle-related a:hover, .kle-related a:focus-visible { border-color: var(--red, #cc0000); transform: translateY(-2px); outline: none; }
.kle-related-k { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #a39d95; display: block; margin: 0 0 .35rem; }
.kle-related-t { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 20px; letter-spacing: .035em; color: var(--text, #111110); margin: 0; line-height: 1.15; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.kle-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .85rem 1.5rem; background: var(--red, #cc0000); color: #fff;
  text-decoration: none; border: 0; border-radius: 7px; cursor: pointer;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  min-height: 44px; box-sizing: border-box; transition: background .16s;
}
.kle-btn:hover:not(:disabled) { background: var(--red-dark, #990000); }
.kle-btn:disabled { opacity: .45; cursor: default; }
.kle-btn-ghost { background: transparent; color: var(--red, #cc0000); border: 1.5px solid var(--red, #cc0000); }
.kle-btn-ghost:hover:not(:disabled) { background: var(--red, #cc0000); color: #fff; }
.kle-btn-row { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.75rem; }

/* ── The style finder ───────────────────────────────────────────────────
   No position:absolute anywhere in here, and no fixed layer. The shop page
   was frozen for a day by an invisible fixed overlay that was still
   hit-testable, and a quiz is exactly the kind of component where a
   transition-out step tempts you into one. Panels are shown and hidden with
   [hidden] plus an explicit display rule, because an author `display:` on
   the class is what defeats [hidden] — that was the shop bug's real cause. */
.kle-quiz { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; }
.kle-quiz-card { background: #fff; border: 1px solid #e7e3dc; border-radius: 14px; padding: 1.75rem 1.5rem; }
.kle-quiz-step[hidden] { display: none !important; }
.kle-quiz-progress { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #a39d95; margin: 0 0 .9rem; }
.kle-quiz-q { font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(24px, 4vw, 34px); letter-spacing: .03em; color: var(--text, #111110); margin: 0 0 1.25rem; line-height: 1.1; }
.kle-quiz-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.kle-quiz-opt {
  display: block; width: 100%; text-align: left; background: #faf9f7;
  border: 1.5px solid #e7e3dc; border-radius: 10px; padding: .95rem 1.1rem;
  cursor: pointer; font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: .97rem; line-height: 1.5; color: #302e2b; min-height: 44px;
  transition: border-color .15s, background .15s;
}
.kle-quiz-opt:hover, .kle-quiz-opt:focus-visible { border-color: var(--red, #cc0000); background: #fff; outline: none; }
.kle-quiz-opt[aria-pressed="true"] { border-color: var(--red, #cc0000); background: #fdf7f7; font-weight: 600; }
.kle-quiz-nav { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: space-between; margin-top: 1.5rem; }

.kle-result { margin: 0; padding: 0; list-style: none; }
.kle-result li { background: #fff; border: 1px solid #e7e3dc; border-radius: 12px; padding: 1.25rem 1.3rem; margin: 0 0 .9rem; }
.kle-result li:first-child { border-left: 3px solid var(--red, #cc0000); }
.kle-result-rank { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red, #cc0000); margin: 0 0 .4rem; }
.kle-result-name { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 26px; letter-spacing: .04em; color: var(--text, #111110); margin: 0 0 .5rem; line-height: 1.1; }
.kle-result-why { font-size: .95rem; line-height: 1.7; color: var(--text-mid, #4a4845); margin: 0 0 .9rem; }

/* ── Reduced motion ────────────────────────────────────────────────────
   Every transition here is a hover lift or a colour fade. None of them
   carry meaning, so honouring the preference costs nothing. */
@media (prefers-reduced-motion: reduce) {
  .kle-topic, .kle-card, .kle-related a, .kle-quiz-opt, .kle-btn { transition: none; }
  .kle-topic:hover, .kle-card:hover, .kle-related a:hover { transform: none; }
}