:root {
  --hero-top: 0px;
  --scroll-bottom: 24px;
  --scroll-height: 11px;
  --hero-bottom: calc(var(--scroll-bottom) + var(--scroll-height) + 8px);
}

/* The leaf stays behind the page as the content scrolls into view. */
.site-header { margin-bottom: calc(-1 * var(--nav-height)); }
@media (min-width: 801px) {
  .site-header { background: transparent; }
  .site-header.header--content { background: var(--white); }
}
.wordmark { font-size: 20px; }
.hero { position: relative; height: 100vh; height: 100svh; }
.hero-image {
  position: fixed;
  inset: var(--hero-top) 0 auto;
  z-index: 0;
  display: block;
  width: 100%;
  height: max(0px, calc(100vh - var(--hero-top) - var(--hero-bottom)));
  height: max(0px, calc(100svh - var(--hero-top) - var(--hero-bottom)));
  object-fit: contain;
  object-position: center;
  opacity: var(--leaf-opacity, 1);
  pointer-events: none;
}
.hero-image { visibility: hidden; }
.hero-image.is-loaded { visibility: visible; }
.scroll-label {
  position: fixed;
  z-index: 1;
  bottom: var(--scroll-bottom);
  left: 50%;
  height: var(--scroll-height);
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  line-height: 1;
  white-space: nowrap;
  opacity: var(--scroll-label-opacity, 1);
  pointer-events: none;
}
.scroll-label-text { display: inline-block; opacity: 0; transition: opacity 600ms ease; }
.scroll-label-ready .scroll-label-text { opacity: 1; }
.content-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--nav-height);
}
.content {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: clamp(48px, 8.889vw, 128px);
  padding: clamp(32px, 5vh, 80px) var(--gutter);
  font-size: 20px;
  line-height: 1.35;
}
.bio { display: flex; flex-direction: column; align-items: flex-start; gap: 64px; }
.bio p { color: var(--muted); font-weight: 500; }
.clients h2 { margin-bottom: 32px; font-size: inherit; font-weight: 700; }
.client-list { display: flex; flex-direction: column; gap: 32px; margin: 0; padding: 0; list-style: none; }
.client-list a { color: var(--muted); font-weight: 700; }
.client-list a:hover { color: var(--lime); text-decoration: none; }
.site-footer { flex-shrink: 0; }

@media (max-width: 800px) {
  :root { --hero-top: var(--nav-height); --scroll-bottom: 16px; }
  .content {
    grid-template-columns: 1fr;
    gap: 64px;
    padding: 64px var(--gutter) 0;
    font-size: 20px;
  }
  .bio { gap: 32px; }
  /* Preserve the Figma spacing below the last selected work. */
  .clients { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-label-text { transition: none; }
}