/* ===========================
   BASE STYLES & FALLBACK
   =========================== */

/* Provide a fallback stack for all users first. 
   Mac users who *have* Avenir Next installed will pick it up;
   Windows users with Calibri installed will see that; 
   everyone else sees sans-serif. */
   body {
    margin: 50px auto;
    padding: 20px;
    max-width: 600px;
    font-family: "Avenir Next", "Calibri Light", Calibri, sans-serif;
    font-size: 18px;       /* fallback size */
    font-weight: 400;      /* fallback weight */
}

h1 {
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;      /* fallback bold */
}

h2 {
    font-weight: 600;      /* fallback demi-bold */
}

/* ===========================
   HACK FOR MAC (Safari/iOS)
   =========================== */
/* This uses a WebKit-only property check to detect Safari (and iOS Safari).
   Note that Chrome on Mac also uses WebKit, so it may pick up this section. */
@supports (-webkit-touch-callout: none) {
    body {
        font-family: "Avenir Next", sans-serif;
        font-size: 18px;   /* Body: 18px, regular */
        font-weight: 400;
    }
    h1 {
        font-weight: 700;  /* Bold for "Will Motley" */
    }
    h2 {
        font-weight: 600;  /* Demi-bold for "About" */
    }
}

/* ===========================
   HACK FOR WINDOWS (IE/Edge)
   =========================== */
/* This checks for Microsoft high contrast mode, a Windows/IE/Edge trick. 
   May or may not fire in newer Chromium-based Edge. */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    body {
        font-family: "Calibri Light", Calibri, sans-serif;
        font-size: 19.5px; /* Body: 19.5px, light */
        font-weight: 300; 
    }
    h1 {
        font-weight: 700;  /* Bold for "Will Motley" */
    }
    h2 {
        font-weight: 400;  /* Regular for "About" */
    }
}

/* ===========================
   LINKEDIN ICON (unchanged)
   =========================== */
.linkedin img {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    display: block;
    object-fit: contain;
}

.linkedin {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}