/**
 * CSS Custom Properties (CSS Variables) - Design System Tokens
 * 
 * CSS Custom Properties provide a way to define reusable values throughout a stylesheet.
 * They follow the CSS Custom Properties specification and enable consistent theming.
 * 
 * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
 * W3C Spec: https://www.w3.org/TR/css-variables-1/
 */
:root {
  /**
   * Color Palette - Semantic color tokens for consistent theming
   * 
   * Uses HSL-based color system for better maintainability and accessibility.
   * Primary blue follows WCAG 2.1 contrast guidelines for text on white backgrounds.
   * 
   * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
   * WCAG Guidelines: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
   */
  --primary-blue: #007acc;           /* Primary brand color - 4.5:1 contrast ratio */
  --primary-blue-dark: #005580;      /* Darker variant for hover states */
  --primary-blue-visited: #551a8b;   /* Standard visited link color per HTML spec */
  --text-dark: #333;                 /* High contrast text - 12.6:1 ratio */
  --text-medium: #555;               /* Medium contrast text - 7.4:1 ratio */
  --text-light: #666;                /* Light text for secondary content - 5.7:1 ratio */
  --text-lighter: #888;              /* Lightest text for metadata - 4.6:1 ratio */
  --bg-white: #fff;                  /* Pure white background */
  --bg-light: #f9f9f9;               /* Light gray background for cards */
  --bg-lighter: #f5f5f5;             /* Lighter gray for code blocks */
  --bg-gray: #f0f0f0;                /* Medium gray for form elements */
  --bg-section: #f8f9fa;             /* Section background color */
  --bg-code: #f5f5f5;                /* Code block background */
  --border-light: #eee;              /* Light border color */
  --border-medium: #e0e0e0;          /* Medium border color */
  --border-dark: #ddd;               /* Darker border for emphasis */
  --border-table: #e9ecef;           /* Table border color */
  --border-input: #c6cbd1;           /* Form input border color */
  
  /**
   * Spacing Scale - 8px base unit system for consistent vertical rhythm
   * 
   * Uses a modular scale based on 8px increments for consistent spacing.
   * This follows Material Design and iOS Human Interface Guidelines.
   * 
   * Reference: https://spec.fm/specifics/8-pt-grid
   * Material Design: https://material.io/design/layout/spacing-methods.html
   */
  --spacing-xs: 2px;    /* 0.25 × base unit - fine adjustments */
  --spacing-sm: 4px;    /* 0.5 × base unit - minimal spacing */
  --spacing-md: 8px;    /* 1 × base unit - standard spacing */
  --spacing-lg: 10px;   /* 1.25 × base unit - slightly larger */
  --spacing-xl: 12px;   /* 1.5 × base unit - medium spacing */
  --spacing-2xl: 15px;  /* ~2 × base unit - comfortable spacing */
  --spacing-3xl: 20px;  /* 2.5 × base unit - section spacing */
  --spacing-4xl: 25px;  /* ~3 × base unit - large spacing */
  --spacing-5xl: 30px;  /* ~4 × base unit - major section spacing */
  --spacing-6xl: 40px;  /* 5 × base unit - page-level spacing */
  
  /**
   * Border Radius Scale - Consistent corner rounding system
   * 
   * Progressive border radius scale for different UI elements.
   * Follows modern design principles with subtle rounded corners.
   * 
   * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
   */
  --radius-xs: 3px;     /* Minimal rounding for small elements */
  --radius-sm: 4px;     /* Small rounding for buttons and inputs */
  --radius-md: 6px;     /* Medium rounding for cards */
  --radius-lg: 8px;     /* Large rounding for major components */
  --radius-xl: 12px;    /* Extra large rounding for special elements */
  --radius-round: 50%;  /* Perfect circle for avatars and icons */
  
  /**
   * Box Shadow System - Layered elevation system
   * 
   * Three-tier shadow system for creating visual hierarchy and depth.
   * Uses subtle shadows to avoid overwhelming the interface.
   * 
   * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
   * Material Design Elevation: https://material.io/design/environment/elevation.html
   */
  --shadow-light: 0 2px 8px rgba(0,0,0,0.1);                                    /* Subtle elevation */
  --shadow-medium: 0 4px 8px rgba(0,0,0,0.2);                                   /* Moderate elevation */
  --shadow-heavy: 0 8px 32px 0 rgba(0,0,0,0.28), 0 1.5px 8px 0 rgba(0,0,0,0.18); /* High elevation */
  
  /**
   * Animation and Transition System
   * 
   * Consistent timing functions and durations for smooth interactions.
   * Uses CSS easing functions for natural motion.
   * 
   * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
   * Easing Functions: https://easings.net/
   */
  --transition-fast: all 0.3s ease;           /* General purpose transitions */
  --transition-filter: filter 0.3s ease;     /* Image filter transitions */
  --transition-opacity: opacity 0.3s ease;   /* Opacity changes */
  --transition-bg: background-color 0.3s ease; /* Background color changes */
  
  /**
   * Typography System - Font stacks and line height ratios
   * 
   * System font stack for optimal performance and native appearance.
   * Line height ratios based on typographic best practices.
   * 
   * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
   * System Fonts: https://systemfontstack.com/
   */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'Monaco', 'Consolas', monospace;  /* Monospace for code */
  --line-height: 1.6;        /* Optimal reading line height */
  --line-height-tight: 1.4;  /* Tighter line height for headings */
  --line-height-loose: 1.7;  /* Looser line height for large text */
}

