/* ================================
   1) Root & Base
================================ */
:root{
  /* Colors */
  --bg: #cdc0c0;          /* page background */
  --fg: #000;             /* body text */
  --card-bg: #2a2a2a;     /* left card background */
  --fg-card: #f0f0f0;     /* left card text */
  --muted: #aaa8a8;       /* secondary text */
  --accent: #00acee;      /* links / highlights */

  /* Radius & motion */
  --radius: .3125rem;     /* 5px */
  --easing: .2s ease-in-out;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

html { font-size: 100%; }       /* 1rem = default (≈16px) */

body{
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);

  /* sticky footer pattern */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg{
  max-width: 100%;
  height: auto;
  display: block;
}

/* ================================
   2) Header / Navigation
================================ */
nav{
  background: #333;
  padding: 1rem;
}

nav ul{
  display: flex;
  flex-wrap: wrap;                 /* prevents horizontal overflow */
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a{
  color: #fff;
  text-decoration: none;
  font-size: 1.125rem;
  padding: .5rem .25rem;
  position: relative;
}

nav a:hover,
nav a:focus{ text-decoration: underline; }

nav a:focus-visible{
  outline: .125rem solid var(--accent);
  outline-offset: .125rem;
}

nav a.active,
nav a[aria-current="page"]{
  font-weight: bold;
  border-bottom: .125rem solid var(--accent);
}

/* ================================
   3) Main container
   - centered, fluid padding,
     hard cap on huge monitors
================================ */
main{
  flex: 1 0 auto;
  width: 100%;
  max-width: none;                 /* remove width cap */
  margin: 0;                       /* remove auto-centering gaps */
  padding: clamp(16px, 2vw, 32px); /* keep small side padding */
}

/* ================================
   4) Two-column layout
   - single column on small screens
   - card column has safe min/max
================================ */
.about-wrapper{
  display: grid;
  grid-template-columns: 1fr;      /* phones: one column */
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 900px){
  .about-wrapper{
    grid-template-columns: minmax(260px, 360px) 1fr;
  }
}

/* Let grid children shrink if needed (prevents overflow) */
.bio-card,
.about-text{ min-width: 0; }

/* ================================
   5) Bio card (left)
================================ */
.bio-card{
  background: var(--card-bg);
  color: var(--fg-card);
  padding: 2rem;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.3);
  place-self: start;               /* aligns to top on tall pages */
}

.profile-pic{
  width: clamp(120px, 15vw, 200px);/* responsive avatar */
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
}

.bio-card h1{
  font-size: clamp(1.75rem, 4vw, 2rem);
  margin: .5rem 0 0;
}

.bio-info,
.bio-links{
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.bio-info li,
.bio-links li{
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
  font-size: .95rem;
  margin-bottom: .5rem;
}

.bio-info li svg,
.bio-links li svg{
  width: 1.35em;
  height: 1.35em;
  flex-shrink: 0;
}

.bio-links a{
    display: flex;          
  align-items: center;    
  gap: 0.5rem;            

  color: var(--muted);
  text-decoration: none;
  transition: color var(--easing);
}

.bio-links a:hover,
.bio-links a:focus{ color: var(--accent); }

/* ================================
   6) About text (right)
================================ */
.about-text{
  /* Match main's responsive side padding on the right */
  padding-inline-end: clamp(16px, 2vw, 32px);
  /* Optional: keep comfortable line length; remove if you prefer full width */
}

.about-text h2{
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  margin: 0 0 1rem;
}

.about-text p{
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 500;
  overflow-wrap: anywhere;         /* long URLs/words won't overflow */
}

/* ================================
   7) Footer
================================ */
footer{
  margin-top: auto;
  padding: .75rem 1rem;
  background: #222;
  color: #aaa;
  text-align: center;
}

footer p{ margin: 0; }