:root {
  --page: #ffffff;
  --surface: #ffffff;
  --ink: #142235;
  --muted: #596675;
  --faint: #8290a0;
  --line: #d6e0ea;
  --accent: #155aa8;
  --accent-strong: #0d447f;
}

.hero {
  grid-template-columns: minmax(0, 1fr) 188px;
  grid-template-areas:
    "content visual"
    "contact contact";
  padding-top: 78px;
}

.hero-visual { width: 170px; height: 218px; }
.portrait-frame { border-radius: 2px; }
.hero h1 { font-size: clamp(58px, 7vw, 82px); }
.hero h1 small { color: var(--accent); }
.hero-statement { max-width: 760px; }

.overview { background: #f8fbfe; }
.section-heading { grid-template-columns: 38px 1fr; border-bottom-color: var(--line); }
.section-heading::after { right: auto; left: 0; width: 180px; transform-origin: left; }
.section-heading h2 { color: var(--ink); font-size: 25px; }
.section-index { font-weight: 700; }

.entry,
.education-entry,
.honor-list,
.practice-list,
.skill-list { margin-left: 48px; }

.entry-head h3 { color: #152c49; }
.evaluation-list article { border-top-width: 3px; }

@media (max-width: 780px) {
  .hero { grid-template-columns: 1fr 92px; padding-top: 42px; }
  .hero-visual { width: 88px; height: 118px; }
  .hero h1 { font-size: clamp(46px, 14vw, 64px); }
  .entry, .education-entry, .honor-list, .practice-list, .skill-list { margin-left: 0; }
}