/* ==========================================
     FORCE LIGHT MODE (Override System Dark Mode)
     ========================================== */

  :root {
    color-scheme: light only !important;
  }

  /* Override any dark mode media queries */
  @media (prefers-color-scheme: dark) {
    :root,
    html,
    body {
      background-color: #ffffff !important;
      color: #111827 !important;
    }

    /* Reset common dark mode overrides */
    .gh-head,
    .site-main,
    .gh-content,
    article,
    .post-feed,
    .feed,
    .single,
    footer {
      background-color: inherit !important;
      color: inherit !important;
    }
  }

  /* ==========================================
     EDITION THEME CUSTOMIZATIONS
     Charles Blain - Pattern Intelligence
     ========================================== */

  :root {
    /* === LAYOUT === */
    --max-width: 720px;
    --transition-speed: 0.3s;
    --site-bg: transparent;
    --hover-bg: #f8f9fa;

    /* === BRAND (territory-adaptive via body.tag-* overrides) === */
    --primary-color: #3366ff;
    --accent-blue: #285ff4;
    --accent-blue-dark: #1e4fd4;

    /* === STRUCTURAL (non-adaptive) === */
    --color-meta: #1a1f35;             /* dark navy — footer bg */
    --color-shadow-strategy: #4338ca;  /* homepage section title */

    /* === TEXT === */
    --color-text:           #111827;
    --color-text-secondary: #374151;
    --color-text-body:      #4b5563;
    --color-text-muted:     #6b7280;

    /* === SURFACES === */
    --color-bg:           #ffffff;
    --color-surface-card: #fafbff;

    /* === BORDERS === */
    --color-border:        rgba(0, 0, 0, 0.06);
    --color-border-medium: rgba(0, 0, 0, 0.08);

    /* === SEMANTIC === */
    --color-success: #059669;
    --color-danger:  #ef4444;

    /* === FOOTER === */
    --color-footer-text:    #cbd5e1;
    --color-footer-content: #e2e8f0;
    --color-footer-notes:   #94a3b8;
  }

  /* ==========================================
     HIDE ALL DATES (Evergreen Content)
     ========================================== */

  /* Homepage feed dates */
  .feed-date,
  /* Post header dates */
  .single-meta-date,
  /* Calendar block dates on tag/related posts */
  .feed-calendar,
  /* Any Ghost date elements */
  time[datetime],
  .post-date,
  .gh-card-date {
    display: none !important;
  }

  /* Hide separator dots that become lonely after hiding dates */
  .single-meta .single-meta-item:first-child + .single-meta-item::before {
    display: none;
  }

  /* ==========================================
     SEAMLESS BLOCKS (Feedback, Subscribe, Related)
     ========================================== */

  /* Feedback System - Blend with page */
  .feedback-system {
    width: 100%;
    margin: 4rem 0 2rem;
    padding: 2.5rem 0;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .feedback-container {
    max-width: 36rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    background: transparent !important;
  }

  .feedback-title {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.225rem;
    font-weight: 600;
    color: var(--color-text);
  }

  .feedback-buttons {
    display: flex;
    justify-content: center;
    gap: 3rem;
  }

  .feedback-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.75rem;
    border-radius: 8px;
  }

  .feedback-button:hover {
    transform: scale(1.08);
    background: rgba(0, 0, 0, 0.03);
  }

  .feedback-button.selected {
    transform: scale(1.1);
    background: rgba(51, 102, 255, 0.08);
  }

  .feedback-icon {
    margin-bottom: 0.5rem;
    width: 28px;
    height: 28px;
    color: var(--color-text-secondary);
  }

  .feedback-button:hover .feedback-icon,
  .feedback-button.selected .feedback-icon {
    color: var(--primary-color);
  }

  .feedback-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-weight: 500;
  }

  .feedback-message {
    text-align: center;
    margin-top: 1.25rem;
    color: var(--color-success);
    font-weight: 500;
  }

  .feedback-bounce {
    animation: bounce 0.5s;
  }

  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  /* Subscribe Card - Blend with page */
  .subscribe-card {
    max-width: var(--max-width);
    margin: 2rem auto 3rem;
    padding: 2rem 1.5rem;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0;
    text-align: center;
  }

  .subscribe-card-title {
    font-size: 2.4rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--color-text);
  }

  .subscribe-card-description {
    font-size: 1.6rem;
    max-width: 80%;
    margin: 0 auto 2rem;
    color: var(--color-text-body);
    line-height: 1.6;
  }

  .subscribe-card-cta {
    display: inline-block;
    background: var(--primary-color);
    color: white !important;
    padding: 0.875rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s;
    text-decoration: none;
  }

  .subscribe-card-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(51, 102, 255, 0.25);
  }

  /* Related Posts ("You might also like") - Full Width Layout */
  .related-wrapper,
  .related-wrapper.gh-canvas {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    padding-top: 2rem;
    margin-top: 0;
  }

  /* Expand the related posts container to content width */
  .related-wrapper .related-feed {
    max-width: var(--max-width) !important;
    width: 100% !important;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex !important;
    flex-direction: column;
    gap: 0;
  }

  /* Override the global feed block rule for related posts */
  .related-feed.post-feed {
    display: flex !important;
  }

  /* Each related post item - 2-column layout (Title | Reading Time) */
  .related-feed article.feed {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 0.5rem !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-left: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: all 0.2s ease;
  }

  .related-feed article.feed:hover {
    background: rgba(40, 95, 244, 0.04) !important;
    padding-left: 1rem !important;
  }

  .related-feed article.feed:last-child {
    border-bottom: none;
  }

  /* Title - takes up most space */
  .related-feed article.feed .feed-title {
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    color: var(--color-text);
    margin: 0 !important;
    flex: 1;
    transition: color 0.2s ease;
  }

  .related-feed article.feed:hover .feed-title {
    color: var(--accent-blue) !important;
  }

  /* Hide excerpt in related posts */
  .related-feed article.feed .feed-excerpt {
    display: none !important;
  }

  /* Reading time - right aligned */
  .related-feed article.feed .feed-right,
  .related-feed article.feed .feed-length {
    font-size: 1.3rem !important;
    color: var(--color-text-muted);
    white-space: nowrap;
    margin: 0 !important;
    flex-shrink: 0;
  }

  /* Tag pill - injected via JS */
  .related-tag-pill {
    font-size: 1.2rem;
    color: var(--accent-blue);
    background: rgba(40, 95, 244, 0.08);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
    margin-right: 1rem;
    flex-shrink: 0;
  }

  /* Responsive: Stack on mobile */
  @media (max-width: 600px) {
    .related-feed article.feed {
      flex-direction: column !important;
      align-items: flex-start;
      gap: 0.25rem;
    }

    .related-feed article.feed .feed-right {
      align-self: flex-start;
    }
  }

  /* ==========================================
     CUSTOM FOOTER STYLING
     ========================================== */

  .site-footer,
  footer.site-footer,
  footer.gh-foot.site-footer {
    margin-top: 7rem !important;
    padding: 3rem 0 !important;
    background-color: var(--color-meta) !important;
    background-image: none !important;
    color: var(--color-footer-text) !important;
    font-size: 1.8rem;
    text-align: center;
    line-height: 2.3;
    border-top: 3px solid var(--accent-blue, #285ff4) !important;
  }

  .site-footer .footer-content {
    color: var(--color-footer-content) !important;
  }

  .site-footer .footer-notes {
    color: var(--color-footer-notes) !important;
  }

  .footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
  }

  .footer-content {
    font-weight: 500;
    margin-bottom: 1rem;
  }

  .footer-notes {
    font-style: italic;
    opacity: 0.8;
    font-size: 1.5rem;
  }

  .footer-dot {
    display: inline-block;
    margin: 0 0.5rem;
    opacity: 0.6;
  }

  @keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
  }

  .heart-icon {
    color: var(--color-danger);
    display: inline-block;
    margin: 0 0.15rem;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .heart-icon:hover {
    animation: heartbeat 0.8s infinite;
  }

  /* ==========================================
     TAG PAGE ENHANCEMENTS
     ========================================== */

  .tag-description {
    font-size: 1.8rem;
    max-width: 80%;
    margin: 0 auto;
    color: var(--color-text-body);
    line-height: 1.6;
  }

  /* ==========================================
     POST/FEED STYLING
     ========================================== */

  /* Single column feed */
  .post-feed,
  .feed {
    display: block !important;
    margin: 0 auto;
    max-width: var(--max-width) !important;
  }

  /* Post card hover effects */
  article.feed.post {
    margin-bottom: 3rem;
    border-left: 3px solid transparent;
    padding-left: 1rem;
    transition: all var(--transition-speed) ease;
  }

  article.feed.post:hover,
  article.feed.post:focus-within {
    background: rgba(0, 0, 0, 0.015);
    border-left-color: var(--primary-color);
    transform: translateX(0.25rem);
  }

  article.feed.post:hover .feed-title,
  article.feed.post:focus-within .feed-title {
    color: var(--primary-color);
  }

  /* ==========================================
     HOMEPAGE FEED CARD STYLING
     ========================================== */

  /* Feed card container - add spacing */
  article.feed {
    padding: 2rem 1.5rem !important;
    margin-bottom: 2rem !important;
    border-radius: 8px;
    background: transparent;
    transition: all var(--transition-speed) ease;
  }

  article.feed:hover {
    background: rgba(0, 0, 0, 0.02);
  }

  /* Feed card title - match post page sizing */
  .feed-title {
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
    color: var(--color-text);
    transition: color var(--transition-speed) ease;
  }

  article.feed:hover .feed-title {
    color: var(--accent-blue);
  }

  /* Feed card excerpt */
  .feed-excerpt {
    font-size: 1.6rem !important;
    line-height: 1.6 !important;
    color: var(--color-text-body);
    margin-top: 0.5rem !important;
  }

  /* Feed meta (reading time) */
  .feed-length,
  .feed-meta {
    font-size: 1.3rem !important;
    color: var(--color-text-muted);
    margin-top: 1rem !important;
  }

  /* ==========================================
     MENU & HEADER ACCENT STYLING
     ========================================== */

  /* --accent-blue declared in :root above */

  /* Menu links - accent blue on hover */
  nav.gh-head-menu a {
    transition: color 0.2s ease;
  }

  nav.gh-head-menu a:hover {
    color: var(--accent-blue) !important;
  }

  /* Subscribe button already uses accent - ensure consistency */
  .gh-head-btn,
  .gh-btn.gh-primary-btn {
    background-color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
  }

  .gh-head-btn:hover,
  .gh-btn.gh-primary-btn:hover {
    background-color: #1e4fd4 !important;
    border-color: #1e4fd4 !important;
    transform: translateY(-1px);
  }

  /* ==========================================
     POST PAGE HEADER BACKGROUND
     ========================================== */

  /* Solid blue header on POST pages only (not homepage) */
  .post-template .gh-head,
  .page-template .gh-head,
  .tag-template .gh-head {
    background-color: var(--accent-blue) !important;
  }

  .post-template .gh-head-logo,
  .post-template nav.gh-head-menu a,
  .post-template .gh-social a,
  .post-template .gh-portal-signin,
  .page-template .gh-head-logo,
  .page-template nav.gh-head-menu a,
  .page-template .gh-social a,
  .page-template .gh-portal-signin,
  .tag-template .gh-head-logo,
  .tag-template nav.gh-head-menu a,
  .tag-template .gh-social a,
  .tag-template .gh-portal-signin {
    color: white !important;
  }

  .post-template nav.gh-head-menu a:hover,
  .page-template nav.gh-head-menu a:hover,
  .tag-template nav.gh-head-menu a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
  }

  .post-template .gh-head-btn,
  .page-template .gh-head-btn,
  .tag-template .gh-head-btn {
    background-color: white !important;
    color: var(--accent-blue) !important;
    border-color: white !important;
  }

  .post-template .gh-head-btn:hover,
  .page-template .gh-head-btn:hover,
  .tag-template .gh-head-btn:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
  }

  /* ==========================================
     TABLE STYLING
     ========================================== */

  /* Base table styles */
  .gh-content table,
  article table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 1.6rem;
  }

  /* Table header */
  .gh-content table thead th,
  article table thead th {
    text-align: left;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 2px solid var(--accent-blue);
    background: rgba(40, 95, 244, 0.05);
  }

  /* Table cells */
  .gh-content table tbody td,
  article table tbody td {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--color-text-secondary);
  }

  /* Alternating row colors (subtle) */
  .gh-content table tbody tr:nth-child(even),
  article table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
  }

  /* Hover effect */
  .gh-content table tbody tr:hover,
  article table tbody tr:hover {
    background: rgba(40, 95, 244, 0.04);
  }

  /* Responsive tables */
  @media (max-width: 600px) {
    .gh-content table,
    article table {
      font-size: 1.4rem;
    }

    .gh-content table thead th,
    .gh-content table tbody td,
    article table thead th,
    article table tbody td {
      padding: 0.75rem 0.875rem;
    }
  }

  /* ==========================================
     GHOST DEFAULT ELEMENT OVERRIDES
     ========================================== */

  /* Hide duplicate subscription prompts */
  .footer-cta,
  .gh-canvas > [data-portal] {
    display: none !important;
  }

  /* Hide Ghost Portal floating subscribe button */
  .gh-portal-triggerbtn-wrapper {
    display: none !important;
  }

  /* ==========================================
     RESPONSIVE DESIGN
     ========================================== */

  @media (max-width: 768px) {
    :root {
      --max-width: 92%;
    }

    .feedback-buttons {
      gap: 1.5rem;
    }

    .subscribe-card-description,
    .tag-description {
      max-width: 100%;
    }

    .site-footer {
      font-size: 0.9rem;
      padding: 2rem 0;
    }
  }

  @media (max-width: 480px) {
    .feedback-title,
    .subscribe-card-title {
      font-size: 1.25rem;
    }

    .subscribe-card-description {
      font-size: 1rem;
    }

    .feedback-buttons {
      gap: 1rem;
    }

    .feedback-icon {
      width: 24px;
      height: 24px;
    }
  }

  /* ==========================================
     PATTERN LAYER: SHIMMER TAGLINE
     ========================================== */

  .gh-head-description,
  .site-header .site-header-content p {
    background: linear-gradient(
      90deg,
      var(--accent-blue) 0%,
      #7c3aed 25%,
      #ec4899 50%,
      #7c3aed 75%,
      var(--accent-blue) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: cb-shimmer 6s linear infinite;
  }

  @keyframes cb-shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
  }

  /* ==========================================
     PATTERN LAYER: SCROLL PROGRESS BAR
     ========================================== */

  #cb-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-blue), #7c3aed, #ec4899);
    z-index: 10000;
    transition: width 50ms linear;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(40, 95, 244, 0.3);
  }

  /* ==========================================
     PATTERN LAYER: CURSOR SPOTLIGHT
     ========================================== */

  #cb-spotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
      circle at center,
      rgba(40, 95, 244, 0.025) 0%,
      transparent 70%
    );
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease;
    opacity: 0;
    will-change: transform;
  }

  body:hover #cb-spotlight {
    opacity: 1;
  }

  .site-footer:hover ~ #cb-spotlight,
  footer.gh-foot:hover ~ #cb-spotlight {
    opacity: 0;
  }

  /* ==========================================
     PATTERN LAYER: SCROLL REVEAL
     ========================================== */

  .cb-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .cb-reveal.cb-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .cb-reveal:nth-child(2) { transition-delay: 0.06s; }
  .cb-reveal:nth-child(3) { transition-delay: 0.12s; }
  .cb-reveal:nth-child(4) { transition-delay: 0.18s; }
  .cb-reveal:nth-child(5) { transition-delay: 0.24s; }
  .cb-reveal:nth-child(6) { transition-delay: 0.30s; }

  /* ==========================================
     PATTERN LAYER: TERRITORY ACCENT COLORS
     ========================================== */

  body.tag-shadow-strategy {
    --primary-color: #4338ca;
    --accent-blue: #4338ca;
  }

  body.tag-perception-engine {
    --primary-color: #7c3aed;
    --accent-blue: #7c3aed;
  }

  body.tag-momentum-engineering {
    --primary-color: #2563eb;
    --accent-blue: #2563eb;
  }

  body.tag-information-flow {
    --primary-color: #0891b2;
    --accent-blue: #0891b2;
  }

  body.tag-hybrid-intelligence {
    --primary-color: #0369a1;
    --accent-blue: #0369a1;
  }

  body.tag-dashboard-blindness {
    --primary-color: #0e7490;
    --accent-blue: #0e7490;
  }

  body.tag-inverse-wisdom {
    --primary-color: #6366f1;
    --accent-blue: #6366f1;
  }

  /* ==========================================
     PATTERN LAYER: GRADIENT LINK UNDERLINES
     ========================================== */

  .gh-content a:not(.kg-bookmark-container):not(.subscribe-card-cta):not([class*="feedback"]):not([data-portal]) {
    text-decoration: none;
    background-image: linear-gradient(90deg, var(--accent-blue), #7c3aed);
    background-size: 0% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
    padding-bottom: 2px;
  }

  .gh-content a:not(.kg-bookmark-container):not(.subscribe-card-cta):not([class*="feedback"]):not([data-portal]):hover {
    background-size: 100% 2px;
  }

  /* ==========================================
     PATTERN LAYER: SMOOTH PAGE LOAD
     ========================================== */

  body {
    animation: cb-page-in 0.5s ease-out;
  }

  @keyframes cb-page-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* ==========================================
     PATTERN LAYER: CARD TILT SUPPORT
     ========================================== */

  article.feed.post,
  article.feed {
    transform-style: preserve-3d;
  }

  article.feed.post:hover,
  article.feed:hover {
    box-shadow: 0 8px 30px rgba(40, 95, 244, 0.06);
  }

  /* ==========================================
     PATTERN LAYER: AMBIENT SCROLL TINT
     ========================================== */

  #cb-scroll-tint {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--accent-blue);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .gh-head,
  .site-main,
  .site-footer,
  footer.gh-foot {
    position: relative;
    z-index: 2;
  }

  /* ==========================================
     PATTERN LAYER: BLOCKQUOTE TERRITORY ACCENTS
     ========================================== */

  .gh-content blockquote {
    border-left: 3px solid var(--accent-blue);
    background: linear-gradient(
      90deg,
      rgba(40, 95, 244, 0.04) 0%,
      transparent 60%
    );
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    border-radius: 0 6px 6px 0;
    transition: border-color 0.3s ease, background 0.3s ease;
  }

  .gh-content blockquote p {
    color: var(--color-text-secondary);
    font-style: italic;
  }

  body.tag-shadow-strategy .gh-content blockquote {
    background: linear-gradient(90deg, rgba(67, 56, 202, 0.04) 0%, transparent 60%);
  }

  body.tag-momentum-engineering .gh-content blockquote {
    background: linear-gradient(90deg, rgba(234, 88, 12, 0.04) 0%, transparent 60%);
  }

  body.tag-perception-engine .gh-content blockquote {
    background: linear-gradient(90deg, rgba(219, 39, 119, 0.04) 0%, transparent 60%);
  }

  body.tag-dashboard-blindness .gh-content blockquote {
    background: linear-gradient(90deg, rgba(217, 119, 6, 0.04) 0%, transparent 60%);
  }

  body.tag-hybrid-intelligence .gh-content blockquote {
    background: linear-gradient(90deg, rgba(13, 148, 136, 0.04) 0%, transparent 60%);
  }

  body.tag-information-flow .gh-content blockquote {
    background: linear-gradient(90deg, rgba(8, 145, 178, 0.04) 0%, transparent 60%);
  }

  body.tag-inverse-wisdom .gh-content blockquote {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.04) 0%, transparent 60%);
  }

  /* ==========================================
     PATTERN LAYER: TABLE TERRITORY TREATMENT
     ========================================== */

  .gh-content table,
  article table {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  }

  .gh-content table thead th,
  article table thead th {
    background: color-mix(in srgb, var(--accent-blue) 6%, white);
    border-bottom-color: var(--accent-blue);
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .gh-content table tbody tr:hover,
  article table tbody tr:hover {
    background: color-mix(in srgb, var(--accent-blue) 4%, white);
  }

  .gh-content table tbody tr:nth-child(even),
  article table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
  }

  .gh-content table tbody td,
  article table tbody td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .gh-content table tbody tr:last-child td,
  article table tbody tr:last-child td {
    border-bottom: none;
  }

  body.tag-shadow-strategy .gh-content table thead th {
    background: rgba(67, 56, 202, 0.06);
  }
  body.tag-shadow-strategy .gh-content table tbody tr:hover {
    background: rgba(67, 56, 202, 0.04);
  }

  body.tag-momentum-engineering .gh-content table thead th {
    background: rgba(234, 88, 12, 0.06);
  }
  body.tag-momentum-engineering .gh-content table tbody tr:hover {
    background: rgba(234, 88, 12, 0.04);
  }

  body.tag-perception-engine .gh-content table thead th {
    background: rgba(219, 39, 119, 0.06);
  }
  body.tag-perception-engine .gh-content table tbody tr:hover {
    background: rgba(219, 39, 119, 0.04);
  }

  body.tag-dashboard-blindness .gh-content table thead th {
    background: rgba(217, 119, 6, 0.06);
  }
  body.tag-dashboard-blindness .gh-content table tbody tr:hover {
    background: rgba(217, 119, 6, 0.04);
  }

  body.tag-hybrid-intelligence .gh-content table thead th {
    background: rgba(13, 148, 136, 0.06);
  }
  body.tag-hybrid-intelligence .gh-content table tbody tr:hover {
    background: rgba(13, 148, 136, 0.04);
  }

  body.tag-information-flow .gh-content table thead th {
    background: rgba(8, 145, 178, 0.06);
  }
  body.tag-information-flow .gh-content table tbody tr:hover {
    background: rgba(8, 145, 178, 0.04);
  }

  body.tag-inverse-wisdom .gh-content table thead th {
    background: rgba(124, 58, 237, 0.06);
  }
  body.tag-inverse-wisdom .gh-content table tbody tr:hover {
    background: rgba(124, 58, 237, 0.04);
  }

  /* ==========================================
     PATTERN LAYER: HERO ANIMATION
     Homepage only. Everything is JS-driven.
     No @keyframes needed — all animation is
     handled by requestAnimationFrame in the
     footer script.
     ========================================== */

  /* .cover already has position:relative + overflow:hidden from Edition theme.
     We just ensure cover-content text sits above the canvas (z-index 8). */
  body.home-template .cover .cover-content {
    position: relative;
    z-index: 20;
  }

  /* Hero author badge — headshot + name below subscribe form */
  .cb-hero-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 2rem;
  }

  .cb-hero-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
    object-fit: cover;
  }

  .cb-hero-avatar-fallback {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.8rem;
    font-weight: 600;
  }

  .cb-hero-author-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .cb-hero-tagline {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0.5rem 0 1.5rem;
    letter-spacing: 0.01em;
  }

  /* Hide chevron arrow on homepage — funnel pages don't need it */
  body.home-template .cover .cover-arrow {
    display: none !important;
  }

  /* ==========================================
     HOMEPAGE FUNNEL: HIDE DEFAULT FEED
     ========================================== */

  /* Hide pagination and section headers on homepage (feed is now shown natively) */
  body.home-template .post-feed + nav,
  body.home-template .pagination,
  body.home-template .post-feed-title,
  body.home-template .feed-header,
  body.home-template .post-feed-header,
  body.home-template section.outer > .inner > h2 {
    display: none !important;
  }

  /* ==========================================
     HOMEPAGE FUNNEL: FRAMEWORK CARDS
     ========================================== */

  .cb-home-section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 2.5rem;
    font-size: 1.8rem;
    line-height: 1.6;
  }

  .cb-section-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-shadow-strategy);
    margin-bottom: 0.5rem;
  }

  .cb-section-subtitle {
    font-size: 1.8rem;
    color: var(--color-text-muted);
    margin-bottom: 2.5rem;
    line-height: 1.7;
    max-width: 720px;
  }

  /* Framework cards grid — 5 cards in 3-column layout */
  .cb-frameworks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
  }

  /* Center the last card when 5 cards fill a 3-col grid */
  .cb-frameworks-grid > :last-child:nth-child(3n - 1) {
    grid-column-end: -1;
  }

  .cb-frameworks-grid > :last-child:nth-child(3n + 2) {
    grid-column: 2 / 3;
  }

  .cb-framework-card {
    padding: 2rem 2rem 2rem 2.25rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 3px solid var(--card-accent, #285ff4);
    text-decoration: none;
    transition: all 0.25s ease;
    display: block;
    background: var(--color-bg);
  }

  .cb-framework-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--card-accent, #285ff4);
    border-left: 3px solid var(--card-accent, #285ff4);
    background: var(--color-surface-card);
  }

  .cb-framework-card .card-domain {
    font-size: 1.0rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--card-accent, #285ff4);
    margin-bottom: 0.25rem;
  }

  .cb-framework-card .card-label {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
  }

  .cb-framework-card .card-hook {
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 0.75rem;
  }

  .cb-framework-card .card-bridge {
    font-size: 1.35rem;
    color: var(--color-text-muted);
    line-height: 1.6;
  }

  .cb-framework-card:hover .card-hook,
  .cb-framework-card:hover .card-bridge {
    color: var(--color-text-secondary);
  }

  @media (max-width: 900px) {
    .cb-frameworks-grid {
      grid-template-columns: 1fr 1fr;
    }
    .cb-frameworks-grid > :last-child:nth-child(3n + 2) {
      grid-column: auto;
    }
  }

  @media (max-width: 600px) {
    .cb-frameworks-grid {
      grid-template-columns: 1fr;
    }
    .cb-frameworks-grid > :last-child:nth-child(3n + 2) {
      grid-column: auto;
    }
  }

  /* ==========================================
     HOMEPAGE FUNNEL: LATEST POSTS SECTION
     Targets Ghost's native post-feed directly.
     Clean list rows: title left, meta right.
     No cards, no excerpts, no images.
     ========================================== */

  /* Show feed, let gh-canvas handle container width + gutters */
  body.home-template .post-feed {
    display: block !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 2rem;
    margin-bottom: 2rem;
  }

  /* Clean list row */
  body.home-template .post-feed article.feed {
    position: relative;
    display: block !important;
    padding: 1.25rem 12rem 1.25rem 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-left: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    max-width: none !important;
    transition: background 0.2s ease, padding-left 0.2s ease !important;
  }

  body.home-template .post-feed article.feed:last-child {
    border-bottom: none !important;
  }

  body.home-template .post-feed article.feed:hover {
    background: rgba(40, 95, 244, 0.03) !important;
    padding-left: 0.75rem !important;
    transform: none !important;
  }


  /* Post title */
  body.home-template .post-feed .feed-title {
    display: block !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    color: var(--color-text) !important;
    transition: color 0.2s ease;
  }

  body.home-template .post-feed article.feed:hover .feed-title {
    color: var(--accent-blue) !important;
  }

  /* Hide excerpts and images */
  body.home-template .post-feed .feed-excerpt,
  body.home-template .post-feed .feed-media,
  body.home-template .post-feed .feed-image,
  body.home-template .post-feed .feed-cover {
    display: none !important;
  }

  /* Meta (reading time + type badge) pinned right */
  body.home-template .post-feed .feed-meta,
  body.home-template .post-feed .feed-length {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.3rem !important;
    color: var(--color-text-muted) !important;
    white-space: nowrap;
    margin: 0 !important;
  }

  /* Show only 6 posts */
  body.home-template .post-feed article.feed:nth-child(n+7) {
    display: none !important;
  }

  /* ==========================================
     HOMEPAGE FUNNEL: BEST OF CALLOUT
     ========================================== */

  .cb-bestof-callout {
    text-align: center;
    padding: 3rem 2rem;
    margin-bottom: 4rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .cb-bestof-callout h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.75rem;
  }

  .cb-bestof-callout p {
    font-size: 1.8rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.7;
  }

  .cb-bestof-link {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: none;
    padding: 0.75rem 2rem;
    border: 2px solid var(--accent-blue);
    border-radius: 6px;
    transition: all 0.2s ease;
  }

  .cb-bestof-link:hover {
    background: var(--accent-blue);
    color: white;
    transform: translateY(-1px);
  }

  /* ==========================================
     HOMEPAGE FUNNEL: BOTTOM CTA
     ========================================== */

  .cb-bottom-cta {
    text-align: center;
    padding: 4rem 2rem;
    margin-bottom: 2rem;
  }

  .cb-bottom-cta h3 {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.75rem;
  }

  .cb-bottom-cta p {
    font-size: 1.8rem;
    color: var(--color-text-muted);
    max-width: 520px;
    margin: 0 auto 2rem;
    line-height: 1.7;
  }

  .cb-bottom-cta .cb-cta-button {
    display: inline-block;
    background: var(--color-text);
    color: white;
    padding: 0.875rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
  }

  .cb-bottom-cta .cb-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  /* ==========================================
     T4: POST-TYPE CLASSIFICATION
     Badge sits inline in .feed-meta row.
     Label map: pillar=Framework, cluster=Pattern,
                note=Observation, essay=Essay
     Detection: JS reads tag link href on each card.
     ========================================== */

  .cb-type-badge {
    display: inline-block;
    font-size: 1.0rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 0.1rem;
  }

  /* Badge colors adapt to territory via --accent-blue override */
  .cb-type-badge-pillar  {
    color: var(--accent-blue);
    background: rgba(40, 95, 244, 0.08);
    border: 1px solid rgba(40, 95, 244, 0.18);
  }
  .cb-type-badge-cluster { color: var(--accent-blue); background: rgba(40, 95, 244, 0.07); }
  .cb-type-badge-note    { color: var(--color-text-muted); background: var(--color-surface-card); }
  .cb-type-badge-essay   { color: var(--color-text-secondary); background: var(--color-surface-card); }

  /* Framework posts: accent left-border (no background — white image constraint) */
  article.feed.post.cb-type-pillar {
    border-left-color: var(--accent-blue);
  }

  /* ==========================================
     T6: CONTENT WIDTH BY POST TYPE
     Pillar (Framework): 740px — longer form, more breathing room
     Cluster (Pattern) + Note (Observation): 680px — focused measure
     Detection: JS enhancePostPage() finds tag links on post page,
     adds body.cb-width-* class. margin auto REQUIRED for centering.
     ========================================== */

  body.cb-width-pillar  .gh-content {
    max-width: 740px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.cb-width-cluster .gh-content,
  body.cb-width-note    .gh-content {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  @media (max-width: 768px) {
    body.cb-width-pillar  .gh-content,
    body.cb-width-cluster .gh-content,
    body.cb-width-note    .gh-content {
      max-width: 92% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }