/* Glaze and brick: cards for the library page and the book page.
   Each card is a tile: ribbed glaze on top, a lozenge band, a golden brick body with the text.
   Tiles tilt toward the pointer (glaze-brick.js). Uses the site tokens --turq --rubric --lift --rosette;
   the materials themselves have fixed colours and look the same in day and night mode. */
:root {
  --gb-brick: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2236%22 height=%2218%22 viewBox=%220 0 36 18%22%3E%3Cpath d=%22M0 8.5H36M0 17.5H36M9 0V8.5M27 0V8.5M0 9V17.5M18 9V17.5%22 stroke=%22%23b7915a%22 stroke-opacity=%22.55%22 stroke-width=%221%22/%3E%3Crect x=%223%22 y=%223%22 width=%223%22 height=%223%22 fill=%22%23178f97%22 opacity=%22.55%22/%3E%3Crect x=%2221%22 y=%2212%22 width=%223%22 height=%223%22 fill=%22%231b3a8f%22 opacity=%22.45%22/%3E%3C/svg%3E");
  --gb-lozenge: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2214%22 viewBox=%220 0 16 14%22%3E%3Crect width=%2216%22 height=%2214%22 fill=%22%2316358a%22/%3E%3Cpath d=%22M8 1.5L14 7L8 12.5L2 7Z%22 fill=%22%23f6f0e2%22/%3E%3Cpath d=%22M8 4.2L11 7L8 9.8L5 7Z%22 fill=%22%2314a3ab%22/%3E%3Ccircle cx=%220%22 cy=%227%22 r=%221.6%22 fill=%22%23e8b84c%22/%3E%3Ccircle cx=%2216%22 cy=%227%22 r=%221.6%22 fill=%22%23e8b84c%22/%3E%3C/svg%3E");
}

