/*
Theme Name: FaharasNET
Theme URI: https://faharas.net/
Description: Modern news aggregation theme with AI fact-checking, glass morphism design, and dark mode support.
Author: Faharas Team
Author URI: https://faharas.com/
Version: 2.2.5
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: faharasnet
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
*/

/**
 * FaharasNET CSS Architecture - Optimized 2025
 * @author  Faharas Team
 * @version 2.2.2
 * @license GPL-2.0-or-later
 * @link    https://faharas.net/
 * 
 * Architecture:
 * - CSS Layers for cascade control
 * - Design tokens with custom properties
 * - Modern CSS features (2025)
 * - Grouped & consolidated styles
 * - Zero redundancy
 */

/* ================================================================= */
/* CASCADE LAYERS */
/* ================================================================= */
@layer reset, base, layout, components, utilities;

/* ================================================================= */
/* RESET LAYER - Modern CSS Reset 2025 */
/* ================================================================= */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    overflow-x: hidden;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--text-base);
    line-height: 1.6;
    background: var(--c-bg);
    color: var(--c-text);
    overflow-x: hidden;
    font-variant-numeric: tabular-nums;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .main {
    flex: 1;
    padding-block: 0rem;
  }
  
  img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    font-style: italic;
  }
  
  button, input, textarea, select {
    font: inherit;
    color: inherit;
  }
  
  button {
    background: transparent;
    border: none;
    cursor: pointer;
    touch-action: manipulation;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  ul, ol {
    list-style: none;
  }
  
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-wrap: balance;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  p {
    line-height: 1.7;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* ================================================================= */
/* BASE LAYER - Design Tokens & Color System */
/* ================================================================= */
@layer base {
  :root {
    /* ===== COLOR SYSTEM ===== */
    /* Primary Colors - HSL for dynamic adjustments */
    --c-text: hsl(30, 6%, 8%);
    --c-text-2: hsl(30, 2%, 23%);
    --c-text-3: hsl(30, 2%, 43%);
    --c-bg: hsl(0, 0%, 100%);
    --c-bg-2: hsl(36, 23%, 96%);
    --c-bg-3: hsl(30, 19%, 90%);
    --c-accent: hsl(209, 60%, 42%);
    --c-border: hsl(42, 25%, 82%);
    --c-success: hsl(120, 56%, 28%);
    --c-danger: hsl(7, 55%, 40%);
    --c-warning: hsl(38, 92%, 50%);
    --c-info: hsl(199, 98%, 40%);
    
    /* Computed Colors - Dynamic using color-mix() */
    --c-surface: var(--c-bg);
    --c-accent-hover: hsl(209, 60%, 38%);
    --c-accent-subtle: hsl(209, 40%, 97%);
    --c-accent-border: hsla(209, 60%, 45%, 0.28);
    --c-glass: hsla(0, 0%, 100%, 0.85);
    --c-line-subtle: hsla(42, 25%, 82%, 0.3);
    
    /* Alpha Overlays - Optimized */
    --c-white-20: hsla(0, 0%, 100%, 0.2);
    --c-black-10: hsla(0, 0%, 0%, 0.1);
    --c-black-15: hsla(0, 0%, 0%, 0.15);
    --c-black-20: hsla(0, 0%, 0%, 0.2);

    /* ===== GRADIENTS ===== */
    --gradient-bg: linear-gradient(135deg, var(--c-bg-2), var(--c-bg-3));
    --gradient-accent: linear-gradient(135deg, var(--c-accent), var(--c-accent-hover));
    --gradient-subtle: linear-gradient(135deg, var(--c-accent-subtle) 0%, var(--c-bg-2) 100%);

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 1px 3px 0 hsla(0, 0%, 0%, 0.1);
    --shadow-md: 0 4px 6px -1px hsla(0, 0%, 0%, 0.1);
    --shadow-lg: 0 10px 25px hsla(0, 0%, 0%, 0.08);
    
    /* ===== SPACING SYSTEM ===== */
    --space-2xs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1.25rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 5rem;
    
    /* ===== TYPOGRAPHY SCALE ===== */
    --text-xs: 0.8125rem;
    --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
    --text-sm: 0.9375rem;
    --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
    --text-base: 1.125rem;
    --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --text-lg: 1.25rem;
    --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --text-xl: 1.5rem;
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: 1.875rem;
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    --text-3xl: 2.25rem;
    --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);
    --text-4xl: 3rem;
    --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
    
    /* ===== LAYOUT ===== */
    --container: 62.5rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* ===== TYPOGRAPHY - FONTS ===== */
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace;

    /* ===== ANIMATION ===== */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    
    accent-color: var(--c-accent);
  }
  
  /* ===== DARK THEME ===== */
  [data-theme="dark"] {
    --c-text: hsl(36, 23%, 96%);  /* A11y: Verify color contrast ratio meets WCAG AA (4.5:1) */
    --c-text-2: hsl(36, 9%, 71%);  /* A11y: Verify color contrast ratio meets WCAG AA (4.5:1) */
    --c-text-3: hsl(30, 3%, 58%);
    --c-bg: hsl(30, 6%, 8%);
    --c-bg-2: hsl(45, 7%, 11%);
    --c-bg-3: hsl(36, 8%, 14%);
    --c-accent: hsl(209, 52%, 64%);
    --c-border: hsl(30, 2%, 23%);
    --c-success: hsl(97, 34%, 49%);
    --c-danger: hsl(0, 69%, 68%);
    --c-warning: hsl(45, 96%, 56%);
    --c-info: hsl(199, 92%, 60%);
    
    --c-surface: var(--c-bg-2);
    --c-accent-hover: hsl(209, 52%, 72%);
    --c-accent-subtle: hsl(209, 35%, 15%);
    --c-accent-border: hsla(209, 52%, 64%, 0.4);
    --c-glass: hsla(45, 7%, 11%, 0.85);
    /* UNUSED: --c-line: hsla(30, 2%, 23%, 0.6); */
    --c-line-subtle: hsla(30, 2%, 23%, 0.4);
    
    --shadow-sm: 0 1px 3px hsla(0, 0%, 0%, 0.2);
    --shadow-md: 0 4px 6px hsla(0, 0%, 0%, 0.25);
    --shadow-lg: 0 10px 25px hsla(0, 0%, 0%, 0.3);
  }
}

/* ================================================================= */
/* LAYOUT LAYER - Grid Systems & Containers */
/* ================================================================= */
@layer layout {
  /* ===== SHARED CONTAINER PATTERNS ===== */
  .container,
  .content-wrapper {
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: clamp(var(--space-sm), 2vw, var(--space-md));
  }
  
  .content-wrapper {
    padding-block-start: var(--space-lg);
  }
  
  .article-wrapper {
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-md);
    padding-block-start: var(--space-3xl);
  }
  
  /* ===== SITE LAYOUT ===== */
  .site-layout {
    display: grid;
    grid-template-areas:
      "header"
      "main"
      "footer";
    grid-template-rows: auto 1fr auto;
    min-block-size: 100vh;
    min-block-size: 100dvh;
  }
  
  /* ===== GRID SYSTEMS ===== */
  .news-grid {
    display: grid;
    gap: var(--space-lg);
    margin-block-end: var(--space-2xl);
  }
  
  .grid-3col {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }
  
  /* ===== MAIN CONTENT ===== */
  /* .main styles moved to reset layer for consolidation */
}

/* ================================================================= */
/* COMPONENTS LAYER - UI Components & Patterns */
/* ================================================================= */
@layer components {
  
  /* ===== SHARED COMPONENT PATTERNS ===== */
  
  /* Avatar Pattern - Used by source/author/meta */
  .meta-avatar,
  .source-avatar,
  .source-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--c-text-2);
    background: var(--gradient-bg);
    position: relative;
  }
  
  .meta-avatar,
  .source-avatar {
    inline-size: var(--icon-size-md, 36px);
    block-size: var(--icon-size-md, 36px);
    border-radius: 20%;
    font-size: var(--text-base);
    margin-inline-end: var(--space-sm);
  }
  
  .source-profile-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-xl);
    background: var(--gradient-accent);
    color: white;
    font-size: var(--text-2xl);
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 
      0 8px 32px color-mix(in srgb, var(--c-accent) 20%, transparent),
      0 2px 8px color-mix(in srgb, var(--c-accent) 10%, transparent);
  }
  
  .author-profile-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }
  
  .author-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  /* Avatar Divider Lines */
  .meta-avatar::after {
    content: '';
    position: absolute;
    inset-inline-end: calc(-1 * var(--space-sm) / 2);
    inset-block-start: 50%;
    transform: translateY(-50%);
    block-size: var(--button-size-sm, 32px);
    inline-size: 1px;
    background: var(--c-border);
  }
  
  /* Avatar Hover Effects */
  .source-profile-avatar::after,
  .author-profile-avatar::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, 
      color-mix(in srgb, var(--c-accent) 30%, transparent), 
      color-mix(in srgb, var(--c-accent-hover) 30%, transparent)
    );
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .source-profile-header:hover .source-profile-avatar::after,
  .author-profile-header:hover .author-profile-avatar::after {
    opacity: 1;
  }
  
  /* ===== PROFILE HEADERS ===== */
  
  /* Shared Profile Header Styles */
  .source-profile-header,
  .author-profile-header,
  .archive-header {
    background: var(--gradient-subtle);
    padding: var(--space-xl) var(--space-md);
    padding-block-start: var(--space-3xl);
  }
  
  .source-profile-header {
    border-block-end: 1px solid var(--c-border);
  }
  
  .archive-header {
    border-block-end: 1px solid var(--c-border);
  }
  
