/* ============================================================
   Learnova — article (post view) stylesheet
   Self-contained: does not depend on the Tailwind build artifact.
   The typography plugin is NOT in the compiled Tailwind build,
   so article typography is defined here for real.
   Scoped with .lp- to avoid colliding with home.css.
   ============================================================ */

.lp {
  /* Reading face. Source Serif 4 is loaded for this page only; the rest of the
     stack keeps the article legible if the webfont is slow or blocked. */
  --lp-serif: "Source Serif 4", Charter, "Bitstream Charter", "Iowan Old Style",
              Georgia, Cambria, "Times New Roman", serif;

  --lp-bg: #ffffff;
  --lp-surface: #ffffff;
  --lp-soft: #f6f7fb;
  --lp-border: #e5e7eb;
  --lp-border-strong: #d1d5db;
  --lp-text: #111827;
  --lp-body: #374151;
  --lp-muted: #6b7280;
  --lp-faint: #9ca3af;
  --lp-accent: #4f46e5;
  --lp-accent-soft: #eef2ff;
  --lp-accent-text: #4338ca;
  --lp-rule: #e9eaee;
  --lp-code-bg: #f6f7f9;
  --lp-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 10px 30px rgba(17, 24, 39, .07);
}

.dark .lp {
  --lp-bg: #020617;
  --lp-surface: #0f172a;
  --lp-soft: #0b1220;
  --lp-border: #1e293b;
  --lp-border-strong: #334155;
  --lp-text: #f1f5f9;
  --lp-body: #cbd5e1;
  --lp-muted: #94a3b8;
  --lp-faint: #64748b;
  --lp-accent: #818cf8;
  --lp-accent-soft: #1e1b4b;
  --lp-accent-text: #a5b4fc;
  --lp-rule: #1e293b;
  --lp-code-bg: #0b1220;
  --lp-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .45);
}

.lp {
  background: var(--lp-bg);
  color: var(--lp-text);
}

.lp-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 1024px) { .lp-container { padding-inline: 32px; } }

.lp-narrow {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

/* ---------------- Progress ---------------- */

.lp-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 60;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
  transition: width .12s linear;
}

/* ---------------- Header ---------------- */

.lp-head {
  background:
    radial-gradient(48rem 24rem at 12% -20%, rgba(99, 102, 241, .20), transparent 60%),
    radial-gradient(40rem 22rem at 88% 0%, rgba(168, 85, 247, .16), transparent 60%),
    linear-gradient(165deg, #1e1b4b, #312e81 50%, #0f172a);
  color: #fff;
  padding: 40px 0 44px;
}
@media (min-width: 768px) { .lp-head { padding: 56px 0 60px; } }

.lp-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  color: rgba(199, 210, 254, .75);
  margin-bottom: 20px;
}
.lp-crumbs a { color: #c7d2fe; }
.lp-crumbs a:hover { text-decoration: underline; }
.lp-crumbs span { opacity: .55; }

.lp-head h1 {
  font-size: clamp(1.75rem, 4.6vw, 2.85rem);
  line-height: 1.14;
  letter-spacing: -.025em;
  font-weight: 800;
  margin: 0 0 16px;
  max-width: 22ch;
}

.lp-standfirst {
  font-size: clamp(1rem, 2.1vw, 1.1rem);
  line-height: 1.65;
  color: rgba(224, 231, 255, .84);
  margin: 0 0 26px;
  max-width: 62ch;
}

.lp-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-size: 13.5px;
  color: rgba(199, 210, 254, .8);
}

.lp-byline b { color: #fff; font-weight: 700; }

.lp-avatar {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
}
.lp-avatar--lg { width: 60px; height: 60px; flex: 0 0 60px; font-size: 21px; border-radius: 16px; }

.lp-byline__item { display: inline-flex; align-items: center; gap: 6px; }
.lp-byline__sep { opacity: .4; }

/* ---------------- Hero figure ---------------- */

.lp-figure {
  margin: 0;
  padding: 0 20px;
}
.lp-figure__frame {
  max-width: 1200px;
  margin: -34px auto 0;
  aspect-ratio: 21 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #312e81, #7c3aed);
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .55);
  position: relative;
  z-index: 2;
}
.lp-figure__frame img { width: 100%; height: 100%; object-fit: cover; }

