:root {
  --paper:#F7F5EF;
  --panel:#FFFFFF;
  --ink:#172223;
  --navy:#183642;
  --muted:#69706E;
  --line:#D7D1C3;
  --teal:#176D75;
  --cream:#FFF9EE;
}
* { box-sizing:border-box; }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia, serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand,.nav a,.caption,.link {
  font-family:"EB Garamond", Garamond, Georgia, serif;
}
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(24px,6vw,88px);
  background:rgba(247,245,239,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(215,209,195,.75);
}
.brand {
  color:var(--teal);
  font-size:clamp(26px,2.2vw,34px);
  text-decoration:none;
  font-weight:500;
}
.nav {
  display:flex;
  gap:clamp(20px,2.5vw,38px);
  align-items:center;
}
.nav a {
  color:var(--navy);
  text-decoration:none;
  font-size:19px;
  border-bottom:1px solid transparent;
  padding-bottom:3px;
}
.nav a.active,.nav a:hover {
  color:var(--teal);
  border-color:var(--teal);
}

.hero {
  width:100%;
  background:var(--panel);
}
.hero img {
  display:block;
  width:100%;
  height:auto;
}

main {
  padding:clamp(72px,9vw,130px) clamp(24px,6vw,88px) clamp(80px,9vw,130px);
}
.page-wrap {
  max-width:1180px;
  margin:0 auto;
}
.intro-grid {
  max-width:860px;
  margin:0 auto;
}

.about-tagline {
  font-family:"EB Garamond", Garamond, Georgia, serif;
  color:var(--teal);
  font-size:clamp(34px,3.7vw,58px);
  line-height:1.08;
  font-weight:500;
  text-align:center;
  max-width:920px;
  margin:0 auto clamp(42px,5vw,64px);
}

.bio {
  max-width:820px;
  margin:0 auto;
}
.bio p {
  font-size:clamp(20px,1.45vw,24px);
  line-height:1.68;
  margin:0 0 28px;
}
.bio p:first-of-type {
  font-size:clamp(21px,1.6vw,26px);
  line-height:1.58;
}
.side-portrait {
  max-width:620px;
  margin:clamp(42px,5vw,68px) auto 0;
}
.side-portrait img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(215,209,195,.9);
}

.teal-rule {
  height:1px;
  background:var(--teal);
  opacity:.72;
  margin:clamp(64px,7vw,96px) 0 clamp(34px,5vw,58px);
}
.milestones {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(34px,5vw,58px);
  align-items:start;
}
.osu-pair {
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:24px;
  align-items:center;
}
.osu-pair img,
.earthx-card img {
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(215,209,195,.9);
}
.earthx-card {
  align-self:start;
}
.caption {
  font-size:clamp(20px,1.55vw,25px);
  line-height:1.35;
  margin:22px auto 0;
  max-width:620px;
  color:var(--ink);
}
.caption em {
  font-style:italic;
}
.footer-rule {
  height:1px;
  background:var(--teal);
  opacity:.72;
  margin:clamp(62px,7vw,92px) 0 0;
}
footer {
  border-top:1px solid var(--line);
  padding:34px clamp(24px,6vw,88px);
  color:var(--muted);
  font-size:17px;
  display:flex;
  justify-content:space-between;
  gap:24px;
}
footer a {
  color:var(--teal);
  text-decoration:none;
}

@media(max-width:900px) {
  .site-header {
    height:auto;
    padding-top:18px;
    padding-bottom:18px;
    align-items:flex-start;
    gap:14px;
    flex-direction:column;
  }
  .nav {
    flex-wrap:wrap;
    gap:16px 24px;
  }
  .milestones,
  .osu-pair {
    grid-template-columns:1fr;
  }
  .side-portrait {
    max-width:720px;
    margin:36px auto 0;
  }
  footer {
    flex-direction:column;
  }
}


.footer-contact {
  display:flex;
  align-items:center;
  gap:0;
  flex-wrap:wrap;
}
.social-links {
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-left:2px;
}
.social-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--teal);
  line-height:1;
}
.social-icon:hover,
.social-icon:focus {
  opacity:.75;
}
.social-icon:focus {
  outline:1px solid var(--teal);
  outline-offset:4px;
}

.social-icon svg {
  display:block;
  width:20px;
  height:20px;
  flex:0 0 20px;
}