/* Reset */
* { box-sizing:border-box; margin:0; padding:0; }

/* Base typography */
body {
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.5;
    color:#222;
    max-width:800px;
    margin:auto;
    padding:1rem;
    background:#fdfdfd;
}

/* Existing body styles … */

p {
    margin-bottom: 1.2rem;   /* adds space after each paragraph */
}


/* Hero */
.hero { text-align:center; margin-bottom:2rem; }
.avatar {
    float:right; width:120px; height:120px; border-radius:50%;
    object-fit:cover; margin-bottom:.5rem;
}
h1 { font-size:1.8rem; }
.tagline { display:block; font-size:1rem; color:#555; }

/* Sections */
section { margin-bottom:1.5rem; }
h2 { font-size:1.4rem; margin-bottom:.4rem; }

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

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

ul {
    list-style-position: inside;   /* bullet becomes part of the text flow */
}

/* 1️⃣ Banner container – fixed height, full width of the page */
.banner {
    width: 100%;               /* spans the text column */
    height: 250px;             /* pick the height you want */
    overflow: hidden;          /* hide anything that sticks out */
}

/* 2️⃣ Image inside the banner – fill container, crop if needed */
.banner-img {
    width: 100%;               /* stretch to container width */
    height: 100%;              /* stretch to container height */
    object-fit: cover;         /* keep aspect ratio, crop excess, scale image to fill container completely */
    display: block;
}

.profile {
    overflow:hidden;               /* clears the float */
    margin-top:1rem;
}
.portrait {
    float:right;                    /* pushes the image to the right */
    width:200px;                   /* adjust size */
    height:auto;
    margin-right:1rem;             /* space between image and text */
    border-radius:50%;             /* optional circular crop */
}

/* -----------------------------------------------------------------
   2️⃣ Horizontal quick‑link bar (directly under the banner)
   ----------------------------------------------------------------- */
.quick-bar {
    display: flex;                     /* line up items horizontally */
    justify-content: center;           /* centre the whole group */
    gap: 2rem;                         /* space between each link */
    background: #f5f5f5;               /* light gray box background */
    padding: 0.8rem 0;                 /* vertical padding inside the box */
    border-top: 1px solid #ddd;        /* subtle top border */
    border-bottom: 1px solid #ddd;     /* subtle bottom border */
    margin-top: -1px;                  /* removes double border with banner */
}

/* Link appearance */
.quick-bar a {
    color: #0066cc;
    text-decoration: none;
    font-weight: 500;
}
.quick-bar a:hover {
    text-decoration: underline;
}