/* =========================================================
   THE GREAT LIBRARY
   =========================================================

   Easy to understand first.
   Magical to explore second.

   The Great Library helps travelers find language
   for what they are discovering.

   One permanent home.
   Many intentional paths.

   Build gently.
   Investigation Ongoing.
========================================================= */


/* =========================================================
   LIBRARY PALETTE

   These colors belong to the Library destination.
   Shared Sassiverse colors remain available through
   sassiverse.css.
========================================================= */

:root {
    --library-ink: #342d35;
    --library-muted: #71666d;

    --library-burgundy: #74485d;
    --library-burgundy-dark: #553344;
    --library-burgundy-soft: #f5e8ee;

    --library-forest: #355c4a;
    --library-moss: #648c6a;

    --library-gold: #d8a83e;
    --library-gold-soft: #fff2c9;

    --library-paper: #fffdf8;
    --library-cream: #fbf5eb;
    --library-parchment: #f3e8d5;

    --library-lavender: #eee7f8;
    --library-sky: #e8f5fa;
    --library-pink: #fae8ef;

    --library-border: rgba(116, 72, 93, 0.16);

    --library-shadow:
        0 16px 42px rgba(70, 48, 57, 0.10);

    --library-shadow-hover:
        0 22px 52px rgba(70, 48, 57, 0.16);
}


/* =========================================================
   LIBRARY TYPOGRAPHY HELPERS
========================================================= */

