/* ══════════════════════════════════════════════════════════════════════════════════════════════
   casepeat.com 현재 섹션 표시

   지금 어느 섹션을 보고 있는지 알 수 있게 합니다. PIF 의 PARTY 탭에는 목차 바를 새로 넣었지만
   여기서는 그럴 필요가 없습니다. 헤더에 이미 여덟 개짜리 내비게이션이 있고(index.html:1877),
   header 가 position:fixed 라 스크롤 내내 화면에 남습니다. 새 요소를 얹는 대신 이미 있는 그
   내비게이션이 현재 위치를 말하게 하는 편이 낫습니다.

   ── 활성 표시를 빨강 글자로 하지 않은 이유
   두 가지입니다. 첫째, .nav-links a:hover 가 이미 var(--accent) 라(index.html:387-389) 활성과
   호버가 구분되지 않습니다. 둘째, --accent #F2112C 는 이 페이지의 near-black 바탕에서 4.25:1
   이고, 링크 글자는 0.85rem(13.6px)이라 WCAG 1.4.3 의 4.5:1 을 넘지 못합니다. 그래서 글자는
   흰색으로 올려 대비를 확보하고, 빨강은 밑줄이라는 비텍스트 요소로만 씁니다. 색 하나에만
   기대지 않으므로 1.4.1 도 함께 만족합니다.

   ADDITIVE. 이 파일과 js/section-nav.js 의 로드 태그 두 줄을 빼면 원래대로 돌아갑니다.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 현재 섹션 ──────────────────────────────────────────────────────────────────────────────── */
.nav-links a {
    position: relative;
    transition: color 200ms ease;
}

