/* The CoreCNX blog: the /blog.html hub, post cards, related posts, and what
   webdev/cnx-illinois-push/_build/blog_extras.py places inside a post (CTA
   bands, the cover, photos, the screenshot and diagrams). Colors and type are
   the tokens in styles.css: midnight ink, near-white bone, indigo, Manrope,
   Inter and JetBrains Mono. Loaded after styles.css and the post's own <style>. */

/* ── Post header ─────────────────────────────────────────────────── */
.post-hero .post-meta a.post-topic { color: var(--indigo); }
.post-hero .post-meta a.post-topic:hover { color: var(--indigo-deep); }
@media (max-width: 720px) {
  .post-hero .post-meta { flex-wrap: wrap; gap: 6px 10px; }
  .post-hero .post-meta > * { white-space: nowrap; }
}

/* ── Inside a post: the cover ────────────────────────────────────── */
/* .figure.post-cover, because each post's own <style> (loaded after this
   file) sets .post-body .figure, which would otherwise win. */
.post-body .figure.post-cover { margin: 0 0 40px; }
.post-body .figure.post-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: none; }

/* ── Inside a post: CTA bands ────────────────────────────────────── */
/* A midnight panel on the white article, with an indigo rail, so a reader
   scrolling past cannot mistake it for more body text. */
.post-body .post-cta {
  margin: 56px 0;
  padding: 30px 32px 0;
  background: var(--ink);
  border-left: 4px solid var(--indigo);
  color: var(--paper);
}
.post-body .post-cta p { margin: 0; color: inherit; }
.post-body .post-cta .post-cta-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A5B4FC;
  margin: 0 0 12px;
}
.post-body .post-cta .post-cta-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.28);
}
.post-body .post-cta .post-cta-heading {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 10px;
  max-width: 620px;
}
.post-body .post-cta .post-cta-text {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
  margin: 0 0 22px;
  max-width: 620px;
}
.post-body .post-cta-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.post-body .post-cta a.btn { border: 1.5px solid; text-decoration: none; }
.post-body .post-cta a.btn-primary,
.post-body .post-cta a.btn-primary:hover { color: var(--paper); border-color: var(--indigo); }
.post-body .post-cta a.btn-primary:hover { border-color: var(--indigo-deep); }
.post-body .post-cta a.btn-light-outline { color: var(--paper); border-color: rgba(255, 255, 255, 0.4); }
.post-body .post-cta a.btn-light-outline:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); }
/* The fact line reads like a status bar along the bottom of the panel. */
.post-body .post-cta .post-cta-fact {
  display: flex;
  gap: 10px;
  margin: 0 -32px;
  padding: 14px 32px 16px;
  border-top: 1px solid var(--rule-dark);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
.post-body .post-cta .post-cta-fact::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  background: var(--indigo);
}

/* ── Inside a post: figures ──────────────────────────────────────── */
.post-body .post-figure { margin: 32px 0 44px; }
.post-body .post-figure p { margin: 0; }
.post-body .post-figure img { display: block; width: 100%; height: auto; margin: 0; }
.post-body .post-figure--photo img { aspect-ratio: 16 / 9; object-fit: cover; background: var(--cream); }
.post-body .post-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
}
.post-body .shot-frame { background: var(--bone); border: 1px solid var(--rule); }
.post-body .shot-frame .shot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.post-body .shot-frame .shot-bar::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--indigo);
}

/* On a wide screen, bands, the cover and figures step out past the text
   column, which is what makes them read as breaks. On a phone they run to the
   edges of the screen. */
