/* ============================================================
   OG Academy — Blog
   Values match the site: Playfair for display, Inter body,
   purple-900 dark canvas, beige-50 light canvas, 18px card radius.
   ============================================================ */
.blog-body { background: var(--og-purple-900); margin: 0; overflow-x: hidden; }
.blog-body ::selection { background: var(--og-gold-500); color: var(--og-purple-900); }
.blog-container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.blog-container--narrow { max-width: 1200px; }
.blog-topic { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--og-gold-700); }
.blog-topic--gold { color: var(--og-gold-300); letter-spacing: 0.18em; }
.blog-btn { display: block; text-align: center; font-family: var(--font-body); font-size: 14px; font-weight: 600; background: var(--accent); color: var(--accent-ink); padding: 13px 24px; border-radius: 10px; text-decoration: none; box-shadow: var(--shadow-gold); }
.blog-btn--inline { display: inline-block; font-size: 15px; padding: 15px 28px; border-radius: 12px; }

/* ---------- hero (index + topic) ---------- */
.blog-hero { background: var(--og-purple-900); color: #fff; padding: 88px 0 64px; }
.blog-hero .og-eyebrow { margin-bottom: 24px; }
.blog-hero__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.015em; color: #fff; max-width: 820px; text-wrap: balance; }
.blog-hero__title em { font-style: italic; color: var(--og-gold-400); }
.blog-hero__intro { margin: 24px 0 0; font-size: 19px; line-height: 1.6; color: var(--fg-on-dark-2); max-width: 600px; }
.blog-chips { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px; }
.blog-chip { display: inline-block; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.16); padding: 9px 16px; border-radius: 999px; text-decoration: none; transition: border-color 160ms ease, color 160ms ease; }
.blog-chip:hover { border-color: var(--og-gold-400); color: var(--og-gold-400); }
.blog-chip.is-active { color: var(--og-purple-900); background: var(--og-gold-500); border-color: var(--og-gold-500); font-weight: 600; }