/**
 * Utility Classes - Atomic CSS components for common patterns
 * 
 * Utility-first approach for consistent styling patterns.
 * Reduces CSS specificity conflicts and promotes reusability.
 * 
 * Reference: https://css-tricks.com/need-css-utility-library/
 * Atomic CSS: https://acss.io/
 */

/**
 * Link Utilities - Consistent link styling across the site
 * 
 * Provides semantic link styling with proper focus and hover states.
 * Follows web accessibility guidelines for link identification.
 * 
 * WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html
 */
.link-primary {
  color: var(--primary-blue);
  text-decoration: none;
}

.link-primary:hover {
  text-decoration: underline;
}

.link-primary:visited {
  color: var(--primary-blue-visited);
}

/**
 * Card Component - Reusable container with consistent styling
 * 
 * Implements card design pattern with subtle elevation and branded accent.
 * Uses flexbox for consistent internal spacing.
 * Includes hover animation for enhanced user interaction.
 * 
 * Reference: https://material.io/components/cards
 */
.card {
  margin-bottom: var(--spacing-5xl);
}

/**
 * Button Components - Interactive elements with consistent styling
 * 
 * Implements accessible button design with proper focus states.
 * Uses transform for micro-interactions and visual feedback.
 * 
 * Reference: https://www.w3.org/WAI/ARIA/apg/patterns/button/
 */
.btn-primary {
  display: inline-block;
  background: var(--primary-blue);
  color: var(--bg-white);
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition-fast);
}

