/* =====================================================================
   --- V2 DESIGN SYSTEM: "Glass & Glow" ---
   ===================================================================== */
:root {
    /* --- Core Brand & Fonts (Unchanged) --- */
    --md-accent-primary: #2A2A2A;
    --md-font-heading: 'Montserrat', sans-serif;
    --md-font-body: 'Inter', sans-serif;

    /* --- ✨ UPGRADE: Refined Color Palette --- */
    --md-text-dark: #18181B;
    --md-text-secondary: #52525B;
    --md-border-color: #E4E4E7;
    --md-bg-content: #ffffff;
    --md-bg-page: #F9F9FB; /* Off-white body for contrast */

    /* --- Color Tints & Gradients --- */
    --safe-bg-tint: color-mix(in srgb, var(--md-accent-primary) 5%, white);
    --safe-border-tint: color-mix(in srgb, var(--md-accent-primary) 15%, white);
    --md-success-color: #16A34A;
    --md-error-color: #DC2626;

    /* ✨ UPGRADE: Gradient Accents for Depth */
    --md-premium-gradient: linear-gradient(145deg, var(--safe-bg-tint), var(--md-bg-content) 60%);
    --md-glow-accent: linear-gradient(90deg, var(--md-accent-primary), var(--safe-border-tint));

    /* --- Shadows, Radius & Transitions --- */
    --md-radius-sm: 8px;
    --md-radius-md: 16px;
    --md-radius-lg: 24px;
    --md-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.03);
    --md-shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.05);
    --md-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.07), 0 4px 10px rgba(0,0,0,0.05);
    --md-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 1. Global & Helpers --- */
body { background-color: var(--md-bg-page); }
.md-editorial-article { font-family: var(--md-font-body); color: var(--md-text-dark); line-height: 1.8; background: var(--md-bg-content); }
.md-copy-trigger { cursor: copy; position: relative; transition: var(--md-transition); }
.md-copy-trigger:active { transform: scale(0.98); }

/* --- 2. Typography --- */
.md-editorial-heading {
    font-family: var(--md-font-heading);
    font-size: clamp(1.8em, 4vw, 2.4em); /* Slightly larger */
    font-weight: 800;
    position: relative;
    padding-bottom: 12px;
    margin: 2.5em 0 1em;
    color: var(--md-text-dark);
    line-height: 1.2;
}
/* ✨ UPGRADE: Replaced solid line with a sleek gradient underline */
.md-editorial-heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 80px; height: 5px; background: linear-gradient(90deg, var(--md-accent-primary), transparent); border-radius: 5px; }
.md-sub-heading { font-family: var(--md-font-heading); font-size: 1.5em; font-weight: 700; margin-bottom: 1.5em; color: var(--md-text-dark); border-bottom: 1px solid var(--md-border-color); padding-bottom: 0.5em; }
.md-reading-room { font-size: 1.15em; color: var(--md-text-secondary); margin-bottom: 2.5em; max-width: 760px; }


/* =====================================================================
   --- 3. UPGRADED: Table of Contents ---
   ===================================================================== */
.md-index-nav {
    background: var(--md-premium-gradient); /* ✨ UPGRADE: Adds depth */
    border: 1px solid var(--safe-border-tint);
    padding: 2.5em;
    border-radius: var(--md-radius-md);
    margin: 2.5em 0 4em;
    box-shadow: var(--md-shadow-medium);
}
.md-index-title {
    font-family: var(--md-font-heading); font-weight: 700; font-size: 1.4em;
    color: var(--md-text-dark); margin: 0 0 1.5em; display: block;
}
.md-index-nav ol {
    list-style: none; padding: 0; margin: 0; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1em 2em;
}
.md-index-nav li a {
    color: var(--md-text-secondary); text-decoration: none; font-weight: 600;
    transition: var(--md-transition); display: flex; align-items: center;
}
.md-index-nav a:hover { color: var(--md-accent-primary); transform: translateX(5px); }
.md-index-nav a::before {
    content: '→'; margin-right: 0.75em; opacity: 0;
    transition: var(--md-transition); color: var(--md-accent-primary);
}
.md-index-nav a:hover::before { opacity: 1; }

