/* Blog single — Knowledge Hub redesign (dark frame, light reading surface) */

@font-face {
      font-family: 'SGAlt';
      src: url('../fonts/SpaceGrotesk-Regular.woff') format('woff');
      font-weight: 400;
}

@font-face {
      font-family: 'SGAlt';
      src: url('../fonts/SpaceGrotesk-SemiBold.woff') format('woff');
      font-weight: 600;
}

@font-face {
      font-family: 'SGAlt';
      src: url('../fonts/SpaceGrotesk-Bold.woff') format('woff');
      font-weight: 700;
}

body.single-post {
      background: #10141d;
}

#post-hub {
      --ink: #10141d;
      --navy: #161b27;
      --card: #1b2232;
      --line: rgba(255,255,255,.08);
      --muted: #96acbc;
      --faint: #5d6b80;
      --blue: #009ee2;
      --yellow: #ffec00;
      --green: #0dc167;

      --paper: #f5f7fa;
      --paper-card: #ffffff;
      --paper-line: #e3e8ef;
      --text: #2a3140;
      --text-soft: #5b6678;
      --text-faint: #8b95a6;
      --a-soft: color-mix(in srgb, var(--a, #009ee2) 9%, transparent);

      font-family: 'SGAlt', sans-serif;
      line-height: 1.6;
      overflow-x: hidden;
      overflow-x: clip;
}

#post-hub a {
      text-decoration: none;
      color: inherit;
}

#post-hub h1,
#post-hub h2,
#post-hub h3 {
      margin: 0;
      font-family: inherit;
}

#post-hub .wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
}

#post-hub .btn-green {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(180deg, #12d975, var(--green));
      color: #04331c;
      font-weight: 700;
      font-size: 16px;
      padding: 15px 28px;
      border-radius: 10px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(13,193,103,.2);
      transition: transform .15s ease;
      white-space: nowrap;
      border: none;
      cursor: pointer;
      font-family: inherit;
}

#post-hub .btn-green:hover {
      transform: translateY(-1px);
}

#post-hub .cube-mark {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 3px;
      transform: rotateZ(30deg) rotateY(35deg) rotateX(-45deg);
      background: linear-gradient(to top, color-mix(in srgb, var(--a) 70%, transparent), var(--a));
      flex: none;
}

#post-hub .hub-badge {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #fff;
      background: color-mix(in srgb, var(--a) 60%, transparent);
      padding: 3px 10px;
      border-radius: 99px;
      white-space: nowrap;
}

/* ── dark intro band ─────────────────────────────────── */

#post-hub .post-intro {
      position: relative;
      color: #fff;
      padding: 40px 0 150px;
      background: var(--ink);
}

#post-hub .post-intro-glow {
      position: absolute;
      top: -260px;
      left: 50%;
      transform: translateX(-55%);
      width: 1200px;
      height: 800px;
      background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 16%, transparent), transparent 70%);
      pointer-events: none;
}

#post-hub .post-intro .wrap {
      position: relative;
      max-width: 860px;
}

#post-hub .crumbs {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 13px;
      color: var(--faint);
      margin-bottom: 26px;
}

#post-hub .crumbs a:hover {
      color: #fff;
}

#post-hub .crumbs .sep {
      opacity: .5;
}

#post-hub .post-intro h1 {
      font-size: clamp(1.9em, 4vw, 2.9em);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -.02em;
      text-wrap: balance;
      margin-bottom: 22px;
      color: #fff;
}

#post-hub .post-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px 24px;
      font-size: 13.5px;
      color: var(--muted);
}

#post-hub .post-meta .avatar {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      color: #fff;
}

#post-hub .post-meta .avatar .av {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue), var(--a));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
}

#post-hub .post-meta .dot {
      opacity: .4;
}

/* ── light reading surface ───────────────────────────── */

#post-hub .paper {
      background: var(--paper);
      color: var(--text);
      padding-bottom: 90px;
}

#post-hub .paper .wrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 56px;
      align-items: start;
}

#post-hub .feat-img {
      /* pulled up over the positioned .post-intro — needs its own stacking context */
      position: relative;
      z-index: 2;
      grid-column: 1 / -1;
      width: 100%;
      max-width: 1000px;
      margin: -120px auto 40px;
}

#post-hub .feat-img img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 16px;
      box-shadow: 0 30px 60px rgba(16,20,29,.35);
}

/* placeholder slot (missing thumbnails) */
#post-hub .img-slot {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      width: 100%;
      height: 100%;
      border-radius: 12px;
      border: 1px dashed color-mix(in srgb, var(--a) 45%, transparent);
      background:
            repeating-linear-gradient(-45deg, color-mix(in srgb, var(--a) 6%, transparent) 0 14px, transparent 14px 28px),
            color-mix(in srgb, var(--a) 8%, #fff);
}

#post-hub .img-slot .slot-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      text-align: center;
}

#post-hub .img-slot .slot-label strong {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--a) 75%, #333);
}

