/* ==========================================================================
   MinionsLab Brand Layer — glow.css
   Loaded after blocksy-parent (priority 20) so all rules here override
   Blocksy defaults.  Uses brand hexes directly; Blocksy CSS vars are
   overridden at :root level so the cascade picks them up everywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Self-hosted font faces (Inter + Space Grotesk)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/space-grotesk.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/hanken-grotesk.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Brand CSS custom properties
   Override Blocksy's palette vars at :root so all var(--theme-palette-*)
   references inherit the brand colours.
   -------------------------------------------------------------------------- */

:root {
    /* Palette — mirrors what blocksy-setup.sh sets via set_theme_mod() */
    --ml-base:           #0E0F1A;
    --ml-panel:          #171A2B;
    --ml-violet:         #7C5CFF;
    --ml-violet-hover:   #8B6FFF;  /* AA-compliant link hover: 5.28:1 on #0E0F1A */
    --ml-cyan:           #22D3EE;
    --ml-amber:          #FFB454;
    --ml-text:           #F5F7FF;
    --ml-gradient:       linear-gradient(135deg, #7C5CFF, #22D3EE);
    --ml-indigo:         #4816cb;  /* gradient end — darker than violet; white text ≥7:1 */
    --ml-surface:        #1A1C2E;  /* card / glass-panel background */
    --ml-glass-stroke:   rgba(245, 247, 255, 0.10);

    /* Blocksy palette override so palette-color-N vars carry brand values */
    --theme-palette-color-1: #7C5CFF;
    --theme-palette-color-2: #22D3EE;
    --theme-palette-color-3: #F5F7FF;
    --theme-palette-color-4: #0E0F1A;
    --theme-palette-color-5: #171A2B;
    --theme-palette-color-6: #FFB454;
    --theme-palette-color-7: #1a1d2e;
    --theme-palette-color-8: #ffffff;
}

/* --------------------------------------------------------------------------
   3. Global base — dark background, brand text colour, brand fonts
   -------------------------------------------------------------------------- */

html,
body {
    background-color: var(--ml-base) !important;
    color: var(--ml-text) !important;
    font-family: 'Inter', sans-serif !important;
}

/* Blocksy wraps content in .site / #page */
.site,
#page {
    background-color: var(--ml-base);
}

/* Common content containers */
.ct-container,
.ct-main-content-container,
.entry-content,
.wp-block-group__inner-container {
    color: var(--ml-text);
}

/* --------------------------------------------------------------------------
   4. Headings — Space Grotesk
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title {
    font-family: 'Space Grotesk', sans-serif !important;
    color: var(--ml-text) !important;
}

/* --------------------------------------------------------------------------
   5. Links
   -------------------------------------------------------------------------- */

a {
    color: var(--ml-cyan) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--ml-violet-hover) !important; /* #8B6FFF on #0E0F1A = 5.28:1 — passes AA for normal text */
}

/* --------------------------------------------------------------------------
   6. Buttons — AA compliant
   Violet bg (#7C5CFF) + white text (#FFFFFF): contrast = 4.35:1.
   WCAG 2.1 SC 1.4.3 large-text threshold (3:1) applies to text ≥ 14pt bold
   = ≥ 18.67 px bold.  We set font-size: 1.25rem (20px) bold = 15pt bold
   which qualifies as large text → 4.35:1 > 3.0:1 → PASS AA.
   (At 18px bold = 13.5pt, the 4.5:1 normal threshold would apply and 4.35
   would fail; 20px is the safe minimum for this pairing.)
   -------------------------------------------------------------------------- */

/* AA: white-on-violet is 4.35:1 — passes only as WCAG large text, so buttons MUST stay >=18.66px AND bold. Do not reduce. */
/* Primary / default button */
.ct-button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
    background-color: var(--ml-violet) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.75rem 1.5rem !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.25rem !important;    /* 20px bold = 15pt bold ≥ 14pt bold → WCAG large text → 3:1 threshold */
    font-weight: 700 !important;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.ct-button:hover,
.ct-button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
    background-color: #6347e0 !important; /* slightly darker violet, still passes */
    box-shadow: 0 0 12px rgba(124, 92, 255, 0.6) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   7. AA :focus-visible ring — cyan outline
   Contrast of #22D3EE against #0E0F1A = 8.52:1 — passes AAA.
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--ml-cyan) !important;
    outline-offset: 3px !important;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   8. Header / navigation — dark panel
   -------------------------------------------------------------------------- */

.ct-header,
[data-header],
.ct-header .ct-main-header-row,
[data-row="middle"] {
    background-color: var(--ml-panel) !important;
}

