/**
 * SiteRecord Articles Stylesheet
 * 
 * DESIGN INTENT:
 * - Editorial, not marketing blog
 * - Long-form readability with clear hierarchy
 * - Minimal chrome, no noisy sidebars
 * - Articles feel like position papers, not SEO posts
 * 
 * TONE:
 * - Calm, precise, confident
 * - Slightly opinionated
 * - No "thought leadership" clichés
 * 
 * Aligned with marketing.css design system.
 */

@import url('./fonts.css');

/* ============================================================================
   DESIGN TOKENS (inherited from marketing system)
   ============================================================================ */

:root {
    /* Monochrome palette */
    --a-ink: #0a0a0a;
    --a-ink-soft: #1a1a1a;
    --a-text: #2a2a2a;
    --a-text-secondary: #5a5a5a;
    --a-text-muted: #8a8a8a;
    --a-rule: #d0d0d0;
    --a-rule-light: #e8e8e8;
    --a-surface: #fafafa;
    --a-paper: #ffffff;
    
    /* Typography */
    --a-font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --a-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Article-specific sizes - optimized for reading */
    --a-size-title: 2rem;
    --a-size-h2: 1.375rem;
    --a-size-h3: 1.125rem;
    --a-size-body: 1.0625rem;  /* 17px - slightly larger for reading comfort */
    --a-size-small: 0.875rem;
    --a-size-caption: 0.75rem;
    
    /* Reading rhythm */
    --a-line-height: 1.7;
    --a-paragraph-spacing: 1.5em;
    
    /* Layout */
    --a-content-width: 640px;
    --a-space-sm: 1rem;
    --a-space-md: 1.5rem;
    --a-space-lg: 2.5rem;
    --a-space-xl: 4rem;
}

/* ============================================================================
   BASE
   ============================================================================ */

