:root { --bg:#f5f5f5; --fg:#3d3d3d; --muted:#6b7280; --accent:#1d4ed8; --card:#ffffff; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji; color: var(--fg); background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.container { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.site-header { position: sticky; top:0; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,0,0,0.05); }
.site-header nav { display: flex; align-items:center; justify-content: space-between; height: 64px; }

.site-header .container,
.site-footer .container { padding-left: 0; padding-right: 0; }
.brand { font-weight: 700; color: var(--fg); }
.nav { display:flex; gap:16px; list-style:none; padding:0; margin:0; }
.nav a { color: var(--fg); opacity:0.78; }
.nav a:hover { opacity:1; }
.hero { padding: 88px 0 40px; text-align:left; }
.hero h1 { font-size: clamp(32px, 5vw, 56px); margin: 0 0 12px; }
.tagline { font-size: 18px; color: var(--muted); max-width: 820px; }
.cta { margin-top: 24px; display:flex; gap:12px; flex-wrap:wrap; }
.btn { border:1px solid rgba(0,0,0,0.1); padding:10px 16px; border-radius:999px; color:var(--fg); }
.btn.primary { background: var(--accent); color: #ffffff; border-color: transparent; font-weight:600;}
section { padding: 40px 0; }
h2 { font-size: 28px; margin: 0 0 16px; }
.list { display:grid; gap:16px; padding:0; margin:0; list-style:none; }
.list li { padding:0; }
.site-footer { padding: 32px 0; border-top:1px solid rgba(0,0,0,0.05); color: var(--muted); }

/* Align lower sections with the hero block's left edge */
#writing,
#contact { padding-left: 0; padding-right: 0; }

#writing { margin-bottom: 32px; }

@media (max-width: 640px) {
  .hero { padding-left: 16px; padding-right: 16px; }
  #writing,
  #contact { padding-left: 16px; padding-right: 16px; }

  .site-header .container,
  .site-footer .container { padding-left: 16px; padding-right: 16px; }
}