:root {
  /* Colors */
  --color-primary: hsl(325, 69%, 45%);
  --color-primary-dark: hsl(325, 69%, 35%);
  --color-primary-light: hsl(325, 69%, 55%);
  --color-accent: hsl(145, 69%, 50%);
  --color-bg: hsl(325, 15%, 97%);
  --color-bg-secondary: hsl(325, 10%, 100%);
  --color-text: hsl(325, 10%, 15%);
  --color-text-muted: hsl(325, 5%, 45%);

  /* Typography */
  --font-heading: 'Raleway', serif;
  --font-body: 'Source Serif 4', sans-serif;

  /* Spacing & Shape */
  --radius: 0px;
  --spacing: 1rem;
  --shadow: 0 4px 12px rgba(0,0,0,0.15);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); line-height: 1.7; font-size: 17px; }
a { color: var(--color-primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-primary-dark); }
img { max-width: 100%; height: auto; border-radius: var(--radius); }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-text); line-height: 1.3; margin-top: 2em; margin-bottom: 0.6em; }
h1 { font-size: 2.2rem; margin-top: 0; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
p { margin-bottom: 1.2em; }
ul, ol { margin-bottom: 1.2em; padding-left: 1.5em; }
li { margin-bottom: 0.4em; }
blockquote { border-left: 4px solid var(--color-primary-light); padding: 1em 1.5em; margin: 1.5em 0; background: var(--color-bg-secondary); border-radius: 0 var(--radius) var(--radius) 0; color: var(--color-text-muted); font-style: italic; }
table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
th, td { padding: 0.7em 1em; text-align: left; border-bottom: 1px solid var(--color-bg-secondary); }
th { font-family: var(--font-heading); background: var(--color-bg-secondary); }
code { background: var(--color-bg-secondary); padding: 0.2em 0.5em; border-radius: 4px; font-size: 0.9em; }
.site-header { background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-primary-light); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }
.site-logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }
.site-nav a { margin-left: 1.5rem; font-weight: 600; color: var(--color-text-muted); }
.site-nav a:hover { color: var(--color-primary); }
.container { max-width: 900px; margin: 0 auto; padding: 2rem; }

.container { max-width: 1200px; }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: calc(var(--spacing) * 2); }
.article-card { background: var(--color-bg-secondary); border-radius: var(--radius); padding: calc(var(--spacing) * 2); box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; }
.article-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.article-card h2 { font-size: 1.3rem; margin-top: 0; margin-bottom: 0.5em; }
.article-card h2 a { color: var(--color-text); }
.article-card h2 a:hover { color: var(--color-primary); }
.article-card .meta { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.8em; }
.article-card .excerpt { color: var(--color-text-muted); font-size: 0.95rem; }
.article-header { margin-bottom: 2rem; }
.article-header .meta { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 0.5rem; }
.article-body h2 { border-bottom: 2px solid var(--color-primary-light); padding-bottom: 0.3em; }
.tldr { background: var(--color-primary-light); color: var(--color-text); padding: 1.2em 1.5em; border-radius: var(--radius); margin-bottom: 2em; font-weight: 500; }
.faq-section { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--color-bg-secondary); }
.faq-item { margin-bottom: 1.5rem; }
.faq-item h3 { margin-top: 0; color: var(--color-primary); }
.site-footer { text-align: center; padding: 2rem; color: var(--color-text-muted); font-size: 0.85rem; border-top: 1px solid var(--color-bg-secondary); margin-top: 4rem; }