/* The card catalogue: five drawers, fifty index cards, paper seals on the later parts. */
.cat-head .lede { margin-bottom: 2rem; }
.cat-tools { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1.4rem; }
.cat-search { display: grid; gap: .4rem; flex: 1 1 18rem; max-width: 28rem; }
/* The field's edge reads at 3:1 against the page, its hint text at 4.5:1 against the field. */
.cat-search input {
  width: 100%; min-height: 2.75rem; padding: .7rem .9rem; font: inherit; color: var(--fg); background: rgba(255,255,255,.55);
  border: 1px solid rgba(26,24,16,.55); border-radius: 2px;
  transition: border-color .2s, background-color .2s;
}
.cat-search input::placeholder { color: var(--muted); opacity: 1; }
/* The browser's clear button in the page's ink, not the system blue. */
.cat-search input::-webkit-search-cancel-button { filter: grayscale(1) brightness(.55); cursor: pointer; }
.cat-search input:hover { border-color: rgba(26,24,16,.75); }
.cat-search input:focus { background: rgba(255,255,255,.8); }
.cat-count { margin: 0 0 .8rem; min-height: 1.2em; text-wrap: balance; }
/* Searching needs JavaScript; without it the field would do nothing, so it is not shown. */
html:not(.js) .cat-tools { display: none; }

.cat-drawers { display: grid; gap: 2.2rem; padding-bottom: 3rem; }
.drawer { position: relative; border: 1px solid var(--rule); background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.08)); }
.drawer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, #d9d4c6, #cfc9b8); box-shadow: inset 0 -2px 0 rgba(0,0,0,.05); }
/* A shade darker than the page's labels: the drawer front is darker than the page. */
.drawer-head .label { flex-basis: 100%; color: var(--ink-4); }
.drawer-title { font-family: var(--f-display); font-weight: 600; font-size: var(--step-2); text-wrap: balance; }
.drawer-room { display: inline-flex; align-items: center; min-height: 2.75rem; margin: -.6rem 0 -.6rem auto; font-size: .95rem; }
@media (max-width: 560px) { .drawer-room { margin-left: 0; } }
/* The brass pull. */
.drawer-head::after { content: ""; position: absolute; top: 1.1rem; right: 50%; width: 3.4rem; height: .55rem; transform: translateX(50%);
  border-radius: 0 0 1rem 1rem; background: linear-gradient(180deg, #b08010, #705000); box-shadow: 0 1px 2px rgba(0,0,0,.3); opacity: .55; }
@media (max-width: 700px) { .drawer-head::after { display: none; } }

.cards { list-style: none; margin: 0; padding: 1.3rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.card {
  position: relative; display: grid; align-content: start; gap: .35rem; min-height: 11rem; padding: 1rem 1rem 1.4rem;
  background: #fbfaf5; color: var(--ink); border: 1px solid rgba(26,24,16,.14); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.05);
  background-image: linear-gradient(180deg, transparent 2.35rem, rgba(176,28,8,.35) 2.35rem, rgba(176,28,8,.35) calc(2.35rem + 1px), transparent calc(2.35rem + 1px)),
                    repeating-linear-gradient(180deg, transparent 0 1.55rem, rgba(43,74,122,.10) 1.55rem calc(1.55rem + 1px));
  background-position: 0 0, 0 2.9rem;
  transition: transform .5s var(--ease-ink), box-shadow .5s var(--ease-ink), opacity .5s;
}
/* The card lifts under a mouse only: on a touch screen a lift would stay after the tap. */
@media (hover: hover) { .card:hover { transform: translateY(-3px) rotate(-.3deg); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 14px 30px rgba(0,0,0,.09); } }
.card:focus-visible { outline-offset: 4px; }
.card .label { margin-bottom: .35rem; color: var(--ink-5); }
.card-title { font-size: 1.25rem; line-height: 1.2; font-weight: 450; text-wrap: balance; }
.card-note { margin: 0; font-size: .98rem; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
/* Inline in the note, but with a finger-sized hit area that reaches past the line box without
   moving the text or widening the focus ring. */
.card-read { position: relative; white-space: nowrap; color: var(--red-4); }
.card-read::after { content: ""; position: absolute; inset: -.9rem -.4rem; }
.card-read:hover { text-decoration-color: currentColor; }
.card-len { position: absolute; left: 1rem; bottom: .7rem; height: 3px; width: calc(var(--len) * (100% - 2rem)); background: var(--ink); opacity: .75; border-radius: 2px;
  transform-origin: left; }
.card.is-filtered-out { display: none; }
.cards.is-fanning .card { animation: fan .8s var(--ease-ink) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes fan { from { opacity: 0; transform: translateY(26px) rotate(calc((var(--i, 0) - 4) * .8deg)); } }
.cards.is-fanning .card-len { animation: ink-bar 1.1s var(--ease-ink) both; animation-delay: calc(var(--i, 0) * 45ms + .3s); }
@keyframes ink-bar { from { transform: scaleX(0); } }

/* The seal: a paper strip with the character, pasted across the drawer. */
.drawer-seal-wrap { display: none; }
.drawer[data-sealed="true"] .drawer-seal-wrap { display: grid; place-items: center; padding: 2.4rem 1rem 2.6rem; position: relative; overflow: hidden; }
.drawer[data-sealed="true"] .cards { display: none; }
.drawer-seal {
  position: relative; display: inline-flex; align-items: center; gap: 1.1rem; min-height: 2.75rem; padding: .9rem 2.2rem .9rem 1.1rem; cursor: pointer;
  border: 0; background: linear-gradient(180deg, #efe4c8, #e2d3ae); color: var(--ink); transform: rotate(-2.4deg);
  box-shadow: 0 8px 22px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.06);
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  transition: transform .4s var(--ease-ink), box-shadow .4s;
}
.drawer-seal::before, .drawer-seal::after { content: ""; position: absolute; top: 50%; width: 40vw; height: 2.2rem; transform: translateY(-50%); background: linear-gradient(180deg, #efe4c8, #e2d3ae); opacity: .9; }
.drawer-seal::before { right: 100%; }
.drawer-seal::after { left: 100%; }
.drawer-seal:hover { transform: rotate(-2.4deg) scale(1.03); box-shadow: 0 14px 30px rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.08); }
.drawer-seal:active { transform: rotate(-2.4deg) scale(.99); }
.drawer-seal:focus-visible { outline-offset: 5px; }
.seal-text { text-wrap: balance; }
.seal-glyph { display: grid; place-items: center; flex: none; width: 3.1rem; height: 3.1rem; background: var(--red); color: #fbeee0; font-family: var(--f-brush); font-size: 2.3rem; line-height: 1;
  border-radius: 3px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); transform: rotate(3deg); }
.drawer.is-tearing .drawer-seal { animation: tear-left .9s var(--ease-seal) forwards; clip-path: polygon(0 0, 52% 0, 47% 100%, 0 100%); }
.drawer.is-tearing .drawer-seal-wrap::after {
  content: ""; position: absolute; inset: 0; background: inherit;
}
.seal-half { position: absolute; pointer-events: none; }
@keyframes tear-left { to { transform: translate(-18%, 80%) rotate(-14deg); opacity: 0; } }
@keyframes tear-right { to { transform: translate(18%, 80%) rotate(12deg); opacity: 0; } }
.seal-ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-2.4deg); pointer-events: none; animation: tear-right .9s var(--ease-seal) forwards; }
.cat-sealed-hint { margin: .4rem 0 0; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red-4); }