@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --photo-size: 160px;
  --main-max: 600px;     /* centered column width */
  --gutter-gap: 36px;    /* space between photo and column */
  --link: #c00;          /* red links */
  --font-size: 18px;     /* base font size */
}

html, body { margin: 0; padding: 0; }

body {
  font-family: "Crimson Text", Georgia, "Times New Roman", serif;
  font-size: var(--font-size);
  color: #111;
  background: #fff;
  line-height: 1.6;
}

a { color: var(--link); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

.wrap { margin: 40px auto; padding: 0 16px; max-width: 1200px; }

.grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--main-max)) 1fr; /* left gutter, centered column, right gutter */
  grid-auto-rows: auto; /* rows sized to content */
  align-items: start;
  column-gap: 0;
}

.sidebar { grid-column: 1; grid-row: 3; justify-self: end; display: flex; flex-direction: column; align-items: center; margin-right: var(--gutter-gap); }
.sidebar img {
  width: var(--photo-size);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 60%;
  object-fit: cover;
  display: block;
  border: 2px solid #ddd;
}

.links { margin-top: 12px; width: 100%; text-align: left;}
.links ul { list-style: none; padding: 0; margin: 8px 0 0 0; }
.links li { margin: 6px 0; }

/* top navigation placed above the centered column */
.nav { grid-column: 2; grid-row: 1; display: flex; justify-content: space-between; align-items: center; padding: 8px 0 10px 0; }
.nav .brand { font-weight: 700; font-size: 1.25em; color: #111; }
.menu { display: flex; gap: 18px; }
.nav a { font-weight: 700; }
.divider { grid-column: 2; grid-row: 2; height: 1px; background: #ddd; margin: 0 0 20px 0; }

.name { font-size: 32px; margin: 0 0 8px 0; }
.tagline { margin: 0 0 24px 0; color: #444; }
.content { grid-column: 2; grid-row: 3; max-width: var(--main-max); font-size: 14pt; }

@media (max-width: 700px) {
  .grid { grid-template-columns: 1fr; row-gap: 24px; }
  .sidebar { justify-self: center; margin-right: 0; }
  .wrap { margin: 24px auto; }
}

/* Page-specific overrides */
body.research { --gutter-gap: 36px; }