/* ══════════════════════════════════════════════════════════
   THE SKILL GAP — Custom Theme CSS v2
   Pixel-perfect to match article mockup
   ══════════════════════════════════════════════════════════ */

:root,
html.theme-dark:root {
  --tsg-midnight: #0D1117;
  --tsg-deep: #161B22;
  --tsg-surface: #1C2128;
  --tsg-card: #22272E;
  --tsg-border: #30363D;
  --tsg-gold: #FBC858;
  --tsg-amber: #FBC858;
  --tsg-coral: #FF6B6B;
  --tsg-electric: #4ECDC4;
  --tsg-violet: #A78BFA;
  --tsg-sky: #38BDF8;
  --tsg-white: #F0F6FC;
  --tsg-muted: #8B949E;
  --tsg-subtle: #484F58;
  --tsg-gradient: linear-gradient(135deg, #FF6B6B 0%, #FBC858 30%, #4ECDC4 60%, #A78BFA 100%);
  --tsg-gradient-h: linear-gradient(90deg, #FF6B6B 0%, #FBC858 30%, #4ECDC4 60%, #A78BFA 100%);
  --font-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
  --font-secondary: 'Crimson Pro', Georgia, serif !important;
  --ghost-accent-color: #FBC858 !important;
  --color-background-main: #0D1117 !important;
  --color-content-main: #F0F6FC !important;
  --color-content-secondary: #8B949E !important;
}

/* Override Attila's prefers-color-scheme:dark media query.
   Attila uses html:not(.theme-light):root which is MORE specific
   than our :root selector. This ensures our palette wins on
   mobile devices (and desktops) running system dark mode. */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light):root {
    --color-background-main: #0D1117 !important;
    --color-background-secondary: #161B22 !important;
    --color-background-contrast: #30363D !important;
    --color-background-overlay: rgba(13, 17, 23, 0.9) !important;
    --color-content-lead: #F0F6FC !important;
    --color-content-main: #F0F6FC !important;
    --color-content-secondary: #8B949E !important;
    --ghost-accent-color: #FBC858 !important;
  }
}


/* ── Base ── */

/*
 * CRITICAL: Attila sets overflow-x:hidden on html and body.
 * overflow:hidden on ANY ancestor breaks position:sticky.
 * overflow-x:clip achieves the same visual clipping WITHOUT
 * creating a new scroll context, so sticky still works.
 */
html {
  scroll-behavior: smooth;
  overflow-x: clip !important;
  color-scheme: dark !important;
}

body {
  background-color: #0D1117 !important;
  font-family: 'Space Grotesk', -apple-system, sans-serif !important;
  color: #F0F6FC !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  overflow-x: clip !important;
}

::selection { background: rgba(251, 200, 88, 0.3) !important; color: #F0F6FC !important; }
::-moz-selection { background: rgba(251, 200, 88, 0.3) !important; }

.page-wrapper, .viewport, .container, #index {
  background-color: #0D1117 !important;
}

/* Ensure no ancestor blocks sticky positioning */
.viewport,
.page-wrapper {
  overflow: visible !important;
  overflow-x: clip !important;
}


/* ══════════════════════════════════════
   NAV — Sticky, blurred, branded
   Mockup: padding 20px 32px, sticky top 3px
   Wordmark: Outfit 900, 18px
   Links: Space Grotesk 500, 14px
   Subscribe: Space Grotesk 600, 13px

   IMPORTANT: Attila's base uses position:absolute,
   transform:translate3d(0,-100%,0), flex-direction:column,
   and display:none on .logo. We must override ALL of these.
   ══════════════════════════════════════ */

/* --- Core nav container --- */
.nav-header,
.tsg-nav {
  position: sticky !important;
  top: 3px !important;
  z-index: 50 !important;
  background: rgba(13, 17, 23, 0.93) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #30363D !important;
  padding: 0 !important;
  /* Override Attila's absolute + transform hiding */
  transform: none !important;
  left: auto !important;
  width: 100% !important;
  transition: none !important;
}