/* --- 4. Callout Box --- */
.md-editorial-aside {
    display: flex; gap: 1.5em; padding: 2em; background-color: var(--safe-bg-tint);
    border-radius: var(--md-radius-md); border-left: 5px solid var(--md-accent-primary);
    margin: 3.5em 0; align-items: flex-start; color: var(--md-text-dark);
}
.md-aside-icon { font-size: 24px; color: var(--md-accent-primary); flex-shrink: 0; margin-top: 2px; }
.md-aside-content p { margin: 0 0 0.8em 0; font-size: 1.1em; font-weight: 500; }
.md-callout-action { font-weight: 700; color: var(--md-accent-primary); text-decoration: none; display: inline-block; }
.md-callout-action:hover { text-decoration: underline; }

/* --- 5. Smart Grid Asset List --- */
.md-asset-collection { margin: 3em 0; }
.md-asset-list { display: grid; gap: 1em; list-style: none; padding: 0; margin: 0; }
.md-grid-full .md-asset-list { grid-template-columns: 1fr; }
.md-grid-medium .md-asset-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.md-grid-compact .md-asset-list { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.md-asset-item {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 1.2em 1.5em; background: var(--md-bg-content);
    border: 1px solid var(--md-border-color); border-radius: var(--md-radius-sm);
    box-shadow: var(--md-shadow-soft);
}
/* ✨ UPGRADE: Replaced simple hover with a more engaging effect */
.md-asset-item:hover {
    border-color: var(--md-accent-primary); box-shadow: var(--md-shadow-hover);
    transform: translateY(-4px);
}
.md-item-text { font-size: 1.05em; line-height: 1.5; font-weight: 500; color: var(--md-text-dark); flex-grow: 1; }
.md-copy-icon { font-size: 1.2em; opacity: 0.3; transition: var(--md-transition); }
.md-asset-item:hover .md-copy-icon { opacity: 1; transform: scale(1.1); color: var(--md-accent-primary); }


/* =====================================================================
   --- 6. UPGRADED: Editor's Top Picks ---
   ===================================================================== */
.md-trophy-case {
    padding: 4em 3em; border-radius: var(--md-radius-lg); margin: 5em 0;
    background: var(--md-premium-gradient); /* ✨ UPGRADE: Premium background */
    border: 1px solid var(--safe-border-tint); position: relative;
    box-shadow: var(--md-shadow-medium); overflow: hidden;
}
.md-trophy-case::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: var(--md-accent-primary);
}
.md-trophy-title {
    color: var(--md-text-dark); text-align: center; margin-top: 0; margin-bottom: 2em;
    font-size: 2em; font-family: var(--md-font-heading);
}
.md-trophy-grid {
    display: grid; gap: 1.5em;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.md-trophy-card {
    background: var(--md-bg-content); padding: 2.5em 2em; border-radius: var(--md-radius-md);
    box-shadow: var(--md-shadow-medium); text-align: center; display: flex;
    flex-direction: column; align-items: center; transition: var(--md-transition);
    position: relative; z-index: 1;
    /* ✨ UPGRADE: Setup for the glow border */
    border: 2px solid transparent;
}
/* ✨ UPGRADE: The "Glow" border effect */
.md-trophy-card::before {
    content: ''; position: absolute; inset: -2px; z-index: -1;
    border-radius: inherit; background: var(--md-glow-accent);
    opacity: 0; transition: var(--md-transition);
}
.md-trophy-card:hover { transform: translateY(-8px); box-shadow: var(--md-shadow-hover); }
.md-trophy-card:hover::before { opacity: 1; }
.md-trophy-badge {
    display: inline-block; background: var(--safe-bg-tint); color: var(--md-accent-primary);
    border: 1px solid var(--safe-border-tint); font-size: 0.85em; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px; padding: 8px 16px;
    border-radius: 30px; margin-bottom: 1.5em;
}
.md-trophy-copy { font-size: 1.2em; line-height: 1.6; color: var(--md-text-dark); margin: 0; font-weight: 500; }

/* --- 7. Pull Quote & Vibe/Bio Stacks --- */
.md-pull-quote { position: relative; margin: 4em auto; padding: 2em; text-align: center; max-width: 800px; }
.md-pull-quote::before { content: '“'; position: absolute; top: -0.2em; left: 50%; transform: translateX(-50%); font-family: var(--md-font-heading); font-size: 8em; color: var(--safe-bg-tint); z-index: -1; }
.md-pull-quote blockquote { font-family: var(--md-font-heading); font-size: clamp(1.5em, 4vw, 2.2em); font-style: italic; font-weight: 600; color: var(--md-text-dark); margin: 0; padding: 0; border: none; line-height: 1.4; }
.md-vibe-transformer, .md-bio-collection { margin: 4em 0; }
.md-vibe-list, .md-bio-grid { display: grid; gap: 1em; }
.md-bio-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.md-vibe-row, .md-profile-preview { background: var(--md-bg-content); border: 1px solid var(--md-border-color); border-radius: var(--md-radius-md); padding: 1.5em; box-shadow: var(--md-shadow-soft); display: flex; flex-direction: column; gap: 10px; }
.md-vibe-row:hover, .md-profile-preview:hover { border-color: var(--md-accent-primary); transform: translateY(-4px); box-shadow: var(--md-shadow-hover); }
.md-vibe-label { font-weight: 800; text-transform: uppercase; font-size: 0.85em; color: var(--md-accent-primary); }
.md-vibe-copy, .md-bio-text { margin: 0; font-size: 1.1em; color: var(--md-text-dark); font-weight: 500;}
.md-profile-preview { text-align: center; }
.md-profile-avatar { width: 80px; height: 80px; border-radius: 50%; background-color: var(--md-border-color); margin: 0 auto 1em; }

/* --- 8. Asset Banks & Interactive --- */
.md-sticker-book, .md-tag-system { margin: 3.5em 0; }
.md-bank-flex { display: flex; flex-wrap: wrap; gap: 12px; }
.md-emoji-pill, .md-hash-tag { background: var(--md-bg-content); border: 1px solid var(--md-border-color); padding: 10px 20px; border-radius: 30px; font-size: 1.1em; font-weight: 600; box-shadow: var(--md-shadow-soft); color: var(--md-text-dark); }
.md-emoji-pill:hover, .md-hash-tag:hover { background: var(--md-accent-primary); color: #fff; border-color: var(--md-accent-primary); transform: translateY(-3px); box-shadow: var(--md-shadow-hover); }
.md-mad-libs { margin: 4em 0; }
.md-mad-libs-inst { font-weight: 700; color: var(--md-text-secondary); margin-bottom: 1.5em; font-size: 1.05em; text-transform: uppercase; letter-spacing: 1px; }
/* ✅ FIX: Merged duplicate/conflicting rules into one clean style */
.md-mad-lib-item {
    background: var(--md-bg-content); border: 2px dashed var(--safe-border-tint); padding: 1.5em 2em;
    margin-bottom: 1.2em; border-radius: var(--md-radius-md); font-size: 1.2em;
    color: var(--md-text-dark); transition: var(--md-transition); line-height: 1.8;
}
.md-mad-lib-item:hover { border-color: var(--md-accent-primary); background: var(--safe-bg-tint); transform: scale(1.01); }
.md-blank-input {
    background: var(--safe-bg-tint); border-bottom: 2px solid var(--md-accent-primary);
    padding: 2px 10px; margin: 0 4px; border-radius: 4px 4px 0 0;
    font-family: 'Fira Code', monospace; font-weight: 600; color: var(--md-accent-primary);
}
.md-masterclass {
    margin: 4em 0;
    background: var(--md-premium-gradient); /* Fixed variable name */
    padding: 3em;
    border-radius: var(--md-radius-md);
    border: 1px solid var(--safe-border-tint);
}

.md-big-numbers {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: ms-counter;
}

.md-big-numbers li {
    display: flex; /* Uses flexbox instead of absolute positioning */
    align-items: flex-start; /* Locks the text to the top of the number */
    gap: 1.2em; /* Perfect spacing between number and text */
    padding-bottom: 2em;
    margin-bottom: 2em;
    border-bottom: 1px dashed var(--safe-border-tint);
}

.md-big-numbers li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.md-big-numbers li::before {
    counter-increment: ms-counter;
    content: "0" counter(ms-counter);
    font-family: var(--md-font-heading);
    font-size: 3.2em;
    font-weight: 800;
    line-height: 0.75; /* Shrinks the bounding box of the number */
    color: var(--md-accent-primary);
    opacity: 0.3;
    flex-shrink: 0; /* Prevents the number from squishing on mobile */
    margin-top: 0.05em; /* Micro-adjustment for optical alignment */
}

.md-step-text {
    font-size: 1.15em;
    font-weight: 500;
    color: var(--md-text-dark);
    line-height: 1.6;
    margin: 0; /* Clears any weird paragraph margins */
}
.md-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; margin: 3.5em 0; }
.md-do-col, .md-dont-col { background: var(--md-bg-content); border: 1px solid var(--md-border-color); padding: 2.5em; border-radius: var(--md-radius-md); box-shadow: var(--md-shadow-soft);}
.md-do-col { border-top: 4px solid var(--md-success-color); }
.md-dont-col { border-top: 4px solid var(--md-error-color); }
.md-do-col h4, .md-dont-col h4 { margin-top: 0; font-size: 1.3em; font-family: var(--md-font-heading); }
.md-check-list, .md-cross-list { list-style: none; padding: 0; }
.md-check-list li, .md-cross-list li { position: relative; padding-left: 2em; margin-bottom: 1em; font-weight: 500; font-size: 1.05em;}
.md-check-list li::before { content: '✓'; color: var(--md-success-color); position: absolute; left: 0; font-weight: bold; font-size: 1.2em;}
.md-cross-list li::before { content: '✕'; color: var(--md-error-color); position: absolute; left: 0; font-weight: bold; font-size: 1.2em;}

/* --- 9. Tables, Media & Art --- */
.md-notion-table-wrapper { overflow-x: auto; margin: 3.5em 0; }
.md-notion-table { width: 100%; border-collapse: collapse; background: var(--md-bg-content); border-radius: var(--md-radius-md); overflow: hidden; border: 1px solid var(--md-border-color); box-shadow: var(--md-shadow-soft); }
.md-notion-table th, .md-notion-table td { padding: 1.2em 1.5em; text-align: left; border-bottom: 1px solid var(--md-border-color); }
.md-notion-table tbody tr:last-child td { border-bottom: none; }
.md-notion-table thead { background: var(--safe-bg-tint); font-family: var(--md-font-heading); color: var(--md-text-dark); font-size: 1.05em; }
.md-notion-table tbody tr:hover { background-color: var(--safe-bg-tint); }
.md-bento-gallery { margin: 3.5em 0; }
.md-bento-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25em; }
.md-bento-grid figure { margin: 0; }
.md-bento-grid img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--md-radius-md); box-shadow: var(--md-shadow-medium); transition: var(--md-transition); }
.md-bento-grid img:hover { transform: scale(1.03); box-shadow: var(--md-shadow-hover); }
.md-bento-grid figcaption { margin-top: 1em; font-size: 0.9em; color: var(--md-text-secondary); text-align: center; }
.md-terminal-block { margin: 3.5em 0; }
.md-code-snippet { background: var(--md-bg-page); border: 1px solid var(--md-border-color); padding: 1.5em 2em; border-radius: var(--md-radius-md); font-family: 'Fira Code', 'Courier New', monospace; font-size: 1.1em; color: var(--md-text-dark); margin-bottom: 1em; overflow-x: auto; box-shadow: var(--md-shadow-soft); transition: var(--md-transition); }
.md-code-snippet:hover { background: var(--md-bg-content); box-shadow: var(--md-shadow-hover); border-color: var(--md-accent-primary); transform: translateY(-2px); }
.md-gallery-wall { margin: 3.5em 0; text-align: center; }
.md-gallery-wall img { border-radius: var(--md-radius-md); box-shadow: var(--md-shadow-medium); max-width: 100%; height: auto; transition: var(--md-transition); }
.md-gallery-wall img:hover { transform: scale(1.02); box-shadow: var(--md-shadow-hover); }
.md-gallery-wall figcaption { margin-top: 1em; color: var(--md-text-secondary); font-size: 0.95em; font-style: italic; }
.md-cinema-container { border-radius: var(--md-radius-lg); overflow: hidden; box-shadow: var(--md-shadow-hover); margin: 3.5em 0; }
.md-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; }
.md-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }



