/* Catalogues: the index reuses Collections; the reader follows the product page's title row, rail controls and thumbnails. */
.collections-page #catalogues{padding:72px var(--pad) 64px;scroll-margin-top:72px}
.catalogue-intro h1{margin-bottom:calc(1.1em + 22.1px)}

/* Reader: a one-line strip of facts, the open book filling the rest of the screen, then text-link actions. */
.catalogue-reader #catalogues{padding-top:calc(66px + 12px)}
.reader-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:32px;row-gap:4px;margin-bottom:12px}
.reader-strip :is(.reader-title,.reader-facts){margin:0;font-family:"neue-haas-grotesk-text",Arial,sans-serif;font-size:17px;line-height:1.3;letter-spacing:normal}
.reader-title{font-weight:500}
.reader-facts{display:contents;font-weight:400}
.reader-facts>div{display:flex}
.reader-facts dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.reader-facts dd{margin:0;font-variant-numeric:tabular-nums}
/* Actions follow the product page's enquiry link: underlined text, lettering at the top of a 44px target, no outline or fill. */
.reader-actions{display:flex;flex-wrap:wrap;justify-content:center;column-gap:var(--space-group,32px);margin:var(--space-group,32px) 0 -21px}
.reader-action{display:inline-flex;align-items:flex-start;min-height:44px;padding:0;border:0;background:none;color:inherit;font-family:"neue-haas-grotesk-text",Arial,sans-serif;font-size:17px;font-weight:400;line-height:1.3;letter-spacing:normal;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.reader-action:hover{text-decoration-thickness:2px}
.reader-action:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
/* The enquiry block spans the page as on product pages; it closes the page instead of the main padding. */
.catalogue-reader #catalogues{padding-bottom:0}
.catalogue-reader #catalogues>.contact-block{margin-inline:calc(var(--pad) * -1)}

/* Product-page rail arrows (product.css is not loaded on catalogue pages). */
.finish-arrow{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid rgb(89 64 55 / 18%);border-radius:50%;background:rgb(89 64 55 / 6%);color:var(--brown);cursor:pointer;transition:background-color .2s,opacity .2s}
.finish-arrow:hover:not(:disabled){background:rgb(89 64 55 / 14%)}
.finish-arrow:disabled{opacity:.25;cursor:default}
.finish-arrow:focus-visible{outline:2px solid var(--brown);outline-offset:4px}

/* Reader: the open book. JS caps the width so a spread always fits the screen height. */
.reader-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:16px}
.reader-book{flex:0 1 auto;width:var(--book-width,100%);min-width:0;min-height:200px;opacity:0;transition:opacity .6s cubic-bezier(.22,1,.36,1)}
.reader-book.is-ready{opacity:1}
.reader-book{display:grid;aspect-ratio:calc(var(--page-ratio) * 2);touch-action:pan-y pinch-zoom}
.reader-book.is-single{aspect-ratio:var(--page-ratio)}
/* Spreads share one cell; a turn fades the next one in over the last. */
.reader-spread{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;transition:opacity .28s cubic-bezier(.4,0,.2,1)}
.reader-book.is-single .reader-spread{grid-template-columns:1fr}
.reader-spread.is-entering,.reader-spread.is-leaving{opacity:0}
.reader-page{min-width:0;background:rgb(89 64 55 / 7%);overflow:hidden;cursor:zoom-in}
.reader-book.is-turning .reader-page{cursor:default}
.reader-page img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
.reader-page img:not([src]){visibility:hidden}

