/* The portrait is drawn from the original photograph, entirely with glyphs. */
.page { width: 100%; }
.site-header, .projects, .about, .contact { width: min(1120px, calc(100% - 96px)); margin-inline: auto; }
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  color: #efefeb;
}
.intro {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-left: 0;
  min-height: 680px;
  min-height: max(680px, 100svh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #080a0b;
  color: #efefeb;
  padding: 150px max(48px, calc((100% - 1120px) / 2)) 160px;
}
.portrait { position: absolute; z-index: -2; inset: 0; pointer-events: none; }
.portrait canvas { display: block; width: 100%; height: 100%; }
.portrait-fallback {
  position: absolute;
  width: auto;
  height: 136%;
  max-width: none;
  top: -20%;
  left: 76%;
  transform: translateX(-50%);
  opacity: .9;
  mask-image: linear-gradient(to right, transparent, #000 30%, #000 88%, transparent);
}
.portrait.is-ready .portrait-fallback { visibility: hidden; }
.intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #080a0b 0%, #080a0bf2 24%, #080a0b85 43%, transparent 64%), linear-gradient(0deg, #080a0b 0%, transparent 24%);
}
.intro-copy { position: relative; width: 100%; pointer-events: none; }
.site-header .wordmark { justify-self: start; }
.site-header .brand-logo { filter: invert(1); }
.header-nav { grid-column: 2; display: flex; align-items: center; font-size: 14px; }
.nav-placeholder { color: #b7babb; cursor: default; }
.intro-label { margin-bottom: 20px; color: #85898a; font-size: 11px; font-weight: 400; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; }
.intro h1 { font-size: clamp(62px, 7.4vw, 100px); font-weight: 650; line-height: 1.03; letter-spacing: -.065em; }
.intro-note { margin-top: 32px; max-width: 360px; padding-bottom: 4px; color: #b7babb; font-size: 15px; line-height: 1.8; }
.projects { padding-top: 64px; }

@media (max-width: 900px) {
  .site-header, .projects, .about, .contact { width: calc(100% - 64px); }
  .intro { padding-inline: 32px; }
  .intro h1 { font-size: clamp(56px, 8vw, 72px); }
}

@media (max-width: 760px) {
  .site-header { width: calc(100% - 48px); }
  .intro {
    min-height: 660px;
    min-height: max(660px, 100svh);
    align-items: stretch;
    padding: clamp(100px, 13svh, 128px) 24px max(40px, env(safe-area-inset-bottom, 0px));
  }
  .intro::after {
    background: linear-gradient(180deg, #080a0b 3%, #080a0b4d 24%, transparent 38%, #080a0b12 55%, #080a0bf5 81%, #080a0b 95%);
  }
  .intro-copy { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(260px, 38svh, 340px); }
  .intro h1 { font-size: clamp(38px, 11.8vw, 72px); line-height: 1.04; letter-spacing: -.055em; }
  .intro-note { max-width: 35ch; margin-top: 0; padding-bottom: 0; font-size: clamp(15px, 3.5vw, 17px); line-height: 1.65; color: #c9cccd; text-wrap: pretty; }
  .intro-note .desktop-break { display: none; }
  .portrait-fallback { height: 96%; top: 5%; left: 52%; }
  .projects { padding-top: 40px; }
}

@media (max-width: 620px) {
  .projects, .about, .contact { width: calc(100% - 40px); }
}

@media (max-width: 360px) {
  .site-header { width: calc(100% - 40px); }
  .intro { padding-inline: 20px; }
  .intro h1 { font-size: 11.8vw; }
}

@media print {
  .site-header, .projects, .about, .contact { width: 100%; }
  .site-header { position: static; transform: none; color: var(--ink); }
  .site-header .brand-logo { filter: none; }
  .portrait, .intro::after { display: none; }
  .intro { width: 100%; margin: 0; min-height: 0; padding: 30px 0; background: white; color: var(--ink); }
  .intro-note { margin-top: 20px; }
  .intro-note { color: var(--muted); }
}