.library-eyebrow {
    margin: 0 0 0.85rem;

    color: var(--library-burgundy);

    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.library-section-heading {
    width: min(100%, 800px);

    margin: 0 auto 3.2rem;

    text-align: center;
}

.library-section-heading h2 {
    margin-bottom: 1.25rem;

    color: var(--library-forest);
}

.library-section-heading p {
    max-width: 720px;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   HERO
========================================================= */

.library-hero {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 680px;

    padding: 7rem 1.5rem;

    overflow: hidden;

    text-align: center;

    background:
        radial-gradient(
            circle at 16% 18%,
            rgba(238, 231, 248, 0.95),
            transparent 30%
        ),
        radial-gradient(
            circle at 84% 22%,
            rgba(255, 242, 201, 0.95),
            transparent 31%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(183, 201, 168, 0.48),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #fffdf8 0%,
            #fbf5eb 50%,
            #f7efe7 100%
        );
}


/* Decorative bookish shapes */

.library-hero::before,
.library-hero::after {
    position: absolute;

    content: "";

    pointer-events: none;
}

.library-hero::before {
    top: 11%;
    left: 7%;

    width: 120px;
    height: 160px;

    border: 2px solid rgba(116, 72, 93, 0.08);
    border-radius: 8px 20px 20px 8px;

    transform: rotate(-8deg);
}

.library-hero::after {
    right: 8%;
    bottom: 10%;

    width: 145px;
    height: 190px;

    border: 2px solid rgba(53, 92, 74, 0.08);
    border-radius: 8px 22px 22px 8px;

    transform: rotate(7deg);
}

.library-hero-content {
    position: relative;
    z-index: 1;

    width: min(100%, 850px);
}

.library-hero-icon {
    margin-bottom: 1.25rem;

    font-size: clamp(4rem, 9vw, 6.5rem);
    line-height: 1;
}

.library-hero h1 {
    margin: 0;

    color: var(--library-burgundy-dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(3.2rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1;
}

.library-tagline {
    margin: 1.4rem 0 2rem;

    color: var(--library-forest);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-style: italic;
    line-height: 1.5;
}

.library-introduction {
    max-width: 700px;

    margin: 0 auto 1rem;

    color: var(--library-ink);

    font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.8;
}

.library-gentle-note {
    display: inline-block;

    margin: 1.5rem auto 0;
    padding: 0.8rem 1.4rem;

    color: var(--library-burgundy-dark);

    background: rgba(255, 255, 255, 0.72);

    border: 1px solid var(--library-border);
    border-radius: 999px;

    font-size: 0.98rem;
    font-weight: 700;

    box-shadow:
        0 8px 24px rgba(70, 48, 57, 0.06);
}


/* =========================================================
   GENERAL LIBRARY SECTIONS
========================================================= */

.library-section {
    position: relative;

    width: 100%;

    padding: 6rem 1.5rem;
}


/* =========================================================
   BOOKSHELF SECTION
========================================================= */

.library-books-section {
    background:
        linear-gradient(
            180deg,
            var(--library-paper) 0%,
            #fffaf2 100%
        );
}


/* =========================================================
   BOOK GRID
========================================================= */

.library-book-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 2rem;

    width: min(100%, 1180px);

    margin: 0 auto;
}


/* =========================================================
   LIBRARY BOOK

   These are intentionally book-like rather than generic
   application cards.
========================================================= */

.library-book {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 500px;

    padding: 2.7rem 2.3rem 2.5rem 2.7rem;

    overflow: hidden;

    background: var(--library-paper);

    border: 1px solid var(--library-border);
    border-left-width: 9px;
    border-radius: 8px 24px 24px 8px;

    box-shadow: var(--library-shadow);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* Book spine detail */

.library-book::before {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 15px;

    width: 1px;

    background: rgba(255, 255, 255, 0.55);

    content: "";
}


/* Little bookmark */

.library-book::after {
    position: absolute;

    top: 0;
    right: 28px;

    width: 26px;
    height: 58px;

    background: var(--library-gold);

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 100%,
            50% 78%,
            0 100%
        );

    content: "";

    opacity: 0.85;
}

.library-book:hover {
    transform:
        translateY(-8px)
        rotate(-0.5deg);

    box-shadow: var(--library-shadow-hover);
}

.library-book-icon {
    margin-bottom: 1.25rem;

    font-size: 3.5rem;
    line-height: 1;
}

.library-book-label {
    margin: 0 0 0.65rem;

    color: var(--library-burgundy);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.library-book h3 {
    margin: 0 0 0.75rem;

    color: var(--library-ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2rem, 3vw, 2.6rem);
    line-height: 1.1;
}

.library-book-tagline {
    margin-bottom: 1.3rem;

    color: var(--library-forest);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.08rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1.5;
}

.library-book > p:not(.library-book-label):not(.library-book-tagline) {
    color: var(--library-muted);

    line-height: 1.75;
}

.library-book-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    align-self: flex-start;

    min-height: 48px;

    margin-top: auto;
    padding: 0.75rem 1.4rem;

    color: #ffffff;

    background: var(--library-burgundy);

    border-radius: 999px;

    font-weight: 800;
    line-height: 1.2;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.library-book-link:hover,
.library-book-link:focus-visible {
    color: #ffffff;

    background: var(--library-burgundy-dark);

    transform: translateY(-2px);

    box-shadow:
        0 9px 22px rgba(85, 51, 68, 0.18);
}


/* =========================================================
   INDIVIDUAL BOOK PERSONALITIES
========================================================= */


/* ROCKS */

.library-book-rock {
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(232, 245, 250, 0.8),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #fffdf9,
            #f3eee9
        );

    border-left-color: #8a817b;
}


/* SUNNY SPOTS */

.library-book-sunny-spot {
    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(255, 217, 125, 0.65),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #fffdf7,
            #fff4d8
        );

    border-left-color: var(--library-gold);
}


/* SUNNY SEATS */

.library-book-sunny-seat {
    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(183, 201, 168, 0.55),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #fffdf8,
            #edf4e8
        );

    border-left-color: var(--library-moss);
}


/* =========================================================
   READING ROOM / HOW IT WORKS
========================================================= */

.library-how-section {
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(238, 231, 248, 0.8),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 35%,
            rgba(232, 245, 250, 0.8),
            transparent 30%
        ),
        var(--library-cream);
}