/* Base styling for all strategic insight boxes */
.md-author-field-note,
.md-predictive-radar,
.md-hot-take,
.md-protip-box,
.md-psychology-box,
.md-redflag-alert,
.md-multiplier-box {
    background: var(--md-bg-content);
    border: 1px solid var(--md-border-color);
    border-radius: var(--md-radius-md);
    padding: 2.5em;
    margin: 3.5em 0;
    box-shadow: var(--md-shadow-soft);
    transition: var(--md-transition);
}

/* Glass & Glow Hover Effect */
.md-author-field-note:hover,
.md-predictive-radar:hover,
.md-hot-take:hover,
.md-protip-box:hover,
.md-psychology-box:hover,
.md-redflag-alert:hover,
.md-multiplier-box:hover {
    box-shadow: var(--md-shadow-hover);
    transform: translateY(-3px);
    border-color: var(--md-accent-primary);
}

/* Shared Header Style for Info Boxes */
.md-note-header,
.md-radar-header,
.md-take-header,
.md-protip-header,
.md-psycho-header,
.md-redflag-header,
.md-multiplier-header {
    font-family: var(--md-font-heading);
    font-size: 1.25em;
    font-weight: 700;
    color: var(--md-text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--safe-border-tint);
}


/* --- A. Executive Summary (TL;DR) --- */
.md-executive-summary {
    background: var(--md-premium-gradient);
    border: 1px solid var(--safe-border-tint);
    border-radius: var(--md-radius-md);
    padding: 2.5em;
    margin: 2em 0 4em;
    box-shadow: var(--md-shadow-medium);
}
.md-tldr-title {
    font-family: var(--md-font-heading);
    font-size: 1.4em;
    margin-top: 0;
    color: var(--md-accent-primary);
}
.md-tldr-list {
    margin: 0;
    padding-left: 1.5em;
    font-size: 1.1em;
    color: var(--md-text-dark);
}
.md-tldr-list li {
    margin-bottom: 0.8em;
    font-weight: 500;
    line-height: 1.6;
}