.articles-page,
.article-page {
    margin: 0;
    padding: 0;
    background: var(--a-paper);
    color: var(--a-text);
    font-family: var(--a-font-body);
    font-size: var(--a-size-body);
    line-height: var(--a-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   HEADER - Minimal, consistent with marketing
   ============================================================================ */

.a-header {
    padding: var(--a-space-md) var(--a-space-lg);
    border-bottom: 1px solid var(--a-rule-light);
}

.a-header-inner {
    max-width: var(--a-content-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.a-wordmark {
    font-family: var(--a-font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--a-ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.a-nav-link {
    font-size: var(--a-size-small);
    color: var(--a-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

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

/* ============================================================================
   ARTICLES INDEX
   ============================================================================ */

.a-index {
    max-width: var(--a-content-width);
    margin: 0 auto;
    padding: var(--a-space-xl) var(--a-space-lg);
}

.a-index-title {
    font-family: var(--a-font-display);
    font-size: var(--a-size-title);
    font-weight: 600;
    color: var(--a-ink);
    margin: 0 0 var(--a-space-sm) 0;
    letter-spacing: -0.01em;
}

.a-index-description {
    font-size: var(--a-size-body);
    line-height: var(--a-line-height);
    color: var(--a-text-secondary);
    margin: 0 0 var(--a-space-xl) 0;
    max-width: 540px;
}

/* Category sections */
.a-category {
    margin-bottom: var(--a-space-lg);
}

.a-category-header {
    font-size: var(--a-size-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--a-text-muted);
    margin: 0 0 var(--a-space-sm) 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--a-rule-light);
}

/* Article list (legacy) */
.a-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Article card list */
.a-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--a-space-md);
}

.a-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--a-paper);
    border: 1px solid var(--a-rule-light);
    border-radius: 6px;
    padding: var(--a-space-md) var(--a-space-md) var(--a-space-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.a-card:hover {
    border-color: var(--a-rule);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.a-card-title {
    font-family: var(--a-font-display);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--a-ink);
    margin: 0 0 0.5rem 0;
    transition: color 0.15s ease;
}

.a-card:hover .a-card-title {
    color: var(--a-ink-soft);
}

.a-card-summary {
    font-size: var(--a-size-small);
    line-height: 1.6;
    color: var(--a-text-secondary);
    margin: 0 0 0.75rem 0;
}

.a-card-meta {
    display: flex;
    align-items: center;
    gap: var(--a-space-sm);
    font-size: var(--a-size-caption);
    color: var(--a-text-muted);
    padding-top: 0.625rem;
    border-top: 1px solid var(--a-rule-light);
}

.a-card-date {
    font-weight: 500;
}

.a-card-reading-time {
    position: relative;
    padding-left: var(--a-space-sm);
}

.a-card-reading-time::before {
    content: '·';
    position: absolute;
    left: 0.125rem;
    color: var(--a-rule);
}

.a-card-action {
    margin-left: auto;
    font-weight: 500;
    color: var(--a-text-secondary);
    transition: color 0.15s ease;
}

.a-card:hover .a-card-action {
    color: var(--a-ink);
}

/* ============================================================================
   ARTICLE PAGE
   ============================================================================ */

.a-article {
    max-width: var(--a-content-width);
    margin: 0 auto;
    padding: var(--a-space-xl) var(--a-space-lg) var(--a-space-xl);
}

/* Article header */
.a-article-header {
    margin-bottom: var(--a-space-xl);
    padding-bottom: var(--a-space-lg);
    border-bottom: 1px solid var(--a-rule-light);
}

.a-article-category {
    font-size: var(--a-size-caption);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--a-text-muted);
    margin: 0 0 var(--a-space-sm) 0;
}

.a-article-title {
    font-family: var(--a-font-display);
    font-size: var(--a-size-title);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--a-ink);
    margin: 0 0 var(--a-space-sm) 0;
}

.a-article-meta {
    font-size: var(--a-size-small);
    color: var(--a-text-muted);
    margin: 0;
}

/* Retirement notice */
.a-retirement-notice {
    font-size: var(--a-size-small);
    line-height: 1.6;
    color: var(--a-text-secondary);
    background: var(--a-surface);
    border-left: 3px solid var(--a-rule);
    padding: var(--a-space-sm) var(--a-space-md);
    margin-bottom: var(--a-space-lg);
}

/* ============================================================================
   ARTICLE BODY - Long-form typography
   ============================================================================ */

.a-body {
    font-family: var(--a-font-body);
    font-size: var(--a-size-body);
    line-height: var(--a-line-height);
    color: var(--a-text);
}

.a-body p {
    margin: 0 0 var(--a-paragraph-spacing) 0;
}

.a-body h2 {
    font-family: var(--a-font-display);
    font-size: var(--a-size-h2);
    font-weight: 600;
    line-height: 1.3;
    color: var(--a-ink);
    margin: 2.5em 0 0.75em 0;
    letter-spacing: -0.01em;
}

.a-body h2:first-child {
    margin-top: 0;
}

.a-body h3 {
    font-family: var(--a-font-display);
    font-size: var(--a-size-h3);
    font-weight: 600;
    line-height: 1.35;
    color: var(--a-ink-soft);
    margin: 2em 0 0.5em 0;
}

.a-body strong {
    font-weight: 600;
    color: var(--a-ink-soft);
}

.a-body em {
    font-style: italic;
}

.a-body a {
    color: var(--a-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.a-body a:hover {
    color: var(--a-text-secondary);
}

/* Lists */
.a-body ul,
.a-body ol {
    margin: 0 0 var(--a-paragraph-spacing) 0;
    padding-left: 1.5em;
}

.a-body li {
    margin-bottom: 0.5em;
}

.a-body li:last-child {
    margin-bottom: 0;
}

/* Blockquotes */
.a-body blockquote {
    margin: var(--a-space-lg) 0;
    padding: 0 0 0 var(--a-space-md);
    border-left: 3px solid var(--a-rule);
    font-style: italic;
    color: var(--a-text-secondary);
}

.a-body blockquote p:last-child {
    margin-bottom: 0;
}

/* Code */
.a-body code {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 0.9em;
    background: var(--a-surface);
    padding: 0.15em 0.4em;
    border-radius: 3px;
}

.a-body pre {
    background: var(--a-surface);
    border: 1px solid var(--a-rule-light);
    padding: var(--a-space-md);
    overflow-x: auto;
    margin: var(--a-space-lg) 0;
}

.a-body pre code {
    background: none;
    padding: 0;
}

/* Horizontal rules */
.a-body hr {
    border: none;
    border-top: 1px solid var(--a-rule-light);
    margin: var(--a-space-xl) 0;
}

/* ============================================================================
   ARTICLE FOOTER
   ============================================================================ */

.a-article-footer {
    margin-top: var(--a-space-xl);
    padding-top: var(--a-space-md);
    border-top: 1px solid var(--a-rule-light);
}

.a-return-link {
    font-size: var(--a-size-small);
    color: var(--a-text-secondary);
    text-decoration: none;
}

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

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 600px) {
    :root {
        --a-size-title: 1.625rem;
        --a-size-h2: 1.25rem;
        --a-size-body: 1rem;
    }
    
    .a-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--a-space-sm);
    }
    
    .a-index,
    .a-article {
        padding-left: var(--a-space-sm);
        padding-right: var(--a-space-sm);
    }
    
    .a-card {
        padding: var(--a-space-sm);
    }
    
    .a-card-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .a-card-action {
        margin-left: 0;
        flex-basis: 100%;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .a-header,
    .a-article-footer {
        display: none;
    }
    
    .a-article {
        max-width: 100%;
        padding: 0;
    }
    
    .a-article-header {
        border-bottom: 2px solid #000;
    }
    
    .a-body a {
        text-decoration: none;
    }
    
    .a-body a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}