:root { --ink: #203e39; --muted: #6c756c; --paper: #f9f7f0; --line: #deded1; --green: #234a3e; --gold: #ad834e; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body.library-page { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.65 "Segoe UI", Arial, sans-serif; }
a { color: inherit; text-decoration: none; } a:hover { color: #7d6038; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #ae7f3e; outline-offset: 5px; }
.library-container { width: min(1240px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: absolute; top: -100px; padding: 12px 20px; background: white; z-index: 100; }.skip-link:focus { top: 10px; }
.library-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 104px; }
.library-logo { display: flex; align-items: center; gap: 12px; font: 23px/1.2 Georgia, serif; letter-spacing: 2px; }
.library-logo small { display: block; font: 8px/1.2 "Segoe UI", sans-serif; letter-spacing: 2.2px; margin-top: 7px; }
.logo-mark { position: relative; font-size: 40px; line-height: 1; border: 1px solid #9d997d; border-radius: 30px 30px 0 0; padding: 9px 11px 5px; }
.logo-mark > span { position: absolute; font: 29px Georgia, serif; right: 12px; top: 15px; color: var(--gold); }
.library-nav { display: flex; align-items: center; gap: 30px; font-size: 13px; }
.library-account .navbar-nav { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.library-account .nav-link { font-size: 12px; padding: 0; }
.library-account button.nav-link { border: 1px solid #a6b1a2; border-radius: 3px; padding: 10px 15px; color: var(--ink) !important; white-space: nowrap; text-decoration: none; }
.library-account span.nav-link { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-hero { overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; min-height: 550px; gap: 24px; }
.hero-copy { padding: 58px 0 64px; position: relative; z-index: 1; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 2.1px; margin: 0 0 20px; text-transform: uppercase; }
.hero-copy .eyebrow { display: flex; align-items: center; gap: 10px; }.eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.hero-copy h1 { font-size: clamp(38px, 4.3vw, 60px); line-height: 1.12; letter-spacing: -2px; margin: 0 0 25px; }
.hero-copy h1 em { color: #6f7d5c; font-weight: 400; }
.hero-intro { color: var(--muted); font-size: 15px; line-height: 1.85; max-width: 405px; margin-bottom: 28px; }
.library-button { display: inline-flex; align-items: center; justify-content: center; gap: 32px; color: #fff; background: var(--green); border: 1px solid var(--green); border-radius: 3px; padding: 13px 23px; font-size: 13px; line-height: 1.7; cursor: pointer; }
.library-button:hover { color: white; background: #365d4a; }.library-button span { font-size: 18px; }
.hero-caption { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 11px; color: var(--muted); }.tiny-book { color: #927544; font-size: 22px; }
.hero-art { position: relative; width: 500px; height: 460px; max-width: 100%; justify-self: end; }
.art-arch { position: absolute; width: 325px; height: 390px; left: 100px; top: 25px; border-radius: 180px 180px 0 0; background: #e7e7d9; overflow: hidden; }
.art-window { position: absolute; border: 1px solid #c9cfba; inset: 20px 20px -1px; border-radius: 160px 160px 0 0; }.art-window:after { content: ""; position: absolute; width: 1px; height: 100%; background: #d4d8c6; left: 50%; }
.art-orbit { position: absolute; border: 1px solid #d7d7c7; border-radius: 50%; }.orbit-one { width: 435px; height: 435px; top: 3px; left: 42px; }.orbit-two { width: 475px; height: 290px; top: 101px; left: 16px; transform: rotate(-23deg); }
.art-star { position: absolute; color: #a2834c; z-index: 3; }.star-one { top: 25px; left: 49px; font-size: 45px; }.star-two { right: 0; top: 209px; font-size: 24px; }
.art-book { position: absolute; display: flex; flex-direction: column; align-items: center; width: 190px; height: 278px; padding: 28px 18px; box-shadow: 12px 17px 21px #283c3225; border-radius: 2px 6px 6px 2px; border-left: 9px solid #0002; z-index: 2; }
.art-book:after { content: ""; position: absolute; right: -7px; top: 5px; bottom: 2px; width: 7px; background: repeating-linear-gradient(to right, #e3dac7 0 1px, #f7f0e0 1px 3px); transform: skewY(-30deg); z-index: -1; }
.art-book > span { letter-spacing: 3px; font-size: 8px; }.art-book strong { font: 38px Georgia, serif; }.art-book small { font-size: 6px; letter-spacing: 1.4px; margin-top: auto; }
.art-book-back { left: 240px; top: 85px; transform: rotate(13deg); background: #bd9565; color: #493b2c; }.art-book-back strong { font-size: 19px; margin-top: 12px; }.art-book-back i { width: 80px; height: 105px; border: 1px solid #705334; border-radius: 50px 50px 0 0; margin-top: 25px; box-shadow: 7px 0 0 #bd9565, 8px 0 0 #705334; }
.art-book-front { left: 83px; top: 110px; transform: rotate(-13deg); background: #284f42; color: #e7d8a8; }.art-book-front strong { font-style: italic; font-size: 48px; margin-top: 12px; }
.book-motif { width: 80px; height: 80px; margin-top: 20px; border: 1px solid #b3ad7b; border-radius: 50%; position: relative; }.book-motif:before, .book-motif:after { content: ""; position: absolute; inset: 10px; border: 1px solid #b3ad7b; transform: rotate(45deg); }.book-motif:after { inset: 24px; border-radius: 50%; }
.book-stack { position: absolute; height: 20px; border-radius: 3px; z-index: 3; box-shadow: 0 12px 12px #283c3218; }.stack-one { width: 320px; left: 105px; top: 398px; background: #7d6243; border-top: 3px solid #b19b75; }.stack-two { width: 280px; left: 125px; top: 380px; background: repeating-linear-gradient(#ebe1cc 0 2px, #cfc5af 2px 3px); border-block: 3px solid #526653; transform: rotate(-2deg); }
.art-label { position: absolute; right: 15px; bottom: 0; z-index: 4; font: 18px/1.3 Georgia, serif; transform: rotate(-7deg); color: #6f775e; }
.collection-strip { border-block: 1px solid var(--line); background: #eeeee3; }.strip-inner { display: flex; align-items: center; gap: 35px; padding-block: 22px; font-size: 12px; color: #617063; }.strip-inner strong { color: var(--ink); font-weight: 600; font-size: 18px; margin-right: 6px; }.strip-note { margin-left: auto; font: italic 15px Georgia, serif; }.strip-note > span { font-size: 24px; margin-left: 14px; }
.subjects-section { padding-block: 65px 55px; scroll-margin-top: 20px; }.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 28px; }.section-heading .eyebrow { margin-bottom: 12px; color: #7d805f; }.section-heading h2 { font-size: clamp(27px, 3vw, 35px); letter-spacing: -.7px; margin: 0; }.text-link { font-size: 12px; border-bottom: 1px solid #9eaa96; padding-bottom: 4px; white-space: nowrap; }.text-link > span { margin-left: 18px; }
.subject-list { display: flex; flex-wrap: wrap; gap: 10px; }.subject-chip { display: flex; align-items: center; gap: 25px; padding: 12px 19px; border: 1px solid #d8dbcb; border-radius: 3px; font-size: 12px; background: #fbfaf5; }.subject-chip span { font-size: 10px; color: #7e886f; }.subject-chip.selected, .subject-chip:hover { background: #e6eadb; border-color: #bfc9af; color: var(--ink); }.muted { color: var(--muted); font-size: 13px; }
.catalog-section { padding-block: 48px 70px; border-top: 1px solid var(--line); background: #fdfcf8; }.section-note { color: var(--muted); font-size: 12px; margin: 0; }.catalog-search { padding: 17px; border: 1px solid var(--line); border-radius: 4px; display: grid; grid-template-columns: minmax(210px, 2.4fr) .9fr 1fr 1fr 1fr auto; gap: 16px; align-items: center; background: #f6f6ee; }.catalog-search label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: #6c7966; margin-bottom: 6px; }.catalog-search input, .catalog-search select { width: 100%; min-width: 0; border: 0; color: var(--ink); background: transparent; padding: 4px 0; font-size: 12px; }.catalog-search input::placeholder { color: #7c8275; }.search-field { min-width: 0; }.search-field > div { display: flex; gap: 8px; align-items: center; }.search-field > div > span { font-size: 25px; line-height: 1; }.filter-field { border-left: 1px solid #dcdfd2; padding-left: 14px; min-width: 0; }.catalog-search .library-button { padding-inline: 17px; gap: 18px; }
.results-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 23px; color: #7b8274; font-size: 11px; }.results-heading p { margin: 0; }.results-heading strong { color: #485d4b; font-weight: 500; }
.book-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 38px 28px; }.catalog-card { min-width: 0; }.cover-link { display: block; position: relative; overflow: hidden; background: #eeeee5; padding: 25px 35px; border-radius: 4px; }.book-cover { position: relative; aspect-ratio: 2 / 3; width: 100%; max-width: 230px; margin-inline: auto; box-shadow: 6px 8px 12px #203b3125; border-radius: 1px 3px 3px 1px; overflow: hidden; background: #355b4a; color: #e5dbb8; }.book-cover:after { content: ""; position: absolute; inset: 0; box-shadow: inset 5px 0 6px #0002; pointer-events: none; }.cover-fallback { display: flex; flex-direction: column; align-items: center; height: 100%; text-align: center; padding: 18px 15px; }.cover-imprint { font-size: 6px; letter-spacing: 1.7px; }.cover-rule { width: 22px; height: 1px; background: currentColor; opacity: .6; margin-block: 18px; }.cover-fallback strong { font: 20px/1.2 Georgia, serif; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow-wrap: anywhere; }.cover-author { font-size: 8px; margin-top: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }.cover-ornament { font-size: 42px; margin-block: auto; line-height: 1; padding-top: 7px; }.cover-bottom { font-size: 6px; letter-spacing: 1.5px; margin-top: 12px; }.book-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.book-cover img[hidden] { display: none; }.cover-tone-1 { background: #b18f66; color: #302f22; }.cover-tone-2 { background: #4a6270; color: #eee3c2; }.cover-tone-3 { background: #804e43; color: #f1dfba; }.cover-tone-4 { background: #d6c79f; color: #3d5140; }
.cover-action { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; background: #234a3e; color: white; font-size: 11px; padding: 8px; opacity: 0; transform: translateY(100%); transition: .2s; }.cover-link:hover .cover-action, .cover-link:focus-visible .cover-action { opacity: 1; transform: translateY(0); }.card-category { font-size: 9px; text-transform: uppercase; letter-spacing: 1.3px; color: #8b805d; margin-top: 18px; overflow-wrap: anywhere; }.catalog-card h3 { font-size: 21px; margin: 7px 0 6px; line-height: 1.3; overflow-wrap: anywhere; }.book-author { font-size: 12px; color: #7b8174; margin: 0 0 14px; }.card-meta { display: flex; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid #e5e6dc; color: #7b8174; font-size: 10px; overflow-wrap: anywhere; }
.catalog-empty { text-align: center; padding: 45px 24px 55px; border: 1px dashed #cdd2c0; background: #f7f7ef; border-radius: 4px; }.catalog-empty > span { font-size: 42px; color: #a8905c; }.catalog-empty h3 { font-size: 28px; margin: 10px 0; }.catalog-empty p { max-width: 450px; margin: 0 auto 20px; font-size: 13px; color: var(--muted); }.catalog-pagination { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 44px; font-size: 12px; }.catalog-pagination a { border: 1px solid #cbd1c0; padding: 8px 18px; }.catalog-pagination span { color: var(--muted); }
.about-section { display: grid; grid-template-columns: 1fr 1.4fr; gap: 70px; align-items: center; padding-block: 76px; }.about-symbol { position: relative; justify-self: center; font: 130px Georgia, serif; color: #687958; width: 220px; height: 220px; border: 1px solid #c5c9b4; border-radius: 120px 120px 0 0; text-align: center; padding-top: 27px; }.about-symbol:before { content: ""; position: absolute; inset: 10px; border: 1px solid #d7dac9; border-radius: 110px 110px 0 0; }.about-symbol span { font: 50px Georgia, serif; position: absolute; right: -20px; bottom: 23px; background: var(--paper); color: var(--gold); }.about-section .eyebrow { color: #7d805f; margin-bottom: 15px; }.about-section h2 { font-size: 36px; line-height: 1.2; margin-bottom: 18px; }.about-section p:not(.eyebrow) { max-width: 470px; color: var(--muted); font-size: 13px; line-height: 1.9; margin-bottom: 22px; }
.library-footer { padding-block: 36px; background: #eaece0; border-top: 1px solid #d5d9c9; }.footer-inner { display: flex; justify-content: space-between; gap: 20px; }.footer-name { font: 24px Georgia, serif; }.footer-inner p { margin: 8px 0 0; font-size: 11px; color: var(--muted); }.footer-links { display: flex; flex-direction: column; justify-content: space-between; align-items: end; font-size: 12px; }.footer-links small { color: var(--muted); font-size: 10px; }
.book-detail-page { padding-block: 40px 90px; }.book-detail { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; padding-top: 45px; align-items: start; }.detail-cover { background: #eeeee3; padding: 45px; border-radius: 4px; }.detail-cover .book-cover { max-width: 320px; }.detail-cover .cover-fallback { padding: 35px 24px; }.detail-cover .cover-fallback strong { font-size: 30px; }.detail-cover .cover-imprint, .detail-cover .cover-author { font-size: 10px; }.detail-cover .cover-ornament { font-size: 60px; }.detail-copy { padding-top: 15px; min-width: 0; }.detail-copy h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.15; overflow-wrap: anywhere; }.detail-author { color: var(--muted); margin: 18px 0 30px; }.detail-facts { border-block: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 25px; padding: 20px 0; margin-bottom: 28px; }.detail-facts > div { min-width: 90px; }.detail-facts dt { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 500; }.detail-facts dd { font-size: 13px; margin: 6px 0 0; overflow-wrap: anywhere; }.detail-copy h2 { font-size: 25px; margin-bottom: 16px; }.book-description { font-size: 14px; line-height: 1.9; white-space: pre-wrap; color: var(--muted); overflow-wrap: anywhere; margin-bottom: 25px; }.detail-keywords { font-size: 12px; margin-bottom: 25px; overflow-wrap: anywhere; }.detail-keywords > span { text-transform: uppercase; font-size: 10px; letter-spacing: 1px; }.detail-keywords p { color: var(--muted); margin-top: 6px; }
@media (max-width: 1100px) { .library-container { width: calc(100% - 48px); }.library-nav { gap: 18px; }.hero-grid { grid-template-columns: 1.1fr 1fr; }.hero-art { transform: scale(.85); transform-origin: center right; margin-left: -60px; width: 450px; max-width: none; }.strip-inner { gap: 20px; }.strip-note { display: none; }.catalog-search { grid-template-columns: 2fr 1fr 1fr; }.search-field { grid-column: span 2; }.filter-field { border-left: 0; padding-left: 0; }.book-grid { gap: 28px 20px; }.cover-link { padding: 22px; }.cover-fallback strong { font-size: 17px; }.book-detail { gap: 40px; } }
@media (max-width: 800px) { .header-inner { flex-wrap: wrap; padding-block: 20px; gap: 18px; }.library-nav { order: 3; width: 100%; justify-content: center; border-top: 1px solid var(--line); padding-top: 14px; }.hero-grid { grid-template-columns: 1fr 1fr; min-height: 460px; }.hero-copy { padding-block: 40px; }.hero-copy h1 { font-size: 38px; }.hero-art { transform: scale(.66); margin-left: -140px; }.hero-intro { font-size: 13px; }.eyebrow { font-size: 8px; letter-spacing: 1.5px; }.hero-caption { font-size: 9px; }.book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.cover-link { padding: 28px 40px; }.cover-fallback strong { font-size: 22px; }.section-note { display: none; }.about-section { gap: 30px; }.about-section h2 { font-size: 30px; }.about-symbol { transform: scale(.85); }.detail-cover { padding: 25px; }.book-detail { gap: 30px; grid-template-columns: .9fr 1.1fr; }.detail-cover .cover-fallback strong { font-size: 22px; } }
@media (max-width: 560px) { .library-container { width: calc(100% - 36px); }.library-logo { font-size: 18px; gap: 8px; }.library-logo small { font-size: 6px; letter-spacing: 1.5px; }.logo-mark { font-size: 30px; padding: 8px; }.logo-mark > span { font-size: 22px; top: 12px; right: 10px; }.library-account button.nav-link { font-size: 10px; padding: 9px; }.library-account span.nav-link { display: none; }.library-nav { gap: 20px; font-size: 11px; flex-wrap: wrap; }.hero-grid { grid-template-columns: 1fr; gap: 0; }.hero-copy { text-align: center; padding-block: 44px 0; }.hero-copy .eyebrow, .hero-caption { justify-content: center; }.hero-copy h1 { font-size: 40px; letter-spacing: -1.5px; }.hero-intro { margin-inline: auto; max-width: 320px; }.hero-art { width: 450px; height: 350px; transform: scale(.72); transform-origin: top center; margin: 20px -65px -32px; justify-self: center; }.hero-caption { margin-top: 18px; }.strip-inner { justify-content: space-between; gap: 12px; padding-block: 16px; font-size: 9px; }.strip-inner > span { flex: 1; }.strip-inner strong { display: block; font-size: 20px; }.subjects-section { padding-block: 38px; }.section-heading { align-items: start; flex-direction: column; gap: 15px; }.section-heading h2 { font-size: 28px; }.subject-chip { padding: 9px 12px; gap: 13px; font-size: 11px; }.catalog-section { padding-block: 36px 45px; }.catalog-search { grid-template-columns: 1fr 1fr; gap: 14px; padding: 15px; }.search-field { border-bottom: 1px solid var(--line); padding-bottom: 10px; }.catalog-search .library-button { gap: 20px; align-self: end; padding-block: 8px; }.book-grid { gap: 28px 16px; }.cover-link { padding: 18px 16px; }.cover-fallback { padding: 13px 9px; }.cover-fallback strong { font-size: 15px; }.cover-rule { margin-block: 10px; }.cover-imprint, .cover-bottom { font-size: 5px; letter-spacing: 1px; }.cover-author { font-size: 7px; margin-top: 10px; }.cover-ornament { font-size: 30px; }.catalog-card h3 { font-size: 18px; }.card-category { font-size: 8px; letter-spacing: .7px; }.book-author { font-size: 11px; }.card-meta { font-size: 9px; }.cover-action { display: none; }.catalog-empty h3 { font-size: 24px; }.about-section { grid-template-columns: 1fr; padding-block: 45px; gap: 26px; }.about-symbol { display: none; }.footer-inner { flex-direction: column; gap: 22px; }.footer-links { align-items: start; gap: 12px; }.book-detail { grid-template-columns: 1fr; padding-top: 30px; gap: 25px; }.detail-cover { width: 100%; max-width: 350px; justify-self: center; padding: 30px 45px; }.detail-cover .cover-fallback strong { font-size: 25px; }.detail-cover .cover-fallback { padding: 25px 18px; }.book-detail-page { padding-bottom: 50px; }.catalog-pagination { gap: 15px; font-size: 11px; }.catalog-pagination a { padding: 8px 12px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.cover-action { transition: none; } }