:root {
  --text: #161C22;
  --muted: #6B7785;
  --rule: #DBE5EE;
  --link: #645AC6;
  --bg: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root { --text: #E6EAEE; --muted: #97A5B3; --rule: #2A333C; --link: #A79FEA; --bg: #12161A; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.6 Georgia, "Times New Roman", serif;
}
main { max-width: 680px; margin: 0 auto; padding: 56px 16px 96px; }
header { border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 32px; }
h1 { font-weight: normal; font-size: 2rem; margin: 0; }
.intro { margin-bottom: 14px; }
.bio { display: flex; align-items: flex-start; gap: 28px; }
.bio p:first-child { margin-top: 0; }
.photo { width: 192px; height: 240px; border-radius: 3px; object-fit: cover; object-position: 50% 30%; flex: none; }
@media (max-width: 600px) { .bio { flex-direction: column; } }
.tagline { color: var(--muted); font-size: .95rem; margin: 4px 0 0; }
nav a { margin-right: 20px; font-variant: small-caps; letter-spacing: .04em; }
h2 { font-weight: normal; font-size: 1.3rem; border-bottom: 1px solid var(--rule); padding-bottom: 6px; margin-top: 48px; }
h3 { font-size: 1.05rem; margin: 0; }
.meta { color: var(--muted); font-size: .9rem; margin: 2px 0 8px; }
.links a { margin-right: 16px; }
a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--link); }

/* pinned projects: small thumbnails, title below (Tolga Dur layout) */
main { max-width: 860px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card { text-align: center; }
.card-img { display: block; border: 0; }
.card-img img { display: block; width: 100%; height: 130px; object-fit: contain; background: #FFFFFF; }
.card h3 { font-size: .95rem; font-weight: normal; margin: 10px 0 0; }
.card-empty { min-height: 130px; border: 1px dashed var(--rule); border-radius: 4px; }
@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }