/* ========================================
   Personal site — clean, warm, personal
   ======================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #faf8f5;
  --text: #2d2a26;
  --muted: #78716c;
  --accent: #c75b39;
  --accent-dim: #e87a55;
  --card-bg: #fff;
  --border: #e7e4df;
  --code-bg: #f0ede8;
}

html { font-size: 18px; scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---- Typography ---- */

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

h1 { font-size: 2.2rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.5rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
h4 { font-size: 1rem; color: var(--muted); margin: 1rem 0 0.4rem; }

p { margin: 0.75rem 0; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover { color: var(--accent-dim); }

img { max-width: 100%; border-radius: 6px; }

code {
  font-family: "SF Mono", "Fira Code", "Fira Mono", monospace;
  font-size: 0.85rem;
  background: var(--code-bg);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

pre {
  background: var(--code-bg);
  padding: 1rem 1.2rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1rem 0;
  font-size: 0.85rem;
  line-height: 1.5;
}
pre code { background: none; padding: 0; }

blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.3rem 1.2rem;
  margin: 1.2rem 0;
  color: var(--muted);
  font-style: italic;
  background: var(--card-bg);
  border-radius: 0 6px 6px 0;
}

ul, ol { padding-left: 1.5rem; margin: 0.75rem 0; }
li { margin: 0.3rem 0; }

/* ---- Layout ---- */

.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1.2rem;
}

/* ---- Navigation ---- */

.site-header {
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 3rem;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-name a {
  font-family: Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}
.site-name a:hover { color: var(--accent); }

nav a {
  margin-left: 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
}
nav a:hover { color: var(--accent); }
nav a.active { color: var(--accent); }

/* ---- Home page ---- */

.hero {
  padding: 2rem 0 3rem;
}

.hero h1 {
  font-size: 2.8rem;
  margin-bottom: 0.3rem;
  letter-spacing: -0.5px;
}
.hero .tagline {
  font-size: 1.2rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.hero .bio {
  font-size: 1.05rem;
  max-width: 560px;
  color: var(--text);
}

.contact-line {
  margin-top: 0.3rem;
  font-size: 0.95rem;
  color: var(--muted);
}

.projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0 3rem;
}

@media (max-width: 500px) {
  .projects { grid-template-columns: 1fr; }
}

.project-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.2rem 1.3rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.project-card:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.project-card h3 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}
.project-card h3 a { color: var(--text); }
.project-card h3 a:hover { color: var(--accent); }
.project-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ---- Section headings ---- */

.section-heading {
  font-size: 1.4rem;
  margin: 3rem 0 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* ---- Blog listing ---- */

.post-list { list-style: none; padding: 0; }

.post-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.post-item:last-child { border-bottom: none; }

.post-item h2 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}
.post-item h2 a { color: var(--text); }
.post-item h2 a:hover { color: var(--accent); }

.post-meta {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.post-item p {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0.2rem 0 0;
}

/* ---- Blog post page ---- */

.post .date {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.post .entry,
.page .entry {
  font-size: 1.05rem;
  line-height: 1.8;
}

.post .entry h1,
.page .entry h1 { font-size: 1.8rem; margin: 2rem 0 0.75rem; }

.post .entry h2,
.page .entry h2 {
  font-size: 1.35rem;
  margin: 2rem 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}

.post .entry h3,
.page .entry h3 {
  font-size: 1.15rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--text);
}

.post .entry h4,
.page .entry h4 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin: 1.5rem 0 0.3rem;
}

.post .entry p,
.page .entry p {
  margin: 1rem 0;
}

.post .entry ul,
.post .entry ol,
.page .entry ul,
.page .entry ol {
  padding-left: 1.5rem;
  margin: 0.75rem 0 1rem;
}

.post .entry li,
.page .entry li {
  margin: 0.5rem 0;
  padding-left: 0.25rem;
}

.post .entry li::marker,
.page .entry li::marker {
  color: var(--accent);
}

.post .entry img,
.page .entry img {
  display: block;
  margin: 1.5rem auto;
  border-radius: 8px;
  max-width: 100%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.post .entry code,
.page .entry code {
  font-family: "SF Mono", "Fira Code", "Fira Mono", monospace;
  font-size: 0.85em;
  background: var(--code-bg);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: #b44422;
}

.post .entry pre,
.page .entry pre {
  background: #2d2a26;
  color: #e8e3dd;
  padding: 1.2rem 1.4rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.2rem 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.post .entry pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.post .entry blockquote,
.page .entry blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.5rem 1.2rem;
  margin: 1.2rem 0;
  color: var(--muted);
  font-style: italic;
  background: var(--card-bg);
  border-radius: 0 6px 6px 0;
}

.post .entry a,
.page .entry a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--border);
}

.post .entry a:hover,
.page .entry a:hover {
  text-decoration-color: var(--accent);
}

.post .entry hr,
.page .entry hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* ---- Page template ---- */

.page .entry { margin-top: 0.5rem; }

/* ---- Footer ---- */

.site-footer {
  margin-top: 4rem;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--accent); }

/* ---- SVG icons ---- */

.svg-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.6;
  transition: opacity 0.15s;
}
a:hover .svg-icon { opacity: 1; }

/* Github icon */
.svg-icon.github {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
}

/* Twitter icon */
.svg-icon.twitter {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
}

/* LinkedIn icon */
.svg-icon.linkedin {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'%3E%3C/path%3E%3Crect x='2' y='9' width='4' height='12'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2'%3E%3C/circle%3E%3C/svg%3E") no-repeat center;
}

/* Email icon */
.svg-icon.email {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'%3E%3C/rect%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
}

/* ---- Highlights ---- */

.highlight {
  background: var(--code-bg);
  padding: 0.8rem 1rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1rem 0;
  font-size: 0.85rem;
}

::-moz-selection { background: #fde4d6; }
::selection { background: #fde4d6; }