/*
 * Generated by build.js
 * Theme: y2k-theme
 * Built:  2026-04-24T18:56:29.846Z
 */

/* ----- normalize.css ----- */
/* =============================================================================
   NORMALIZE.CSS — Minimal modern reset. Not a full normalize, just sensible
   defaults that remove browser inconsistencies without fighting the cascade.
   ============================================================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

table {
    border-collapse: collapse;
}

[hidden] {
    display: none !important;
}

/* ----- design-systems/y2k ----- */
/* =============================================================================
   Y2K.CSS — Self-contained design system.

   Identity: Retro-futurist Y2K energy with VT323 pixel headings + Inter body +
   14px container radius + cream paper background (#f5f3ee), bold 2-3px black
   borders, and an electric acid-green (#caff00) accent. Uppercase navigation,
   tags, and buttons give it the blocky, high-contrast feel of late-'90s /
   early-'00s interfaces. This file owns the full light-mode visual identity:
   CSS custom properties, base element styles, layout containers, and the
   .ml-* utility class set.

   Dark mode lives in assets/css/base/dark-mode.css (universal, design-system
   agnostic). Reset lives in assets/css/normalize.css.

   See sibling meta.json for the complete providesVariables contract that any
   alternative design system must also satisfy.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   CSS custom properties
   -------------------------------------------------------------------------- */

:root {

    /* Colors */
    --color-background-main: #f5f3ee;
    --color-text-main: #0a0a0a;
    --accent-color: var(--ghost-accent-color, #caff00);

    --background-color-button: #caff00;
    --color-buttons-main-text: #0a0a0a;
    --color-buttons-secondary: #0a0a0a;
    --color-buttons-secondary-text: #f5f3ee;
    --color-buttons-secondary-hover: #1a1a1a;

    --color-text-light: #f5f3ee;
    --color-text-lighter: #4a4a4a;
    --color-text-tags: #0a0a0a;
    --color-text-meta: #6b6b6b;
    --color-text-post: #0a0a0a;
    --color-text-input: #0a0a0a;
    --color-text-tier-desc: #4a4a4a;

    --color-background-elements-main: #ebe7dd;
    --color-background-elements-main-hover: #ddd8cb;
    --color-background-text-blocks: #ebe7dd;
    --color-background-block-hover: #ddd8cb;
    --color-background-hero: #caff00;
    --color-background-footer: #0a0a0a;

    --font-color-hero: var(--color-text-main);

    --color-borders: #0a0a0a;
    --color-bookmark-border: #0a0a0a;

    --color-link: #0a0a0a;
    --color-link-hover: #caff00;
    --color-card-title-hover: #caff00;
    --color-nav-link-hover: #caff00;

    --form-input-focus-color: #caff00;

    --color-dark-mode-slider: #caff00;
    --color-footer-meta-separator: #caff00;
    --color-audio-thumbnail-placeholder: #ebe7dd;

    --color-error: #ff3b30;
    --color-success: #32d74b;
    --color-warning: #ff9f0a;

    /* Overlays (for images, modals, scrims) */
    --color-overlay-light: rgba(10, 10, 10, 0.30);
    --color-overlay-medium: rgba(10, 10, 10, 0.50);
    --color-overlay-strong: rgba(10, 10, 10, 0.75);
    --gradient-image-scrim: linear-gradient(to top, rgba(10, 10, 10, 0.78), transparent);
    --color-surface-on-image: rgba(245, 243, 238, 0.92);
    --color-text-on-image: #f5f3ee;
    --color-text-on-image-muted: rgba(245, 243, 238, 0.75);

    /* Shadows (chunky playful Y2K offsets) */
    --shadow-sm: 3px 3px 0 0 #0a0a0a;
    --shadow-md: 5px 5px 0 0 #0a0a0a;
    --shadow-lg: 8px 8px 0 0 #0a0a0a;
    --shadow-focus-ring: 0 0 0 3px rgba(202, 255, 0, 0.45);

    /* Motion */
    --transition-fast: 150ms;
    --transition-base: 200ms;
    --transition-slow: 400ms;
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Typography — family */
    --font-family-headings: 'VT323', 'Space Mono', 'Courier New', monospace;
    --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-buttons: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-navigation: 'VT323', 'Space Mono', 'Courier New', monospace;
    --font-family-card-headings: 'VT323', 'Space Mono', 'Courier New', monospace;
    --font-family-mono: 'Space Mono', 'VT323', ui-monospace, 'Cascadia Code', Menlo, monospace;

    /* Typography — size (numbered scale, identical across design systems) */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 4rem;

    /* Typography — weight */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* Typography — line height */
    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-loose: 1.75;

    /* Typography — letter spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;

    /* Typography — text transform */
    --text-transform-navigation: uppercase;
    --text-transform-tags: uppercase;
    --text-transform-buttons: uppercase;

    /* Radius & padding */
    --border-radius-buttons: 999px;
    --border-radius-containers: 14px;
    --border-radius-tags: 6px;
    --radius-circle: 50%;
    --padding-buttons: 14px 26px;
    --padding-subscribe-button: 22px 36px;

    /* Layout */
    --container-max-width: 1280px;
    --container-narrow: 720px;
    --section-padding-desktop: 72px;
    --section-padding-mobile: 40px;

    /* Composition */
    --header-padding: 24px 36px;
    --header-border-style: 3px solid var(--color-borders);
    --nav-gap: 32px;
    --card-border-style: 2px solid var(--color-text-main);
    --card-gap: 12px;
    --card-image-radius: var(--border-radius-containers);
    --card-background: #fbf9f3;
    --card-padding: 28px;
    --card-shadow-style: none;
    --section-gap: 72px;
    --rule-style: 3px solid var(--color-borders);
    --button-border-style: 2px solid var(--color-text-main);
}


/* -----------------------------------------------------------------------------
   Base elements
   -------------------------------------------------------------------------- */

html {
    background-color: var(--color-background-main);
}

body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
    color: var(--color-text-main);
    background-color: var(--color-background-main);
    transition: background-color 200ms ease-out, color 200ms ease-out;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.2;
    color: var(--color-text-main);
}

p {
    line-height: var(--line-height-normal);
}

a {
    color: var(--color-link);
    transition: color 150ms ease-out;
}

a:hover {
    color: var(--color-link-hover);
}

strong {
    font-weight: 600;
}

em {
    font-style: italic;
}

small {
    font-size: 0.875em;
}

hr {
    border: none;
    border-top: var(--rule-style, 1px solid var(--color-borders));
    margin: 40px 0;
}


/* -----------------------------------------------------------------------------
   Layout — viewport, main, containers, page wrapper, page header
   -------------------------------------------------------------------------- */

.ml-viewport {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ml-main {
    flex: 1 0 auto;
}

.ml-container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
}

.ml-container--narrow {
    max-width: var(--container-narrow);
}

.ml-container--wide {
    max-width: 1480px;
}

@media (max-width: 768px) {
    .ml-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

.ml-page {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
}

@media (max-width: 768px) {
    .ml-page {
        padding-top: var(--section-padding-mobile);
        padding-bottom: var(--section-padding-mobile);
    }
}

.ml-page-header {
    text-align: center;
    margin-bottom: 64px;
}

.ml-page-header__title {
    font-size: clamp(32px, 5vw, var(--font-size-5xl));
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.1;
}

.ml-page-header__description {
    margin-top: 16px;
    font-size: var(--font-size-xl);
    color: var(--color-text-lighter);
    line-height: var(--line-height-snug);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}


/* -----------------------------------------------------------------------------
   Card tag / eyebrow label
   -------------------------------------------------------------------------- */

.ml-card-tag {
    display: inline-block;
    padding: 4px 10px;
    background-color: var(--color-background-elements-main);
    color: var(--color-text-tags);
    font-family: var(--font-family-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: var(--text-transform-tags);
    border-radius: var(--border-radius-tags);
    transition: background-color 200ms ease-out;
    text-decoration: none;
}

.ml-card-tag:hover {
    background-color: var(--color-background-elements-main-hover);
    color: var(--color-text-tags);
}


/* -----------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.ml-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 0;
}

.ml-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--border-radius-containers);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-lighter);
    background-color: transparent;
    border: 1px solid var(--color-borders);
    transition: background-color 200ms ease-out, color 200ms ease-out;
    text-decoration: none;
}

.ml-pagination__item:hover {
    background-color: var(--color-background-elements-main);
    color: var(--color-text-main);
}

.ml-pagination__item.is-active {
    background-color: var(--background-color-button);
    color: var(--color-buttons-main-text);
    border-color: var(--background-color-button);
}

.ml-pagination__item.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.ml-pagination__arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 40px;
    border-radius: var(--border-radius-containers);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-main);
    border: 1px solid var(--color-borders);
    transition: background-color 200ms ease-out;
    text-decoration: none;
}

.ml-pagination__arrow:hover {
    background-color: var(--color-background-elements-main);
    color: var(--color-text-main);
}

.ml-pagination__arrow svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


/* -----------------------------------------------------------------------------
   Scroll-to-top button
   -------------------------------------------------------------------------- */

.ml-scroll-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-buttons);
    background-color: var(--background-color-button);
    color: var(--color-buttons-main-text);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
    z-index: 50;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.ml-scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.ml-scroll-top svg {
    width: 18px;
    height: 18px;
}


/* -----------------------------------------------------------------------------
   Divider
   -------------------------------------------------------------------------- */

.ml-divider {
    border: none;
    border-top: 1px solid var(--color-borders);
    margin: 0;
}


/* -----------------------------------------------------------------------------
   Scrollbar hide (for carousels)
   -------------------------------------------------------------------------- */

.ml-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ml-scrollbar-hide::-webkit-scrollbar {
    display: none;
}


/* -----------------------------------------------------------------------------
   Screen-reader only
   -------------------------------------------------------------------------- */

.ml-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/* -----------------------------------------------------------------------------
   Loading spinner
   -------------------------------------------------------------------------- */

.ml-loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-borders);
    border-top-color: var(--color-text-main);
    border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
    .ml-loading-spinner {
        animation: ml-spin 600ms linear infinite;
    }
}

@keyframes ml-spin {
    to { transform: rotate(360deg); }
}


/* -----------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.ml-empty-state {
    text-align: center;
    padding: 80px 24px;
}

.ml-empty-state__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    color: var(--color-text-meta);
}

.ml-empty-state__title {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
}

.ml-empty-state__text {
    color: var(--color-text-lighter);
    font-size: 16px;
}


/* -----------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.ml-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-meta);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ml-breadcrumbs a {
    color: var(--color-text-meta);
    transition: color 150ms ease-out;
}

.ml-breadcrumbs a:hover {
    color: var(--color-text-main);
}

.ml-breadcrumbs__separator {
    color: var(--color-borders);
    flex-shrink: 0;
}

.ml-breadcrumbs__current {
    color: var(--color-text-lighter);
}


/* -----------------------------------------------------------------------------
   Ghost: badge (Powered by Ghost)
   -------------------------------------------------------------------------- */

.gh-powered {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-meta);
    padding: 16px;
}

/* ----- reference-components.css ----- */
/*
 * reference-components.css
 *
 * Defines primitive and Ghost content compositions (ml-* and kg-*) using only
 * design system tokens. This file is imported by every built theme AFTER the
 * design system CSS and BEFORE legacy/component CSS, so each design system's
 * tokens drive the same component surface.
 *
 * Rule for additions: reference tokens only. No hex values. No raw px where a
 * token applies. The one documented exception is the CONTRACT GAP below the
 * ml-badge status variants — it is tracked for the next contract revision.
 */

/* ml-btn */
.ml-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-body);
  border: var(--border-width-thin) solid var(--color-interactive);
  background: var(--color-interactive);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background var(--transition-base) var(--transition-ease), border-color var(--transition-base) var(--transition-ease), color var(--transition-base) var(--transition-ease);
  line-height: 1;
  text-decoration: none;
}
.ml-btn:hover {
  background: var(--color-interactive-hover);
  border-color: var(--color-interactive-hover);
}
.ml-btn.ml-btn--secondary {
  background: var(--color-surface);
  color: var(--color-text-main);
  border-color: var(--color-border-strong);
}
.ml-btn.ml-btn--secondary:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-interactive);
}
.ml-btn.ml-btn--ghost {
  background: transparent;
  color: var(--color-text-main);
  border-color: transparent;
}
.ml-btn.ml-btn--ghost:hover {
  background: var(--color-surface-alt);
}
.ml-btn.ml-btn--accent {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: var(--color-text-inverse);
}
.ml-btn.ml-btn--accent:hover {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
}
.ml-btn.ml-btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--font-size-xs); }
.ml-btn.ml-btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--font-size-base); }

/* ml-badge */
.ml-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: var(--border-width-thin) solid var(--color-border);
}
.ml-badge.ml-badge--accent {
  background: var(--color-accent-50);
  color: var(--color-accent-700);
  border-color: var(--color-accent-100);
}
.ml-badge.ml-badge--inverse {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  border-color: var(--color-surface-inverse);
}
/* CONTRACT GAP: Status badges need both a strong color (currently --color-success/warning/error)
   AND a soft background + soft border. The contract only exposes the strong value, so the soft
   shades are hard-coded here. Propose adding: --color-success-soft, --color-success-border
   (and equivalents for warning/error) to the next contract revision. */