@media (min-width: 1000px) {
  .post-body .post-cta,
  .post-body .post-figure,
  .post-body .figure.post-cover { margin-left: -96px; margin-right: -96px; }
  .post-body .post-cta { padding: 36px 48px 0; }
  .post-body .post-cta .post-cta-fact { margin: 0 -48px; padding: 14px 48px 16px; }
  .post-body .post-cta .post-cta-heading { font-size: 28px; }
}
@media (max-width: 720px) {
  .post-body .post-cta {
    margin: 44px -20px;
    padding: 26px 20px 0;
    border-left: none;
    border-top: 4px solid var(--indigo);
  }
  .post-body .post-cta .post-cta-heading { font-size: 23px; }
  .post-body .post-cta .post-cta-fact { margin: 0 -20px; padding: 12px 20px 14px; }
  .post-body .post-figure,
  .post-body .figure.post-cover { margin-left: -20px; margin-right: -20px; }
  .post-body .post-figure figcaption { padding: 0 20px; }
  .post-body .post-figure--diagram .dg { border-left: none; border-right: none; }
}

/* ── Diagrams ────────────────────────────────────────────────────── */
.post-body .dg {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  padding: 26px 28px 28px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
.post-body .dg p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.post-body .dg ol,
.post-body .dg ul { list-style: none; margin: 0; padding: 0; }
.post-body .dg li { margin: 0; line-height: 1.5; }
.post-body .dg .dg-title {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 20px;
}
.post-body .dg .dg-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--slate);
}
.src-beacon { --src: var(--suite-beacon); }
.src-cnx { --src: var(--suite-cnx); }
.src-alma { --src: var(--suite-alma); }
.src-email { --src: var(--suite-email); }
.src-os { --src: var(--suite-os); }
@media (max-width: 720px) { .post-body .dg { padding: 22px 20px 24px; } }

/* What feeds one record: five sources over one midnight record bar. */
.post-body .dg-src-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.post-body .dg-src {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 14px;
  background: var(--bone);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--src);
}
.post-body .dg-src::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -19px;
  width: 1px;
  height: 18px;
  background: var(--rule-2);
}
.post-body .dg-src-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.post-body .dg-src-name::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--src); }
.post-body .dg-src-what { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.post-body .dg-record {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin-top: 18px;
  padding: 16px 20px;
  background: var(--ink);
  border-left: 4px solid var(--indigo);
}
.post-body .dg .dg-record-name { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 17px; color: var(--paper); }
.post-body .dg .dg-record-note { font-size: 13.5px; color: rgba(255, 255, 255, 0.74); }
@media (max-width: 860px) {
  .post-body .dg-src-list { grid-template-columns: 1fr 1fr; }
  .post-body .dg-src::after { display: none; }
}
@media (max-width: 520px) { .post-body .dg-src-list { grid-template-columns: 1fr; } }

/* A sample timeline: one record, newest event first. */
.post-body .dg-tl-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}
.post-body .dg-tl-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.post-body .dg .dg-tl-name { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 18px; }
.post-body .dg .dg-tl-meta { font-size: 13px; color: var(--slate); }
.post-body .dg-tl li {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: baseline;
  padding: 11px 0 11px 20px;
  border-bottom: 1px solid var(--rule);
}
.post-body .dg-tl li:last-child { border-bottom: none; padding-bottom: 0; }
.post-body .dg-tl li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--src);
}
.post-body .dg-tl-src {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}
.post-body .dg-tl-what { color: var(--ink); }
.post-body .dg-tl-when { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--slate-2); white-space: nowrap; }
@media (max-width: 640px) {
  .post-body .dg-tl li { grid-template-columns: minmax(0, 1fr) auto; }
  .post-body .dg-tl-when { order: 2; }
  .post-body .dg-tl-what { order: 3; grid-column: 1 / -1; }
}

/* Flows: numbered steps, the last one in indigo. */
.post-body .dg-flow { display: grid; gap: 20px 16px; counter-reset: dgflow; }
.post-body .dg-flow--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.post-body .dg-flow--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.post-body .dg-flow li {
  counter-increment: dgflow;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}
