:root { --max: 880px; --muted:#6b7280; --link:#0366d6; }
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.65; color:#111 }
a{ color:var(--link); text-decoration:none } a:hover{ text-decoration:underline }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 16px }

header.bar{ position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid #eee }
.bar-inner{ display:flex; align-items:center; justify-content:flex-start; gap:24px; padding:12px 0 }
.brand{ font-weight:700; color:#111; text-decoration:none; white-space:nowrap }
.nav{ display:flex; gap:10px; flex-wrap:wrap }
.nav .tab{ font-size:1.15rem; padding:10px 14px; border-radius:10px }
.nav .tab:hover{ background:#f4f6f8; text-decoration:none }

main{ padding:24px 0 64px }
h1{ font-size:clamp(1.6rem,4vw,2.2rem); margin:0 0 12px }
.muted{ color:var(--muted) }

.paper-title{ margin:0 0 4px; font-size:1.15rem; font-weight:600; }

.hero{ display:flex; gap:24px; align-items:center }
.hero img{
  width: 220px;         /* adjust to taste */
  height: 300px;        /* makes it a rectangle */
  object-fit: cover;    /* crops without distortion */
  border-radius: 10px;  /* optional: soften corners; set to 0 for sharp */
  border: 1px solid #ddd;
}

.btn{ display:inline-block; border:1px solid #ddd; border-radius:999px; padding:8px 14px; background:#fafafa; color:#111 }
.btn:hover{ background:#f2f2f2 }
.cv-frame{ width:100%; height:820px; border:1px solid #eee; border-radius:12px }