.ml-badge.ml-badge--success {
  background: #f0fdf4;
  color: var(--color-success);
  border-color: #bbf7d0;
}
.ml-badge.ml-badge--warning {
  background: #fffbeb;
  color: var(--color-warning);
  border-color: #fed7aa;
}
.ml-badge.ml-badge--error {
  background: #fef2f2;
  color: var(--color-error);
  border-color: #fecaca;
}

/* ml-input, ml-field */
.ml-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ml-field label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}
.ml-input {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-main);
  width: 100%;
  transition: border-color var(--transition-fast) var(--transition-ease);
}
.ml-input::placeholder { color: var(--color-text-subtle); }
.ml-input:focus {
  outline: none;
  border-color: var(--color-accent-500);
}
.ml-form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

/* ml-nav */
.ml-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-family-navigation);
  font-size: var(--font-size-sm);
}
.ml-nav .brand {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
  letter-spacing: var(--letter-spacing-tight);
  font-size: var(--font-size-lg);
}
.ml-nav ul {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-text-muted);
}
.ml-nav ul li {
  cursor: pointer;
  transition: color var(--transition-fast) var(--transition-ease);
}
.ml-nav ul li:hover { color: var(--color-text-main); }
.ml-nav ul li.on {
  color: var(--color-text-main);
  font-weight: var(--font-weight-medium);
}

/* Member lock / image lock primitive */
.ml-lock-image {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--color-neutral-200), var(--color-neutral-300));
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ml-lock-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 11, 0.35);
  backdrop-filter: blur(2px);
}
.ml-lock-image__overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-inverse);
}
.ml-lock-image__icon {
  width: 28px;
  height: 28px;
  opacity: 0.95;
}
.ml-lock-image__label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

/* Tier badges (paid/free/comped) */
.ml-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-body);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}
.ml-tier-badge--free {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: var(--border-width-thin) solid var(--color-border);
}
.ml-tier-badge--paid {
  background: var(--color-accent-50);
  color: var(--color-accent-700);
  border: var(--border-width-thin) solid var(--color-accent-100);
}
.ml-tier-badge--comped {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  border: var(--border-width-thin) solid var(--color-surface-inverse);
}

/* Pull quote primitive */
.ml-pullquote {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-main);
  margin: 0;
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  border-left: var(--border-width-thick) solid var(--color-accent-500);
  font-weight: var(--font-weight-medium);
  font-style: normal;
}
.ml-pullquote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  font-style: normal;
}

/* Inline code */
.ml-code-inline {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  padding: 2px var(--space-2);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  color: var(--color-text-main);
  border: var(--border-width-thin) solid var(--color-border-subtle);
}

/* Code block */
.ml-code-block {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  border: var(--border-width-thin) solid var(--color-border-subtle);
  color: var(--color-text-main);
  overflow-x: auto;
  margin: 0;
}

/* ml-post-card */
.ml-post-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--transition-base) var(--transition-ease), box-shadow var(--transition-base) var(--transition-ease);
}
.ml-post-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}
.ml-post-card__image {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--color-neutral-100), var(--color-neutral-200));
}
.ml-post-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.ml-post-card__kicker {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-accent);
}
.ml-post-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
  margin: 0;
}
.ml-post-card__excerpt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
  margin: 0;
}
.ml-post-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.ml-post-card__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-neutral-300), var(--color-neutral-500));
  flex-shrink: 0;
}
.ml-post-card__author {
  color: var(--color-text-main);
  font-weight: var(--font-weight-medium);
}

/* ml-author-card */
.ml-author-card {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  align-items: flex-start;
}
.ml-author-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-accent-300), var(--color-accent-600));
  flex-shrink: 0;
}
.ml-author-card__body { flex: 1; }
.ml-author-card__name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-main);
  margin: 0 0 var(--space-1);
}
.ml-author-card__role {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}
.ml-author-card__bio {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.ml-author-card__social {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.ml-author-card__social a {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-mono);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast) var(--transition-ease), border-color var(--transition-fast) var(--transition-ease);
}
.ml-author-card__social a:hover {
  color: var(--color-text-main);
  border-color: var(--color-border-strong);
}

/* ml-tier-card */
.ml-tier-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  max-width: 380px;
}
.ml-tier-card__header { display: flex; flex-direction: column; gap: var(--space-2); }
.ml-tier-card__name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0;
}
.ml-tier-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
  margin: 0;
}
.ml-tier-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border);
}
.ml-tier-card__amount {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-main);
  line-height: 1;
}
.ml-tier-card__period {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.ml-tier-card__benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ml-tier-card__benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-main);
  line-height: var(--line-height-snug);
}
.ml-tier-card__benefits li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230369a1' stroke-width='2.5'><path d='M3 8l3 3 7-7'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* ml-email-optin */
.ml-email-optin {
  padding: var(--space-8);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 520px;
}
.ml-email-optin__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-main);
  margin: 0;
}
.ml-email-optin__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
  margin: 0 0 var(--space-2);
}
.ml-email-optin__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

/* ml-member-gate */
.ml-member-gate {
  position: relative;
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.ml-member-gate__preview {
  padding: var(--space-8);
  position: relative;
  max-height: 280px;
  overflow: hidden;
}
.ml-member-gate__preview::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, var(--color-surface));
  pointer-events: none;
}
.ml-member-gate__preview p {
  margin: 0 0 var(--space-4);
  color: var(--color-text-main);
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
}
.ml-member-gate__cta {
  padding: var(--space-8);
  border-top: var(--border-width-thin) solid var(--color-border);
  background: var(--color-surface-alt);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.ml-member-gate__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-main);
  margin: 0;
}
.ml-member-gate__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
  margin: 0 0 var(--space-3);
  max-width: 48ch;
}
.ml-member-gate__actions {
  display: flex;
  gap: var(--space-3);
}

/* Article Style Guide */
.ml-article {
  max-width: var(--container-width-narrow);
  font-family: var(--font-family-body);
  color: var(--color-text-main);
  line-height: var(--line-height-loose);
}
.ml-article h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-4);
  color: var(--color-text-main);
}
.ml-article .ml-article__dek {
  font-size: var(--font-size-xl);
  color: var(--color-text-muted);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-8);
}
.ml-article h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-12) 0 var(--space-4);
  color: var(--color-text-main);
}
.ml-article h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-10) 0 var(--space-3);
  color: var(--color-text-main);
}
.ml-article h4 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  margin: var(--space-8) 0 var(--space-2);
}
.ml-article h5 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-6) 0 var(--space-2);
}
.ml-article h6 {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-6) 0 var(--space-2);
}
.ml-article p {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-5);
  line-height: var(--line-height-loose);
}
.ml-article a {
  color: var(--color-text-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-200);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast) var(--transition-ease);
}
.ml-article a:hover { text-decoration-color: var(--color-accent-500); }
.ml-article strong { font-weight: var(--font-weight-semibold); color: var(--color-text-main); }
.ml-article em { font-style: italic; }
.ml-article ul, .ml-article ol {
  margin: 0 0 var(--space-5);
  padding-left: var(--space-6);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-loose);
}
.ml-article li { margin-bottom: var(--space-2); }
.ml-article blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: var(--border-width-thick) solid var(--color-border-strong);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
}
.ml-article blockquote p { margin-bottom: var(--space-3); font-size: inherit; }
.ml-article blockquote cite {
  display: block;
  font-style: normal;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}
.ml-article hr {
  border: 0;
  height: var(--border-width-thin);
  background: var(--color-border);
  margin: var(--space-12) auto;
  width: 80px;
}
.ml-article figure { margin: var(--space-8) 0; }
.ml-article figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}
.ml-article figure figcaption {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  line-height: var(--line-height-snug);
  text-align: center;
}
.ml-article .kg-image-card.kg-width-wide {
  max-width: var(--container-width-wide);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.ml-article .kg-image-card.kg-width-wide img {
  border-radius: var(--radius-md);
}

/* Koenig callout */
.ml-article .kg-callout-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-alt);
  border: var(--border-width-thin) solid var(--color-border);
  border-left: var(--border-width-thick) solid var(--color-accent-500);
  border-radius: var(--radius-md);
}
.ml-article .kg-callout-emoji {
  font-size: var(--font-size-xl);
  line-height: 1;
  flex-shrink: 0;
}
.ml-article .kg-callout-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-main);
  margin: 0;
}

/* Koenig bookmark */
.ml-article .kg-bookmark-card {
  margin: var(--space-8) 0;
  display: flex;
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-base) var(--transition-ease), box-shadow var(--transition-base) var(--transition-ease);
}
.ml-article .kg-bookmark-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}
.ml-article .kg-bookmark-content {
  flex: 1;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ml-article .kg-bookmark-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-main);
  line-height: var(--line-height-snug);
}
.ml-article .kg-bookmark-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ml-article .kg-bookmark-metadata {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
}
.ml-article .kg-bookmark-icon {
  width: 14px;
  height: 14px;
  background: var(--color-accent-200);
  border-radius: 2px;
  flex-shrink: 0;
}
.ml-article .kg-bookmark-thumbnail {
  flex-shrink: 0;
  width: 160px;
  background: linear-gradient(135deg, var(--color-neutral-100), var(--color-neutral-300));
}

.ml-article .ml-code-block { margin: var(--space-6) 0; }
.ml-article .ml-pullquote { margin: var(--space-8) 0; }

/* ----- base/dark-mode.css ----- */
/* =============================================================================
   DARK-MODE.CSS — Universal dark palette. Applies the same way on top of any
   design system; only palette variables are overridden. Typography, radius,
   padding, and layout are never flipped by color scheme.

   Load order: AFTER the active design system's CSS so this block wins when
   the [data-color-scheme="dark"] attribute is present on <html>.
   ============================================================================= */

:root[data-color-scheme="dark"] {

    --color-background-main: #18181b;
    --color-text-main: #fafafa;
    --accent-color: #fafafa;

    --background-color-button: #fafafa;
    --color-buttons-main-text: #18181b;
    --color-buttons-secondary: #27272a;
    --color-buttons-secondary-text: #fafafa;
    --color-buttons-secondary-hover: #3f3f46;

    --color-text-lighter: #a1a1aa;
    --color-text-tags: #d4d4d8;
    --color-text-meta: #71717a;
    --color-text-post: #e4e4e7;
    --color-text-input: #fafafa;
    --color-text-tier-desc: #a1a1aa;

    --color-background-elements-main: #27272a;
    --color-background-elements-main-hover: #3f3f46;
    --color-background-text-blocks: #27272a;
    --color-background-block-hover: #3f3f46;

    --color-borders: #27272a;
    --color-bookmark-border: #27272a;

    --color-link: #a1a1aa;
    --color-link-hover: #d4d4d8;
    --color-card-title-hover: #d4d4d8;
    --color-nav-link-hover: #a1a1aa;

    --form-input-focus-color: #52525b;

    --color-dark-mode-slider: #52525b;
    --color-footer-meta-separator: #52525b;
    --color-audio-thumbnail-placeholder: #3f3f46;

    --color-background-hero: #18181b;
    --color-background-footer: #18181b;
}

/* ----- header/header-01-logo-left ----- */
/* =============================================================================
   HEADER-01-LOGO-LEFT.CSS

   "Logo on the left" is the default navigation layout and intentionally has
   NO variant-specific CSS. It renders with no `is-head-*` body class and
   relies entirely on the shared base rules in assets/css/header.css
   (.ml-header, .ml-header-inner, .ml-site-title, .ml-nav, .ml-header-right,
   .ml-search-btn, .ml-dark-mode-toggle, .ml-burger-btn, mobile menu, mega
   menu, and the responsive @media (max-width: 900px) block).

   This file is kept as a placeholder so the component folder matches the
   { .hbs, .css, meta.json } pattern defined in ARCHITECTURE.md. When the
   other nine nav-layout variants are migrated, the base/shared rules will
   be split out of header.css into the design system (or a shared header
   partial) and each variant's own `is-head-*` rules will live in its own
   CSS file.
   ============================================================================= */

/* ----- hero/hero-04-bottom-slider ----- */
/* =============================================================================
   HERO-04-BOTTOM-SLIDER.CSS
   "Bottom slider" — centered title/description above, full-width Swiper slider
   below (up to 8 featured posts). Requires the global Swiper bundle loaded via
   assets/js/index.js and an initialization targeting .ml-hero-bottom-swiper.
   ============================================================================= */

.ml-hero-section--bottom-slider {
    padding-bottom: 0;
}

.ml-hero-section--bottom-slider .ml-hero-top {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: var(--section-padding-mobile);
}

.ml-hero-section--bottom-slider .ml-hero-slider-full {
    position: relative;
    overflow: hidden;
}

.ml-hero-section--bottom-slider .swiper {
    overflow: visible;
}

.ml-hero-section--bottom-slider .swiper-slide {
    width: 420px;
    border-radius: var(--border-radius-containers);
    overflow: hidden;
    background-color: var(--color-background-elements-main);
}

.ml-hero-section--bottom-slider .swiper-slide a {
    display: block;
    text-decoration: none;
}

.ml-hero-section--bottom-slider .swiper-slide img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.ml-hero-section--bottom-slider .ml-hero-slide-info {
    padding: 16px;
}

.ml-hero-section--bottom-slider .ml-hero-slide-info__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--color-text-main);
    transition: color var(--transition-base) var(--ease-out);
}

