@charset "utf-8";

:root,
:root[data-theme="light"] {

    --bg: #f7f9fd;
    --bg-subtle: color-mix(in srgb, var(--bg), black 10%);
    --bg-subtler: color-mix(in srgb, var(--bg), black 20%);
    --bg-strong: color-mix(in srgb, var(--bg), white 10%);
    --bg-stronger: white;

    --text: #2f3236;
    --text-subtle: color-mix(in srgb, var(--text), white 20%);
    --text-subtler: color-mix(in srgb, var(--text), white 40%);
    --text-subtlest: color-mix(in srgb, var(--text), white 60%);
    --text-strong: color-mix(in srgb, var(--text), black 50%);

    --featured: #5ac6e7;

    --post-bg: #fdfeff;

    --border-color: color-mix(in srgb, var(--text), white 70%);
    --font-machine: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --height-header: 56px;
    --heigth-footer: 48px;

    --width-container: 1200px;
    
    --hr-color: hsl(from var(--text) h s l / 0.22);
 

}

@media (prefers-color-scheme: dark) {

    :root,
    :root[data-theme="dark"] {
        --bg: #333536;
        --bg-subtle: color-mix(in srgb, var(--bg), white 10%);
        --bg-subtler: color-mix(in srgb, var(--bg), white 20%);
        --bg-strong: color-mix(in srgb, var(--bg), black 12%);
        --bg-stronger: black;

        --text: #e9eaeb;
        --text-subtle: color-mix(in srgb, var(--text), black 20%);
        --text-subtler: color-mix(in srgb, var(--text), black 40%);
        --text-subtlest: color-mix(in srgb, var(--text), black 60%);
        --text-strong: color-mix(in srgb, var(--text), white 50%);
        --text-stronger: white;
        --post-bg: #404040;

        --border-color: color-mix(in srgb, var(--text), black 70%);
    }


}


html {
    font-size: 16px;
}

body {
    color: var(--text);
    background-color: var(--bg);
    font: 1rem/1.5 system-ui, "-apple-system", "Segoe UI", sans-serif, "Helvetica Neue", Tahoma, Verdana, "Microsoft YaHei", Arial;
    clear: both;
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
    list-style: none;
    text-decoration: none;
    font-family: inherit;
    outline: 0;
}

a:not([role=button]) {
    color: var(--text-strong);
}

a:not([role=button]):hover {
    color: var(--text-stronger);
}


img {
    max-width: 100%;
}

img[src=''] {
    visibility: hidden;
}

h1 {
    font-size: 2.2rem;
}

h2 {
    font-size: 1.9rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1.0rem;
}

small {
    font-size: 0.6rem;
}



/*==========construct=============*/
hr {
    color: var(--hr-color);
    border: none;
    height: 1px;
    background: linear-gradient(to right,
            transparent 0%,
            currentColor 5%,
            currentColor 95%,
            transparent 100%);
    margin-top: 1rem;
    margin-bottom: 1rem;
}



body {
    width: 100%;
}


.container {
    width: min(100%, var(--width-container));
    max-width: 100%;
    overflow-x: hidden;
    
    margin: 0 auto;
    padding-top: calc(var(--height-header) + 2.5rem);


    display: grid;
    grid-template-areas:
        "header header"
        "main main"
        "footer footer";
    grid-template-columns: minmax(0, 1fr) 30%;

    gap: 1rem;

    position: relative;

    header {
        grid-area: header;
    }

    main {
        grid-area: main;
    }

    footer {
        grid-area: footer;
    }

}

body[data-page="index"] .container {

    grid-template-areas:
        "header header"
        "main aside"
        "footer footer";


    aside {

        min-width: 200px;
        grid-area: aside;
        padding-right: 1rem;
    }
}

@media (max-width:768px) {
    body[data-page="index"] .container {
        grid-template-areas:
            "header header"
            "main main"
            "aside aside"
            "footer footer";


        aside {
            width: 100%;
            padding: 1rem;
        }
    }


}

.header {
    --header-shadow: rgba(0, 0, 0, 0.18);
    @media (prefers-color-scheme: dark) {
        --header-shadow: rgba(0, 0, 0, 0.9);
    }
    --header-padding: 1.5rem;

    height: var(--height-header);
    padding: 0 var(--header-padding);
    
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    background-color: var(--bg);
    

    & hr{margin: 0;}


    & .wrap {
        width: min(100%, var(--width-container));
        margin: 0 auto;
        box-shadow: 0 4px 10px -6px var(--header-shadow);
        height: inherit;
        display: flex;
        align-items: center;
        justify-content: space-between;


        padding:0 10px;
        

        & .brand {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;

            & .title {
                font-size: 1.2rem;
                text-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
            }
        }

        & .subtitle {
            font-size: 0.85rem;
            color: var(--text-subtle);
            font-weight: 400;
        }

        & .right-zone {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        & .breadcrumb {
            font-size: 0.8rem;
            color: var(--text-subtle);
        }

        .breadcrumb span:not(:last-child)::after,
        .breadcrumb a:not(:last-child)::after {
            content: " / ";
            margin: 0 4px;
            color: hsl(from var(--text-subtle) h s l / 30%);
        }

        & .logo {
            height: var(--height-header);
            padding: 20px 5px;
            overflow: hidden;


            & img {
                width: auto;
                height: 100%;
                display: block;
                filter: brightness(0.6);

            }

        }

    }

}

@media (max-width: 680px) {
    .header{
        padding:0;

        & .wrap{padding: 0 var(--header-padding);}
        & .wrap .right-zone { display: none; }
        & hr{width: 100vw; }
    } 
}


main {
    padding: 0 1rem;
    min-height: 60vh;
}




footer {
    width:100%;
    text-align: center;
    margin: 0 auto;
    padding: 1rem;

    a,
    p {
        font-size: 12px;
        color: rgb(from var(--text) r g b / 50%)
    }
}

/**--顶部遮罩--*/
.top-mask{
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, var(--bg) 10%, rgba(0, 0, 0, 0));
    position: fixed;
    left:0;
    right: 0;

    z-index: 100;
    pointer-events: none;
}