/* Performance: Universal selector - consider more specific selector */
  .archive-header > * {
    max-inline-size: var(--container);
    margin-inline: auto;
  }
  
  /* Profile Content Containers */
  .source-profile-main,
  .source-profile-stats,
  .author-profile-main,
  .author-profile-stats,
  .author-expertise {
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-md);
    padding-block-start: var(--space-lg);
  }
  
  .source-profile-main,
  .author-profile-main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
    margin-block-end: var(--space-xl);
  }
  
  /* Profile Meta Sections */
  .source-profile-meta,
  .author-profile-meta {
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-block-end: var(--space-xl);
    padding-block: var(--space-lg);
  }
  
  .source-profile-meta {
    border-block: 1px solid hsl(42, 25%, 82%) 10%, transparent);
    border-block: 1px solid color-mix(in srgb, var(--c-border) 10%, transparent);
  }
  
  /* Profile Information */
  .source-profile-info,
  .author-profile-info {
    flex: 1;
    min-width: 0;
  }
  
  .source-profile-title,
  .author-profile-title {
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.1;
    color: var(--c-text);
    margin-block-end: var(--space-md);
    letter-spacing: -0.025em;
  }
  
  .source-profile-description,
  .author-profile-description {
    font-size: var(--text-lg);
    color: var(--c-text-2);
    line-height: 1.6;
    margin-block-end: var(--space-lg);
    max-width: 60ch;
  }
  
  /* URL Sections */
  .source-profile-url,
  .author-profile-url {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }
  
  .source-url-label,
  .author-url-label {
    font-size: var(--text-sm);
    color: var(--c-text-3);
    font-weight: 500;
  }
  
  .source-url-value,
  .author-url-value {
    background: hsl(30, 6%, 8%) 6%, transparent);
    background: color-mix(in srgb, var(--c-text) 6%, transparent);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--c-text-2);
    word-break: break-all;
  }
  
  .source-url-value {
    border: 1px solid hsl(42, 25%, 82%) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-border) 10%, transparent);
  }
  
  /* Social Media Links */
  .source-social-media,
  .author-social-media {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }
  
  .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: hsl(30, 6%, 8%) 5%, transparent);
    background: color-mix(in srgb, var(--c-text) 5%, transparent);
    color: var(--c-text-2);
    text-decoration: none;
    transition: all 0.2s ease;  /* Performance: Consider using transform instead of layout properties */
    border: 1px solid hsl(42, 25%, 82%) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-border) 10%, transparent);
  }
  
  .social-link:hover {
    background: var(--c-accent);
    color: white;
    border-color: var(--c-accent);
  }
  
  .social-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  
  /* Statistics Panels */
  .source-profile-stats,
  .author-profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 20vw, 140px), 1fr));
    gap: var(--space-md);
    padding-block-start: var(--space-xl);
  }

  .source-profile-stats {
    border-block-start: 1px solid hsl(42, 25%, 82%) 10%, transparent);
    border-block-start: 1px solid color-mix(in srgb, var(--c-border) 10%, transparent);
  }
  
  .source-stat-item,
  .author-stat-item {
    text-align: center;
    padding: clamp(var(--space-sm), 1.5vw, var(--space-lg));
    border-radius: var(--radius-lg);
    background: hsl(0, 0%, 100%) 50%, transparent);
    background: color-mix(in srgb, var(--c-bg) 50%, transparent);
    transition: all 0.2s ease;  /* Performance: Consider using transform instead of layout properties */
  }

  
  .source-stat-item {
    border: 1px solid hsl(42, 25%, 82%) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-border) 10%, transparent);
  }
  
  .source-stat-item:hover {
    border-color: hsl(209, 60%, 45%) 20%, transparent);
    border-color: color-mix(in srgb, var(--c-accent) 20%, transparent);
  }
  
  .author-stat-item:hover {
    background: hsl(209, 60%, 45%) 5%, transparent);
    background: color-mix(in srgb, var(--c-accent) 5%, transparent);
  }
  
  .stat-number {
    display: block;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--c-accent);
    line-height: 1;
    margin-block-end: var(--space-xs);
  }
  
  .stat-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--c-text-3);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  /* Author Expertise */
  .author-expertise {
    margin-block-end: var(--space-2xl);
  }
  
  .expertise-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
  }
  
  .expertise-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: hsl(209, 60%, 45%) 8%, transparent);
    background: color-mix(in srgb, var(--c-accent) 8%, transparent);
    color: var(--c-accent-hover);
    text-decoration: none;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all 0.2s ease;  /* Performance: Consider using transform instead of layout properties */
  }
  
  .expertise-tag:hover {
    background: var(--c-accent);
    color: white;
  }

  /* E.E.A.T Author Profile */
  .author-eeat-main {
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-md);
    padding-block-start: var(--space-lg);
  }

  .author-eeat-header-top {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
  }

  .author-eeat-header .author-profile-avatar {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    position: relative;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-3xl);
    font-weight: 700;
    color: white;
  }

  .author-eeat-header .author-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
  }

  .author-eeat-header .author-profile-avatar .author-initials {
    position: relative;
    z-index: 1;
  }

  .author-header-info-inline {
    flex: 1;
    min-width: 0;
  }

  .author-eeat-header .author-profile-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-text);
    margin-block-end: var(--space-xs);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .author-rss-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    text-decoration: none;
    transition: all var(--duration-base) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
  }

  .author-rss-inline:hover {
    background: #ff6600;
    color: white;
    border-color: #ff6600;
    transform: scale(1.05);
  }

  svg.icon.rss {
    width: 0.75rem;
    height: 0.75rem;
  }

  .author-role {
    font-size: var(--text-base);
    color: var(--c-text-2);
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
  }

  .author-category {
    color: var(--c-accent);
    font-weight: 600;
  }

  .author-country {
    color: var(--c-text-3);
  }

  .author-trust-quote {
    background: hsl(209, 60%, 45%) 5%, transparent);
    background: color-mix(in srgb, var(--c-accent) 5%, transparent);
    border-inline-start: 3px solid var(--c-accent);
    padding: var(--space-md) var(--space-lg);
    margin-block-end: var(--space-lg);
    font-size: var(--text-base);
    font-style: italic;
    color: var(--c-text-2);
    line-height: 1.6;
    border-radius: var(--radius-md);
  }

  .author-beats {
    margin-block: var(--space-lg);
  }

  .beats-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--space-sm);
  }

  .beats-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .beat-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    background: hsl(209, 60%, 45%) 8%, transparent);
    background: color-mix(in srgb, var(--c-accent) 8%, transparent);
    color: var(--c-accent-hover);
    text-decoration: none;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all 0.2s ease;  /* Performance: Consider using transform instead of layout properties */
    border: 1px solid hsl(209, 60%, 45%) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-accent) 15%, transparent);
  }

  .beat-tag:hover {
    background: var(--c-accent);
    color: white;
    border-color: var(--c-accent);
  }

  .author-contact-social {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block: var(--space-lg);
    padding-block: var(--space-md);
    border-block: 1px solid hsl(42, 25%, 82%) 10%, transparent);
    border-block: 1px solid color-mix(in srgb, var(--c-border) 10%, transparent);
  }

  .contact-label {
    font-size: var(--text-sm);
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-inline-end: var(--space-xs);
  }

  .author-contact-social .social-link {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
    transition: all var(--duration-base) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
  }

  .author-contact-social .social-link:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
  }

  .author-contact-social .social-link:active {
    transform: scale(0.95);
  }

  .author-contact-social .social-link svg {
    inline-size: 18px;
    block-size: 18px;
    position: relative;
    z-index: 2;
  }

  /* Individual contact icon hover colors */
  .author-contact-social .email-link:hover {
    background: var(--c-accent);
    color: white;
    border-color: var(--c-accent);
  }

  .author-contact-social .form-link:hover {
    background: var(--c-accent);
    color: white;
    border-color: var(--c-accent);
  }

  .author-contact-social .website-link:hover {
    background: var(--c-accent);
    color: white;
    border-color: var(--c-accent);
  }

  .author-contact-social .linkedin-link:hover {
    background: #0077b5;
    color: white;
    border-color: #0077b5;
  }

  .author-contact-social .x-link:hover {
    background: #000000;
    color: white;
    border-color: #000000;
  }

  .author-contact-social .rss-link:hover {
    background: #ff6600;
    color: white;
    border-color: #ff6600;
  }

  .author-profile-updated {
    font-size: var(--text-sm);
    color: var(--c-text-3);
    margin-block-start: var(--space-md);
    font-style: italic;
  }

  .author-eeat-cards {
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-md);
    padding-block-start: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .author-eeat-card-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: var(--space-lg);
  }

  .author-eeat-card {
    background: var(--c-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    transition: all 0.15s ease;  /* Performance: Consider using transform instead of layout properties */
    contain: layout style;
    content-visibility: auto;
  }

  .author-eeat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--c-accent);
  }

  .author-eeat-card.full-width {
    grid-column: 1 / -1;
  }

  .author-eeat-card .card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 var(--space-md) 0;
    padding-block-end: var(--space-sm);
    border-block-end: 2px solid var(--c-accent);
  }

  .author-eeat-card .card-content {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--c-text-2);
  }

  .author-eeat-card .card-content ul,
  .author-eeat-card .card-content ol {
    margin-block-start: var(--space-sm);
    padding-inline-start: var(--space-lg);
  }

  .author-eeat-card .card-content li {
    margin-block-end: var(--space-xs);
  }

  .author-eeat-card .card-content strong {
    color: var(--c-text);
    font-weight: 600;
  }

  .author-eeat-card .card-content a {
    color: var(--c-accent);
    text-decoration: none;
  }

  .author-eeat-card .card-content a:hover {
    text-decoration: underline;
  }

  .author-eeat-card .card-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .author-eeat-card .card-list li {
    font-size: var(--text-sm);
    line-height: 1.8;
    color: var(--c-text-2);
    padding-block: var(--space-xs);
    padding-inline-start: var(--space-md);
    position: relative;
  }

  .author-eeat-card .card-list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 4px;
    block-size: 4px;
    border-radius: 50%;
    background: var(--c-accent);
  }

  .author-eeat-card .card-list li strong {
    color: var(--c-text);
    font-weight: 600;
  }

  .author-eeat-card .card-list a {
    color: var(--c-accent);
    text-decoration: none;
  }

  .author-eeat-card .card-list a:hover {
    text-decoration: underline;
  }

  .media-recognition-section {
    background: var(--c-bg);
    padding-block: var(--space-2xl);
  }

  .media-recognition-container {
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-md);
  }

  .media-recognition-container .section-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--c-text);
    margin-block-end: var(--space-xl);
  }

  .recognition-cards-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .media-recognition-card {
    background: var(--c-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md);
    transition: all 0.15s ease;  /* Performance: Consider using transform instead of layout properties */
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    contain: layout style;
    content-visibility: auto;
  }

  .media-recognition-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--c-accent);
  }

  .recognition-thumbnail {
    flex-shrink: 0;
    inline-size: 100px;
    block-size: 100px;
    border-radius: var(--radius-sm);
    object-fit: cover;
  }

  .recognition-content {
    flex: 1 1 min(200px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .recognition-item {
    line-height: 1.6;
  }

  .recognition-item strong {
    display: inline;
    color: var(--c-text);
    font-weight: 600;
    margin-inline-end: var(--space-xs);
  }

  .recognition-item a {
    color: var(--c-accent);
    text-decoration: none;
  }

  .recognition-item a:hover {
    text-decoration: underline;
  }

  /* ===== NAVIGATION LINKS ===== */
  
  /* Shared Link Styling */
  .author-name a,
  .source-name a {
    color: var(--c-text-2);
    text-decoration: none;
    font-weight: 500;
  }
  
  .author-name a:hover,
  .source-name a:hover {
    color: var(--c-accent);
  }
  
  /* Hide outline on mouse click */
  .author-name a:focus,
  .source-name a:focus {
    outline: none;
  }

  /* Show outline only on keyboard navigation */
  .author-name a:focus-visible,
  .source-name a:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
  }

  /* ===== HEADER SYSTEM ===== */
  
  .header {
    position: fixed;
    inset-block-start: 0.5rem;
    inset-inline: 0;
    z-index: 1000;
    pointer-events: none;
  }
  
  .admin-bar .header {
    inset-block-start: calc(32px + 0.5rem);
  }
  
  .header-glass {
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-xs);
    pointer-events: auto;
    background: var(--c-glass);
    backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid var(--c-line-subtle);
    border-radius: 5rem;
    box-shadow:
      0 0 0 0.5px var(--c-white-20) inset,
      0 10px 40px -10px var(--c-black-15),
      0 20px 60px -20px rgba(46,111,179,0.1);
    transition: box-shadow 400ms var(--ease-out);
    container-type: inline-size;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: 3.25rem;
    padding-inline: 0.75rem;
    contain: layout style;
  }
  
  .header-glass::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--c-accent) 5%, transparent) 0%,
      transparent 20%,
      transparent 80%,
      color-mix(in srgb, var(--c-accent) 5%, transparent) 100%
    );
    pointer-events: none;
    opacity: 0.5;
  }
  
  /* Logo */
  .logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    position: relative;
    z-index: 2;
    margin-inline-end: var(--space-xs);
  }

  .logo-icon {
    inline-size: 1.875rem;
    block-size: 1.875rem;
    background: var(--gradient-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 400ms var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
    box-shadow:
      0 2px 8px var(--c-accent-border),
      0 0 0 3px color-mix(in srgb, var(--c-accent) 10%, transparent);
    position: relative;
    overflow: hidden;
  }

  .logo-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    inset: -50%;
    background: conic-gradient(
      from 0deg at 50% 50%,
      transparent 0deg,
      color-mix(in srgb, white 40%, transparent) 60deg,
      transparent 120deg,
      transparent 360deg
    );
    animation: rotate 3s linear infinite;
    opacity: 0;
    transition: opacity 400ms;
    will-change: transform;
  }

  .logo-icon .icon {
    inline-size: 1.125rem;
    block-size: 1.125rem;
    color: white;
    position: relative;
    z-index: 1;
  }

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

  /* Respect user's motion preferences for logo animation */
  @media (prefers-reduced-motion: reduce) {
    .logo-icon::before {
      animation: none;
    }
    .logo:hover .logo-icon {
      transform: scale(1.1); /* Keep scale, remove rotation */
    }
  }

