:root {
      --color-bg: #090807;
      --color-bg-elevated: #0F0E0C;
      --color-bg-card: #100E0B;
      --color-text: #FDFCFA;
      --color-text-muted: #C2B9AB;
      --color-text-faint: #8A8174;
      --color-accent: #B8976A;
      --color-accent-warm: #D4A95A;
      --color-accent-bright: #E8C383;
      --color-accent-dim: rgba(184, 151, 106, 0.10);
      --color-border: #1C1A16;
      --color-border-bright: #2A2620;
      --color-link: #CC3333;
      --color-link-hover: #E04444;
      --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
      --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-prose: 'Cormorant Garamond', Georgia, serif;
      --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

    body {
      font-family: var(--font-body);
      background-color: var(--color-bg);
      color: var(--color-text);
      line-height: 1.6;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    a:visited { color: inherit; }

    ::selection { background-color: var(--color-accent); color: var(--color-bg); }

    .container { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 2rem; }
    .container-wide { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

    /* Header */
    .site-header {
      padding: 2rem 0;
      border-bottom: 1px solid var(--color-border);
      position: sticky; top: 0; z-index: 100;
      background-color: rgba(9,8,7,0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
    .logo-mark { display: flex; align-items: center; gap: 0.875rem; text-decoration: none; color: var(--color-text); }
    .logo-sigil { width: 28px; height: 28px; opacity: 0.85; }
    .logo-text {
      font-family: var(--font-heading); font-size: 1rem; font-weight: 500;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text);
    }
    .header-nav { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
    .header-nav a {
      white-space: nowrap;
      font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--color-text-muted);
      text-decoration: none; transition: color var(--transition-base);
    }
    .header-nav a:hover, .header-nav a.active { color: var(--color-accent); }

    /* Footer */
    .site-footer { padding: 2.5rem 0; border-top: 1px solid var(--color-border); margin-top: 4rem; }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
    .footer-company {
      font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text);
    }
    .footer-right { display: flex; align-items: center; gap: 2rem; }

    .footer-social { display: flex; align-items: center; gap: 1rem; }
    .footer-social a { color: var(--color-text-faint); transition: color var(--transition-base); }
    .footer-social a:hover { color: var(--color-accent); }
    .footer-social a:visited { color: var(--color-text-faint); }
    .footer-email a { font-size: 0.8125rem; color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-base); }
    .footer-email a:hover { color: var(--color-accent); }
    .footer-legal { font-size: 0.75rem; color: var(--color-text-faint); }
    .footer-links { font-size: 0.75rem; }
    .footer-links a { color: var(--color-text-faint); text-decoration: none; transition: color var(--transition-base); }
    .footer-links a:hover { color: var(--color-accent); }

    @media (max-width: 768px) {
      .footer-inner { flex-direction: column; gap: 1rem; text-align: center; }
      .footer-right { flex-direction: column; gap: 0.5rem; }
      .header-nav { gap: 1rem; }
      .header-nav a { font-size: 0.75rem; }
    }
    @media (max-width: 480px) {
      .container, .container-wide { padding: 0 1.25rem; }
      .header-nav { display: none; }
    }

    /* Accessibility: focus-visible */
    :focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 3px;
    }
    .skip-link {
      position: absolute; top: -100%; left: 1rem;
      background: var(--color-accent); color: var(--color-bg);
      padding: 0.5rem 1rem; border-radius: 0 0 4px 4px;
      font-size: 0.875rem; font-weight: 600; z-index: 999;
      text-decoration: none;
    }
    .skip-link:focus { top: 0; }

    .articles-hero { padding: 6rem 0 3rem; text-align: center; position: relative; }
    .articles-hero::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 650px; height: 650px;
      background: radial-gradient(circle, var(--color-accent-dim) 0%, transparent 65%);
      pointer-events: none;
      opacity: 0.5;
      z-index: -1;
    }
    .articles-eyebrow {
      font-family: var(--font-body);
      font-size: 0.6875rem; font-weight: 500;
      letter-spacing: 0.35em; text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: 1.5rem;
    }
    .articles-title {
      font-family: var(--font-heading);
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      font-weight: 400; line-height: 1.15; letter-spacing: -0.01em;
      color: var(--color-text);
      margin-bottom: 1.5rem;
      font-style: normal;
    }
    .articles-subtitle {
      font-family: var(--font-body);
      font-size: 1.15rem;
      line-height: 1.7;
      color: var(--color-text-muted);
      max-width: 580px;
      margin: 0 auto;
      font-style: normal;
    }

    .articles-list {
      padding: 2rem 0 4rem;
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
    }
    .article-card {
      display: block;
      padding: 2rem;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      background-color: var(--color-bg-card);
      text-decoration: none;
      transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
      position: relative;
    }
    .article-card:hover {
      transform: translateY(-2px);
      border-color: var(--color-border-bright);
      box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(184,151,106,0.12);
    }
    .article-card .number {
      font-family: var(--font-heading);
      font-style: normal;
      font-size: 0.75rem;
      letter-spacing: 0.18em;
      color: var(--color-accent);
      margin-bottom: 0.875rem;
      text-transform: uppercase;
    }
    .article-card .title {
      font-family: var(--font-heading);
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 500;
      line-height: 1.25;
      color: var(--color-text);
      margin-bottom: 1rem;
      font-style: normal;
    }
    .article-card .desc {
      font-family: var(--font-body);
      font-size: 1.075rem;
      line-height: 1.65;
      color: var(--color-text-muted);
      margin-bottom: 1.25rem;
    }
    .article-card .meta {
      font-size: 0.75rem;
      color: var(--color-text-faint);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .article-card .meta .dot {
      display: inline-block;
      width: 3px; height: 3px;
      background: var(--color-accent);
      transform: rotate(45deg);
      margin: 0 0.6rem;
      vertical-align: middle;
      opacity: 0.6;
    }
    .article-card .read-more {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 1rem;
      font-size: 0.8125rem;
      font-family: var(--font-body);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-accent);
      transition: gap var(--transition-base);
    }
    .article-card:hover .read-more { gap: 0.85rem; color: var(--color-accent-bright); }