.btn-primary:hover {
  background: var(--primary-blue-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.btn-small {
  padding: var(--spacing-sm) var(--spacing-xl);
  font-size: 0.9em;
}

/**
 * Typography Utilities - Semantic text styling classes
 * 
 * Provides consistent text styling for different content types.
 * Maintains proper contrast ratios for accessibility.
 */
.text-meta {
  color: var(--text-light);
  font-size: 0.9em;
}

.text-description {
  color: var(--text-medium);
  line-height: var(--line-height);
}

.section-header {
  color: var(--primary-blue);
  margin-top: 0;
  margin-bottom: var(--spacing-3xl);
}

.border-top {
  border-top: 1px solid var(--border-light);
  padding-top: var(--spacing-3xl);
}

/**
 * Hover Animation Utility - Consistent hover elevation effect
 * 
 * Provides consistent box-shadow animation for interactive elements.
 * Uses Material Design elevation principles for visual feedback.
 * 
 * Reference: https://material.io/design/environment/elevation.html
 */
.hover-lift {
  transition: box-shadow 0.2s ease;
}

.hover-lift:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/**
 * Card Layout Utility - Standard card appearance
 * 
 * Combines common card styling patterns into a reusable utility.
 * Includes background, padding, border radius, and brand accent.
 */
.card-layout {
  background: var(--bg-light);
  padding: var(--spacing-4xl);
  border-radius: var(--radius-lg);
  border-left: var(--spacing-sm) solid var(--primary-blue);
}

/**
 * Brand Accent Utility - Left border brand accent
 * 
 * Provides consistent brand accent styling for content sections.
 * Uses primary brand color for visual hierarchy.
 */
.brand-accent {
  border-left: var(--spacing-sm) solid var(--primary-blue);
}

/**
 * Base Layout Styles - Fundamental page structure and typography
 * 
 * Establishes the basic layout grid, typography scale, and responsive behavior.
 * Uses semantic HTML5 elements with proper accessibility considerations.
 * 
 * Reference: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
 */

/**
 * Footer Link Override - Specific styling for footer branding
 * 
 * Uses !important to override default link styles for footer branding.
 * High specificity required for third-party integration.
 */
.footer-strato-link,
.footer-strato-link:visited,
.footer-strato-link:hover,
.footer-strato-link:active {
    color: var(--bg-white) !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

/**
 * Document Body - Main container with centered layout
 * 
 * Implements centered layout with max-width constraint.
 * Uses system font stack for optimal performance.
 * 
 * Reference: https://every-layout.dev/layouts/center/
 */
body {
    font-family: var(--font-family);
    line-height: var(--line-height);
    color: var(--text-dark);
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-3xl);
    background-color: var(--bg-white);
}

/**
 * Site Header - Top navigation and branding area
 * 
 * Provides visual separation between header and main content.
 * Uses border-bottom for subtle visual hierarchy.
 */
header {
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--spacing-5xl);
    padding-bottom: var(--spacing-3xl);
}

/**
 * Main Heading - Primary page title styling
 * 
 * Uses brand color for visual hierarchy and recognition.
 * Removes default margins for precise control.
 */
h1 {
    color: var(--primary-blue);
    margin: 0;
}

/**
 * Site Description - Subtitle text styling
 * 
 * Provides secondary information with reduced visual weight.
 * Uses italic styling to differentiate from main content.
 */
.site-description {
    color: var(--text-light);
    font-style: italic;
    margin-top: 5px;
}

/**
 * Navigation Container - Main site navigation
 * 
 * Provides spacing separation from header content.
 * Contains flexbox navigation list.
 */
nav {
    margin-top: var(--spacing-3xl);
}

/**
 * Navigation List - Horizontal navigation menu
 * 
 * Uses flexbox for responsive horizontal layout.
 * Removes default list styling and provides consistent spacing.
 * 
 * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
 */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3xl);
}

/**
 * Navigation Links - Individual menu items
 * 
 * Consistent styling for all navigation links.
 * Uses brand color and medium font weight for emphasis.
 */
nav a {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
}

nav a:hover {
    text-decoration: underline;
}

/**
 * Main Content Area - Primary content container
 * 
 * Provides bottom spacing to separate from footer.
 * Contains all page content below navigation.
 */
main {
    margin-bottom: var(--spacing-6xl);
}

/**
 * Site Footer - Bottom page information
 * 
 * Visually separated from main content with top border.
 * Centered text with reduced visual weight.
 */
footer {
    border-top: 1px solid var(--border-dark);
    padding-top: var(--spacing-3xl);
    text-align: center;
    color: var(--text-light);
    font-size: 0.9em;
}

/**
 * Image Styling - Responsive images with consistent styling
 * 
 * Ensures images are responsive and don't overflow containers.
 * Adds subtle styling with border radius and shadow.
 * 
 * Reference: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
 */
img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-light);
}

/**
 * Content Metadata - Secondary information styling
 * 
 * Used for dates, authors, and other supplementary information.
 * Reduced visual weight with smaller font size and lighter color.
 */
.content-meta {
    color: var(--text-light);
    font-size: 0.9em;
    margin-bottom: var(--spacing-3xl);
}

/**
 * Back Link Container - Navigation helper
 * 
 * Provides consistent spacing for back navigation links.
 * Used on detail pages to return to index pages.
 */
.back-link {
    margin-bottom: var(--spacing-3xl);
}

.back-link a {
    color: var(--primary-blue);
    text-decoration: none;
}

.back-link a:hover {
    text-decoration: underline;
}

/**
 * Mobile Responsive Styles - Tablet and mobile adaptations
 * 
 * Adjusts layout and spacing for smaller screens.
 * Uses CSS media queries for responsive design.
 * 
 * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
 */
