.library-page { background: #f6f3eb; --paper: #f6f3eb; --ink: #243b39; --muted: #67716b; }
.library { max-width: 1120px; margin: auto; padding: 25px 0 15px; }
.library-hero { padding: 10px 0 38px; max-width: 850px; }
.eyebrow { color: #96703d; letter-spacing: .2em; font-size: 12px; font-weight: 600; }
.library h1 { margin: 15px 0 18px; font: 600 clamp(28px,3.5vw,44px)/1.6 var(--serif); letter-spacing: .04em; }
.library-hero>p:not(.eyebrow) { max-width: 660px; font-size: 14px; line-height: 2; color: var(--muted); }
.shelf-nav { display: flex; gap: 24px; margin-top: 25px; }
.shelf-nav a { font-size: 13px; padding: 8px 0; border-bottom: 1px solid #bba987; }
.shelf-nav span { margin-left: 12px; font-size: 10px; color: #96703d; }
.shelf-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid #d3d5c7; padding: 22px 0 26px; }
.shelf-heading h2 { font: 600 24px/1.5 var(--serif); margin: 0; }
.shelf-heading>span { font-size: 12px; color: var(--muted); letter-spacing: .08em; }
.library section { margin-bottom: 42px; }
.library .resource-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 38px; }
.book-item { display: grid; grid-template-columns: 154px minmax(0,1fr); gap: 24px; align-items: start; min-width: 0; }
.book-cover { position: relative; aspect-ratio: 2/3; display: flex; flex-direction: column; padding: 19px 17px; overflow: hidden; box-shadow: 7px 10px 16px #243b391c, inset 5px 0 5px #0002; border-radius: 2px 5px 5px 2px; transition: transform .2s; }
.book-cover:hover { transform: translateY(-5px) rotate(-1deg); }
.cover-pagola { background: #244944; color: #f3e5bd; }
.cover-emiliano { background: #a44e3b; color: #fff1d0; }
.cover-lorenzo { background: #d8c9a6; color: #344a40; }
.cover-top { font-size: 7px; letter-spacing: .14em; opacity: .75; }
.cover-title { font: 600 22px/1.6 var(--serif); margin-top: 24px; letter-spacing: .08em; position: relative; z-index: 1; }
.cover-subtitle { font: 500 9px/1.7 var(--serif); margin-top: 6px; }
.cover-author { font-size: 6px; letter-spacing: .1em; margin-top: auto; z-index: 1; }
.cover-number { position: absolute; right: 12px; bottom: 13px; font: 11px var(--serif); opacity: .6; }
.cover-art { position: absolute; width: 112px; height: 112px; border: 1px solid currentColor; opacity: .23; border-radius: 50%; left: 53px; top: 108px; }
.cover-art::before { content: ''; position: absolute; width: 72px; height: 72px; border: 1px solid currentColor; border-radius: 50%; top: 19px; left: 19px; }
.cover-emiliano .cover-art { border-radius: 0; transform: rotate(45deg); left: 62px; top: 116px; }
.cover-lorenzo .cover-art { border-radius: 60% 0; width: 62px; height: 95px; transform: rotate(25deg); top: 120px; left: 80px; }
.book-info { padding-top: 2px; overflow-wrap: anywhere; }
.book-info h3 { font: 600 19px/1.65 var(--serif); margin: 0 0 9px; }
.book-info p { font-size: 12px; line-height: 1.95; color: var(--muted); margin: 12px 0; }
.book-info .book-author { font-size: 11px; color: #956848; margin: 0 0 15px; }
.book-info .editorial-note { font-size: 10px; line-height: 1.8; }
.library .actions { gap: 9px; margin-top: 18px; }
.library .actions a { font-size: 11px; padding: 8px 13px; border-radius: 4px; border-color: #bac4b7; }
.library .actions a:first-child { background: #294b43; border-color: #294b43; color: #fff9ec; }
.library .actions a:hover { box-shadow: 0 3px 8px #243b3920; }
.book-request { display: grid; grid-template-columns: 240px 1fr; gap: 28px; padding: 28px 32px; background: #e9e9dd; border-left: 3px solid #a28a5d; }
.book-request h2 { font: 600 22px/1.6 var(--serif); margin: 0; }
.book-request p { font-size: 12px; line-height: 2; margin: 0; color: var(--muted); }
.book-request a { color: #765529; text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:1000px) { .library .resource-list { gap: 30px; } .book-item { grid-template-columns: 120px minmax(0,1fr); gap: 17px; } .book-cover { padding: 15px 12px; } .cover-title { font-size: 19px; margin-top: 15px; } .cover-art { top: 90px; } }
@media(max-width:760px) { .library .resource-list { grid-template-columns: 1fr; gap: 34px; } .book-item { grid-template-columns: 135px minmax(0,1fr); gap: 22px; } .book-request { grid-template-columns: 1fr; gap: 12px; padding: 24px; } .library-hero { padding-bottom: 24px; } .shelf-heading>span { font-size: 10px; } }
@media(max-width:380px) { .book-item { grid-template-columns: 105px minmax(0,1fr); gap: 16px; } .cover-title { font-size: 17px; } .cover-top { font-size: 6px; } .cover-author { font-size: 5px; } .cover-art { top: 80px; } .book-info h3 { font-size: 17px; } .library .actions { gap: 6px; } .library .actions a { padding: 7px 9px; } }
.cover-lorenzo .cover-title { font-size: 17px; letter-spacing: .02em; }
@media(max-width:380px) { .cover-lorenzo .cover-title { font-size: 14px; } }
@media(prefers-reduced-motion:reduce) { .book-cover { transition: none; } }
.book-request form { margin-top: 22px; }
.request-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.book-request label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.book-request label span { color: #67716b; font-size: 10px; font-weight: 400; margin-left: 8px; }
.book-request input, .book-request textarea { box-sizing: border-box; display: block; width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid #abb5a7; border-radius: 4px; background: #fffdf7; color: #243b39; font: inherit; font-size: 16px; }
.book-request textarea { resize: vertical; min-height: 110px; }
.book-request input:focus-visible, .book-request textarea:focus-visible, .book-request button:focus-visible { outline: 2px solid #294b43; outline-offset: 3px; }
.book-request button { margin-top: 16px; padding: 11px 30px; border: 1px solid #294b43; border-radius: 4px; background: #294b43; color: #fff9ec; font: inherit; font-size: 14px; cursor: pointer; }
.book-request button:disabled { opacity: .65; cursor: wait; }
.book-request .request-privacy { font-size: 11px; }
.book-request #request-status { margin-top: 12px; overflow-wrap: anywhere; }
.book-request #request-status[data-state="error"] { color: #9b3428; }
.book-request #request-status[data-state="success"] { color: #294b43; font-weight: 600; }
.request-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media(max-width:600px) { .request-fields { grid-template-columns: 1fr; gap: 0; } }