/* Six evenly spaced trays; labels, illustrations, and notes each have their own space. */
.offscreen { min-height: 100svh; padding: 40px 6%; display: flex; flex-direction: column; justify-content: center; background: #e3e4dc; border-top: 1px solid #c9c8bf; }
.cabinet-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.cabinet-heading .eyebrow { margin: 0 0 8px; }
.cabinet-heading h2 { font-size: clamp(36px, 4vw, 58px); margin: 0; }
.cabinet-heading h2 em { color: #56614d; }
.cabinet-heading > p { margin: 0 0 5px; color: #60675b; font-size: 16px; }
.cabinet-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); gap: clamp(30px, 5vw, 75px); align-items: stretch; }
.cabinet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 14px; padding: 18px; border: 1px solid #b7baa9; border-radius: 9px; background: linear-gradient(135deg, #c8cabb, #a8ae9d); box-shadow: 0 2px 0 #e9ebdf inset, 0 15px 30px #323b2412; }
.cabinet-object { position: relative; min-width: 0; display: grid; grid-template-rows: 20px minmax(100px, 1fr) 30px; justify-items: center; align-items: center; gap: 8px; padding: 14px; border: 0; border-radius: 4px; background: radial-gradient(ellipse at 50% 35%, #f0f0e6, #d9ddce); color: #5d6950; box-shadow: inset 0 2px 6px #38422a22; transition: background .25s, color .25s; }
.cabinet-object[aria-pressed=true] { background: radial-gradient(ellipse at 50% 30%, #67745a, #3c4835); color: #f2efe3; }
.object-number { justify-self: start; font: 11px monospace; opacity: .8; }
.cabinet-object[aria-pressed=true] .object-number::after { content: ' •'; color: #e7dfb8; }
.object-name { align-self: end; justify-self: stretch; text-align: center; padding-top: 10px; border-top: 1px solid #6a755b40; font-size: 13px; line-height: 1.2; }
.cabinet-object[aria-pressed=true] .object-name { border-color: #eff1dc40; }
.object-art { width: 100%; height: 115px; display: grid; place-items: center; filter: drop-shadow(5px 8px 2px #242d2218); }
.object-art svg { width: 115px; height: 115px; max-width: 100%; transition: transform .35s; }
.cabinet-object:hover .object-art svg, .cabinet-object:focus-visible .object-art svg { transform: translateY(-5px) rotate(-6deg); }
.object-0 .object-art svg { transform: rotate(-20deg); }
.object-2 .object-art svg { width: 140px; }
.object-3 { background: radial-gradient(ellipse at 50% 35%, #eee3d3, #d9c9b6); color: #84634f; }
.object-3 circle { fill: #a9755930; }.object-5 rect { fill: #8c9b7840; }
.cabinet-story { position: relative; align-self: center; padding: 22px 0; border-top: 1px solid #aeb5a2; min-height: 330px; }
.story-preview { position: absolute; right: 0; top: 18px; width: 70px; height: 70px; color: #778365; opacity: .35; transform: rotate(8deg); }
.story-preview svg { width: 100%; height: 100%; }
.story-index { font: 12px monospace; color: #68725d; }
.story-interest { font: 14px monospace; margin: 55px 0 14px; }
.cabinet-story h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: -.045em; margin: 0 0 18px; }
.story-description { color: #57614f; font-size: 17px; max-width: 320px; min-height: 84px; }
.chess-profile { display: inline-block; border-bottom: 1px solid; padding-bottom: 5px; font-size: 15px; }
.cabinet-instruction { display: block; margin-top: 24px; padding-top: 16px; border-top: 1px solid #bfc5b4; color: #68725d; font: 11px/1.5 monospace; }
@media (max-width: 1000px) {
 .cabinet-layout { grid-template-columns: 1fr; gap: 28px; }
 .cabinet-story { min-height: 0; padding-bottom: 0; }
 .story-interest { margin-top: 22px; }
 .story-description { min-height: 0; max-width: 75%; }
 .cabinet-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (max-width: 600px) {
 .offscreen { padding: 35px 5%; }
 .cabinet-heading h2 { font-size: 36px; }
 .cabinet { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); padding: 12px; gap: 12px; }
 .cabinet-object { padding: 12px; gap: 6px; }
 .object-art, .object-art svg { height: 100px; }
 .object-name { font-size: 12px; }
 .story-description { max-width: 100%; }
 .cabinet-story h3 { font-size: 33px; }
}