.camp-archive {
    background: #fff;
    color: #000;
    padding-top: 4rem;
    padding-bottom: 6rem;
}

.camp-archive .camp-archive-container {
    max-width: 1200px !important;
}

.camp-archive-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
}

.camp-archive-header h1 {
    flex: 0 0 auto;
    margin: 0;
    font-size: clamp(2rem, 3.6vw, 3.15rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.025em;
}

.camp-archive-scribble {
    display: block;
    width: min(42vw, 34rem);
    height: auto;
    max-height: 7rem;
    object-fit: contain;
    object-position: left center;
}

.camp-archive-list {
    margin-top: 7.5rem;
    border-top: 2px solid #000;
}

.camp-archive-item {
    border-bottom: 2px solid #000;
}

.camp-archive-toggle {
    display: grid;
    grid-template-columns: 1.15fr 1.15fr 1.15fr .95fr .85fr .95fr 2rem;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 7.8rem;
    padding: .7rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.camp-archive-toggle:hover { background: #f7f7f7; }
.camp-archive-toggle:focus-visible { outline: 3px solid #2369a6; outline-offset: -3px; }

.camp-archive-name {
    font-size: clamp(1.65rem, 2.6vw, 2.35rem);
    font-weight: 700;
    line-height: 1.12;
    white-space: nowrap;
}

.camp-archive-info { font-size: .88rem; line-height: 1.3; font-weight: 600; }
.camp-archive-info small { display: block; font-size: .72rem; font-weight: 400; }
.camp-archive-info span { display: block; }

.camp-archive-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 5;
    background: #d3d3d3;
    overflow: hidden;
}

.camp-archive-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camp-archive-portrait img { filter: grayscale(1); }
.camp-archive-placeholder { display: block; width: 100%; height: 100%; background: #d3d3d3; }
.camp-archive-prompt { font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.5; }

.camp-archive-chevron {
    width: 100%;
    max-width: 2rem;
    height: 2rem;
    transition: transform .3s ease;
}

.camp-archive-toggle[aria-expanded="true"] .camp-archive-chevron { transform: rotate(180deg); }

.camp-archive-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .38s ease, visibility 0s linear .38s;
}

.camp-archive-panel[hidden] { display: none; }
.camp-archive-toggle[aria-expanded="true"] + .camp-archive-panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .38s ease, visibility 0s;
}

.camp-archive-panel-inner { min-height: 0; overflow: hidden; }
.camp-archive-masonry {
    columns: 4;
    column-gap: .7rem;
    padding: 1.25rem 0;
}

.camp-archive-photo {
    break-inside: avoid;
    margin-bottom: .7rem;
}

.camp-archive-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.camp-archive-photo .camp-archive-placeholder { height: auto; }

@media (max-width: 1050px) {
    .camp-archive-toggle { gap: .6rem; grid-template-columns: 1.1fr 1fr 1.1fr .85fr .75fr .85fr 1.7rem; }
    .camp-archive-info { font-size: .76rem; }
    .camp-archive-prompt { font-size: .7rem; }
    .camp-archive-masonry { columns: 3; }
}

@media (max-width: 900px) {
    .camp-archive { padding-top: 3rem; padding-bottom: 4rem; }
    .camp-archive-header { display: block; }
    .camp-archive-header h1 { font-size: clamp(2rem, 7vw, 2.8rem) !important; }
    .camp-archive-scribble { width: min(75vw, 24rem); max-height: 4rem; margin-top: .75rem; }
    .camp-archive-list { margin-top: 3.5rem; }
    .camp-archive-toggle {
        grid-template-columns: 1fr 1fr 2rem;
        grid-template-areas:
            'name name arrow'
            'date date date'
            'teacher teacher teacher'
            'portrait cover cover'
            'prompt prompt prompt';
        gap: .75rem;
        padding: 1.25rem 0;
    }
    .camp-archive-name { grid-area: name; font-size: 1.9rem; }
    .camp-archive-toggle > .camp-archive-info:nth-child(2) { grid-area: date; }
    .camp-archive-toggle > .camp-archive-info:nth-child(3) { grid-area: teacher; }
    .camp-archive-info { font-size: .9rem; }
    .camp-archive-portrait { grid-area: portrait; }
    .camp-archive-cover { grid-area: cover; width: calc(100% - 2rem - .75rem); justify-self: start; }
    .camp-archive-prompt { grid-area: prompt; text-align: left; }
    .camp-archive-prompt br { display: none; }
    .camp-archive-chevron { grid-area: arrow; }
    .camp-archive-masonry { columns: 2; }
}

@media (max-width: 380px) {
    .camp-archive-masonry { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .camp-archive-panel, .camp-archive-toggle[aria-expanded="true"] + .camp-archive-panel,
    .camp-archive-chevron { transition: none; }
}