.ml-hero-section--bottom-slider .swiper-slide a:hover .ml-hero-slide-info__title {
    color: var(--color-card-title-hover);
}

/* Ensure Swiper flex layout isn't stripped by minifier */
.ml-hero-bottom-swiper .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

.ml-hero-bottom-swiper .swiper-slide {
    flex-shrink: 0;
}

/* Override Swiper default ::after arrow icons — we use custom SVGs */
.ml-hero-bottom-swiper .swiper-button-prev::after,
.ml-hero-bottom-swiper .swiper-button-next::after {
    display: none;
}

.ml-hero-bottom-swiper .swiper-button-prev,
.ml-hero-bottom-swiper .swiper-button-next {
    width: 36px;
    height: 36px;
    background-color: var(--color-background-main);
    border: 1px solid var(--color-borders);
    border-radius: var(--radius-circle);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast) var(--ease-out);
}

.ml-hero-bottom-swiper .swiper-button-prev:hover,
.ml-hero-bottom-swiper .swiper-button-next:hover {
    background-color: var(--color-background-elements-main);
}

.ml-hero-bottom-swiper .swiper-button-prev svg,
.ml-hero-bottom-swiper .swiper-button-next svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .ml-hero-section--bottom-slider .swiper-slide {
        width: 280px;
    }
}

/* ----- tag-section/tag-section-01-big-carousel ----- */
/* =============================================================================
   TAG-SECTION-01-BIG-CAROUSEL.CSS
   "Big carousel" — horizontal Swiper of posts for a single tag, 380px slides.
   Requires the global Swiper bundle loaded via assets/js/index.js and an
   initialization targeting .ml-tag-carousel-big.
   ============================================================================= */

.ml-carousel-wrap {
    position: relative;
}

.ml-tag-carousel-big {
    overflow: hidden;
}

/* Ensure Swiper wrapper is flex — cssnano can strip Swiper's base rules */
.ml-tag-carousel-big .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* Slide widths — flex-shrink:0 prevents slides collapsing if Swiper base rule is stripped */
.ml-tag-carousel-big .swiper-slide {
    flex-shrink: 0;
    width: 380px;
}

/* Nav buttons */
.ml-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    background-color: var(--color-background-main);
    border: 1px solid var(--color-borders);
    color: var(--color-text-main);
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-out), opacity var(--transition-fast) var(--ease-out);
}

.ml-carousel-btn:hover {
    background-color: var(--color-background-elements-main);
}

.ml-carousel-btn--prev {
    left: -18px;
}

.ml-carousel-btn--next {
    right: -18px;
}

.ml-carousel-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.swiper-button-disabled.ml-carousel-btn {
    opacity: 0.3;
    pointer-events: none;
}

@media (max-width: 900px) {
    .ml-tag-carousel-big .swiper-slide {
        width: 300px;
    }

    .ml-carousel-btn--prev {
        left: 0;
    }

    .ml-carousel-btn--next {
        right: 0;
    }
}

@media (max-width: 600px) {
    .ml-tag-carousel-big .swiper-slide {
        width: 260px;
    }
}

/* ----- tag-section/tag-section-03-big-grid ----- */
/* =============================================================================
   TAG-SECTION-03-BIG-GRID.CSS
   "Big grid" — 3-column responsive grid of posts for a single tag (up to 9).
   Collapses to 2 columns ≤900px and stays 2 columns ≤600px with tighter gaps.
   ============================================================================= */

.ml-tag-grid--big {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

@media (max-width: 900px) {
    .ml-tag-grid--big {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}

@media (max-width: 600px) {
    .ml-tag-grid--big {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

/* ----- post-card/post-card-01-image-dominant ----- */
/* =============================================================================
   POST-CARD-01-IMAGE-DOMINANT.CSS
   "Image-dominant stacked" — 4:3 feature image on top, content below. Default
   variant. Rendered inside a .ml-post-grid wrapper in the consumer template.
   ============================================================================= */

.ml-post-card--image .ml-post-card__image-wrapper {
    aspect-ratio: 4 / 3;
}

/* ----- legacy footer.css ----- */
/* =============================================================================
   FOOTER.CSS — Site footer.
   ============================================================================= */

.ml-footer {
    background-color: var(--color-background-footer);
    border-top: 1px solid var(--color-borders);
    transition: background-color var(--transition-base) var(--ease-out);
}

.ml-footer-inner {
    padding-top: var(--section-padding-mobile);
    padding-bottom: 32px;
}

/* Footer grid: logo+desc on left, nav columns on right */
.ml-footer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    margin-bottom: 48px;
}

.ml-footer-brand__logo {
    max-height: 28px;
    width: auto;
    margin-bottom: 16px;
}

.ml-footer-brand__title {
    font-family: var(--font-family-headings);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--font-color-hero);
    margin-bottom: 12px;
}

.ml-footer-brand__description {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-lighter);
    max-width: 280px;
}

/* Footer navigation */
.ml-footer-nav {
    display: flex;
    gap: 64px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ml-footer-nav-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 120px;
}

.ml-footer-nav-group__heading {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--font-color-hero);
    margin-bottom: 4px;
}

.ml-footer-nav-group a {
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-footer-nav-group a:hover {
    color: var(--font-color-hero);
}

/* Footer bottom bar */
.ml-footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid var(--color-borders);
    gap: 16px;
    flex-wrap: wrap;
}

.ml-footer-meta__copyright {
    font-size: var(--font-size-xs);
    color: var(--color-text-lighter);
}

.ml-footer-meta__copyright a {
    color: var(--color-text-lighter);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-footer-meta__copyright a:hover {
    color: var(--color-text-main);
}

.ml-footer-meta__links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ml-footer-meta__links a {
    font-size: var(--font-size-xs);
    color: var(--color-text-lighter);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-footer-meta__links a:hover {
    color: var(--color-text-main);
}

/* Social icons in footer */
.ml-footer-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: var(--space-5);
}

.ml-footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-text-lighter);
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-footer-socials a:hover {
    color: var(--font-color-hero);
}

.ml-footer-socials svg {
    width: 16px;
    height: 16px;
}

/* Subscribe CTA in footer */
.ml-footer-subscribe {
    text-align: center;
    padding: var(--section-padding-mobile) 0;
    border-bottom: 1px solid var(--color-borders);
    margin-bottom: 40px;
}

.ml-footer-subscribe__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--font-color-hero);
    margin-bottom: 12px;
}

.ml-footer-subscribe__sub {
    font-size: var(--font-size-base);
    color: var(--color-text-lighter);
    margin-bottom: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}


/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .ml-footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .ml-footer-nav {
        justify-content: flex-start;
        gap: var(--space-8);
    }

    .ml-footer-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ----- legacy header.css ----- */
/* =============================================================================
   HEADER.CSS — Sticky site header with 10 navigation layout variants.
   Layout variants are controlled by body class modifiers set in default.hbs.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Base header
   -------------------------------------------------------------------------- */

.ml-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: var(--color-background-main);
    border-bottom: var(--header-border-style, 1px solid var(--color-borders));
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    transition: background-color var(--transition-base) var(--ease-out), border-color var(--transition-base) var(--ease-out);
}

/* Semi-transparent background so blur shows through */
.ml-header {
    background-color: color-mix(in srgb, var(--color-background-main) 85%, transparent);
}

.ml-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--header-padding, 20px 32px);
    gap: var(--nav-gap, 24px);
}


/* -----------------------------------------------------------------------------
   Logo / site title
   -------------------------------------------------------------------------- */

.ml-site-title {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-family: var(--font-family-headings);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-main);
    text-decoration: none;
    transition: opacity var(--transition-fast) var(--ease-out);
}

.ml-site-title:hover {
    opacity: 0.8;
    color: var(--color-text-main);
}

.ml-site-logo {
    max-height: 32px;
    width: auto;
    display: block;
}

/* Dark mode logo: hide/show based on scheme */
.ml-site-logo-dark {
    display: none;
}

:root[data-color-scheme="dark"] .ml-site-logo {
    display: none;
}

:root[data-color-scheme="dark"] .ml-site-logo-dark {
    display: block;
}

/* Author avatar in header */
.ml-header-author {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.ml-header-author__image {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    flex-shrink: 0;
}

.ml-header-author__name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    white-space: nowrap;
}


/* -----------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.ml-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ml-nav > ul {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ml-nav > ul > li {
    display: flex;
}

.ml-nav a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-family: var(--font-family-navigation);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: var(--text-transform-navigation);
    line-height: var(--line-height-snug);
    color: var(--color-text-lighter);
    text-decoration: none;
    border-radius: var(--border-radius-containers);
    transition: color var(--transition-fast) var(--ease-out), background-color var(--transition-fast) var(--ease-out);
    white-space: nowrap;
}

.ml-nav a:hover,
.ml-nav a.nav-current {
    color: var(--color-text-main);
    background-color: var(--color-background-elements-main);
}


/* -----------------------------------------------------------------------------
   Navigation — dropdown panels
   -------------------------------------------------------------------------- */

.ml-nav-dropdown {
    position: relative;
}

.ml-nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-family: var(--font-family-navigation);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: var(--text-transform-navigation);
    line-height: var(--line-height-snug);
    color: var(--color-text-lighter);
    background: none;
    border: none;
    border-radius: var(--border-radius-containers);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast) var(--ease-out), background-color var(--transition-fast) var(--ease-out);
}

.ml-nav-dropdown-trigger:hover,
.ml-nav-dropdown.is-open .ml-nav-dropdown-trigger {
    color: var(--color-text-main);
    background-color: var(--color-background-elements-main);
}

.ml-nav-chevron {
    flex-shrink: 0;
    transition: transform var(--transition-base) var(--ease-out);
}

.ml-nav-dropdown.is-open .ml-nav-chevron {
    transform: rotate(180deg);
}

.ml-nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background-main);
    border: 1px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition-fast) var(--ease-out), transform var(--transition-fast) var(--ease-out), visibility var(--transition-fast) var(--ease-out);
}

.ml-nav-dropdown.is-open .ml-nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ml-nav-dropdown-panel li {
    display: flex;
    flex-direction: column;
}

.ml-nav-dropdown-panel a {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-lighter);
    text-decoration: none;
    border-radius: calc(var(--border-radius-containers) - 2px);
    white-space: nowrap;
    transition: color var(--transition-fast) var(--ease-out), background-color var(--transition-fast) var(--ease-out);
}

.ml-nav-dropdown-panel a:hover {
    color: var(--color-text-main);
    background-color: var(--color-background-elements-main);
}

.ml-nav-dropdown-sep {
    height: 1px;
    background-color: var(--color-borders);
    margin: 4px 6px;
    display: block;
    flex-shrink: 0;
}

.ml-nav-dropdown-section {
    display: block;
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-meta);
    white-space: nowrap;
}

/* Top-level separators in horizontal desktop nav */
.ml-nav > ul > .ml-nav-sep {
    width: 1px;
    height: 18px;
    background-color: var(--color-borders);
    margin: 0 4px;
    align-self: center;
    flex-shrink: 0;
    display: block;
}

/* Top-level section labels hidden in horizontal nav (meaningless without grouping) */
.ml-nav > ul > .ml-nav-section-label {
    display: none;
}


/* -----------------------------------------------------------------------------
   Navigation — mobile dropdown (accordion)
   -------------------------------------------------------------------------- */

.ml-mobile-menu__nav .ml-nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: var(--font-size-lg);
    color: var(--color-text-main);
    border-radius: var(--border-radius-containers);
}

.ml-mobile-menu__nav .ml-nav-dropdown-trigger:hover,
.ml-mobile-menu__nav .ml-nav-dropdown.is-open .ml-nav-dropdown-trigger {
    background-color: var(--color-background-elements-main);
    color: var(--color-text-main);
}

.ml-mobile-dropdown-panel {
    list-style: none;
    margin: 0 0 4px 16px;
    padding: 0;
    border-left: 2px solid var(--color-borders);
    display: none;
}

.ml-nav-dropdown.is-open .ml-mobile-dropdown-panel {
    display: block;
}

.ml-mobile-dropdown-panel li {
    display: flex;
    flex-direction: column;
}

.ml-mobile-dropdown-panel a {
    display: block;
    padding: 10px 16px;
    font-size: var(--font-size-base);
    color: var(--color-text-lighter);
    text-decoration: none;
    border-radius: var(--border-radius-containers);
    transition: background-color var(--transition-fast) var(--ease-out), color var(--transition-fast) var(--ease-out);
}

.ml-mobile-dropdown-panel a:hover {
    background-color: var(--color-background-elements-main);
    color: var(--color-text-main);
}

.ml-mobile-dropdown-panel .ml-nav-dropdown-sep {
    margin: 4px 16px;
}

.ml-mobile-dropdown-panel .ml-nav-dropdown-section {
    padding: 10px 16px 4px;
}

/* Top-level separator and section label in mobile menu */
.ml-mobile-menu__nav > ul > .ml-nav-sep {
    display: block;
    height: 1px;
    background-color: var(--color-borders);
    margin: 8px 0;
    width: 100%;
}

.ml-mobile-menu__nav > ul > .ml-nav-section-label {
    display: block;
    padding: 12px 16px 4px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-meta);
}


/* -----------------------------------------------------------------------------
   Header right actions
   -------------------------------------------------------------------------- */