@media (max-width: 768px) {
    body {
        padding: var(--spacing-2xl);
    }
    nav ul {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
}

/**
 * Post Content Styles - Article and blog post formatting
 * 
 * Provides consistent typography and spacing for long-form content.
 * Optimized for readability with proper line height and spacing.
 * 
 * Reference: https://practicaltypography.com/
 */
.post-content h2 {
    margin-top: var(--spacing-5xl);
    margin-bottom: var(--spacing-2xl);
}

.post-content p {
    margin-bottom: var(--spacing-2xl);
}

.post-content ul,
.post-content ol {
    margin-bottom: var(--spacing-2xl);
    padding-left: var(--spacing-5xl);
}

.post-content li {
    margin-bottom: 5px;
}

/**
 * Blockquote Styling - Emphasized quoted content
 * 
 * Uses left border accent and italic styling for visual distinction.
 * Follows typographic conventions for quoted material.
 * 
 * Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
 */
.post-content blockquote {
    border-left: var(--spacing-sm) solid var(--primary-blue);
    padding-left: var(--spacing-3xl);
    margin: var(--spacing-3xl) 0;
    font-style: italic;
    color: var(--text-light);
}

/**
 * Code Styling - Inline and block code formatting
 * 
 * Distinguishes code from regular text with background color and monospace font.
 * Provides consistent styling for both inline and block code elements.
 * 
 * Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
 */
.post-content code {
    background-color: var(--bg-code);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
}

.post-content pre {
    background-color: var(--bg-code);
    padding: var(--spacing-2xl);
    border-radius: 5px;
    overflow-x: auto;
}

.post-content pre code {
    background: none;
    padding: 0;
}

/**
 * Post Tags - Content categorization
 * 
 * Visual separation from main content with top border.
 * Provides metadata about post categories or topics.
 */
.post-tags {
    margin-top: var(--spacing-5xl);
    padding-top: var(--spacing-3xl);
    border-top: 1px solid var(--border-light);
    color: var(--text-light);
}

.tag {
    background-color: var(--bg-gray);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--spacing-xl);
    font-size: 0.85em;
}

.post-description {
    margin-top: var(--spacing-2xl);
    padding: var(--spacing-2xl) 0;
    font-size: 1.1em;
    line-height: 1.5;
    color: var(--text-medium);
    font-style: italic;
    margin-bottom: var(--spacing-3xl);
}

/**
 * Table of Contents - Navigation aid for long content
 * 
 * Provides quick navigation within long articles or pages.
 * Uses distinctive styling to separate from main content.
 * 
 * Reference: https://www.w3.org/WAI/tutorials/page-structure/headings/
 */
.table-of-contents {
    background: var(--bg-section);
    border: 1px solid var(--border-table);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3xl);
    margin: var(--spacing-5xl) 0;
    max-width: 600px;
}

.table-of-contents h2 {
    margin: 0 0 var(--spacing-2xl) 0;
    color: var(--primary-blue);
    font-size: 1.3em;
}

.table-of-contents ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.table-of-contents li {
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-3xl);
    position: relative;
}

/**
 * Custom List Bullets - Arrow indicators for TOC
 * 
 * Uses CSS pseudo-elements to create custom bullet points.
 * Provides visual consistency with brand styling.
 * 
 * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/::before
 */
.table-of-contents li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--primary-blue);
    font-weight: bold;
}

.table-of-contents a {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 0.95em;
    line-height: var(--line-height-tight);
}

.table-of-contents a:hover {
    text-decoration: underline;
    color: var(--primary-blue-dark);
}

/**
 * People Grid Layout - Responsive card grid for person profiles
 * 
 * Uses CSS Grid for responsive layout that adapts to screen size.
 * Maintains consistent spacing and alignment across all cards.
 * 
 * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 */
.people-list {
    margin-top: var(--spacing-5xl);
    margin-bottom: var(--spacing-6xl);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-4xl);
    max-width: 1200px;
}

/**
 * Person Card - Individual profile card component
 * 
 * Flexible card layout using CSS Flexbox for consistent alignment.
 * Includes photo, information, and action elements.
 * Includes hover animation for enhanced user interaction.
 */
.person-card {
    background: var(--border-medium);
    padding: var(--spacing-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

.person-card .person-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2xl);
}

.person-card .person-header:not(:has(.person-photo)) {
    gap: var(--spacing-lg);
}

/**
 * Person Photo Container - Aspect ratio controlled image container
 * 
 * Uses CSS aspect-ratio and object-fit for consistent image display.
 * Implements grayscale filter with hover effect for visual interest.
 * 
 * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
 * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
 */
.person-photo {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    overflow: hidden !important;
    border-radius: var(--radius-lg) !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.person-photo img {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 122% !important;
    height: 122% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: var(--radius-lg) !important;
    filter: grayscale(100%) !important;
    transition: var(--transition-filter) !important;
    display: block !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -50%);
}

