/* ==========================================================================
   header-text.css — 헤더·본문 typography
   글래스모피즘 오버홀: 잉크 색은 glass.css 토큰을 쓰고,
   SUITE 가변 글꼴이 300~900 을 모두 그리므로 bold 같은 키워드 대신
   명시적인 weight 를 쓴다.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: var(--fw-title); /* 제목은 크기가 위계를 지므로 800 까지 올리지 않는다 */
    letter-spacing: -.02em;
}

h1, h2, h3 {
    margin-bottom: 1rem;
}

/* ---------- 상단바 브랜드 ---------- */
/* 과거의 형광 하이라이트 박스를 걷어내고 유리 알약 위의 잉크 글자로 */
.brand-capsule .brand-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 0;
    background: none;
}

.brand-name .navbar-brand {
    font-size: var(--fs-lg); /* 전 구간 동일 (992px 분기 제거) */
    font-weight: var(--fw-title); /* 크롬 글자라 페이지 제목 h1 보다 무겁지 않게 */
    letter-spacing: -.04em;
    color: var(--ink);
    padding: 0;
    margin-right: 0;
}

/* 브랜드 이름 자리: 사이트 이름과 페이지 이름을 한 칸에 겹쳐 둔다. 칸 폭은 둘 중 긴 쪽이라
   이름이 바뀌어도 캡슐 폭이 그대로다. 페이지 제목(h1)이 스크롤로 캡슐 밑을 지나가면
   (.navbar.is-page-title-scrolled-away, glass-motion.js) 페이지 이름으로 바뀐다 */
.brand-title-stack {
    display: grid;
    justify-items: start;
}

.brand-title-stack > .navbar-brand {
    grid-area: 1 / 1;
    transition:
        opacity .25s cubic-bezier(.2, 0, 0, 1),
        translate .25s cubic-bezier(.2, 0, 0, 1),
        filter .25s cubic-bezier(.2, 0, 0, 1),
        visibility 0s linear .25s;
}

.brand-title-page,
.navbar.is-page-title-scrolled-away .brand-title-site {
    opacity: 0;
    filter: blur(2px);
    visibility: hidden;
}

.brand-title-page {
    translate: 0 6px;
}

.navbar.is-page-title-scrolled-away .brand-title-site {
    translate: 0 -6px;
}

.navbar.is-page-title-scrolled-away .brand-title-page {
    opacity: 1;
    translate: 0 0;
    filter: none;
    visibility: visible;
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .brand-title-stack > .navbar-brand {
        translate: none !important;
        filter: none !important;
    }
}

/* ---------- 본문 헤더 크기: 글자 사다리 (glass.css --fs-*, 4기 7턴, 5기 9번) ---------- */
h1 { /* 페이지 제목, 페이지당 하나 (노래 검색, 애창곡). 홈은 히어로 문장 */
    font-size: var(--fs-title-large);
    letter-spacing: -.025em;
}

h2 { /* 섹션 제목 (최근 신곡, 사용 방법, 검색 결과, 애창곡 추가) */
    font-size: var(--fs-2xl);
}

h3 { /* 패널 제목 (월별 신곡, 브랜드별 애창곡)과 소제목 (구독하기, 문의사항 ...). 모달 제목은 glass.css .modal-title */
    font-size: var(--fs-lg);
}

h4 { /* 하위 소제목 */
    font-size: var(--fs-lg);
}

.lead {
    font-size: var(--fs-body);
}