.ml-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ml-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-containers);
    background-color: transparent;
    color: var(--color-text-lighter);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base) var(--ease-out), color var(--transition-base) var(--ease-out);
}

.ml-search-btn:hover {
    background-color: var(--color-background-elements-main);
    color: var(--color-text-main);
}

.ml-search-btn svg {
    width: 18px;
    height: 18px;
}

.ml-header-cta {
    font-size: var(--font-size-sm);
    padding: 8px 18px;
}

/* Dark mode toggle button */
.ml-dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-containers);
    background-color: transparent;
    color: var(--color-text-lighter);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base) var(--ease-out), color var(--transition-base) var(--ease-out);
    position: relative;
}

.ml-dark-mode-toggle:hover {
    background-color: var(--color-background-elements-main);
    color: var(--color-text-main);
}

.ml-dark-mode-toggle svg {
    width: 18px;
    height: 18px;
    position: absolute;
}

/* Show sun in dark mode, moon in light mode */
.ml-dark-mode-toggle .icon-sun {
    opacity: 0;
}

.ml-dark-mode-toggle .icon-moon {
    opacity: 1;
}

:root[data-color-scheme="dark"] .ml-dark-mode-toggle .icon-sun {
    opacity: 1;
}

:root[data-color-scheme="dark"] .ml-dark-mode-toggle .icon-moon {
    opacity: 0;
}

/* Social icons in header (for layouts that include them) */
.ml-header-socials {
    display: none;
    align-items: center;
    gap: 4px;
}

.ml-header-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-text-lighter);
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-header-socials a:hover {
    color: var(--color-text-main);
}

.ml-header-socials svg {
    width: 16px;
    height: 16px;
}

/* Burger / hamburger button */
.ml-burger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-containers);
    background-color: transparent;
    color: var(--color-text-main);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base) var(--ease-out);
}

.ml-burger-btn:hover {
    background-color: var(--color-background-elements-main);
}

.ml-burger-btn svg {
    width: 20px;
    height: 20px;
}


/* =============================================================================
   Navigation layout variants — body class modifiers
   ============================================================================= */

/* ── Logo on the left (default) ─────────────────────────────────────────── */
/* No extra class needed; this is the base layout */

/* ── Author on the left ─────────────────────────────────────────────────── */
/* Same structure as left logo; header partial handles logo vs author display */

/* ── Logo / Author in the middle ────────────────────────────────────────── */
/*
 * Four children in DOM order: ml-header-left (logo or author), ml-header-center
 * (unused placeholder), ml-nav, ml-header-right (actions). Grid areas pin each
 * to the correct column. Result: nav | logo-or-author | actions
 */
.is-head-middle-logo .ml-header-inner,
.is-head-middle-author .ml-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "nav logo actions";
    align-items: center;
}

.is-head-middle-logo .ml-header-left,
.is-head-middle-author .ml-header-left {
    grid-area: logo;
    display: flex;
    justify-content: center;
}

.is-head-middle-logo .ml-header-center,
.is-head-middle-author .ml-header-center {
    display: none;
}

.is-head-middle-logo .ml-nav,
.is-head-middle-author .ml-nav {
    grid-area: nav;
    display: flex;
    justify-content: flex-start;
}

.is-head-middle-logo .ml-header-right,
.is-head-middle-author .ml-header-right {
    grid-area: actions;
    display: flex;
    justify-content: flex-end;
}


/* ── Logo / Author with social icons ────────────────────────────────────── */
.is-head-include-social-icons .ml-header-socials {
    display: flex;
}


/* ── Mobile menu / hamburger layouts ────────────────────────────────────── */
.is-head-hamburger .ml-nav {
    display: none;
}

.is-head-hamburger .ml-burger-btn {
    display: inline-flex;
}

/* When menu is open, hide burger, show close */
.is-head-hamburger.is-menu-open .ml-burger-btn .icon-burger {
    display: none;
}

.is-head-hamburger.is-menu-open .ml-burger-btn .icon-close {
    display: block;
}

.ml-burger-btn .icon-close {
    display: none;
}


/* =============================================================================
   Mobile menu drawer
   ============================================================================= */

.ml-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 38;
    background-color: var(--color-overlay-medium);
}

.is-menu-open .ml-mobile-overlay {
    display: block;
}

.ml-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 39;
    background-color: var(--color-background-main);
    padding: 72px 24px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-base) var(--ease-out);
}

.is-menu-open .ml-mobile-menu {
    transform: translateX(0);
}

.ml-mobile-menu__close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-containers);
    background-color: transparent;
    color: var(--color-text-main);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-out);
}

.ml-mobile-menu__close:hover {
    background-color: var(--color-background-elements-main);
}

.ml-mobile-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 32px;
}

.ml-mobile-menu__nav a {
    display: block;
    padding: 12px 16px;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
    border-radius: var(--border-radius-containers);
    transition: background-color var(--transition-fast) var(--ease-out);
    text-decoration: none;
}

.ml-mobile-menu__nav a:hover {
    background-color: var(--color-background-elements-main);
}

.ml-mobile-menu__footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--color-borders);
}

.ml-mobile-menu__socials {
    display: flex;
    gap: 16px;
}

.ml-mobile-menu__socials a {
    color: var(--color-text-lighter);
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-mobile-menu__socials a:hover {
    color: var(--color-text-main);
}

.ml-mobile-menu__socials svg {
    width: 20px;
    height: 20px;
}


/* =============================================================================
   Mega menu panel
   ============================================================================= */

.ml-mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 49;
    background-color: var(--color-background-main);
    border-bottom: 1px solid var(--color-borders);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast) var(--ease-out), transform var(--transition-fast) var(--ease-out), visibility var(--transition-fast) var(--ease-out);
}

.ml-mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ml-mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: var(--space-5) 0;
}

.ml-mega-menu__card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: var(--border-radius-containers);
    padding: 10px;
    transition: background-color var(--transition-fast) var(--ease-out);
}

.ml-mega-menu__card:hover {
    background-color: var(--color-background-elements-main);
}

.ml-mega-menu__img-wrap {
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--border-radius-containers) - 2px);
    overflow: hidden;
    background-color: var(--color-background-elements-main);
    margin-bottom: 10px;
    flex-shrink: 0;
}

.ml-mega-menu__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
    .ml-mega-menu__card:hover .ml-mega-menu__img-wrap img {
        transform: scale(1.03);
    }
}

.ml-mega-menu__info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ml-mega-menu__name {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin-bottom: 4px;
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-mega-menu__card:hover .ml-mega-menu__name {
    color: var(--color-card-title-hover);
}

.ml-mega-menu__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    line-height: var(--line-height-snug);
    margin-bottom: 6px;
}

.ml-mega-menu__count {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    margin-top: auto;
}


/* =============================================================================
   Responsive: hide desktop nav on small screens for ALL layouts
   ============================================================================= */

@media (max-width: 900px) {
    /* Default (non-hamburger) layouts: hide nav, show burger */
    .ml-nav {
        display: none;
    }

    .ml-burger-btn {
        display: inline-flex;
    }
}

/* But for hamburger layouts, burger is always visible */
@media (min-width: 901px) {
    .is-head-hamburger .ml-nav {
        display: none;
    }

    .is-head-hamburger .ml-burger-btn {
        display: inline-flex;
    }
}

/* ----- legacy hero.css ----- */
/* =============================================================================
   HERO.CSS — All 6 hero section variants. One partial controls which renders.
   ============================================================================= */

.ml-hero-section-wrapper {
    position: relative;
    background-color: var(--color-background-hero);
    transition: background-color var(--transition-base) var(--ease-out);
}

.ml-hero-cover {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

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

.ml-hero-cover__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-overlay-medium);
}

.has-cover .ml-hero-section {
    position: relative;
    z-index: 1;
}

.has-cover .ml-hero-title,
.has-cover .ml-hero-description {
    color: var(--color-text-light);
}

.has-cover .ml-hero-description {
    opacity: 0.85;
}

.ml-hero-section {
    padding: var(--section-padding-desktop) 0;
}


/* =============================================================================
   Variant: "Only text"
   Centered text + subscribe CTA. No image.
   ============================================================================= */

.ml-hero-section--only-text {
    text-align: center;
}

.ml-hero-section--only-text .ml-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ml-hero-title {
    font-family: var(--font-family-headings);
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--font-color-hero);
    margin-bottom: 20px;
    max-width: 900px;
}

.ml-hero-description {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--font-color-hero);
    opacity: 0.72;
    max-width: 600px;
    margin-bottom: 36px;
}


/* =============================================================================
   Variant: "Image on the right"
   Text left, featured post image right. Side-by-side split.
   ============================================================================= */

.ml-hero-section--right-image .ml-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.ml-hero-section--right-image .ml-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ml-hero-section--right-image .ml-hero-description {
    max-width: 100%;
}

.ml-hero-section--right-image .ml-hero-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-containers);
    aspect-ratio: 4 / 3;
    background-color: var(--color-background-elements-main);
}

.ml-hero-section--right-image .ml-hero-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    .ml-hero-section--right-image .ml-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .ml-hero-section--right-image .ml-hero-content {
        align-items: center;
        text-align: center;
    }

    .ml-hero-section--right-image .ml-hero-description {
        max-width: 560px;
    }
}


/* =============================================================================
   Variant: "Slider on the right"
   Text left, Swiper slider right.
   ============================================================================= */

.ml-hero-section--right-slider .ml-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.ml-hero-section--right-slider .ml-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ml-hero-section--right-slider .ml-hero-slider-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-containers);
}

.ml-hero-section--right-slider .swiper-slide {
    position: relative;
    border-radius: var(--border-radius-containers);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--color-background-elements-main);
}

.ml-hero-section--right-slider .ml-hero-slide-link {
    display: block;
    position: relative;
    height: 100%;
    text-decoration: none;
}

.ml-hero-section--right-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ml-hero-section--right-slider .ml-hero-slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: var(--gradient-image-scrim);
    border-radius: 0 0 var(--border-radius-containers) var(--border-radius-containers);
}

.ml-hero-section--right-slider .ml-hero-slide-caption__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
    line-height: var(--line-height-snug);
}

/* Ensure Swiper flex layout isn't stripped by minifier */
.ml-hero-right-swiper .swiper-wrapper,
.ml-hero-bottom-swiper .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

.ml-hero-right-swiper .swiper-slide,
.ml-hero-bottom-swiper .swiper-slide {
    flex-shrink: 0;
}

/* Override Swiper default ::after arrow icons — we use custom SVGs */
.ml-hero-right-swiper .swiper-button-prev::after,
.ml-hero-right-swiper .swiper-button-next::after,
.ml-hero-bottom-swiper .swiper-button-prev::after,
.ml-hero-bottom-swiper .swiper-button-next::after {
    display: none;
}

.ml-hero-right-swiper .swiper-button-prev,
.ml-hero-right-swiper .swiper-button-next {
    width: 36px;
    height: 36px;
    background-color: var(--color-surface-on-image);
    border-radius: var(--radius-circle);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast) var(--ease-out);
}

.ml-hero-right-swiper .swiper-button-prev:hover,
.ml-hero-right-swiper .swiper-button-next:hover {
    background-color: var(--color-background-main);
}

.ml-hero-right-swiper .swiper-button-prev svg,
.ml-hero-right-swiper .swiper-button-next svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .ml-hero-section--right-slider .ml-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .ml-hero-section--right-slider .ml-hero-content {
        align-items: center;
        text-align: center;
    }
}


/* =============================================================================
   Variant: "Bottom slider"
   Title and description above. Full-width Swiper slider below.
   ============================================================================= */

.ml-hero-section--bottom-slider {
    padding-bottom: 0;
}

.ml-hero-section--bottom-slider .ml-hero-top {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: var(--section-padding-mobile);
}

.ml-hero-section--bottom-slider .ml-hero-slider-full {
    position: relative;
    overflow: hidden;
}

.ml-hero-section--bottom-slider .swiper {
    overflow: visible;
}

.ml-hero-section--bottom-slider .swiper-slide {
    width: 420px;
    border-radius: var(--border-radius-containers);
    overflow: hidden;
    background-color: var(--color-background-elements-main);
}

.ml-hero-section--bottom-slider .swiper-slide a {
    display: block;
    text-decoration: none;
}

.ml-hero-section--bottom-slider .swiper-slide img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.ml-hero-section--bottom-slider .ml-hero-slide-info {
    padding: 16px;
}

.ml-hero-section--bottom-slider .ml-hero-slide-info__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--color-text-main);
    transition: color var(--transition-base) var(--ease-out);
}

.ml-hero-section--bottom-slider .swiper-slide a:hover .ml-hero-slide-info__title {
    color: var(--color-card-title-hover);
}

.ml-hero-bottom-swiper .swiper-button-prev,
.ml-hero-bottom-swiper .swiper-button-next {
    width: 36px;
    height: 36px;
    background-color: var(--color-background-main);
    border: 1px solid var(--color-borders);
    border-radius: var(--radius-circle);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast) var(--ease-out);
}

.ml-hero-bottom-swiper .swiper-button-prev:hover,
.ml-hero-bottom-swiper .swiper-button-next:hover {
    background-color: var(--color-background-elements-main);
}

.ml-hero-bottom-swiper .swiper-button-prev svg,
.ml-hero-bottom-swiper .swiper-button-next svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .ml-hero-section--bottom-slider .swiper-slide {
        width: 280px;
    }
}