/* --- Nav wrapper: horizontal row layout --- */
.nav-header .nav-wrapper {
  padding: 16px 32px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* --- Logo / wordmark: force visible, vertically centred --- */
.nav-header .logo,
.nav-header .tsg-wordmark {
  display: flex !important;
  align-items: center !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

.tsg-wordmark a,
.nav-header .logo a {
  display: flex !important;
  align-items: center !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-size: 18px !important;
  letter-spacing: -0.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  background: var(--tsg-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  padding: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.tsg-wordmark a img,
.logo a img {
  max-height: 24px;
}

/* --- Right-side group: nav links + subscribe --- */
.tsg-nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-left: auto !important;
}

/* --- Nav links list: horizontal, grouped right --- */
.nav-header ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  justify-content: flex-end !important;
  flex-grow: 1 !important;
}

.nav-header li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove Attila's active indicator bar and bullet dots */
.nav-header li a::before,
.nav-header li.active a::before {
  display: none !important;
  content: none !important;
}

/* --- Nav link styling --- */
.nav-header li a,
.nav-header .nav-wrapper ul li a {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #8B949E !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.nav-header li a:hover,
.nav-header li a:focus {
  color: #F0F6FC !important;
}

/* --- Members area: Subscribe button --- */
.nav-members {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  margin-left: 24px !important;
  flex-shrink: 0 !important;
}

.nav-members > * {
  width: auto !important;
}

.tsg-subscribe-btn,
.nav-header a.nav-button-primary {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  background: #FBC858 !important;
  color: #0D1117 !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 6px 16px !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
  height: auto !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.tsg-subscribe-btn:hover,
.nav-header a.nav-button-primary:hover {
  opacity: 0.9 !important;
  color: #0D1117 !important;
}

.nav-button-secondary {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 14px !important;
  color: #8B949E !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* --- Hide "Subscribe" from nav links if it duplicates the button --- */
.nav-header li.nav-subscribe {
  display: none !important;
}

/* --- Hide hamburger menu control (we always show full nav) --- */
.nav-header .nav-wrapper-control {
  display: none !important;
}

/* --- Hide the overlay close button --- */
.nav-close {
  display: none !important;
}

/* --- Hide search icon on nav (clean look) --- */
.nav-search { display: none !important; }


/* ══════════════════════════════════════
   PROGRESS BAR — Rainbow, 3px, fixed top
   ══════════════════════════════════════ */

.progress-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  z-index: 100 !important;
  background: #30363D !important;
}

.progress-bar {
  height: 100% !important;
  background: var(--tsg-gradient-h) !important;
  transition: width 0.1s linear !important;
}


/* ══════════════════════════════════════
   HOMEPAGE — Blog header
   Mockup: Outfit 900, ~72px equivalent
   ══════════════════════════════════════ */

.blog-header,
.tsg-blog-header {
  background: #0D1117 !important;
  padding: 80px 24px 40px !important;
  text-align: center !important;
}

.tsg-blog-header-inner {
  max-width: 720px;
  margin: 0 auto;
}

.tsg-blog-name,
h1.blog-name {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-size: 72px !important;
  letter-spacing: -2px !important;
  text-transform: uppercase !important;
  line-height: 0.95 !important;
  margin: 0 0 16px !important;
  background: var(--tsg-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.tsg-blog-description,
.blog-description {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 18px !important;
  color: #8B949E !important;
  margin: 0 !important;
}

.tsg-blog-divider {
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: var(--tsg-gradient);
  margin: 28px auto 0;
}


/* ══════════════════════════════════════
   HOMEPAGE — Post list
   ══════════════════════════════════════ */

.post-box, article.post {
  border-bottom: 1px solid #30363D !important;
}

.post-box h2, .post-box h2 a, .post-title a {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 28px !important;
  color: #F0F6FC !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
}

.post-box h2 a:hover, .post-title a:hover {
  color: #FBC858 !important;
}

.post-excerpt {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: rgba(240, 246, 252, 0.7) !important;
}

.post-meta {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: #484F58 !important;
}

.post-meta a, .post-meta-tag {
  color: #FBC858 !important;
}

/* Tag-specific colours on index/archive meta links */
.post-meta-tag.tsg-meta-finance { color: #4ECDC4 !important; }
.post-meta-tag.tsg-meta-gaming { color: #A78BFA !important; }
.post-meta-tag.tsg-meta-leadership { color: #FBC858 !important; }
.post-meta-tag.tsg-meta-career { color: #FF6B6B !important; }
.post-meta-tag.tsg-meta-strategy { color: #38BDF8 !important; }


/* ══════════════════════════════════════
   ARTICLE — Header
   Mockup: title 48px Crimson 700
   Tags: 11px pills
   Author: 14px name, 11px date
   ══════════════════════════════════════ */

.tsg-post-header,
.post-header {
  background: #0D1117 !important;
  padding: 60px 24px 40px !important;
  text-align: center !important;
}

.tsg-post-header-inner {
  max-width: 720px;
  margin: 0 auto;
}

/* Tag pills — 11px */
.tsg-tag-pills {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.tsg-tag-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
}

.tsg-tag-muted {
  background: rgba(139, 148, 158, 0.1);
  color: #8B949E;
  border: 1px solid rgba(139, 148, 158, 0.2);
}

.tsg-tag-accent {
  background: rgba(251, 200, 88, 0.1);
  color: #FBC858;
  border: 1px solid rgba(251, 200, 88, 0.2);
}

/* Post title — 48px Crimson Pro 700 */
.tsg-post-title {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 48px !important;
  color: #F0F6FC !important;
  line-height: 1.15 !important;
  margin: 0 0 24px !important;
  letter-spacing: -0.5px;
}

/* Also target Attila's default post title */
.post-header h1.post-title {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 48px !important;
  line-height: 1.15 !important;
}

/* Author meta — 14px name, 11px date */
.tsg-post-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.tsg-author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #FBC858, #FF6B6B);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tsg-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.tsg-avatar-placeholder {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: #0D1117;
}

.tsg-meta-text {
  text-align: left;
}

.tsg-author-name {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #F0F6FC;
}

.tsg-author-name a {
  color: #F0F6FC !important;
  text-decoration: none !important;
}

.tsg-meta-date {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8B949E;
}


/* ══════════════════════════════════════
   ARTICLE — Feature image
   Mockup: max-width 900, 16px radius
   ══════════════════════════════════════ */

.tsg-feature-image {
  max-width: 900px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

.tsg-feature-image img {
  width: 100%;
  border-radius: 16px;
  display: block;
}

.post-header .post-cover {
  border-radius: 16px !important;
  overflow: hidden !important;
}


/* ══════════════════════════════════════
   ARTICLE — Body content
   Mockup: p 17px, line-height 1.95
   h2 32px, blockquote 22px
   max-width ~680px
   ══════════════════════════════════════ */

.tsg-post-content,
.post-content {
  font-family: 'Space Grotesk', sans-serif !important;
  color: #F0F6FC !important;
  background: #0D1117 !important;
}

/* Paragraphs — 17px */
.tsg-post-content p,
.post-content p {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;
  color: rgba(240, 246, 252, 0.9) !important;
  margin: 0 0 24px !important;
}

/* H2 in articles — 32px */
.tsg-post-content h2,
.post-content h2 {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 32px !important;
  color: #F0F6FC !important;
  margin: 48px 0 20px !important;
  line-height: 1.3 !important;
}

/* H3 in articles — 24px */
.tsg-post-content h3,
.post-content h3 {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 24px !important;
  color: #F0F6FC !important;
  margin: 40px 0 16px !important;
}

/* Blockquotes — 22px Crimson italic */
.tsg-post-content blockquote,
.post-content blockquote {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-style: italic !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  border-left: 3px solid #FBC858 !important;
  padding: 4px 0 4px 24px !important;
  margin: 32px 0 !important;
  color: rgba(240, 246, 252, 0.85) !important;
  background: none !important;
}

.tsg-post-content blockquote p,
.post-content blockquote p {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-style: italic !important;
  font-size: 22px !important;
  line-height: 1.65 !important;
  color: rgba(240, 246, 252, 0.85) !important;
  margin: 0 !important;
}

/* Links — gold */
.tsg-post-content a,
.post-content a:not(.kg-bookmark-container):not(.kg-bookmark-title) {
  color: #FBC858 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-color: rgba(251, 200, 88, 0.3) !important;
  transition: text-decoration-color 0.2s ease;
}

.tsg-post-content a:hover,
.post-content a:hover {
  text-decoration-color: #FBC858 !important;
}

/* Code */
.tsg-post-content pre,
.post-content pre,
.tsg-post-content code,
.post-content code {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 15px !important;
}

/* Images — 12px radius */
.tsg-post-content img,
.post-content img {
  border-radius: 12px !important;
}


/* ══════════════════════════════════════
   ARTICLE — Post tags footer
   ══════════════════════════════════════ */

.tsg-post-tags {
  padding-top: 32px;
  margin-top: 48px;
  border-top: 1px solid #30363D;
}

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

.post-footer .post-tags {
  font-family: 'Space Grotesk', sans-serif !important;
}


/* ══════════════════════════════════════
   ARTICLE — Author card
   Mockup: name 16px, bio 14px, 56px avatar
   ══════════════════════════════════════ */

.tsg-author-card {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 40px;
  padding: 28px 32px;
  background: #1C2128;
  border-radius: 16px;
  border: 1px solid #30363D;
}

.tsg-author-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #FBC858, #FF6B6B);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tsg-author-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsg-avatar-placeholder-lg {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: #0D1117;
}

.tsg-author-card-name {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #F0F6FC;
}

.tsg-author-card-name a {
  color: #F0F6FC !important;
  text-decoration: none !important;
}

.tsg-author-card-bio {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: #8B949E;
  margin: 4px 0 0;
  line-height: 1.6;
}


/* ══════════════════════════════════════
   ARTICLE — Read Next card
   Mockup: label 10px mono, title 24px Crimson
   ══════════════════════════════════════ */

.tsg-post-nav {
  margin-top: 48px;
}

.tsg-read-next {
  display: block;
  padding: 24px 28px;
  background: #22272E;
  border-radius: 16px;
  border: 1px solid #30363D;
  text-decoration: none !important;
  transition: transform 0.3s ease, border-color 0.3s ease;
  margin-bottom: 12px;
}

.tsg-read-next:hover {
  transform: translateY(-3px);
  border-color: rgba(251, 200, 88, 0.4);
}

.tsg-read-next-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #8B949E;
  margin-bottom: 8px;
}

.tsg-read-next-title {
  display: block;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  color: #F0F6FC;
  line-height: 1.3;
}

/* Hide Attila's default post-nav */
.post-nav { display: none !important; }


/* ══════════════════════════════════════
   FOOTER
   Mockup: wordmark 16px Outfit, copy 11px mono
   ══════════════════════════════════════ */

.nav-footer {
  display: none !important;
}

.tsg-footer {
  border-top: 1px solid #30363D;
  padding: 32px 24px;
  text-align: center;
  background: #0D1117;
}

.tsg-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tsg-footer-wordmark {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  background: var(--tsg-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tsg-footer-copy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #484F58;
  letter-spacing: 1px;
}


/* ══════════════════════════════════════
   GENERAL OVERRIDES
   ══════════════════════════════════════ */

/* All headings except blog name */
h1:not(.blog-name):not(.tsg-blog-name):not(.tsg-post-title),
h2, h3, h4, h5, h6 {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: #F0F6FC !important;
}

.pagination {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  color: #484F58 !important;
}

a { transition: color 0.2s ease; }

/* Ghost members portal button override */
[data-members-form] button,
.gh-portal-btn-main {
  background: #FBC858 !important;
  color: #0D1117 !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

/* Attila's post info labels */
.post-info,
.post-info-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #8B949E !important;
}

/* Attila's post-info spans on article page */
.post-info .post-type,
.post-info .post-count {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}


/* ══════════════════════════════════════
   MOBILE
   ══════════════════════════════════════ */

/* ──────────────────────────────────────
   MOBILE — Comprehensive Attila overrides
   Attila at ≤640px: hides nav behind hamburger,
   sets flex-direction:column, hardcodes #222426 bg,
   hides logo, makes nav links vertical.
   We override ALL of that to keep our horizontal
   sticky nav with logo + links + subscribe.
   ────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── Nav: prevent Attila from hiding/transforming ── */
  .nav-header {
    position: sticky !important;
    top: 3px !important;
    transform: none !important;
    z-index: 400 !important;
  }

  .nav-header .nav-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(13, 17, 23, 0.85) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    padding: 10px 16px !important;
    flex-wrap: nowrap !important;
  }

  /* Keep logo visible on mobile */
  .nav-header .logo,
  .nav-header .logo.tsg-wordmark {
    display: flex !important;
    margin-right: auto !important;
    flex-shrink: 0 !important;
  }

  /* Hide Attila's hamburger menu control */
  .nav-header .nav-wrapper-control {
    display: none !important;
  }
  .nav-close {
    display: none !important;
  }
  .menu-active .nav-close {
    display: none !important;
  }

  /* Keep nav links horizontal */
  .nav-header ul {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
  }

  .nav-header li {
    margin-right: 0 !important;
  }

  .nav-header li a {
    font-size: 13px !important;
    padding-left: 0 !important;
    color: #F0F6FC !important;
  }

  .nav-header li a:before {
    display: none !important;
  }

  /* Nav right group */
  .tsg-nav-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
  }

  /* Subscribe button: compact on mobile */
  .nav-members {
    width: auto !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }

  .nav-members > * {
    width: auto !important;
  }

  .tsg-subscribe-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* ── Typography ── */
  .tsg-blog-name, h1.blog-name {
    font-size: 42px !important;
  }

  .tsg-post-title, .post-header h1.post-title {
    font-size: 32px !important;
  }

  .tsg-post-content p, .post-content p {
    font-size: 16px !important;
  }

  .tsg-post-content h2, .post-content h2 {
    font-size: 24px !important;
  }

  .tsg-post-content blockquote, .post-content blockquote,
  .tsg-post-content blockquote p, .post-content blockquote p {
    font-size: 18px !important;
  }

  /* ── Layout ── */
  .tsg-post-header {
    padding: 50px 20px 24px !important;
  }

  .tsg-author-card {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }

  .tsg-feature-image { padding: 0 16px; }
  .tsg-feature-image img { border-radius: 12px; }
  .tsg-read-next-title { font-size: 20px; }

  .inner { padding: 0 20px !important; }

  /* ── Colours: override Attila's hardcoded greys ── */
  .page-wrapper,
  .viewport,
  .container,
  #index,
  body {
    background-color: #0D1117 !important;
    color: #F0F6FC !important;
  }

  .post-meta {
    color: #8B949E !important;
  }

  .post-title a,
  .post-header h1.post-title,
  h2.post-title a {
    color: #F0F6FC !important;
  }

  .post-excerpt {
    color: #8B949E !important;
  }
}

@media (max-width: 480px) {
  .tsg-blog-name, h1.blog-name {
    font-size: 32px !important;
  }

  .tsg-post-title, .post-header h1.post-title {
    font-size: 26px !important;
  }

  .tsg-tag-pills { flex-wrap: wrap; }

  /* Even more compact nav */
  .nav-header .nav-wrapper {
    padding: 8px 12px !important;
  }

  .tsg-wordmark {
    font-size: 15px !important;
  }

  .nav-header li a {
    font-size: 12px !important;
  }

  .tsg-subscribe-btn {
    padding: 5px 10px !important;
    font-size: 10px !important;
  }
}


/* ══════════════════════════════════════
   FIGCAPTIONS — Override Attila defaults
   Mockup: JetBrains Mono 11px, centred, muted
   ══════════════════════════════════════ */

.tsg-post-content figcaption,
.post-content figcaption,
.post-content figure figcaption {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: #8B949E !important;
  text-align: center !important;
  margin-top: 10px !important;
  letter-spacing: 0.5px !important;
  line-height: 1.6 !important;
  padding: 0 !important;
  position: static !important;
  max-width: none !important;
}

/* Remove Attila's figcaption ::after underline */
.tsg-post-content figcaption::after,
.post-content figcaption::after,
.post-content figure figcaption::after {
  display: none !important;
  content: none !important;
}

/* Wide/full image figcaptions — keep centred */
.post-content .kg-image-card.kg-width-wide figcaption,
.post-content .kg-image-card.kg-width-full figcaption,
.post-content .kg-gallery-card figcaption {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.post-content .kg-image-card.kg-width-wide figcaption::after,
.post-content .kg-image-card.kg-width-full figcaption::after,
.post-content .kg-gallery-card figcaption::after {
  display: none !important;
}


/* ══════════════════════════════════════
   UTILITY — Inline colour classes
   Usage: <span class="tsg-gold">text</span>
   ══════════════════════════════════════ */

.tsg-gold { color: #FBC858 !important; font-weight: 500; }
.tsg-amber { color: #FBC858 !important; font-weight: 500; }
.tsg-coral { color: #FF6B6B !important; font-weight: 500; }
.tsg-electric { color: #4ECDC4 !important; font-weight: 500; }
.tsg-violet { color: #A78BFA !important; font-weight: 500; }
.tsg-sky { color: #38BDF8 !important; font-weight: 500; }


/* ══════════════════════════════════════
   CALLOUT BOX — Decorative highlight card
   Mockup: surface bg, border, 16px radius,
   3px rainbow gradient top bar, centred text
   Usage: wrap in HTML card with class="tsg-highlight"
   ══════════════════════════════════════ */

.tsg-highlight {
  background: #1C2128 !important;
  border: 1px solid #30363D !important;
  border-radius: 16px !important;
  padding: 36px 40px !important;
  margin: 48px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.tsg-highlight::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: var(--tsg-gradient) !important;
}

.tsg-highlight p:first-of-type {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: #F0F6FC !important;
  margin: 0 !important;
  text-align: center !important;
}

.tsg-highlight p:last-of-type:not(:first-of-type) {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-size: 22px !important;
  font-style: italic !important;
  color: #FBC858 !important;
  margin: 16px 0 0 !important;
  text-align: center !important;
  opacity: 0.8;
}

/* Also style Ghost's built-in callout card to match */
.kg-callout-card {
  background: #1C2128 !important;
  border: 1px solid #30363D !important;
  border-radius: 16px !important;
  padding: 28px 32px !important;
  color: #F0F6FC !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.kg-callout-card .kg-callout-text {
  color: #F0F6FC !important;
  font-family: 'Space Grotesk', sans-serif !important;
}


/* ══════════════════════════════════════
   TAG-SPECIFIC ACCENT COLOURS
   Uses Ghost's tag accent_color via inline style
   Fallback classes for common categories
   ══════════════════════════════════════ */

/* Dynamic tag pill — accepts inline style for bg/color/border */
.tsg-tag-pill[style] {
  text-decoration: none;
}

/* Named tag colour classes */
.tsg-tag-finance {
  background: rgba(78, 205, 196, 0.1) !important;
  color: #4ECDC4 !important;
  border: 1px solid rgba(78, 205, 196, 0.2) !important;
}

.tsg-tag-gaming {
  background: rgba(167, 139, 250, 0.1) !important;
  color: #A78BFA !important;
  border: 1px solid rgba(167, 139, 250, 0.2) !important;
}

.tsg-tag-leadership {
  background: rgba(251, 200, 88, 0.1) !important;
  color: #FBC858 !important;
  border: 1px solid rgba(251, 200, 88, 0.2) !important;
}

.tsg-tag-career {
  background: rgba(255, 107, 107, 0.1) !important;
  color: #FF6B6B !important;
  border: 1px solid rgba(255, 107, 107, 0.2) !important;
}

.tsg-tag-strategy {
  background: rgba(56, 189, 248, 0.1) !important;
  color: #38BDF8 !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
}


/* ══════════════════════════════════════
   GHOST CARD OVERRIDES — Dark theme
   ══════════════════════════════════════ */

/* Bookmark cards */
.kg-bookmark-card {
  border: 1px solid #30363D !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #22272E !important;
}

.kg-bookmark-container {
  text-decoration: none !important;
  color: #F0F6FC !important;
  background: #22272E !important;
}

.kg-bookmark-title {
  font-family: 'Crimson Pro', Georgia, serif !important;
  font-weight: 600 !important;
  color: #F0F6FC !important;
}

.kg-bookmark-description {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 14px !important;
  color: #8B949E !important;
}

.kg-bookmark-metadata {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: #484F58 !important;
}

/* Toggle/accordion cards */
.kg-toggle-card {
  background: #1C2128 !important;
  border: 1px solid #30363D !important;
  border-radius: 12px !important;
}

.kg-toggle-heading-text {
  font-family: 'Crimson Pro', Georgia, serif !important;
  color: #F0F6FC !important;
}

/* Button cards */
.kg-button-card .kg-btn {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
}

.kg-button-card .kg-btn-accent {
  background: #FBC858 !important;
  color: #0D1117 !important;
}

/* Header cards */
.kg-header-card {
  background: #161B22 !important;
}

.kg-header-card h2,
.kg-header-card h3 {
  font-family: 'Crimson Pro', Georgia, serif !important;
}

/* Product cards */
.kg-product-card {
  background: #22272E !important;
  border: 1px solid #30363D !important;
  border-radius: 16px !important;
}

/* Gallery */
.kg-gallery-image img {
  border-radius: 12px !important;
}


/* ══════════════════════════════════════
   ATTILA OVERRIDES — Suppress bleed-through
   ══════════════════════════════════════ */

/* Attila's default .inner constrains width — match mockup 680px */
.post-content .inner,
article.post .inner {
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 0 24px 80px !important;
}

/* Attila's default post-header cover */
.post-header {
  background: #0D1117 !important;
}

.post-header .post-cover {
  background: none !important;
}

/* Attila list styling — keep theme consistent */
.tsg-post-content ol,
.tsg-post-content ul,
.post-content ol,
.post-content ul {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.95 !important;
  color: rgba(240, 246, 252, 0.9) !important;
}

.tsg-post-content li::marker,
.post-content li::marker {
  color: #FBC858 !important;
}

/* Attila's mark/highlight */
.tsg-post-content mark,
.post-content mark {
  background: rgba(251, 200, 88, 0.2) !important;
  color: #FBC858 !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
}

/* Attila's hr */
.tsg-post-content hr,
.post-content hr {
  border: none !important;
  height: 1px !important;
  background: #30363D !important;
  margin: 48px 0 !important;
}

/* Attila's table */
.tsg-post-content table,
.post-content table {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 15px !important;
  border-collapse: collapse !important;
}

.tsg-post-content th,
.post-content th {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #8B949E !important;
  border-bottom: 1px solid #30363D !important;
}

.tsg-post-content td,
.post-content td {
  border-bottom: 1px solid rgba(48, 54, 61, 0.5) !important;
  color: rgba(240, 246, 252, 0.9) !important;
}

/* Suppress Attila's theme toggle */
.js-theme,
.theme-toggle {
  display: none !important;
}

/* Suppress Attila's post-nav (we use tsg-post-nav) */
.post-nav {
  display: none !important;
}

/* Suppress Attila's footer (we use tsg-footer) */
.nav-footer {
  display: none !important;
}