/* ---------- posts section ---------- */
.blog-posts { background: var(--bg-canvas-light); padding: 80px 0 96px; }
.blog-posts__label { margin-bottom: 20px; }
.blog-card, .blog-featured { display: block; background: #fff; border: 1px solid var(--stroke-on-light); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform 200ms ease, box-shadow 200ms ease; }
.blog-card:hover, .blog-featured:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.blog-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--og-purple-900); overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 58px; height: 40px; background: rgba(28,18,50,0.85); border: 1.5px solid var(--og-gold-500); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.blog-play span { width: 0; height: 0; border-left: 14px solid var(--og-gold-500); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.blog-card__body { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 26px; }
.blog-card__title { font-family: var(--font-display); font-size: 22px; line-height: 1.25; color: var(--og-purple-700); text-wrap: balance; }
.blog-card__excerpt { font-size: 15px; line-height: 1.55; color: var(--fg-on-light-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__meta { font-size: 13px; color: var(--fg-on-light-3); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.blog-featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; margin-bottom: 64px; }
/* Episode thumbnails are 16:9 artwork with titles in them, so the featured card keeps
   that ratio rather than cropping the sides to fill the column. */
.blog-featured .blog-thumb { aspect-ratio: 16 / 9; height: auto; min-height: 0; }
.blog-featured__body { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 48px 52px; }
.blog-featured__title { font-family: var(--font-display); font-size: 38px; line-height: 1.12; letter-spacing: -0.005em; color: var(--og-purple-700); text-wrap: balance; }
.blog-featured__excerpt { font-size: 17px; line-height: 1.6; color: var(--fg-on-light-2); }
.blog-featured__cta { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--og-gold-700); }
.blog-byline { display: flex; align-items: center; gap: 12px; }
.blog-byline__name { font-size: 14px; font-weight: 600; color: var(--fg-on-light); }
.blog-pagination { margin-top: 56px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.blog-page { font-size: 14px; font-weight: 600; color: var(--og-purple-700); width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--stroke-on-light); background: #fff; text-decoration: none; }
.blog-page.is-current { color: #fff; background: var(--og-purple-700); border-color: var(--og-purple-700); }
.blog-page--text { width: auto; border: 0; background: transparent; padding: 10px 14px; }
.blog-page.is-disabled { color: var(--og-ink-400); }

/* ---------- dark bands (email, Market Minutes) ---------- */
.blog-band { background: var(--og-purple-950); color: #fff; padding: 112px 0; }
.blog-band__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; }
.blog-band__grid--wide { grid-template-columns: 1.1fr 0.9fr; }
.blog-band .og-eyebrow { margin-bottom: 18px; }
.blog-band__title { margin: 0; color: #fff; font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 3.8vw, 50px); line-height: 1.06; text-wrap: balance; }
.blog-band__title em { font-style: italic; color: var(--og-gold-400); }
.blog-band__text { margin: 24px 0 0; font-size: 18px; line-height: 1.65; color: var(--fg-on-dark-2); max-width: 540px; }
.blog-band__fine { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--fg-on-dark-3); }
.blog-band__fine a { color: var(--og-gold-400); font-weight: 600; text-decoration: none; }
.blog-band__card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-lg); padding: 40px 36px; }
.blog-band__card--center { border-color: rgba(205,160,89,0.30); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.blog-band .blog-form { margin-top: 36px; max-width: 520px; }
.blog-checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.blog-checklist li { position: relative; padding-left: 38px; font-size: 16px; line-height: 1.5; color: var(--fg-on-dark-2); }
.blog-checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: rgba(205,160,89,0.15); border: 1px solid rgba(205,160,89,0.5); box-sizing: border-box; }
.blog-checklist li::after { content: ""; position: absolute; left: 8px; top: 8px; width: 8px; height: 5px; border-left: 1.6px solid var(--og-gold-400); border-bottom: 1.6px solid var(--og-gold-400); transform: rotate(-45deg); }
.blog-checklist--small { gap: 10px; }
.blog-checklist--small li { padding-left: 30px; font-size: 14px; }
.blog-checklist--small li::before { width: 20px; height: 20px; }
.blog-checklist--small li::after { left: 6px; top: 6px; width: 7px; height: 4px; }
.blog-price { display: flex; align-items: baseline; gap: 8px; }
.blog-price__amount { font-family: var(--font-display); font-size: 40px; line-height: 1; color: #fff; letter-spacing: -0.01em; }
.blog-price__unit { font-size: 15px; color: var(--fg-on-dark-3); }
.blog-price--large .blog-price__amount { font-size: 72px; letter-spacing: -0.02em; }
.blog-price--large .blog-price__unit { font-size: 20px; }

/* ---------- post header ---------- */
.blog-post__header { background: var(--og-purple-900); color: #fff; padding: 64px 0 220px; }
.blog-post__header--episode { padding-bottom: 280px; }
.blog-pill { display: inline-block; margin-bottom: 20px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--og-gold-300); background: rgba(205,160,89,0.12); border: 1px solid rgba(205,160,89,0.35); padding: 7px 14px; border-radius: 999px; }
.blog-crumb { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--og-gold-400); margin-bottom: 28px; }
.blog-crumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.blog-crumb a:last-child, .blog-crumb span:last-child { color: var(--og-gold-400); }
.blog-crumb__sep { color: rgba(255,255,255,0.25); }
.blog-post__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4vw, 56px); line-height: 1.06; letter-spacing: -0.012em; color: #fff; max-width: 860px; text-wrap: balance; }
.blog-post__dek { margin: 24px 0 0; font-size: 20px; line-height: 1.55; color: var(--fg-on-dark-2); max-width: 720px; }
.blog-byline--header { margin-top: 36px; gap: 14px; }
.blog-byline--header div { display: flex; flex-direction: column; gap: 2px; }
.blog-byline--header .blog-byline__name { color: #fff; }
.blog-byline__role { font-weight: 400; color: var(--fg-on-dark-3); }
.blog-byline__meta { font-size: 13px; color: var(--fg-on-dark-3); }
.blog-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; border: 1.5px solid rgba(205,160,89,0.5); flex-shrink: 0; }
.blog-avatar--large { width: 72px; height: 72px; border: 0; }

/* ---------- post body ---------- */
/* flow-root stops the media's negative margin collapsing through the section, which would drag the
   cream background up over the hero and hide the overlap. */
.blog-post__body { display: flow-root; background: var(--bg-canvas-light); padding: 0 0 96px; }
.blog-post__image { margin-top: -140px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.16); box-shadow: var(--shadow-xl); aspect-ratio: 21 / 9; background: var(--og-purple-900); }
.blog-post__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-player { position: relative; margin-top: -200px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.16); box-shadow: var(--shadow-xl); aspect-ratio: 16 / 9; background: var(--og-purple-950); }
.blog-player img, .blog-player iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.blog-player iframe { position: absolute; inset: 0; }
.blog-player::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,10,32,0) 55%, rgba(17,10,32,0.55) 100%); pointer-events: none; }
.blog-player.is-playing::after, .blog-player.is-playing .blog-play, .blog-player.is-playing .blog-player__label, .blog-player.is-playing img { display: none; }
.blog-play--large { width: 92px; height: 64px; border-radius: 18px; border-width: 2px; cursor: pointer; z-index: 2; padding: 0; }
.blog-play--large span { border-left-width: 22px; border-top-width: 14px; border-bottom-width: 14px; margin-left: 6px; }
.blog-player__label { position: absolute; left: 28px; bottom: 24px; z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--og-gold-300); }
.blog-post__grid { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 720px) 320px; gap: 80px; align-items: start; justify-content: space-between; }
.blog-article { font-size: 18px; line-height: 1.7; color: var(--og-ink-700); }
.blog-article__label { margin-bottom: 20px; }
.blog-article p { margin: 0 0 18px; }
.blog-article h2 { margin: 44px 0 16px; font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: -0.005em; color: var(--og-purple-700); }
.blog-article h3 { margin: 32px 0 12px; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.25; color: var(--og-purple-700); }
.blog-article ul, .blog-article ol { margin: 0 0 24px; padding-left: 24px; }
.blog-article li { margin-bottom: 10px; }
.blog-article strong { font-weight: 600; color: var(--og-ink-800); }
.blog-article a { color: var(--og-gold-700); text-decoration: none; border-bottom: 1px solid rgba(168,130,69,0.4); }
.blog-article a:hover { color: var(--og-gold-400); }
.blog-table { border: 1px solid var(--stroke-on-light); border-radius: 12px; overflow-x: auto; background: #fff; margin: 0 0 28px; }
.blog-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.blog-table th { text-align: left; padding: 12px 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-on-light-3); font-weight: 500; background: var(--og-purple-50); border-bottom: 1px solid var(--stroke-on-light); }
.blog-table td { padding: 12px 16px; border-bottom: 1px solid rgba(23,23,23,0.06); color: var(--fg-on-light-2); vertical-align: top; }
.blog-table td:first-child { font-weight: 600; color: var(--og-ink-800); }
.blog-table tr:last-child td { border-bottom: 0; }
.blog-callout { background: var(--og-purple-50); border: 1px solid rgba(74,54,115,0.14); border-radius: 12px; padding: 24px 28px; margin: 0 0 28px; display: flex; flex-direction: column; gap: 8px; }
.blog-callout .blog-topic { color: var(--og-purple-600); }
.blog-callout p { margin: 0; font-size: 17px; line-height: 1.6; }
.blog-pullquote { margin: 32px 0; padding: 28px 0; border-top: 1px solid rgba(205,160,89,0.45); border-bottom: 1px solid rgba(205,160,89,0.45); font-family: var(--font-display); font-style: italic; font-size: 28px; line-height: 1.35; color: var(--og-purple-700); text-wrap: balance; }
.blog-figure { margin: 32px 0; }
.blog-figure img { width: 100%; height: auto; border-radius: 12px; display: block; }
.blog-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--fg-on-light-3); }
.blog-compliance { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--stroke-on-light); font-size: 13px; line-height: 1.5; color: var(--fg-on-light-3); }
.blog-author { margin-top: 48px; display: flex; gap: 22px; align-items: center; background: #fff; border: 1px solid var(--stroke-on-light); border-radius: var(--radius-lg); padding: 28px 32px; }
.blog-author div { display: flex; flex-direction: column; gap: 6px; }
.blog-author__name { font-family: var(--font-display); font-size: 24px; line-height: 1.2; color: var(--og-purple-700); }
.blog-author__bio { font-size: 15px; line-height: 1.55; color: var(--fg-on-light-2); }
.blog-author__bio a { color: var(--og-gold-700); font-weight: 600; text-decoration: none; }

/* ---------- sidebar ---------- */
.blog-sidebar { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 100px; }
.blog-toc summary { list-style: none; cursor: default; margin-bottom: 16px; }
.blog-toc summary::-webkit-details-marker { display: none; }
.blog-toc__list { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--stroke-on-light); }
.blog-toc__list a { display: block; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--fg-on-light-3); text-decoration: none; }
.blog-toc__list a:hover { color: var(--og-ink-800); border-left-color: var(--og-gold-500); font-weight: 500; }
.blog-side-card { background: var(--og-purple-900); border: 1px solid rgba(205,160,89,0.30); border-radius: var(--radius-lg); padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; color: #fff; }
.blog-side-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-on-dark-2); }
.blog-side-card__title { font-family: var(--font-display); font-size: 24px; line-height: 1.2; color: #fff; text-wrap: balance; }
.blog-side-card .blog-side-card__fine { font-size: 12px; color: var(--fg-on-dark-3); }

/* ---------- related ---------- */
.blog-related { background: var(--bg-canvas-light); padding: 0 0 96px; }
.blog-post__body + .blog-related { margin-top: -32px; }
.blog-band + .blog-related { padding-top: 96px; }
.blog-related__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.blog-related__head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.15; color: var(--og-purple-700); }
.blog-related__head a { font-size: 15px; font-weight: 600; color: var(--og-gold-700); text-decoration: none; }

