#browse-library{position:absolute;right:.35%;top:calc(var(--arrow-y,60%) + 32px);z-index:3;border:1px solid #bd9a62;border-radius:10px;padding:4px 6px;min-height:44px;background:#fff4d9;color:#234536;font:700 12px/1.15 system-ui;cursor:pointer}
#catalogue{width:min(640px,92vw);max-height:85svh;overflow:auto;background:#fff7e5;color:#213e30;border:1px solid #b69c70;border-radius:18px;padding:20px}#catalogue::backdrop{background:#15281899}
#catalogue header,#catalogue footer,.catalogue-filters{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#catalogue h2{margin:0;font: bold 30px Georgia}#catalogue button,#catalogue select{min-height:44px;background:#fffaf0;color:inherit;border:1px solid #b6a580;border-radius:9px;padding:5px 10px}
.catalogue-filters{justify-content:start;margin:12px 0}.catalogue-filters label{display:grid;gap:3px;font:600 14px system-ui}
#catalogue-list{display:grid;gap:6px;margin-bottom:12px}#catalogue-list button{display:grid;grid-template-columns:64px 1fr;column-gap:12px;text-align:left;align-content:center}#catalogue-list img{grid-row:span 2;width:64px;height:48px;object-fit:contain}#catalogue-list small{align-self:start}#catalogue-list strong{align-self:end}#catalogue button:disabled{opacity:.45}

#cover-preview{width:min(780px,92vw);background:#fff7e5;color:#213e30;border-radius:14px;padding:15px}#preview-close{float:right;min-width:44px;min-height:44px}#preview-art{display:block;max-height:62svh;max-width:100%;margin:auto;object-fit:contain}#cover-preview::backdrop{background:#142c20aa}
#reader-extras{margin:3px 0;gap:6px}#reader-extras:empty{display:none}#reader-extras select{border:1px solid #b69c70;background:#fff9ec;color:#213e30;border-radius:10px;padding:5px;max-width:100%}:is(#menu-topic,#cat-menu-topic),:is(#menu-level,#cat-menu-level){overscroll-behavior:contain}
:is(#menu-topic,#cat-menu-topic):popover-open{display:flex;flex-direction:column;gap:8px;overflow-y:auto;align-items:stretch}
:is(#menu-topic,#cat-menu-topic) h3{flex:none;margin:0 0 2px}:is(#menu-topic,#cat-menu-topic) button{flex:none;display:block;position:relative;height:53px;min-height:53px;aspect-ratio:auto;margin:0}
:is(#menu-topic,#cat-menu-topic) .painted-topic{background-size:cover;background-position:center;text-align:right;font:bold 18px Georgia;color:#19372d;text-shadow:0 1px 4px #fff}
.filters #browse-library{position:static;white-space:nowrap;background:#264d3d;color:#fff7df;font:700 15px system-ui;padding:6px 13px;border-radius:12px}
#catalogue{width:min(95vw,1160px);max-width:95vw;height:min(90svh,920px);max-height:90svh;padding:clamp(12px,2vw,24px);overflow:hidden}
#catalogue[open]{display:flex;flex-direction:column}#catalogue .catalogue-filters{margin:5px 0;gap:12px}#catalogue-count{margin:2px 0 8px;font-size:13px}
#catalogue-list{display:block;overflow:auto;overscroll-behavior:contain;min-height:0;flex:1;margin:0;scrollbar-gutter:stable}
.catalogue-ledge{display:flex;position:relative;align-items:end;justify-content:center;gap:16px;padding:8px 12px 26px;margin-bottom:12px;isolation:isolate}
.catalogue-ledge::after{content:'';position:absolute;inset:auto 0 0;height:32px;background:var(--catalogue-plank,url('/assets/browse/ledge-pencil.webp')) center/100% 100% no-repeat;z-index:-1}
#catalogue-list .catalogue-ledge button{display:block;flex:none;border:0;border-radius:2px 6px 6px 2px;overflow:hidden;padding:0;background:none;box-shadow:1px 2px 3px #35241655}
#catalogue-list .catalogue-ledge img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:699px){.collection-heading .filters{flex-wrap:wrap}.catalogue-filters label{font-size:12px}}
html[data-look=pencil]{--catalogue-plank:url('/assets/browse/ledge-pencil.webp')}
html[data-look=sunroom]{--catalogue-plank:url('/assets/browse/ledge-sunroom.webp')}
html[data-look=garden]{--catalogue-plank:url('/assets/browse/ledge-garden.webp')}
html[data-look=harbour]{--catalogue-plank:url('/assets/browse/ledge-harbour.webp')}
html[data-look=orchard]{--catalogue-plank:url('/assets/browse/ledge-orchard.webp')}
html[data-look=observatory]{--catalogue-plank:url('/assets/browse/ledge-observatory.webp')}
html[data-look=workshop]{--catalogue-plank:url('/assets/browse/ledge-workshop.webp')}
:is(#menu-topic,#cat-menu-topic) button:first-of-type{background:linear-gradient(90deg,#fff4db38,#fff4dbe8 48%,#fff4dbea),url('/assets/pencil-room.jpg') left 46%/cover;text-align:right}
#catalogue-list .catalogue-ledge button{overflow:visible;box-shadow:none;border:0;border-radius:0}#catalogue-list .physical-cover{height:100%}
#friend-directory{width:min(650px,94vw);max-height:86svh;overflow:auto;background:#fff6df;color:#214235;border:1px solid #bea77d;border-radius:18px;padding:20px}#friend-directory::backdrop{background:#172c20aa}
#friend-directory header{display:flex;align-items:center;justify-content:space-between}#friend-directory h2,#friend-directory h3{font-family:Georgia,serif;margin:.3em 0}
#directory-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:14px}#directory-list article{padding:14px;background:#fffaf0;border-radius:12px}#directory-list img{height:86px;width:86px;object-fit:cover;border-radius:50%}#friend-directory button{min-height:44px;margin:2px;padding:5px 12px;background:#f2dfaf;color:#163c30;border-radius:12px;border:1px solid #b59c70}