/* --- B. Author's Field Note --- */
.md-note-header { color: var(--md-accent-primary); }
.md-anecdote-hook { font-size: 1.1em; color: var(--md-text-dark); }
.md-anecdote-story {
    color: var(--md-text-secondary);
    font-style: italic;
    display: block;
    margin-top: 10px;
    line-height: 1.7;
}
.md-anecdote-lesson {
    margin-top: 1.5em;
    padding: 1.2em 1.5em;
    background: var(--safe-bg-tint);
    border-left: 4px solid var(--md-accent-primary);
    border-radius: 0 var(--md-radius-sm) var(--md-radius-sm) 0;
    font-weight: 500;
    color: var(--md-text-dark);
}

/* --- C. Predictive Insights --- */
.md-predictive-radar { background: linear-gradient(180deg, var(--md-bg-content), var(--md-bg-page)); }
.md-trend-title {
    margin-top: 0;
    font-family: var(--md-font-heading);
    font-size: 1.15em;
    color: var(--md-accent-primary);
}
.md-prediction-text { font-size: 1.1em; font-weight: 500; margin-bottom: 0.5em; }
.md-prediction-rationale { color: var(--md-text-secondary); }

/* --- D. Contrarian Take (Spicy!) --- */
.md-hot-take { border-left: 5px solid var(--md-error-color); }
.md-take-header {
    color: var(--md-error-color);
    border-bottom-color: color-mix(in srgb, var(--md-error-color) 20%, white);
}
.md-take-myth {
    text-decoration: line-through;
    color: var(--md-text-secondary);
    margin-bottom: 0.8em;
}
.md-take-reality {
    color: var(--md-error-color);
    font-weight: 600;
    margin-bottom: 1.2em;
    font-size: 1.1em;
}
.md-take-action {
    padding-top: 1.2em;
    border-top: 1px dashed var(--md-border-color);
    font-weight: 700;
    color: var(--md-success-color);
}

