/* ============================================================
   ABOUT — light 2-col layout, bio, contact
   ============================================================ */

:root {
  --ink: #1a1a1a;
  --mid: #888;
  --bg:  #ffffff;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: 'Inter', sans-serif;
  color: var(--ink);
}

/* Header colors (light bg) */
.site-header { background: var(--bg); }
.site-name { color: var(--ink); }
.site-nav a { color: var(--mid); }
.site-nav a:hover, .site-nav a.active { color: var(--ink); }
.hamburger span { background: #1a1a1a; }

/* Mobile nav colors (light) */
@media (max-width: 768px) {
  .site-header { border-bottom: 0.5px solid #e8e4de; }
  .mobile-nav { background: rgba(255,255,255,0.98); }
  .mobile-nav a { color: #1a1a1a; }
}

/* ── LAYOUT ── */
.page {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 89px;
}

/* ── LEFT — text ── */
.col-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 72px 0 48px;
}

.bio-label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 20px;
}

.bio-text {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink);
  max-width: 420px;
}

.contact-group {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-item { display: flex; flex-direction: column; gap: 4px; }

.contact-label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}

.contact-value {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s;
}
.contact-value:hover { color: var(--mid); }

/* ── RIGHT — photo ── */
.col-photo { position: relative; overflow: hidden; }

.col-photo img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: auto;
  max-height: 70%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: grayscale(100%);
}

/* ── MOBILE ── */
@media (max-width: 768px) {
  html, body { overflow: auto; height: auto; }
  .page {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 73px;
  }
  .col-text { padding: 32px 30px 24px; border-right: none; }
  .bio-text { font-size: 13px; max-width: 100%; }
  .contact-group { margin-top: 32px; flex-direction: row; flex-wrap: wrap; gap: 24px; }
  .col-photo { position: relative; width: 100%; height: auto; padding: 0 30px 32px; }
  .col-photo img { position: relative; top: auto; left: auto; transform: none; width: 100%; height: auto; max-height: none; }
}