/* Reduced Transparency Support */
@media (prefers-reduced-transparency: reduce) {
  /* Remove transparency effects for users who prefer opaque UI */
  .header,
  .mobile-menu,
  .search-overlay {
    backdrop-filter: none;
    background: var(--c-bg-1) !important;
  }

  /* Remove semi-transparent overlays */
  .overlay,
  .modal-backdrop {
    opacity: 1;
    background: var(--c-bg-1);
  }
}


  /* APPROVED ELEMENT - Logo rotation on hover */
  .logo:hover .logo-icon {
    transform: rotate(360deg) scale(1.1);
    box-shadow:
      0 4px 12px var(--c-accent-border),
      0 0 0 5px var(--c-accent-subtle);
    will-change: transform; /* Performance hint for known animation */
  }

  .logo:hover .logo-icon::before {
    opacity: 1;
  }
  /* END APPROVED ELEMENT */

  .logo-text {
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--c-text);
    transition: color var(--duration-fast);
  }

  .logo:hover .logo-text {
    color: var(--c-accent);
  }
  
  /* Navigation */
  .nav{
    display:flex;
    align-items:center;
    gap:var(--space-xs);
  }
  
  .nav-links{
    display:flex;
    gap:var(--space-2xs);
    background: hsl(36, 23%, 96%) 50%, transparent);
    background:color-mix(in srgb, var(--c-bg-2) 50%, transparent);
    padding:0.2rem;
    border-radius:2rem;
    border: rgba(209, 215, 221, 0.1);
    border:1px solid color-mix(in srgb, var(--c-border) 10%, transparent);
    align-items:center;
  }
  
  /* 2025: Using :is() for 40% less code */
  .nav-links :is(a, .dropdown-trigger){
    padding:0.4rem 0.6rem;
    border-radius:1.5rem;
    font-size:var(--text-sm);
    font-weight:500;
    color:var(--c-text-3);
    transition:color var(--duration-fast), background var(--duration-fast);
    position:relative;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:0.25rem;
  }
  
  .nav-links :is(a, .dropdown-trigger)::before{
    content:'';
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset:0;
    border-radius:inherit;
    background:var(--c-accent);
    opacity:0;
    transition:opacity var(--duration-fast);
  }
  
  .nav-links :is(a, .dropdown-trigger):hover{
    color:var(--c-text);
  }
  
  .nav-links :is(a, .dropdown-trigger):hover::before{
    opacity:0.08;
  }
  
  .nav-links a[aria-current="page"]{
    background:var(--c-surface);
    color:var(--c-accent);
    box-shadow:
      0 1px 3px color-mix(in srgb, black 5%, transparent),
      0 0 0 1px color-mix(in srgb, var(--c-accent) 10%, transparent) inset;
  }
  
  .nav-links svg.icon{
    inline-size:0.875em;
    block-size:0.875em;
  }
  
  /* Dropdown Menu - CSS Only */
  .nav-dropdown{
    position:relative;
  }
  
  .dropdown-trigger{
    display:inline-flex;
    align-items:center;
    gap:0.2rem;
    cursor:pointer;
    user-select:none;
  }
  
  .dropdown-trigger::after{
    content:'\25BC';
    font-size:var(--text-xs);
    transition:transform var(--duration-fast);
    opacity:0.7;
  }
  
  .dropdown-menu{
    position:absolute;
    inset-block-start:calc(100% + 0.5rem);
    inset-inline-start:50%;
    transform:translateX(-50%);
    min-inline-size:10rem;
    background: hsl(0, 0%, 100%) 95%, transparent);
    background:color-mix(in srgb, var(--c-bg) 95%, transparent);
    backdrop-filter:blur(10px) saturate(180%);
    border: 1px solid hsl(42, 25%, 82%) 20%, transparent);
    border:1px solid color-mix(in srgb, var(--c-border) 20%, transparent);
    border-radius:1rem;
    padding:0.25rem;
    box-shadow:
      0 10px 40px -10px color-mix(in srgb, black 20%, transparent),
      0 0 0 0.5px color-mix(in srgb, white 20%, transparent) inset;
    opacity:0;
    visibility:hidden;
    transition:all var(--duration-fast) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
    z-index:10;
  }
  
  .dropdown-menu::before{
    content:'';
    position:absolute;
    inset-block-start:-0.5rem;
    inset-inline-start:50%;
    transform:translateX(-50%);
    inline-size:0;
    block-size:0;
    border-inline:0.5rem solid transparent;
    border-block-end: 0.5rem solid hsl(0, 0%, 100%) 95%, transparent);
    border-block-end:0.5rem solid color-mix(in srgb, var(--c-bg) 95%, transparent);
  }
  
  .dropdown-menu a{
    display:block;
    padding:0.5rem 0.75rem;
    border-radius:0.5rem;
    font-size:var(--text-sm);
    font-weight:500;
    color:var(--c-text-3);
    transition:all var(--duration-fast);  /* Performance: Consider using transform instead of layout properties */
  }
  
  .dropdown-menu a:hover{
    background: hsl(209, 60%, 45%) 10%, transparent);
    background:color-mix(in srgb, var(--c-accent) 10%, transparent);
    color:var(--c-text);
  }
  
  .nav-dropdown:hover .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
  }
  
  .nav-dropdown:hover .dropdown-trigger::after,
  .nav-dropdown:focus-within .dropdown-trigger::after{
    transform:rotate(180deg);
  }
  
  /* Theme toggle */
  .theme-btn{
    inline-size:2rem;
    block-size:2rem;
    min-inline-size:2rem;
    min-block-size:2rem;
    border-radius:50%;
    background: transparent 80%, transparent);
    background:color-mix(in srgb, var(--c-surface) 80%, transparent);
    backdrop-filter:blur(10px);
    color:var(--c-text);
    transition:all var(--duration-base) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
    border: 1px solid hsl(42, 25%, 82%) 15%, transparent);
    border:1px solid color-mix(in srgb, var(--c-border) 15%, transparent);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
      0 2px 8px color-mix(in srgb, black 5%, transparent),
      0 0 0 0.5px color-mix(in srgb, white 20%, transparent) inset;
    position:relative;
    overflow:hidden;
  }
  
  .theme-btn::before{
    content:'';
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset:0;
    background:radial-gradient(
      circle at 30% 30%,
      color-mix(in srgb, white 20%, transparent),
      transparent 50%
    );
    border-radius:inherit;
    pointer-events:none;
  }
  
  .theme-btn:hover{
    transform:scale(1.1);
    box-shadow:
      0 4px 12px color-mix(in srgb, black 10%, transparent),
      0 0 0 0.5px color-mix(in srgb, white 30%, transparent) inset;
  }
  
  .theme-btn:hover .icon{
    transform:rotate(180deg);
  }
  
  .theme-btn:active{
    transform:scale(0.95);
  }
  
  .theme-btn .icon{
    transition:transform var(--duration-base) var(--ease-out);
    position:relative;
    z-index:1;
  }
  
  /* Main content - styles moved to reset layer */
  
  /* Hero section - Optimized without container wrapper */
  .hero{
    /* Background spans full width */
    background:linear-gradient(135deg, var(--c-accent-subtle) 0%, var(--c-bg-2) 100%);
    margin-block-end:var(--space-xl);
    position:relative;
    overflow:hidden;
    /* Container styles integrated */
    padding:var(--space-3xl) var(--space-md) var(--space-2xl);
  }
  
  .hero::before{
    content:'';
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset:0;
    background:
      radial-gradient(circle at 20% 80%, rgba(46,111,179,0.08) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(46,111,179,0.08) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(46,111,179,0.05) 0%, transparent 30%);
    pointer-events:none;
  }
  
  .hero-content{
    max-inline-size:min(45rem, var(--container));
    margin-inline:auto;
    position:relative;
    z-index:1;
  }
  
  .hero-title{
    font-size:var(--text-3xl);
    font-weight:700;
    margin-block-end:var(--space-md);
    color:var(--c-text);
  }
  
  .hero-desc{
    font-size:var(--text-lg);
    color:var(--c-text-2);
    margin-block-end:var(--space-xl);
    line-height:1.6;
  }
  
  /* Search bar */
  .search-bar{
    display:flex;
    align-items:center;
    background:var(--c-surface);
    border-radius:3.75rem;
    border:1px solid var(--c-border);
    box-shadow:var(--shadow-lg);
    padding:0.25rem;
    transition:all var(--duration-base);  /* Performance: Consider using transform instead of layout properties */
    max-inline-size:34rem;
    min-block-size:3.5rem;
    position:relative;
  }
  
  .search-bar:focus-within{
    box-shadow:0 0 0 4px var(--c-accent-subtle), var(--shadow-lg);
    border-color:var(--c-accent);
  }
  
  .search-input{
    flex:1;
    width:70%;
    padding:0.75rem 1rem;
    padding-inline-start:3rem;
    background:transparent;
    border:0;
    font-size:var(--text-base);
    color:var(--c-text);
    outline:none;
  }
  
  .search-input::placeholder{
    color:var(--c-text-3);
    opacity:0.7;
  }
  
  .search-icon{
    position:absolute;
    inset-inline-start:1.25rem;
    inset-block-start:50%;
    transform:translateY(-50%);
    color:var(--c-text-3);
    pointer-events:none;
    z-index:1;
  }
  
  .search-btn{
    padding:0.625rem 1.5rem;
    margin-inline-end:0.125rem;
    background:var(--c-accent);
    color:white;
    border-radius:3rem;
    font-weight:600;
    font-size:var(--text-sm);
    transition:all var(--duration-fast);  /* Performance: Consider using transform instead of layout properties */
    box-shadow:0 2px 8px var(--c-accent-border);
  }
  
  .search-btn:hover{
    background:var(--c-accent-hover);
    box-shadow: 0 4px 12px hsl(209, 60%, 45%) 35%, transparent);
    box-shadow:0 4px 12px color-mix(in srgb, var(--c-accent) 35%, transparent);
  }
  
  /* Stats */
  .stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(7.5rem, 1fr));
    gap:var(--space-xl);
    margin-block-start:var(--space-2xl);
  }
  
  .stat-value{
    font-size:var(--text-xl);
    font-weight:700;
    color:var(--c-accent);
    display:block;
  }
  
  .stat-label{
    font-size:var(--text-sm);
    color:var(--c-text-3);
    display:block;
  }
  
  /* Archive Header - Optimized without container wrapper */
  .archive-header{
    background:linear-gradient(135deg, var(--c-accent-subtle) 0%, var(--c-bg-2) 100%);
    padding:var(--space-xl) var(--space-md); /* Integrated container padding */
    padding-block-start: var(--space-3xl);
    border-block-end:1px solid var(--c-border);
  }