.library-reading-room {
    width: min(100%, 850px);

    margin: 0 auto;
    padding: 4rem 4.2rem;

    text-align: center;

    background: rgba(255, 253, 248, 0.94);

    border: 1px solid var(--library-border);
    border-radius: 34px;

    box-shadow: var(--library-shadow);
}

.library-reading-room-icon {
    margin-bottom: 1rem;

    font-size: 3.5rem;
    line-height: 1;
}

.library-reading-room h2 {
    color: var(--library-forest);
}

.library-reading-room p {
    max-width: 690px;

    margin-left: auto;
    margin-right: auto;

    color: var(--library-muted);

    line-height: 1.85;
}

.library-emphasis {
    margin-top: 1.8rem !important;
    margin-bottom: 1.8rem !important;
    padding: 1.1rem 1.4rem;

    color: var(--library-burgundy-dark) !important;

    background: var(--library-burgundy-soft);

    border-radius: 16px;

    font-weight: 800;
}


/* =========================================================
   PHOTOGRAPHY / VISUAL PAUSE
========================================================= */

.library-photo-section {
    background:
        linear-gradient(
            145deg,
            #f1f5ed 0%,
            #fbf8f0 52%,
            #f6edf2 100%
        );
}

.library-photo-story {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap: 3rem;

    align-items: center;

    width: min(100%, 1080px);

    margin: 0 auto;
}

.library-photo-copy {
    width: min(100%, 720px);

    margin: 0 auto;

    text-align: center;
}

.library-photo-copy h2 {
    color: var(--library-forest);
}

.library-photo-copy p {
    color: var(--library-muted);

    line-height: 1.85;
}


/* =========================================================
   FUTURE PHOTO

   This automatically becomes useful when a figure with
   class="library-photo" is added to the HTML.
========================================================= */

.library-photo {
    position: relative;

    width: 100%;

    margin: 0;

    overflow: hidden;

    background: var(--library-paper);

    border: 10px solid var(--library-paper);
    border-radius: 28px;

    box-shadow: var(--library-shadow-hover);
}

.library-photo img {
    width: 100%;
    height: auto;

    border-radius: 18px;
}

.library-photo figcaption {
    padding: 1rem 1rem 0.4rem;

    color: var(--library-muted);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.92rem;
    font-style: italic;
    line-height: 1.5;

    text-align: center;
}


/* If a photograph is eventually added, give the
   section a two-column storytelling layout. */

.library-photo-story:has(.library-photo) {
    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);
}

.library-photo-story:has(.library-photo) .library-photo-copy {
    text-align: left;
}


/* =========================================================
   MAGAZINE RACK
========================================================= */

.library-magazine-section {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(250, 232, 239, 0.95),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(238, 231, 248, 0.9),
            transparent 30%
        ),
        var(--library-paper);
}

.library-magazine-preview {
    position: relative;

    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    gap: 2.5rem;

    align-items: center;

    width: min(100%, 900px);

    margin: 0 auto;
    padding: 3rem;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fff9f4 100%
        );

    border: 1px solid var(--library-border);
    border-radius: 28px;

    box-shadow: var(--library-shadow);
}


/* Magazine edge detail */

.library-magazine-preview::after {
    position: absolute;

    top: 0;
    right: 0;

    width: 10px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            var(--library-burgundy),
            var(--library-gold),
            var(--library-moss),
            #8cccf5,
            #e98bb3
        );

    content: "";
}

.library-magazine-icon {
    display: grid;
    place-items: center;

    width: 140px;
    height: 180px;

    background:
        linear-gradient(
            145deg,
            var(--library-burgundy-dark),
            var(--library-burgundy)
        );

    border-radius: 6px 16px 16px 6px;

    box-shadow:
        8px 10px 25px rgba(70, 48, 57, 0.16);

    font-size: 4.5rem;
    line-height: 1;
}