.ct-header a,
.ct-menu-link,
.ct-menu a {
    color: var(--ml-text) !important;
}

.ct-header a:hover,
.ct-menu-link:hover {
    color: var(--ml-cyan) !important;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.ct-footer,
footer {
    background-color: var(--ml-panel) !important;
    color: var(--ml-text) !important;
}

/* --------------------------------------------------------------------------
   10. Gradient text helper — .ml-gradient-text
   -------------------------------------------------------------------------- */

.ml-gradient-text {
    background: var(--ml-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* fallback for non-webkit */
    display: inline;
}

/* --------------------------------------------------------------------------
   11. Mascot radial glow — .ml-glow
   Adds a soft violet/cyan ambient glow behind the mascot element.
   Respects prefers-reduced-motion.
   -------------------------------------------------------------------------- */

.ml-glow {
    position: relative;
}

.ml-glow::before {
    content: '';
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(124, 92, 255, 0.35) 0%,
        rgba(34, 211, 238, 0.15) 50%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    animation: ml-pulse 4s ease-in-out infinite;
}

.ml-glow > * {
    position: relative;
    z-index: 1;
}

@keyframes ml-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.75; transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .ml-glow::before {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   12. Card component — .ml-card
   Panel background, violet border tint, rounded corners.
   -------------------------------------------------------------------------- */

.ml-card {
    background-color: var(--ml-panel);
    border: 1px solid rgba(124, 92, 255, 0.25);
    border-radius: 12px;
    padding: 1.5rem;
    color: var(--ml-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ml-card:hover {
    border-color: rgba(124, 92, 255, 0.55);
    box-shadow: 0 4px 24px rgba(124, 92, 255, 0.15);
}

/* --------------------------------------------------------------------------
   13. CTA gradient band — .ml-cta-gradient
   Full-width violet→cyan gradient strip with dark base text.
   Contrast: #0E0F1A on gradient mid-point ≈ 11.4:1 — passes AAA.
   -------------------------------------------------------------------------- */

.ml-cta-gradient {
    background: var(--ml-gradient);
    color: var(--ml-base);
    padding: 3rem 2rem;
    text-align: center;
    border-radius: 12px;
}

.ml-cta-gradient h1,
.ml-cta-gradient h2,
.ml-cta-gradient h3,
.ml-cta-gradient h4,
.ml-cta-gradient h5,
.ml-cta-gradient h6,
.ml-cta-gradient p,
.ml-cta-gradient a {
    color: var(--ml-base) !important;
    -webkit-text-fill-color: var(--ml-base) !important;
}

/* --------------------------------------------------------------------------
   14. Blocksy post cards / content cards inherit brand bg
   -------------------------------------------------------------------------- */

.ct-blog-grid article,
.ct-blog-list article,
article.type-post,
article.type-page {
    background-color: var(--ml-panel);
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   14b. Query Loop post-template cards — override Blocksy's white-card default.
   Targets the inner group block wrapping each post item when class ml-card
   is present, and also forces dark bg on any wp-block-post in a query loop
   so Blocksy cannot inject white article backgrounds.
   -------------------------------------------------------------------------- */

.wp-block-query .wp-block-post-template .ml-card,
.wp-block-query .wp-block-post-template li > .wp-block-group.ml-card {
    background-color: var(--ml-panel) !important;
    border: 1px solid rgba(124, 92, 255, 0.25) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    color: var(--ml-text) !important;
}

/* Post template list item reset — Blocksy adds white bg at the <li> level */
.wp-block-query .wp-block-post-template > li {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Hover state for query loop ml-cards */
.wp-block-query .wp-block-post-template .ml-card:hover {
    border-color: rgba(124, 92, 255, 0.55) !important;
    box-shadow: 0 4px 24px rgba(124, 92, 255, 0.15) !important;
}

/* Post titles inside dark cards should use brand text colour */
.ml-card .wp-block-post-title a,
.ml-card .wp-block-post-title {
    color: var(--ml-text) !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

/* Post dates inside dark cards */
.ml-card .wp-block-post-date,
.ml-card .wp-block-post-date time {
    color: #9ca3af !important;
    font-size: 0.875rem !important;
}

/* --------------------------------------------------------------------------
   14c. Blocksy native blog/archive entry-card — force dark panel background.
   Blocksy outputs `[data-prefix="blog"] .entry-card { background-color: var(--theme-palette-color-8) }`
   (palette-8 = #ffffff) in ct-main-styles-inline-css.  Override with brand panel.
   Also covers category / author / search / venture / digest archive pages.
   -------------------------------------------------------------------------- */

[data-prefix="blog"] .entry-card,
[data-prefix="categories"] .entry-card,
[data-prefix="author"] .entry-card,
[data-prefix="search"] .entry-card,
[data-prefix="venture_archive"] .entry-card,
[data-prefix="digest_issue_archive"] .entry-card {
    background-color: var(--ml-panel) !important;
    border: 1px solid rgba(124, 92, 255, 0.25) !important;
    border-radius: 12px !important;
    color: var(--ml-text) !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

[data-prefix="blog"] .entry-card:hover,
[data-prefix="categories"] .entry-card:hover,
[data-prefix="author"] .entry-card:hover,
[data-prefix="search"] .entry-card:hover,
[data-prefix="venture_archive"] .entry-card:hover,
[data-prefix="digest_issue_archive"] .entry-card:hover {
    border-color: rgba(124, 92, 255, 0.55) !important;
    box-shadow: 0 4px 24px rgba(124, 92, 255, 0.15) !important;
}

/* Entry titles and dates inside Blocksy native cards */
[data-prefix="blog"] .entry-card .entry-title a,
[data-prefix="categories"] .entry-card .entry-title a,
[data-prefix="author"] .entry-card .entry-title a,
[data-prefix="search"] .entry-card .entry-title a,
[data-prefix="venture_archive"] .entry-card .entry-title a,
[data-prefix="digest_issue_archive"] .entry-card .entry-title a {
    color: var(--ml-text) !important;
}

[data-prefix="blog"] .entry-card .entry-meta,
[data-prefix="categories"] .entry-card .entry-meta,
[data-prefix="author"] .entry-card .entry-meta,
[data-prefix="search"] .entry-card .entry-meta,
[data-prefix="venture_archive"] .entry-card .entry-meta,
[data-prefix="digest_issue_archive"] .entry-card .entry-meta {
    color: #9ca3af !important;
}

/* Blocksy archive wrapper — ensure dark page background on blog/archive pages */
[data-prefix="blog"],
[data-prefix="categories"],
[data-prefix="author"],
[data-prefix="search"],
[data-prefix="venture_archive"],
[data-prefix="digest_issue_archive"] {
    background-color: var(--ml-base) !important;
}

/* Writing/blog page hero header — suppress the Blocksy page title
   (the archive title "Writing" from Blocksy is fine; suppress only if
   it creates a jarring white block by checking the hero-section wrapper) */
[data-prefix="blog"] .hero-section .entry-header .page-title {
    color: var(--ml-text) !important;
}

/* --------------------------------------------------------------------------
   15. Form elements — dark themed
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
    background-color: var(--ml-panel) !important;
    color: var(--ml-text) !important;
    border-color: rgba(124, 92, 255, 0.35) !important;
    border-radius: 8px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--ml-cyan) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2) !important;
}

/* --------------------------------------------------------------------------
   16. Subscribe CTA button — nav menu item (.ml-subscribe-btn)
   Brand violet bg (#7C5CFF) + near-white text (#F5F7FF): contrast ratio 4.35:1.
   WCAG 2.1 SC 1.4.3: large text (≥18.66 px bold OR ≥24 px normal) passes at
   3:1. We set font-size: 1.1665rem (≈18.66 px) bold, which qualifies as WCAG
   large text → 4.35:1 > 3.0:1 → PASS AA (large text).
   Computed contrast: #F5F7FF on #7C5CFF = 4.35:1.
   Hover glow uses rgba(124, 92, 255, 0.55) — the RGB of brand violet #7C5CFF.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   17. Front-page "Home" title suppression
   Blocksy renders <header class="entry-header"><h1 class="page-title">Home</h1>
   above the block content on static front pages.  Hide it so the hero h1
   ("Your AI minions, hard at work.") is the first visible heading.
   body.home is set by WordPress on the front page; .hero-section scopes it
   to the Blocksy page-title wrapper so other .entry-header uses are unaffected.
   -------------------------------------------------------------------------- */

body.home .hero-section .entry-header,
body.home .entry-header .page-title {
    display: none !important;
}

/* Contact, About, and The Digest page title suppression.
   Uses slug-based body classes (ml-page-*) added by the body_class filter in
   functions.php — host-independent; numeric page-id values vary per DB. */
body.ml-page-the-digest .entry-header .page-title,
body.ml-page-contact .entry-header .page-title,
body.ml-page-about .entry-header .page-title {
    display: none !important;
}

/* AA large text: #F5F7FF on #7C5CFF = 4.35:1 — passes WCAG 2.1 SC 1.4.3 AA (large text ≥18.66px bold, threshold 3:1) */
.menu-item.ml-subscribe-btn,
li.ml-subscribe-btn {
    align-self: center !important;  /* vertically center the <li> within the flex header row */
}

.menu-item.ml-subscribe-btn > a,
li.ml-subscribe-btn > a,
.ml-subscribe-btn a {
    display: inline-block !important;
    background-color: #7C5CFF !important; /* brand accent violet — contrast: #F5F7FF 4.35:1 — AA large text */
    color: #F5F7FF !important;
    border-radius: 6px !important;
    padding: 0.4rem 1rem !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.1665rem !important;  /* ≈18.66px bold — WCAG large text threshold */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap !important;
    margin-left: 0.5rem !important;
    vertical-align: middle !important;
}

.menu-item.ml-subscribe-btn > a:hover,
.menu-item.ml-subscribe-btn > a:focus,
li.ml-subscribe-btn > a:hover,
li.ml-subscribe-btn > a:focus,
.ml-subscribe-btn a:hover,
.ml-subscribe-btn a:focus {
    background-color: #6347e0 !important; /* slightly darker brand violet — contrast: #F5F7FF ≈5.1:1 — passes AA */
    box-shadow: 0 0 10px rgba(124, 92, 255, 0.55) !important; /* glow: RGB of brand #7C5CFF */
    color: #F5F7FF !important;
}

/* --------------------------------------------------------------------------
   18. Subscribe form layout — .ml-subscribe (the inline email signup)
   Without this, the email input renders full container width while the
   submit button falls to its own line at its natural (narrow) width, so the
   two look mismatched. We lay the form out as a centered, max-width row:
   the input flexes to fill, the button sits beside it at equal height, and
   on narrow viewports both wrap and go full-width.
   -------------------------------------------------------------------------- */

.ml-subscribe {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
    max-width: 34rem;
    margin-left: auto;   /* center under the centered hero copy */
    margin-right: auto;
}

.ml-subscribe input[type="email"] {
    flex: 1 1 16rem;
    min-width: 0;        /* allow the input to shrink inside the flex row */
    /* Blocksy's main.css gives form fields an explicit height (--theme-form-field-height,
       default 40px). An explicit height defeats align-items:stretch, leaving the input
       shorter than the larger-font submit button. Reset to auto + stretch so both ends
       of the row share the button's height. This selector outranks Blocksy's. */
    height: auto;
    align-self: stretch;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.4;
    border-radius: 8px;
    border: 1px solid rgba(124, 92, 255, 0.45);
    background-color: #0E0F1A;
    color: #F5F7FF;
}

.ml-subscribe input[type="email"]::placeholder {
    color: #9ca3af;
}

.ml-subscribe button {
    flex: 0 0 auto;      /* natural width on the row; full width when wrapped */
    white-space: nowrap;
}

/* Stack on narrow screens: button spans the full width below the input. */
@media (max-width: 480px) {
    .ml-subscribe button {
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
   22. Mono label chip (.ml-chip) + gradient button (.ml-btn-gradient)
   AA notes:
   - .ml-chip: cyan #22D3EE text on the dark base #0E0F1A = 8.52:1 → AAA.
   - .ml-btn-gradient: violet→indigo. The LIGHTEST stop is violet #7C5CFF =
     4.35:1 on white, which passes WCAG large-text 3:1 ONLY while the label
     stays ≥18.66px bold. Font is therefore locked at 1.25rem (20px) 700.
     The indigo end (#4816CB) is darker (≥7:1), so every point clears 3:1.
     Never use the violet→cyan --ml-gradient token as a button background.
   -------------------------------------------------------------------------- */

.ml-chip {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;             /* 12px */
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ml-cyan);
    border: 1px solid rgba(34, 211, 238, 0.5);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    line-height: 1.4;
}

/* Gradient button: the "Read full analysis" link, plus the subscribe-form
   submit button WITHIN the homepage bands only (so the shared subscribe-form
   pattern keeps its solid-violet button on /the-digest/). */
a.ml-btn-gradient,
.ml-home-hero .ml-subscribe button,
.ml-subscribe-cta .ml-subscribe button {
    background-image: linear-gradient(135deg, var(--ml-violet), var(--ml-indigo)) !important;
    background-color: var(--ml-violet) !important;   /* solid fallback */
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.75rem 1.5rem !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 1.25rem !important;   /* 20px bold = WCAG large text; lightest stop 4.35:1 passes 3:1 */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

a.ml-btn-gradient:hover,
a.ml-btn-gradient:focus,
.ml-home-hero .ml-subscribe button:hover,
.ml-home-hero .ml-subscribe button:focus,
.ml-subscribe-cta .ml-subscribe button:hover,
.ml-subscribe-cta .ml-subscribe button:focus {
    filter: brightness(1.08);
    box-shadow: 0 0 14px rgba(124, 92, 255, 0.6) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   19. Homepage hero (.ml-home-hero)
   Two-column on desktop (copy left, mascot right); stacks on mobile. Soft
   radial violet/cyan glow behind the band. Headlines in Hanken Grotesk.
   -------------------------------------------------------------------------- */

.ml-home-hero {
    position: relative;
    overflow: hidden;
}

.ml-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40rem 24rem at 20% 20%, rgba(124, 92, 255, 0.18), transparent 70%),
        radial-gradient(36rem 20rem at 90% 60%, rgba(34, 211, 238, 0.12), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.ml-home-hero > * {
    position: relative;
    z-index: 1;
}

.ml-home-hero h1 {
    font-family: 'Hanken Grotesk', sans-serif !important;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

.ml-home-hero .ml-chip {
    margin-bottom: 1.25rem;
}

/* Mascot sits at its natural size; never let it crowd the copy. */
.ml-home-hero .ml-glow {
    flex: 0 0 auto;
    margin: 0;
}

/* Keep the mascot from overflowing on mid-width viewports before the row wraps. */
.ml-home-hero .ml-glow img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 782px) {
    .ml-home-hero .ml-glow {
        order: -1;            /* mascot above the copy when stacked */
        align-self: center;
    }
}

/* --------------------------------------------------------------------------
   20. Latest Lede feed (.ml-lede)
   Featured card (image + dark overlay, or violet→indigo fallback) beside a
   sidebar list of compact rows. Two columns on desktop, stacked on mobile.
   -------------------------------------------------------------------------- */

.ml-lede {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--wp--preset--spacing--70, 4rem) 2rem;
}

.ml-lede-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ml-lede-head h2 {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 1.75rem;
    margin: 0;
}

.ml-lede-archive {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--ml-cyan);
    white-space: nowrap;
}

.ml-lede-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}

/* Featured card */
.ml-lede-featured {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid var(--ml-glass-stroke);
    background-color: var(--ml-surface);
    min-height: 22rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.ml-lede-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ml-lede-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark overlay so overlaid text stays legible (AA) over any image. */
.ml-lede-featured::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14,15,26,0.10) 0%, rgba(14,15,26,0.85) 100%);
    z-index: 1;
}

/* Fallback when the post has no thumbnail. */
.ml-lede-fallback {
    background-image: linear-gradient(135deg, var(--ml-violet), var(--ml-indigo));
}

.ml-lede-body {
    position: relative;
    z-index: 2;
    padding: 1.75rem;
}

.ml-lede-body .ml-chip {
    margin-bottom: 0.75rem;
}

.ml-lede-title {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 1.6rem;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

.ml-lede-title a {
    color: var(--ml-text);
    text-decoration: none;
}

.ml-lede-excerpt {
    color: #c8cce8;
    margin: 0 0 1.25rem;
}

/* Sidebar list */
.ml-lede-aside {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ml-lede-aside-item {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid var(--ml-glass-stroke);
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.ml-lede-aside-item:hover {
    background-color: var(--ml-surface);
}

.ml-lede-aside-item .ml-chip {
    margin-bottom: 0.4rem;
}

.ml-lede-aside-title {
    display: block;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--ml-text);
    text-decoration: none;
    margin-bottom: 0.25rem;
}

.ml-lede-aside-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #9ca3af;
}

@media (max-width: 782px) {
    .ml-lede-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   21. Subscribe CTA banner (.ml-subscribe-cta)
   Glassmorphic panel: translucent surface, 1px glass stroke, backdrop blur,
   faint violet rim-glow. Centers the heading, copy, and signup form.
   -------------------------------------------------------------------------- */

.ml-subscribe-cta {
    max-width: 960px;
    margin: 0 auto;
    border-radius: 1rem;
    border: 1px solid var(--ml-glass-stroke);
    background-color: rgba(26, 28, 46, 0.7);   /* --ml-surface @ 70% */
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 40px rgba(124, 92, 255, 0.10);
}

.ml-subscribe-cta h2 {
    font-family: 'Hanken Grotesk', sans-serif !important;
    margin-top: 0;
}

/* Center the reused subscribe form within the CTA band. */
.ml-subscribe-cta .ml-subscribe {
    justify-content: center;
}