html {
    overflow-x: clip;
}
body {
    font-family: "Noto Sans TC", system-ui, sans-serif;
    overflow-x: clip;
}
.mobile-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.25s ease-out,
        visibility 0.25s;
}
.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Journal intro modal */
.journal-modal {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.25s ease-out,
        visibility 0.25s;
}
.journal-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.journal-modal-panel {
    transform: scale(0.96) translateY(8px);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.journal-modal.is-open .journal-modal-panel {
    transform: scale(1) translateY(0);
}

.cover {
    background: linear-gradient(160deg, #cdd9ee 0%, #93b1da 100%);
    position: relative;
}
.cover::after {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(28, 64, 131, 0.55);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 8px;
}

.vol-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.vol-scroll::-webkit-scrollbar {
    display: none;
}