/* --- E. ProTip --- */
.md-protip-box { border: 2px dashed var(--safe-border-tint); }
.md-protip-header { color: var(--md-accent-primary); border-bottom-style: dashed; }
.md-protip-context { color: var(--md-text-secondary); margin-bottom: 1em; }
.md-protip-advice { font-size: 1.1em; font-weight: 600; color: var(--md-text-dark); }

/* --- F. Psychological Trigger --- */
.md-psycho-title { margin-top: 0; color: var(--md-accent-primary); font-size: 1.15em; }
.md-psycho-science { color: var(--md-text-secondary); margin-bottom: 0.8em; }
.md-psycho-apply { font-weight: 500; color: var(--md-text-dark); }

/* --- G. Red Flag Warning --- */
.md-redflag-alert {
    background: color-mix(in srgb, var(--md-error-color) 4%, white);
    border-color: color-mix(in srgb, var(--md-error-color) 20%, white);
}
.md-redflag-header {
    color: var(--md-error-color);
    border-bottom-color: color-mix(in srgb, var(--md-error-color) 15%, white);
}
.md-redflag-mistake { color: var(--md-text-dark); font-weight: 600; margin-bottom: 0.5em; }
.md-redflag-fails { color: var(--md-error-color); margin-bottom: 1.2em; }
.md-redflag-fix {
    padding: 1.2em;
    background: #fff;
    border-radius: var(--md-radius-sm);
    border: 1px solid var(--md-success-color);
    font-weight: 600;
    color: var(--md-success-color);
}

