:root{
  --text:#111;
  --muted:#888;
  --subtitle:#555;   /* darker subtitle */
  --max:720px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: "Futura", "Futura PT", "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:var(--text);
  line-height:1.5;
  font-size:13.5px;
  background:#fff;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:42px 20px 64px;
}

h1{
  font-size:30px;   /* slightly reduced */
  font-weight:400;
  margin:0 0 2px 0;
  letter-spacing:0.3px;
}

.subtitle{
  color:var(--subtitle);  /* darker */
  margin:0 0 18px 0;
  font-size:13.5px;
  font-weight:400;
}

nav{
  font-size:12.5px;
  margin-bottom:26px;
  color:var(--muted);
}

nav a{
  margin-right:14px;
  text-decoration:none;
  color:var(--muted);
}

nav a.active{
  text-decoration:underline;
  text-underline-offset:3px;
  color:#111;
}

.grid{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:28px;
  align-items:start;
}

.photo{
  width:220px;
  border-radius:0;
  display:block;
}

p{ margin:0 0 8px 0; }

.section-title{
  margin-top:22px;
  font-size:14px;
  font-weight:400;
}

.pub{ margin:6px 0; }

.small{
  color:var(--muted);
  font-size:12px;
}

.no-break{
  white-space:nowrap;   /* prevents forced line break */
}

a{ color:#111; }
a:hover{ opacity:.75; }

@media(max-width:720px){
  .grid{ grid-template-columns:1fr; }
  .photo{ width:190px; }
  h1{ font-size:26px; }
  .no-break{ white-space:normal; } /* allow wrap on small screens */
}