/* Zoom happens in place: the spread enlarges around the point you pressed. */
.reader-zoom{position:absolute;z-index:4;overflow:hidden;background:var(--paper);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.reader-zoom[hidden]{display:none}
.reader-zoom.is-dragging{cursor:grabbing}
.reader-zoom-canvas{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.reader-zoom.is-animating .reader-zoom-canvas{transition:transform .55s cubic-bezier(.22,1,.36,1)}
.reader-zoom-canvas img{position:absolute;display:block;max-width:none;background:rgb(89 64 55 / 7%);pointer-events:none}

/* Reader: page thumbnails, product-gallery duotone until their pages are open */
.reader-nav{position:relative;display:flex;justify-content:center;margin-top:16px}
/* All pages sits under the previous-page arrow: half the stage, less half the book, the 16px gap and the 44px arrow. */
.reader-grid-open{position:absolute;top:50%;left:max(0px,calc(50% - var(--book-width,100%) / 2 - 60px));translate:0 -50%}
.reader-thumbs{display:flex;gap:var(--space-label,8px);width:max-content;max-width:min(100%,calc(var(--book-width,100%) + 6px));padding:3px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;box-sizing:border-box;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.reader-thumbs.is-dragging{cursor:grabbing}
.reader-thumbs.is-dragging .reader-thumb,.reader-thumbs.is-scrubbing .reader-thumb{pointer-events:none}
.reader-thumbs::-webkit-scrollbar{display:none}
.reader-thumb{display:block;flex:0 0 54px;width:54px;padding:0;background:rgb(89 64 55 / 7%);cursor:pointer}
.reader-thumb img{display:block;-webkit-user-drag:none;width:100%;height:auto;aspect-ratio:var(--page-ratio);object-fit:cover;filter:url(#catalogue-monochrome)}
.reader-thumb[aria-current=true] img,.reader-thumb:hover img{filter:none}
.reader-thumb:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
.reader-filter{position:absolute;width:0;height:0}

/* Strip preview: the page under the pointer, or under a held finger, shown large above the strip. */
.reader-peek{position:absolute;bottom:calc(100% + 12px);left:0;z-index:5;width:200px;padding:6px 6px 0;background:var(--paper);box-shadow:0 14px 36px rgb(43 30 25 / 22%),0 2px 6px rgb(43 30 25 / 10%);opacity:0;translate:0 6px;pointer-events:none;transition:opacity .18s,translate .3s cubic-bezier(.22,1,.36,1)}
.reader-peek.is-on{opacity:1;translate:0 0}
.reader-peek img{display:block;width:100%;height:auto;aspect-ratio:var(--page-ratio);object-fit:cover;background:rgb(89 64 55 / 7%)}
.reader-peek span{display:block;padding:6px 0 7px;font-size:14px;line-height:1.2;font-variant-numeric:tabular-nums}

/* All pages: every page as a grid over the reader; a page opens the book there. */
.reader-grid{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--brown);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.reader-grid::-webkit-scrollbar{display:none}
.reader-grid::backdrop{background:transparent}
.reader-grid[open]{animation:reader-grid-in .45s cubic-bezier(.22,1,.36,1)}
@keyframes reader-grid-in{from{opacity:0;translate:0 12px}}
.reader-grid-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px;margin:0 var(--pad);background:var(--paper);border-bottom:1px solid currentColor}
.reader-grid-title{margin:0;font-family:"neue-haas-grotesk-display",Arial,sans-serif;font-size:24px;font-weight:500;line-height:1.2;letter-spacing:-.0125em}
.reader-grid-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-prose,24px) var(--space-media,16px);padding:var(--space-group,32px) var(--pad) var(--space-section-end,64px)}
.reader-grid-page{display:block;min-width:0;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.reader-grid-page img{display:block;width:100%;height:auto;aspect-ratio:var(--page-ratio);object-fit:cover;background:rgb(89 64 55 / 7%);transition:opacity .2s}
.reader-grid-page:hover img{opacity:.86}
.reader-grid-page span{display:block;margin-top:var(--space-label,8px);font-size:14px;line-height:1.2;font-variant-numeric:tabular-nums}
.reader-grid-page[aria-current=true] img{outline:2px solid var(--brown);outline-offset:3px}
.reader-grid-page[aria-current=true] span{font-weight:500}
.reader-grid-page:focus-visible{outline:2px solid var(--brown);outline-offset:4px}
.reader-grid-scrub{display:none}

/* Discover more doors and More catalogues: the product page's Discover more rail. */
.reader-rail{--product-gap:clamp(.75rem,.6648rem + .4261vw,1.125rem);padding:var(--space-group,32px) 0 var(--space-section-end,64px);border-top:1px solid currentColor}
.reader+.reader-rail{margin-top:var(--space-section-end,64px)}
.reader-rail .related-heading{position:relative;margin-bottom:var(--space-group,32px)}
.reader-rail.is-scrollable .related-heading{padding-right:calc(88px + 2 * var(--space-label,8px))}
.reader-rail h2{margin:0;min-width:0;font-size:clamp(2.25rem,1.8523rem + 1.9886vw,4rem);font-weight:500;line-height:1.1;letter-spacing:-.025em}
.reader-rail .related-controls{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%);gap:var(--space-label,8px)}
.reader-rail.is-scrollable .related-controls{display:flex}
.reader-rail .related-grid{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--product-gap))/4);gap:var(--product-gap);padding:0 0 8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.reader-rail .related-grid::-webkit-scrollbar{display:none}
.reader-rail .related-grid:focus-visible{outline:2px solid var(--brown);outline-offset:4px}
.reader-rail .related-door{display:block;min-width:0;scroll-snap-align:start}
.reader-rail .related-image{aspect-ratio:3/4;overflow:hidden;background:var(--brown)}
.reader-rail .related-image img{display:block;width:100%;height:100%;object-fit:cover}
.reader-rail .related-door h3{margin:var(--space-label,8px) 0 0;overflow:hidden;font-size:1.5rem;font-weight:500;line-height:1.2;letter-spacing:normal;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1336px){.reader-rail .related-grid{grid-auto-columns:calc((100% - 2 * var(--product-gap))/3)}}
@media(max-width:893px){.reader-rail .related-grid{grid-auto-columns:calc((100% - var(--product-gap))/2)}}
@media(max-width:539px){.reader-rail .related-grid{grid-auto-columns:calc((100% - var(--product-gap))/1.5)}}

