/* ——— Base ——— */
:root{
  --max: 1100px;
  --gutter: 20px;
  --bg: #ffffff;
  --ink: #121212;
  --muted: #666;
  --line: #e7e7e7;
  --accent: #0f62fe;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

/* ——— Hero header ——— */
.hero{
  position:relative;
  min-height: 220px;
  /* FIX: .webp (not .wepb). If your file is JPG/PNG, change the extension here. */
  background: url('header.jpg') center/cover no-repeat;
  border-bottom:1px solid var(--line);
}
.hero.small{ min-height: 160px; }
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25));
}
.hero-overlay{
  position:relative; z-index:1;
  padding: 40px 20px 60px;
  max-width: var(--max); margin: 0 auto;
  color:#fff;
}
.name{ margin:0; font-size: clamp(28px, 4vw, 44px); letter-spacing:.5px; }
.tagline{ margin:.25rem 0 0; opacity:.9; }

/* ——— Top-right nav ——— */
.nav{
  position:absolute; right:14px; top:12px; z-index:2;
  background: rgba(255,255,255,.9);
  border:1px solid var(--line); border-radius:999px;
  padding: 6px 10px;
  display:flex; gap:6px;
  backdrop-filter: blur(4px);
}
.nav-link{
  display:inline-block; padding:6px 10px; border-radius:999px;
  color:#111; text-decoration:none; font-weight:500;
}
.nav-link:hover{ background:#f5f5f5; }
.nav-link.active{ background:#111; color:#fff; }

/* ——— Layout ——— */
.container{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: var(--gutter);
  padding: 24px var(--gutter) 40px;
}
.container.onecol{ grid-template-columns: 1fr; }

/* ——— Sidebar ——— */
/* Make avatar + welcome card sit side-by-side inside the sidebar */
.sidebar{
  align-self:start;
  display: grid;
  grid-template-columns: 180px 1fr; /* photo | card */
  gap: 16px;
  align-items: start;
}
.avatar{
  width:100%;
  max-width:180px;          /* keep the photo a nice size */
  height:auto;
  border-radius:18px;
  display:block;
  border:1px solid var(--line);
  margin:0;                 /* align with card */
}
.card{
  margin-top:0;             /* align top with the photo */
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fafafa;
}

/* ——— Content ——— */
.content h2{ margin-top:0; }
.bullets{ padding-left: 1.1rem; }
.bullets li{ margin: .25rem 0; }
.paper,.note{
  border-top:1px solid var(--line); padding:16px 0;
}
.paper:first-child,.note:first-child{ border-top:none; }
.meta{ color:var(--muted); margin:.25rem 0 .5rem; }
.links a{ color:var(--accent); text-decoration:none; }
.links a:hover{ text-decoration:underline; }

/* ——— Footer ——— */
.footer{
  border-top:1px solid var(--line);
  padding:16px var(--gutter);
  text-align:center; color:var(--muted);
}

/* ——— Responsive ——— */
@media (max-width: 820px){
  .container{ grid-template-columns: 1fr; }
  .nav{ position: fixed; top:12px; right:12px; }
  .sidebar{
    grid-template-columns: 1fr;  /* stack photo above card on mobile */
  }
  .avatar{
    max-width:240px;
    margin: 0 auto;              /* center the photo on mobile */
  }
}


/* ——— Responsive ——— */
@media (max-width: 820px){
  .container{ grid-template-columns: 1fr; }
  .nav{ position: fixed; top:12px; right:12px; }
}