.person-photo img:hover {
    filter: grayscale(0%);
}

/**
 * Person Information - Text content within person cards
 * 
 * Centered text layout with hierarchical typography.
 * Uses semantic heading structure for accessibility.
 */
.person-info {
    text-align: center;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.person-info h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 1.2em;
}

.person-info h3 a {
    color: var(--primary-blue);
    text-decoration: none;
}

.person-info h3 a:hover {
    text-decoration: underline;
}

.person-role {
    font-weight: bold;
    color: var(--text-medium);
    margin-bottom: var(--spacing-sm);
}

.person-period {
    color: var(--text-light);
    font-size: 0.9em;
    margin-bottom: var(--spacing-lg);
}

.person-description,
.person-excerpt {
    color: var(--text-medium);
    line-height: 1.5;
    margin-bottom: var(--spacing-lg);
    font-size: 0.95em;
}

.person-dates {
    font-style: italic;
    color: var(--text-light);
}

/**
 * Social Links - Icon-based social media links
 * 
 * Circular icon buttons with hover effects.
 * Uses flexbox for consistent alignment and spacing.
 */
.person-social-links-index {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    display: block;
    text-align: center;
}

.person-social-links-index a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--border-table);
    border-radius: var(--radius-round);
    color: var(--text-light);
    text-decoration: none;
    transition: var(--transition-fast);
}

.person-social-links-index a:hover {
    background: var(--primary-blue);
    color: var(--bg-white);
    transform: translateY(-1px);
}

.person-social-links-index svg {
    width: 14px;
    height: 14px;
}

/**
 * Interview Link - Call-to-action button for interviews
 * 
 * Prominent button styling to encourage engagement.
 * Uses micro-interactions for enhanced user experience.
 */
.person-interview-link {
    margin-top: 18px;
    text-align: center;
}

.interview-link {
    display: inline-block;
    background: var(--primary-blue);
    color: var(--bg-white);
    padding: var(--spacing-sm) var(--spacing-xl);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    transition: var(--transition-fast);
}

.interview-link:hover {
    background: var(--primary-blue-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
}

/**
 * No Content State - Empty state messaging
 * 
 * Provides user feedback when no content is available.
 * Uses grid-column to span full width in grid layouts.
 */
.no-content {
    text-align: center;
    color: var(--text-light);
    font-style: italic;
    padding: var(--spacing-6xl);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    grid-column: 1 / -1;
}

/**
 * Responsive Grid Adjustments - Mobile layout adaptations
 * 
 * Adjusts grid and flex layouts for smaller screens.
 * Ensures content remains readable and accessible on mobile devices.
 */
@media (max-width: 768px) {
    .content-sections {
        grid-template-columns: 1fr;
        gap: var(--spacing-5xl);
    }
    
    .content-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .date, .role {
        white-space: normal;
    }
}

/**
 * Hero Section - Landing page header content
 * 
 * Large visual area for primary page content and imagery.
 * Uses generous spacing for visual impact.
 */
.hero-section {
    margin-bottom: var(--spacing-6xl);
}

.hero-image {
    width: 100%;
    max-width: 800px;
    margin-bottom: var(--spacing-3xl);
    border-radius: var(--radius-lg);
}

.hero-content {
    font-size: 1.1em;
    line-height: var(--line-height-loose);
}

/**
 * Content Sections - Main page content areas
 * 
 * Structured content areas with consistent styling.
 * Uses card-like appearance for visual organization.
 */
.content-sections {
    margin-bottom: 50px;
}

.content-sections section {
    background: var(--bg-light);
    padding: var(--spacing-4xl);
    border-radius: var(--radius-lg);
    border-left: var(--spacing-sm) solid var(--primary-blue);
    margin-bottom: var(--spacing-6xl);
}

/**
 * Content Tables - Structured data presentation
 * 
 * Accessible table styling with proper contrast and spacing.
 * Includes hover effects for better user interaction.
 * 
 * Reference: https://www.w3.org/WAI/tutorials/tables/
 */
.content-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-2xl);
}

.content-table th {
    background: var(--primary-blue);
    color: var(--bg-white);
    padding: var(--spacing-xl);
    text-align: left;
    font-weight: 600;
}

.content-table th:first-child {
    border-top-left-radius: var(--radius-sm);
}

