* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin:0; background:#000 url('../images/blablue.jpg') repeat; color:#fff; font-family:Arial,Helvetica,sans-serif; }
img { max-width:100%; height:auto; }
a { color:inherit; }
.hero { display:grid; grid-template-columns:minmax(120px,270px) minmax(0,1fr) minmax(120px,270px); gap:20px; align-items:center; max-width:1400px; margin:0 auto; padding:18px 20px 10px; text-align:center; }
.tut img { width:270px; }
.hero-center { min-width:0; }
.storm { width:min(630px,100%); }
.letters { display:flex; justify-content:center; align-items:center; gap:24px; margin:18px 0 8px; flex-wrap:wrap; }
.letters span { display:flex; align-items:center; justify-content:center; }
.letters img { width:auto; height:59px; }
.party { color:#3b57ff; font-weight:700; font-style:italic; font-size:1.25rem; }
.styles { color:#3b57ff; font-weight:700; font-style:italic; }
h1 { color:#ff0; font-size:clamp(1.4rem,3vw,2.4rem); margin:.5rem 0; }
.tagline { color:#ff0; font-weight:700; font-style:italic; margin-top:0; }
main { max-width:1250px; margin:0 auto; padding:12px 20px 30px; }
.band-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(280px,1.25fr); gap:14px; align-items:stretch; }
.member { background:#050505; border:1px solid #214fff; display:flex; align-items:center; justify-content:center; min-height:280px; overflow:hidden; }
.member img { width:100%; height:310px; object-fit:cover; object-position:top center; }
.nav-card { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; background:#060606; border:2px solid #214fff; }
.nav-card a { display:flex; align-items:center; justify-content:center; min-height:48px; padding:8px; background:linear-gradient(#ffb3e8,#e54fc0); color:#111; font-weight:800; font-style:italic; text-decoration:none; border:1px solid #214fff; border-radius:5px; }
.nav-card a:hover,.nav-card a:focus,.site-nav a:hover,.site-nav a:focus { background:#ffea00; outline:3px solid #fff; outline-offset:2px; }
.contact { text-align:center; padding:32px 12px 26px; }
.contact h2 { margin:0 0 16px; color:#ff0; font-size:2rem; }
.cta { display:inline-block; background:#12c94d; color:#000!important; padding:13px 20px; border-radius:6px; font-weight:800; text-decoration:none; }
.phone { color:#20ff5a; font-size:1.25rem; font-weight:800; }
footer { text-align:center; padding:8px 15px 30px; }
.also-visit { margin:0 0 8px; color:#aaa; font-size:.9rem; font-style:italic; }
footer img { width:196px; }
/* Interior pages */
.inner-header { max-width:1250px; margin:0 auto; padding:18px 20px 6px; text-align:center; }
.brand img { width:min(630px,100%); }
.site-nav { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin:16px 0; }
.site-nav a { padding:10px 7px; background:linear-gradient(#ffb3e8,#e54fc0); color:#111; font-weight:800; font-style:italic; text-decoration:none; border:1px solid #214fff; border-radius:5px; }
.content-page { max-width:1100px; margin:0 auto; padding:12px 18px 30px; }
.content-card { background:rgba(0,0,0,.84); border:2px solid #214fff; border-radius:10px; padding:clamp(18px,4vw,38px); line-height:1.55; }
.content-card h1 { text-align:center; color:#ff0; margin-top:0; }
.content-card h2 { color:#ff80dc; }
.content-card a { color:#55ff75; }
.center { text-align:center; }
.artist-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:22px; }
.artist-grid span { background:#151515; border:1px solid #333; padding:8px; border-radius:4px; }
.event-list p { background:#111; border-left:4px solid #e54fc0; padding:10px 12px; }
.profile { display:grid; grid-template-columns:minmax(220px,340px) 1fr; gap:28px; align-items:start; }
.profile img { width:100%; border:2px solid #214fff; border-radius:8px; }
.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.photo-grid img { width:100%; max-height:430px; object-fit:contain; background:#050505; border:2px solid #214fff; border-radius:8px; }
.reviews blockquote { margin:16px 0; padding:16px 18px; background:#111; border-left:5px solid #e54fc0; }
.reviews blockquote footer { padding:0; text-align:left; color:#bbb; }
.home-link { text-align:center; margin-top:24px; }
@media (max-width:900px) { .hero { grid-template-columns:100px minmax(0,1fr) 100px; gap:8px; } .tut img { width:100px; } .letters img { height:44px; } .band-grid { grid-template-columns:repeat(3,1fr); } .nav-card { grid-column:1/-1; } }
@media (max-width:760px) { .site-nav { grid-template-columns:1fr 1fr; } .artist-grid { grid-template-columns:1fr 1fr; } .profile { grid-template-columns:1fr; } .profile img { max-height:360px; object-fit:contain; } .photo-grid { grid-template-columns:1fr; } .content-page { padding:8px; } .content-card { padding:16px; } }
@media (max-width:620px) { .hero { display:grid; grid-template-columns:56px minmax(0,1fr) 56px; gap:5px; padding:10px 6px 6px; align-items:start; } .tut { display:block; padding-top:12px; } .tut img { width:56px; height:auto; } .storm { width:100%; max-width:430px; } .letters { gap:6px; margin:10px 0 6px; } .letters img { height:27px; } .party { font-size:.95rem; } .styles { font-size:.78rem; line-height:1.35; } h1 { font-size:1.18rem; } .tagline { font-size:.9rem; } main { padding:8px; } .band-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; } .member { min-height:0; } .member img { width:100%; height:145px; object-fit:cover; object-position:top center; } .nav-card { grid-column:1/-1; grid-template-columns:1fr 1fr; margin-top:5px; } }