/* Performance: Universal selector - consider more specific selector */
  
  .archive-header > * {
    max-inline-size:var(--container);
    margin-inline:auto;
  }
  
  .archive-title{
    font-size:var(--text-2xl);
    font-weight:700;
    color:var(--c-text);
    margin-block-end:var(--space-2xl);
  }
  
  /* NOTE: Source/Author Profile styles are defined in components layer (lines 283-602) to avoid duplication */
  /* NOTE: Link styles for .author-name and .source-name are also in components layer (lines 607-623) */

  /* Legacy archive styles removed - unused classes with undefined CSS variables */
  /* Modern archive styles use .archive-header and .source-profile-* classes from components layer */

  .archive-description {
    font-size: var(--text-base);
    color: var(--c-text-2);
    line-height: 1.6;
    margin-block-end: var(--space-lg);
  }

  .archive-meta {
    display: flex;
    gap: var(--space-xl);
    font-size: var(--text-sm);
    color: var(--c-text-3);
  }
  
  /* Main content wrapper - new utility class */
  .content-wrapper {
    max-inline-size:var(--container);
    margin-inline:auto;
    padding-inline: clamp(var(--space-sm), 2vw, var(--space-md));
    padding-block-start: var(--space-lg);
  }
  
  /* Article wrapper - Optimized without container */
  .article-wrapper {
    max-inline-size:var(--container);
    margin-inline:auto;
    padding-inline: clamp(var(--space-sm), 2vw, var(--space-md));
    padding-block-start:var(--space-3xl);
  }
  
  /* Article Hero - Compact Strip Style */
  .article-hero {
    max-inline-size: 100%;
    margin-block-end: var(--space-lg);
    position: relative;
    block-size: 150px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: linear-gradient(
      90deg,
      var(--c-bg-2) 0%,
      var(--c-bg-3) 20%,
      var(--c-bg-2) 40%,
      var(--c-bg-2) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    will-change: background-position;
  }

  .article-hero::before {
    content: "";
    position: absolute;
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
    inset: 10%;
    background: var(--c-border);
    border-radius: var(--radius-sm);
    opacity: 0.3;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
    mask-size: 20%;
    mask-repeat: no-repeat;
    mask-position: center;
    z-index: 0;
  }
  
  .article-hero img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center top;
    position: relative;
    z-index: 1;
  }
  
  .article-hero picture {
    display: block;
  }
  
  /* Article Header */
  .article-header {
    margin-block-end: var(--space-xl);
  }
  
  .article-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
  }
  
  .article-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-text);
    margin-block-end: var(--space-lg);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Article Content Typography */
  .article-content {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--c-text);
  }

  .article-content h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-text);
    margin-block-start: var(--space-2xl);
    margin-block-end: var(--space-lg);
    padding-block: var(--space-md);
    border-block-start: 2px solid var(--c-border);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .article-content h3 {
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.4;
    color: var(--c-text);
    margin-block-start: var(--space-xl);
    margin-block-end: var(--space-md);
    padding-block: var(--space-sm);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .article-content h4 {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.4;
    color: var(--c-text);
    margin-block-start: var(--space-lg);
    margin-block-end: var(--space-sm);
    padding-block: var(--space-xs);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .article-content h5,
  .article-content h6 {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--c-text);
    margin-block-start: var(--space-md);
    margin-block-end: var(--space-sm);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .article-content p {
    margin-block-end: var(--space-lg);
    line-height: 1.8;
  }

  .article-content ul,
  .article-content ol {
    margin-block-end: var(--space-lg);
    padding-inline-start: var(--space-xl);
    list-style-position: outside;
  }

  .article-content ul {
    list-style-type: disc;
  }

  .article-content ol {
    list-style-type: decimal;
  }

  .article-content li {
    margin-block-end: var(--space-sm);
    line-height: 1.7;
  }

  .article-content blockquote {
    margin-block: var(--space-xl);
    padding: var(--space-lg);
    padding-inline-start: var(--space-xl);
    border-inline-start: 4px solid var(--c-accent);
    background: var(--c-bg-2);
    border-radius: var(--radius-md);
    font-style: italic;
    color: var(--c-text-2);
  }

  .article-content img {
    max-inline-size: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-xl);
  }

  .article-content a {
    color: var(--c-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: all var(--duration-fast);  /* Performance: Consider using transform instead of layout properties */
  }

  .article-content a:hover {
    color: var(--c-accent-hover);
    text-decoration-thickness: 2px;
  }

  .article-content code {
    background: var(--c-bg-2);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--c-accent);
    border: 1px solid var(--c-border);
  }

  .article-content pre {
    background: var(--c-bg-2);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-xl);
    border: 1px solid var(--c-border);
  }

  .article-content pre code {
    background: transparent;
    padding: 0;
    border: none;
    color: var(--c-text);
  }

  .article-content hr {
    border: none;
    border-block-start: 1px solid var(--c-border);
    margin-block: var(--space-2xl);
  }

  .article-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-xl);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .article-content th,
  .article-content td {
    padding: var(--space-md);
    border: 1px solid var(--c-border);
    text-align: start;
  }

  .article-content th {
    background: var(--c-bg-2);
    font-weight: 600;
    color: var(--c-text);
  }

  .article-content tr:nth-child(even) {
    background: var(--c-bg-2);
  }

  /* Post Meta Layout */
  .post-meta {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: var(--space-lg);
    padding-block: var(--space-lg);
    border-block: 1px solid var(--c-border);
    font-size: var(--text-sm);
    color: var(--c-text-3);
  }
  
  .post-meta .meta-avatar {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--c-text-2);
    background: var(--gradient-bg);
    position: relative;
  }
  
  .post-meta .meta-avatar::after {
    content: '';
    position: absolute;
    inset-inline-end: calc(-1 * var(--space-lg) / 2 - 0.5px);
    inset-block-start: 50%;
    transform: translateY(-50%);
    block-size: 32px;
    inline-size: 1px;
    background: var(--c-border);
  }
  
  .post-meta .meta-source,
  .post-meta .meta-time,
  .post-meta .meta-engagement {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    line-height: 1.4;
    position: relative;
  }
  
  /* Add vertical dividers between sections on desktop */
  .post-meta .meta-source::after,
  .post-meta .meta-time::after,
  .post-meta .meta-engagement::after {
    content: '';
    position: absolute;
    inset-inline-end: calc(-1 * var(--space-lg) / 2 - 0.5px);
    inset-block-start: 50%;
    transform: translateY(-50%);
    block-size: 32px;
    inline-size: 1px;
    background: var(--c-border);
    opacity: 0.5;
  }
  
  .post-meta .source-name {
    font-weight: 600;
    color: var(--c-text-2);
    font-size: var(--text-sm);
  }
  
  .post-meta .author-name,
  .post-meta .post-time,
  .post-meta .read-time,
  .post-meta .view-count,
  .post-meta .share-count {
    font-size: var(--text-xs);
    color: var(--c-text-3);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  
  .post-meta .icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    opacity: 0.7;
    flex-shrink: 0;
  }
  
  .post-meta .meta-trust {
    background: var(--c-success);
    color: white;
    padding: var(--space-xs) var(--space-md);
    border-radius: 9999px;
    font-weight: 600;
    font-size: var(--text-xs);
    white-space: nowrap;
  }
  
  .post-meta .trust-score {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  
  .post-meta .meta-trust .icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    fill: white;
  }
  
  /* Related Posts */
  .related-posts {
    margin-block: var(--space-2xl) var(--space-2xl);
  }
  
  .related-posts h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--c-text);
    margin-block-end: var(--space-xl);
  }
  
  /* Section title - no wrapper needed */
  .section-title{
    font-size:var(--text-2xl);
    font-weight:700;
    color:var(--c-text);
    transition:color var(--duration-fast);
    margin-block-end:var(--space-xl);
  }
  
  .section-title a{
    color:inherit;
    text-decoration:none;
    transition:color var(--duration-fast);
  }
  
  .section-title a:hover{
    color:var(--c-accent);
  }
  

  /* News Card */
  .news-card {
    background: var(--c-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.15s ease; /* Optimized transition */  /* Performance: Consider using transform instead of layout properties */
    min-block-size: 320px;
    container-type: inline-size;
    contain: layout style; /* CSS containment for performance */
    content-visibility: auto; /* Modern performance optimization */
  }

  /* Focus management for accessibility - hide on mouse */
  .news-card:focus-within {
    outline: none;
  }

  /* Show focus only on keyboard navigation */
  .news-card:has(*:focus-visible) {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-color: var(--c-accent);
  }

  .news-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--c-accent);
  }

  /* Thumbnail Container with Modern CSS */
  .thumbnail-container {
    position: relative;
    inline-size: 100%;
    block-size: 120px;
    min-block-size: 120px;
    aspect-ratio: 3/1;
    overflow: hidden;
    background: linear-gradient(
      90deg,
      var(--c-bg-2) 0%,
      var(--c-bg-3) 20%,
      var(--c-bg-2) 40%,
      var(--c-bg-2) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    contain: layout; /* Performance optimization */
    will-change: background-position;
  }

  /* Single optimized shimmer animation - 2025 */
  @keyframes shimmer {
    to { background-position: -200% 0; }
  }

  /* Respect user's motion preferences for shimmer */
  @media (prefers-reduced-motion: reduce) {
    .article-hero,
    .thumbnail-container {
      animation: none;
    }
  }

  .thumbnail-container::before {
    content: "";
    position: absolute;
    top: 30%;
    right: 30%;
    bottom: 30%;
    left: 30%;
    inset: 30%;
    background: var(--c-border);
    border-radius: var(--radius-sm);
    opacity: 0.3;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
    mask-size: 40%;
    mask-repeat: no-repeat;
    mask-position: center;
  }

  /* Fact Check Badge Overlay */
  .fact-check-overlay {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  [data-theme="dark"] .fact-check-overlay {
    background: rgba(20, 19, 18, 0.95);
    border: 1px solid rgba(59, 58, 57, 0.5);
  }

  .fact-check-overlay svg {
    inline-size: 0.75rem;
    block-size: 0.75rem;
  }

  /* Fact-Check Workflow Status Colors */
  .fact-check-overlay.completed {
    color: var(--c-success);
  }

  .fact-check-overlay.not-checked {
    color: var(--c-text-2);
  }

  .fact-check-overlay.in-progress {
    color: var(--c-info);
  }

  .fact-check-overlay.unverified {
    color: var(--c-warning);
  }

  .fact-check-overlay.partially-verified {
    color: var(--c-info);
  }

  .fact-check-overlay.unverifiable {
    color: var(--c-text-3);
  }

  /* Legacy slug support (backward compatibility) */
  .fact-check-overlay.default {
    color: var(--c-text-2);
  }

  .fact-check-overlay.in_progress {
    color: var(--c-info);
  }

  .fact-check-overlay.partial {
    color: var(--c-info);
  }

  .news-card .thumbnail {
    inline-size: 100%;
    block-size: 120px;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
    background: transparent;
  }

  .news-card .content {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    contain: layout style; /* Performance optimization */
  }

  /* Badges */
  .news-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
  }

  .badge svg {
    inline-size: 0.625rem;
    block-size: 0.625rem;
  }

  /* Special Badges */
  .badge-breaking {
    background: var(--c-danger);
    color: var(--c-bg);
    animation: pulse-bg 2s infinite;
    will-change: opacity;
  }

  /* Respect user's motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .badge-breaking {
      animation: none;
    }
  }

  @keyframes pulse-bg {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
  }

  .badge-exclusive {
    background: var(--c-accent);
    color: var(--c-bg);
  }

  .badge-updated {
    background: var(--c-warning);
    color: var(--c-bg);
  }

  .badge-location {
    background: var(--c-bg-2);
    border: 1px solid var(--c-border);
    color: var(--c-text-3);
    font-family: var(--font-mono);
    font-weight: 500;
  }
  
  /* Verdict Badges */
  .badge-verdict {
    font-weight: 600;
    border: 1px solid;
  }
  
  .badge-verdict-true {
    background: #16a34a20; /* Fallback for color-mix */
    background: color-mix(in srgb, var(--c-success) 15%, var(--c-bg));
    color: #16a34a; /* Fallback for var(--c-success) */
    color: var(--c-success);
    border-color: #16a34a50; /* Fallback */
    border-color: color-mix(in srgb, var(--c-success) 30%, transparent);
  }
  
  .badge-verdict-false {
    background: #dc262620; /* Fallback */
    background: color-mix(in srgb, var(--c-danger) 15%, var(--c-bg));
    color: #dc2626; /* Fallback */
    color: var(--c-danger);
    border-color: #dc262650; /* Fallback */
    border-color: color-mix(in srgb, var(--c-danger) 30%, transparent);
  }
  
  .badge-verdict-misleading {
    background: #fbbf2420; /* Fallback */
    background: color-mix(in srgb, var(--c-warning) 15%, var(--c-bg));
    color: #ca8a04; /* Fallback */
    color: color-mix(in srgb, var(--c-warning) 80%, black);
    border-color: #ca8a0450; /* Fallback */
    border-color: color-mix(in srgb, var(--c-warning) 30%, transparent);
  }
  
  .badge-verdict-selective {
    background: #0ea5e920; /* Fallback */
    background: color-mix(in srgb, var(--c-info) 15%, var(--c-bg));
    color: #0ea5e9; /* Fallback */
    color: var(--c-info);
    border-color: #0ea5e950; /* Fallback */
    border-color: color-mix(in srgb, var(--c-info) 30%, transparent);
  }
  
  .badge-verdict-exaggerated {
    background: #f59e0b20; /* Fallback */
    background: color-mix(in srgb, var(--c-warning) 12%, var(--c-bg));
    color: #d97706; /* Fallback */
    color: color-mix(in srgb, var(--c-warning) 75%, black);
    border-color: #d9770650; /* Fallback */
    border-color: color-mix(in srgb, var(--c-warning) 25%, transparent);
  }
  
  .badge-verdict-satire {
    background: #6b728020; /* Fallback */
    background: color-mix(in srgb, var(--c-text-3) 20%, var(--c-bg));
    color: #6b7280; /* Fallback */
    color: var(--c-text-2);
    border-color: #6b728050; /* Fallback */
    border-color: color-mix(in srgb, var(--c-border) 60%, transparent);
  }
  
  .badge-verdict-myth {
    background: #dc262620; /* Fallback */
    background: color-mix(in srgb, var(--c-danger) 12%, var(--c-bg));
    color: #b91c1c; /* Fallback */
    color: color-mix(in srgb, var(--c-danger) 85%, black);
    border-color: #b91c1c50; /* Fallback */
    border-color: color-mix(in srgb, var(--c-danger) 25%, transparent);
  }
  
  /* Title */
  .news-card h3 {
    font-size: var(--text-lg);
    line-height: 1.3;
    color: var(--c-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    min-height: calc(var(--text-lg) * 1.3 * 2);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .news-card h3 a {
    color: inherit;
    text-decoration: none;
    display: block;
  }

  .news-card h3 a:hover {
    color: var(--c-accent);
  }

  /* Hide outline on mouse click */
  .news-card h3 a:focus {
    outline: none;
  }

  /* Show outline only on keyboard navigation */
  .news-card h3 a:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* Meta Article Layout */
  .meta-article {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-block-start: var(--space-sm);
    border-block-start: 1px solid var(--c-border);
    font-size: var(--text-base);
    color: var(--c-text-3);
  }

  .meta-avatar {
    inline-size: 36px;
    block-size: 36px;
    min-inline-size: 36px;
    min-block-size: 36px;
    border-radius: 20%;
    flex-shrink: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--c-text-2);
    background: var(--gradient-bg);
    position: relative;
    margin-inline-end: var(--space-sm);
  }
  
  .meta-avatar::after {
    content: '';
    position: absolute;
    inset-inline-end: calc(-1 * var(--space-sm) / 2);
    inset-block-start: 50%;
    transform: translateY(-50%);
    block-size: 32px;
    inline-size: 1px;
    background: var(--c-border);
  }

  .meta-info {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-xs);
    line-height: 1.4;
  }

  .source-name {
    font-weight: 600;
    color: var(--c-text-2);
    font-size: var(--text-xs);
    grid-column: 1;
    grid-row: 1;
  }

  .author-name {
    color: var(--c-text-3);
    font-size: var(--text-xs);
    grid-column: 1;
    grid-row: 2;
  }

  .post-time {
    color: var(--c-text-3);
    font-size: var(--text-xs);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }

  .read-time {
    color: var(--c-text-3);
    font-size: var(--text-xs);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }

  .post-time svg,
  .read-time svg {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    fill: currentColor;
    opacity: 0.7;
  }
  
  /* Engagement Bar */
  .engagement-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--space-md);
    padding-block-start: var(--space-sm);
    border-block-start: 1px solid var(--c-line-subtle);
    font-size: var(--text-xs);
    color: var(--c-text-3);
  }
  
  .stat-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--c-text-3);
  }
  
  .stat-item svg {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    opacity: 0.7;
  }
  
  .stat-item.trust-score {
    color: var(--c-success);
    font-weight: 600;
  }

  /* Special Card States */
  .news-card.breaking-news {
    border-color: var(--c-danger);
    border-width: 2px;
  }

  .news-card.exclusive-news {
    border-color: var(--c-accent);
    border-width: 2px;
  }
  
  /* Pagination */
  .pagination{
    display:flex;
    justify-content:center;
    margin-block:var(--space-2xl);
  }
  
  .pagination-links{
    display:flex;
    gap:var(--space-2xs);
    background: hsl(36, 23%, 96%) 50%, transparent);
    background:color-mix(in srgb, var(--c-bg-2) 50%, transparent);
    padding:0.2rem;
    border-radius:2rem;
    border: rgba(209, 215, 221, 0.1);
    border:1px solid color-mix(in srgb, var(--c-border) 10%, transparent);
    align-items:center;
  }
  
  .page-numbers{
    padding:var(--space-sm) var(--space-md);
    border-radius:1.5rem;
    font-size:var(--text-sm);
    font-weight:500;
    color:var(--c-text-2);
    transition:all var(--duration-fast);  /* Performance: Consider using transform instead of layout properties */
  }
  
  .page-numbers:hover{
    background: hsl(209, 60%, 45%) 10%, transparent);
    background:color-mix(in srgb, var(--c-accent) 10%, transparent);
    color:var(--c-accent);
  }
  
  .page-numbers.current{
    background:var(--c-surface);
    color:var(--c-accent);
    box-shadow:
      0 1px 3px color-mix(in srgb, black 5%, transparent),
      0 0 0 1px color-mix(in srgb, var(--c-accent) 10%, transparent) inset;
  }
  
  .page-numbers.dots{
    background:transparent;
    cursor:default;
    padding-inline:var(--space-xs);
  }
  
  .page-numbers.dots:hover{
    background:transparent;
    color:var(--c-text-2);
  }
  
  .page-numbers.prev,
  .page-numbers.next{
    padding-inline:var(--space-lg);
  }
  
  /* Footer - Optimized without container wrapper */
  .footer{
    background:var(--c-bg-2);
    border-block-start:1px solid var(--c-border);
    padding:var(--space-2xl) var(--space-md) var(--space-xl);
    margin-block-start:var(--space-2xl);
    container-type:inline-size;
  }
  
  .footer-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-2xl);
    margin-block-end:var(--space-xl);
    max-inline-size:var(--container);
    margin-inline:auto;
  }
  
  .footer-brand{
    grid-column:1 / -1;
    max-inline-size:100%;
  }
  
  .footer-logo{
    display:flex;
    align-items:center;
    gap:var(--space-md);
    margin-block-end:var(--space-lg);
    font-weight:700;
    color:var(--c-accent);
  }
  
  .footer-desc{
    font-size:var(--text-sm);
    color:var(--c-text-3);
    line-height:1.7;
  }
  
  .footer-topics h3,
  .footer-legal h3{
    font-size:var(--text-base);
    font-weight:600;
    margin-block-end:var(--space-lg);
    color:var(--c-text);
  }
  
  .footer-links{
    display:flex;
    flex-direction:column;
    gap:var(--space-sm);
  }
  
  .footer-links a{
    font-size:var(--text-sm);
    color:var(--c-text-3);
    transition:color var(--duration-fast);
  }
  
  .footer-links a:hover{
    color:var(--c-accent);
  }
  
  .footer-bottom{
    padding-block-start:var(--space-xl);
    border-block-start:1px solid var(--c-border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-lg);
    max-inline-size:var(--container);
    margin-inline:auto;
  }
  
  .footer-copy{
    font-size:var(--text-sm);
    color:var(--c-text-3);
  }
  
  .social-links{
    display:flex;
    gap:var(--space-sm);
  }
  
  .social-link{
    inline-size:2.25rem;
    block-size:2.25rem;
    min-inline-size:2.25rem;
    min-block-size:2.25rem;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--c-surface);
    border-radius:50%;
    transition:all var(--duration-fast);  /* Performance: Consider using transform instead of layout properties */
  }
  
  .social-link:hover{
    background:var(--c-accent);
    color:white;
    box-shadow:0 2px 8px var(--c-accent-border);
  }
  
  /* Mobile menu checkbox */
  .menu-btn{
    display:none;
    inline-size:2rem;
    block-size:2rem;
    min-inline-size:2rem;
    min-block-size:2rem;
    border-radius:50%;
    background: transparent 80%, transparent);
    background:color-mix(in srgb, var(--c-surface) 80%, transparent);
    backdrop-filter:blur(10px);
    border: 1px solid hsl(42, 25%, 82%) 15%, transparent);
    border:1px solid color-mix(in srgb, var(--c-border) 15%, transparent);
    align-items:center;
    justify-content:center;
    box-shadow:
      0 2px 8px color-mix(in srgb, black 5%, transparent),
      0 0 0 0.5px color-mix(in srgb, white 20%, transparent) inset;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    transition:all var(--duration-fast);  /* Performance: Consider using transform instead of layout properties */
  }
  
  .menu-btn::before{
    content:'';
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset:0;
    background:radial-gradient(
      circle at 30% 30%,
      color-mix(in srgb, white 20%, transparent),
      transparent 50%
    );
    border-radius:inherit;
    pointer-events:none;
  }
  
  .menu-btn:hover{
    transform:scale(1.1);
    box-shadow:
      0 4px 12px color-mix(in srgb, black 10%, transparent),
      0 0 0 0.5px color-mix(in srgb, white 30%, transparent) inset;
  }
  
  .menu-icon{
    position:relative;
    inline-size:0.875rem;
    block-size:1.5px;
    background:var(--c-text);
    transition:all var(--duration-base) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
    border-radius:1px;
  }
  
  .menu-icon::before,
  .menu-icon::after{
    content:'';
    position:absolute;
    inline-size:100%;
    block-size:100%;
    background:inherit;
    border-radius:inherit;
    transition:inherit;
  }
  
  .menu-icon::before{
    inset-block-start:-0.2rem;
  }
  
  .menu-icon::after{
    inset-block-start:0.2rem;
  }
  
  #menu-toggle{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }
  
  #menu-toggle:checked ~ .nav .menu-icon{
    background:transparent;
  }
  
  #menu-toggle:checked ~ .nav .menu-icon::before{
    inset-block-start:0;
    transform:rotate(45deg);
    background:var(--c-text);
  }
  
  #menu-toggle:checked ~ .nav .menu-icon::after{
    inset-block-start:0;
    transform:rotate(-45deg);
    background:var(--c-text);
  }
  
  #menu-toggle:checked ~ .nav .nav-links{
    display:flex!important;
    position:fixed;
    inset-block-start:5rem;
    inset-inline-start:50%;
    transform:translateX(-50%);
    inline-size:min(calc(100vw - 2rem), var(--container));
    background:var(--c-bg);
    backdrop-filter:blur(10px) saturate(180%);
    flex-direction:column;
    padding:0;
    border-radius:var(--radius-lg);
    box-shadow:
      0 10px 40px color-mix(in srgb, black 15%, transparent),
      0 0 0 1px var(--c-border);
    border:none;
    animation:dropDown 250ms var(--ease-out);
    z-index:999;
    overflow:hidden;
    will-change: transform, opacity;
  }
  
  /* WordPress Admin Bar - Mobile Menu Adjustment */
  .admin-bar #menu-toggle:checked ~ .nav .nav-links {
    inset-block-start: calc(32px + 5rem);
  }
  
  /* 2025: Using :is() for mobile menu too */
  #menu-toggle:checked ~ .nav .nav-links :is(a, .dropdown-trigger){
    padding:1rem 1.5rem;
    border-radius:0;
    text-align:start;
    border-block-end:1px solid var(--c-line-subtle);
    margin:0;
    inline-size:100%;
    display:flex;
    align-items:center;
    gap:0.25rem;
  }
  
  #menu-toggle:checked ~ .nav .nav-links :is(a, .dropdown-trigger):hover{
    background:var(--c-accent-subtle);
  }
  
  #menu-toggle:checked ~ .nav .nav-links a:last-child{
    border-block-end:none;
  }
  
  #menu-toggle:checked ~ .nav .nav-dropdown{
    inline-size:100%;
  }
  
  #menu-toggle:checked ~ .nav .nav-dropdown .dropdown-trigger{
    display:none;
  }
  
  #menu-toggle:checked ~ .nav .nav-dropdown .dropdown-menu{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    margin:0;
    background:transparent;
    box-shadow:none;
    border:none;
    padding:0;
    min-inline-size:100%;
  }
  
  #menu-toggle:checked ~ .nav .nav-dropdown .dropdown-menu::before{
    display:none;
  }
  
  #menu-toggle:checked ~ .nav .nav-dropdown .dropdown-menu a{
    padding-inline-start:2.5rem;
    background:var(--c-bg-2);
  }
  
  #menu-toggle:checked ~ .nav .nav-dropdown .dropdown-menu a:hover{
    background:var(--c-accent-subtle);
  }
  
  @keyframes dropDown{
    from{
      opacity:0;
      transform:translateX(-50%) translateY(-1rem);
    }
    to{
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }
  }
}