#post-hub .img-slot .slot-label span {
      font-size: 11px;
      color: var(--text-faint);
}

/* ── article body ────────────────────────────────────── */

#post-hub .post-content {
      max-width: 700px;
      font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
      font-size: 18.5px;
      line-height: 1.75;
      color: var(--text);
}

#post-hub .post-content p {
      margin: 0 0 1.35em;
}

#post-hub .post-content > p:first-child {
      font-size: 21px;
      line-height: 1.65;
      color: var(--text-soft);
}

#post-hub .post-content h2 {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: 'SGAlt', sans-serif;
      font-size: 25px;
      font-weight: 700;
      letter-spacing: -.015em;
      line-height: 1.3;
      margin: 1.9em 0 .8em;
      color: #1a2030;
      scroll-margin-top: 90px;
}

#post-hub .post-content h2::before {
      content: '';
      width: 11px;
      height: 11px;
      border-radius: 3px;
      transform: rotateZ(30deg) rotateY(35deg) rotateX(-45deg);
      background: linear-gradient(to top, color-mix(in srgb, var(--a) 70%, transparent), var(--a));
      flex: none;
}

#post-hub .post-content h3 {
      font-family: 'SGAlt', sans-serif;
      font-size: 19px;
      font-weight: 700;
      margin: 1.6em 0 .7em;
      color: #1a2030;
      scroll-margin-top: 90px;
}

#post-hub .post-content a {
      color: var(--a);
      text-decoration: underline;
      text-decoration-color: color-mix(in srgb, var(--a) 40%, transparent);
      text-underline-offset: 3px;
}

#post-hub .post-content a:hover {
      text-decoration-color: var(--a);
}

#post-hub .post-content ul,
#post-hub .post-content ol {
      margin: 0 0 1.35em;
      padding-left: 1.3em;
}

#post-hub .post-content li {
      margin-bottom: .45em;
}

#post-hub .post-content li::marker {
      color: var(--a);
}

#post-hub .post-content blockquote {
      margin: 1.6em 0;
      padding: 18px 24px;
      border-left: 3px solid var(--a);
      border-radius: 0 12px 12px 0;
      background: var(--a-soft);
      font-style: italic;
      color: var(--text-soft);
}

#post-hub .post-content blockquote p {
      margin: 0;
}

#post-hub .post-content img {
      max-width: 100%;
      height: auto;
      border-radius: 12px;
}

#post-hub .post-content figure {
      margin: 2em 0;
      max-width: 100%;
}

#post-hub .post-content figcaption {
      font-family: 'SGAlt', sans-serif;
      font-size: 12.5px;
      color: var(--text-faint);
      text-align: center;
      margin-top: 10px;
}

#post-hub .post-content code {
      font-size: .85em;
      background: #e9edf3;
      border-radius: 5px;
      padding: 2px 6px;
}

#post-hub .post-content pre {
      background: var(--navy);
      color: #dfe7f1;
      border-radius: 12px;
      padding: 20px 24px;
      overflow-x: auto;
      font-size: 14px;
      line-height: 1.6;
}

#post-hub .post-content pre code {
      background: none;
      padding: 0;
}

/* ── tags + share ────────────────────────────────────── */

#post-hub .tags-share {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px;
      max-width: 700px;
      margin-top: 46px;
      padding-top: 26px;
      border-top: 1px solid var(--paper-line);
}

#post-hub .tag-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
}

#post-hub .tag-chips a {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-soft);
      background: var(--paper-card);
      border: 1px solid var(--paper-line);
      padding: 5px 14px;
      border-radius: 99px;
      transition: color .15s, border-color .15s;
}

#post-hub .tag-chips a:hover {
      color: var(--a);
      border-color: color-mix(in srgb, var(--a) 45%, transparent);
}

#post-hub .share {
      display: flex;
      gap: 8px;
}

#post-hub .share a {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--paper-card);
      border: 1px solid var(--paper-line);
      color: var(--text-soft);
      font-size: 14px;
      transition: color .15s, border-color .15s, transform .15s;
}

#post-hub .share a:hover {
      color: var(--a);
      border-color: color-mix(in srgb, var(--a) 45%, transparent);
      transform: translateY(-2px);
}

/* ── author box ──────────────────────────────────────── */

#post-hub .author-box {
      display: flex;
      gap: 18px;
      align-items: center;
      max-width: 700px;
      margin-top: 34px;
      padding: 22px 24px;
      background: var(--paper-card);
      border: 1px solid var(--paper-line);
      border-radius: 14px;
}

#post-hub .author-box .av {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      flex: none;
}

#post-hub .author-box .av img {
      width: 34px;
      height: 34px;
}

#post-hub .author-box b {
      font-size: 15px;
}

#post-hub .author-box p {
      font-size: 13.5px;
      color: var(--text-soft);
      margin: 3px 0 0;
}

#post-hub .author-box p a {
      color: var(--a);
      font-weight: 600;
}