.library-magazine-kicker {
    margin: 0 0 0.6rem;

    color: var(--library-burgundy);

    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.library-magazine-copy h3 {
    margin-bottom: 1rem;

    color: var(--library-forest);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.library-magazine-copy p {
    color: var(--library-muted);
}

.library-sassy-note {
    display: inline-block;

    margin-bottom: 0 !important;
    padding: 0.8rem 1rem;

    color: var(--library-burgundy-dark) !important;

    background: var(--library-pink);

    border-radius: 14px;

    font-weight: 800;
}


/* =========================================================
   RETURN / WANDER BACK
========================================================= */

.library-return-section {
    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(246, 200, 95, 0.35),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #f7f2e9 0%,
            #fff9ee 100%
        );
}

.library-return-content {
    width: min(100%, 850px);

    margin: 0 auto;

    text-align: center;
}

.library-return-icon {
    margin-bottom: 1rem;

    font-size: 3.4rem;
    line-height: 1;
}

.library-return-content h2 {
    color: var(--library-burgundy-dark);
}

.library-return-content > p:not(.library-eyebrow) {
    max-width: 720px;

    margin-left: auto;
    margin-right: auto;

    color: var(--library-muted);

    line-height: 1.85;
}

.library-return-content strong {
    color: var(--library-burgundy-dark);
}

.library-closing-line {
    margin-top: 2rem !important;

    color: var(--library-forest) !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.35rem !important;
    font-style: italic;
    font-weight: 700;
}

.library-button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 1rem;

    margin-top: 2.2rem;
}


/* =========================================================
   LIBRARY BUTTON

   The existing HTML uses .trail-button so this gives
   the Library its own destination personality without
   changing the shared Sassiverse component.
========================================================= */

.library-return-section .trail-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-height: 50px;

    padding: 0.8rem 1.6rem;

    color: #ffffff;

    background: var(--library-burgundy);

    border: 2px solid var(--library-burgundy);
    border-radius: 999px;

    font-weight: 800;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.library-return-section .trail-button:hover,