.lp-figure figcaption {
  max-width: 1200px;
  margin: 12px auto 0;
  font-size: 12.5px;
  color: var(--lp-faint);
  padding-inline: 2px;
}

/* ---------------- Layout ---------------- */

.lp-body {
  display: grid;
  gap: 44px;
  align-items: start;
  padding: 44px 0 0;
}
@media (min-width: 1024px) {
  .lp-body { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; }
}

.lp-rail { display: none; }
@media (min-width: 1024px) { .lp-rail { display: block; width: 320px; flex: 0 0 320px; } }

/* The rail flows with the page instead of pinning itself.
   Sticky positioning on an element taller than the viewport pins its top edge
   and strands the lower half below the fold, which reads as a sidebar that
   "scrolls on its own". Static positioning keeps a single page scrollbar and
   every widget stays reachable. */
.lp-rail,
.lp-rail__inner {
  position: static;
  top: auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

/* ---------------- Rail widgets ---------------- */

.lp-box {
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: 15px;
  padding: 18px;
  margin-bottom: 20px;
  /* Guard: the rail must never scroll independently of the page. */
  overflow: visible;
  max-height: none;
}
.lp-box:last-child { margin-bottom: 0; }

.lp-box__title {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lp-muted);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lp-share { display: flex; gap: 8px; flex-wrap: wrap; }

.lp-share button,
.lp-share a {
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid var(--lp-border);
  background: var(--lp-soft);
  color: var(--lp-muted);
  display: grid;
  place-items: center;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.lp-share button:hover,
.lp-share a:hover {
  background: var(--lp-accent);
  border-color: var(--lp-accent);
  color: #fff;
  transform: translateY(-2px);
}

.lp-toc { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--lp-border); }

.lp-toc a {
  display: block;
  padding: 7px 0 7px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: .83rem;
  line-height: 1.45;
  color: var(--lp-muted);
  transition: color .16s, border-color .16s;
}
.lp-toc a:hover { color: var(--lp-text); }
.lp-toc a.is-active { color: var(--lp-accent); border-left-color: var(--lp-accent); font-weight: 700; }
.lp-toc__sub a { padding-left: 28px; font-size: .78rem; }

.lp-nextprev { display: grid; gap: 12px; }

.lp-nextprev a { display: block; }
.lp-nextprev small {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--lp-faint);
  margin-bottom: 5px;
}
.lp-nextprev span {
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lp-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-nextprev a:hover span { color: var(--lp-accent); }

/* ---------------- Article typography ---------------- */

.lp-prose {
  font-family: var(--lp-serif);
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--lp-body);
  word-wrap: break-word;
}

/* Headings and pull content stay in the reading face; UI chrome above the
   article body stays in the UI sans stack. */
.lp-prose h2,
.lp-prose h3,
.lp-prose h4,
.lp-prose h5,
.lp-prose h6 {
  font-family: var(--lp-serif);
}

.lp-prose > *:first-child { margin-top: 0; }
.lp-prose > *:last-child { margin-bottom: 0; }

.lp-prose p { margin: 0 0 1.4em; }

.lp-prose h2,
.lp-prose h3,
.lp-prose h4 {
  color: var(--lp-text);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.25;
  scroll-margin-top: 90px;
}
.lp-prose h2 { font-size: 1.55rem; margin: 2.4em 0 .7em; padding-bottom: .4em; border-bottom: 1px solid var(--lp-rule); }
.lp-prose h3 { font-size: 1.24rem; margin: 1.9em 0 .6em; }
.lp-prose h4 { font-size: 1.06rem; margin: 1.6em 0 .5em; }