.post-body .dg-flow li::before {
  content: "/" counter(dgflow, decimal-leading-zero);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--indigo-deep);
}
.post-body .dg-flow li.is-final { border-top-color: var(--indigo); }
.post-body .dg-flow-step { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); }
.post-body .dg-flow-note { font-size: 13.5px; line-height: 1.5; color: var(--slate); }
@media (max-width: 860px) {
  .post-body .dg-flow--four,
  .post-body .dg-flow--five { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .post-body .dg-flow--four,
  .post-body .dg-flow--five { grid-template-columns: 1fr; }
}

/* The plans table: numbers set in mono, as on the pricing page. */
.post-body .dg-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-body .dg .dg-plans { display: table; width: 100%; min-width: 420px; margin: 0; border-collapse: collapse; font-size: 15px; }
.post-body .dg-plans th,
.post-body .dg-plans td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--rule); }
.post-body .dg-plans thead th {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  border-bottom: 2px solid var(--ink);
}
.post-body .dg-plans tbody th { font-family: "Manrope", sans-serif; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--rule); }
.post-body .dg-plans td { font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--ink); }

/* A parent account over its sub-accounts. */
.post-body .dg-tree-parent {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 14px 18px;
  background: var(--ink);
  border-left: 4px solid var(--indigo);
  color: var(--paper);
}
.post-body .dg-tree-parent::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 1px;
  height: 12px;
  background: var(--rule-2);
}
.post-body .dg-tree strong { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 16px; }
.post-body .dg-tree-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo-deep);
}
.post-body .dg-tree-parent .dg-tree-label { color: #A5B4FC; }
.post-body .dg-tree-note { font-size: 13.5px; color: var(--slate); }
.post-body .dg-tree-parent .dg-tree-note { color: rgba(255, 255, 255, 0.74); }
.post-body .dg-tree-children {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.post-body .dg-tree-children::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 16.66%;
  right: 16.66%;
  height: 1px;
  background: var(--rule-2);
}
.post-body .dg-tree-children li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bone);
  border: 1px solid var(--rule);
}
.post-body .dg-tree-children li::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 1px;
  height: 12px;
  background: var(--rule-2);
}
@media (max-width: 640px) {
  .post-body .dg-tree-children { grid-template-columns: 1fr; margin-top: 12px; }
  .post-body .dg-tree-children::before,
  .post-body .dg-tree-children li::before,
  .post-body .dg-tree-parent::after { display: none; }
}

/* Pipeline stages, left to right. */
.post-body .dg-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule); }
.post-body .dg-stages li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: var(--bone);
  border-right: 1px solid var(--rule);
}
.post-body .dg-stages li:last-child { border-right: none; }
.post-body .dg-stages li.is-final { background: var(--indigo-tint); }
.post-body .dg-stages li:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -6px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--bone);
  border-top: 1px solid var(--rule-2);
  border-right: 1px solid var(--rule-2);
  transform: translateY(-50%) rotate(45deg);
}
.post-body .dg-stage-num { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--indigo-deep); }
.post-body .dg-stage-name { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); }
.post-body .dg-stage-note { font-size: 13px; color: var(--slate); }
.post-body .dg .dg-stage-aside {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px dashed var(--rule-2);
  font-size: 13.5px;
  color: var(--slate);
}
.post-body .dg-stage-aside .dg-stage-name { margin-right: 8px; font-size: 14px; }
@media (max-width: 640px) {
  .post-body .dg-stages { grid-template-columns: 1fr 1fr; }
  .post-body .dg-stages li:nth-child(2) { border-right: none; }
  .post-body .dg-stages li:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .post-body .dg-stages li::after { display: none; }
}

/* Election timelines: a rail with a dot per date, election day in indigo. */
.post-body .dg-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
.post-body .dg .dg-track-name { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.post-body .dg .dg-track-who { font-size: 13.5px; line-height: 1.5; color: var(--slate); margin-bottom: 18px; }
.post-body .dg-steps li { position: relative; display: grid; gap: 2px; padding: 0 0 16px 26px; }
.post-body .dg-steps li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: -6px;
  width: 2px;
  background: var(--rule);
}
.post-body .dg-steps li:last-child::before { display: none; }
.post-body .dg-steps li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--paper);
}
.post-body .dg-steps li.is-final::after { background: var(--indigo); }
.post-body .dg-date { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500; color: var(--ink); }
.post-body .dg-what { color: var(--ink-2); }
.post-body .dg-steps li.is-final .dg-what { font-weight: 600; color: var(--ink); }
@media (max-width: 720px) { .post-body .dg-tracks { grid-template-columns: 1fr; } }

