/* Plan chest: every drawing on the site, drawer by drawer, with a filter by kind. */
.chest{padding-bottom:var(--s7)}
.chest-filter{position:sticky;top:var(--frame-in);z-index:5;margin:0 0 var(--s5);padding-block:14px;background:var(--paper);border-bottom:1px solid var(--rule)}
/* on a phone the filter rides along as one line that scrolls sideways, not five rows over the drawers */
@media (max-width:899px){
  .chest-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .chest-filter::-webkit-scrollbar{display:none}
  /* the fade is paper laid over the pills, not a mask: a mask also thinned the paper and let drawings through */
  .chest-filter::after{content:"";flex:none;position:sticky;right:0;width:48px;background:linear-gradient(90deg,transparent,var(--paper));pointer-events:none}
  .chest-filter .pill{flex:none}
}
.drawer{padding-block:var(--s5) var(--s6);border-top:1px solid var(--rule-2)}
.drawer[hidden]{display:none}
.drawer-h{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:baseline;gap:var(--gutter);margin-bottom:var(--s5)}
.drawer-h>.mono:first-child{color:var(--accent)}
.drawer-h .h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.5rem);font-weight:300}
.drawer-h .h3 a{text-decoration:none}
.drawer-h .h3 a:hover{color:var(--accent)}
.drawer-c{color:var(--ink-2)}
.drawer-grid{--cg:var(--gutter);display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s4) var(--cg)}
.drawer-grid li[hidden]{display:none}
.drawer-grid li{min-width:0}
.drawer-grid li.wide{grid-column:span 2}
.drawer-grid li.wide .fig{aspect-ratio:8 / 3}
/* a wide piece spans two cards but keeps one card's height, so every caption in a row starts on one line */
@supports (container-type:inline-size){
  .drawer-grid li.wide{container-type:inline-size}
  .drawer-grid li.wide .fig{aspect-ratio:auto;height:calc((100cqw - var(--cg)) * .375)}
}
.drawer-grid a{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-content:start;color:inherit;text-decoration:none}
.drawer-grid .fig{display:grid;place-items:center;aspect-ratio:4 / 3;min-width:0;overflow:hidden;padding:5%;mix-blend-mode:var(--draw-blend);transition:transform .5s var(--paper-ease)}
.drawer-grid .fig picture{display:contents}
/* each piece fits its card whole: a percentage height never held in the card's auto row, so tall pieces
   were cut off and pushed their captions down */
.drawer-grid .fig{position:relative}
.drawer-grid .fig img{position:absolute;inset:0;width:100%;height:100%;padding:5%;object-fit:contain}
.drawer-grid li[data-k="Making"] .fig,.drawer-grid li[data-k="Studies"] .fig{mix-blend-mode:normal}
.drawer-grid .mono{color:var(--accent)}
.drawer-grid .cap{font-size:var(--t-small);line-height:1.35;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* a tapped link keeps its hover when you come back to the page; only a pointer that can hover gets it */
@media (hover:hover){.drawer-grid a:hover .fig{transform:translateY(-4px)}}
@media (hover:hover){.drawer-grid a:hover .cap{color:var(--ink)}}
.drawer-grid a:focus-visible{outline-offset:6px}
@media (max-width:599px){
  .drawer-grid{--cg:10px;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3) var(--cg)}
  .drawer-h{grid-template-columns:30px minmax(0,1fr)}
  .drawer-c{grid-column:2}
  .drawer-grid .cap{font-size:.78rem}
}
/* at night each drawer is a sheet of paper laid on the blueprint */
:root[data-theme="blueprint"] .drawer-grid{--paper:#F3EFE6;--ink:#24201C;--ink-2:#5E574E;--accent:#B24441;--draw-blend:multiply;background:var(--paper);box-shadow:var(--card-shadow);padding:clamp(14px,2.4vw,32px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .drawer-grid{--paper:#F3EFE6;--ink:#24201C;--ink-2:#5E574E;--accent:#B24441;--draw-blend:multiply;background:var(--paper);box-shadow:var(--card-shadow);padding:clamp(14px,2.4vw,32px)}}
.chest-filter .pill .mono{color:inherit;opacity:.7;margin-left:4px}
.chest-filter .pill[aria-pressed="true"] .mono{opacity:1}   /* the count stays legible on the red of the chosen drawer */