/* Approved About layout: study 05, type only. */
:root {
  color: #0D2565;
  background: #F8F8F6;
  font-family: 'Notebook Hand', 'Segoe Print', cursive;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #F8F8F6; }
body { font-size: 18px; line-height: 1.4; }
h1, p { margin: 0; font-weight: 400; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
button, input { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }

.direction-center-links a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.about-main {
  width: 100%;
  max-width: 1120px;
  padding: 50px 40px;
  margin: 0 auto;
  min-height: 610px;
}

.eyebrow { font-size: 20px; opacity: .58; margin-bottom: 22px; }
.type-intro { font-size: var(--portfolio-display-size); line-height: 1.35; letter-spacing: -.7px; max-width: 990px; }
.hello-inline { display: inline-block; position: relative; margin-bottom: 10px; padding-bottom: 6px; }
.hello-inline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: url('/about/underline.svg') center / 100% 100% no-repeat;
}

@keyframes about-underline-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .hello-inline::after {
    animation: about-underline-draw .65s cubic-bezier(.2,.65,.35,1) .12s both;
  }
}

.lower-notes { margin-top: 52px; }
.meta { font-size: 15px; line-height: 1.5; opacity: .62; }
.about-location { display: flex; align-items: center; gap: .35em; }
.about-location img { display: block; width: .85em; height: 1.2em; flex: 0 0 auto; transform: translateY(-.05em) rotate(4deg); }
.links { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; font-size: 17px; }
.links a { display: inline-flex; align-items: center; gap: .25em; text-decoration: none; }
.links a span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.link-arrow { display: block; width: .95em; height: .95em; flex: 0 0 auto; }
.email-contact { position: relative; }
.email-copy { display: inline-block; padding: 0; border: 0; background: transparent; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; -webkit-user-select: text; user-select: text; }
.email-copy-status { position: absolute; top: 100%; left: 0; margin-top: 4px; width: max-content; max-width: 220px; font-size: 14px; line-height: 1.3; opacity: .7; }
.page-foot { max-width: 1120px; padding: 0 40px 34px; margin: auto; display: flex; justify-content: space-between; gap: 20px; font-size: 13px; opacity: .5; }

@media (max-width: 800px) {
  .about-main { padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 600px) {
  .direction-nav-centered { height: 132px; }
  .about-main { padding: 26px 22px 40px; min-height: 0; }
  .type-intro { letter-spacing: -.5px; }
  .eyebrow { font-size: 18px; margin-bottom: 18px; }
  .lower-notes { margin-top: 32px; }
  .page-foot { padding: 20px 22px 30px; font-size: 12px; }
}