/* Shelf geometry follows the books. The two sections borrow only the wall
   and plants from the illustration; the ledges belong to the layout. */
@media (min-width:700px){
.library{width:100%;max-width:1500px;padding:0 clamp(12px,2%,32px);background:#fbefda;min-height:100svh}
.library .header{height:auto;min-height:60px;max-height:none;flex-wrap:nowrap;gap:14px;padding:8px 18px}
.library .brand{font-size:13px}.library .brand-top{font-size:34px}.library .logo-book{font-size:20px}
.library .header nav{gap:2px}.library .nav-tab{font-size:15px;min-height:44px;padding:10px 15px}
.library .search{flex:1 1 140px;min-width:115px;padding:3px 12px}.library .search input{font-size:15px}
.library .hero{height:auto;max-height:none;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);align-items:end;gap:18px;padding:18px 4% 10px;border:0;box-shadow:none;background:var(--scene) center top/100% 235% no-repeat}
.library .welcome{text-align:left;padding-bottom:7px}.library .welcome h1{font-size:clamp(32px,3.3vw,48px);letter-spacing:-.04em;white-space:normal;margin:0 0 5px}
.library .tagline{font-size:17px;line-height:1.25;margin:0 0 14px}.library .narrator-section h2{font-size:20px;margin:0 0 8px}
.library .narrators{gap:16px;justify-content:flex-start;flex-wrap:nowrap}.library .portrait{width:clamp(55px,6.3vw,90px)}.library .narrator{font-size:15px}
.library .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:14px;margin:0;max-width:none;padding:0}
.library .featured-cover{margin:0;align-self:end}.library .feature-copy{padding:0 0 6px;background:none}.library .featured-label{font-size:12px;padding:4px 9px}
.library .feature-copy h2{font-size:clamp(19px,2vw,29px);margin:6px 0}.library .feature-copy p{font-size:14px;line-height:1.3;margin:0 0 7px}
.library .tags{gap:4px}.library .tags span{font-size:11px;padding:3px 7px}.library .read-button{font-size:14px;min-height:44px;padding:8px 12px;margin:8px 0 0;width:100%}
.library .collection{border-radius:0;margin:0;padding:12px 4% 0;background:var(--scene) center 80%/100% 340% no-repeat}
.library .collection-heading{flex-direction:row;align-items:center;flex-wrap:wrap;margin:0;gap:8px 20px}.library .collection h2{font-size:clamp(25px,2.5vw,34px)}
.library .filters{width:auto;gap:10px}.library .filters label{width:auto;font-size:12px}.library .filters select{width:clamp(120px,12vw,175px);font-size:14px;min-height:44px;padding:6px 10px}
.library .book-grid{--gap:20px;gap:var(--gap);min-height:0;padding:12px 4px 3px;align-items:flex-start;overflow-y:hidden}
.library .book-card{display:grid;grid-template-rows:auto 9px auto auto;flex:0 0 calc((100% - 3 * var(--gap))/4);min-width:0;padding:0;border:0}
.library .book-card .cover-button{grid-row:1;width:100%;max-width:none;margin:0}.library .book-tags{grid-row:3;margin:6px 0 0;gap:4px}.library .book-tags span{padding:4px 7px;font-size:11px}.library .shelf-credit{grid-row:4;margin:4px 0;font-size:12px}
.library .collection-foot{margin:3px auto 0;min-height:44px}.library footer{padding:7px 0 5px;font-size:14px}.library footer span{margin-top:3px}
}
@media(min-width:700px) and (max-width:900px){
.library .hero{grid-template-columns:1fr;gap:12px;padding-top:20px}
.library .welcome{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px}
.library .welcome h1,.library .tagline{grid-column:1;margin:0}.library .narrator-section{grid-column:2;grid-row:1/3}
.library .feature{max-width:650px;justify-self:center}.library .portrait{width:54px}.library .narrators{gap:12px}
.library .book-grid{--gap:16px}.library .book-card{flex-basis:calc((100% - 2 * var(--gap))/3)}
}
.feature-copy .feature-brief{display:none}
@media(min-width:900px) and (max-height:800px){
.library .feature-copy p:has(+ .feature-brief){display:none}
.library .feature-copy .feature-brief{display:block}
.library .hero{padding-top:12px}
.library .collection{padding-top:7px}
}
/* Reuse the two painted bays. The lower bay is sized to the actual book
   row, so its timber stays under the covers when Safari zooms or reflows. */
@media(min-width:700px){
.library{background:#fbefda;padding-inline:0}
.library .header{width:92%;margin:auto}
.library .hero{padding-inline:6%;background:var(--scene) center top / 100% 184.5% no-repeat}
.library .feature{padding-bottom:clamp(12px,2svh,30px)}
.library .collection{isolation:isolate;background:none;padding-inline:6%}
.library .collection::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0 0 auto;height:calc(var(--landing,250px) * 1.105);background:var(--scene) center 88% / 100% 264% no-repeat}
.library .book-card{grid-template-rows:auto clamp(15px,2.7svh,28px) auto auto}
.library .book-grid{padding-top:14px}
.library .collection-foot{margin:3px auto 5px}
}
@media(min-width:901px) and (pointer:coarse), (min-width:901px) and (max-width:1100px){
.library .portrait{width:clamp(68px,7.3vw,94px)}
.library .welcome h1{font-size:clamp(36px,3.8vw,48px)}
.library .feature{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
}
@media(min-width:700px) and (max-width:900px){
.library .portrait{width:65px}.library .feature{max-width:700px}
}
@media(min-width:1101px) and (pointer:fine){
.library{width:min(100%,max(1160px,185svh));max-width:1780px;background:linear-gradient(#fbefd9,#f7e9d0);padding-top:8px}
.library .header{min-height:70px;border-radius:20px;padding:10px 24px;width:90%;background:#fffaf0}
.library .brand-top{font-size:44px}.library .brand{font-size:15px}.library .nav-tab{font-size:17px}
.library .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:24px;padding:clamp(20px,4svh,48px) 6% 12px}
.library .welcome h1{font-size:clamp(39px,3.7vw,61px)}.library .tagline{font-size:clamp(18px,1.4vw,23px);margin:8px 0 18px}
.library .narrator-section h2{font-size:23px}.library .portrait{width:clamp(78px,10.7svh,140px)}
.library .feature-copy h2{font-size:clamp(23px,1.8vw,30px)}.library .feature-copy p{font-size:clamp(14px,1vw,17px)}
.library .collection{padding-top:15px}.library .collection h2{font-size:clamp(29px,2.5vw,40px)}
.library .book-grid{--gap:clamp(20px,2vw,36px);padding-top:18px}
}
@media(min-width:1101px) and (max-height:760px) and (pointer:fine){
.library .hero{padding-top:10px}.library .header{min-height:60px;padding-block:5px}.library .collection{padding-top:6px}.library .book-grid{padding-top:10px}
}