.library-return-section .trail-button:focus-visible {
    color: #ffffff;

    background: var(--library-burgundy-dark);
    border-color: var(--library-burgundy-dark);

    transform: translateY(-2px);

    box-shadow:
        0 9px 22px rgba(85, 51, 68, 0.2);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.library-book-link:focus-visible,
.library-return-section .trail-button:focus-visible {
    outline: 3px solid rgba(216, 168, 62, 0.75);
    outline-offset: 4px;
}


/* Respect travelers who prefer less movement */

@media (prefers-reduced-motion: reduce) {

    .library-book,
    .library-book-link,
    .library-return-section .trail-button {
        transition: none;
    }

    .library-book:hover,
    .library-book-link:hover,
    .library-return-section .trail-button:hover {
        transform: none;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .library-hero {
        min-height: 600px;

        padding: 6rem 1.4rem;
    }

    .library-section {
        padding: 5rem 1.3rem;
    }

    .library-book-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .library-book {
        min-height: 480px;
    }

    .library-book:last-child {
        grid-column: 1 / -1;

        width: min(100%, 570px);

        justify-self: center;
    }

    .library-reading-room {
        padding: 3.4rem 3rem;
    }

    .library-photo-story:has(.library-photo) {
        grid-template-columns: 1fr;
    }

    .library-photo-story:has(.library-photo) .library-photo-copy {
        text-align: center;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .library-hero {
        min-height: auto;

        padding: 5rem 1.1rem;
    }

    .library-hero::before,
    .library-hero::after {
        display: none;
    }

    .library-hero-icon {
        font-size: 4.5rem;
    }

    .library-tagline {
        font-size: 1.3rem;
    }

    .library-introduction {
        font-size: 1rem;
    }

    .library-gentle-note {
        border-radius: 18px;
    }

    .library-section {
        padding: 4rem 1rem;
    }

    .library-section-heading {
        margin-bottom: 2.4rem;
    }


    /* BOOKS */

    .library-book-grid {
        grid-template-columns: 1fr;

        gap: 1.5rem;
    }

    .library-book,
    .library-book:last-child {
        grid-column: auto;

        width: 100%;
        min-height: 0;

        padding:
            2.3rem
            1.7rem
            2rem
            2.1rem;
    }

    .library-book-link {
        width: 100%;

        margin-top: 1rem;
    }


    /* READING ROOM */

    .library-reading-room {
        padding: 2.8rem 1.5rem;

        border-radius: 24px;
    }


    /* MAGAZINE */

    .library-magazine-preview {
        grid-template-columns: 1fr;

        gap: 1.8rem;

        padding: 2rem 1.5rem;

        text-align: center;
    }

    .library-magazine-icon {
        width: 115px;
        height: 145px;

        margin: 0 auto;

        font-size: 3.5rem;
    }


    /* RETURN */

    .library-button-row {
        flex-direction: column;
        align-items: stretch;
    }

    .library-return-section .trail-button {
        width: 100%;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .library-hero {
        padding: 4.25rem 1rem;
    }

    .library-hero h1 {
        font-size: clamp(2.8rem, 15vw, 4rem);
    }

    .library-section {
        padding: 3.5rem 0.9rem;
    }

    .library-book {
        padding:
            2rem
            1.35rem
            1.8rem
            1.75rem;
    }

    .library-reading-room {
        padding: 2.4rem 1.2rem;
    }

    .library-magazine-preview {
        padding: 1.8rem 1.2rem;
    }

}

/* =========================================================
   GREAT LIBRARY — ROOMS & COLLECTIONS
========================================================= */

.library-rooms {
    padding: 5rem 1.5rem 6rem;
}

.library-rooms__inner {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.library-rooms__heading {
    max-width: 760px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.library-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.library-rooms__heading h2 {
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.05;
}

.library-rooms__intro {
    margin: 1.25rem auto 0;
    max-width: 680px;
    font-size: 1.05rem;
    line-height: 1.75;
}


/* =========================================================
   FOUR PUBLIC LIBRARY ROOMS
========================================================= */

.library-rooms__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.library-room-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 430px;
    flex-direction: column;
    padding: 2.5rem;

    overflow: hidden;

    border: 1px solid rgba(0, 0, 0, 0.11);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.88),
            rgba(255, 255, 255, 0.62)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.07);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

.library-room-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 26px 55px rgba(0, 0, 0, 0.11);
}


/* little architectural doorway detail */

.library-room-card::before {
    content: "";
    position: absolute;
    inset: 12px;

    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;

    pointer-events: none;
}

.library-room-card__icon {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;
    margin-bottom: 1.75rem;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.75);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.07);

    font-size: 2rem;
}

.library-room-card__type {
    position: relative;
    z-index: 1;

    margin: 0 0 0.65rem;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.library-room-card h3 {
    position: relative;
    z-index: 1;

    margin: 0;

    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.05;
}

.library-room-card__tagline {
    position: relative;
    z-index: 1;

    margin: 1rem 0 0;

    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
}

.library-room-card__description {
    position: relative;
    z-index: 1;

    margin: 1rem 0 2rem;

    line-height: 1.7;
}


/* =========================================================
   ROOM BUTTONS
========================================================= */

.library-room-card__button {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    margin-top: auto;
    padding: 0.9rem 1.2rem;

    border: 1px solid currentColor;
    border-radius: 999px;

    color: inherit;

    font-weight: 700;
    text-align: center;
    text-decoration: none;

    transition:
        transform 160ms ease,
        background-color 160ms ease;
}

a.library-room-card__button:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.7);
}

a.library-room-card__button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}


/* Coming-soon buttons should feel intentionally inactive,
   not like broken links. */

.library-room-card__button--coming {
    opacity: 0.58;
    cursor: default;
}


/* =========================================================
   GIVE EACH ROOM A LITTLE PERSONALITY
========================================================= */

