/* ------------------------------------------------------------------
   layout.css — page shell, header, footer, and shared section pieces
   ------------------------------------------------------------------ */

.page {
  min-height: 100vh;
  background: var(--bg);
}

.shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(18px, 3.4vw, 30px) clamp(18px, 4vw, 44px) clamp(40px, 6vw, 72px);
  box-sizing: border-box;
}

/* --- Site header ------------------------------------------------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.brand-square {
  width: 11px;
  height: 11px;
}

.brand-square--red { background: var(--red); }
.brand-square--teal { background: var(--teal); }
.brand-square--gold { background: var(--gold); }

.brand-link {
  margin-left: 4px;
  font: 500 11px var(--mono);
  letter-spacing: .06em;
  color: var(--gray-mid);
  text-decoration: none;
}

.brand-link:hover {
  color: var(--ink);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nav-btn {
  padding: 7px 11px;
  border: 1.5px solid var(--ink);
  font: 600 10px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: all .14s;
}

.nav-btn--github:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

.nav-btn--linkedin:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--paper-teal);
}

.nav-btn--resume:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--paper-gold);
}

.nav-btn--email {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.nav-btn--email:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

/* --- Section headers --------------------------------------------- */

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: baseline;
}

.section-head--ruled {
  border-bottom: 3px solid var(--ink);
  padding-bottom: 7px;
}

.section-title {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.section-note {
  font: 500 10.5px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray);
}

/* --- Color bar ---------------------------------------------------- */

.color-bar {
  margin-top: clamp(18px, 3vw, 26px);
  display: flex;
  height: 7px;
}

.color-bar span:nth-child(1) { flex: 2; background: var(--red); }
.color-bar span:nth-child(2) { flex: 1; background: var(--teal); }
.color-bar span:nth-child(3) { flex: 1.4; background: var(--gold); }
.color-bar span:nth-child(4) { flex: 5; background: var(--ink); }

/* --- Site footer -------------------------------------------------- */

.site-footer {
  margin-top: clamp(30px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid var(--ink);
  padding-top: 14px;
}

.site-footer-name {
  font: 500 10.5px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font: 700 10.5px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-footer-links a {
  text-decoration: none;
  color: var(--ink);
}

.footer-link--github:hover { color: var(--red); }
.footer-link--linkedin:hover { color: var(--teal); }
.footer-link--email:hover { color: var(--gold); }