/* ====================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ==================================== */
:root {
  --bg: #faf9f6;
  --fg: #1d1d1d;
  --accent: #e6634b;
  --link: #005fbb;
}

/* ====================================
   RESET & BASE STYLES
   ==================================== */
* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

body {
  font-family: 'Figtree', sans-serif; 
  background: var(--bg);
  color: var(--fg);
  line-height: 1.65;
  padding: 2rem 1rem 4rem;
  max-width: 720px;
  margin: 0 auto;
}

/* ====================================
   TYPOGRAPHY
   ==================================== */
h1 { 
  font-size: 2rem; 
  font-weight: 700; 
  margin-bottom: .5rem;
  text-align: center;
}

h2 { 
  font-size: 1.4rem; 
  font-weight: 600; 
  margin: 2.5rem 0 .75rem; 
}

p { 
  margin-bottom: 1rem; 
  font-weight: 300; 
}

strong {
  font-weight: 600;
}

/* ====================================
   LINKS
   ==================================== */
a { 
  color: var(--link); 
  text-decoration: none; 
}

a:hover { 
  text-decoration: underline; 
}

/* ====================================
   IMAGES
   ==================================== */
img.banner { 
  width: 100%; 
  max-width: 560px; 
  display: block; 
  margin: 1.5rem auto; 
}

img.avatar { 
  width: 140px; 
  height: 140px; 
  border-radius: 50%; 
  display: block; 
  margin: 0 auto 1rem; 
  border: 4px solid var(--fg); 
  object-fit: cover; 
}

/* ====================================
   LISTS
   ==================================== */
ul.links { 
  list-style: none; 
  padding-left: 0; 
}

ul.links li { 
  margin-bottom: 1.25rem;
  font-weight: 300;
}

ul.links strong { 
  display: inline-block; 
  margin-right: .25rem;
  font-weight: 600;
}

/* ====================================
   SOCIAL ICONS
   ==================================== */
.social-icons { 
  margin-top: 0.5rem; 
}

.social-icons a { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  margin: 0 0.5rem; 
  color: var(--link); 
  text-decoration: none; 
  width: 24px; 
  height: 24px; 
  font-size: 20px; 
}

.social-icons a:hover { 
  color: var(--accent); 
}

.social-icons svg { 
  width: 20px; 
  height: 20px; 
  fill: currentColor; 
}

/* ====================================
   FOOTER
   ==================================== */
footer {
  margin-top: 3rem;
  font-size: .85rem;
  text-align: center;
}