.library-room-card--books {
    background:
        linear-gradient(
            145deg,
            rgba(255, 250, 238, 0.95),
            rgba(255, 244, 217, 0.72)
        );
}

.library-room-card--perspectives {
    background:
        linear-gradient(
            145deg,
            rgba(240, 249, 248, 0.95),
            rgba(220, 242, 239, 0.72)
        );
}

.library-room-card--magazine {
    background:
        linear-gradient(
            145deg,
            rgba(248, 242, 252, 0.95),
            rgba(235, 223, 245, 0.72)
        );
}

.library-room-card--happenings {
    background:
        linear-gradient(
            145deg,
            rgba(255, 245, 247, 0.95),
            rgba(250, 225, 232, 0.72)
        );
}


/* =========================================================
   TRAVELER'S BOOK VAULT
   Intentionally different from the public room cards.
========================================================= */

.library-vault-card {
    position: relative;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;

    margin-top: 2rem;
    padding: clamp(2rem, 5vw, 3.5rem);

    overflow: hidden;

    border: 1px solid rgba(90, 65, 25, 0.24);
    border-radius: 30px;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 235, 166, 0.42),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(249, 240, 211, 0.96),
            rgba(235, 218, 176, 0.86)
        );

    box-shadow:
        0 22px 55px rgba(69, 51, 22, 0.12);
}


/* inner vault frame */

.library-vault-card::before {
    content: "";
    position: absolute;
    inset: 12px;

    border: 1px solid rgba(90, 65, 25, 0.15);
    border-radius: 22px;

    pointer-events: none;
}

.library-vault-card__icon {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 92px;
    height: 92px;

    border: 1px solid rgba(90, 65, 25, 0.2);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.48);

    box-shadow:
        0 12px 30px rgba(69, 51, 22, 0.1);

    font-size: 2.7rem;
}

.library-vault-card__content,
.library-vault-card__door {
    position: relative;
    z-index: 1;
}

.library-vault-card__type {
    margin: 0 0 0.6rem;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.library-vault-card h3 {
    margin: 0;

    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1;
}

.library-vault-card__tagline {
    margin: 1rem 0 0;

    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.45;
}

.library-vault-card__description {
    max-width: 680px;
    margin: 1rem 0 0;

    line-height: 1.7;
}

.library-vault-card__note {
    max-width: 680px;
    margin: 1rem 0 0;

    font-style: italic;
    line-height: 1.65;
}

.library-vault-card__door {
    display: flex;
    min-width: 210px;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;

    text-align: center;
}

.library-vault-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 1rem 1.25rem;

    border: 1px solid rgba(90, 65, 25, 0.4);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.35);

    font-weight: 800;
}

.library-vault-card__door small {
    opacity: 0.75;
    line-height: 1.4;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .library-vault-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .library-vault-card__door {
        grid-column: 1 / -1;
        width: min(420px, 100%);
        margin: 0 auto;
    }

}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 680px) {

    .library-rooms {
        padding: 3.5rem 1rem 4rem;
    }

    .library-rooms__heading {
        margin-bottom: 2.5rem;
    }

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

    .library-room-card {
        min-height: 0;
        padding: 2rem 1.6rem;
        border-radius: 24px;
    }

    .library-room-card::before {
        inset: 9px;
        border-radius: 17px;
    }

    .library-vault-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;

        padding: 2rem 1.5rem;

        text-align: center;
    }

    .library-vault-card__icon {
        width: 78px;
        height: 78px;
        margin: 0 auto;

        font-size: 2.2rem;
    }

    .library-vault-card__description,
    .library-vault-card__note {
        margin-left: auto;
        margin-right: auto;
    }

    .library-vault-card__door {
        grid-column: auto;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .library-room-card,
    .library-room-card__button {
        transition: none;
    }

    .library-room-card:hover,
    a.library-room-card__button:hover {
        transform: none;
    }

}