/* ---------- THEME ---------- */
    :root{
      --bg:#fff;
      --text:#333;
      --text-light:#555;
      --primary:#2c3e50;
      --accent:#2980b9;
      --radius:.75rem;
      --sp:1rem;
      --font:'Inter',sans-serif;
      --hover-shadow:0 8px 24px rgba(0,0,0,.08);
    }

    /* ---------- RESET ---------- */
    *,::before,::after{box-sizing:border-box;margin:0;padding:0}
    body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;scroll-behavior:smooth}

    a{color:var(--accent);text-decoration:none}
    a:hover,a:focus{text-decoration:underline}
    a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    .skip-link{
      position:absolute;
      left:-9999px;
      top:auto;
      width:1px;
      height:1px;
      overflow:hidden;
    }
    .skip-link:focus{
      left:1rem;
      top:1rem;
      width:auto;
      height:auto;
      padding:.5rem .75rem;
      background:#fff;
      color:var(--primary);
      border:2px solid var(--accent);
      border-radius:var(--radius);
      z-index:1000;
    }

    /* ---------- LAYOUT ---------- */
    .container{max-width:1000px;margin:auto;padding:0 var(--sp)}
    .section{padding:3.5rem 0;border-bottom:1px solid #e5e5e5}
    .section:last-of-type{border:none}

    /* ---------- NAV ---------- */
    nav{background:var(--bg);position:sticky;top:0;z-index:100;border-bottom:1px solid #eee}
    nav .container{display:flex;justify-content:space-between;align-items:center;height:3.5rem}
    .logo{font-weight:600;font-size:1.35rem;color:var(--primary)}
    .nav-links{display:flex;gap:var(--sp);list-style:none}
    .nav-links a{font-weight:500;font-size:1.05rem}

    /* ---------- BURGER ---------- */
    .burger{
      display:none; /* shown on small screens */
      flex-direction:column;
      justify-content:space-between;
      width:2rem;            /* wider */
      height:1.5rem;         /* taller */
      background:transparent;
      border:0;
      cursor:pointer;
      outline:0;
    }
    .burger span{
      display:block;
      width:100%;
      height:3px;            /* thicker bars */
      background:var(--primary);
      border-radius:2px;
      transition:transform .3s,opacity .3s;
    }

    /* Drawer animation when nav is open */
    nav.open .nav-links{transform:translateX(0)}
    nav.open + .nav-backdrop{opacity:1;pointer-events:auto}
    nav.open .burger span:nth-child(1){transform:translateY(.72em) rotate(45deg)}
    nav.open .burger span:nth-child(2){opacity:0}
    nav.open .burger span:nth-child(3){transform:translateY(-.72rem) rotate(-45deg)}

    /* ---------- HERO ---------- */
    #hero{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;text-align:center;padding:3rem 1rem 3rem}
    #hero h1{font-size:2.5rem}
    .hero-photo{width:200px;height:200px;border-radius:50%;border:4px solid #fff;object-fit:cover;margin-bottom:1rem}
    .social{display:flex;justify-content:center;gap:1.25rem;margin-top:1.5rem}
    .social a{font-size:2.25rem;color:#fff}
    .social a:hover{color:var(--bg)}

    /* ---------- TITLES ---------- */
    h2.section-title{font-size:1.75rem;font-weight:600;margin-bottom:1rem;position:relative;display:inline-block}
    h2.section-title::after{content:'';position:absolute;left:0;bottom:-4px;width:100%;height:3px;background:var(--accent);border-radius:var(--radius)}
    h3{font-size:1.125rem;margin:.5rem 0}

    /* space between the CV heading and the button */
    #cv address{
      margin-top:1.0rem;
    }

    /* ---------- Added "CV" on top of the icon ---------- */
    .download-cv{
      position:relative;
    }
    .download-cv .cv-badge{
      position:absolute;
      top: 13.5px;                           /* tweak these two numbers        */
      left:1.35px;                          /* to sit nicely in your icon     */
      font-size:.23em;                   /* tiny relative to icon size     */
      font-weight:700;                   /* bold so it stays readable      */
      color:var(--accent);               /* same blue as hero gradient     */
      pointer-events:none;               /* click goes through to the link */
    }

    /* adjust icon size */
    .download-cv i.fa-file-lines{
     font-size:0.95em;   /*  15% compared with the link's base size */
      line-height:1;      /* keeps it vertically centred */
    }

    /* ---------- TILE GRID ---------- */
    .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp);margin-top:.75rem}
    .tiles.one-col{grid-template-columns:1fr}
    .tile{
      background:var(--bg);
      padding:1.25rem;
      border-radius:var(--radius);
      border:1px solid #e5e5e5;
      box-shadow:0 2px 6px rgba(0,0,0,.05);
      transition:transform .25s ease,box-shadow .25s ease;
    }
    .tile:hover{
      transform:translateY(-4px);
      box-shadow:var(--hover-shadow);
    }
    .coauthors{display:block;font-style:italic;font-size:.9rem;color:var(--text-light);margin-top:.25rem}

    /* ---------- BUTTON ---------- */
    .btn{display:inline-block;background:var(--accent);color:#fff;padding:.65rem 1.25rem;border-radius:var(--radius);font-weight:500}
    .btn:hover{background:var(--primary)}

    /* ---------- FOOTER ---------- */
    footer{background:var(--primary);color:#fff;text-align:center;padding:1rem;font-size:.875rem}
    footer a{color:#fff}

    /* ---------- SMALL ---------- */
    @media(max-width:600px){
      #hero{padding:4rem 1rem 4.5rem}
      #hero h1{font-size:2.25rem}
      .hero-photo{width:160px;height:160px}
      
      /* nav adjustments */
      .burger{display:flex;margin-left:auto}
      nav .container{flex-wrap:nowrap;height:3.5rem}
      .nav-links{
        position:fixed;top:3.5rem;right:0;
        flex-direction:column;align-items:flex-start;
        background:var(--bg);

        /* --- auto-sizing drawer --- */
        width:max-content;             /* grow to the longest link            */
        max-width:calc(100% - 1rem);   /* never exceed viewport minus 1 rem    */

        padding:var(--sp) 1.25rem;gap:1rem;
        height:calc(100vh - 3.5rem);
        box-shadow:var(--hover-shadow);
        transform:translateX(100%);transition:transform .3s ease;
      }
    }

    #job-market-paper { scroll-margin-top: 60px }
    html { scroll-behavior: smooth }
    body.nav-open{overflow:hidden}
    .nav-backdrop{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.25);
      opacity:0;
      pointer-events:none;
      transition:opacity .3s ease;
      z-index:50;
    }