.nav-links a[aria-current="true"] {
    color: #fff;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent, #F2112C);
    box-shadow: 0 0 8px rgba(242, 17, 44, 0.55);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

.nav-links a[aria-current="true"]::after {
    transform: scaleX(1);
}

/* 키보드 포커스 표시가 이 페이지의 링크에는 없었다. 함께 준다. */
.nav-links a:focus-visible {
    outline: 2px solid var(--accent, #F2112C);
    outline-offset: 4px;
    border-radius: 2px;
}

/* ── 스크롤 진행 바 ─────────────────────────────────────────────────────────────────────────
   헤더 아래쪽 경계선 자리에 얹습니다. header 는 border-bottom 1px 을 이미 갖고 있으므로
   그 위에 2px 을 겹쳐 두께가 늘지 않게 합니다. 글자가 아니라 그래픽이라 대비 기준이 다르고,
   진행 정도만 전하므로 정보가 색에만 실리지도 않습니다. */
.cp-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    z-index: 1001;
    pointer-events: none;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg,
            rgba(242, 17, 44, 0.65) 0%,
            var(--accent, #F2112C) 60%,
            #ff5a6e 100%);
    will-change: transform;
}

/* 헤더 높이는 화면 폭에 따라 달라진다(모바일에서는 내비게이션이 여러 줄로 접힌다). js 가
   실측해서 --cp-header-h 에 넣어 준다. */
.cp-progress {
    top: calc(var(--cp-header-h, 64px) - 2px);
}

/* ── 앵커 착지 위치 ──────────────────────────────────────────────────────────────────────────
   헤더가 fixed 라 #music 같은 앵커로 뛰면 섹션 머리가 헤더 뒤에 가려진다. 실측한 헤더 높이만큼
   내려 앉게 한다. 이 규칙은 목차와 무관하게 그 자체로 고쳐야 할 것이었다. */
#about,
#music,
#mixsets,
#gigs,
#onair,
#gallery,
#socials,
#presskit {
    scroll-margin-top: calc(var(--cp-header-h, 64px) + 14px);
}

@media (prefers-reduced-motion: reduce) {

    .nav-links a,
    .nav-links a::after,
    .cp-progress {
        transition: none;
    }
}

@media (prefers-contrast: more) {
    .nav-links a[aria-current="true"] {
        text-decoration: underline;
        text-underline-offset: 5px;
    }
}

/* Open chrome: persistent navigation and contacts without enclosing capsules. */
:root { --cp-footer-space: 108px; }
#sticky-player, #sticky-player.minimized {
    bottom: var(--cp-player-bottom, calc(var(--cp-footer-space) + 10px));
}
body { padding-bottom: calc(var(--cp-footer-space) + env(safe-area-inset-bottom, 0px)); }
body > header {
    top: 0; left: 0; width: 100%;
    padding: calc(10px + env(safe-area-inset-top, 0px)) max(24px, calc((100% - 1280px) / 2)) 10px;
    gap: 24px; border: 0; border-radius: 0; box-shadow: none;
    background: linear-gradient(180deg, rgba(16,16,19,.92), rgba(16,16,19,.66) 70%, rgba(16,16,19,0));
    -webkit-backdrop-filter: none; backdrop-filter: none;
    text-shadow: 0 1px 8px #000;
}
body > header .logo-group { flex-shrink: 0; min-height: 24px; }
/* Quiet navigation signature; the original red hero mark stays untouched. */
body > header .logo-img {
    height: 20px;
    filter: brightness(0) invert(1);
    opacity: .88;
}
body > header .site-identity { display: none; }
body > header .nav-links {
    display: flex; flex-wrap: nowrap; gap: 2px; justify-content: flex-end;
    min-width: 0; overflow: visible;
}
body > header .nav-links a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; margin: 0; padding: 0 10px;
    font-size: .75rem; letter-spacing: .06em; color: #dedee5;
    border-radius: 0; white-space: nowrap;
}
body > header .nav-links a[aria-current="true"] { color: #fff; background: transparent; }
body > header .nav-links a::after {
    height: 1px; bottom: 4px; left: 10px; right: 10px;
    border-radius: 0; box-shadow: none;
}
body > header .nav-links a:focus-visible,
body > footer a:focus-visible {
    outline: 2px solid #fff; outline-offset: -2px; border-radius: 0;
}
.cp-progress { top: 0; }
body > footer {
    position: fixed; bottom: 0; left: 0; width: 100%; height: auto; min-height: 0;
    padding: 8px 12px calc(5px + env(safe-area-inset-bottom, 0px)); gap: 0;
    border: 0; border-radius: 0; box-shadow: none; z-index: 1000;
    background: linear-gradient(0deg, rgba(16,16,19,.94), rgba(16,16,19,.76) 70%, rgba(16,16,19,0));
    -webkit-backdrop-filter: none; backdrop-filter: none;
    text-shadow: 0 1px 8px #000;
}
/* Blur only the slim contact strip, with a softly fading upper edge. */
body > footer { isolation: isolate; }
body > footer::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(transparent, #000 35%);
    mask-image: linear-gradient(transparent, #000 35%);
}
body > footer .social-icons { gap: 10px; margin: 0; }
body > footer .social-icons a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin: 0; border-radius: 0;
    color: #dedee5; transform: none; filter: none; transition: color 160ms ease;
}
body > footer .social-icons svg { width: 19px; height: 19px; }
body > footer .footer-contact {
    display: flex; justify-content: center; gap: 24px; margin: 0;
    font-size: .6875rem; line-height: 1.4; letter-spacing: 0; color: #ededf2;
}
body > footer .footer-email {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 30px; gap: 6px; white-space: nowrap; border-radius: 0;
}
body > footer .footer-email-label { font-size: .5rem; letter-spacing: .1em; color: #bdbdc8; }
body > footer .footer-copyright { margin: 0; font-size: .5625rem; color: #aaaab5; line-height: 1.4; }
.hero .cp-hero-toggle {
    bottom: calc(var(--cp-footer-space) + 12px + env(safe-area-inset-bottom, 0px)); border-radius: 0;
}
@media (max-width: 1100px) {
    body > header {
        flex-direction: column;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 6px; gap: 4px;
    }
    body > header .logo-group { min-height: 19px; }
    body > header .logo-img { height: 16px; }
    body > header .nav-links { display: grid; grid-template-columns: repeat(8, 1fr); width: min(760px, 100%); }
    body > header .nav-links a { min-height: 30px; padding: 0 2px; font-size: .65625rem; }
    body > header .nav-links a::after { left: 18%; right: 18%; bottom: 3px; }
}
@media (max-width: 600px) {
    body > header { padding-top: calc(6px + env(safe-area-inset-top, 0px)); gap: 2px; }
    body > header .logo-group { min-height: 24px; }
    body > header .logo-img { height: 14px; }
    body > header .nav-links { grid-template-columns: repeat(4, 1fr); width: min(420px, 100%); }
    body > header .nav-links a { min-height: 28px; }
    body > footer .social-icons { gap: 6px; }
    body > footer .footer-contact {
        display: grid; grid-template-columns: repeat(2, 1fr);
        width: min(360px, 100%); align-self: center; gap: 0;
    }
    body > footer .footer-email { flex-direction: column; min-height: 36px; gap: 0; }
    body > footer .footer-email + .footer-email { border-left: 1px solid rgba(255,255,255,.15); }
    body > footer .footer-copyright { font-size: .5rem; }
}
/* Keep the existing split CTA inside very narrow phones. */
@media (max-width: 360px) {
    .hero-btn.split-style .btn-icon-box { padding-inline: 12px; }
    .hero-btn.split-style .btn-text-box { min-width: 0; padding-inline: 10px; font-size: .6875rem; letter-spacing: 1px; }
}
@media (hover: hover) and (pointer: fine) {
    body > header .nav-links a:hover, body > footer .footer-email:hover { color: #fff; }
    body > footer .social-icons a:hover { color: #ff536b; transform: none; filter: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    body > header, body > footer { background: #171719; }
    body > footer::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    body > footer .social-icons a { transition: none; }
}

/* 2026-09-26: once the page is scrolled the header is a solid bar. The gradient above fades to 0,
   so page text showed through behind the menu (owner screenshots, phone and PC; on phones the menu
   wraps to extra rows that sit right in the transparent band). At the top of the page the gradient
   stays, over the hero. `cp-scrolled` is set by js/section-nav.js paintProgress(). */
html.cp-scrolled body > header {
    background: #101013;
    box-shadow: 0 10px 18px -8px rgba(16,16,19,.85);
}