@media(max-width:767px){
 .catalogue-library #catalogues{padding-top:64px}
 .reader-viewer{width:calc(100% + var(--pad) * 2);margin-inline:calc(var(--pad) * -1)}
 .reader-stage{display:block}
 .reader-stage .reader-turn{position:absolute;top:50%;z-index:3;margin-top:-22px;background:rgb(246 245 244 / 82%);border-color:rgb(89 64 55 / 14%)}
 .reader-stage .reader-turn[data-turn="-1"]{left:8px}
 .reader-stage .reader-turn[data-turn="1"]{right:8px}
 .reader-stage .reader-turn:disabled{opacity:0;pointer-events:none}
 .reader-nav{flex-direction:column;align-items:flex-start;gap:var(--space-media,16px)}
 .reader-grid-open{position:static;order:1;align-self:center;translate:none}
 .reader-thumbs{width:100%;max-width:none;padding:3px var(--pad)}
 .reader-peek{width:150px}
 .reader-grid-pages{grid-template-columns:repeat(var(--grid-columns,3),minmax(0,1fr));gap:var(--space-media,16px) var(--space-label,8px);padding-top:var(--space-prose,24px);touch-action:pan-y}
 .reader-grid-page span{font-size:13px}
 .reader-grid-scrub{position:fixed;top:82px;right:0;bottom:16px;z-index:3;display:block;width:36px;touch-action:none}
 .reader-grid-scrub span{position:absolute;top:0;right:4px;width:4px;height:56px;border-radius:2px;background:var(--brown);opacity:.35;transition:opacity .2s,width .2s}
 .reader-grid-scrub.is-active span{width:6px;opacity:.9}
 .reader-grid-scrub.is-active span::before{content:attr(data-page);position:absolute;top:50%;right:18px;translate:0 -50%;padding:7px 10px;background:var(--brown);color:var(--paper);font-size:14px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
 .reader-strip{column-gap:20px}
 .reader-actions{flex-direction:column;align-items:flex-start;margin-top:var(--space-prose,24px)}
 .reader-action{font-family:"neue-haas-grotesk-display",Arial,sans-serif;font-size:24px;font-weight:500;line-height:1.2;letter-spacing:-.0125em;min-height:48px}
 .reader-rail{padding:24px 0 48px}
 .reader+.reader-rail{margin-top:48px}
 .reader-rail .related-heading{margin-bottom:24px}
}
@media(prefers-reduced-motion:reduce){
 .reader-book,.reader-spread,.reader-zoom.is-animating .reader-zoom-canvas,.reader-peek{transition:none}
 .reader-grid[open]{animation:none}
}