/* ── related ─────────────────────────────────────────── */

#post-hub .related {
      max-width: 700px;
      margin-top: 60px;
}

#post-hub .related h2 {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -.015em;
      color: #1a2030;
      margin-bottom: 20px;
}

#post-hub .related-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
}

#post-hub .rel-card {
      --ra: var(--blue);
      display: flex;
      flex-direction: column;
      background: var(--paper-card);
      border: 1px solid var(--paper-line);
      border-radius: 14px;
      padding: 11px 11px 16px;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#post-hub .rel-card:hover {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--ra) 45%, transparent);
      box-shadow: 0 14px 30px rgba(16,20,29,.08);
}

#post-hub .rel-card .thumb,
#post-hub .rel-card .img-slot {
      aspect-ratio: 16 / 9;
      width: 100%;
      margin-bottom: 12px;
      border-radius: 10px;
      object-fit: cover;
      display: block;
}

#post-hub .rel-card .img-slot {
      border-color: color-mix(in srgb, var(--ra) 40%, transparent);
      background:
            repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ra) 6%, transparent) 0 14px, transparent 14px 28px),
            color-mix(in srgb, var(--ra) 8%, #fff);
}

#post-hub .rel-card .rc-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      color: var(--text-faint);
      padding: 0 5px 6px;
}

#post-hub .rel-card .rc-meta .hub-badge {
      color: var(--ra);
      background: color-mix(in srgb, var(--ra) 12%, transparent);
}

#post-hub .rel-card h3 {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.4;
      color: var(--text);
      padding: 0 5px;
}

/* ── sidebar ─────────────────────────────────────────── */

#post-hub .sidebar {
      position: sticky;
      top: 86px;
      display: flex;
      flex-direction: column;
      gap: 18px;
}

#post-hub .side-card {
      background: var(--paper-card);
      border: 1px solid var(--paper-line);
      border-radius: 14px;
      padding: 20px 22px;
      box-shadow: 0 8px 24px rgba(16,20,29,.04);
}

#post-hub .side-card h3 {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text-faint);
      margin-bottom: 14px;
}

#post-hub .toc {
      display: flex;
      flex-direction: column;
}

#post-hub .toc a {
      position: relative;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text-soft);
      padding: 7px 0 7px 16px;
      border-left: 2px solid var(--paper-line);
      transition: color .15s, border-color .15s;
      line-height: 1.4;
}

#post-hub .toc a:hover {
      color: var(--a);
}

#post-hub .toc a.on {
      color: var(--a);
      border-left-color: var(--a);
}

#post-hub .side-hub {
      display: flex;
      flex-direction: column;
      gap: 12px;
}

#post-hub .side-hub .sh-head {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--text);
}

#post-hub .side-hub a.sh-link {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text-soft);
      line-height: 1.45;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--paper-line);
}

#post-hub .side-hub a.sh-link:last-of-type {
      border-bottom: none;
      padding-bottom: 0;
}

#post-hub .side-hub a.sh-link:hover {
      color: var(--a);
}

#post-hub .side-hub .sh-more {
      font-size: 13px;
      font-weight: 700;
      color: var(--a);
}

/* ── dark CTA band ───────────────────────────────────── */

#post-hub .cta-band {
      background: var(--ink);
      padding: 70px 0;
      color: #fff;
}

#post-hub .cta-band .inner {
      position: relative;
      overflow: hidden;
      text-align: center;
      background:
            radial-gradient(closest-side at 20% 0%, rgba(0,158,226,.16), transparent 60%),
            radial-gradient(closest-side at 85% 100%, rgba(89,54,221,.2), transparent 60%),
            var(--card);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 54px 30px;
}

#post-hub .cta-band h2 {
      font-size: clamp(1.5em, 2.8vw, 2em);
      font-weight: 700;
      letter-spacing: -.02em;
      margin-bottom: 10px;
      text-wrap: balance;
      color: #fff;
}

#post-hub .cta-band p {
      color: var(--muted);
      font-size: 15.5px;
      max-width: 56ch;
      margin: 0 auto 26px;
}

/* ── responsive ──────────────────────────────────────── */

@media (max-width: 991px) {
      #post-hub .paper .wrap {
            grid-template-columns: 1fr;
            gap: 0;
      }

      #post-hub .sidebar {
            position: static;
            margin-top: 50px;
            max-width: 700px;
      }

      #post-hub .side-toc {
            display: none;
      }

      #post-hub .feat-img {
            margin-top: -110px;
      }
}

@media (max-width: 620px) {
      #post-hub .post-intro {
            padding-bottom: 120px;
      }

      #post-hub .crumbs .hub-badge,
      #post-hub .crumbs .sep:last-of-type {
            display: none;
      }

      #post-hub .post-content {
            font-size: 17.5px;
      }

      #post-hub .related-grid {
            grid-template-columns: 1fr;
      }
}

@media (prefers-reduced-motion: reduce) {
      #post-hub * {
            transition: none !important;
      }
}