/* =============================================================================
   Variant: "Featured posts"
   One large post (2/3) + stacked secondary posts (1/3).
   ============================================================================= */

.ml-hero-section--featured .ml-hero-featured-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: stretch;
}

/* Big featured post */
.ml-hero-big-featured-post {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--border-radius-containers);
    aspect-ratio: 3 / 2;
    background-color: var(--color-background-elements-main);
    text-decoration: none;
}

.ml-hero-big-featured-post__image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ml-hero-big-featured-post__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ml-hero-big-featured-post__overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-image-scrim);
}

.ml-hero-big-featured-post__info {
    position: absolute;
    inset-x: 0;
    bottom: 0;
    padding: 28px;
}

.ml-hero-big-featured-post__tag {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-on-image-muted);
    margin-bottom: 10px;
}

.ml-hero-big-featured-post__title {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--color-text-light);
    letter-spacing: var(--letter-spacing-tight);
}

.ml-hero-big-featured-post__excerpt {
    margin-top: 10px;
    font-size: var(--font-size-sm);
    color: var(--color-text-on-image-muted);
    line-height: var(--line-height-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Stacked secondary posts (right column) */
.ml-hero-featured-posts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ml-hero-featured-post {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    align-items: start;
    text-decoration: none;
    padding: 12px;
    border-radius: var(--border-radius-containers);
    transition: background-color var(--transition-fast) var(--ease-out);
}

.ml-hero-featured-post:hover {
    background-color: var(--color-background-elements-main);
}

.ml-hero-featured-post__image {
    width: 80px;
    height: 60px;
    overflow: hidden;
    border-radius: var(--border-radius-containers);
    background-color: var(--color-background-elements-main);
    flex-shrink: 0;
}

.ml-hero-featured-post__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ml-hero-featured-post__content {}

.ml-hero-featured-post__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-meta);
    margin-bottom: 4px;
}

.ml-hero-featured-post__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    color: var(--color-text-main);
    transition: color var(--transition-base) var(--ease-out);
}

.ml-hero-featured-post:hover .ml-hero-featured-post__title {
    color: var(--color-card-title-hover);
}

@media (max-width: 900px) {
    .ml-hero-section--featured .ml-hero-featured-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ml-hero-big-featured-post {
        aspect-ratio: 16 / 9;
    }

    .ml-hero-featured-posts-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .ml-hero-featured-post {
        grid-template-columns: 1fr;
    }

    .ml-hero-featured-post__image {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 600px) {
    .ml-hero-featured-posts-list {
        grid-template-columns: 1fr;
    }
}


/* =============================================================================
   Variant: "Without hero section"
   Nothing renders. Homepage starts with content feed.
   ============================================================================= */

.ml-hero-section--none {
    display: none;
}


/* =============================================================================
   Shared responsive adjustments
   ============================================================================= */

@media (max-width: 768px) {
    .ml-hero-section {
        padding: var(--section-padding-mobile) 0;
    }

    .ml-hero-title {
        font-size: clamp(36px, 9vw, 56px);
    }

    .ml-hero-description {
        font-size: var(--font-size-lg);
    }
}

/* ----- legacy post-card.css ----- */
/* =============================================================================
   POST-CARD.CSS — All 4 post card variants and supporting grid/feed layouts.
   ============================================================================= */


/* =============================================================================
   Shared base: all card variants inherit these
   ============================================================================= */

.ml-post-card {
    display: block;
    border: var(--card-border-style, none);
    background-color: var(--card-background, transparent);
    padding: var(--card-padding, 0);
    box-shadow: var(--card-shadow-style, none);
}

.ml-post-card__link {
    display: block;
    text-decoration: none;
}

.ml-post-card__image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-image-radius, var(--border-radius-containers));
    background-color: var(--color-background-elements-main);
    margin-bottom: 16px;
}

.ml-post-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
    .ml-post-card__link:hover .ml-post-card__image {
        transform: scale(1.03);
    }
}

.ml-post-card__tag {
    display: inline-block;
    margin-bottom: 8px;
}

.ml-post-card__title {
    font-family: var(--font-family-card-headings);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-main);
    margin-bottom: 8px;
    transition: color var(--transition-base) var(--ease-out);
}

.ml-post-card__link:hover .ml-post-card__title {
    color: var(--color-card-title-hover);
}

.ml-post-card__excerpt {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-lighter);
    font-weight: var(--font-weight-regular);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ml-post-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    font-weight: var(--font-weight-medium);
}

.ml-post-card__meta-sep {
    width: 2px;
    height: 2px;
    background-color: var(--color-text-meta);
    border-radius: var(--radius-circle);
    flex-shrink: 0;
}

.ml-post-card__meta time {
    white-space: nowrap;
}


/* =============================================================================
   Variant 1: Image-dominant stacked (default)
   4:3 image on top, content below.
   ============================================================================= */

.ml-post-card--image .ml-post-card__image-wrapper {
    aspect-ratio: 4 / 3;
}


/* =============================================================================
   Variant 2: Image-left horizontal
   1:1 thumbnail left, content right.
   ============================================================================= */

.ml-post-card--horizontal .ml-post-card__link {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
    align-items: start;
}

.ml-post-card--horizontal .ml-post-card__image-wrapper {
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
    width: 120px;
}

.ml-post-card--horizontal .ml-post-card__content {
    flex: 1;
    min-width: 0;
}

.ml-post-card--horizontal .ml-post-card__title {
    font-size: var(--font-size-xl);
}

.ml-post-card--horizontal .ml-post-card__excerpt {
    -webkit-line-clamp: 2;
}

/* Access badge inline (no image overlay) */
.ml-post-card--horizontal .ml-access-badge {
    position: static;
    background-color: var(--color-background-elements-main);
    color: var(--color-text-tags);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (max-width: 480px) {
    .ml-post-card--horizontal .ml-post-card__link {
        grid-template-columns: 80px 1fr;
    }

    .ml-post-card--horizontal .ml-post-card__image-wrapper {
        width: 80px;
    }
}


/* =============================================================================
   Variant 3: Minimal (no image, type-only)
   Border-bottom divided list style.
   ============================================================================= */

.ml-post-card--minimal {
    border-bottom: 1px solid var(--color-borders);
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.ml-post-card--minimal:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ml-post-card--minimal .ml-post-card__meta-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.ml-post-card--minimal .ml-post-card__title {
    font-size: var(--font-size-xl);
}


/* =============================================================================
   Variant 4: Grid-compact
   Smaller cards, denser layout, square-ish images.
   ============================================================================= */

.ml-post-card--compact .ml-post-card__image-wrapper {
    aspect-ratio: 3 / 2;
    margin-bottom: 12px;
}

.ml-post-card--compact .ml-post-card__title {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-snug);
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ml-post-card--compact .ml-post-card__excerpt {
    font-size: var(--font-size-sm);
    -webkit-line-clamp: 2;
}


/* =============================================================================
   Post feed grids (wraps cards on index/tag/author pages)
   ============================================================================= */

/* Standard 3-column grid (Image-dominant stacked) */
.ml-post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--card-gap, 40px 32px);
}

/* 2-column grid for horizontal cards */
.ml-post-grid--2col {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}

/* 4-column grid for compact cards */
.ml-post-grid--4col {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6) var(--space-6);
}

/* Single-column list for minimal cards */
.ml-post-list {
    display: flex;
    flex-direction: column;
}

/* Section heading above a feed */
.ml-feed-heading {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
    margin-bottom: 40px;
}

@media (max-width: 1024px) {
    .ml-post-grid--4col {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .ml-post-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8) var(--space-6);
    }

    .ml-post-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ml-post-grid,
    .ml-post-grid--2col,
    .ml-post-grid--4col {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}


/* =============================================================================
   Featured tag sections
   ============================================================================= */

/* Big featured tag grid (2-3 large cards) */
.ml-featured-tags-grid {
    padding: var(--section-padding-desktop) 0;
}

.ml-featured-tags-grid__section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 16px;
}

.ml-featured-tags-grid__title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
}

.ml-featured-tags-grid__link {
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-featured-tags-grid__link:hover {
    color: var(--color-text-main);
}

.ml-featured-tags-grid__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ml-featured-tag-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--border-radius-containers);
    aspect-ratio: 4 / 3;
    background-color: var(--color-background-elements-main);
    text-decoration: none;
}

.ml-featured-tag-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ml-featured-tag-card__overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-image-scrim);
}

.ml-featured-tag-card__content {
    position: absolute;
    inset-x: 0;
    bottom: 0;
    padding: 20px;
}

.ml-featured-tag-card__name {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--color-text-light);
    margin-bottom: 4px;
}

.ml-featured-tag-card__desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-on-image-muted);
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ml-featured-tag-card__count {
    font-size: var(--font-size-sm);
    color: var(--color-text-on-image-muted);
}

/* No-image variant */
.ml-featured-tag-card--no-image .ml-featured-tag-card__name {
    color: var(--color-text-main);
}

.ml-featured-tag-card--no-image .ml-featured-tag-card__desc {
    color: var(--color-text-lighter);
}

.ml-featured-tag-card--no-image .ml-featured-tag-card__count {
    color: var(--color-text-meta);
}

@media (max-width: 768px) {
    .ml-featured-tags-grid__inner {
        grid-template-columns: 1fr;
    }

    .ml-featured-tags-grid {
        padding: var(--section-padding-mobile) 0;
    }
}


/* =============================================================================
   Carousels (Swiper-powered)
   ============================================================================= */

.ml-carousel-section {
    padding: var(--section-padding-desktop) 0;
    overflow: hidden;
}

.ml-carousel-section--small {
    padding: var(--section-padding-mobile) 0;
}

.ml-carousel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}

.ml-carousel-title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
}

.ml-carousel-title--small {
    font-size: var(--font-size-2xl);
}

.ml-carousel-link {
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-carousel-link:hover {
    color: var(--color-text-main);
}

/* Tag slide */
.ml-tag-slide {
    width: auto !important;
    flex-shrink: 0;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-containers);
    background-color: var(--color-background-elements-main);
    text-decoration: none;
    transition: background-color var(--transition-base) var(--ease-out);
}

.ml-tag-slide--big {
    width: 280px !important;
    aspect-ratio: 4 / 3;
}

.ml-tag-slide--small {
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto !important;
    height: auto;
    aspect-ratio: unset;
    border-radius: var(--border-radius-tags);
}

.ml-tag-slide--small:hover {
    background-color: var(--color-background-elements-main-hover);
}

.ml-tag-slide--small span {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tags);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: var(--text-transform-tags);
}

.ml-tag-slide--small .ml-tag-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
}

/* Big tag slide (with image) */
.ml-tag-slide--big .ml-tag-slide__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ml-tag-slide--big .ml-tag-slide__overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-image-scrim);
}

.ml-tag-slide--big .ml-tag-slide__content {
    position: absolute;
    inset-x: 0;
    bottom: 0;
    padding: 16px;
}

.ml-tag-slide--big .ml-tag-slide__name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
    margin-bottom: 4px;
}

.ml-tag-slide--big .ml-tag-slide__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-on-image-muted);
}

/* Author slide */
.ml-author-slide {
    width: 160px !important;
    flex-shrink: 0;
    text-align: center;
    text-decoration: none;
    display: block;
}

.ml-author-slide__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--border-radius-containers);
    background-color: var(--color-background-elements-main);
    margin-bottom: 12px;
}

.ml-author-slide__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ml-author-slide__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    transition: color var(--transition-base) var(--ease-out);
    line-height: var(--line-height-snug);
    margin-bottom: 4px;
}

.ml-author-slide:hover .ml-author-slide__name {
    color: var(--color-card-title-hover);
}

.ml-author-slide__location {
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
}

/* Swiper navigation button overrides */
.ml-carousel-section .swiper-button-prev,
.ml-carousel-section .swiper-button-next {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-buttons);
    background-color: var(--background-color-button);
    color: var(--color-buttons-main-text);
    box-shadow: var(--shadow-sm);
}

.ml-carousel-section .swiper-button-prev::after,
.ml-carousel-section .swiper-button-next::after {
    display: none;
}

.ml-carousel-section .swiper-button-prev svg,
.ml-carousel-section .swiper-button-next svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .ml-carousel-section {
        padding: var(--section-padding-mobile) 0;
    }
}


/* =============================================================================
   Latest posts strip
   ============================================================================= */

.ml-latest-strip {
    padding: var(--section-padding-desktop) 0;
    border-top: 1px solid var(--color-borders);
}

.ml-latest-strip__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 16px;
}

.ml-latest-strip__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-meta);
}

.ml-latest-strip__link {
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-latest-strip__link:hover {
    color: var(--color-text-main);
}

@media (max-width: 768px) {
    .ml-latest-strip {
        padding: var(--section-padding-mobile) 0;
    }
}

/* ----- legacy tag-sections.css ----- */
/* =============================================================================
   TAG-SECTIONS.CSS — Homepage tag carousel and tag grid sections.
   Controlled by the four slug settings in Ghost admin.
   ============================================================================= */

.ml-tag-section {
    padding: var(--section-padding-desktop) 0;
    border-top: 1px solid var(--color-borders);
}

.ml-tag-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.ml-tag-section__names {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.ml-tag-section__title {
    font-family: var(--font-family-headings);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
}

.ml-tag-section__see-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-meta);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-tag-section__see-all:hover {
    color: var(--color-text-main);
}

.ml-tag-section__sep {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-meta);
    line-height: var(--line-height-tight);
}