.content-table th:last-child {
    border-top-right-radius: var(--radius-sm);
}

.content-table td {
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--border-medium);
}

.content-table tr:hover {
    background: #f0f8ff;
}

.content-table a {
    color: var(--text-dark);
    text-decoration: none;
}

.content-table a:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}

.content-table td a {
    color: var(--primary-blue);
    text-decoration: underline;
}

.content-table td a:visited {
    color: var(--primary-blue-visited);
}

.content-table td a:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}

.content-sections h2 {
    margin-top: 0;
    margin-bottom: var(--spacing-3xl);
}

.content-sections h2 a {
    color: var(--primary-blue);
    text-decoration: none;
}

.content-sections h2 a:hover {
    text-decoration: underline;
}

/**
 * Content Lists - Structured content navigation
 * 
 * Flexible list layout for content indexes and navigation.
 * Uses flexbox for responsive alignment and spacing.
 */
.content-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-2xl) 0;
}

.content-list li {
    margin-bottom: var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-2xl);
}

.content-list a {
    color: var(--text-dark);
    text-decoration: none;
    flex: 1;
}

.content-list a:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}

.date, .role {
    color: var(--text-light);
    font-size: 0.9em;
    white-space: nowrap;
    flex-shrink: 0;
}

.view-all {
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
}

.view-all:hover {
    text-decoration: underline;
}

/**
 * Backstory Section - Contextual information area
 * 
 * Distinctive styling for background information and context.
 * Uses different background color to separate from main content.
 */
.backstory {
    background: var(--bg-code);
    padding: var(--spacing-5xl);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-6xl);
}

.backstory h2 {
    color: var(--primary-blue);
    margin-top: 0;
}

.backstory ul {
    margin-bottom: var(--spacing-3xl);
}

.backstory li {
    margin-bottom: var(--spacing-md);
}

/**
 * Video Components - Video content display and interaction
 * 
 * Responsive video layout with thumbnail and metadata display.
 * Includes play button overlay and hover effects.
 */
.videos-list {
    margin-top: var(--spacing-5xl);
}

.video-card {
    background: var(--bg-light);
    padding: var(--spacing-4xl);
    margin-bottom: var(--spacing-5xl);
    border-radius: var(--radius-lg);
    border-left: var(--spacing-sm) solid var(--primary-blue);
    display: flex;
    gap: var(--spacing-4xl);
    transition: box-shadow 0.2s ease;
}

.video-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.video-thumbnail {
    flex-shrink: 0;
    width: 300px;
    position: relative;
}

.video-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    transition: var(--transition-opacity);
}

.video-thumbnail:hover img {
    opacity: 0.8;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: var(--bg-white);
    width: 60px;
    height: 60px;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--spacing-3xl);
    transition: var(--transition-bg);
}

.video-thumbnail:hover .play-button {
    background: rgba(0, 122, 204, 0.9);
}

.video-info {
    flex: 1;
    min-width: 0;
}

.video-info h3 {
    margin: 0 0 var(--spacing-lg) 0;
    font-size: 1.3em;
}

.video-info h3 a {
    color: var(--primary-blue);
    text-decoration: none;
}

.video-info h3 a:hover {
    text-decoration: underline;
}

.video-meta {
    color: var(--text-light);
    font-size: 0.9em;
    margin-bottom: var(--spacing-lg);
}

.episode-number {
    font-weight: bold;
    color: var(--primary-blue);
}

.release-date {
    font-style: italic;
}

.video-guests {
    color: var(--text-medium);
    margin-bottom: var(--spacing-2xl);
    font-size: 0.95em;
}

.video-description,
.video-excerpt {
    color: var(--text-medium);
    line-height: var(--line-height);
    margin-bottom: var(--spacing-2xl);
}

/**
 * Video Embed Components - Embedded video player styling
 * 
 * Responsive video embed with aspect ratio preservation.
 * Includes styling for video cards and Medium profile embeds.
 * Includes hover animation for enhanced user interaction.
 * 
 * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
 */
.video-embed-card {
  margin: 18px auto;
  background: #f3f3f3;
  border-radius: var(--spacing-xl);
  box-shadow: var(--shadow-heavy);
  border: 1.5px solid var(--border-medium);
  padding: var(--spacing-xl);
  width: 75%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.2s ease;
}

.video-embed-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.video-embed-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}

.video-embed-responsive iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--shadow-light);
  background: #000;
}