/* ---------- Kajabi form inside blog pages ---------- */
.blog-form .kajabi-form-wrapper { max-width: none; }
/* The sidebar card is 320px wide; the global Kajabi form CSS lays this
   form's fields out as a nowrap row, which collapses inside that width. */
.blog-side-card .form-id-2149467111 #kajabi-form fieldset { flex-direction: column !important; }
.blog-side-card .form-id-2149467111 #kajabi-form fieldset button { width: 100% !important; }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  /* colors_and_type.css forces section, h1–h3, blockquote and img styles
     with !important under 900px. Any blog rule touching the padding or
     font-size of those elements loses to that global rule unless it also
     carries !important — specificity does not matter once one side has
     it and the other does not. */
  .blog-container { padding: 0 20px; }
  .blog-hero { padding: 48px 0 40px !important; }
  .blog-hero__title { font-size: 36px !important; }
  .blog-posts { padding: 48px 0 64px !important; }
  .blog-grid, .blog-featured, .blog-band__grid, .blog-band__grid--wide { grid-template-columns: 1fr !important; gap: 24px !important; }
  .blog-featured .blog-thumb { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
  .blog-featured__body { padding: 24px 22px 28px; }
  .blog-featured__title { font-size: 28px !important; }
  .blog-band { padding: 64px 0 !important; }
  .blog-band__title { font-size: 30px !important; }
  .blog-post__header { padding: 40px 0 120px !important; }
  .blog-post__header--episode { padding-bottom: 140px !important; }
  .blog-post__title { font-size: 36px !important; }
  .blog-post__image, .blog-player { margin-top: -80px; border-radius: 14px; }
  .blog-post__image { aspect-ratio: 16 / 10; }
  .blog-post__image img, .blog-thumb img, .blog-player img { height: 100% !important; }
  .blog-post__body { padding: 0 0 64px !important; }
  .blog-post__grid { margin-top: 28px; display: flex !important; flex-direction: column; align-items: stretch; gap: 36px !important; }
  .blog-sidebar { display: contents; }
  .blog-toc { order: -1; }
  .blog-sidebar .blog-side-card { order: 2; margin-top: 0; }
  .blog-toc { background: #fff; border: 1px solid var(--stroke-on-light); border-radius: 12px; padding: 14px 16px; }
  .blog-toc summary { margin: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .blog-toc summary::after { content: ""; width: 8px; height: 8px; border-right: 1.6px solid var(--og-gold-700); border-bottom: 1.6px solid var(--og-gold-700); transform: rotate(45deg); margin-right: 4px; }
  .blog-toc[open] summary { margin-bottom: 12px; }
  .blog-toc[open] summary::after { transform: rotate(-135deg); }
  /* img.blog-avatar, not .blog-avatar: colors_and_type.css's mobile
     img:not([style*="object-fit"]) rule has specificity (0,1,1) — a bare
     class selector (0,1,0) loses the !important tie-break on specificity. */
  img.blog-avatar { height: 44px !important; }
  img.blog-avatar--large { height: 72px !important; }
  .blog-play--large { width: 64px; height: 44px; border-radius: 12px; }
  .blog-play--large span { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; margin-left: 4px; }
  .blog-article { font-size: 17px; }
  .blog-article h2 { font-size: 27px !important; margin: 36px 0 12px; }
  .blog-article h3 { font-size: 22px !important; }
  .blog-pullquote { font-size: 23px !important; padding: 22px 0; }
  .blog-table table { min-width: 520px; }
  .blog-author { padding: 20px; gap: 16px; }
  .blog-related { padding: 0 0 64px !important; }
  .blog-band + .blog-related { padding-top: 64px !important; }
  .blog-related__head { flex-direction: column; gap: 8px; }
  .blog-related__head h2 { font-size: 28px !important; }
}

@media (max-width: 600px) {
  /* The breadcrumb already says which episode this is, and on a narrow player the label runs into the artwork. */
  .blog-player__label { display: none; }
}