/* MATERIALS LIBRARY */

.materials-library {
    --library-bg: #0d0e0e;
    --library-ink: #f1ede7;
    --library-muted: #aaa69f;
    --library-line: rgb(241 237 231 / 0.18);
    --library-gold: #cfad62;
    --library-blue: #72bdcf;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: clip;
    background: var(--library-bg);
    color: var(--library-ink);
}

.materials-library a {
    color: inherit;
}

.library-kicker,
.library-direction__label,
.library-direction__number,
.library-format__number {
    margin: 0;
    color: var(--library-gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    line-height: 1.45;
    text-transform: uppercase;
}

.library-cover {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.5fr);
    min-height: calc(100svh - 96px);
    border-bottom: 1px solid var(--library-line);
}

.library-cover__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:
        clamp(5rem, 9vw, 9rem)
        clamp(2rem, 8vw, 9rem);
}

.library-cover h1 {
    max-width: 1000px;
    margin: 1.7rem 0 2.5rem;
    font-size: clamp(4rem, 7.6vw, 8.2rem);
    font-weight: 300;
    letter-spacing: -0.06em;
    line-height: 0.88;
}

.library-cover__lead {
    max-width: 700px;
    margin: 0;
    color: var(--library-muted);
    font-size: clamp(1.15rem, 1.8vw, 1.6rem);
    line-height: 1.55;
}

.library-cover__index {
    display: grid;
    grid-template-columns: 55px 1fr;
    align-content: center;
    gap: 0;
    border-left: 1px solid var(--library-line);
    background:
        linear-gradient(145deg, #151515, #1a292d);
}

.library-cover__index span {
    padding: 1.6rem;
    border-bottom: 1px solid var(--library-line);
}

.library-cover__index span:nth-child(odd) {
    color: var(--library-gold);
    font-size: 0.68rem;
}

.library-section-heading,
.library-formats,
.library-guide,
.library-note,
.library-final {
    padding:
        clamp(5rem, 10vw, 10rem)
        max(6vw, calc((100vw - 1180px) / 2));
}

.library-section-heading {
    display: grid;
    grid-template-columns: 0.36fr 1fr;
    gap: clamp(3rem, 8vw, 9rem);
}

.library-section-heading h2,
.library-formats h2,
.library-guide h2,
.library-note h2,
.library-final h2 {
    max-width: 960px;
    margin: 0;
    font-size: clamp(2.7rem, 5.2vw, 5.6rem);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1;
}

.library-direction-list {
    border-top: 1px solid var(--library-line);
}

.library-direction {
    display: grid;
    grid-template-columns:
        minmax(50px, 0.18fr)
        minmax(260px, 0.8fr)
        minmax(260px, 0.75fr)
        minmax(170px, 0.35fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: start;
    padding:
        3rem
        max(6vw, calc((100vw - 1180px) / 2));
    border-bottom: 1px solid var(--library-line);
}

.library-direction--psychology {
    background:
        linear-gradient(90deg, rgb(138 63 46 / 0.38), transparent 50%);
}

.library-direction--neuro {
    background:
        linear-gradient(90deg, rgb(163 79 60 / 0.22), transparent 48%);
}

.library-direction--digital {
    background:
        linear-gradient(90deg, rgb(35 78 88 / 0.5), transparent 55%);
}

.library-direction h3 {
    margin: 0.8rem 0 0;
    font-size: clamp(2rem, 3.2vw, 3.5rem);
    font-weight: 300;
    letter-spacing: -0.045em;
    line-height: 1;
}

.library-direction > p:not([class]) {
    margin: 0;
    color: var(--library-muted);
    font-size: clamp(1rem, 1.15vw, 1.14rem);
    line-height: 1.7;
}

.library-direction__links {
    display: grid;
    justify-items: start;
    gap: 1rem;
}

.library-direction__links a,
.library-formats__grid a {
    border-bottom: 1px solid currentcolor;
    padding-bottom: 0.35rem;
    text-decoration: none;
}

.library-formats {
    border-bottom: 1px solid var(--library-line);
}

.library-formats header {
    display: grid;
    grid-template-columns: 0.36fr 1fr;
    gap: clamp(3rem, 8vw, 9rem);
    margin-bottom: clamp(4rem, 8vw, 8rem);
}

.library-formats__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--library-line);
}

