@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@400;700&family=Noto+Sans+JP:wght@400;700;900&family=Hina+Mincho&display=swap');

html { background: #000; scroll-behavior: smooth; }

body {
    background: #000;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Kaisei Opti', 'Noto Sans JP', serif;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
    padding: 0;
}

h1, h2, h3 { font-weight: 100; letter-spacing: 1px; }
h2, h3 { margin: 10px 0; }
h2 { font-weight: 900; }

.subheading {
    font-family: 'Kaisei Opti', serif;
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: left;
    margin-bottom: 20px;
}

a { text-decoration: none; color: #D69A83; text-shadow: none; }
a:hover { text-shadow: -1px 1px 0px #fff; }

#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    height: 100vh;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    transform: rotate(-90deg);
    white-space: nowrap;
}
#menu ul li {
    display: inline-block;
    padding: 0 12px;
}
#menu ul li a {
    color: #934C89;
    text-shadow: none;
    font-family: 'Hina Mincho', 'Kaisei Opti', serif;
    font-size: 22px;
    letter-spacing: 4px;
    display: inline-block;
    transform: scaleX(0.85) scaleY(1.15);
    transform-origin: left bottom;
}
#menu ul li a:hover {
    color: #D69A83;
    text-shadow: none;
}
#menu ul li a.active {
    color: #D69A83;
}

#main {
    padding: 30px 30px 30px 70px;
    margin: 0 auto;
    max-width: 800px;
    width: calc(90vw - 60px);
    text-align: center;
}

.logo {
    max-width: 350px;
    width: 60%;
    display: block;
    margin: 0 0 30px 0;
    filter: invert(1);
}

.contact { font-size: 12px; color: #666; letter-spacing: 0.05em; }

.artist-photo {
    max-width: 580px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.item {
    overflow: hidden;
    margin: 30px 0;
    text-align: center;
    scroll-margin-top: 30px;
}
.item img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.item iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    margin: 0 auto;
}
.item p { margin: 8px 0; }

.live-entry {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 30px;
    margin-bottom: 10px;
    text-align: center;
}
.live-entry h3 {
    font-family: 'Kaisei Opti', serif;
    font-weight: 700;
    font-size: 1em;
    margin: 10px 0 5px;
}
.live-entry h3 a { color: #D69A83; }
.live-entry p { color: #ccc; font-size: 13px; }
.live-entry img { max-width: 580px; margin: 0 auto; }

.past-badge {
    display: inline-block;
    background: #D69A83;
    color: #000;
    font-size: 10px;
    padding: 1px 6px;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 5px;
    text-shadow: none;
}

.loading-spinner {
    margin: 40px auto; width: 30px; height: 30px;
    border: 3px solid #333; border-top: 3px solid #D69A83;
    border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.page-btn {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #555; background: transparent;
    color: #fff; font-family: inherit; font-size: 12px;
    cursor: pointer; transition: 0.3s;
}
.page-btn:hover { border-color: #D69A83; color: #D69A83; }
.page-btn.active { background: #D69A83; color: #000; border-color: #D69A83; }

.release-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 20px 15px;
    margin-top: 15px;
}
.release-item { cursor: pointer; text-align: center; }
.release-item:hover { opacity: 0.7; }
.release-item img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover;
    display: block; margin: 0 auto 6px;
}
.release-title { font-size: 11px; font-weight: 700; line-height: 1.4; margin: 0; color: #fff; }
.release-meta { font-size: 10px; color: #999; margin: 0; }

a.store-item {
    display: block; position: relative;
    max-width: 300px; margin: 15px auto;
}
a.store-item img { width: 100%; height: auto; display: block; }
a.store-item:hover { opacity: 0.8; }
.sold-out-badge {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: 0.3s;
}
.sold-out-badge span {
    color: #fff; font-size: 14px; font-weight: 700;
    letter-spacing: 0.15em; border: 2px solid #fff; padding: 8px 16px;
}
a.store-item.is-soldout .sold-out-badge { opacity: 1; visibility: visible; }

.footer { text-align: center; padding: 40px 0; font-size: 11px; color: #444; }

.modal {
    display: none; position: fixed; z-index: 2000;
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); overflow-y: auto;
    opacity: 0; transition: opacity 0.3s;
}
.modal.show { display: block; opacity: 1; }
.modal-content {
    position: relative; background: #111;
    margin: 5% auto; width: 90%; max-width: 800px;
}
.close-btn {
    position: absolute; top: 12px; right: 20px;
    font-size: 32px; color: #666; cursor: pointer; z-index: 10; line-height: 1;
}
.close-btn:hover { color: #fff; }
.modal-body { display: flex; flex-wrap: wrap; }
.modal-img-box {
    flex: 1 1 350px; padding: 30px;
    display: flex; align-items: center; justify-content: center; background: #0a0a0a;
}
.modal-img-box img { width: 100%; max-width: 350px; height: auto; }
.modal-info-box { flex: 1 1 350px; padding: 40px 30px; text-transform: none; }
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #fff; font-family: 'Kaisei Opti', serif; }
.modal-artist { font-size: 13px; color: #888; }
.modal-label { font-size: 12px; color: #888; margin-bottom: 12px; }
.modal-credits { font-size: 12px; color: #aaa; margin-bottom: 25px; line-height: 1.7; white-space: pre-wrap; text-transform: none; }
.text-bold { font-weight: 700; }
.modal-tracklist h4 { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: #fff; }
.modal-tracklist ul { list-style: none; padding: 0; margin-bottom: 30px; font-size: 13px; line-height: 2; color: #ccc; text-transform: none; }
.modal-links { display: flex; gap: 15px; align-items: center; justify-content: center; }
.modal-icon { display: block; filter: grayscale(100%) brightness(2); opacity: 0.4; transition: 0.3s; }
.modal-icon:hover { filter: grayscale(0%); opacity: 1; }
.modal-icon img { display: block; height: 28px; width: auto; }

.image-zoom-modal {
    display: none; position: fixed; z-index: 3000;
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); justify-content: center; align-items: center;
}
.image-zoom-modal.show { display: flex; }
.image-zoom-content { max-width: 95%; max-height: 95%; object-fit: contain; }
.image-zoom-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 36px; cursor: pointer; z-index: 3001; }

@media (max-width: 600px) {
    #menu { display: none; }
    #main { padding: 20px 15px; }
    .logo { max-width: 220px; }
    .subheading { font-size: 1.5em; }
    .release-grid { grid-template-columns: repeat(2, 1fr); }
    .live-entry img { max-width: 100%; }
    .artist-photo { max-width: 100%; }
    .modal-content { margin: 0; width: 100%; height: 100%; max-width: none; }
    .modal-img-box { padding: 20px; flex: none; width: 100%; }
    .modal-info-box { padding: 20px 15px 60px; flex: none; width: 100%; }
}