styles.css

:root{
  --bg:#ffffff;
  --fg:#1d1d1f;
  --accent:#0066CC;        /* apple link color */
  --rule:#e3e3e3;
  --muted:#86868b;
  --gap:.85rem;              /* vertical spacing */
}

*{ box-sizing:border-box; }

body{
  max-width:720px;
  margin:2.5rem auto 0;
  padding:0 1.25rem;
  background:var(--bg);
  color:var(--fg);
  font-family:Verdana, Arial, sans-serif;
  font-size:1.0625rem;     /* 17px */
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
}

/* header: text on the left, avatar upper-right */
.header-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.5rem;
}
.header-text{ min-width:0; }

.avatar{
  flex-shrink:0;
  width:150px;
  height:150px;
  border-radius:50%;
  object-fit:cover;
  object-position:center top;
  border:1px solid var(--rule);
  background:#f0f0f2;
}

h1{ font-size:2.1rem; font-weight:600; letter-spacing:-.02em; margin:0 0 .6rem; }

p{ margin:0 0 var(--gap); }
p:last-child{ margin-bottom:0; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.contact p{ margin:0 0 .4rem; }
.contact p:last-child{ margin-bottom:0; }

.bio{ margin:0; }

hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:1.5rem 0;
}

main{ margin:0; }
section{ padding:0; }

h2{ font-size:1.2rem; font-weight:600; margin:0 0 .8rem; }

.entry-list{
  list-style-type:disc;
  padding-left:1.5rem;
  margin:0;
}
.entry-list li{ margin-bottom:1rem; }
.entry-list li:last-child{ margin-bottom:0; }
.entry-title{ font-weight:600; }

footer{
  margin-top:2.5rem;
  padding-top:1.2rem;
  padding-bottom:3rem;
  color:var(--muted);
  font-size:.88rem;
  border-top:1px solid var(--rule);
}

@media (max-width:600px){
  .header-top{ flex-direction:column-reverse; align-items:center; text-align:center; }
  .avatar{ width:130px; height:130px; }
  body{ font-size:1.25rem; }
}