* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #1f2937; background: #fafafa; line-height: 1.6;
}
a { color: #0d6efd; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 16px; }
.small { font-size: 0.95rem; color: #6b7280; }

.site-header { background: #111827; color: #fff; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
.brand { color: #fff; font-weight: 700; letter-spacing: .2px; }
.logo { height: 36px; width: auto; }

.lang-nav a {
  color: #e5e7eb; padding: 8px 10px; border-radius: 6px; margin-left: 6px; font-weight: 600;
  border: 1px solid transparent;
}
.lang-nav a[aria-current="page"] { background: #374151; border-color: #4b5563; }

.site-footer { border-top: 1px solid #e5e7eb; padding: 24px 0; background: #fff; }

.intro { display: grid; grid-template-columns: 108px 1fr; gap: 16px; padding: 32px 0; }
.avatar { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; border: 3px solid #e5e7eb; background: #fff; }
.quick-contact { list-style: none; padding: 0; margin: 14px 0 0; }
.quick-contact li { margin: 4px 0; }

.cv { padding: 28px 0 40px; }
.cv-head { display: grid; grid-template-columns: 128px 1fr; gap: 18px; align-items: center; margin-bottom: 8px; }
.subtitle { margin: 4px 0 10px; color: #374151; font-weight: 600; }
.contact { list-style: none; padding: 0; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; }

h1 { font-size: 1.9rem; margin: 0 0 6px; }
h2 { font-size: 1.35rem; margin: 22px 0 10px; }
h3 { font-size: 1.05rem; margin: 10px 0 6px; }

ul { padding-left: 18px; }
ul.inline { list-style: none; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.grid-2, .grid-3 { list-style: none; padding: 0; display: grid; gap: 8px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 680px) {
  .cv-head, .intro { grid-template-columns: 1fr; text-align: center; }
  .avatar { margin: 0 auto; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}