.stop-scrapbook {
    background: #01010B;
    position: relative;
    z-index: 1;
    padding: 367px 0 174px;   /* was 22rem/10rem; +29px gives back what the new type spec removed */
}

.stop-scrapbook__inner {
    max-width: 1500px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 2.5vw, 2rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 12rem);
    align-items: center;
}

.stop-scrapbook__heading {
    font-family: 'Atma', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 96px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: left;
    color: #fff;
    margin-bottom: 1.5rem;
}

/* own line, so the heading never runs across the dotted line on small desktops */
.stop-scrapbook__heading .accent {
    display: block;
    color: #00C0E8;
}

.stop-scrapbook__note-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.stop-scrapbook__note {
    font-family: 'Architects Daughter', cursive;
    font-weight: 400;
    font-size: 26px;
    line-height: 120%;
    color: rgba(255, 255, 255, 0.8);
    max-width: 380px;
    transform: rotate(-1.5deg);
}

.stop-scrapbook__cat {
    flex-shrink: 0;
    transform: rotate(6deg);
}

.stop-scrapbook__cat .ld-cat { width: 58px; }

.stop-scrapbook__right {
    display: flex;
    align-items: center;
    gap: 8rem;
}

.stop-scrapbook__face {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 3rem;
}

.stop-scrapbook__cabinet-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
}

/* --- filing cabinet art: each cabinet holds up to four drawers --- */
.ld-cabinets {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.25rem;
}

.ld-cabinet {
    position: relative;
    width: 300px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 10px 12px;
    margin-bottom: 12px;
    border: 2px solid #fff;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    transform: rotate(-2deg);
}

.ld-cabinet:nth-child(2) {
    transform: rotate(1.5deg);
    margin-top: 18px;
}


/* little legs */
.ld-cabinet::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -12px;
    height: 10px;
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
}

.ld-cabinet__drawer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 56px;
    padding: 7px 12px;
    border: 2px solid #fff;
    border-radius: 6px;
    font-family: 'Architects Daughter', cursive;
    font-size: 24px;
    line-height: 1.05;
    text-align: center;
    color: #fff;
    transition: transform 0.3s var(--ease-out), background-color 0.25s, border-color 0.25s;
}

.ld-cabinet__handle {
    flex-shrink: 0;
    width: 36px;
    height: 7px;
    border: 2px solid #EFD020;
    border-radius: 6px;
    transition: border-color 0.25s;
}

/* pull the drawer out a little */
.ld-cabinet__drawer:hover,
.ld-cabinet__drawer:focus-visible {
    transform: translateX(10px);
    border-color: #00C0E8;
    background: rgba(0, 192, 232, 0.08);
    outline: none;
}

.ld-cabinet__drawer:hover .ld-cabinet__handle,
.ld-cabinet__drawer:focus-visible .ld-cabinet__handle { border-color: #00C0E8; }

.ld-cabinets__more {
    font-family: 'Architects Daughter', cursive;
    font-size: 20px;
    color: #00C0E8;
    border-bottom: 1.5px dashed currentColor;
}

.ld-cabinets--multi .ld-cabinet { width: 220px; }
.ld-cabinets--multi .ld-cabinet__drawer { font-size: 20px; min-height: 54px; }

@media (max-width: 1199px) {
    .stop-scrapbook__right--multi .stop-scrapbook__face { display: none; }
    .ld-cabinets--multi .ld-cabinet { width: 200px; }
}

@media (max-width: 900px) {
    .stop-scrapbook {
        padding: 5rem 0;
    }

    .stop-scrapbook__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding-inline: clamp(1rem, 5vw, 2rem);
    }

    .stop-scrapbook__heading {
        font-size: clamp(3rem, 13vw, 60px);
    }

    .stop-scrapbook__note { font-size: 20px; }

    .ld-cabinet__drawer {
        font-size: 20px;
    }
}

/* Desktop heights are locked to what the section measured before the Filing Cabinet
   redesign: the dotted line's stops are placed as a % of the whole road height, so this
   section must not grow or shrink. Content that runs taller spills into the padding. */
@media (min-width: 1441px) {
    .stop-scrapbook__inner {
        max-width: 1500px;
        padding-inline: 2.5rem;
        height: 320px;
    }
}

/* --- small desktop: 901px – 1440px only --- */
@media (min-width: 901px) and (max-width: 1440px) {
    .stop-scrapbook { padding: 245px 0 117px; } /* was 15rem/7rem; +10px keeps the dotted line aligned */
    /* 1400px matches .stop-video__inner so both headings start on the same vertical line */
    .stop-scrapbook__inner { max-width: 1400px; gap: clamp(2.5rem, 5vw, 8rem); height: 312px; }
    .stop-scrapbook__heading { font-size: clamp(64px, 6.2vw, 96px); margin-bottom: 1.25rem; }
    .stop-scrapbook__note { font-size: 22px; max-width: 320px; }
    .stop-scrapbook__note-row { gap: 1.75rem; }
    .stop-scrapbook__cat .ld-cat { width: 50px; }
    .stop-scrapbook__right { gap: 4rem; }
    .ld-cabinet { width: 270px; }
    .ld-cabinet__drawer { font-size: 21px; min-height: 52px; }
}

/* --- phones and tablets: face and cabinet stack instead of sitting side by side --- */
@media (max-width: 900px) {
    .stop-scrapbook__right { flex-direction: column; align-items: center; gap: 2rem; }
    /* the desktop face hangs off the left of the pair; stacked, it belongs over the cabinet */
    .stop-scrapbook__face { align-self: center; margin-top: 0; }
    .stop-scrapbook__cabinet-wrap { width: 100%; }
}

@media (max-width: 600px) {
    .stop-scrapbook { padding: 5rem 0 3rem; }
    .stop-scrapbook__heading { font-size: clamp(2.2rem, 11vw, 3rem); }
    .stop-scrapbook__note-row { gap: 1.25rem; }
    .stop-scrapbook__note { font-size: 1rem; }
    .stop-scrapbook__cat .ld-cat { width: 44px; }
    .ld-cabinet { width: min(280px, 100%); }
    .stop-scrapbook__face svg { width: 68px; height: 68px; }
}

@media (max-width: 480px) {
    .ld-cabinets--multi { flex-direction: column; align-items: center; }
    .ld-cabinets--multi .ld-cabinet { width: min(280px, 100%); }
    .ld-cabinets--multi .ld-cabinet:nth-child(2) { margin-top: 1rem; }
}

/* the last drawer opens the Filing Cabinet page with every cabinet on it */
.ld-cabinet__drawer--more {
    border-color: #00C0E8;
    color: #00C0E8;
}
.ld-cabinet__drawer--more .ld-cabinet__handle { border-color: #00C0E8; }
.ld-cabinet__drawer--more:hover,
.ld-cabinet__drawer--more:focus-visible { background: rgba(0, 192, 232, 0.14); }