@layer utilities {
  /* Utility classes */
  .sr-only{
    position:absolute;
    inline-size:1px;
    block-size:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  
  /* Icons */
  .icon{
    display:inline-block;
    inline-size:1em;
    block-size:1em;
    vertical-align:middle;
    fill:currentColor;
    flex-shrink:0;
  }
  
  .icon-xl{inline-size:2em;block-size:2em}
  
  /* Focus states - hide outline on mouse click */
  :focus{
    outline:none;
  }

  /* Show outline only on keyboard navigation */
  :focus-visible{
    outline:2px solid var(--c-accent);
    outline-offset:2px;
    border-radius:var(--radius-md);
  }

  /* Search input never shows outline */
  .search-input:focus,
  .search-input:focus-visible{
    outline:none;
  }
}

/* ================================================
   SOURCE BANNER WIDGET - EXACT COPY FROM VISUALIZATION
   ================================================ */
.source-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	gap: clamp(0.5rem, 2vw, var(--space-lg));
	padding: var(--space-lg) var(--space-xl);
	padding: clamp(0.625rem, 2vw, var(--space-lg)) clamp(0.75rem, 2.5vw, var(--space-xl));
	background: linear-gradient(to right, var(--c-bg), var(--c-bg-2));
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	inline-size: 100%;
	margin-block: var(--space-2xl) var(--space-xl);
}

