/* The Volumes: a shelf of seven spines on a fixed ivory band. One volume stands open; the rest show their spines. */
.shelf-band { background: var(--kr-stone); border-block: 1px solid var(--kr-line-2); }
.shelf-band .wrap { padding-block: 34px 38px; display: grid; gap: 16px; }
.shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; color: var(--kr-navy); }
.shelf-head h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: var(--kr-h3); color: var(--kr-navy); }
.shelf-head p { margin: 0; font-size: 15px; color: var(--kr-muted); }
.shelf { display: flex; gap: 10px; height: 540px; }
.vol { --ig: #C9A469; --ih: #E2C891; --if: rgba(199,206,216,.30); --ib: #101F32;
  position: relative; flex: 1 1 0; min-width: 0; background: var(--kr-navy); color: var(--kr-on-dark); border-radius: var(--kr-radius); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--kr-navy-2); transition: flex-grow .6s var(--kr-ease), box-shadow .3s; }
.vol::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--kr-gold); opacity: .55; transition: opacity .3s; }
.vol.on { flex-grow: 7.5; box-shadow: inset 0 0 0 1px var(--kr-line-dark-2), var(--kr-lift-navy); }
.vol.on::before { opacity: 1; }
.spine { all: unset; box-sizing: border-box; position: absolute; inset: 0; display: grid; grid-template-rows: auto auto 1fr; justify-items: center; gap: 14px;
  padding: 22px 6px 22px; cursor: pointer; text-align: center; }
.spine:hover { background: var(--kr-navy-2); }
.spine:focus-visible { outline: 2px solid var(--kr-gold-hi); outline-offset: -4px; }
.spine .vn { font-size: 10px; letter-spacing: var(--kr-label-tracking); color: var(--kr-on-dark-2); font-weight: 600; }
.spine .rn { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1; color: var(--kr-gold-hi); margin-top: -6px; }
.spine svg { width: 54px; height: 54px; display: block; }
.spine .pn { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  color: var(--kr-on-dark); align-self: end; max-height: 100%; overflow: hidden; }
.vol.on .spine { display: none; }
.face { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; padding: 30px 32px 28px; min-width: 520px; }
.vol:not(.on) .face { display: none; }
.vol.on .face { animation: face-in .5s .15s both var(--kr-ease); }
@keyframes face-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.face .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.face .vl { margin: 0; font-size: 11px; letter-spacing: var(--kr-label-tracking); color: var(--kr-gold-hi); font-weight: 600; }
.face .big { font-family: var(--serif); font-weight: 600; font-size: 76px; line-height: .9; color: var(--kr-gold-hi); margin-top: 8px; }
.face svg { width: 128px; height: 128px; display: block; flex: none; }
.face h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.05; text-wrap: balance; }
.face .ttl { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 22px; color: var(--kr-gold-hi); line-height: 1.2; }
.face .hook { margin: 0; color: var(--kr-on-dark-2); max-width: 52ch; font-size: 17px; line-height: 1.6; }
.face .facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-self: end; }
.face .facts li { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--kr-on-dark); padding: 0 14px; border-left: 1px solid var(--kr-line-dark-2); display: inline-flex; align-items: center; gap: 8px; }
.face .facts li:first-child { padding-left: 0; border-left: 0; }
.face .facts li::before { content: ""; width: 7px; height: 7px; background: var(--kr-gold-hi); transform: rotate(45deg); }
.face .facts li.w::before { background: transparent; border: 1px solid var(--kr-gold-hi); }
.face .facts li.n::before { background: transparent; border: 1px solid var(--kr-on-dark-2); }
.face .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.face .open { font: 600 13px/1 var(--sans); letter-spacing: .04em; color: var(--kr-navy); background: var(--kr-gold-hi); border: 0; border-radius: var(--kr-radius-btn); padding: 13px 20px; cursor: pointer; }
.face .open:hover { background: #EAD3A0; }
.face .open:focus-visible { outline: 2px solid var(--kr-on-dark); outline-offset: 3px; }
.face .cta { font-size: 13.5px; color: var(--kr-on-dark-2); }
.shelf-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--kr-muted); }
.shelf-legend span { display: inline-flex; align-items: center; gap: 7px; }
.shelf-legend i { width: 8px; height: 8px; transform: rotate(45deg); background: var(--kr-gold-deep); display: inline-block; }
.shelf-legend i.w { background: transparent; border: 1px solid var(--kr-gold-deep); }
.shelf-legend i.n { background: transparent; border: 1px solid var(--kr-muted); }
/* tablet and phone: the shelf stacks into a column of spines */
@media (max-width: 1180px) {
  .shelf { flex-direction: column; height: auto; }
  .vol, .vol.on { flex: none; }
  .spine { position: relative; inset: auto; display: grid; grid-template-columns: 52px 1fr 48px; grid-template-rows: none; align-items: center; justify-items: start; gap: 12px; padding: 14px 16px; width: 100%; }
  .spine .vn, .spine br { display: none; }
  .spine { text-align: left; }
  .spine .rn { font-size: 28px; margin: 0; }
  .spine svg { width: 44px; height: 44px; justify-self: end; grid-column: 3; grid-row: 1; }
  .spine .pn { writing-mode: horizontal-tb; transform: none; align-self: center; font-size: 12px; grid-column: 2; grid-row: 1; }
  .face { position: relative; inset: auto; min-width: 0; padding: 22px 18px 20px; }
  .face .big { font-size: 56px; }
  .face svg { width: 92px; height: 92px; }
  .face h3 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .vol { transition: none; } .vol.on .face { animation: none; } }
