:root {
  --paper: #fbfbf8;
  --ink: #1d1e1c;
  --muted: #696b66;
  --line: #d9d9d3;
  --accent: #526b5a;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.62; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

.page { max-width: 1220px; margin: 0 auto; padding: 54px 48px 0; display: grid; grid-template-columns: 192px minmax(0, 690px); column-gap: 95px; }
.sidebar { height: calc(100vh - 54px); position: sticky; top: 54px; display: flex; flex-direction: column; font-size: 15px; line-height: 1.45; }
.monogram { height: 37px; width: 37px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; text-decoration: none; font: 700 11px/1 var(--sans); letter-spacing: .02em; margin-bottom: 24px; }
.sidebar-name { font-size: 17px; font-weight: bold; line-height: 1.23; margin: 0; }
.sidebar-note { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.side-nav { display: flex; flex-direction: column; gap: 6px; margin-top: 58px; }
.side-nav a, .sidebar-links a { text-decoration: none; width: max-content; }
.side-nav a::before { content: "— "; color: var(--muted); opacity: 0; transition: opacity .14s; }
.side-nav a:hover::before { opacity: 1; }
.sidebar-links { margin-top: auto; display: flex; flex-direction: column; gap: 5px; padding-bottom: 48px; color: var(--muted); }
.mobile-header { display: none; }

main { min-width: 0; }
.intro { padding: 7px 0 113px; }
.kicker, .section-label { margin: 0; color: var(--muted); font: 10px/1.4 var(--sans); letter-spacing: .11em; }
h1 { font-size: clamp(48px, 6vw, 69px); letter-spacing: -.061em; line-height: .98; font-weight: normal; margin: 14px 0 31px; }
.intro-copy { max-width: 613px; font-size: 21px; line-height: 1.52; letter-spacing: -.016em; }
.intro-copy p { margin: 0 0 17px; }
.plain-link { display: inline-block; margin-top: 13px; font: 600 13px var(--sans); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.plain-link span { margin-left: 8px; }

.section { border-top: 1px solid var(--line); padding: 20px 0 75px; display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 27px; }
.section-content > p:first-child { margin-top: -6px; }
.about .section-content { font-size: 18px; line-height: 1.64; }
.about .section-content p { margin: 0 0 18px; }
.entries { display: flex; flex-direction: column; }
.entry { padding: 0 0 27px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.entry:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.entry-heading { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; margin-bottom: 12px; }
.entry h2 { font: bold 18px/1.25 var(--serif); letter-spacing: -.015em; margin: 0; }
.entry-heading p { font-size: 14px; color: var(--muted); margin: 3px 0 0; }
time { flex: 0 0 auto; color: var(--muted); font: 10px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-align: right; }
.entry > p { font-size: 15.5px; line-height: 1.62; margin: 0; color: #383a36; }
.projects-list .entry { padding-bottom: 29px; margin-bottom: 29px; }
.status { color: var(--accent); font: 10px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.skills { padding-bottom: 87px; }
.skills-intro { font-size: 15.5px; margin: -4px 0 17px; color: #383a36; }
.skill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.skill-list li { border: 1px solid var(--line); border-radius: 2px; padding: 5px 8px; font: 11px/1.2 var(--sans); color: #454743; }
.skills-note { font-size: 13px; color: var(--muted); margin: 19px 0 0; }

.contact { border-top: 1px solid var(--ink); padding: 22px 0 85px; }
.contact h2 { font-size: clamp(31px, 4.2vw, 45px); font-weight: normal; letter-spacing: -.047em; line-height: 1.1; margin: 51px 0 16px; }
.contact > p:not(.section-label) { max-width: 515px; font-size: 17px; margin: 0 0 23px; }
.email-link { display: inline-block; font-size: 18px; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.email-link span { color: var(--accent); margin-left: 5px; }
.mobile-contact-links { display: none; }

@media (max-width: 780px) {
  body { font-size: 16px; }
  .page { display: block; padding: 0 22px; }
  .sidebar { display: none; }
  .mobile-header { height: 72px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font: 11px var(--sans); }
  .mobile-header > a { border: 1px solid var(--ink); border-radius: 50%; height: 31px; width: 31px; text-decoration: none; display: grid; place-items: center; font-size: 9px; font-weight: bold; }
  .mobile-header nav { display: flex; gap: 15px; }
  .mobile-header nav a { text-decoration: none; }
  .intro { padding: 65px 0 76px; }
  h1 { font-size: 50px; margin: 11px 0 26px; }
  .intro-copy { font-size: 18px; line-height: 1.55; }
  .section { display: block; padding: 18px 0 56px; }
  .section-label { margin-bottom: 34px; }
  .about .section-content { font-size: 17px; }
  .entry { padding-bottom: 23px; margin-bottom: 23px; }
  .entry-heading { display: block; margin-bottom: 10px; }
  .entry h2 { font-size: 17px; }
  time { display: block; text-align: left; margin-top: 8px; font-size: 9px; }
  .entry > p { font-size: 15px; }
  .skills { padding-bottom: 65px; }
  .contact { padding-bottom: 65px; }
  .contact h2 { margin-top: 37px; }
  .email-link { font-size: 15px; overflow-wrap: anywhere; }
  .mobile-contact-links { display: flex; flex-wrap: wrap; gap: 13px 18px; margin-top: 27px; font: 11px var(--sans); }
  .mobile-contact-links a { text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
}