/* grids */
.gb-grid { display: grid; gap: 1.8rem; margin: 1.8rem 0 0; padding: 0; list-style: none; perspective: 1100px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.gb-grid.ways { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin: 2.2rem 0 3rem; }
.gb-grid.small { gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin-top: 1rem; }
.gb-grid > li { display: flex; min-width: 0; }

/* the tile */
.gb-tile { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%; position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: #2a2216; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: var(--gb-brick) top left / 36px 18px, linear-gradient(#ecd6a6, #dcbd82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 3px 0 #a9844a, 0 26px 40px -22px rgba(60, 40, 10, .7);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s; }
.gb-tile::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(40% 60% at var(--mx) var(--my), rgba(255, 255, 255, .35), transparent 70%); opacity: 0; transition: opacity .25s; }
.gb-tile:hover::after { opacity: 1; }
.gb-tile:focus-visible { outline: 3px solid var(--turq); outline-offset: 4px; }

/* glaze cap: turquoise by default, .cobalt for blue, .amber for manuscripts */
.gb-cap { position: relative; flex: none; height: 8.5rem;
  background: radial-gradient(90% 140% at 30% -20%, rgba(255, 255, 255, .55), transparent 55%), radial-gradient(120% 120% at 50% 130%, rgba(0, 30, 40, .45), transparent 60%),
  repeating-linear-gradient(90deg, #08606b 0 2px, #12a1aa 5px, #7fe8e0 9px, #12a1aa 13px, #08606b 18px); }
.gb-tile.cobalt .gb-cap { background: radial-gradient(90% 140% at 30% -20%, rgba(255, 255, 255, .5), transparent 55%), radial-gradient(120% 120% at 50% 130%, rgba(0, 10, 40, .5), transparent 60%),
  repeating-linear-gradient(90deg, #122a70 0 2px, #2c50bf 5px, #9db3ff 9px, #2c50bf 13px, #122a70 18px); }
.gb-tile.amber .gb-cap { background: radial-gradient(90% 140% at 30% -20%, rgba(255, 255, 255, .5), transparent 55%), radial-gradient(120% 120% at 50% 130%, rgba(40, 20, 0, .45), transparent 60%),
  repeating-linear-gradient(90deg, #7a4a12 0 2px, #c08a2c 5px, #f5d98c 9px, #c08a2c 13px, #7a4a12 18px); }
.gb-cap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--gb-lozenge) left center / auto 100% repeat-x; box-shadow: 0 -1px 0 #e6b74a, 0 1px 0 #e6b74a; }
.gb-grid.ways .gb-cap { height: 7rem; }
.gb-grid.small .gb-cap { height: 4.6rem; }
.gb-tag { position: absolute; left: 1.2rem; top: 1rem; max-width: calc(100% - 7rem); padding: .1rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #6d1d3b; font-style: italic; font-size: .9rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.gb-big { position: absolute; right: 1.3rem; bottom: 1.4rem; color: #fff; font-size: 2.6rem; line-height: 1; font-weight: 700; text-align: right; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); font-variant-numeric: tabular-nums; }
.gb-big small { display: block; font-size: .9rem; font-weight: 400; opacity: .92; }
.gb-grid.small .gb-big { font-size: 1.9rem; bottom: 1.25rem; }

/* brick body */
.gb-body { display: flex; flex-direction: column; gap: .3rem; flex: 1; padding: 1.2rem 1.4rem 1.4rem; background: linear-gradient(rgba(255, 250, 238, .82), rgba(255, 248, 232, .9)); }
.gb-body h3 { margin: 0; font-size: 1.45rem; line-height: 1.15; color: #1d1a14; }
.gb-grid.small .gb-body h3 { font-size: 1.2rem; }
.gb-body .ar { font-family: var(--arabic); direction: rtl; unicode-bidi: isolate; line-height: 2.1; text-align: left; font-size: 1.25rem; color: #4a3b22; margin: -.2rem 0 0; }
.gb-body p { margin: 0 0 .6rem; color: #4f4330; }

/* actions */
.gb-btn { display: inline-flex; align-items: center; gap: .55rem; align-self: flex-start; margin-top: auto; font-size: 1rem; color: #fff; padding: .5rem 1.15rem .55rem; border-radius: 999px; background: linear-gradient(#25b7c6, #0c8394); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 3px 0 #08606d, 0 8px 14px -6px rgba(8, 80, 92, .7); transition: transform .12s, box-shadow .12s; }
.gb-tile.cobalt .gb-btn { background: linear-gradient(#4469d6, #1f3f9c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 3px 0 #142c70, 0 8px 14px -6px rgba(20, 44, 112, .7); }
.gb-btn::after, .gb-go::after { content: ""; width: .42rem; height: .42rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.gb-tile:hover .gb-btn { transform: translateY(-1px); }
.gb-tile:active .gb-btn { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 #08606d; }
.gb-go { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; color: #0a6070; }
.gb-tile:hover .gb-go { text-decoration: underline; text-underline-offset: .18em; }

/* book page header: a brick drum between two lozenge bands */
.gb-drum { position: relative; border-radius: 24px; overflow: hidden; color: #221a10; background: var(--gb-brick) top left / 36px 18px, linear-gradient(#ecd6a6, #dcbd82); box-shadow: 0 3px 0 #a9844a, var(--lift); }
.gb-drum::before, .gb-drum::after { content: ""; display: block; height: 16px; background: var(--gb-lozenge) left center / auto 100% repeat-x; box-shadow: 0 1px 0 #e6b74a, 0 -1px 0 #e6b74a; }
.gb-drum .in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; padding: 2rem 2.4rem; background: linear-gradient(90deg, rgba(0, 0, 0, .14), rgba(255, 250, 238, .84) 18%, rgba(255, 250, 238, .84) 82%, rgba(0, 0, 0, .14)); }
.gb-drum .kicker { font-style: italic; color: #8a1f45; margin: 0 0 .3rem; }
.gb-drum h1 { margin: 0 0 .4rem; color: #1d1a14; }
.gb-drum .lede { margin: 0; color: #3d3222; max-width: 42em; }
.gb-drum .ar { font-family: var(--arabic); direction: rtl; unicode-bidi: isolate; line-height: 2.1; font-size: 2.1rem; color: #0d4f8a; margin: 0; }

@media (max-width: 700px) {
  .gb-drum .in { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 1.3rem; }
  .gb-cap { height: 7rem; }
}
@media (prefers-reduced-motion: reduce) { .gb-tile, .gb-btn { transition: none; } .gb-tile { transform: none !important; } }
@media print { .gb-tile, .gb-drum { box-shadow: none; transform: none !important; } }

/* Arabic titles retain the atlas's Nastaliq font; report Arabic is unaffected. */
.gb-drum .ar,.gb-body .gb-title-ar{font-family:"Noto Nastaliq Urdu","Amiri",serif;line-height:2.8;padding-block:.35rem .75rem;overflow-wrap:anywhere}
.gb-drum .ar{max-width:24rem}.gb-body .gb-title-ar{text-align:right}
.gb-body h3::before{display:none}.gb-body h3{overflow-wrap:anywhere}
.gb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){.gb-drum .ar{max-width:100%}.gb-drum h1{font-size:clamp(1.8rem,7vw,2.8rem)}}
/* Consistent muted book palettes, including the top-level choice menus. */
.gb-tile{--choice-wash:#ded6c5;--choice-deep:#18515a;--choice-mid:#397b80;--choice-light:#8aada7;background:var(--gb-brick) top left/36px 18px,linear-gradient(#cbbda2,#ac987b)}
.gb-tile.cobalt{--choice-wash:#ded1b5;--choice-deep:#173c59;--choice-mid:#35647a;--choice-light:#7a9fa7;background:var(--gb-brick) top left/36px 18px,linear-gradient(#c9b68e,#b69a6e)}
.gb-tile .gb-body{background:linear-gradient(color-mix(in srgb,var(--choice-wash) 90%,transparent),color-mix(in srgb,var(--choice-wash) 96%,transparent))}
.gb-tile:not(.amber) .gb-cap,.gb-tile.cobalt .gb-cap{background:linear-gradient(#ffffff14,#00000018),repeating-linear-gradient(90deg,var(--choice-deep) 0 2px,var(--choice-mid) 5px,var(--choice-light) 9px,var(--choice-mid) 13px,var(--choice-deep) 18px)}
.gb-grid:not(.small):not(.ways) .gb-cap{height:4.5rem}
.gb-grid:not(.small):not(.ways) .gb-big{font-size:1.7rem;bottom:1.05rem;right:1rem}
.gb-grid:not(.small):not(.ways) .gb-big small{font-size:.78rem}
.gb-grid:not(.small):not(.ways) .gb-tag{top:.55rem;left:1rem;font-size:.8rem;max-width:calc(100% - 7rem)}
.gb-grid:not(.small):not(.ways) .gb-body{padding:.9rem 1.1rem 1rem;gap:.15rem}
.gb-grid:not(.small):not(.ways) .gb-body h3{font-size:1.3rem}
.gb-grid:not(.small):not(.ways) .gb-body p{margin-bottom:.35rem}
.gb-grid:not(.small):not(.ways) .gb-btn{padding:.35rem .85rem;font-size:.9rem;margin-top:.35rem}
.gb-drum{background:var(--gb-brick) top left/36px 18px,linear-gradient(#cbbda2,#ac987b)}
.gb-drum .in{background:linear-gradient(90deg,#0000000a,#ded6c5db 18%,#ded6c5db 82%,#0000000a)}
.gb-tile .gb-btn,.gb-tile.cobalt .gb-btn{background:linear-gradient(var(--choice-mid),var(--choice-deep));box-shadow:inset 0 1px 0 #ffffff45,0 2px 0 var(--choice-deep),0 5px 10px -6px #173c5980}
.scholar-hub{grid-template-columns:repeat(3,minmax(0,1fr))}
.scholar-hub .gb-cap{height:3rem}
.scholar-hub .gb-body{gap:.5rem;padding:1rem 1.2rem 1.25rem}
.scholar-hub h2{font-size:1.6rem;margin:0;color:#1d1a14}
.scholar-hub .gb-go{margin-top:.5rem}
@media(max-width:700px){.scholar-hub{grid-template-columns:1fr;gap:1rem}.scholar-hub .gb-cap{height:2rem}}
/* Preserve the original library design with equal rows and aligned actions. */
.library-equal .gb-body{display:grid;grid-template-rows:4.5rem 7rem 3rem 4rem auto;gap:.4rem}
.library-equal .gb-body h3{margin:0;line-height:1.3}
.library-equal .gb-body .ar{font-family:var(--arabic);text-align:right;font-size:1.25rem;line-height:2.3;margin:0;align-self:center}
.library-equal .gb-body p{margin:0}
.library-equal .gb-btn{align-self:end;justify-self:start;margin:0!important}
.library-equal .library-description{margin:0;color:#4f4330}
/* Compact library cards; al-Sabadhmūnī has its own burgundy glaze. */
.gb-grid.library-equal{gap:1.3rem}
.gb-grid.library-equal .gb-cap{height:3.5rem!important}
.gb-grid.library-equal .gb-big{font-size:1.5rem!important;bottom:.85rem!important}
.gb-grid.library-equal .gb-tag{font-size:.75rem!important;top:.35rem!important}
.gb-grid.library-equal .gb-body{grid-template-rows:3.6rem 4.8rem 2.2rem 3.1rem auto;gap:.25rem;padding:.8rem 1rem 1rem!important}
.gb-grid.library-equal .gb-body h3{font-size:1.2rem!important;line-height:1.25}
.gb-grid.library-equal .gb-body .ar{font-size:1.15rem;line-height:2.1}
.gb-grid.library-equal .gb-body p,.gb-grid.library-equal .library-description{font-size:.95rem;line-height:1.4}
.gb-tile.bordeaux .gb-cap{background:linear-gradient(#ffffff14,#00000018),repeating-linear-gradient(90deg,#572332 0 2px,#814052 5px,#b58088 9px,#814052 13px,#572332 18px)}
/* Clear separation between the patterned band and the card’s reading area. */
.gb-tile .gb-body{padding-top:1.4rem!important}
.gb-grid.small .gb-body,.gb-grid:not(.small):not(.ways) .gb-body{padding-top:1.3rem}
.gb-grid.library-equal .gb-body{padding-top:1.4rem!important;gap:.4rem}
.gb-grid.library-equal .gb-cap{height:4.1rem!important}
.gb-grid.library-equal .gb-tag{top:.65rem!important;left:1rem!important}
.gb-grid.library-equal .gb-big{bottom:1.2rem!important;right:1rem!important}
.gb-grid.library-equal .gb-big small{line-height:1.1}
.scholar-hub .gb-body{padding-top:1.4rem}