/* =========================
   GLOBAL
========================= */

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  background: #fff;
  color: #777;
  min-width: 1150px;
}

a {
  text-decoration: none;
}

.bio a {
  color: #8fb8ff;   /* light blue */
}

.bio a:hover {
  color: #c6dcff;   /* even lighter on hover */
}

.bio a:visited {
  color: #8fb8ff;
}

/* =========================
   HEADER / NAV
========================= */

header {
  text-align: center;
  margin-top: 15px;      /* ↓ slightly less space above */
  min-width: 1040px;

  padding-bottom: 28px;  /* ↓ pushes nav DOWN */
}

h1 {
  font-weight: 200;
  font-size: 36px;
  color: #888;

  margin-bottom: 10px;   /* ↓ small gap under title */
}

nav a {
  color: #888;
  margin: 0 11px;
  font-size: 14px;
}

nav a:hover {
  color: #d88973;
}

nav a.active {
  color: #b65a45;
}

/* =========================
   HOME PAGE
========================= */

.home-panel {
  width: 1040px;
  min-height: 720px;
  margin: 0 auto;
  background-image: url("images/headshot.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #000;
}

.bio {
  width: 520px;
  min-height: 720px;
  padding: 28px 26px;
  box-sizing: border-box;
  color: #eee;          /* or #ddd */
  line-height: 1.4;     /* more spacing → lighter feel */
  font-weight: 300;     /* thinner text */
  font-size: 13px;
  line-height: 1.32;
  background: rgba(0, 0, 0, 0.30);
}

.bio p {
  margin: 0 0 14px;
}

/* =========================
   PORTFOLIO PAGE
========================= */

body.portfolio-page {
  background: #000;
  color: #555;
}

.portfolio-title {
  width: 650px;
  margin: 60px auto 90px;
  border: 1px solid #777;
  text-align: center;
  padding: 10px 0;
}

.portfolio-title h2 {
  margin: 0;
  font-weight: 300;
  color: #555;
  font-size: 18px;
}

.portfolio-title h3 {
  margin: 4px 0 0;
  color: #c8c22a;
  font-weight: 300;
  font-size: 18px;
}

.portfolio {
  width: 860px;
  margin: 0 auto;
}

.item {
  display: grid;
  grid-template-columns: 470px 1fr;
  gap: 25px;
  border: 1px solid #666;
  padding: 18px;
  margin-bottom: 80px;
  background: transparent;
}

.item img {
  width: 470px;
  background: #fff;
}

.item h2 {
  margin: 0;
  display: inline-block;
  background: #e5e529;
  color: #111;
  font-size: 28px;
  font-weight: 800;
  padding: 2px 6px;
}

.item h4 {
  display: inline-block;
  background: #e5e529;
  color: #111;
  margin: 6px 0 15px;
  font-size: 18px;
  font-weight: 800;
  padding: 2px 6px;
}

.item p {
  color: #555;
  line-height: 1.4;
  font-size: 15px;
}

.item a {
  color: #aaa;
  font-weight: 700;
  display: inline-block;
  width: 160px;
  margin-bottom: 6px;
}

.item a:hover {
  color: #fff;
}

@media only screen and (max-device-width: 600px) {

  .home-panel {
    background-size: contain;     /* KEY: no cropping */
    background-position: center top;
    background-repeat: no-repeat;

    min-height: auto;             /* let it shrink naturally */
    padding-top: 60%;             /* creates space for full image */
  }

  .bio {
    width: 100%;
    background: rgba(0, 0, 0, 0.65);
  }
}