/**
 * Blog Embed Styling - External blog post integration
 * 
 * Styled cards for blog post and article embeds.
 * Uses consistent hover animation with other embed components.
 */
.blog-embed-card {
  transition: box-shadow 0.2s ease;
}

.blog-embed-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

/**
 * YouTube Embed Styling - YouTube video integration
 * 
 * Styled container for YouTube video embeds.
 * Uses consistent hover animation with other embed components.
 */
.video-embed-content {
  transition: box-shadow 0.2s ease;
}

.video-embed-content:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

/**
 * Twitter Embed Styling - Twitter/X tweet integration
 * 
 * Styled container for Twitter tweet embeds.
 * Uses consistent hover animation with other embed components.
 */
.twitter-tweet {
  transition: box-shadow 0.2s ease;
}

.twitter-tweet:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

/**
 * DEVCON0 Video Embed Styling - DEVCON0 self-introduction videos
 * 
 * Styled containers for DEVCON0 video embeds on person pages.
 * Uses card-like appearance with consistent hover animation like other embeds.
 */
.devcon0-section {
  background: #f3f3f3 !important;
  border: 1px solid var(--border-table) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--spacing-2xl) !important;
  margin: 18px 0 0 0 !important;
  margin-top: auto !important;
  max-width: 420px !important;
  transition: box-shadow 0.2s ease !important;
  box-shadow: var(--shadow-light) !important;
}

.devcon0-section:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

.devcon0-section h4 {
  margin: 0 0 var(--spacing-lg) 0 !important;
  color: var(--text-medium) !important;
  font-size: 0.95em !important;
}

/**
 * Medium Embed Styling - External content integration
 * 
 * Styled cards for Medium profile and content embeds.
 * Uses flexbox layout with hover effects.
 */
.medium-embed {
  margin: 18px 0;
}

.medium-embed a {
  display: flex;
  align-items: center;
  text-decoration: none;
  background: #f3f3f3;
  border: 1px solid var(--border-table);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-light);
  padding: var(--spacing-lg) var(--spacing-2xl);
  max-width: 420px;
  transition: box-shadow 0.2s ease;
}

.medium-embed a:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.medium-profile-photo {
  height: 80px;
  width: 80px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-right: 18px;
  background: var(--bg-white);
}

.medium-profile-info {
  color: #222;
}

.medium-profile-info .name {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: var(--spacing-sm);
}

.medium-profile-info .desc {
  font-size: 0.97em;
  color: var(--text-medium);
  margin-bottom: var(--spacing-sm);
}

.medium-profile-info .url {
  font-size: 0.93em;
  color: var(--text-lighter);
}

/**
 * Video Mobile Responsive - Mobile adaptations for video content
 * 
 * Stacks video thumbnail and info vertically on smaller screens.
 * Adjusts spacing and alignment for mobile viewing.
 */
@media (max-width: 768px) {
    .video-card {
        flex-direction: column;
    }
    .video-thumbnail {
        width: 100%;
        max-width: 400px;
        align-self: center;
    }
    .video-meta .release-date {
        margin-left: 0;
        display: block;
        margin-top: 5px;
    }
}

/**
 * Person Page Styles - Individual person profile pages
 * 
 * Detailed styling for person profile pages with photos, content, and links.
 * Includes responsive layout adjustments and social media integration.
 */
.person-profile .content-meta {
    margin-bottom: var(--spacing-4xl);
}

.person-role {
    font-weight: bold;
    color: var(--primary-blue);
    font-size: 1.1em;
}

.person-period {
    color: var(--text-light);
    font-style: italic;
    margin-top: 5px;
}

.person-interview-link {
    margin-top: 18px;
    text-align: left;
    margin-left: 0;
}

.person-card .person-interview-link {
    text-align: center;
}

.interview-link {
    display: inline-block;
    background: var(--primary-blue);
    color: var(--bg-white);
    padding: var(--spacing-md) var(--spacing-2xl);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 1em;
    font-weight: 500;
    transition: var(--transition-fast);
}

.interview-link:hover {
    background: var(--primary-blue-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.person-photo-header {
    max-width: 33.33%;
    margin: 0 0 var(--spacing-3xl) 0;
    text-align: left;
}

.person-photo-header img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-light);
    filter: grayscale(100%);
    transition: var(--transition-filter);
    display: block;
    margin: 0 auto;
}

