:root{
  --bg:#0b0e11;
  --fg:#e6edf3;
  --muted:#9aa4ad;
  --accent:#5ee36d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.5 "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.container{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1fr;
  gap:2rem;
  align-items:center;
  /* Increase side padding and center the content area */
  padding: clamp(24px, 6vw, 96px);
  max-width: 1100px;
  margin-inline: auto;
}

@media (min-width: 860px){
  .container{ grid-template-columns: 1fr 1fr; }
}

.left{ align-self:center; }
.right{ align-self:center; justify-self:center; }

.name{
  font-size: clamp(40px, 8vw, 96px);
  line-height:1.05;
  margin:0 0 .25em 0;
  letter-spacing:.5px;
}
.role{
  margin:.25em 0 1rem;
  font-size: clamp(16px, 2.5vw, 22px);
  color:var(--muted);
  font-weight:600;
}
.blurb{max-width: 65ch; color: var(--muted)}
/* Resume line: slightly larger, prominent link */
.resume{ margin: .5rem 0 .25rem; }
.resume .resume-link{ font-size: 1.125rem; font-weight: 600; }
/* Shared link styling for resume + contact links */
.contact a, .resume a{ color: var(--accent); text-decoration: none; }
.contact a:focus, .contact a:hover, .resume a:focus, .resume a:hover{ text-decoration: underline; }
.contact .icon{
  width:24px;
  height:24px;
  margin-right:6px;
  vertical-align: text-bottom;
}

.headshot{ margin:0; }
.headshot img{
  width: min(380px, 70vw);
  height: auto;
  display:block;
}

.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.sr-tests{ position:absolute; left:-9999px; }