/* Academic homepage — plain, typographic, no framework. */

:root {
  --ink: #1a1a1a;
  --muted: #5c5c5c;
  --rule: #d8d5cd;
  --link: #7b1113;      /* faculty-page crimson */
  --link-hover: #a5181b;
  --paper: #fdfcf9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 24px 72px;
  background: var(--paper);
  color: var(--ink);
  font: 16.5px/1.65 Georgia, "Times New Roman", Times, serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; }

a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(123, 17, 19, 0.28); }
a:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); }

/* ---------- masthead ---------- */

header.masthead {
  display: flex;
  gap: 38px;
  align-items: center;
  padding: 56px 0 32px;
  border-bottom: 3px double var(--rule);
}

.masthead .identity { flex: 1 1 auto; min-width: 0; }

h1 {
  font-size: 46px;
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
}

.affil {
  margin: 0;
  font-size: 17px;
  color: var(--muted);
}

figure.portrait { margin: 0; flex: 0 0 228px; width: 228px; }

figure.portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 283 / 300;
  display: block;
  border: 1px solid #cfcbc1;
  padding: 5px;
  background: #fff;
}

/* ---------- social icons ---------- */

ul.social {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 0 -5px;   /* pull left so the first icon aligns with the name */
  padding: 0;
}

ul.social a {
  display: block;
  padding: 5px;
  border-bottom: 0;
  color: #6b6b6b;
  border-radius: 3px;
  transition: color 120ms ease, background-color 120ms ease;
}

ul.social svg {
  display: block;
  width: 21px;
  height: 21px;
}

/* Each mark keeps its own house color on hover. */
ul.social a:hover { background: rgba(0, 0, 0, 0.045); }
ul.social a.linkedin:hover { color: #0a66c2; }
ul.social a.github:hover { color: #171515; }
ul.social a.portfolio:hover { color: var(--link); }

/* The Instagram mark is already painted with its own gradient; lift it slightly. */
ul.social a.instagram svg { opacity: 0.86; transition: opacity 120ms ease; }
ul.social a.instagram:hover svg { opacity: 1; }

ul.social a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 1px;
}

/* ---------- sections ---------- */

section { padding: 30px 0 12px; border-bottom: 1px solid var(--rule); }
section:last-of-type { border-bottom: 0; }

h2 {
  position: relative;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #333;
  margin: 0 0 16px;
}

/* Emoji sit in the left margin like hanging bullets, so the heading text
   keeps the same left edge as the body copy. Narrow screens have no margin
   to hang into, so they fall back to sitting inline. */
h2 .mark {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  margin-right: 9px;
}

@media (min-width: 880px) {
  h2 .mark {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 14px;
  }
}

p { margin: 0 0 15px; }

.lead { font-size: 18.5px; }

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

footer {
  padding-top: 26px;
  margin-top: 30px;
  border-top: 1px solid var(--rule);
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 12.5px;
  color: #8c8c8c;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

footer a { border-bottom: 0; }
footer a:hover { text-decoration: underline; }

/* ---------- narrow screens ---------- */

@media (max-width: 620px) {
  header.masthead {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 24px;
    padding-top: 36px;
  }
  figure.portrait { flex-basis: 190px; width: 190px; }
  h1 { font-size: 34px; }
  .lead { font-size: 17.5px; }
}