/* ---------- Reset & Base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
body {
    line-height: 1.6;
    color: #222;
    background: #f9fafb;
    padding: 1rem;
}

/* ---------- Links ---------- */
a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */
.container {
    max-width: 960px;
    margin: auto;
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ---------- Header ---------- */
header {
    text-align: center;
    margin-bottom: 2rem;
}

/* Head‑shot – circular, responsive, with a subtle shadow */
.profile-pic {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    margin: 0 auto .9rem;      /* centre it and give a little space below */
    display: block;
}

/* Header text */
header h1 { font-size: 2.2rem; font-weight: 700; color: #0a274d; margin-top: .4rem; }
header h2 { font-size: 1.2rem; font-weight: 400; color: #555; margin-top: .3rem; }

/* ---------- Sections ---------- */
.section { margin-bottom: 2rem; }
.section h3 {
    font-size: 1.4rem;
    color: #0a274d;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: .3rem;
    margin-bottom: 1rem;
}
.section p,
.section li { color: #333; }

/* Lists */
ul { list-style: disc inside; margin-left: 1rem; }

/* ---------- Grid for two‑column sections ---------- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

/* ---------- Badges (certs, skills, etc.) ---------- */
.badge {
    display: inline-block;
    background: #e2e8f0;
    color: #0a274d;
    border-radius: 4px;
    padding: .2rem .6rem;
    font-size: .85rem;
    margin: 0 .3rem .3rem 0;
}

/* ---------- Footer ---------- */
footer {
    text-align: center;
    font-size: .85rem;
    color: #777;
    margin-top: 2rem;
}

/* ---------- Print friendly ---------- */
@media print {
    body { background:#fff; }
    .container { box-shadow:none; border:none; }
}