.person-photo-header img:hover {
    filter: grayscale(0%);
}

.person-description {
    font-size: 1.1em;
    color: var(--text-medium);
    margin: var(--spacing-2xl) 0;
    font-style: italic;
}

.person-dates {
    font-style: italic;
    color: var(--text-light);
}

.person-social-links {
    margin: var(--spacing-2xl) 0;
    display: flex;
    gap: var(--spacing-xl);
    align-items: center;
}

.person-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-gray);
    border-radius: var(--radius-round);
    color: var(--text-light);
    text-decoration: none;
    transition: var(--transition-fast);
}

.person-social-links a:hover {
    background: var(--primary-blue);
    color: var(--bg-white);
    transform: translateY(-2px);
}

.person-social-links svg {
    width: 18px;
    height: 18px;
}

.person-photo {
    float: right;
    margin: 0 0 var(--spacing-3xl) var(--spacing-3xl);
    max-width: 300px;
}

.person-photo img {
    width: 100%;
    border-radius: var(--radius-lg);
}

.person-content {
    overflow: hidden;
}

.person-content h1,
.person-content h2,
.person-content h3,
.person-content h4,
.person-content h5,
.person-content h6 {
    color: var(--primary-blue);
    margin-top: var(--spacing-4xl);
    margin-bottom: var(--spacing-2xl);
}

.person-content p {
    margin-bottom: var(--spacing-2xl);
}

.person-content ul,
.person-content ol {
    margin-bottom: var(--spacing-2xl);
    padding-left: var(--spacing-5xl);
}

.person-links {
    margin-top: var(--spacing-5xl);
    padding-top: var(--spacing-3xl);
    border-top: 1px solid var(--border-light);
}

.person-links h3 {
    color: var(--primary-blue);
    margin-bottom: var(--spacing-lg);
}

.person-links ul {
    list-style: none;
    padding: 0;
}

.person-links li {
    margin-bottom: var(--spacing-md);
}

.person-links a {
    color: var(--primary-blue);
    text-decoration: none;
}

.person-links a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .person-photo {
        float: none;
        margin: 0 0 var(--spacing-3xl) 0;
        max-width: 100%;
    }
}

/**
 * Article Preview Components - Article listing and preview cards
 * 
 * Consistent styling for article previews and metadata display.
 * Uses card layout with proper typography hierarchy.
 * Includes hover animation for enhanced user interaction.
 */
.article-preview {
    background: var(--bg-light);
    padding: var(--spacing-4xl);
    margin-bottom: var(--spacing-5xl);
    border-radius: var(--radius-lg);
    border-left: var(--spacing-sm) solid var(--primary-blue);
    transition: box-shadow 0.2s ease;
}

.article-preview:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.article-preview h2 {
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
}

.article-preview h2 a {
    color: var(--primary-blue);
    text-decoration: none;
}

.article-preview h2 a:hover {
    text-decoration: underline;
}

.article-meta {
    color: var(--text-light);
    font-size: 0.9em;
    margin-bottom: var(--spacing-2xl);
}

.article-meta time {
    font-style: italic;
}

.article-description,
.article-excerpt {
    color: var(--text-medium);
    line-height: var(--line-height);
    margin-bottom: var(--spacing-2xl);
}

.no-content {
    text-align: center;
    color: var(--text-light);
    font-style: italic;
    padding: var(--spacing-6xl);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
}

/**
 * People Grid Components - Visual grid display of people photos
 * 
 * Responsive grid layout for displaying all people photos in a visual grid format.
 * Includes placeholder styling for people without photos and consistent hover effects.
 * Uses CSS Grid for responsive layout that adapts to screen size.
 * 
 * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 */
.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-2xl);
    padding: var(--spacing-3xl);
    max-width: 1200px;
    margin: 0 auto;
}

.grid-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-light);
    transition: var(--transition-fast);
    background: var(--bg-lighter);
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.grid-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
}

.grid-item .name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: var(--bg-white);
    padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    opacity: 0;
    transition: var(--transition-opacity);
}

.grid-item:hover .name-overlay {
    opacity: 1;
}

.people-grid-header {
    text-align: center;
    margin-bottom: var(--spacing-5xl);
}

.people-grid-header p {
    color: var(--text-light);
    font-size: 1em;
    max-width: 600px;
    margin: 0 auto;
}

.stats {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    color: var(--text-lighter);
    font-size: 0.9em;
}