.library-formats__grid article {
    min-height: 390px;
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 4vw, 4rem);
    border-right: 1px solid var(--library-line);
}

.library-formats__grid article:last-child {
    border-right: 0;
}

.library-formats__grid h3 {
    margin: 3rem 0 1.3rem;
    font-size: clamp(1.8rem, 2.6vw, 2.8rem);
    font-weight: 300;
    line-height: 1.05;
}

.library-formats__grid article > p:not([class]) {
    color: var(--library-muted);
    line-height: 1.65;
}

.library-formats__grid a {
    align-self: flex-start;
    margin-top: auto;
}

.library-guide {
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    gap: clamp(4rem, 9vw, 10rem);
    border-bottom: 1px solid var(--library-line);
    background: #142329;
}

.library-guide .library-kicker {
    margin-bottom: 2rem;
}

.library-guide ol {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--library-line);
    list-style: none;
}

.library-guide li {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 1.4rem;
    padding: 2rem 0;
    border-bottom: 1px solid var(--library-line);
}

.library-guide li > span {
    color: var(--library-blue);
    font-size: 0.7rem;
}

.library-guide h3 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 400;
}

.library-guide li p {
    max-width: 580px;
    margin-bottom: 0;
    color: var(--library-muted);
    line-height: 1.65;
}

.library-note {
    display: grid;
    grid-template-columns: 0.36fr 1fr;
    gap: clamp(3rem, 8vw, 9rem);
    border-bottom: 1px solid var(--library-line);
}

.library-note > div > p {
    max-width: 720px;
    color: var(--library-muted);
    font-size: 1.15rem;
    line-height: 1.7;
}

.library-final {
    min-height: 72vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #eeeae3;
    color: #171818;
}

.library-final .library-kicker {
    color: #765b27;
}

.library-final h2 {
    margin-top: 2rem;
}

.library-final__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3rem;
}

.library-final__links a {
    padding: 1rem 1.35rem;
    border: 1px solid #171818;
    text-decoration: none;
}

.library-final__links a:first-child {
    background: #171818;
    color: #f3eee7;
}

@media (max-width: 940px) {
    .library-cover {
        grid-template-columns: 1fr;
    }

    .library-cover__index {
        border-top: 1px solid var(--library-line);
        border-left: 0;
    }

    .library-section-heading,
    .library-formats header,
    .library-guide,
    .library-note {
        grid-template-columns: 1fr;
    }

    .library-direction {
        grid-template-columns: 50px 1fr;
    }

    .library-direction > p:not([class]),
    .library-direction__links {
        grid-column: 2;
    }

    .library-formats__grid {
        grid-template-columns: 1fr;
    }

    .library-formats__grid article {
        min-height: 330px;
        border-right: 0;
        border-bottom: 1px solid var(--library-line);
    }

    .library-formats__grid article:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 620px) {
    .library-cover__copy {
        padding: 5rem 1.35rem 4rem;
    }

    .library-cover h1 {
        font-size: clamp(3.5rem, 17vw, 5.3rem);
    }

    .library-cover__index span {
        padding: 1.2rem 1rem;
    }

    .library-section-heading,
    .library-formats,
    .library-guide,
    .library-note,
    .library-final {
        padding: 5rem 1.35rem;
    }

    .library-direction {
        grid-template-columns: 35px 1fr;
        padding: 2.5rem 1.35rem;
    }

    .library-direction__links {
        display: flex;
        flex-wrap: wrap;
    }

    .library-formats__grid article {
        min-height: 300px;
        padding: 2rem 1.35rem;
    }

    .library-final__links {
        display: grid;
    }

    .library-final__links a {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .materials-library *,
    .materials-library *::before,
    .materials-library *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}