/* ── Post cards (the hub and related posts) ──────────────────────── */
.post-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  transition: border-color 0.15s;
}
.post-card:hover { border-color: var(--ink); }
.post-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.post-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.post-card:hover .post-card-media img { transform: scale(1.03); }
.post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 20px 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.post-card-meta .sep { color: var(--rule-2); }
.post-card-topic { color: var(--indigo-deep); }
.post-card-title {
  margin: 0;
  padding: 0 20px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.post-card:hover .post-card-title { color: var(--indigo-deep); }
.post-card-dek {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate);
}
.post-card-date {
  margin-top: auto;
  padding: 10px 20px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-2);
}

/* Related posts under an article. */
.related-posts .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .related-posts .related-grid { grid-template-columns: 1fr; } }

/* ── The hub ─────────────────────────────────────────────────────── */
.hub-hero { padding-bottom: 52px; }
.hub-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.hub-nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.hub-nav a:hover { border-color: var(--ink); }
.hub-nav-num { font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500; color: var(--indigo-deep); }
.hub-nav-count { padding: 1px 7px; background: var(--cream); font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--slate); }

.hub-guides { padding: 64px 0; background: var(--ink); color: var(--paper); }
.hub-guides-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 24px; align-items: stretch; }
.hub-guides .eyebrow { color: #A5B4FC; }
.hub-guides-head h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 14px 0 10px;
}
.hub-guides-head p { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); }
.guide-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 24px;
  border: 1px solid var(--rule-dark);
  border-top: 3px solid var(--indigo);
  background: #131C33;
  color: var(--paper);
  transition: border-color 0.15s;
}
.guide-card:hover { border-color: rgba(255, 255, 255, 0.35); border-top-color: var(--indigo); }
.guide-card-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A5B4FC;
}
.guide-card-title { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.guide-card-dek { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.guide-card-go {
  margin-top: auto;
  padding-top: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 980px) { .hub-guides-inner { grid-template-columns: 1fr 1fr; } .hub-guides-head { grid-column: 1 / -1; } }
@media (max-width: 640px) { .hub-guides { padding: 48px 0; } .hub-guides-inner { grid-template-columns: 1fr; } }

.hub-topic { padding: 72px 0; background: var(--bone); border-bottom: 1px solid var(--rule); }
.hub-topic--tint { background: var(--paper); }
.hub-topic-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; align-items: start; }
.hub-topic-head { position: sticky; top: 96px; }
.hub-topic-index {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo-deep);
}
.hub-topic-head h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 10px 0 12px;
}
.hub-topic-head p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--slate); }
.hub-topic-guide {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.hub-topic-guide:hover { color: var(--indigo-deep); }
.hub-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hub-cards .post-card--lead { grid-column: 1 / -1; }
.post-card--lead .post-card-title { font-size: 24px; }
@media (min-width: 900px) {
  .hub-cards .post-card--lead {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    row-gap: 10px;
  }
  .hub-cards .post-card--lead > * { grid-column: 2; }
  .hub-cards .post-card--lead .post-card-media { grid-column: 1; grid-row: 1 / span 4; aspect-ratio: auto; height: 100%; min-height: 260px; }
  .hub-cards .post-card--lead .post-card-meta { padding-top: 24px; }
  .hub-cards .post-card--lead .post-card-dek { -webkit-line-clamp: 4; }
}
@media (max-width: 900px) {
  .hub-topic-grid { grid-template-columns: 1fr; gap: 28px; }
  .hub-topic-head { position: static; }
}
@media (max-width: 640px) {
  .hub-topic { padding: 52px 0; }
  .hub-cards { grid-template-columns: 1fr; gap: 20px; }
}