/* =============================================================================
   Carousel wrapper — positions nav buttons outside the overflow clip
   ============================================================================= */

.ml-carousel-wrap {
    position: relative;
}

.ml-tag-carousel-big,
.ml-tag-carousel-small {
    overflow: hidden;
}

/* Ensure Swiper wrapper is flex — cssnano can strip Swiper's base rules */
.ml-tag-carousel-big .swiper-wrapper,
.ml-tag-carousel-small .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* Slide widths — flex-shrink:0 prevents slides collapsing if Swiper base rule is stripped */
.ml-tag-carousel-big .swiper-slide {
    flex-shrink: 0;
    width: 380px;
}

.ml-tag-carousel-small .swiper-slide {
    flex-shrink: 0;
    width: 260px;
}

/* Nav buttons */
.ml-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    background-color: var(--color-background-main);
    border: 1px solid var(--color-borders);
    color: var(--color-text-main);
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--ease-out), opacity var(--transition-fast) var(--ease-out);
}

.ml-carousel-btn:hover {
    background-color: var(--color-background-elements-main);
}

.ml-carousel-btn--prev {
    left: -18px;
}

.ml-carousel-btn--next {
    right: -18px;
}

.ml-carousel-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.swiper-button-disabled.ml-carousel-btn {
    opacity: 0.3;
    pointer-events: none;
}


/* =============================================================================
   Tag grids
   ============================================================================= */

.ml-tag-grid--big {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.ml-tag-grid--small {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}


/* =============================================================================
   Tag section card (ml-ts-card)
   ============================================================================= */

.ml-ts-card {
    display: flex;
    flex-direction: column;
}

.ml-ts-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
}

.ml-ts-card__image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-containers);
    aspect-ratio: 4 / 3;
    background-color: var(--color-background-elements-main);
    margin-bottom: 14px;
}

.ml-ts-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
    .ml-ts-card__link:hover .ml-ts-card__image {
        transform: scale(1.03);
    }
}

.ml-ts-card__tag {
    margin-bottom: 6px;
    align-self: flex-start;
}

.ml-ts-card__title {
    font-family: var(--font-family-card-headings);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-main);
    margin-bottom: 10px;
    transition: color var(--transition-base) var(--ease-out);
}

.ml-ts-card__link:hover .ml-ts-card__title {
    color: var(--color-card-title-hover);
}

.ml-ts-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    margin-top: auto;
}

/* Smaller title for small carousel/grid */
.ml-tag-section--small-carousel .ml-ts-card__title,
.ml-tag-grid--small .ml-ts-card__title {
    font-size: var(--font-size-xl);
}


/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 900px) {
    .ml-tag-grid--big {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .ml-tag-grid--small {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .ml-tag-carousel-big .swiper-slide {
        width: 300px;
    }

    .ml-carousel-btn--prev {
        left: 0;
    }

    .ml-carousel-btn--next {
        right: 0;
    }
}

@media (max-width: 600px) {
    .ml-tag-section {
        padding: var(--section-padding-mobile) 0;
    }

    .ml-tag-grid--big,
    .ml-tag-grid--small {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .ml-tag-carousel-big .swiper-slide {
        width: 260px;
    }

    .ml-tag-carousel-small .swiper-slide {
        width: 200px;
    }
}

/* ----- legacy buttons.css ----- */
/* =============================================================================
   BUTTONS.CSS — Three button variants. All values via CSS variables.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Primary button
   -------------------------------------------------------------------------- */

.ml-main-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--padding-buttons);
    background-color: var(--background-color-button);
    color: var(--color-buttons-main-text);
    font-family: var(--font-family-buttons);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: var(--text-transform-buttons);
    border-radius: var(--border-radius-buttons);
    border: var(--button-border-style, none);
    cursor: pointer;
    transition: opacity var(--transition-base) var(--ease-out);
    text-decoration: none;
    white-space: nowrap;
    width: max-content;
}

.ml-main-button:hover {
    opacity: 0.82;
    color: var(--color-buttons-main-text);
}

.ml-main-button:focus-visible {
    outline: 2px solid var(--background-color-button);
    outline-offset: 3px;
}

.ml-main-button:disabled,
.ml-main-button[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

.ml-main-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


/* -----------------------------------------------------------------------------
   Secondary button (outlined / inverted)
   -------------------------------------------------------------------------- */

.ml-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--padding-buttons);
    background-color: var(--color-buttons-secondary);
    color: var(--color-buttons-secondary-text);
    font-family: var(--font-family-buttons);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: var(--text-transform-buttons);
    border-radius: var(--border-radius-buttons);
    border: 1px solid var(--color-borders);
    cursor: pointer;
    transition: background-color var(--transition-base) var(--ease-out), color var(--transition-base) var(--ease-out);
    text-decoration: none;
    white-space: nowrap;
    width: max-content;
}

.ml-secondary-button:hover {
    background-color: var(--color-buttons-secondary-hover);
    color: var(--color-buttons-secondary-text);
}

.ml-secondary-button:focus-visible {
    outline: 2px solid var(--color-text-main);
    outline-offset: 3px;
}

.ml-secondary-button:disabled,
.ml-secondary-button[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

.ml-secondary-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


/* -----------------------------------------------------------------------------
   Ghost button (text-only link style)
   -------------------------------------------------------------------------- */

.ml-ghost-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--padding-buttons);
    background-color: transparent;
    color: var(--color-text-main);
    font-family: var(--font-family-buttons);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    text-decoration: underline;
    text-underline-offset: 3px;
    border: none;
    cursor: pointer;
    transition: text-decoration-color var(--transition-fast) var(--ease-out), opacity var(--transition-fast) var(--ease-out);
    white-space: nowrap;
}

.ml-ghost-button:hover {
    text-decoration-color: transparent;
    color: var(--color-text-main);
}

.ml-ghost-button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


/* -----------------------------------------------------------------------------
   Subscribe button (larger, for hero/CTA sections)
   -------------------------------------------------------------------------- */

.ml-subscribe-button {
    padding: var(--padding-subscribe-button);
    font-size: var(--font-size-sm);
}

@media (max-width: 1024px) {
    .ml-subscribe-button {
        font-size: var(--font-size-sm);
    }
}


/* -----------------------------------------------------------------------------
   Icon-only button
   -------------------------------------------------------------------------- */

.ml-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-containers);
    background-color: transparent;
    color: var(--color-text-lighter);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base) var(--ease-out), color var(--transition-base) var(--ease-out);
}

.ml-icon-button:hover {
    background-color: var(--color-background-elements-main);
    color: var(--color-text-main);
}

.ml-icon-button svg {
    width: 18px;
    height: 18px;
}


/* -----------------------------------------------------------------------------
   Access badge (on post cards)
   -------------------------------------------------------------------------- */

.ml-access-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--border-radius-buttons);
    background-color: var(--color-overlay-strong);
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}

.ml-access-badge svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* Inline badge variant (for text cards without an image) */
.ml-access-badge--inline {
    position: static;
    background-color: var(--color-background-elements-main);
    color: var(--color-text-tags);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* -----------------------------------------------------------------------------
   Post access label (on post page header)
   -------------------------------------------------------------------------- */

.ml-post-access-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--border-radius-buttons);
    background-color: var(--color-background-elements-main);
    color: var(--color-text-tags);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.ml-post-access-label svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* ----- legacy forms.css ----- */
/* =============================================================================
   FORMS.CSS — Input fields, labels, and form layouts. All values via variables.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Label
   -------------------------------------------------------------------------- */

.ml-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
    margin-bottom: 6px;
    line-height: var(--line-height-snug);
}

.ml-label--required::after {
    content: ' *';
    color: var(--color-error);
}


/* -----------------------------------------------------------------------------
   Input and textarea
   -------------------------------------------------------------------------- */

.ml-input,
.ml-textarea,
.ml-select {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--color-background-main);
    color: var(--color-text-input);
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    border: 1px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    transition: border-color var(--transition-fast) var(--ease-out), box-shadow var(--transition-fast) var(--ease-out);
    appearance: none;
    -webkit-appearance: none;
}

.ml-input::placeholder,
.ml-textarea::placeholder {
    color: var(--color-text-meta);
}

.ml-input:focus,
.ml-textarea:focus,
.ml-select:focus {
    border-color: var(--form-input-focus-color);
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.ml-input:disabled,
.ml-textarea:disabled,
.ml-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-background-elements-main);
}

.ml-input--error,
.ml-textarea--error {
    border-color: var(--color-error);
}

.ml-input--error:focus,
.ml-textarea--error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.ml-textarea {
    resize: vertical;
    min-height: 120px;
}

.ml-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
    cursor: pointer;
}


/* -----------------------------------------------------------------------------
   Form field wrapper (label + input)
   -------------------------------------------------------------------------- */

.ml-form-field {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ml-form-field + .ml-form-field {
    margin-top: 20px;
}

.ml-form-hint {
    margin-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-lighter);
    line-height: var(--line-height-snug);
}

.ml-form-error {
    margin-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-error);
    line-height: var(--line-height-snug);
}


/* -----------------------------------------------------------------------------
   Subscribe form (email + button inline)
   -------------------------------------------------------------------------- */

.ml-subscribe-form {
    width: 100%;
}

.ml-subscribe-form__inner {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    max-width: 480px;
    margin: 0 auto;
}

.ml-subscribe-form__input {
    flex: 1;
    min-width: 0;
}

.ml-subscribe-form__status {
    margin-top: 12px;
    font-size: var(--font-size-sm);
    text-align: center;
    color: var(--color-text-lighter);
}

.ml-subscribe-form__status--success {
    color: var(--color-success);
}

.ml-subscribe-form__status--error {
    color: var(--color-error);
}

@media (max-width: 480px) {
    .ml-subscribe-form__inner {
        flex-direction: column;
    }

    .ml-subscribe-form__inner .ml-main-button {
        width: 100%;
    }
}


/* -----------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.ml-contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ml-contact-form__submit {
    margin-top: 8px;
}


/* -----------------------------------------------------------------------------
   Ghost: Members form override
   -------------------------------------------------------------------------- */

.gh-signin-form,
.gh-signup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ----- legacy content.css ----- */
/* =============================================================================
   CONTENT.CSS — Post body prose, all 11 Ghost card types, and post headers.
   ============================================================================= */


/* =============================================================================
   Post header
   ============================================================================= */

.ml-post-header {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: var(--section-padding-mobile) 0 40px;
    text-align: center;
}

.ml-post-header__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ml-post-header__title {
    font-family: var(--font-family-headings);
    font-size: clamp(32px, 5vw, var(--font-size-5xl));
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.15;
    color: var(--color-text-main);
    margin-bottom: 20px;
}

.ml-post-header__excerpt {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-normal);
    color: var(--color-text-lighter);
    max-width: 560px;
    margin: 0 auto 28px;
}

.ml-post-header__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--color-text-meta);
}

.ml-post-header__meta-sep {
    color: var(--color-borders);
}

.ml-post-header__author {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text-meta);
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-post-header__author:hover {
    color: var(--color-text-main);
}

.ml-post-header__author-image,
.ml-post-header__author-img {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    flex-shrink: 0;
}

/* Feature image below header */
.ml-post-feature-image {
    max-width: var(--container-max-width);
    margin: 0 auto 56px;
    padding: 0 32px;
}

.ml-post-feature-image img {
    width: 100%;
    border-radius: var(--border-radius-containers);
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Wide post variant */
.ml-post--wide .ml-post-header {
    max-width: 860px;
}

.ml-post--wide .ml-post-feature-image {
    padding: 0;
}


/* =============================================================================
   Post body prose wrapper
   ============================================================================= */

.ml-content {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 32px var(--section-padding-desktop);
    font-family: var(--font-family-body);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
    color: var(--color-text-post);
}

/* Wide layout variant */
.ml-post--wide .ml-content {
    max-width: 860px;
}

/* Paragraphs */
.ml-content p {
    margin-bottom: 28px;
}

/* Headings */
.ml-content h1,
.ml-content h2,
.ml-content h3,
.ml-content h4,
.ml-content h5,
.ml-content h6 {
    font-family: var(--font-family-headings);
    color: var(--color-text-main);
    margin-top: 48px;
    margin-bottom: 16px;
    line-height: var(--line-height-snug);
}

.ml-content h2 { font-size: var(--font-size-3xl); letter-spacing: var(--letter-spacing-tight); }
.ml-content h3 { font-size: var(--font-size-2xl); }
.ml-content h4 { font-size: var(--font-size-xl); }
.ml-content h5 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }
.ml-content h6 { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.06em; }

/* Links */
.ml-content a {
    color: var(--color-text-main);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast) var(--ease-out), text-decoration-color var(--transition-fast) var(--ease-out);
}

.ml-content a:hover {
    text-decoration-color: transparent;
    color: var(--color-text-lighter);
}

/* Lists */
.ml-content ul,
.ml-content ol {
    padding-left: 28px;
    margin-bottom: 28px;
    list-style: revert;
}

.ml-content li {
    margin-bottom: 8px;
    line-height: var(--line-height-normal);
}