.face .facts { gap: 8px 0; }
.face .facts { gap: 8px 22px; }
.face .facts li, .face .facts li:first-child { border-left: 0; padding: 0; }
/* Advanced Labs shelf: the inverse of the flagship shelf. Ivory instrument plates on a deep navy band with engraved astrolabe rings.
   Same materials and motion; a different series at a glance. */
.labs-band { position: relative; overflow: hidden; background: #0B1626; border-block: 1px solid rgba(226,200,145,.25); }
.labs-band::before { content: ""; position: absolute; width: 900px; height: 900px; right: -260px; top: -300px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 58px, rgba(226,200,145,.10) 58px 59px); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.labs-band .wrap { position: relative; }
.labs-band .shelf-head h2 { color: #F6F2EA; }
.labs-band .shelf-head p { color: #C7CED8; }
.labs-band .series-tag { color: #E2C891; }
.labs-band .series-tag::before { background: #E2C891; }
.labs-band .shelf-legend { color: #C7CED8; }
.labs-band .shelf-legend i { background: #E2C891; } .labs-band .shelf-legend i.w { background: transparent; border-color: #E2C891; } .labs-band .shelf-legend i.n { background: transparent; border-color: #C7CED8; }
.shelf.labs { gap: 6px; }
.shelf.labs .vol { --ig: #A88250; --ih: #7C5C30; --if: rgba(16,31,50,.22); --ib: #FBF8F2;
  background: #FBF8F2; color: #101F32; box-shadow: inset 0 0 0 1px rgba(177,138,88,.35); }
.shelf.labs .vol::before { background: linear-gradient(90deg, #EAD3A0, #B18A58); opacity: .9; height: 2px; }
.shelf.labs .vol.on { box-shadow: inset 0 0 0 1px rgba(177,138,88,.55), 0 30px 60px -30px rgba(0,0,0,.7); }
.shelf.labs .spine:hover { background: #F1EADF; }
.shelf.labs .spine:focus-visible { outline-color: #B18A58; }
.shelf.labs .spine .vn, .shelf.labs .spine br { display: none; }
.shelf.labs .spine svg { display: block; flex: none; }
.shelf.labs .spine .rn { font-family: var(--serif); font-weight: 600; font-size: 22px; color: #7C5C30; font-variant-numeric: lining-nums; margin: 0; }
.shelf.labs .spine .pn { color: #101F32; font-size: 11px; letter-spacing: .14em; }
.shelf.labs .face .vl { color: #7C5C30; letter-spacing: .22em; }
.shelf.labs .face .big { color: #101F32; font-variant-numeric: lining-nums; font-size: 64px; }
.shelf.labs .face h3 { color: #101F32; font-size: 30px; }
.shelf.labs .face .ttl { color: #7C5C30; font-size: 20px; }
.shelf.labs .face .hook { color: #46505F; font-size: 16px; }
.shelf.labs .face .facts li { color: #101F32; }
.shelf.labs .face .facts li::before { background: #B18A58; }
.shelf.labs .face .facts li.w::before { background: transparent; border-color: #B18A58; }
.shelf.labs .face .facts li.n::before { background: transparent; border-color: #6E7684; }
.shelf.labs .face .open { background: #101F32; color: #F6F2EA; }
.shelf.labs .face .open:hover { background: #21354C; }
.shelf.labs .face .open:focus-visible { outline-color: #B18A58; }
.shelf.labs .face .cta { color: #46505F; }
.shelf.labs .face svg { width: 104px; height: 104px; }
.shelf.labs .face { min-width: 0; }
.series-tag { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--kr-gold-deep); }
.series-tag::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--kr-gold); }
@media (min-width: 1181px) {
  .shelf.labs .vol { flex: 1 1 0; }
  .shelf.labs .vol.on { flex: 0 0 min(540px, 46%); }
  .shelf.labs .spine { padding: 16px 0 14px; grid-template-rows: auto auto 1fr; gap: 9px; }
  .shelf.labs .spine svg { width: 28px; height: 28px; }
  .shelf.labs .spine .pn { font-size: 10.5px; letter-spacing: .13em; }
}
@media (max-width: 1180px) {
  .shelf.labs { flex-direction: column; height: auto; gap: 8px; }
  .shelf.labs .vol, .shelf.labs .vol.on { flex: none; }
  .shelf.labs .spine { position: relative; inset: auto; display: grid; grid-template-columns: 48px minmax(0, 1fr) 46px; grid-template-rows: none; align-items: center; justify-items: start; gap: 12px; padding: 12px 16px 12px 18px; width: 100%; text-align: left; }
  .shelf.labs .spine > span:first-child { grid-column: 1; grid-row: 1; }
  .shelf.labs .spine svg { width: 46px; height: 46px; grid-column: 3; grid-row: 1; justify-self: end; }
  .shelf.labs .spine .rn { font-size: 24px; }
  .shelf.labs .spine .pn { writing-mode: horizontal-tb; transform: none; align-self: center; font-size: 12px; line-height: 1.35; grid-column: 2; grid-row: 1; }
  .shelf.labs .face { position: relative; inset: auto; padding: 24px 22px 24px; }
  .shelf.labs .face .big { font-size: 52px; }
  .shelf.labs .face svg { width: 84px; height: 84px; }
  .shelf.labs .face h3 { font-size: 27px; }
  .shelf.labs .face .row { gap: 14px; }
}

/* Forty case studies: the labs shelf is set in groups of ten so every spine keeps its icon and number. */
.labs-band .shelf-sub { margin: 18px 0 -4px; font: 600 12px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #E2C891; }
.labs-band .shelf-head + .shelf-sub { margin-top: 4px; }

/* The libraries: every case study, or every piece of research, in one grid, filtered by kind. Ivory and navy cards alternate. */
.lib-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-filter button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid rgba(226,200,145,.45);
  color: #F6F2EA; font: 600 13px/1.2 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.lib-filter button b { font: 500 20px/1 "Source Serif 4", Georgia, serif; letter-spacing: 0; color: #E2C891; }
.lib-filter button:hover { border-color: #E2C891; }
.lib-filter button[aria-pressed="true"] { background: #E2C891; color: #101F32; border-color: #E2C891; }
.lib-filter button[aria-pressed="true"] b { color: #101F32; }
.lib-filter button:focus-visible { outline: 2px solid #E2C891; outline-offset: 3px; }
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .lib-grid { grid-template-columns: minmax(0, 1fr); } }
.lcard { --ig: #7C5C30; --ih: #B18A58; --if: rgba(16,31,50,.28); --ib: #FBF8F2;
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px 24px 22px; background: #FBF8F2; color: #101F32; cursor: pointer; overflow: hidden;
  transition: transform .5s var(--kr-ease, cubic-bezier(.2,.7,.1,1)), box-shadow .5s; }
.lcard.alt { --ig: #C9A469; --ih: #E2C891; --if: rgba(199,206,216,.30); --ib: #16293F; background: #16293F; color: #F6F2EA; box-shadow: inset 0 0 0 1px rgba(226,200,145,.28); }
.lcard::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: #B18A58; transform: scaleX(.16); transform-origin: left; transition: transform .7s var(--kr-ease, ease); }
.lcard:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(0,0,0,.65); }
.lcard:hover::before { transform: scaleX(1); }
.lib-grid.go .lcard:not([hidden]) { animation: lib-in .6s both var(--kr-ease, ease); animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes lib-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.lc-top svg { width: 64px; height: 64px; flex: none; }
.lc-k { font: 600 12px/1.4 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #7C5C30; max-width: 22ch; }
.lcard.alt .lc-k { color: #E2C891; }
.lcard h3 { margin: 4px 0 0; font: 500 25px/1.15 "Source Serif 4", Georgia, serif; color: inherit; text-wrap: balance; }
.lc-p { margin: 0; font: 600 13px/1.4 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #46505F; }
.lcard.alt .lc-p { color: #C7CED8; }
.lc-h { margin: 0; font-size: 16px; line-height: 1.6; color: inherit; opacity: .9; }
.lcard .facts { margin-top: auto; }
.lc-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 12px; border-top: 1px solid rgba(16,31,50,.14); }
.lcard.alt .lc-go { border-top-color: rgba(226,200,145,.25); }
.lc-go .open { all: unset; box-sizing: border-box; cursor: pointer; padding: 11px 16px; background: #101F32; color: #F6F2EA; font: 600 13px/1 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; transition: background .3s, color .3s; }
.lcard.alt .lc-go .open { background: #E2C891; color: #101F32; }
.lc-go .open:hover, .lc-go .open:focus-visible { background: #B18A58; color: #101F32; }
.lc-go .cta { font-size: 14px; font-weight: 600; color: inherit; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .lib-grid.go .lcard:not([hidden]) { animation: none; } .lcard, .lcard::before { transition: none; } }
.lcard .facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lcard .facts li { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.lcard .facts li::before { content: ""; width: 7px; height: 7px; background: #B18A58; transform: rotate(45deg); }
.lcard .facts li.w::before { background: transparent; border: 1px solid #B18A58; }
.lcard .facts li.n::before { background: transparent; border: 1px solid currentColor; }

.lib-grid .lcard h3 { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: 27px; line-height: 1.12; }

/* Round 2: the libraries sit on a light ground so navy cards never stand on navy. Case Studies on stone, Research on ivory. */
.lib-band { background: linear-gradient(180deg, #F3ECE0 0%, #FBF8F2 100%); border-block: 1px solid rgba(177,138,88,.3); }
.research-band.lib-band { background: linear-gradient(180deg, #FBF8F2 0%, #F3ECE0 100%); }
.lib-band::before { background: repeating-radial-gradient(circle, transparent 0 58px, rgba(177,138,88,.16) 58px 59px); animation: lib-orbit 60s linear infinite; }
@keyframes lib-orbit { to { transform: rotate(360deg); } }
.lib-band .shelf-head h2 { color: #101F32; }
.lib-band .shelf-head p { color: #46505F; }
.lib-band .series-tag { color: #7C5C30; }
.lib-band .series-tag::before { background: #B18A58; }
.lib-band .shelf-legend { color: #46505F; }
.lib-band .shelf-legend i { background: #B18A58; } .lib-band .shelf-legend i.w { background: transparent; border-color: #B18A58; } .lib-band .shelf-legend i.n { background: transparent; border-color: #46505F; }
.lib-band .lib-filter button { color: #101F32; background: #fff; border-color: rgba(177,138,88,.5); }
.lib-band .lib-filter button b { color: #7C5C30; }
.lib-band .lib-filter button:hover { border-color: #B18A58; background: #FBF8F2; }
.lib-band .lib-filter button[aria-pressed="true"] { background: #101F32; color: #F6F2EA; border-color: #101F32; }
.lib-band .lib-filter button[aria-pressed="true"] b { color: #E2C891; }
.lib-band .lib-filter button:focus-visible { outline-color: #B18A58; }
.lib-band .lcard:not(.alt) { background: #fff; box-shadow: inset 0 0 0 1px rgba(177,138,88,.28), 0 18px 34px -30px rgba(16,31,50,.5); }
.lib-band .lcard.alt { background: linear-gradient(160deg, #101F32, #1B2F48); }
.lib-band .lcard:hover { box-shadow: 0 22px 40px -24px rgba(16,31,50,.45); }
.lib-band .lc-top svg * { stroke-dasharray: 260; stroke-dashoffset: 260; animation: lib-draw 1.8s cubic-bezier(.2,.7,.1,1) forwards; animation-delay: calc(var(--i, 0) * 40ms + .2s); }
@keyframes lib-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .lib-band::before { animation: none; } .lib-band .lc-top svg * { animation: none; stroke-dashoffset: 0; } }