/* --- H. Engagement Multiplier --- */
.md-multiplier-box { border-left: 5px solid var(--md-accent-primary); }
.md-multiplier-header { color: var(--md-accent-primary); }
.md-multiplier-execute { font-weight: 500; margin-bottom: 1.5em; color: var(--md-text-dark); }
.md-multiplier-prompt {
    background: var(--md-bg-page);
    border: 1px solid var(--md-border-color);
    padding: 1.5em;
    border-radius: var(--md-radius-sm);
    font-family: 'Fira Code', 'Courier New', monospace;
    color: var(--md-accent-primary);
    font-weight: 600;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    transition: var(--md-transition);
}
.md-multiplier-prompt:hover {
    background: var(--safe-bg-tint);
    border-color: var(--md-accent-primary);
}


.md-spoke-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--safe-bg-tint);
    border: 1px solid var(--safe-border-tint);
    border-left: 4px solid var(--md-accent-primary);
    padding: 1.5em 2em;
    margin-top: 2em;
    border-radius: var(--md-radius-md);
    transition: var(--md-transition);
}

.md-spoke-card:hover {
    box-shadow: var(--md-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--md-accent-primary);
    background: var(--md-bg-content);
}

.md-spoke-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--md-text-secondary);
}

.md-spoke-label svg {
    color: var(--md-accent-primary);
}