/* Blockquote */
.ml-content blockquote {
    border-left: 3px solid var(--color-borders);
    padding-left: 24px;
    margin: 40px 0;
    font-style: italic;
    color: var(--color-text-lighter);
}

.ml-content blockquote p {
    margin-bottom: 0;
}

/* Horizontal rule */
.ml-content hr {
    margin: 48px auto;
    max-width: 80px;
}

/* Inline code */
.ml-content code:not(pre code) {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
    background-color: var(--color-background-elements-main);
    color: var(--color-text-main);
    padding: 2px 6px;
    border-radius: var(--border-radius-tags);
}

/* Code block */
.ml-content pre {
    background-color: var(--color-background-text-blocks);
    border: 1px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    padding: 20px 24px;
    overflow-x: auto;
    margin-bottom: 28px;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.ml-content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

/* Tables */
.ml-content table {
    width: 100%;
    margin-bottom: 28px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    overflow: hidden;
}

.ml-content th,
.ml-content td {
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-borders);
}

.ml-content th {
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-background-elements-main);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ml-content tr:last-child td {
    border-bottom: none;
}


/* =============================================================================
   Ghost: Layout grid for wide/full card widths
   ============================================================================= */

.ml-content {
    display: grid;
    grid-template-columns:
        [full-start] 0px
        [wide-start] 0px
        [main-start] 1fr [main-end]
        [wide-end] 0px
        [full-end] 0px;
}

/* Default column */
.ml-content > * {
    grid-column: main-start / main-end;
}

/* Undo grid for non-card elements that use display:block or inline */
.ml-content p,
.ml-content h1, .ml-content h2, .ml-content h3,
.ml-content h4, .ml-content h5, .ml-content h6,
.ml-content ul, .ml-content ol, .ml-content blockquote,
.ml-content hr, .ml-content table, .ml-content pre {
    grid-column: main-start / main-end;
}


/* =============================================================================
   Ghost card: Image (.kg-image-card)
   ============================================================================= */

.ml-content .kg-image-card {
    margin: 0 0 32px;
}

.ml-content .kg-image-card img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-containers);
    display: block;
}

.ml-content .kg-image-card figcaption {
    margin-top: 10px;
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    text-align: center;
    line-height: var(--line-height-normal);
}

/* Wide image */
.ml-content .kg-image-card.kg-width-wide {
    grid-column: wide-start / wide-end;
    margin-left: -48px;
    margin-right: -48px;
}

/* Full-bleed image */
.ml-content .kg-image-card.kg-width-full {
    grid-column: full-start / full-end;
    margin-left: calc(50% - 50vw + 32px);
    margin-right: calc(50% - 50vw + 32px);
    border-radius: 0;
}

.ml-content .kg-image-card.kg-width-full img {
    border-radius: 0;
}


/* =============================================================================
   Ghost card: Gallery (.kg-gallery-card)
   ============================================================================= */

.ml-content .kg-gallery-card {
    margin: 0 0 32px;
}

.ml-content .kg-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ml-content .kg-gallery-row {
    display: flex;
    gap: 8px;
}

.ml-content .kg-gallery-image {
    flex: 1;
    overflow: hidden;
    border-radius: var(--border-radius-containers);
}

.ml-content .kg-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ml-content .kg-gallery-card figcaption {
    margin-top: 10px;
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    text-align: center;
}


/* =============================================================================
   Ghost card: Bookmark (.kg-bookmark-card)
   ============================================================================= */

.ml-content .kg-bookmark-card {
    margin: 0 0 32px;
}

.ml-content .kg-bookmark-container {
    display: flex;
    border: 1px solid var(--color-bookmark-border);
    border-radius: var(--border-radius-containers);
    overflow: hidden;
    text-decoration: none;
    background-color: var(--color-background-main);
    transition: border-color var(--transition-base) var(--ease-out);
}

.ml-content .kg-bookmark-container:hover {
    border-color: var(--color-text-meta);
}

.ml-content .kg-bookmark-content {
    flex: 1;
    padding: 20px;
    min-width: 0;
}

.ml-content .kg-bookmark-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin-bottom: 6px;
    line-height: var(--line-height-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ml-content .kg-bookmark-description {
    font-size: var(--font-size-xs);
    color: var(--color-text-lighter);
    line-height: var(--line-height-normal);
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ml-content .kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
}

.ml-content .kg-bookmark-icon {
    width: 16px;
    height: 16px;
    object-fit: cover;
    flex-shrink: 0;
}

.ml-content .kg-bookmark-author {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ml-content .kg-bookmark-thumbnail {
    width: 160px;
    flex-shrink: 0;
}

.ml-content .kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 600px) {
    .ml-content .kg-bookmark-thumbnail {
        display: none;
    }
}


/* =============================================================================
   Ghost card: Button (.kg-button-card)
   ============================================================================= */

.ml-content .kg-button-card {
    margin: 0 0 32px;
    text-align: center;
}

.ml-content .kg-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--padding-buttons);
    background-color: var(--background-color-button);
    color: var(--color-buttons-main-text);
    font-family: var(--font-family-buttons);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-buttons);
    text-decoration: none;
    transition: opacity var(--transition-base) var(--ease-out);
}

.ml-content .kg-btn:hover {
    opacity: 0.82;
    color: var(--color-buttons-main-text);
}

.ml-content .kg-btn-accent {
    background-color: var(--accent-color);
}


/* =============================================================================
   Ghost card: Callout (.kg-callout-card)
   ============================================================================= */

.ml-content .kg-callout-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background-color: var(--color-background-text-blocks);
    border-left: 3px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    margin: 0 0 32px;
}

.ml-content .kg-callout-emoji {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-snug);
    flex-shrink: 0;
}

.ml-content .kg-callout-text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-main);
}

.ml-content .kg-callout-text p {
    margin-bottom: 0;
}


/* =============================================================================
   Ghost card: Toggle (.kg-toggle-card)
   ============================================================================= */

.ml-content .kg-toggle-card {
    border: 1px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    margin: 0 0 32px;
    overflow: hidden;
}

.ml-content .kg-toggle-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    background-color: var(--color-background-main);
    transition: background-color var(--transition-fast) var(--ease-out);
    gap: 12px;
}

.ml-content .kg-toggle-heading:hover {
    background-color: var(--color-background-elements-main);
}

.ml-content .kg-toggle-heading-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    flex: 1;
}

.ml-content .kg-toggle-heading-icon {
    width: 24px;
    height: 24px;
    color: var(--color-text-lighter);
    flex-shrink: 0;
    transition: transform var(--transition-base) var(--ease-out);
}

.ml-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-heading-icon {
    transform: rotate(180deg);
}

.ml-content .kg-toggle-content {
    padding: 0 20px 20px;
    font-size: var(--font-size-sm);
    color: var(--color-text-post);
    line-height: var(--line-height-normal);
    border-top: 1px solid var(--color-borders);
    padding-top: 16px;
}

.ml-content .kg-toggle-content p {
    margin-bottom: 12px;
}

.ml-content .kg-toggle-content p:last-child {
    margin-bottom: 0;
}


/* =============================================================================
   Ghost card: Product (.kg-product-card)
   ============================================================================= */

.ml-content .kg-product-card {
    border: 1px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    overflow: hidden;
    margin: 0 0 32px;
}

.ml-content .kg-product-card-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

.ml-content .kg-product-card-title-container {
    padding: 20px 20px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ml-content .kg-product-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    flex: 1;
}

.ml-content .kg-product-card-rating {
    display: flex;
    gap: 2px;
    color: #f59e0b;
}

.ml-content .kg-product-card-rating svg {
    width: 16px;
    height: 16px;
}

.ml-content .kg-product-card-description {
    padding: 12px 20px;
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
    line-height: var(--line-height-normal);
}

.ml-content .kg-product-card-button {
    display: block;
    margin: 0 20px 20px;
    padding: var(--padding-buttons);
    background-color: var(--background-color-button);
    color: var(--color-buttons-main-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-buttons);
    text-align: center;
    text-decoration: none;
    transition: opacity var(--transition-base) var(--ease-out);
}

.ml-content .kg-product-card-button:hover {
    opacity: 0.82;
    color: var(--color-buttons-main-text);
}


/* =============================================================================
   Ghost card: File (.kg-file-card)
   ============================================================================= */

.ml-content .kg-file-card {
    margin: 0 0 32px;
}

.ml-content .kg-file-card-container {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    text-decoration: none;
    background-color: var(--color-background-main);
    transition: border-color var(--transition-base) var(--ease-out), background-color var(--transition-base) var(--ease-out);
}

.ml-content .kg-file-card-container:hover {
    border-color: var(--color-text-meta);
    background-color: var(--color-background-elements-main);
}

.ml-content .kg-file-card-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: var(--color-text-lighter);
}

.ml-content .kg-file-card-icon svg {
    width: 36px;
    height: 36px;
}

.ml-content .kg-file-card-contents {
    flex: 1;
    min-width: 0;
}

.ml-content .kg-file-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.ml-content .kg-file-card-caption {
    font-size: var(--font-size-xs);
    color: var(--color-text-lighter);
}

.ml-content .kg-file-card-metadata {
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    white-space: nowrap;
    margin-top: 4px;
}


/* =============================================================================
   Ghost card: Video (.kg-video-card)
   ============================================================================= */

.ml-content .kg-video-card {
    margin: 0 0 32px;
}

.ml-content .kg-video-card video,
.ml-content .kg-video-card iframe {
    width: 100%;
    border-radius: var(--border-radius-containers);
    display: block;
    aspect-ratio: 16 / 9;
}

.ml-content .kg-video-card figcaption {
    margin-top: 10px;
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    text-align: center;
}


/* =============================================================================
   Ghost card: Audio (.kg-audio-card)
   ============================================================================= */

.ml-content .kg-audio-card {
    border: 1px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    overflow: hidden;
    margin: 0 0 32px;
}

.ml-content .kg-audio-thumbnail {
    display: none;
}

.ml-content .kg-audio-player-container {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ml-content .kg-audio-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-main);
}

.ml-content .kg-audio-player {
    width: 100%;
    height: 36px;
    accent-color: var(--background-color-button);
}

/* Audio card with artwork */
.ml-content .kg-audio-card.kg-audio-has-thumbnail .kg-audio-thumbnail {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius-containers);
    flex-shrink: 0;
}

.ml-content .kg-audio-card.kg-audio-has-thumbnail .kg-audio-player-container {
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.ml-content .kg-audio-card.kg-audio-has-thumbnail .kg-audio-content {
    flex: 1;
    min-width: 0;
}


/* =============================================================================
   Ghost card: Embed (.kg-embed-card)
   ============================================================================= */

.ml-content .kg-embed-card {
    margin: 0 0 32px;
}

.ml-content .kg-embed-card iframe,
.ml-content .kg-embed-card video,
.ml-content .kg-embed-card object {
    width: 100%;
    border-radius: var(--border-radius-containers);
    display: block;
}

.ml-content .kg-embed-card .twitter-tweet,
.ml-content .kg-embed-card blockquote.twitter-tweet {
    margin: 0 auto;
}

/* Aspect ratio wrapper for 16:9 embeds */
.ml-content .kg-embed-card .fluid-width-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.ml-content .kg-embed-card .fluid-width-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ml-content .kg-embed-card figcaption {
    margin-top: 10px;
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    text-align: center;
}


/* =============================================================================
   Content gate (member/subscriber wall)
   ============================================================================= */

.ml-content-gate {
    margin: 48px auto;
    max-width: 520px;
    padding: var(--space-10);
    border: 1px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    background-color: var(--color-background-text-blocks);
    text-align: center;
    grid-column: main-start / main-end;
}

.ml-content-gate__icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 20px;
    color: var(--color-text-meta);
}

.ml-content-gate__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin-bottom: 12px;
    line-height: var(--line-height-snug);
}

.ml-content-gate__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
    line-height: var(--line-height-normal);
    margin-bottom: 28px;
}

.ml-content-gate__desc a {
    color: var(--color-text-main);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ml-content-gate__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Teaser fade effect above the gate */
.ml-content-teaser-fade {
    position: relative;
    overflow: hidden;
}

.ml-content-teaser-fade::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--color-background-main)
    );
    pointer-events: none;
}


/* =============================================================================
   Author bio card (end of post)
   ============================================================================= */

.ml-author-bio {
    display: flex;
    gap: 24px;
    padding: 32px;
    background-color: var(--color-background-text-blocks);
    border: 1px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    margin-top: 48px;
    grid-column: main-start / main-end;
}

.ml-author-bio__image,
.ml-author-bio__img {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    flex-shrink: 0;
}

.ml-author-bio__content {
    flex: 1;
    min-width: 0;
}

.ml-author-bio__name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-main);
    margin-bottom: 6px;
}

.ml-author-bio__bio {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-lighter);
    margin-bottom: 12px;
}

.ml-author-bio__link {
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-author-bio__link:hover {
    color: var(--color-text-main);
}

@media (max-width: 600px) {
    .ml-author-bio {
        flex-direction: column;
    }
}


/* =============================================================================
   Related posts (end of post)
   ============================================================================= */

.ml-related-posts {
    margin-top: 64px;
    grid-column: main-start / main-end;
}

.ml-related-posts__heading {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-meta);
    margin-bottom: 24px;
}

.ml-related-posts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}


/* =============================================================================
   Ghost: Comments
   ============================================================================= */