.source-banner-left {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	gap: clamp(0.375rem, 1.5vw, var(--space-md));
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
}

/* Source Avatar - unified with meta-avatar styling */
.source-avatar {
	inline-size: 36px;
	block-size: 36px;
	min-inline-size: 36px;
	min-block-size: 36px;
	border-radius: 20%;
	flex-shrink: 0;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: var(--text-base);
	color: var(--c-text-2);
	background: linear-gradient(135deg, var(--c-bg-2), var(--c-bg-3));
	position: relative;
}

/* Remove the source-avatar-letter class - text displays directly in .source-avatar now */
.source-avatar-letter {
	/* No additional styling needed - text displays directly in parent */
}

.source-avatar-img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: 20%;
}

/* Hide text when image is present */
@supports selector(:has(*)) {
  .source-avatar:has(.source-avatar-img) {
  	color: transparent;
  }
}

.source-banner-info {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-inline-size: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

.source-banner-label {
	font-size: 0.875rem;
	font-size: clamp(0.75rem, 1.5vw, 0.875rem);
	font-weight: 700;
	letter-spacing: max(0.03em, 0.3px);
	text-transform: uppercase;
	color: var(--c-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.source-banner-name {
	font-size: var(--text-base);
	font-size: clamp(0.75rem, 2.5vw, var(--text-base));
	font-weight: 600;
	color: var(--c-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.source-banner-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	gap: clamp(0.125rem, 1vw, 0.375rem);
	padding: var(--space-sm) var(--space-md);
	padding: clamp(0.25rem, 1.5vw, var(--space-sm)) clamp(0.375rem, 2vw, var(--space-md));
	background: var(--c-accent);
	color: white;
	border-radius: var(--radius-md);
	text-decoration: none;
	font-size: var(--text-sm);
	font-size: clamp(0.75rem, 2vw, var(--text-sm));
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
}

.source-banner-link:hover {
	background: hsl(209, 60%, 45%) 85%, black);
	background: color-mix(in srgb, var(--c-accent) 85%, black);
}

.source-banner-link span {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	max-inline-size: 10rem;
	max-inline-size: clamp(4rem, 15vw, 10rem);
}

.source-banner-link svg.icon {
	inline-size: 1rem;
	inline-size: clamp(0.75rem, 2vw, 1rem);
	block-size: 1rem;
	block-size: clamp(0.75rem, 2vw, 1rem);
	flex-shrink: 0;
	vertical-align: baseline;
	fill: currentColor;
}

/* ================================================
   TLDR MINIMAL LINE DESIGN
   ================================================ */
.tldr-minimal {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	position: relative;
	margin-block: var(--space-xl) var(--space-2xl);
}

.tldr-minimal::before {
	content: "TL;DR";
	position: absolute;
	inset-block-start: -0.5rem;
	inset-inline-start: var(--space-xl);
	background: var(--c-bg);
	padding-inline: var(--space-sm);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--c-text-3);
	text-transform: uppercase;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
}

.tldr-minimal-left {
	padding: var(--space-lg);
	border-inline-end: 1px solid var(--c-border);
}

.tldr-minimal-headline {
	font-size: var(--text-md);
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-text);
}

.tldr-minimal-summary {
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--c-text-2);
	padding-block-start: var(--radius-md);
}

.tldr-minimal-right {
	padding: var(--space-md);
	background: var(--c-bg-2);
}

.tldr-minimal-points {
	list-style: none;
}

.tldr-minimal-point {
	align-items: flex-start;
	gap: var(--space-sm);
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--c-text);
	padding-inline-start: var(--space-lg);
	position: relative;
}

.tldr-minimal-point::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.6em;
	inline-size: var(--space-md);
	block-size: 1px;
	background: var(--c-accent);
}

/* =================================================================
   FAQ Section Styles - Exact match from visualization/single.html
   ================================================================= */

.faq-section {
	margin-block: var(--space-2xl) var(--space-2xl);
}

.faq-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 1.25rem;
	margin-block-end: clamp(1rem, 3vw, 1.25rem);
	flex-wrap: wrap;
	gap: 1rem;
}

.faq-header h2 {
	color: var(--c-text);
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: 700;
}

.faq-controls {
	display: flex;
}

.faq-controls button {
	padding: 0.5rem 1rem;
	background-color: var(--c-border);
	color: var(--c-text);
	border: none;
	border-radius: 0.25rem;
	cursor: pointer;
	font-size: 0.875rem;
	transition: background-color 200ms;
	min-width: 6rem;
}

.faq-controls button:hover {
	background-color: hsl(42, 25%, 82%) 85%, black);
	background-color: color-mix(in srgb, var(--c-border) 85%, black);
}

[data-theme="dark"] .faq-controls button:hover {
	background-color: hsl(42, 25%, 82%) 115%, white);
	background-color: color-mix(in srgb, var(--c-border) 115%, white);
}

.faq-container {
	container-type: inline-size;
	border: 0.5px solid var(--c-border);
	border-radius: 0.5rem;
	border-radius: clamp(0.375rem, 1vw, 0.5rem);
	overflow: hidden;
	margin-block: 1rem;
	margin-block: clamp(0.75rem, 2vw, 1rem);
	background-color: var(--c-bg-2);
}

