:root{
  --ink:#1b1b1b;
  --muted:#5a5a5a;
  --brand:#5a2ca0;          
  --paper:#ffffff;
  --gutter:clamp(16px, 3vw, 32px);
  --maxw:1000px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:16px/1.55 system-ui, Arial, sans-serif;
}

.page{
  max-width:var(--maxw);
  margin:auto;
  padding:var(--gutter);
}

/* Header */
.header h1{
  margin:0 0 0.6rem;
  font-size:clamp(2rem, 6vw, 3rem);
  color:var(--brand);
  letter-spacing:0.2px;
}

/* Lead section layout */
.lead{
  display:grid;
  grid-template-columns: 1fr minmax(180px, 240px);
  gap:var(--gutter);
  align-items:start;
  margin-block:1rem 1.25rem;
}

.copy p{
  margin:0 0 0.9rem;
  color:var(--ink);
  font-size: 1.8rem;
}

.portrait-card{
  justify-self:end;
}

.portrait{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

.byline{
  margin-top:8px;
  font-size:0.9rem;
  color:var(--muted);
  line-height:1.25;
}

/* Photo grid */
.grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:var(--gutter);
  
}

.tile{
  margin:0;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px
}

.tile img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  transition:transform .25s ease, box-shadow .25s ease;
}