/* ============================================================
   Joseph Siaw Akowuah  |  personal site styles
   Palette: WSU crimson accent on a clean white academic layout.
   Edit the variables below to restyle the whole site.
   ============================================================ */
:root{
  --ink:#1c1c1c;
  --muted:#5a5a5a;
  --line:#e3e3e3;
  --accent:#981e32;        /* WSU crimson */
  --accent-dark:#6f1624;
}

body{
  color:var(--ink);
  font-size:18px;
  line-height:1.65;
}

a{ color:var(--accent); }
a:hover{ color:var(--accent-dark); }

/* ---- Navbar ---- */
.navbar{
  border-bottom:1px solid var(--line);
  background:#fff !important;
}
.navbar-title{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600;
  letter-spacing:.2px;
  color:var(--ink) !important;
}
.navbar .nav-link{
  text-transform:uppercase;
  letter-spacing:1.3px;
  font-size:.78rem;
  color:var(--muted) !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  color:var(--accent) !important;
}

/* ---- Headings ---- */
h1,h2,h3{ font-family:Georgia,"Times New Roman",serif; }
.content h3{
  font-size:1.22rem;
  margin-top:2.2rem;
  margin-bottom:.15rem;
}
.content h3 + p em{ color:var(--muted); }

/* Page titles (Research, Projects, ...) as crimson eyebrow labels */
h1.title{
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--accent);
  border-bottom:1px solid var(--line);
  padding-bottom:.9rem;
  margin-bottom:1.8rem;
}

/* ---- Homepage hero ---- */
.hero{ text-align:center; margin:1.5rem 0 2.6rem; }
.headshot{
  width:170px;height:170px;border-radius:50%;
  margin:0 auto 1.4rem;overflow:hidden;
  background:linear-gradient(150deg,var(--accent),var(--accent-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:Georgia,serif;font-size:3rem;letter-spacing:2px;
  box-shadow:0 6px 22px rgba(152,30,50,.22);
}
.headshot img{ width:100%;height:100%;object-fit:cover;margin:0; }
.hero-name{ font-weight:600;font-size:2.05rem;margin:0 0 .2rem;border:none; }
.role{ color:var(--muted);font-size:1rem; }

/* ---- Tags ---- */
.tag-wrap{ font-size:.7rem;vertical-align:middle; }
.tag{
  display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:1px;
  background:#f4eef0;color:var(--accent-dark);
  padding:2px 9px;border-radius:3px;margin-left:6px;font-weight:600;
}

/* ---- Contact list ---- */
.contact-grid dt{
  text-transform:uppercase;letter-spacing:1px;font-size:.76rem;
  color:var(--muted);margin-top:.6rem;
}
.contact-grid dd{ margin:0 0 .2rem; }

.muted{ color:var(--muted);font-size:.9em; }