/*
═══════════════════════════════════════════════════════════════
   COMPONENTS — 按鈕、連結、卡片、dusk-bar
═══════════════════════════════════════════════════════════════
*/

/* ─── 按鈕 ─────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-m);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 14px 28px;
    cursor: pointer;
    border: none;
    transition: all .25s ease;
    background: none;
    color: inherit;
    text-decoration: none;
}

.btn.pri {
    background: var(--plum);
    color: var(--bone);
}
.btn.pri:hover {
    background: var(--plum-hi);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(110, 70, 89, calc(.25 * var(--glow-strength)));
}

.btn.sec {
    border: 1px solid var(--twilight);
    color: var(--twilight);
}
.btn.sec:hover {
    background: var(--twilight);
    color: var(--bone);
}

.btn.ghost {
    border: 1px solid var(--linen-2);
    color: var(--twilight);
}
.btn.ghost:hover {
    border-color: var(--plum);
    color: var(--plum);
}


/* ─── 小型連結（含底線箭頭風格）─────────────────── */
.lk {
    font-family: var(--ff-m);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--twilight);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--plum);
    transition: color .2s, gap .2s;
    text-decoration: none;
}
.lk:hover { color: var(--plum); gap: 12px; }


/* ─── Dusk Bar：標誌性裝飾線 ─────────────────── */
.dusk-bar {
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg,
        var(--bone)     0%,
        var(--linen-2)  18%,
        var(--mist)     38%,
        var(--bronze)   58%,
        var(--plum)     78%,
        var(--twilight) 100%);
}
.dusk-bar.thin { height: 1px; }
.dusk-bar.invert {
    background: linear-gradient(90deg,
        var(--twilight) 0%,
        var(--plum)     22%,
        var(--bronze)   42%,
        var(--mist)     62%,
        var(--linen-2)  82%,
        var(--bone)     100%);
}


/* ─── Moon Glow：核心視覺特效 ─────────────────── */
.moon-glow {
    transition:
        box-shadow var(--t-hover) var(--ease-moon),
        transform var(--t-hover) var(--ease-moon);
    box-shadow:
        inset 0 0 0 1px rgba(168,181,201, calc(.08 * var(--glow-strength))),
        0 0 0 1px rgba(168,181,201, calc(.05 * var(--glow-strength))),
        0 0 38px rgba(168,181,201, calc(.18 * var(--glow-strength))),
        0 0 64px rgba(138,122,170, calc(.08 * var(--glow-strength))),
        0 8px 24px rgba(0,0,0, calc(.22 * var(--glow-strength)));
}
.moon-glow:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 1px rgba(168,181,201, calc(.16 * var(--glow-strength))),
        0 0 0 1px rgba(168,181,201, calc(.10 * var(--glow-strength))),
        0 0 56px rgba(168,181,201, calc(.30 * var(--glow-strength))),
        0 0 96px rgba(138,122,170, calc(.14 * var(--glow-strength))),
        0 14px 36px rgba(0,0,0, calc(.32 * var(--glow-strength)));
}


/* ─── 搜尋表單（內建用）─────────────────── */
.search-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.search-form label { flex: 1; }
.search-form .search-field {
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid var(--linen-2);
    color: var(--twilight);
    font-family: var(--ff-cn);
    font-size: 14px;
}
.search-form .search-submit {
    padding: 12px 20px;
    background: var(--plum);
    color: var(--bone);
    border: none;
    cursor: pointer;
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}