/* Learn hub styles. Shared site look lives in /assets/styles.css; this file
   only adds long-form article layout. Loaded by /learn/ pages. */

/* ---------- Hub index ---------- */
.ln-hero { padding: clamp(70px, 9vw, 120px) 0 clamp(36px, 5vw, 56px); }
.ln-hero .wrap { max-width: 860px; }
.ln-hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.8rem); margin: 20px 0 20px; }
.ln-hero .lead { color: var(--muted); font-size: clamp(1.04rem, 2vw, 1.18rem); max-width: 700px; }

.ln-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 30px 0 0; }
@media (min-width: 760px) { .ln-cards { grid-template-columns: repeat(2, 1fr); } }
.ln-card { display: block; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 26px 24px; transition: border-color .25s, transform .25s; }
.ln-card:hover { border-color: rgba(166, 255, 46, .45); transform: translateY(-3px); }
.ln-card .n { font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lime); }
.ln-card h2 { font-size: 1.28rem; line-height: 1.3; margin: 12px 0 10px; color: #fff; }
.ln-card p { color: var(--muted); font-size: .94rem; line-height: 1.6; }
.ln-card .go { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: .86rem; font-weight: 600; color: var(--lime-soft); }
.ln-card .go svg { width: 15px; height: 15px; }

.ln-soon { margin-top: 18px; border: 1px dashed rgba(255,255,255,.22); border-radius: 10px;
  padding: 22px 24px; color: var(--muted); font-size: .94rem; line-height: 1.6; }
.ln-soon .n { font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 10px; }

/* ---------- Article pages ---------- */
.art-hero { padding: clamp(60px, 8vw, 100px) 0 clamp(12px, 2vw, 22px); }
.art-hero .eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.28); transition: color .2s; }
.art-hero .eyebrow a:hover { color: var(--lime-soft); text-decoration-color: currentColor; }
.art-hero .wrap, .article .wrap { max-width: 760px; }
.art-hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.12; margin: 18px 0 18px; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  font-family: "JetBrains Mono", monospace; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.art-meta b { color: var(--lime-soft); font-weight: 500; }

.article { padding: clamp(10px, 2vw, 20px) 0 clamp(50px, 7vw, 90px); }
.article p { color: var(--muted); font-size: 1.02rem; line-height: 1.75; margin: 0 0 22px; }
.article p.opener { color: #e6eaef; font-size: clamp(1.08rem, 2vw, 1.2rem); line-height: 1.7; }
.article h2 { font-size: clamp(1.4rem, 2.8vw, 1.8rem); margin: 44px 0 16px; color: #fff; }
.article h3 { font-size: 1.12rem; margin: 30px 0 12px; color: #fff; }
/* Body links only. Buttons inside the article (the CTA band) must keep the
   dark-on-lime .btn treatment from styles.css; without the :not() they inherited
   lime text on a lime background. */
.article a:not(.btn) { color: var(--lime-soft); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(200,255,122,.4); }
.article a:not(.btn):hover { text-decoration-color: var(--lime-soft); }
.article ul, .article ol { margin: 0 0 22px; padding-left: 22px; color: var(--muted);
  font-size: 1.02rem; line-height: 1.75; }
.article li { margin-bottom: 10px; }
.article li::marker { color: var(--lime); }

/* Pull quote: the line we want quoted. Visible, plain, on brand. */
.pull { border-left: 3px solid var(--lime); background: var(--panel); border-radius: 0 10px 10px 0;
  padding: 22px 26px; margin: 30px 0; }
.pull p { color: #fff; font-family: "Bricolage Grotesque", sans-serif; font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem); line-height: 1.45; margin: 0; }

/* Figures. Diagrams are separate SVG files under /img/learn/ rather than inline
   markup, so each one has a crawlable URL and a descriptive filename. Width and
   height attributes on the img keep the aspect ratio reserved before load. */
.article figure { margin: 32px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article figure img { width: 100%; min-width: 660px; height: auto; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); }
/* The diagrams carry small type, so on wide screens they break out past the
   760px reading column, and on narrow ones the figure scrolls sideways rather
   than shrinking the labels to nothing. */
@media (min-width: 1080px) {
  .article figure { width: 920px; margin-left: -80px; }
}
.article figcaption { color: var(--muted); font-size: .86rem; line-height: 1.6; margin-top: 12px; }
.article figcaption b { color: #e6eaef; font-weight: 600; }

/* Stat callout row */
.figs { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 28px 0; }
@media (min-width: 640px) { .figs { grid-template-columns: repeat(3, 1fr); } }
.figs.two { grid-template-columns: 1fr; }
@media (min-width: 640px) { .figs.two { grid-template-columns: repeat(2, 1fr); } }
.fig { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 20px 18px; }
.fig .v { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; color: var(--lime);
  font-size: clamp(1.7rem, 3.4vw, 2.2rem); line-height: 1.05; }
.fig .k { color: var(--muted); font-size: .86rem; line-height: 1.5; margin-top: 8px; }

/* Note box for caveats */
.note { border: 1px dashed rgba(255,255,255,.22); border-radius: 10px; padding: 18px 22px; margin: 26px 0; }
.note p { font-size: .94rem; margin: 0; }
.note .lbl { font-family: "JetBrains Mono", monospace; font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lime); display: block; margin-bottom: 8px; }

/* Sources */
.sources { margin-top: 50px; border-top: 1px solid var(--line); padding-top: 26px; }
.sources h2 { margin-top: 0; font-size: 1.1rem; }
.sources ol { font-size: .92rem; }
.sources li { margin-bottom: 8px; overflow-wrap: break-word; }

/* Next-read footer */
.next-read { border-top: 1px solid var(--line); padding: 34px 0 0; margin-top: 44px; }
.next-read .lbl { font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 14px; }
.next-read a.nr { display: block; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); padding: 20px 22px; color: #fff; font-weight: 600; font-size: 1.02rem;
  text-decoration: none; transition: border-color .25s; }
.next-read a.nr:hover { border-color: rgba(166,255,46,.45); }
.next-read a.nr span { display: block; color: var(--muted); font-weight: 400; font-size: .88rem; margin-top: 6px; }

/* Article CTA band */
.art-cta { border: 1px solid rgba(166,255,46,.3); border-radius: 12px; background: rgba(166,255,46,.05);
  padding: 28px 26px; margin: 44px 0 0; }
.art-cta h2 { margin: 0 0 10px; font-size: 1.3rem; }
.art-cta p { margin: 0 0 18px; font-size: .96rem; }