.lp-prose a {
  color: var(--lp-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.lp-prose a:hover { text-decoration-thickness: 2.5px; }

.lp-prose ul,
.lp-prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.lp-prose li { margin-bottom: .5em; }
.lp-prose li::marker { color: var(--lp-accent); }
.lp-prose ol { list-style: decimal; }

.lp-prose strong { color: var(--lp-text); font-weight: 700; }
.lp-prose em { font-style: italic; }

.lp-prose blockquote {
  margin: 1.8em 0;
  padding: 1.1em 1.4em;
  border-left: 3px solid var(--lp-accent);
  border-radius: 0 12px 12px 0;
  background: var(--lp-accent-soft);
  color: var(--lp-body);
  font-size: 1.04rem;
}
.dark .lp-prose blockquote { background: rgba(49, 46, 129, .25); }
.lp-prose blockquote p:last-child { margin-bottom: 0; }

.lp-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 1.8em 0;
  display: block;
}

.lp-prose figure { margin: 1.8em 0; }
.lp-prose figcaption { font-size: .85rem; color: var(--lp-faint); text-align: center; margin-top: .7em; }

.lp-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
  background: var(--lp-code-bg);
  border: 1px solid var(--lp-border);
  padding: .12em .4em;
  border-radius: 6px;
}
.lp-prose pre {
  background: #0b1220;
  color: #e2e8f0;
  padding: 1.1em 1.25em;
  border-radius: 13px;
  overflow-x: auto;
  margin: 1.8em 0;
  line-height: 1.6;
  font-size: .875rem;
}
.lp-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

.lp-prose hr { border: 0; border-top: 1px solid var(--lp-border); margin: 2.6em 0; }

.lp-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.8em 0;
  font-size: .92rem;
  display: block;
  overflow-x: auto;
}
.lp-prose th,
.lp-prose td { padding: .7em .9em; border: 1px solid var(--lp-border); text-align: left; }
.lp-prose th { background: var(--lp-soft); font-weight: 700; color: var(--lp-text); }

.lp-prose iframe { max-width: 100%; border-radius: 12px; }

/* ---------------- After article ---------------- */

.lp-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.lp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  background: var(--lp-soft);
  border: 1px solid var(--lp-border);
  color: var(--lp-muted);
  transition: background .18s, color .18s, border-color .18s;
}
.lp-tag:hover { background: var(--lp-accent); border-color: var(--lp-accent); color: #fff; }

.lp-author {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--lp-soft);
  border: 1px solid var(--lp-border);
  border-radius: 15px;
  padding: 20px;
  margin-top: 32px;
}
.lp-author h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; }
.lp-author p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--lp-muted); }

.lp-pager {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--lp-border);
}
@media (min-width: 640px) { .lp-pager { grid-template-columns: 1fr 1fr; } }

.lp-pager a {
  border: 1px solid var(--lp-border);
  border-radius: 14px;
  padding: 15px 17px;
  background: var(--lp-surface);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.lp-pager a:hover { border-color: var(--lp-accent); transform: translateY(-2px); box-shadow: var(--lp-shadow); }
.lp-pager small {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--lp-faint);
  margin-bottom: 6px;
}
.lp-pager span {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--lp-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-pager--next { text-align: right; }
.lp-pager a:hover span { color: var(--lp-accent); }

/* ---------------- Related ---------------- */

.lp-related { background: var(--lp-soft); border-top: 1px solid var(--lp-border); padding: 52px 0; }

.lp-related__grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.lp-rel {
  display: flex;
  flex-direction: column;
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: 15px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lp-rel:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow); border-color: var(--lp-border-strong); }
.lp-rel__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--lp-accent-soft); }
.lp-rel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.lp-rel:hover .lp-rel__media img { transform: scale(1.05); }
.lp-rel__body { padding: 15px 17px 17px; display: flex; flex-direction: column; flex: 1; }

.lp-rel__cat {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-accent-text);
  background: var(--lp-accent-soft);
  border-radius: 6px;
  padding: 3px 7px;
  align-self: flex-start;
  margin-bottom: 9px;
}

.lp-rel h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--lp-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-rel:hover h3 { color: var(--lp-accent); }

.lp-rel__meta {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--lp-border);
  font-size: .73rem;
  color: var(--lp-faint);
  display: flex;
  gap: 7px;
}

/* ---------------- Empty ---------------- */

.lp-empty {
  text-align: center;
  padding: 48px 20px;
  border: 1px dashed var(--lp-border-strong);
  border-radius: 15px;
  color: var(--lp-muted);
}
.lp-empty strong { display: block; color: var(--lp-text); font-size: 1.02rem; margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  .lp-rel, .lp-rel__media img, .lp-pager a, .lp-share button, .lp-share a, .lp-tag { transition: none !important; }
  .lp-rel:hover, .lp-pager a:hover, .lp-share button:hover, .lp-share a:hover { transform: none !important; }
  .lp-progress { transition: none !important; }
}