@layer components {
    .library-body {
        --min-height-abs: 500px;
        --min-height-per: 20%;

        padding: var(--spacing-12);
        background: var(--color-surface);
        border-radius: var(--radius-lg);
        background: linear-gradient(
            to bottom,
            var(--color-surface) 0%,
            var(--color-background)
                min(var(--min-height-per), var(--min-height-abs)),
            var(--color-background)
                calc(100% - min(var(--min-height-per), var(--min-height-abs))),
            var(--color-surface) 100%
        );
        margin-bottom: var(--spacing-16);

        &.two-cols {
            display: grid;
            grid-template-columns: 16rem 1fr;
            gap: var(--spacing-20);
        }
    }

    .library-book-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
        gap: var(--spacing-24) var(--spacing-12);
        justify-items: center;
        padding: var(--spacing-24) 0 var(--spacing-16);
    }

    /* SIDEBAR */

    .library-sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-6);
    }

    .library-book-cover {
        float: left;
        max-width: 16rem;
        width: 100%;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow);
    }

    .library-aside-authors {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-4);
        margin-top: var(--spacing-4);
        padding-top: var(--spacing-4);
        border-top: 1px solid var(--color-border);
    }

    /* AUTHOR */

    .author-card {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-3);
    }

    .author-photo {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
        background: var(--color-surface);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .author-photo-initials {
        font-family: var(--font-sans);
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-semibold);
        color: white;
        background: linear-gradient(
            135deg,
            var(--apple-blue) 0%,
            var(--apple-purple) 100%
        );
        letter-spacing: -0.02em;
    }

    .author-info {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-1);
        min-width: 0;
    }

    .author-name {
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
        margin: 0;
        line-height: 1.2;
    }

    .author-title {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        margin: 0;
        line-height: 1.3;
    }

    .author-socials {
        list-style: none;
        margin: var(--spacing-2) 0 0;
        padding: 0;
        display: flex;
        gap: var(--spacing-2);
    }

    .author-social-link {
        svg {
            height: 1.2rem;
            fill: var(--color-text-muted);
        }

        &:hover {
            svg {
                fill: var(--color-primary-hover);
            }
        }
    }

    /* HEADER: Index */
    .library-header {
        align-items: center;
    }

    .library-header-eyebrow {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-light);
        color: var(--color-text-secondary);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        text-align: center;
        margin-bottom: var(--spacing-2);
    }

    .library-header-title {
        font-size: var(--font-size-6xl);
        font-weight: var(--font-weight-black);
        text-align: center;
        margin-bottom: var(--spacing-6);
    }

    .library-header-byline {
        font-size: var(--font-size-xl);
        color: var(--color-secondary);
        text-align: center;
        max-width: 40rem;
    }

    /* HEADER: Book */

    .library-book-header {
        display: flex;
        flex-direction: column;
        margin-top: var(--spacing-6);
        margin-bottom: var(--spacing-12);
        border-bottom: 1px dotted var(--color-border);
    }

    .library-book-header-eyebrow {
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-normal);
        color: var(--color-text-secondary);
        letter-spacing: var(--tracking-tight);
        text-align: left;
        margin-bottom: var(--spacing-1);
    }

    .library-book-header-title {
        font-size: var(--font-size-6xl);
        font-weight: var(--font-weight-black);
        margin: 0 0 var(--spacing-3);
        line-height: var(--line-height-tight);
    }

    .library-book-header-byline {
        font-size: var(--font-size-xl);
        color: var(--color-secondary);
        font-style: italic;
    }
    /* ARTICLE */

    .library-article {
        display: block;
    }

    .library-article h1,
    .library-article h2,
    .library-article h3,
    .library-article h4,
    .library-article h5,
    .library-article h6 {
        font-family: var(--font-family-base);
    }

    .library-article h2 {
        font-size: var(--font-size-xl);
        margin-top: var(--spacing-6);
        margin-bottom: var(--spacing-2);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
    }

    .library-article h3 {
        font-size: var(--font-size-lg);
        margin-top: var(--spacing-6);
        margin-bottom: var(--spacing-2);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
    }

    .library-article h2:first-child {
        margin-top: 0;
    }

    .library-article p {
        color: var(--color-text-secondary);
        font-size: var(--font-size-lg);
    }
}