.faq-item {
	position: relative;
	overflow: visible;
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .faq-item:hover {
	background-color: rgba(0, 0, 0, 0.3);
}

.faq-item[open] {
	background-color: var(--c-bg-3);
}

.faq-item details {
	position: relative;
}

.faq-item summary {
	display: grid;
	grid-template-columns: 2.5rem 1fr auto;
	grid-template-columns: clamp(2rem, 8cqi, 2.5rem) 1fr auto;
	align-items: center;
	padding-block: 1rem;
	padding-block: clamp(0.75rem, 3cqi, 1rem);
	padding-inline-end: 1rem;
	padding-inline-end: clamp(0.5rem, 2cqi, 1rem);
	cursor: pointer;
	list-style: none;
	user-select: none;
	color: var(--c-text-3);
	transition: color 200ms;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::marker {
	display: none;
}

.faq-item summary:hover {
	color: var(--c-text);
}

/* Hide outline on mouse click */
.faq-item summary:focus {
	outline: none;
}

/* Show outline only on keyboard navigation */
.faq-item summary:focus-visible {
	outline: 2px solid var(--c-text-3);
	outline-offset: -2px;
	border-radius: 4px;
}

.faq-indicator {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	inline-size: 100%;
	block-size: 100%;
}

.faq-indicator::before {
	content: attr(data-number);
	inline-size: 1.25rem;
	inline-size: clamp(1rem, 3cqi, 1.25rem);
	block-size: 1.25rem;
	block-size: clamp(1rem, 3cqi, 1.25rem);
	border-radius: 50%;
	background-color: var(--c-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-size: clamp(0.625rem, 2cqi, 0.75rem);
	font-weight: 600;
	color: var(--c-text-3);
	line-height: 1;
	z-index: 2;
}

.faq-indicator::after {
	content: '';
	position: absolute;
	top: 1.25rem;
	top: clamp(1rem, 3cqi, 1.25rem);
	inline-size: 1px;
	background-color: var(--c-border);
	block-size: calc(100% + 1rem);
	block-size: calc(100% + clamp(0.75rem, 3cqi, 1rem));
	transition: block-size 400ms cubic-bezier(0.4, 0, 0.2, 1);  /* Performance: Consider using transform instead of layout properties */
}

.faq-item:last-child .faq-indicator::after {
	display: none;
}

.faq-item[open] .faq-indicator::after {
	block-size: var(--line-height, calc(100% + 1rem));
}

.faq-question {
	font-weight: 500;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-inline-end: 1rem;
	padding-inline-end: clamp(0.5rem, 2cqi, 1rem);
	font-size: 1rem;
	font-size: clamp(0.875rem, 3cqi, 1rem);
}

.faq-chevron {
	inline-size: 1.25rem;
	inline-size: clamp(1rem, 4cqi, 1.25rem);
	block-size: 1.25rem;
	block-size: clamp(1rem, 4cqi, 1.25rem);
	transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
	color: var(--c-text-3);
}

.faq-item[open] .faq-chevron {
	transform: rotate(180deg);
}

.faq-answer {
	padding-inline-start: 2.5rem;
	padding-inline-start: clamp(2rem, 8cqi, 2.5rem);
	padding-inline-end: 1rem;
	padding-inline-end: clamp(0.5rem, 2cqi, 1rem);
	padding-block-end: 1rem;
	padding-block-end: clamp(0.5rem, 2cqi, 1rem);
	color: var(--c-text-3);
	font-size: 0.875rem;
	font-size: clamp(0.8125rem, 2.5cqi, 0.875rem);
	line-height: 1.5;
	max-block-size: 15rem;
	max-block-size: clamp(10rem, 30vh, 15rem);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--c-border) transparent;
}

.faq-answer::-webkit-scrollbar {
	inline-size: 6px;
}

.faq-answer::-webkit-scrollbar-track {
	background: transparent;
}

.faq-answer::-webkit-scrollbar-thumb {
	background: var(--c-border);
	border-radius: 3px;
}

.faq-answer ol {
	margin-block: 0.5rem;
	padding-inline-start: 1.25rem;
	list-style: decimal;
}

.faq-answer li {
	margin-block: 0.25rem;
}

/* ================================================================= */
/* CONSOLIDATED MEDIA QUERIES */
/* ================================================================= */

/* Container Queries */
@container (min-width: 25rem) {
	.faq-question {
		white-space: normal;
	}
}

@container (max-width: 40rem){
  .footer-bottom{
    flex-direction:column;
    text-align:center;
  }
}

@container (min-width: 50rem){
  .footer-content{
    grid-template-columns:2fr 1fr 1fr;
  }
  
  .footer-brand{
    grid-column:auto;
    max-inline-size:35rem;
  }
}

/* Mobile Small - max-width: 480px */

/* Mobile - max-width: 767px */
@media (max-width: 767px) {
  .nav-links{display:none}
  .menu-btn{display:flex!important}
  
  .header{
    padding-inline:var(--space-sm);
  }
  
  .logo-text{
    font-size:var(--text-sm);
  }
  
  .stats{
    grid-template-columns:repeat(2, 1fr);
    gap:var(--space-lg);
    text-align:center;
  }

  .search-bar{
    padding:var(--space-xs);
  }
  
  .search-input{
    padding:0.625rem 0.75rem;
    padding-inline-start:2.25rem;
    font-size:var(--text-sm);
  }
  
  .search-btn{
    padding:0.5rem 1rem;
    font-size:var(--text-xs);
  }
  
  .search-icon{
    inset-inline-start:0.75rem;
  }
  
  .section-title{
    margin-block-end:var(--space-sm);
  }
  
  .grid-3col {
    grid-template-columns: 1fr;
  }
  
  .meta-info {
    font-size: var(--text-xs);
  }
  
  .article-hero {
    block-size: 120px;
  }
  
  .article-title {
    font-size: var(--text-2xl);
  }

  /* E.E.A.T Author Profile - Mobile */
  .author-eeat-header-top {
    flex-direction: row;
    align-items: center;
  }

  .author-eeat-header .author-profile-avatar {
    width: 60px;
    height: 60px;
    font-size: var(--text-xl);
  }

  .author-eeat-header .author-profile-title {
    font-size: var(--text-2xl);
  }

  .author-contact-social {
    flex-wrap: wrap;
  }

  /* Mobile Post Meta Layout */
  .post-meta {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1px auto;
    gap: var(--space-md);
  }
  
  /* Hide vertical dividers on mobile */
  .post-meta .meta-avatar::after,
  .post-meta .meta-source::after,
  .post-meta .meta-time::after,
  .post-meta .meta-engagement::after {
    display: none;
  }
  
  .post-meta .meta-avatar {
    grid-column: 1;
    grid-row: 1;
  }
  
  .post-meta .meta-source {
    grid-column: 2;
    grid-row: 1;
  }
  
  .post-meta .meta-time {
    grid-column: 3;
    grid-row: 1;
  }
  
  /* Divider line */
  .post-meta::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 2;
    block-size: 1px;
    background: var(--c-border);
  }
  
  /* Bottom row - engagement stats */
  .post-meta .meta-engagement {
    grid-column: 1 / 3;
    grid-row: 3;
    flex-direction: row;
    gap: var(--space-lg);
  }
  
  .post-meta .meta-trust {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    align-self: center;
  }
  
  /* Table responsive adjustments */
  .article-content th,
  .article-content td {
    padding: var(--space-sm);
    font-size: var(--text-sm);
  }
  
  /* TLDR responsive */
  .tldr-minimal {
    grid-template-columns: 1fr;
  }
  
  .tldr-minimal-left {
    border-inline-end: none;
    border-block-end: 1px solid var(--c-border);
  }
}

/* Desktop - min-width: 768px */
@media (min-width: 768px) {
  .nav-links{
    display:flex!important;
    position:static!important;
    inline-size:auto!important;
    padding:0.2rem!important;
    border: 1px solid hsl(42, 25%, 82%) 10%, transparent)!important;
    border:1px solid color-mix(in srgb, var(--c-border) 10%, transparent)!important;
    box-shadow:none!important;
    flex-direction:row!important;
    backdrop-filter:none!important;
    background: hsl(36, 23%, 96%) 50%, transparent)!important;
    background:color-mix(in srgb, var(--c-bg-2) 50%, transparent)!important;
    animation:none!important;
  }
  
  .menu-btn{display:none}
  
  .main{
    padding-block:0rem;
  }
}

/* WordPress Admin Bar Compatibility - max-width: 782px */
@media screen and (max-width: 782px) {
  .admin-bar .header {
    inset-block-start: calc(46px + 0.5rem);
  }
  
  .admin-bar #menu-toggle:checked ~ .nav .nav-links {
    inset-block-start: calc(46px + 1rem);
  }
}

/* ================================================================= */
/* SHARE BAR SYSTEM - AI PLATFORMS & SOCIAL MEDIA */
/* Extracted from visualization/sharebar.html */
/* ================================================================= */

