:root { --heading-font: 'Faculty Glyphic'; }

/* Layout is drawn on a 1532px-wide grid (the reference image size)
   and scales down to fit narrower screens. */
:root {
  --u: min(1px, calc(100vw / 1532));
  --bg: #f3f3f3;
  --sage: #d9e6d6;
  --sage-dark: #a9c9a3;
  --ink: #1e1e1e;
  --text: #555555;
  --rule: #b9b9b9;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  font-family: 'Lato', sans-serif;
  color: var(--text);
}

.page {
  position: relative;
  width: calc(1532 * var(--u));
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
}

/* Header area keeps the original fixed positions */
.top {
  position: relative;
  min-height: calc(581 * var(--u));
}
.top > * { position: absolute; }

/* Sage block with rounded top-left corner */
.sage-block {
  left: calc(60 * var(--u));
  top: calc(42 * var(--u));
  width: calc(375 * var(--u));
  height: calc(350 * var(--u));
  background: var(--sage);
  border-top-left-radius: calc(140 * var(--u)) calc(150 * var(--u));
}

/* Decorative serif headings */
.deco {
  font-family: var(--heading-font), serif;
  font-weight: 400;
  color: var(--ink);
  text-transform: uppercase;
  -webkit-text-stroke: calc(1.2 * var(--u)) var(--ink);
  white-space: nowrap;
}

.name {
  left: calc(243 * var(--u));
  top: calc(75 * var(--u));
  font-size: calc(68 * var(--u));
  letter-spacing: calc(1 * var(--u));
  line-height: 1;
}

.title {
  left: calc(243 * var(--u));
  top: calc(183 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}
.title .bar {
  width: calc(78 * var(--u));
  height: calc(4 * var(--u));
  background: var(--ink);
}
.title span {
  font-weight: 700;
  font-size: calc(25 * var(--u));
  letter-spacing: calc(5 * var(--u));
  color: var(--ink);
  line-height: 1;
}

/* Photo */
.photo {
  left: calc(123 * var(--u));
  top: calc(269 * var(--u));
  width: calc(247 * var(--u));
  height: calc(247 * var(--u));
  border-radius: 50%;
  background: var(--sage-dark);
  overflow: hidden;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Section headings */
.h-section { font-size: calc(34 * var(--u)); line-height: 1; }
.h-profile { left: calc(508 * var(--u)); top: calc(255 * var(--u)); }

/* Body text */
.body-text {
  font-size: calc(19.5 * var(--u));
  white-space: nowrap;
}

/* Profile stays in flow so the header grows with the text */
.top > .profile-text {
  position: relative;
  margin-left: calc(508 * var(--u));
  padding-top: calc(325 * var(--u));
  padding-bottom: calc(40 * var(--u));
  width: calc(964 * var(--u));
  white-space: normal;
  line-height: calc(32 * var(--u));
  text-align: justify;
}
.profile-text p + p { margin-top: calc(16 * var(--u)); }
.profile-text a { color: var(--ink); }

/* Lower two-column area flows so it can hold any amount of content;
   spacing mirrors the original grid. */
.lower {
  display: grid;
  grid-template-columns: calc(375 * var(--u)) calc(1059 * var(--u));
  margin-left: calc(60 * var(--u));
  padding-bottom: calc(110 * var(--u));
}
.col-left { padding-right: calc(25 * var(--u)); }
.col-right {
  border-left: calc(1.5 * var(--u)) solid var(--rule);
  padding-left: calc(73.5 * var(--u));
  padding-top: calc(2 * var(--u));
}

.section + .section { margin-top: calc(50 * var(--u)); }
.rule { height: calc(1.5 * var(--u)); background: var(--rule); }
.col-left .rule { width: calc(298 * var(--u)); }
.section .h-section { margin-top: calc(66 * var(--u)); margin-bottom: calc(32 * var(--u)); }

.contact-text {
  line-height: calc(39.5 * var(--u));
}
.contact-text a { color: inherit; text-decoration: none; }
.contact-text a:hover { text-decoration: underline; }
.contact-text .ic {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  margin-right: calc(10 * var(--u));
  vertical-align: calc(-3 * var(--u));
  fill: var(--ink);
}

.edu {
  font-size: calc(19.5 * var(--u));
  line-height: calc(32 * var(--u));
}
.edu + .edu { margin-top: calc(26 * var(--u)); }
.edu h4 { font-weight: 700; color: var(--ink); font-size: calc(20 * var(--u)); }

/* Experience */
.job + .job { margin-top: calc(40 * var(--u)); }

.job-meta {
  font-size: calc(23 * var(--u));
  line-height: calc(36 * var(--u));
  margin-bottom: calc(2 * var(--u));
}
.job-meta b { font-weight: 700; color: var(--ink); margin-right: calc(10 * var(--u)); }
.job-meta i { color: #333; white-space: nowrap; }

.bullets { list-style: none; }
.bullets li {
  position: relative;
  padding-left: calc(25 * var(--u));
  padding-bottom: calc(6 * var(--u));
  font-size: calc(19.5 * var(--u));
  line-height: calc(32 * var(--u));
}
.bullets li::before {
  content: '';
  position: absolute;
  left: calc(1 * var(--u));
  top: calc(16 * var(--u));
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: var(--text);
  transform: translateY(-50%);
}
.bullets li b { color: var(--ink); font-weight: 700; }