/* ============================================================
   Kirbi Music - theme
   Dark charcoal + teal (teal pulled from the logo)
   ============================================================ */
:root{
    --bg:        #14181b;
    --bg-alt:    #1b2125;
    --card:      #1f272c;
    --card-2:    #242d33;
    --line:      #2f3a41;
    --text:      #e9edef;
    --muted:     #9fb0b8;
    --teal:      #3ad2d7;
    --teal-2:    #2bb6bb;
    --teal-deep: #124b4e;
    --shadow:    0 18px 40px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
body{
    background:var(--bg);
    color:var(--text);
    font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-weight:300;
    line-height:1.7;
    overflow-x:hidden;
}
a{ color:var(--teal); text-decoration:none; }
a:hover{ color:var(--teal-2); }
.km-teal{ color:var(--teal); }
.km-teal-soft{ color:var(--teal); font-weight:400; }

/* ---------- Nav ---------- */
.km-nav{
    background:rgba(16,20,23,.78);
    backdrop-filter:blur(10px);
    border-bottom:1px solid transparent;
    transition:background .3s ease, border-color .3s ease, padding .3s ease;
    padding-top:.65rem; padding-bottom:.65rem;
}
.km-nav.scrolled{
    background:rgba(13,16,19,.96);
    border-bottom-color:var(--line);
}
.km-logo{ transition:transform .3s ease; }
.km-logo:hover{ transform:scale(1.05); }
.km-nav .nav-link{
    color:var(--text);
    font-weight:400;
    letter-spacing:.02em;
    padding:.4rem 1rem;
    position:relative;
}
.km-nav .nav-link::after{
    content:""; position:absolute; left:1rem; right:1rem; bottom:.15rem;
    height:2px; background:var(--teal); transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
}
.km-nav .nav-link:hover::after,
.km-nav .nav-link.active::after{ transform:scaleX(1); }
.km-nav .nav-link:hover{ color:var(--teal); }
.km-social-sm{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
    color:var(--muted); border:1px solid var(--line);
    transition:.2s ease;
}
.km-social-sm:hover{ background:var(--teal); border-color:var(--teal); color:#06181a; }

/* ---------- Buttons ---------- */
.btn-teal{
    background:var(--teal); color:#06181a; border:none; font-weight:600;
    letter-spacing:.02em; padding:.6rem 1.5rem; border-radius:40px;
    transition:.2s ease;
}
.btn-teal:hover{ background:var(--teal-2); color:#06181a; transform:translateY(-2px); box-shadow:0 10px 24px rgba(58,210,215,.28); }

/* ---------- Hero ---------- */
.km-hero{
    position:relative;
    padding:9rem 0 5rem;
    background:
        radial-gradient(1100px 600px at 78% 20%, rgba(58,210,215,.14), transparent 60%),
        radial-gradient(800px 500px at 15% 90%, rgba(18,75,78,.35), transparent 60%),
        var(--bg);
    overflow:hidden;
}
.km-eyebrow{
    color:var(--teal); text-transform:uppercase; letter-spacing:.22em;
    font-size:.8rem; font-weight:600; margin-bottom:.5rem;
}
.km-hero-title{
    font-weight:700; font-size:clamp(2.4rem,5vw,3.8rem); line-height:1.08;
    margin-bottom:0;
}
.km-hero-news{ display:flex; flex-direction:column; gap:.75rem; }
.km-hero-news-item{
    display:flex; align-items:center; gap:1rem;
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:.7rem .9rem; color:var(--text); transition:.2s ease;
}
.km-hero-news-item:hover{
    border-color:var(--teal); transform:translateX(4px); color:var(--text);
    box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.km-hero-news-thumb{
    flex:0 0 62px; height:62px; border-radius:10px;
    background-size:cover; background-position:center;
}
.km-hero-news-body{ display:flex; flex-direction:column; min-width:0; }
.km-source{
    color:var(--teal); font-size:.72rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.08em;
}
.km-hero-news-head{ font-weight:400; font-size:.98rem; line-height:1.35; }
.km-hero-news-arrow{ margin-left:auto; color:var(--muted); transition:.2s ease; }
.km-hero-news-item:hover .km-hero-news-arrow{ color:var(--teal); }

.km-hero-photo-wrap{
    position:relative; display:inline-block;
}
.km-hero-photo-wrap::after{ /* soft teal glow pooled beneath the cut-out */
    content:""; position:absolute; left:50%; bottom:2%; transform:translateX(-50%);
    width:70%; height:60px; border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(58,210,215,.35), transparent 70%);
    filter:blur(6px); z-index:0;
}
.km-hero-photo{
    position:relative; z-index:1;
    max-width:100%; max-height:560px;
    /* edge glow: soft light rim lifts the black lace & hair off the dark bg,
       teal halo keeps it on-brand, then a grounding drop shadow */
    filter:
        drop-shadow(0 0 5px rgba(233,244,246,.42))
        drop-shadow(0 0 14px rgba(120,225,229,.34))
        drop-shadow(0 0 34px rgba(58,210,215,.20))
        drop-shadow(0 20px 30px rgba(0,0,0,.5));
}

/* ---------- Sections ---------- */
.km-section{ padding:5.5rem 0; }
.km-section-alt{ background:var(--bg-alt); }
.km-section-title{
    font-weight:700; font-size:clamp(1.9rem,3.5vw,2.6rem); margin-bottom:1rem;
    position:relative; display:inline-block;
}
.km-section-title::after{
    content:""; display:block; width:56px; height:3px; background:var(--teal);
    border-radius:3px; margin-top:.6rem;
}
.text-center .km-section-title::after{ margin-left:auto; margin-right:auto; }

/* ---------- About ---------- */
.km-about-card{
    background:linear-gradient(160deg,var(--card),var(--card-2));
    border:1px solid var(--line); border-radius:18px; padding:2rem;
    box-shadow:var(--shadow);
}
.km-about-icon{ font-size:2rem; color:var(--teal); margin-bottom:1rem; }
.km-facts{ list-style:none; margin:0; padding:0; }
.km-facts li{ padding:.6rem 0; border-bottom:1px solid var(--line); }
.km-facts li:last-child{ border-bottom:none; }
.km-facts li span{
    display:block; color:var(--muted); font-size:.72rem;
    text-transform:uppercase; letter-spacing:.1em; margin-bottom:.1rem;
}

/* ---------- Social row ---------- */
.km-social{ display:flex; flex-wrap:wrap; gap:.6rem; }
.km-social a{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%;
    background:var(--card); border:1px solid var(--line);
    color:var(--text); font-size:1.05rem; transition:.2s ease;
}
.km-social a:hover{
    background:var(--teal); border-color:var(--teal); color:#06181a;
    transform:translateY(-3px);
}

/* ---------- News OpenGraph cards ---------- */
.km-og-card{
    display:flex; flex-direction:column; height:100%;
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    overflow:hidden; color:var(--text); transition:.25s ease;
}
.km-og-card:hover{
    transform:translateY(-6px); border-color:var(--teal);
    box-shadow:var(--shadow); color:var(--text);
}
.km-og-media{
    display:block; width:100%; aspect-ratio:16/9;
    background-size:cover; background-position:center; background-color:#0d1113;
}
.km-og-body{ padding:1.25rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; }
.km-og-meta{ color:var(--teal); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.km-og-title{ font-weight:600; font-size:1.12rem; line-height:1.3; }
.km-og-desc{ color:var(--muted); font-size:.92rem; }
.km-og-link{ color:var(--teal); font-weight:600; font-size:.9rem; margin-top:auto; }
.km-og-card:hover .km-og-link{ text-decoration:underline; }

/* ---------- Tour ---------- */
.km-coming-soon{
    font-size:clamp(1.8rem,4vw,2.6rem); font-weight:700; color:var(--teal);
    margin:1.5rem 0 .5rem;
}
.km-coming-soon i{ margin-right:.4rem; }
.km-tour-list{ max-width:720px; text-align:left; }
.km-tour-row{
    display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:1rem 1.4rem; margin-bottom:1rem;
}
.km-tour-date{ color:var(--teal); font-weight:600; min-width:130px; }
.km-tour-venue{ display:flex; flex-direction:column; }
.km-tour-venue span{ color:var(--muted); font-size:.9rem; }
.km-tour-cta{ margin-left:auto; }

/* ---------- Contact ---------- */
.km-form .form-label{ color:var(--muted); font-size:.85rem; letter-spacing:.03em; }
.km-form .form-control{
    background:var(--card); border:1px solid var(--line); color:var(--text);
    border-radius:10px; padding:.7rem .9rem;
}
.km-form .form-control:focus{
    background:var(--card-2); border-color:var(--teal); color:var(--text);
    box-shadow:0 0 0 .2rem rgba(58,210,215,.2);
}
.km-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.km-alert-success{ background:rgba(58,210,215,.12); border:1px solid var(--teal); color:var(--teal); border-radius:12px; }
.km-alert-error{ background:rgba(220,80,80,.12); border:1px solid #d9534f; color:#f2a6a3; border-radius:12px; }

/* ---------- Footer ---------- */
.km-footer{ background:#0f1215; padding:3rem 0 1.75rem; border-top:1px solid var(--line); }
.km-ablaze{ height:70px; width:auto; border-radius:50%; }
.km-manage{ color:var(--muted); font-size:.82rem; margin-top:.6rem; margin-bottom:0; }
.km-footer-nav{ list-style:none; display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; padding:0; margin:0; }
.km-footer-nav a{ color:var(--text); font-size:.92rem; }
.km-footer-nav a:hover{ color:var(--teal); }
.km-social-footer a{ width:40px; height:40px; font-size:.95rem; }
.km-footer-rule{ border-color:var(--line); margin:2rem 0 1.25rem; }
.km-copyright{ color:var(--muted); font-size:.85rem; letter-spacing:.03em; }

/* ---------- Back to top ---------- */
.km-top{
    position:fixed; right:22px; bottom:22px; z-index:1030;
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:var(--teal); color:#06181a; font-size:1rem;
    opacity:0; pointer-events:none; transform:translateY(12px);
    transition:.25s ease; box-shadow:0 8px 20px rgba(0,0,0,.4);
}
.km-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.km-top:hover{ background:var(--teal-2); color:#06181a; }

/* ---------- Responsive ---------- */
@media (max-width:991px){
    .km-hero{ padding:7rem 0 3.5rem; text-align:center; }
    .km-hero-news{ text-align:left; }
    .km-nav{ background:rgba(13,16,19,.96); }
    .km-hero-photo{ max-height:440px; }
}