@charset "UTF-8";

/* ========================== */
/* 1. 全局字体与基础隐藏元素 */
/* ========================== */
@import url('https://fonts.googleapis.com/css2?family=Manufacturing+Consent&family=Alumni+Sans+Pinstripe:ital@0;1&family=Bebas+Neue&family=Noto+Serif+TC:wght@400&display=swap');

#font-loader {
    font-family: "Manufacturing Consent", system-ui;
    font-weight: 400;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

/* ========================== */
/* 2. CHEAPER BROTHERS NAV */
/* ========================== */
:root {
    --nav-bg: #ffffff; 
    --nav-text: #000000;
    --primary-font: "Alumni Sans Pinstripe", sans-serif;
    --secondary-font: "Bebas Neue", sans-serif;
    --nav-transition: 0.5s;
    --nav-delay: 0.08s;
}

.nav-wrapper {
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: 40px; 
}

.nav-trigger {
    width: 26px; height: 26px;
    background-color: transparent; border-radius: 4px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease;
}

#fuzzy-nav-icon { width: 100%; height: 100%; }

.menu-list {
    margin-top: 8px; display: flex; flex-direction: column; gap: 3px; width: 210px; pointer-events: none;
}

.menu-bar {
    background-color: var(--nav-bg); border-radius: 3px; padding: 1px 12px; color: var(--nav-text);
    text-decoration: none; cursor: pointer; transform: translateY(-15px); opacity: 0;
    transition: all var(--nav-transition) cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden; display: flex; flex-direction: column; justify-content: center;
}

.menu-bar:nth-child(1) { transition-delay: calc(var(--nav-delay) * 3); }
.menu-bar:nth-child(2) { transition-delay: calc(var(--nav-delay) * 2); }
.menu-bar:nth-child(3) { transition-delay: calc(var(--nav-delay) * 1); }
.menu-bar:nth-child(4) { transition-delay: 0s; }

.nav-wrapper.active .menu-list { pointer-events: auto; }
.nav-wrapper.active .menu-bar { transform: translateY(0); opacity: 1; }

.nav-wrapper.active .menu-bar:nth-child(1) { transition-delay: 0s; }
.nav-wrapper.active .menu-bar:nth-child(2) { transition-delay: var(--nav-delay); }
.nav-wrapper.active .menu-bar:nth-child(3) { transition-delay: calc(var(--nav-delay) * 2); }
.nav-wrapper.active .menu-bar:nth-child(4) { transition-delay: calc(var(--nav-delay) * 3); }

.bar-title {
    font-family: var(--primary-font); font-size: 2.6rem; font-weight: 400;
    letter-spacing: 0.5px; text-transform: uppercase; display: flex; align-items: center; line-height: 0.8; margin: 0;
    white-space: nowrap;
}

.dot { width: 8px; height: 8px; background-color: var(--nav-text); border-radius: 50%; margin-right: 10px; flex-shrink: 0; }

.sub-content { max-height: 0; opacity: 0; transition: all 0.4s ease; padding-left: 18px; }
.menu-bar.expanded .sub-content { max-height: 200px; opacity: 1; margin-top: 10px; padding-bottom: 12px; }

.sub-list { list-style: none; padding: 0; margin: 0; }
.sub-item { margin: 6px 0; }
.sub-item a {
    text-decoration: none; color: var(--nav-text); font-family: var(--secondary-font);
    font-size: 1.3rem; display: block; opacity: 0.8; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; transition: opacity 0.2s;
}
.sub-item a::before { content: "└ "; font-family: sans-serif; margin-right: 6px; font-size: 0.8rem; vertical-align: middle; }
.sub-item a:hover { opacity: 1; }

/* ========================== */
/* 3. 全局页脚 Footer */
/* ========================== */
.global-footer {
    font-family: "Noto Serif TC", serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #ffffff;
    opacity: 0.8;
    letter-spacing: 1px;
    text-align: center;
    width: 100%;
    pointer-events: auto;
    padding-bottom: 30px; 
}
.global-footer a { color: inherit; text-decoration: none; transition: opacity 0.3s; }
.global-footer a:hover { opacity: 1; }