/* --- VARIABLES & RESET --- */
:root {
    --bg: #ffffff;
    --text: #111111;
    --dim: #888888;
    --border: #f0f0f0; /* Very subtle border color */
}
body.dark-mode {
    --bg: #111111;
    --text: #f1f1f1;
    --dim: #888888;
    --border: #222222;
}

* { box-sizing: border-box; transition: color 0.2s, background-color 0.2s; }
body { 
    margin: 0; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Cleaner font stack */
    background: var(--bg); 
    color: var(--text); 
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

/* --- HEADER --- */
.site-header {
    position: sticky; top: 0; z-index: 1000;
    background: var(--bg);
    /* Very subtle border, or remove if you want 100% clean. Kept subtle for separation. */
    border-bottom: 1px solid var(--border); 
}

.header-inner {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1000px; margin: 0 auto; 
    padding: 15px 20px;
}

.site-title {
    font-weight: 700; font-size: 1.1rem; 
    text-decoration: none; color: var(--text);
}

/* CONTROLS (Top Right) */
.header-controls { display: flex; gap: 15px; align-items: center; }
.icon-btn {
    background: none; border: none; /* No Border! */
    color: var(--text); cursor: pointer; 
    padding: 0; font-size: 1.4rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { opacity: 0.7; }

/* --- CLEAN MENU (The Bentolman Look) --- */
.clean-menu {
    text-align: center;
    padding-bottom: 30px;
    background: var(--bg);
}

.menu-link {
    display: block; 
    width: 100%; 
    background: none; border: none; /* No lines! */
    padding: 10px 0;
    font-size: 1rem; color: var(--dim); 
    cursor: pointer;
}
.menu-link:hover, .menu-link.active {
    color: var(--text);
}
.menu-link.active {
    font-weight: 600; /* Subtle bold for active */
}

/* --- CONTENT CONTAINER --- */
.content-container {
    max-width: 1000px; margin: 40px auto; padding: 0 20px; 
    min-height: 80vh;
}

/* --- GALLERY FEED (Clean Image Stack) --- */
.feed-item { margin-bottom: 60px; }
.feed-img {
    display: block; width: 100%; height: auto; 
    cursor: zoom-in;
}
.feed-meta {
    display: flex; justify-content: space-between; /* Title Left, Date Right */
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--text);
}
.feed-date { color: var(--dim); }

/* --- ABOUT / PARTICIPATE (Centered) --- */
.center-wrapper { 
    display: flex; flex-direction: column; align-items: center; text-align: center; 
}
.hero-img { 
    width: 100%; max-width: 600px; height: auto; margin-bottom: 30px; 
}
.text-block { 
    max-width: 600px; text-align: left; 
}
.links-block { margin-top: 20px; }
.links-block a { 
    color: var(--text); text-decoration: none; border-bottom: 1px solid var(--dim);
}

/* --- ARTISTS (Clean List) --- */
.artists-wrapper { display: flex; gap: 40px; }
.list-col { 
    width: 220px; flex-shrink: 0; 
}
.list-col h3 { font-size: 1rem; margin-top: 0; margin-bottom: 20px; }

.artist-ul { list-style: none; padding: 0; margin: 0; }
.artist-li { 
    padding: 6px 0; 
    cursor: pointer; color: var(--dim); 
    /* No borders here either, just clean text */
}
.artist-li:hover { color: var(--text); }

.profile-col { flex-grow: 1; text-align: center; padding-top: 40px; }
.profile-col img { max-width: 100%; margin-bottom: 15px; }
.dimmed { color: var(--dim); }

/* --- ZOOM OVERLAY --- */
.zoom-overlay { 
    position: fixed; inset: 0; background: rgba(0,0,0,0.95); 
    z-index: 2000; 
    display: flex; align-items: center; justify-content: center; 
}
.zoom-inner { 
    padding: 20px; width: 100%; text-align: center; 
    overflow-y: auto; max-height: 100vh;
}
#zoom-img { max-width: 100%; height: auto; display: inline-block; }
#zoom-close { 
    position: fixed; top: 20px; right: 20px; 
    background: none; border: none; color: #fff; 
    font-size: 2rem; cursor: pointer; 
}
.zoom-info { margin-top: 20px; color: #fff; }
#zoom-title { font-size: 1.2rem; font-weight: normal; margin: 0; }
#zoom-artists { font-size: 0.9rem; color: #999; margin-top: 5px; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .artists-wrapper { flex-direction: column; }
    .list-col { width: 100%; margin-bottom: 40px; }
    .profile-col { padding-top: 0; }
}