@import url('variables.css');
@import url('header.css');
@import url('navigation.css');
@import url('content.css');
@import url('footer.css');
@import url('responsive.css');

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font: 16px/1.5 Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.site__body {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px;
    flex: 1;
    align-items: start;
}
.site--guest .site__body { grid-template-columns: minmax(0, 1fr); }