.ml-comments {
    margin-top: 64px;
    grid-column: main-start / main-end;
}


/* =============================================================================
   Mobile adjustments
   ============================================================================= */

@media (max-width: 768px) {
    .ml-content {
        padding: 0 0 64px;
    }

    .ml-post-header {
        padding: 32px 0 28px;
    }

    .ml-post-header__title {
        font-size: clamp(26px, 7vw, 36px);
    }

    .ml-post-feature-image {
        padding: 0;
    }

    .ml-post-feature-image img {
        border-radius: 0;
    }

    .ml-content-gate {
        padding: 28px 24px;
    }

    .ml-content .kg-image-card.kg-width-wide {
        margin-left: -24px;
        margin-right: -24px;
    }
}

/* ----- legacy pages.css ----- */
/* =============================================================================
   PAGES.CSS — Page-specific layouts: archive, auth, authors, tags, membership,
   contact, shop, error. Post feed section wrapper.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Post feed section (index.hbs)
   -------------------------------------------------------------------------- */

.ml-post-feed-section {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
}

@media (max-width: 768px) {
    .ml-post-feed-section {
        padding-top: var(--section-padding-mobile);
        padding-bottom: var(--section-padding-mobile);
    }
}


/* -----------------------------------------------------------------------------
   Archive pages (tag.hbs, author.hbs)
   -------------------------------------------------------------------------- */

.ml-page-header__cover {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: var(--border-radius-containers);
    margin-bottom: 32px;
}

.ml-page-header__desc {
    color: var(--color-text-lighter);
    font-size: var(--font-size-xl);
    margin-top: 12px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.ml-page-header__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    margin-top: 8px;
}

.ml-page-header--author {
    text-align: left;
}

.ml-page-header__author-profile {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 16px;
}

.ml-page-header__author-img {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    flex-shrink: 0;
}

.ml-page-header__author-links {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.ml-page-header__author-links a {
    color: var(--color-text-lighter);
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-page-header__author-links a:hover {
    color: var(--color-text-main);
}

.ml-page-header__author-links svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 640px) {
    .ml-page-header__author-profile {
        flex-direction: column;
        gap: 16px;
    }
}


/* -----------------------------------------------------------------------------
   Authors grid (custom-authors.hbs)
   -------------------------------------------------------------------------- */

.ml-authors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 32px;
}

.ml-author-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    border: 1px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    transition: background-color var(--transition-base) var(--ease-out);
}

.ml-author-card:hover {
    background-color: var(--color-background-block-hover);
}

.ml-author-card__img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-circle);
    object-fit: cover;
    margin-bottom: 16px;
}

.ml-author-card__avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-circle);
    background-color: var(--color-background-elements-main);
    color: var(--color-text-lighter);
    margin-bottom: 16px;
}

.ml-author-card__avatar-placeholder svg {
    width: 32px;
    height: 32px;
}

.ml-author-card__info h3 {
    font-size: 17px;
    margin-bottom: 8px;
}

.ml-author-card__info h3 a {
    color: var(--color-text-main);
    text-decoration: none;
}

.ml-author-card__info h3 a:hover {
    color: var(--color-card-title-hover);
}

.ml-author-card__bio {
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
    line-height: var(--line-height-normal);
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ml-author-card__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    margin-bottom: 12px;
}

.ml-author-card__links {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.ml-author-card__links a {
    color: var(--color-text-lighter);
    transition: color var(--transition-fast) var(--ease-out);
}

.ml-author-card__links a:hover {
    color: var(--color-text-main);
}

.ml-author-card__links svg {
    width: 16px;
    height: 16px;
}


/* -----------------------------------------------------------------------------
   Tags grid (custom-categories.hbs)
   -------------------------------------------------------------------------- */

.ml-tags-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}

.ml-tag-block {
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-containers);
    border: 1px solid var(--color-borders);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text-main);
    transition: background-color var(--transition-base) var(--ease-out), border-color var(--transition-base) var(--ease-out);
}

.ml-tag-block:hover {
    background-color: var(--color-background-block-hover);
}

.ml-tag-block__image-wrapper {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.ml-tag-block__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--ease-out);
}

.ml-tag-block:hover .ml-tag-block__image {
    transform: scale(1.03);
}

.ml-tag-block__content {
    padding: 20px;
}

.ml-tag-block__name {
    font-size: 17px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 6px;
}

.ml-tag-block__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
    line-height: var(--line-height-normal);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ml-tag-block__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* -----------------------------------------------------------------------------
   Membership tiers (custom-memberships.hbs, members/signup.hbs)
   -------------------------------------------------------------------------- */

.ml-membership-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.ml-tier-card {
    display: flex;
    flex-direction: column;
    padding: 32px;
    border: 1px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    background-color: var(--color-background-text-blocks);
}

.ml-tier-card--featured {
    border-color: var(--background-color-button);
    background-color: var(--color-background-main);
    box-shadow: var(--shadow-md);
}

.ml-tier-card__header {
    margin-bottom: 24px;
}

.ml-tier-card__name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 8px;
}

.ml-tier-card__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
    line-height: var(--line-height-normal);
}

.ml-tier-card__pricing {
    margin-bottom: 24px;
}

.ml-tier-card__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.ml-tier-card__amount {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1;
}

.ml-tier-card__period {
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
}

.ml-tier-card__annual {
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    margin-top: 4px;
}

.ml-tier-card__benefits {
    list-style: none;
    margin-bottom: 32px;
    flex: 1;
}

.ml-tier-card__benefits li {
    font-size: var(--font-size-sm);
    padding: 8px 0;
    border-bottom: 1px solid var(--color-borders);
    color: var(--color-text-lighter);
}

.ml-tier-card__benefits li:last-child {
    border-bottom: none;
}

.ml-tier-card__cta {
    display: block;
    text-align: center;
    margin-top: 4px;
}

.ml-membership-footnote {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-meta);
    margin-top: 24px;
}

.ml-membership-footnote a {
    color: var(--color-text-lighter);
    text-decoration: underline;
}

.ml-membership-tiers--compact {
    grid-template-columns: 1fr;
    max-width: 400px;
}

@media (max-width: 640px) {
    .ml-membership-tiers {
        grid-template-columns: 1fr;
    }
}


/* -----------------------------------------------------------------------------
   Contact form (custom-contact.hbs)
   -------------------------------------------------------------------------- */

.ml-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.ml-contact-form__submit {
    margin-top: 8px;
}

.ml-contact-form__success {
    margin-top: 16px;
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
    text-align: center;
}


/* -----------------------------------------------------------------------------
   Shop page (custom-shop.hbs)
   -------------------------------------------------------------------------- */

.ml-shop-content .kg-product-card {
    border: 1px solid var(--color-borders);
}


/* -----------------------------------------------------------------------------
   Auth pages (members/signin.hbs, signup.hbs, account.hbs)
   -------------------------------------------------------------------------- */

.ml-page--auth {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 120px);
}

.ml-auth-box {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: var(--section-padding-mobile) var(--space-10);
    border: 1px solid var(--color-borders);
    border-radius: var(--border-radius-containers);
    background-color: var(--color-background-text-blocks);
    text-align: center;
}

.ml-auth-box__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    color: var(--color-text-lighter);
}

.ml-auth-box__icon svg {
    width: 100%;
    height: 100%;
}

.ml-auth-box__title {
    font-size: var(--font-size-2xl);
    margin-bottom: 8px;
}

.ml-auth-box__sub {
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
    margin-bottom: 32px;
    line-height: var(--line-height-normal);
}

.ml-auth-box__switch {
    margin-top: 24px;
    font-size: var(--font-size-sm);
    color: var(--color-text-lighter);
}

.ml-auth-box__switch a {
    color: var(--color-text-main);
    text-decoration: underline;
}

.ml-auth-box--account .ml-main-button,
.ml-auth-box--account .ml-secondary-button,
.ml-auth-box--account .ml-ghost-button {
    display: block;
    text-align: center;
    margin-top: 16px;
}

.ml-auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ml-auth-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.ml-auth-form__submit {
    width: 100%;
    justify-content: center;
}

.ml-auth-form__loader {
    display: none;
}

.ml-auth-form .message-success,
.ml-auth-form .message-error {
    font-size: var(--font-size-xs);
    padding: 10px;
    border-radius: var(--border-radius-containers);
    display: none;
    text-align: left;
}

.ml-auth-form .message-success {
    background-color: var(--color-background-elements-main);
    color: var(--color-text-lighter);
}

.ml-auth-form .message-error {
    background-color: #fee2e2;
    color: #991b1b;
}

.ml-auth-box--upgrade {
    max-width: 640px;
    text-align: left;
}

@media (max-width: 640px) {
    .ml-auth-box {
        padding: 32px 24px;
    }
}


/* -----------------------------------------------------------------------------
   Error page (error.hbs)
   -------------------------------------------------------------------------- */

.ml-error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    padding: var(--section-padding-desktop) var(--space-6);
    gap: 20px;
}

.ml-error-page__code {
    font-size: clamp(80px, 15vw, 160px);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--color-text-main);
}

.ml-error-page__message {
    font-size: var(--font-size-xl);
    color: var(--color-text-lighter);
    margin-bottom: 8px;
}

.ml-error-page__details {
    margin-top: 40px;
    font-size: var(--font-size-xs);
    color: var(--color-text-meta);
    text-align: left;
    max-width: 600px;
    width: 100%;
}

.ml-error-page__details summary {
    cursor: pointer;
    margin-bottom: 12px;
    font-weight: var(--font-weight-medium);
}

.ml-error-page__details ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ml-error-page__details li {
    padding: 12px;
    background-color: var(--color-background-elements-main);
    border-radius: var(--border-radius-containers);
}


/* -----------------------------------------------------------------------------
   Page header centered variant
   -------------------------------------------------------------------------- */

.ml-page-header--centered {
    text-align: center;
}

/* ----- legacy animations.css ----- */
/* =============================================================================
   ANIMATIONS.CSS — Transitions, keyframes, and motion utilities.
   All non-essential animations wrapped in prefers-reduced-motion.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Shared transition values (referenced in other CSS files)
   -------------------------------------------------------------------------- */

/* All durations reference the shared --transition-* tokens from the design-system
   contract (v2). --transition-fast: 150ms, --transition-base: 200ms,
   --transition-slow: 400ms. --ease-out is the shared easing curve. */

/* Button hover: --transition-base (opacity or color) */
/* Link hover: --transition-fast (color) */
/* Card hover image scale: --transition-slow (transform) */
/* Focus ring: --transition-fast (box-shadow) */
/* Page fade-in: --transition-slow (opacity) */
/* Dark mode transition: --transition-base (background/color) */


/* -----------------------------------------------------------------------------
   Page entrance
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .ml-viewport {
        animation: ml-fade-in var(--transition-slow) var(--ease-out) both;
    }

    @keyframes ml-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}


/* -----------------------------------------------------------------------------
   Card image hover scale
   -------------------------------------------------------------------------- */

.ml-post-card__image {
    transition: transform var(--transition-slow) var(--ease-out);
}

.ml-post-card__link:hover .ml-post-card__image,
.ml-post-card__link:focus-within .ml-post-card__image {
    /* Applied conditionally */
}

@media (prefers-reduced-motion: no-preference) {
    .ml-post-card__link:hover .ml-post-card__image {
        transform: scale(1.03);
    }
}


/* -----------------------------------------------------------------------------
   Hero image hover (for "Image on the right" hero variant)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .ml-hero-featured-post:hover .ml-hero-featured-post__image img,
    .ml-hero-big-featured-post:hover .ml-hero-big-featured-post__image img {
        transform: scale(1.03);
    }
}

.ml-hero-featured-post__image img,
.ml-hero-big-featured-post__image img {
    transition: transform var(--transition-slow) var(--ease-out);
}


/* -----------------------------------------------------------------------------
   Tag grid / carousel hover
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .ml-featured-tag-card:hover .ml-featured-tag-card__image {
        transform: scale(1.04);
    }
}

.ml-featured-tag-card__image {
    transition: transform var(--transition-slow) var(--ease-out);
}


/* -----------------------------------------------------------------------------
   Author carousel hover
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .ml-author-slide:hover .ml-author-slide__image img {
        transform: scale(1.05);
    }
}

.ml-author-slide__image img {
    transition: transform var(--transition-slow) var(--ease-out);
}


/* -----------------------------------------------------------------------------
   Content gate fade-in
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .ml-content-gate {
        animation: ml-fade-up var(--transition-base) var(--ease-out) both;
    }

    @keyframes ml-fade-up {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}


/* -----------------------------------------------------------------------------
   Mobile menu slide-in
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ml-mobile-menu {
        transition: none;
    }
}


/* -----------------------------------------------------------------------------
   Dark mode toggle icon transition
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .ml-dark-mode-toggle .icon-sun,
    .ml-dark-mode-toggle .icon-moon {
        transition: opacity var(--transition-base) var(--ease-out);
    }
}


/* -----------------------------------------------------------------------------
   Swiper carousel transitions (override Swiper defaults)
   -------------------------------------------------------------------------- */

.swiper-slide {
    /* Swiper handles its own transitions, we just ensure no accidental FOUC */
    will-change: transform;
}


/* -----------------------------------------------------------------------------
   Scroll-to-top fade
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ml-scroll-top {
        transition: none;
    }
}