feat(site): 히어로를 첫인상 크기로 되돌린다

페이지에서 가장 중요한 섹션이 가장 짧았다(0.7 화면). 배분이 중요도와 반대다.

- min-height 72dvh → 88dvh. 100dvh 로 채우지는 않는다. 다음 섹션의 머리가
  조금 보여야 스크롤할 것이 있다는 단서가 된다.
- h1 41.5px → 65.4px. 섹션 h2 가 33.2px 이라 8px 차이였고, 스케일상 한 단계
  위일 뿐 화면에서는 같은 크기로 읽혔다. 처음에 --display(112px)를 썼다가
  배경과 싸워 줄였는데 반대쪽 극단까지 갔다. 지금은 h2 의 1.97 배다.
- 저장소 링크를 헤더로 옮겼으므로 히어로에서는 뺐다. 같은 링크가 두 번 나갔다.

tokens.md 에 히어로 h1 은 섹션 h2 의 1.8~2.2 배라는 기준을 기록했다.

packages/skill/references/tokens.md

@@ -126,6 +126,33 @@
 - 섹션 간격은 **본문 간격의 4배 이상**. 좁으면 페이지가 뭉개진다
 - 요소를 정렬할 때 **간격이 아니라 정렬선**을 먼저 맞춰라
 
+### h1 이 h2 보다 한 단계만 크면 위계가 아니다
+
+히어로 제목을 줄이다가 실측에서 이렇게 됐다.
+
+| | 크기 | |
+|---|---|---|
+| h1 (히어로) | 41.5px | `--step-4` |
+| h2 (섹션) | 33.2px | `--step-3` |
+
+**8px 차이.** 스케일상으로는 한 단계 위지만 화면에서는 같은 크기로 읽힌다.
+페이지에서 가장 중요한 문장이 아홉 개의 섹션 제목과 구별되지 않았다.
+
+원인은 과잉 교정이었다. 처음에 `--display`(1440px 에서 112px)를 썼다가
+배경 그래픽과 싸워서 줄였는데, 줄이다가 h2 와 붙는 데까지 왔다.
+**한 극단에서 도망치다 반대쪽 극단에 도착한 것이다.**
+
+기준: **히어로 h1 은 섹션 h2 의 1.8~2.2 배.** 그 아래면 위계가 없고,
+그 위는 배경·여백과 싸우기 시작한다. 고친 값은 65.4px 로 h2 의 1.97 배다.
+
+```css
+/* 스케일의 마지막 단계를 그대로 쓰지 말고, 히어로 전용 구간을 따로 잡는다 */
+.hero-title { font-size: clamp(2.2rem, 1.3rem + 3.1vw, 4.4rem); }
+```
+
+> 확인법: h1 과 h2 를 나란히 놓고 보지 말고 **크기를 재라.**
+> 배경이 화려하면 큰 글자도 작아 보여서 눈이 속는다.
+
 ### 제목 다음 간격은 전역에서 한 번 정한다
 
 `h2 { margin: 0 }` 리셋과 `p { margin: 0 0 X }` 를 같이 쓰면 **제목과 본문이 붙는다.**