/* Main CSS - Import Aggregator */

@import url('variables.css');
@import url('reset.css');
@import url('base.css');
@import url('layout.css');

/* Components */
@import url('components/hero.css');
@import url('components/story-layouts.css');
@import url('components/navigation.css');
@import url('components/breadcrumb.css');
@import url('components/header.css');
@import url('components/tabs.css');
@import url('components/photo-scatter.css');
@import url('components/timeline.css');
@import url('components/annotations.css');
@import url('components/notes.css');
@import url('components/art-grid.css');
@import url('components/diagram.css');
@import url('components/details.css');
@import url('components/footer.css');

/* Utilities */
@import url('utilities.css');

/* Responsive Styles */
@media (max-width: 1024px) {
    .file-nav {
        width: var(--nav-width-tablet);
        transform: translateX(-250px);
    }

    .file-nav-toggle.nav-open {
        left: 270px;
    }

    .main-content.nav-open {
        margin-left: var(--nav-width-tablet);
    }
}

@media (max-width: 768px) {
    .file-nav {
        width: 100%;
        transform: translateX(-100%);
    }

    .file-nav-toggle.nav-open {
        left: calc(100% - 140px);
    }

    .main-content.nav-open {
        margin-left: 0;
    }

    .container {
        padding: var(--space-xl) 1.25rem;
    }

    h1 {
        font-size: 2.25rem;
    }

    .photo-scatter,
    .art-grid {
        grid-template-columns: 1fr;
    }

    .diagram-grid {
        grid-template-columns: 1fr;
    }

    .quick-facts {
        grid-template-columns: 1fr;
    }
}