/* AL-SAMA — The Architectural Library (Knowledge Center) */

.library-body { margin: 0; font-family: 'Work Sans', sans-serif; background: #17100A; color: #F0E7D6; -webkit-font-smoothing: antialiased; }
html.library-html, .library-body { overflow: hidden; overscroll-behavior: none; height: 100%; }
.library-body ::selection { background: var(--brand-gold); color: #20150B; }
.library-body a { color: #F0E7D6; }
.library-body a:hover { color: var(--brand-gold); }

.lib-room { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(180deg, #1B1108 0%, #241708 45%, #2E1D0C 100%); }

/* --- travelling wall --- */
.lib-viewport { position: absolute; inset: 0; touch-action: none; cursor: grab; perspective: 1500px; }
.lib-viewport.dragging { cursor: grabbing; }
.lib-wall { position: absolute; left: 0; display: flex; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.28,0.8,0.28,1); will-change: transform; }
.lib-wall.dragging { transition: none; }

.lib-pillar { flex: 0 0 clamp(22px,2.4vw,38px); background: linear-gradient(90deg, #4A2F16 0%, #7A5328 45%, #3E2610 100%); box-shadow: inset -4px 0 10px rgba(10,5,0,0.6); }
.lib-pillar.end { flex: 0 0 clamp(28px,3vw,46px); }
.lib-bay { flex: 0 0 auto; display: flex; flex-direction: column; }
.lib-cornice { height: clamp(16px,2vw,26px); background: linear-gradient(180deg, #9A6530 0%, #74491F 55%, #4E3114 100%); box-shadow: inset 0 2px 2px rgba(255,214,140,0.32), 0 4px 8px rgba(10,5,0,0.55); }
.lib-row { flex: 0 0 auto; display: flex; flex-direction: column; }
.lib-cavity { display: flex; align-items: flex-end; gap: 3px; padding: 0 clamp(10px,1.2vw,18px); background: linear-gradient(180deg, #150C03 0%, #231506 22%, #33200D 100%); box-shadow: inset 0 20px 30px rgba(8,4,0,0.78), inset 6px 0 12px rgba(8,4,0,0.5), inset -6px 0 12px rgba(8,4,0,0.5); overflow: hidden; }
.lib-board { height: clamp(11px,1.4vw,17px); background: linear-gradient(180deg, #9A6530 0%, #74491F 55%, #4E3114 100%); box-shadow: inset 0 1px 1px rgba(255,214,140,0.32), 0 5px 9px rgba(10,5,0,0.6); }
.lib-plinth { height: clamp(16px,2vw,22px); background: linear-gradient(180deg, #74491F 0%, #4E3114 60%, #35200E 100%); box-shadow: inset 0 2px 2px rgba(255,214,140,0.22), 0 8px 14px rgba(10,5,0,0.6); }
.lib-floor { height: clamp(44px,6vh,72px); background: repeating-linear-gradient(90deg, #4E3316 0px, #5C3D1E 70px, #462D14 140px); box-shadow: inset 0 12px 20px rgba(10,5,0,0.6); }

/* --- volumes on the shelf --- */
.lib-book { appearance: none; border: none; margin: 0; border-radius: var(--radius-sm) var(--radius-sm) var(--radius-xs) var(--radius-xs); box-shadow: 0 4px 8px rgba(8,4,0,0.7), inset 0 1px 1px rgba(255,235,190,0.2); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 11px 0 10px; transform-origin: 50% 100%; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, box-shadow 0.4s ease; will-change: transform; outline: none; border-top: 1.5px solid rgba(212,175,55,0.4); }
.lib-book:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; box-shadow: 0 0 14px rgba(212,175,55,0.7); }
.lib-book.match { cursor: pointer; opacity: 1; }
.lib-book.dim { cursor: default; opacity: 0.22; border-top-color: transparent; }
.lib-book.match:hover, .lib-book.match:focus-visible { transform: rotateX(-12deg) translateZ(30px) translateY(-10px); box-shadow: 0 16px 24px rgba(8,4,0,0.85), inset 0 1px 2px rgba(255,235,190,0.4); border-top-color: var(--brand-gold); }
.lib-book.open { transform: rotateX(-16deg) translateZ(38px) translateY(-12px); box-shadow: 0 22px 32px rgba(8,4,0,0.75), inset 0 1px 1px rgba(255,235,190,0.2); }
.lib-book .rule { width: 56%; height: 2px; background: linear-gradient(90deg, rgba(212,175,55,0.1), rgba(212,175,55,0.85), rgba(212,175,55,0.1)); }
.lib-book .spine-title { writing-mode: vertical-rl; font-family: var(--font-headings); letter-spacing: 0.02em; color: var(--brand-gold); text-shadow: 0 -1px 0 rgba(0,0,0,0.8), 0 1px 1px rgba(255,214,140,0.4), 0 0 5px rgba(212,175,55,0.3); flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1; margin: 9px 0; }

/* 3px, not the 4px token: the filler spines are hand-tuned against the real
   volumes beside them, and this is the one place the scale is deliberately
   ignored. */
.lib-filler { border-radius: 3px 3px 1px 1px; box-shadow: 0 2px 5px rgba(8,4,0,0.6), inset 0 1px 1px rgba(255,235,190,0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: opacity 0.4s ease; }
.lib-filler span { width: 52%; height: 1.5px; background: rgba(212,175,55,0.18); }
.lib-decor { flex: 0 0 auto; align-self: flex-end; margin: 0 12px; box-shadow: 0 3px 6px rgba(8,4,0,0.6); }

/* --- room lighting --- */
.lib-scrim-top { position: absolute; left: 0; right: 0; top: 0; height: clamp(130px,19vh,210px); background: linear-gradient(to bottom, #1B1108 42%, rgba(27,17,8,0)); pointer-events: none; z-index: 3; }
.lib-lamp { position: absolute; left: 0; right: 0; top: -30px; height: clamp(200px,28vh,300px); background: radial-gradient(ellipse at 50% 0%, rgba(255,206,124,0.17) 0%, rgba(255,206,124,0) 62%); pointer-events: none; z-index: 3; }
.lib-scrim-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px,15vh,150px); background: linear-gradient(to top, #1B1108 46%, rgba(27,17,8,0)); pointer-events: none; z-index: 3; }

/* --- page chrome --- */
.lib-header { position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: clamp(16px,2.2vw,26px) clamp(20px,4vw,52px); pointer-events: none; }
.lib-header a, .lib-header nav { pointer-events: auto; }
.lib-header img { height: 36px; width: auto; display: block; filter: brightness(1.65); }
.lib-header nav { display: flex; align-items: baseline; gap: clamp(15px,2.4vw,34px); flex-wrap: wrap; font-size: 12.5px; font-weight: 300; }
.lib-header nav a { text-decoration: none; color: #AE9D7E; }
.lib-header nav a:hover { color: #F0E7D6; }
.lib-header nav a.active { color: #F0E7D6; border-bottom: 1px solid var(--brand-gold); padding-bottom: 2px; }

.lib-hero { position: absolute; left: clamp(20px,4vw,52px); top: clamp(56px,8vh,88px); z-index: 6; max-width: min(46vw, 470px); pointer-events: none; }
.lib-hero h1 { margin: 0; font-family: var(--font-headings); font-weight: 400; font-size: clamp(24px,3.2vw,50px); line-height: 1.02; letter-spacing: -0.01em; color: #F5EDDC; }
.lib-hero p { margin: 6px 0 0; max-width: 380px; font-size: 12.5px; font-weight: 300; line-height: 1.55; color: #AE9D7E; }

.lib-controls { position: absolute; right: clamp(20px,4vw,52px); bottom: clamp(16px,2.6vh,30px); z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
/* padding, not a taller font: keeps the hairline-underline look while lifting
   the hit area to the 24px WCAG 2.2 minimum (2.5.8) at every viewport. */
.lib-controls input { font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 300; color: #F0E7D6; background: transparent; border: none; border-bottom: 1px solid rgba(212,175,55,0.45); padding: 4px 0 5px; min-height: 24px; width: 190px; text-align: right; }
.lib-controls input:focus { outline: none; border-bottom-color: var(--brand-gold); }
.lib-legend { display: flex; align-items: center; gap: clamp(9px,1.3vw,18px); flex-wrap: wrap; justify-content: flex-end; }
.lib-legend button { appearance: none; background: none; border: none; cursor: pointer; padding: 4px 0 3px; min-height: 24px; display: flex; align-items: center; gap: 6px; font-family: 'Work Sans', sans-serif; font-size: 11px; font-weight: 300; color: #8F7F63; border-bottom: 1px solid transparent; outline: none; }
.lib-legend button:focus-visible { color: #F0E7D6; border-bottom-color: var(--brand-gold); text-shadow: 0 0 4px rgba(212,175,55,0.4); }
.lib-legend button.active { color: #F0E7D6; font-weight: 500; border-bottom-color: var(--brand-gold); }
.lib-legend .swatch { width: 8px; height: 8px; border-radius: var(--radius-xs); }

.lib-status { position: absolute; left: clamp(20px,4vw,52px); bottom: clamp(16px,2.6vh,30px); z-index: 6; display: flex; align-items: center; gap: 16px; pointer-events: none; }
.lib-status .caption { font-size: 11.5px; font-weight: 300; color: #8F7F63; }
.lib-rail { width: clamp(90px,14vw,190px); height: 2px; background: rgba(212,175,55,0.18); position: relative; overflow: hidden; }
.lib-rail i { position: absolute; top: 0; bottom: 0; width: 22%; background: linear-gradient(90deg,#8F7335,var(--brand-gold),#8F7335); }

/* =========================================================
   THE READER — a real book that opens and turns pages
   ========================================================= */
/* height:100dvh, not the inset:0 alone. A fixed element with inset:0 resolves
   against the LARGE viewport on mobile, so with the browser's toolbar showing,
   the reader bar — the page turns and "Return to shelf" — sat underneath it and
   could not be reached. dvh tracks the viewport the reader can actually see.

   The auto margins below centre the book exactly as justify-content:center did,
   but degrade correctly: when the content is taller than the viewport (a phone
   held in landscape leaves ~390px) the reader scrolls from the top instead of
   clipping equally off both ends and hiding the controls. */
.lib-reader { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 40; display: none; flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; padding: clamp(14px,3vw,44px); background: rgba(14,8,2,0.82); cursor: zoom-out; perspective: 2400px; overflow-y: auto; overscroll-behavior: contain; }
.lib-reader.visible { display: flex; }
.lib-reader > .lib-book3d { margin-top: auto; }
.lib-reader > .lib-reader-bar { margin-bottom: auto; }

.lib-book3d { position: relative; max-width: 100%; cursor: default; transform-style: preserve-3d; transform: translateX(25%) translateY(26px) scale(0.78) rotateX(16deg) rotateY(-12deg); transition: transform 0.62s cubic-bezier(0.26,0.8,0.28,1); touch-action: pan-y; }
.lib-book3d.lifted { transform: translateX(25%) scale(0.94) rotateX(9deg) rotateY(-6deg); }
.lib-book3d.opened { transform: translateX(0) translateY(0) scale(1) rotateX(5deg); cursor: grab; }
.lib-book3d.single { transform: translateY(24px) scale(0.82) rotateX(12deg); }
.lib-book3d.single.lifted { transform: scale(0.94) rotateX(6deg); }
.lib-book3d.single.opened { transform: scale(1) rotateX(2deg); }

.book-boards { position: absolute; inset: -10px -12px -12px -12px; border-radius: var(--radius-sm); box-shadow: 0 60px 110px rgba(6,3,0,0.75), inset 0 1px 0 rgba(255,235,190,0.16); }

/* ribbon lives in the gutter, behind the pages; only the tail shows */
.book-ribbon { position: absolute; top: 6px; left: calc(50% - 9px - var(--ribbon-drift, 0px)); width: 16px; height: calc(100% + 34px); z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.4s ease 0.4s; }
.lib-book3d.opened .book-ribbon { opacity: 1; }
.lib-book3d.single .book-ribbon { left: calc(100% - 30px); }
.book-ribbon .ribbon-band { position: absolute; inset: 0 0 14px; background: linear-gradient(90deg, #6E1420 0%, #A3212F 38%, #C4374A 52%, #8C1B27 72%, #5E1019 100%); box-shadow: 1px 0 3px rgba(20,6,8,0.45), inset 0 1px 0 rgba(255,190,190,0.28); }
.book-ribbon .ribbon-tail { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; z-index: 7; background: linear-gradient(90deg, #6E1420 0%, #A3212F 38%, #C4374A 52%, #8C1B27 72%, #5E1019 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 62%, 0 100%); box-shadow: 0 3px 5px rgba(20,6,8,0.4); }

.book-spreadbox { position: absolute; inset: 0; display: flex; transform-style: preserve-3d; z-index: 2; }
.book-spreadbox .side { flex: 1; min-width: 0; overflow: hidden; }
.book-spreadbox .gutter { width: 2px; background: linear-gradient(90deg, rgba(60,42,20,0.35), rgba(120,96,54,0.12), rgba(60,42,20,0.35)); }
.lib-book3d.single .book-spreadbox .side.left, .lib-book3d.single .book-spreadbox .gutter { display: none; }

/* the flipping leaf */
.book-leaf { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; z-index: 4; display: none; transition: transform 1.28s cubic-bezier(0.42,0.02,0.24,1); }
.book-leaf.active { display: block; }
.book-leaf.forward { left: 50%; transform-origin: left center; box-shadow: -8px 0 22px -10px rgba(60,42,18,0.5); }
.book-leaf.backward { left: 0; transform-origin: right center; box-shadow: 8px 0 22px -10px rgba(60,42,18,0.5); }
.book-leaf.forward.go { transform: rotateY(-178deg); }
.book-leaf.backward.go { transform: rotateY(178deg); }
.lib-book3d.single .book-leaf { width: 100%; left: 0; }
.book-leaf .face { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; }
.book-leaf .face.back { transform: rotateY(180deg); }

/* front cover: swings open, then drops behind the pages */
.book-cover { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; transform-origin: left center; transform-style: preserve-3d; z-index: 6; transition: transform 1.15s cubic-bezier(0.36,0.03,0.24,1); }
.lib-book3d.single .book-cover { width: 100%; }
.lib-book3d.opened .book-cover { transform: rotateY(-176deg); z-index: 0; pointer-events: none; }
.book-cover .cover-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-xs) 5px 5px var(--radius-xs); box-shadow: inset -2px 0 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,235,190,0.18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: clamp(22px,3vw,40px); text-align: center; }
.book-cover .cover-rule { width: 44%; height: 2px; background: linear-gradient(90deg, rgba(212,175,55,0.15), rgba(212,175,55,0.85), rgba(212,175,55,0.15)); }
.book-cover .cover-title { font-family: var(--font-headings); font-size: clamp(17px,2vw,25px); line-height: 1.24; color: var(--brand-gold); text-wrap: balance; }
.book-cover .cover-cat { font-size: 9px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(212,175,55,0.65); }
.book-cover .cover-inside { position: absolute; inset: 0; backface-visibility: hidden; transform: rotateY(180deg); background: linear-gradient(115deg, #F1EADA 0%, #E6DDC8 100%); box-shadow: inset 4px 0 14px rgba(80,58,26,0.22); }

/* --- the paper --- */
.book-page {
  position: relative; width: 100%; height: 100%; box-sizing: border-box; color: #221E1A;
  padding: clamp(20px,2.4vw,34px); display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"),
    repeating-linear-gradient(91deg, rgba(255,255,255,0.5) 0 2px, rgba(176,158,120,0.07) 2px 3.5px),
    repeating-linear-gradient(1.5deg, rgba(255,255,255,0.3) 0 3px, rgba(168,150,114,0.055) 3px 4.5px),
    radial-gradient(130% 100% at 15% 12%, rgba(255,253,246,0.85) 0%, rgba(240,232,213,0.35) 55%, rgba(214,201,172,0.28) 100%),
    linear-gradient(260deg, #E9E0CC 0%, #F6F0E1 22%, #FAF6EA 100%);
  background-blend-mode: soft-light, normal, normal, normal, normal;
  background-size: 140px 140px, auto, auto, auto, auto;
  box-shadow: inset 22px 0 30px -24px rgba(70,50,20,0.5);
}
.book-page.left { background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"),
    repeating-linear-gradient(91deg, rgba(255,255,255,0.5) 0 2px, rgba(176,158,120,0.07) 2px 3.5px),
    repeating-linear-gradient(1.5deg, rgba(255,255,255,0.3) 0 3px, rgba(168,150,114,0.055) 3px 4.5px),
    radial-gradient(130% 100% at 85% 12%, rgba(255,253,246,0.85) 0%, rgba(240,232,213,0.35) 55%, rgba(214,201,172,0.28) 100%),
    linear-gradient(100deg, #E9E0CC 0%, #F6F0E1 22%, #FAF6EA 100%);
  box-shadow: inset -22px 0 30px -24px rgba(70,50,20,0.5); }

/* blind-embossed logo in the paper of every leaf */
.book-page .emboss { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); font-family: var(--font-headings); font-size: clamp(34px,4.4vw,62px); letter-spacing: 0.14em; color: rgba(150,124,74,0.085); text-shadow: 0 1px 0 rgba(255,255,255,0.65), 0 -1px 0 rgba(120,96,54,0.09); white-space: nowrap; pointer-events: none; user-select: none; }

.book-page.is-endpaper { align-items: center; justify-content: center; background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"),
    linear-gradient(120deg, #E2D7BE 0%, #EDE4D0 60%, #E4DAC4 100%);
  background-blend-mode: soft-light, normal; }
.book-page .endpaper-mark { font-family: var(--font-headings); font-size: clamp(22px,2.6vw,34px); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(150,124,74,0.16); text-shadow: 0 1px 0 rgba(255,255,255,0.7), 0 -1px 0 rgba(120,96,54,0.12); }
.book-page .endpaper-sub { margin-top: 10px; font-size: 8.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(120,96,54,0.3); }

.book-page.is-title { justify-content: center; align-items: center; text-align: center; gap: 16px; }
.book-page .title-cat { position: relative; font-size: 9px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: #9C7A2E; }
.book-page .title-rule { width: 54px; height: 2px; background: linear-gradient(90deg,var(--brand-gold),#8F7335); }
.book-page .title-name { position: relative; font-family: var(--font-headings); font-size: clamp(20px,2.4vw,31px); line-height: 1.16; text-wrap: balance; }
.book-page .title-mins { font-size: 11.5px; font-weight: 300; color: #7C7364; }
.book-page .title-imprint { margin-top: 14px; font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #A29883; }

.book-page .page-head { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #9C7A2E; }
.book-page .page-head em { font-style: normal; color: #A29883; }
.book-page .head-rule { width: 38px; height: 1.5px; background: linear-gradient(90deg,var(--brand-gold),#8F7335); }
.book-page p { position: relative; margin: 0; font-size: 13px; font-weight: 300; line-height: 1.85; color: #403A31; text-wrap: pretty; }
/* Holds the paragraphs of a body leaf. flex:1 with min-height:0 means it takes
   the slack and absorbs any overflow itself, so the "Next Page" row and the
   folio beneath it can never be pushed past the leaf's clipped edge. */
.book-page .page-copy { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }

.book-page .plate { flex: 1; min-height: 0; overflow: hidden; background: #DED4BE; border: 1px solid rgba(34,30,26,0.16); }
.book-page .plate img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9) contrast(1.02); }
.book-page .plate-caption { font-family: var(--font-headings); font-style: italic; font-size: 12px; color: #5E564A; }

.book-page .end-title { position: relative; font-family: var(--font-headings); font-size: 19px; line-height: 1.25; text-wrap: balance; }
.book-page .end-desc { position: relative; font-size: 12.5px; font-weight: 300; line-height: 1.8; color: #5E564A; }
.book-page .end-link { position: relative; text-decoration: none; font-size: 12.5px; color: #221E1A; margin-top: 6px; }
.book-page .end-link span { border-bottom: 1px solid #C8A646; padding-bottom: 3px; }

/* The auto margin lives here and ONLY here. It used to be on the folio as
   well, and two auto margins in one flex column split the free space between
   them — so on a short leaf the "Next Page" row floated in the middle of the
   page instead of sitting just above the folio. The nav bar takes the slack;
   the folio follows it. Every leaf that renders a folio renders this row
   first, so nothing is left unanchored. */
.book-page .page-nav-bar { margin-top: auto; display: flex; justify-content: flex-end; padding-top: 6px; position: relative; z-index: 5; }
.book-page .page-next-btn { appearance: none; background: transparent; border: none; cursor: pointer; padding: 2px 0; font-family: 'Work Sans', sans-serif; font-size: 11.5px; font-weight: 500; color: #221E1A; display: inline-flex; align-items: center; gap: 4px; outline: none; }
.book-page .page-next-btn span { border-bottom: 1px solid rgba(200,166,70,0.65); padding-bottom: 2px; transition: border-color 0.2s ease, color 0.2s ease; }
.book-page .page-next-btn:hover span, .book-page .page-next-btn:focus-visible span { color: #9C7A2E; border-bottom-color: var(--brand-gold); }

.book-page .page-folio { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(34,30,26,0.14); }
.book-page .page-folio .pageno { font-family: var(--font-headings); font-size: 12px; color: #8E836D; min-width: 18px; }
.book-page.right .page-folio .pageno { text-align: right; }
.book-page .page-folio .imprint { font-size: 8.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #C0B49A; }
.book-page .page-folio .running { flex: 1; text-align: center; font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #A29883; }

/* reader controls */
.lib-reader-bar { display: flex; align-items: center; gap: clamp(14px,2vw,26px); flex-wrap: wrap; justify-content: center; cursor: default; }
.lib-reader-bar button.turn { appearance: none; cursor: pointer; width: 42px; height: 42px; border-radius: var(--radius-circle); border: 1px solid rgba(212,175,55,0.4); background: transparent; font-family: var(--font-headings); font-size: 16px; color: #F0E7D6; }
.lib-reader-bar button.turn:hover { border-color: var(--brand-gold); color: var(--brand-gold); }
.lib-reader-bar button.turn.off { color: rgba(240,231,214,0.25); }
.lib-reader-bar .counter { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 120px; }
.lib-reader-bar .counter b { font-size: 11.5px; font-weight: 300; letter-spacing: 0.06em; color: #AE9D7E; }
.lib-reader-bar .counter i { font-style: normal; font-size: 9.5px; font-weight: 300; color: #6E6350; }
.lib-reader-bar a { text-decoration: none; font-size: 12px; font-weight: 400; color: #F0E7D6; }
.lib-reader-bar a span { border-bottom: 1px solid rgba(212,175,55,0.55); padding-bottom: 3px; }
.lib-reader-bar button.text { appearance: none; background: none; border: none; cursor: pointer; font-family: 'Work Sans', sans-serif; font-size: 11.5px; font-weight: 300; color: #8F7F63; }
.lib-reader-bar button.text:hover { color: var(--brand-gold); }

/* --- mobile --- */
@media (max-width: 1023px) {
  .lib-header { padding: 14px 18px; }
  .lib-header img { height: 30px; }
  .lib-header nav { display: none; }
  .lib-hero { left: 18px; right: 18px; top: 54px; max-width: none; }
  .lib-hero h1 { font-size: 26px; }
  .lib-hero p { font-size: 11.5px; max-width: none; }
  .lib-pillar { flex: 0 0 14px; }
  .lib-pillar.end { flex: 0 0 18px; }
  .lib-cavity { gap: 2px; padding: 0 8px; }
  .lib-cornice { height: 14px; }
  .lib-board { height: 10px; }
  .lib-book { padding: 8px 0 7px; }
  .lib-book .spine-title { margin: 7px 0; }
  .lib-status { left: 18px; right: 18px; bottom: 74px; }
  .lib-rail { flex: 1; width: auto; }
  .lib-controls { left: 18px; right: 18px; bottom: 22px; flex-direction: row; align-items: center; gap: 14px; }
  .lib-controls input { flex: 1; min-width: 0; width: auto; text-align: left; }
  .lib-legend { display: none; }
  .lib-shelf-select { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 108px; font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 300; color: #D9C79B; background-color: transparent; border: none; border-bottom: 1px solid rgba(212,175,55,0.3); cursor: pointer; padding: 0 14px 5px 0; background-image: url('data:image/svg+xml,%3Csvg width="8" height="5" viewBox="0 0 8 5" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 0l4 5 4-5z" fill="%23A08A5C"/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right top 4px; }
  .lib-shelf-select:focus { outline: none; }
  .lib-shelf-select option { background: #241708; color: #F0E7D6; }
  .lib-reader { gap: 14px; }
  .lib-reader-bar { gap: 14px; }
}
@media (min-width: 1024px) { .lib-shelf-select { display: none; } }

/* --- Accessibility: Reduced Motion Support --- */
@media (prefers-reduced-motion: reduce) {
  .lib-wall, .lib-book, .lib-book3d, .book-leaf, .book-cover { transition: none !important; animation: none !important; transform: none !important; }
  .lib-book3d.opened { transform: none !important; }
  .book-leaf { display: none !important; }
}

/* --- Closing leaf: the in-book route to the published article --- */
.book-page.is-colophon { justify-content: flex-start; }
.book-page .colophon-title {
  font-family: var(--font-headings); font-size: clamp(15px, 1.5vw, 19px); line-height: 1.3;
  color: #221E1A; margin-top: 4px;
}
.book-page .colophon-note {
  font-family: 'Work Sans', sans-serif; font-size: 12.5px; line-height: 1.7; color: #5E564A; margin: 0;
}
.book-page .page-read-link {
  display: inline-block; font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; color: #5E1019; text-decoration: none;
  border-bottom: 1px solid rgba(94, 16, 25, 0.4); padding-bottom: 2px;
}
.book-page .page-read-link:hover { color: #A3212F; border-bottom-color: #A3212F; }

/* --- Plain-link index of every guide, below the room --- */
.lib-index {
  background: #2E1D0C;
  color: #F0E7D6;
  padding: clamp(40px, 6vw, 72px) clamp(18px, 5vw, 60px);
  border-top: 1px solid rgba(212, 175, 55, 0.22);
}
.lib-index h2 {
  font-family: var(--font-headings); font-weight: 400;
  font-size: clamp(22px, 3vw, 32px); color: #F5EDDC; margin: 0 0 28px;
}
.lib-index ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px 40px;
}
.lib-index li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}
.lib-index a {
  font-family: 'Work Sans', sans-serif; font-weight: 300; font-size: 14px; line-height: 1.4;
  color: #E8DCC4; text-decoration: none;
  /* 24px minimum touch target (WCAG 2.2 AA) without changing the type size. */
  padding: 11px 0; flex: 1 1 auto; min-width: 0;
}
.lib-index a:hover, .lib-index a:focus-visible { color: var(--brand-gold); }
.lib-index-cat {
  font-family: 'Work Sans', sans-serif; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #8F7F63; flex: 0 0 auto;
}
@media (max-width: 640px) {
  .lib-index ul { grid-template-columns: 1fr; }
  .lib-index-cat { display: none; }
}