:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
header, footer { background: rgba(255,255,255,.92); }
header { border-bottom: 1px solid #e5e7eb; }
nav {
  width: min(1000px, calc(100% - 40px));
  margin: auto;
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  flex-wrap: wrap;
}
nav a { color: #111827; text-decoration: none; font-weight: 650; }
nav .brand { margin-right: auto; overflow-wrap: anywhere; }
main {
  width: min(760px, calc(100% - 40px));
  margin: auto;
  padding: 56px 0;
  text-align: center;
}
.card {
  padding: 54px 34px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15,23,42,.12);
}
h1 { margin: 0 0 24px; overflow-wrap: anywhere; font-size: clamp(30px, 6vw, 48px); line-height: 1.08; }
p { font-size: 18px; line-height: 1.65; }
a { color: inherit; }
footer { border-top: 1px solid #e5e7eb; text-align: center; }
.footer-inner { width: min(900px, calc(100% - 40px)); margin: auto; padding: 28px 0; }
.footer-inner p { margin: 6px 0; font-size: 14px; }
.projects-frame { width: 100%; height: 75vh; border: 0; background: white; border-radius: 12px; }
@media (max-width: 620px) { nav { justify-content: center; } nav .brand { width: 100%; margin: 0; text-align: center; } }