/* LAYOUT — header, page spacing, and the About page arrangement. */

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Header: name | page links ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--s5);
  padding-block: var(--s3);
}

/* Links are padded out to at least 44px tall so they're easy to tap. */
.site-name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.375rem;
  text-decoration: none;
}

.site-nav ul { display: flex; gap: var(--s2); margin-right: calc(-1 * var(--s2)); }

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s2);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--text-soft);
}

.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); font-style: italic; }

/* Phones: page links get their own row under the name. */
@media (max-width: 480px) {
  .site-nav { width: 100%; }
  .site-nav ul { margin-left: calc(-1 * var(--s2)); margin-right: 0; }
}

/* ---------- Page spacing ---------- */

main { padding-bottom: var(--s7); }

.page-title { padding-block: var(--s4) var(--s5); }

/* ---------- About Me ----------
   One centered column: heading, photo, description, contact links. */

.about {
  max-width: 44rem;
  margin-inline: auto;
  padding-top: var(--s4);
}

.about h1 { margin-bottom: var(--s4); }

.about__photo { margin: 0 0 var(--s5); }

.about__photo img {
  width: 100%;
  height: auto;
  background: var(--bg-raised);
}

.about__bio {
  font-size: var(--text-lead);
  line-height: 1.5;
}

.about__contact { margin: var(--s5) 0 0; }

/* Each row is a full-width tap target: the link stretches over the row. */
.about__contact div {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s1) var(--s4);
  min-height: 52px;
  padding-block: var(--s2);
  border-bottom: 1px solid var(--line);
}

.about__contact div:first-child { border-top: 1px solid var(--line); }
.about__contact dt { font-style: italic; color: var(--text-faint); }
.about__contact dd { margin: 0; overflow-wrap: anywhere; }
.about__contact a::after { content: ""; position: absolute; inset: 0; }