@font-face {
    font-family: "Chiller";
    src: url("../fonts/chiller.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
:root { --green: #226900; }
* { box-sizing: border-box; }
html { min-height: 100%; background: #000; }
body {
    min-height: 100vh; margin: 0; padding: 24px; background: #000;
    color: var(--green); font-family: "Chiller", fantasy; text-align: center;
}
a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
a:visited { color: var(--green); }
a:hover, a:focus-visible { color: #8cff45; text-shadow: 0 0 7px var(--green); }
.site-frame {
    position: relative; width: min(100%, 1100px); min-height: calc(100vh - 48px);
    margin: 0 auto; padding: 0 28px 24px; border: 2px solid var(--green);
    background-color: #030303; background-image: url("../images/background.jpeg");
    background-position: center top; background-size: cover; background-repeat: no-repeat;
    box-shadow: 0 0 12px #102f00;
}
.site-header { position: relative; z-index: 1; margin: 0 auto 24px; }
.logo-link { display: block; width: min(78%, 620px); margin: -18px auto 0; }
.band-logo { display: block; width: 100%; height: auto; margin: 0 auto; }
.domain {
    margin: -85px 0 20px; font-size: clamp(1.5rem, 3vw, 2.3rem);
    letter-spacing: 2px; overflow-wrap: anywhere; text-shadow: 0 0 5px #102f00;
}
.home-layout { width: 100%; max-width: 850px; margin: 0 auto; }
.home-main { width: 100%; max-width: 620px; margin: 0 auto; }
.artwork-stack {
    position: relative;
    width: min(100%, 420px);
    margin: 0 auto 112px;
}
.album-art {
    display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    border: 1px solid var(--green); background: #000;
}
.artwork-title {
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: -200px;
    width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: bottom;
    transform: scale(1.15);
    pointer-events: none;
}

.home-nav {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    margin: 12px auto 30px; padding: 15px 10px; border-top: 1px solid var(--green);
    border-bottom: 1px solid var(--green); background: rgba(0,0,0,.78);
}
.home-nav a { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.link-panel, .content-panel {
    margin: 24px auto 0; padding: 18px 14px; border: 1px solid var(--green);
    background: rgba(0,0,0,.84);
}
h1, h2 { margin: 0 0 15px; color: var(--green); font-weight: normal; text-shadow: 0 0 5px #102f00; }
h1 { font-size: clamp(2.2rem, 4vw, 3rem); }
h2 { font-size: clamp(2rem, 3.5vw, 2.6rem); }
.vertical-link-list { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.vertical-link-list a { font-size: clamp(1.4rem, 2.7vw, 1.8rem); overflow-wrap: anywhere; }
.site-footer { max-width: 850px; margin: 32px auto 0; padding-top: 12px; border-top: 1px dashed var(--green); font-size: 1.2rem; }
.subpage-layout {
    display: grid; grid-template-columns: 155px minmax(0, 1fr); align-items: start;
    gap: 24px; max-width: 950px; margin: 0 auto;
}
.side-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    padding: 14px 10px; border: 1px solid var(--green); background: rgba(0,0,0,.88);
}
.side-nav a { font-size: 1.65rem; }
.content-panel { min-height: 260px; margin: 0; padding: 24px 18px; background: rgba(0,0,0,.88); }
.coming-soon { margin: 35px 0; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.entry-page { display: flex; align-items: center; justify-content: center; padding: 20px; }
.entry-content { width: min(100%, 900px); margin: 0 auto; }
.entry-video { display: block; width: 100%; max-height: 72vh; margin: 0 auto 22px; border: 1px solid var(--green); background: #000; }
.enter-link { display: inline-block; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: bold; letter-spacing: 2px; }
.entry-note { font-family: Arial, sans-serif; font-size: .8rem; color: #777; }
@media (max-width: 700px) {
    body { padding: 10px; }
    .site-frame { min-height: calc(100vh - 20px); padding: 0 12px 18px; }
    .logo-link { width: 92%; margin-top: -8px; }
    .domain { margin-top: 0; letter-spacing: 1px; }
    .artwork-stack { width: min(100%, 360px); }
    .subpage-layout { grid-template-columns: 1fr; gap: 18px; }
    .side-nav { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
    .side-nav a { font-size: 1.5rem; }
    .content-panel { min-height: 220px; }
}

.entry-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.entry-content {
    width: 100%;
    text-align: center;
}

.entry-logo {
    display: block;
    width: min(55%, 450px);
    height: auto;
    margin: 0 auto;
}

.entry-note {
    margin-top: 12px;
    color: var(--green);
    font-family: "Chiller", fantasy;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: 2px;
}