.md-spoke-title {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--md-accent-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}

.md-spoke-title:hover {
    text-decoration: underline;
}

/* --- B. Cluster Navigation Hub (Bottom of page) --- */
.md-cluster-navigation {
    margin: 5em 0 3em;
    padding: 3.5em;
    background: var(--md-bg-page);
    border-radius: var(--md-radius-lg);
    border: 1px solid var(--md-border-color);
}

.md-cluster-navigation h3 {
    margin-top: 0;
    font-family: var(--md-font-heading);
    font-size: 1.6em;
    color: var(--md-text-dark);
    margin-bottom: 1.5em;
}

.md-spoke-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

.md-spoke-grid-item {
    display: flex;
    align-items: center;
    padding: 1.2em 1.5em;
    background: var(--md-bg-content);
    border: 1px solid var(--md-border-color);
    border-radius: var(--md-radius-sm);
    color: var(--md-text-dark);
    font-weight: 600;
    font-size: 1.05em;
    text-decoration: none;
    transition: var(--md-transition);
    line-height: 1.4;
    box-shadow: var(--md-shadow-soft);
}

.md-spoke-grid-item:hover {
    border-color: var(--md-accent-primary);
    color: var(--md-accent-primary);
    transform: translateY(-3px);
    box-shadow: var(--md-shadow-hover);
}

/* --- C. Schema Rating Widget --- */
.md-rating-container {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 1em 1.5em;
    background: var(--md-bg-content);
    border-radius: 50px;
    border: 1px dashed var(--md-border-color);
    margin: 1em 0 3em;
    box-shadow: var(--md-shadow-soft);
}

.md-rating-stars {
    display: flex;
    gap: 4px;
    font-size: 1.6em;
}

.md-rating-stars .star-icon {
    color: #E4E4E7; /* Light gray for empty stars */
    line-height: 1;
}

.md-rating-stars .star-icon.filled {
    color: #F59E0B; /* Classic Gold for filled stars */
}

.md-rating-text {
    font-size: 1.05em;
    font-weight: 500;
    color: var(--md-text-secondary);
}

.md-rating-text strong {
    color: var(--md-text-dark);
    font-size: 1.15em;
    font-weight: 700;
}


.md-style-guide {
    background: var(--md-bg-tint);
    padding: 2.5em;
    border-radius: var(--md-radius-lg);
    border: 1px solid var(--md-accent-primary);
    margin: 3em 0;
}

.md-blueprint-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5em;
    margin: 1.5em 0;
}

.md-blueprint-card {
    background: rgba(255, 255, 255, 0.5);
    padding: 1.2em;
    border-radius: var(--md-radius-md);
    border: 1px solid rgba(0,0,0,0.05);
}

.md-blueprint-label {
    display: block;
    font-family: var(--md-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.1em;
    color: var(--md-accent-primary);
    margin-bottom: 0.8em;
}

.md-swatch-container {
    display: flex;
    gap: 0.8em;
}

.md-color-swatch {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.md-cultural-deep-dive {
    margin-top: 1.5em;
    padding-top: 1.5em;
    border-top: 1px solid rgba(0,0,0,0.05);
    font-style: italic;
    color: var(--md-text-dark);
}


/* --- 10. Responsive Adjustments --- */
@media (max-width: 768px) {
    .md-editorial-article { padding: 1em; }
    .md-index-nav ol, .md-split-grid { grid-template-columns: 1fr; }
    .md-grid-compact .md-asset-list { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .md-trophy-case { padding: 3em 1.5em; }
}