/* --- Global Fixes --- */
html, body { overflow-x: hidden !important; width: 100% !important; margin: 0 !important; padding: 0 !important; position: relative; }
#wrapper { max-width: 750px; width: 95% !important; margin: 40px auto; overflow: hidden !important; box-sizing: border-box; }
img, table { max-width: 100% !important; box-sizing: border-box !important; }

/* --- Banner Glow-Up (Pure CSS Animation) --- */
@keyframes autoGlow {
    0% { filter: grayscale(100%) contrast(120%); border-color: #222; box-shadow: 0 0 0px rgba(122, 0, 0, 0); }
    100% { filter: grayscale(0%) contrast(120%); border-color: #7a0000; box-shadow: 0 0 25px rgba(122, 0, 0, 0.6); }
}

.banner { 
    width: 100%; height: auto; display: block; margin-bottom: 30px; 
    border: 1px solid #222; 
    filter: grayscale(100%) contrast(120%); 
    animation: autoGlow 2s ease forwards;
    animation-delay: 0.5s; /* Waits half a second after loading before glowing */
}

/* --- Fan Gate & Balanced Checkbox --- */
.fan-gate { margin: 20px 0; padding: 20px; border: 1px solid #333; text-align: center; }
.custom-checkbox-container { 
    display: inline-flex; 
    align-items: center; 
    cursor: pointer; 
    font-size: 0.9rem; color: #888; position: relative; 
}
.custom-checkbox-container input { position: absolute; opacity: 0; height: 0; width: 0; margin: 0; pointer-events: none; }
.checkmark { height: 20px; width: 20px; background-color: #000; border: 1px solid #7a0000; margin-right: 12px; transition: 0.3s; flex-shrink: 0; }
.custom-checkbox-container input:checked ~ .checkmark { background-color: #7a0000; box-shadow: 0 0 15px #7a0000; }
.fan-text { display: flex; align-items: center; color: #d3d3d3; }

/* --- Hard-Centered & Tightly Spaced Text --- */
.instruction { 
    font-size: 0.65rem; color: #555; 
    margin: 5px auto 15px auto !important; /* Pulled tight against the text box */
    text-align: center !important; 
    text-transform: uppercase; 
    letter-spacing: 1px; display: block; width: 100%; 
}
.footer { 
    text-align: center !important; 
    font-size: 0.8rem; color: #444; border-top: 1px solid #222; 
    padding-top: 20px; margin-bottom: 40px; letter-spacing: 2px; 
}
.footer p { text-align: center !important; margin: 5px auto; } 

/* --- Gallery Aspect Ratio (Perfect Squares) & Tap/Hover Rules --- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 60px; }
.gallery img { 
    width: 100%; 
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    border: 1px solid #111; 
    filter: grayscale(100%); 
    transition: filter 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; 
}

/* Lights up on tap (mobile) and hover (desktop) */
.gallery img:hover,
.gallery img:active { 
    filter: grayscale(0%); border-color: #7a0000; box-shadow: 0 0 15px rgba(122, 0, 0, 0.5); 
}

/* --- Popup Styling --- */
.popup-overlay { display: none !important; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.95); z-index: 9999; justify-content: center; align-items: center; padding: 10px; box-sizing: border-box; }
.popup-overlay.is-visible { display: flex !important; }
.popup-content { background: #000; padding: 20px; border: 1px solid #333; text-align: center; width: 90%; max-width: 300px; margin: auto; box-sizing: border-box; }
.popup-content h3 { margin-top: 0; font-size: 1.1rem; color: #fff; font-family: 'Times New Roman', serif; text-transform: uppercase; letter-spacing: 2px; }
.popup-content p { font-size: 0.85rem; line-height: 1.4; color: #aaa; margin-bottom: 20px; }
.popup-content button { background: transparent; color: #7a0000; border: 1px solid #7a0000; padding: 8px 25px; cursor: pointer; text-transform: uppercase; font-weight: bold; font-family: 'Courier New', monospace; font-size: 0.8rem; transition: 0.3s; }
.popup-content button:hover { background: #7a0000; color: #fff; }

/* --- Typography & Base Layout --- */
body { background-color: #000000; color: #d3d3d3; font-family: 'Courier New', Courier, monospace; margin: 0; padding: 0; line-height: 1.5; }
h1 { font-family: 'Times New Roman', Times, serif; font-style: italic; color: #ffffff; font-size: 2.8rem; text-transform: uppercase; letter-spacing: 6px; text-align: center; margin: 0 0 10px 0; font-weight: normal; }
h2 { font-family: 'Times New Roman', Times, serif; color: #7a0000; font-size: 1.2rem; letter-spacing: 3px; margin: 40px 0 20px 0; text-transform: uppercase; font-weight: normal; border-bottom: 1px solid #333; padding-bottom: 5px; }
.subtitle { font-family: 'Times New Roman', Times, serif; color: #7a0000; font-size: 1.2rem; letter-spacing: 3px; margin-bottom: 30px; text-align: center; }
.manifesto-box { border: 1px solid #333; padding: 20px; text-align: center; margin: 40px 0; background-color: #050505; }
.poem { text-align: center; color: #888; font-size: 1rem; margin: 40px 0; }
table { width: 100%; border-collapse: collapse; margin-bottom: 50px; table-layout: fixed; }
td { padding: 15px 0; vertical-align: top; border-bottom: 1px solid #222; word-wrap: break-word; }
td.date { width: 30%; color: #7a0000; font-family: 'Times New Roman', Times, serif; font-size: 0.9rem; font-weight: bold; }
.fanclub-box { margin: 40px 0; text-align: center; border: 1px solid #333; padding: 20px; }
.fanclub-box input[type="email"], .fanclub-box textarea { background: #000; color: #fff; border: 1px solid #333; padding: 12px; width: 100%; margin-bottom: 10px; box-sizing: border-box; }
.fanclub-box button { background: #7a0000; color: #fff; border: none; padding: 12px 20px; cursor: pointer; text-transform: uppercase; font-weight: bold; width: 100%; }
@media (max-width: 600px) { h1 { font-size: 2rem; } .gallery { grid-template-columns: 1fr; } }