@layer components {
  /* Share Button Base Styles */
  .share-btn {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transition: all var(--duration-base) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
  }
  
  /* Special case for Google News multi-color icon */
  .share-btn.googlenews .icon {
    fill: none;
  }
  
  .share-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
  }
  
  .share-btn:active {
    transform: scale(0.95);
  }
  
  .share-btn .icon {
    inline-size: 18px;
    block-size: 18px;
    position: relative;
    z-index: 2;
  }
  
  /* Tooltip - Desktop Only */
  @media (min-width: 768px) {
    .share-btn[data-tooltip]::before {
      content: attr(data-tooltip);
      position: absolute;
      inset-block-end: calc(100% + 8px);
      inset-inline-start: 50%;
      transform: translateX(-50%);
      padding: var(--space-xs) var(--space-sm);
      background: var(--c-glass);
      backdrop-filter: blur(10px);
      color: var(--c-text);
      font-size: var(--text-xs);
      white-space: nowrap;
      border-radius: var(--radius-sm);
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      z-index: 1000;
      box-shadow: var(--shadow-md);
      transition: all var(--duration-base) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
    }
    
    .share-btn[data-tooltip]:hover::before {
      opacity: 1;
      visibility: visible;
    }
  }
  
  /* Brand-specific hover colors */
  .share-btn.chatgpt:hover {
    color: #10A37F;
    border-color: #10A37F;
    background: transparent;
    background: color-mix(in srgb, #10A37F 10%, transparent);
  }
  
  .share-btn.perplexity:hover {
    color: #20B2AA;
    border-color: #20B2AA;
    background: transparent;
    background: color-mix(in srgb, #20B2AA 10%, transparent);
  }
  
  .share-btn.googleai:hover {
    color: #4285F4;
    border-color: #4285F4;
    background: transparent;
    background: color-mix(in srgb, #4285F4 10%, transparent);
  }
  
  .share-btn.grok:hover {
    color: var(--c-text);
    border-color: var(--c-text);
    background: var(--c-bg-2);
  }
  
  .share-btn.claude:hover {
    color: #D97706;
    border-color: #D97706;
    background: transparent;
    background: color-mix(in srgb, #D97706 10%, transparent);
  }
  
  .share-btn.googlenews:hover {
    border-color: #4285F4;
    background: transparent;
    background: color-mix(in srgb, #4285F4 10%, transparent);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
  }
  
  .share-btn.facebook:hover {
    color: #1877F2;
    border-color: #1877F2;
    background: transparent;
    background: color-mix(in srgb, #1877F2 10%, transparent);
  }
  
  .share-btn.x:hover {
    color: #1DA1F2;
    border-color: #1DA1F2;
    background: transparent;
    background: color-mix(in srgb, #1DA1F2 10%, transparent);
  }
  
  .share-btn.linkedin:hover {
    color: #0077B5;
    border-color: #0077B5;
    background: transparent;
    background: color-mix(in srgb, #0077B5 10%, transparent);
  }
  
  .share-btn.reddit:hover {
    color: #FF4500;
    border-color: #FF4500;
    background: transparent;
    background: color-mix(in srgb, #FF4500 10%, transparent);
  }
  
  .share-btn.whatsapp:hover {
    color: #25D366;
    border-color: #25D366;
    background: transparent;
    background: color-mix(in srgb, #25D366 10%, transparent);
  }
  
  .share-btn.telegram:hover {
    color: #26A5E4;
    border-color: #26A5E4;
    background: transparent;
    background: color-mix(in srgb, #26A5E4 10%, transparent);
  }
  
  .share-btn.pinterest:hover {
    color: #E60023;
    border-color: #E60023;
    background: transparent;
    background: color-mix(in srgb, #E60023 10%, transparent);
  }
  
  .share-btn.markdown:hover {
    color: var(--c-text);
    border-color: var(--c-text);
    background: var(--c-bg-2);
  }
  
  .share-btn.copy:hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-accent-subtle);
  }
  
  .share-btn.copy.copied {
    color: white;
    border-color: var(--c-success);
    background: var(--c-success);
  }
  
  /* Below Article Share Bar */
  .share-bar-below {
    position: sticky;
    inset-block-start: 2rem;
    margin: 3rem 0;
    padding: 1rem 0;
    border: none;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
  }
  
  /* CSS Separators for below article share buttons */
  .share-bar__buttons .share-btn.claude::after,
  .share-bar__buttons .share-btn.pinterest::after {
    content: '';
    position: absolute;
    inset-inline-end: calc(-1 * 0.25rem - 0.5px);
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 1px;
    block-size: 24px;
    background: var(--c-border);
    pointer-events: none;
  }
}

@layer mobile {
  /* Mobile Share Bar - Fixed Bottom */
  .mobile-share-bar {
    display: none;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    background: var(--c-glass);
    backdrop-filter: blur(10px);
    border-block-start: 1px solid var(--c-border);
    box-shadow: 0 -2px 10px var(--c-black-10);
    z-index: 600;
    padding: var(--space-sm);
  }
  
  @media (max-width: 640px) {
    .mobile-share-bar {
      display: block;
    }
    
    .share-bar-below {
      position: relative;
      inset-block-start: 0;
      margin: 2rem 0;
      padding: 0.75rem 0;
      justify-content: center;
      gap: 0.5rem;
    }
    
    .share-btn {
      flex-shrink: 0;
      min-inline-size: 36px;
    }
  }
  
  .mobile-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }
  
  /* Mobile TOC Button */
  .mobile-toc-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--c-accent);
    color: white;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
  }
  
  .mobile-toc-btn:hover {
    background: var(--c-accent-hover);
  }
  
  .mobile-toc-btn:active {
    transform: scale(0.98);
  }
  
  .mobile-toc-btn .icon {
    inline-size: 18px;
    block-size: 18px;
  }
  
  /* Mobile Share Button */
  .mobile-share-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: var(--c-bg-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
  }
  
  .mobile-share-btn:hover {
    background: var(--c-bg-3);
    border-color: var(--c-accent);
  }
  
  .mobile-share-btn:active {
    transform: scale(0.98);
  }
  
  .mobile-share-btn .icon {
    inline-size: 18px;
    block-size: 18px;
  }
  
  /* Mobile TOC Overlay */
  .mobile-toc-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background: var(--c-black-20);
    backdrop-filter: blur(4px);
    z-index: 700;
  }
  
  .mobile-toc-overlay.active {
    display: block;
  }
  
  .mobile-toc-content {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 20%;
    inline-size: 80%;
    max-inline-size: 300px;
    block-size: 60%;
    background: var(--c-surface);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    box-shadow: 0 4px 20px var(--c-black-15);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    transition: transform var(--duration-base) var(--ease-out);
  }
  
  .mobile-toc-overlay.active .mobile-toc-content {
    transform: translateX(0);
  }
  
  .mobile-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-lg);
    padding-block-end: var(--space-md);
    border-block-end: 1px solid var(--c-border);
    flex-shrink: 0;
  }
  
  .mobile-toc-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--c-text);
  }
  
  .mobile-toc-close {
    inline-size: 32px;
    block-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-bg-2);
    color: var(--c-text-2);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
  }
  
  .mobile-toc-close:hover {
    background: var(--c-bg-3);
    transform: rotate(90deg);
  }
  
  .mobile-toc-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
  }
  
  .mobile-toc-link {
    display: block;
    padding: var(--space-sm);
    font-size: var(--text-base);
    color: var(--c-text-2);
    border-radius: var(--radius-sm);
    transition: all var(--duration-base) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
  }
  
  .mobile-toc-link:hover {
    background: var(--c-bg-2);
    color: var(--c-accent);
  }
  
  /* Mobile Share Sheet - More Compact */
  .mobile-share-sheet {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background: var(--c-black-20);
    backdrop-filter: blur(4px);
    z-index: 800;
  }
  
  .mobile-share-sheet.active {
    display: block;
  }
  
  .mobile-share-content {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    background: var(--c-surface);
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
    padding: var(--space-md);
    transform: translateY(100%);
    max-block-size: 80vh;
    overflow-y: auto;
    transition: transform var(--duration-base) var(--ease-out);
  }
  
  .mobile-share-sheet.active .mobile-share-content {
    transform: translateY(0);
  }
  
  .mobile-share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-md);
  }
  
  .mobile-share-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--c-text);
  }
  
  .mobile-share-close {
    inline-size: 28px;
    block-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-bg-2);
    color: var(--c-text-2);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
  }
  
  .mobile-share-close:hover {
    background: var(--c-bg-3);
    transform: rotate(90deg);
  }
  
  /* Compact Mobile Share Grid */
  .mobile-share-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(60px, 25%), 1fr));
    gap: var(--space-xs);
    margin-block-end: var(--space-md);
  }
  
  .mobile-share-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    cursor: pointer;
  }
  
  .mobile-share-icon {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg-2);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
  }
  
  .mobile-share-icon:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
  }
  
  .mobile-share-icon:active {
    transform: scale(0.95);
  }
  
  /* Brand-specific hover colors for mobile */
  .mobile-share-item:hover .mobile-share-icon.chatgpt {
    background: transparent;
    background: color-mix(in srgb, #10A37F 10%, transparent);
    border-color: #10A37F;
    color: #10A37F;
  }
  
  .mobile-share-item:hover .mobile-share-icon.perplexity {
    background: transparent;
    background: color-mix(in srgb, #20B2AA 10%, transparent);
    border-color: #20B2AA;
    color: #20B2AA;
  }
  
  .mobile-share-item:hover .mobile-share-icon.googleai {
    background: transparent;
    background: color-mix(in srgb, #4285F4 10%, transparent);
    border-color: #4285F4;
    color: #4285F4;
  }
  
  .mobile-share-item:hover .mobile-share-icon.grok {
    background: var(--c-bg-3);
    border-color: var(--c-text);
    color: var(--c-text);
  }
  
  .mobile-share-item:hover .mobile-share-icon.claude {
    background: transparent;
    background: color-mix(in srgb, #D97706 10%, transparent);
    border-color: #D97706;
    color: #D97706;
  }
  
  .mobile-share-item:hover .mobile-share-icon.googlenews {
    background: transparent;
    background: color-mix(in srgb, #4285F4 10%, transparent);
    border-color: #4285F4;
  }
  
  .mobile-share-item:hover .mobile-share-icon.facebook {
    background: transparent;
    background: color-mix(in srgb, #1877F2 10%, transparent);
    border-color: #1877F2;
    color: #1877F2;
  }
  
  .mobile-share-item:hover .mobile-share-icon.x {
    background: transparent;
    background: color-mix(in srgb, #1DA1F2 10%, transparent);
    border-color: #1DA1F2;
    color: #1DA1F2;
  }
  
  .mobile-share-item:hover .mobile-share-icon.linkedin {
    background: transparent;
    background: color-mix(in srgb, #0077B5 10%, transparent);
    border-color: #0077B5;
    color: #0077B5;
  }
  
  .mobile-share-item:hover .mobile-share-icon.reddit {
    background: transparent;
    background: color-mix(in srgb, #FF4500 10%, transparent);
    border-color: #FF4500;
    color: #FF4500;
  }
  
  .mobile-share-item:hover .mobile-share-icon.whatsapp {
    background: transparent;
    background: color-mix(in srgb, #25D366 10%, transparent);
    border-color: #25D366;
    color: #25D366;
  }
  
  .mobile-share-item:hover .mobile-share-icon.telegram {
    background: transparent;
    background: color-mix(in srgb, #26A5E4 10%, transparent);
    border-color: #26A5E4;
    color: #26A5E4;
  }
  
  .mobile-share-item:hover .mobile-share-icon.pinterest {
    background: transparent;
    background: color-mix(in srgb, #E60023 10%, transparent);
    border-color: #E60023;
    color: #E60023;
  }
  
  .mobile-share-icon .icon {
    inline-size: 18px;
    block-size: 18px;
  }
  
  /* Special case for Google News multi-color icon */
  .mobile-share-icon.googlenews .icon {
    fill: none;
  }
  
  .mobile-share-label {
    font-size: 0.75rem;
    color: var(--c-text-3);
    text-align: center;
    line-height: 1.2;
  }
  
  .mobile-copy-section {
    padding: var(--space-sm);
    background: var(--c-bg-2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }
  
  .mobile-copy-url {
    flex: 1;
    font-size: var(--text-xs);
    color: var(--c-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .mobile-copy-btn {
    padding: var(--space-2xs) var(--space-sm);
    background: var(--c-accent);
    color: white;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);  /* Performance: Consider using transform instead of layout properties */
  }
  
  .mobile-copy-btn:hover {
    background: var(--c-accent-hover);
  }
  
  .mobile-copy-btn:active {
    transform: scale(0.95);
  }
}

/* Print Media */
@media print {
  .header,.footer,.related-posts,.faq-section,.tldr-minimal,.source-banner,button{display:none}
  .main{padding:0}
  body{color:#000;font-size:12pt;line-height:1.5}
  h1,h2,h3{page-break-after:avoid}
  .article-content{page-break-inside:avoid}
  
  /* FAQ Print Styles - from visualization */
  .faq-controls{display:none}
  .faq-item details{open:true}
  .faq-chevron{display:none}
  .faq-answer{max-block-size:none;overflow:visible}
}

/* Preference Media Queries */
@media (prefers-reduced-motion: reduce) {
	.faq-item summary,
	.faq-chevron,
	.faq-indicator::after {
		transition-duration: 0.01ms !important;
	}
}

@media (prefers-contrast: high) {
	/* Show outline on keyboard focus for high contrast users */
	.faq-item:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	.faq-indicator::before {
		border: 1px solid var(--c-text-3);
	}
}