*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: var(--font-size, 11px);
    line-height: 1.5;
    color: var(--text-color, #111);
    background-color: var(--bg-color, #fff);
    padding: 40px 50px;
}

#layout {
    display: flex;
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
}

#sidebar {
    width: var(--sidebar-width, 200px);
    flex-shrink: 0;
    position: sticky;
    top: 40px;
    height: fit-content;
}

#sidebar .site-title {
    font-size: calc(var(--font-size, 11px) + 1px);
    font-weight: 700;
    text-transform: var(--text-transform, uppercase);
    letter-spacing: 0.5px;
    line-height: 1.3;
    margin-bottom: 2px;
}

#sidebar .site-subtitle {
    font-size: calc(var(--font-size, 11px) - 1px);
    color: var(--link-color, #888);
    margin-bottom: 30px;
}

#sidebar nav h2 {
    font-size: calc(var(--font-size, 11px) - 1px);
    font-weight: 700;
    text-transform: var(--text-transform, uppercase);
    color: var(--text-color, #000);
    margin-bottom: 8px;
}

#sidebar nav ul { list-style: none; margin-bottom: 20px; }
#sidebar nav li { margin-bottom: 4px; }

#sidebar nav a {
    color: var(--link-color, #777);
    text-decoration: none;
    text-transform: var(--text-transform, uppercase);
    font-size: calc(var(--font-size, 11px) - 1px);
    letter-spacing: 0.3px;
}

#sidebar nav a:hover, #sidebar nav a.active {
    color: var(--link-hover-color, #000);
    font-weight: 700;
}

#content { flex: 1; min-width: 0; }

.breadcrumbs {
    font-size: calc(var(--font-size, 11px) - 1px);
    font-weight: 700;
    text-transform: var(--text-transform, uppercase);
    margin-bottom: 25px;
}

.series-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
    gap: 15px;
}

.series-grid img { width: 100%; height: auto; display: block; }

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.project-card { text-decoration: none; color: inherit; }
.project-card .thumb { width: 100%; aspect-ratio: 1/1; background: #f2f2f2; margin-bottom: 8px; }
.project-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-card .title { font-size: calc(var(--font-size, 11px) - 1px); text-align: center; font-weight: 700; text-transform: var(--text-transform, uppercase); }