@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courier-prime-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courier-prime-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courier-prime-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sofia Sans Condensed";
  src: url("fonts/sofia-sans-condensed.woff2") format("woff2");
  font-weight: 1 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Reenie Beanie";
  src: url("fonts/reenie-beanie-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  /* oak cabinet */
  --oak: #7c4424;
  --oak-front: #87502c;
  --oak-light: #a0683a;
  --oak-dark: #5a3519;
  --oak-wall: #6a3f22;
  --oak-deep: #3b2213;
  --oak-crown: #4a2c18;

  /* brass hardware */
  --brass: #c9a24a;
  --brass-dark: #8f6f25;
  --brass-light: #e6c875;

  /* card stock and ink */
  --card: #fbfaf6;
  --ink: #1c1a17;
  --ink-soft: #4a4640;
  --rule-red: #c0392b;
  --rule-blue: #a9cbe0;
  --ribbon: #b3261e;
  --pencil: #55565c;

  /* pressboard guide cards */
  --press-blue: #2e6f8e;
  --press-buff: #d6b46f;
  --press-red: #a8402c;
  --press-green: #4f7a3a;
  --press-salmon: #d98a6c;
  --press-slate: #5f6670;

  /* call slip */
  --slip: #dfe9cf;
  --slip-ink: #34522a;

  /* type */
  --typed: "Courier Prime", "Courier New", monospace;
  --printed: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --hand: "Reenie Beanie", cursive;

  /* card rhythm */
  --line: 1.55rem;
  --strip: 3rem;
  --stack-top: 1rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scrollbar-color: var(--brass) var(--oak-crown);
  scroll-padding-top: 1rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--oak);
  background-image: url("cabinet.svg");
  background-size: 380px 230px;
  background-position: calc(50% - 190px) 3.5rem;
  color: var(--ink);
  font-family: var(--typed);
  font-size: 1rem;
  line-height: 1.5;
}

::selection { background: var(--brass-light); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brass-light);
  outline-offset: 3px;
  border-radius: 2px;
}

a { color: inherit; }

/* ---------- crown molding ---------- */

.crown {
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem;
  background: var(--oak-crown);
  border-bottom: 3px solid var(--oak-deep);
  font-family: var(--printed);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--card);
}

.crown a {
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.crown a:hover { color: var(--brass-light); border-bottom-color: var(--brass-light); }
.crown__link { text-transform: none; letter-spacing: 0.02em; }

/* ---------- the drawer ---------- */

.cabinet { padding: 0 1rem; }

.drawer {
  width: min(760px, 100%);
  margin: 0 auto;
}

.drawer__front {
  position: relative;
  z-index: 2;
  height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: var(--oak-front);
  border-top: 2px solid var(--oak-light);
  border-bottom: 4px solid var(--oak-dark);
  box-shadow: 0 16px 24px -12px rgba(28, 12, 2, 0.7);
}

.frame {
  position: relative;
  padding: 7px;
  background: var(--brass);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px var(--brass-dark),
    inset 0 3px 0 var(--brass-light),
    0 2px 4px rgba(28, 12, 2, 0.45);
  max-width: 100%;
}
.frame::before,
.frame::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #5e4513;
}
.frame::before { left: 1px; }
.frame::after { right: 1px; }

.frame__card {
  background: var(--card);
  padding: 0.7rem 1.75rem 0.6rem;
  text-align: center;
  box-shadow: inset 0 1px 2px rgba(28, 12, 2, 0.25);
}

.frame__card h1 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.frame__card p {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.frame__index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 1.1rem;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--rule-blue);
  font-size: 0.85rem;
}
.frame__index a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-blue);
  text-underline-offset: 0.25em;
  transition: color 200ms var(--ease-out), text-decoration-color 200ms var(--ease-out);
}
.frame__index a:hover { color: var(--ribbon); text-decoration-color: var(--ribbon); }
.frame__index a:focus-visible { outline-color: var(--ribbon); }

.pull {
  width: 128px;
  height: auto;
  filter: drop-shadow(0 3px 2px rgba(28, 12, 2, 0.45));
}

.drawer__well {
  position: relative;
  width: calc(100% - 28px);
  margin: 0 auto;
  padding: 2.75rem 1.5rem 3.5rem;
  background: var(--oak-deep);
  border: 12px solid var(--oak-wall);
  border-top: 0;
  box-shadow:
    inset 0 22px 22px -14px rgba(0, 0, 0, 0.7),
    0 18px 30px -12px rgba(28, 12, 2, 0.6);
}

/* ---------- guide tabs: a folder tab rising from the top edge of its own card ---------- */

/* The card's red top edge runs into the tab: it curves up through a fillet at
   each shoulder, round the tab's top, and back down, like a manila folder. */
.guide {
  --r: 0.55rem;
  --fill: color-mix(in oklab, var(--tab) 34%, var(--card));
  position: absolute;
  z-index: 2;
  top: -1.75rem;
  /* staggered across the right of the head line, clear of every title */
  right: calc(1.25rem + (5 - var(--i)) * 2.05rem);
  width: 7.5rem;
  height: calc(1.75rem + 2px);
  padding: 0.3rem 0.4rem 0;
  border: 2px solid var(--rule-red);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--fill);
  color: var(--ink);
  font-family: var(--printed);
  font-weight: 750;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 -3px 7px -4px rgba(0, 0, 0, 0.45);
  transition: translate 320ms var(--ease-out);
  pointer-events: none;
}
.guide::before,
.guide::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: var(--r);
  height: var(--r);
}
.guide::before {
  left: calc(-1 * var(--r));
  background: radial-gradient(circle at 0 0,
    transparent calc(var(--r) - 2px),
    var(--rule-red) calc(var(--r) - 2px) var(--r),
    var(--fill) var(--r));
}
.guide::after {
  right: calc(-1 * var(--r));
  background: radial-gradient(circle at 100% 0,
    transparent calc(var(--r) - 2px),
    var(--rule-red) calc(var(--r) - 2px) var(--r),
    var(--fill) var(--r));
}
.slot:hover .guide,
.slot:focus-within .guide { translate: 0 -6px; }

/* ---------- catalog cards ---------- */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.25rem;
}

.slot {
  position: relative;
  animation: rise 1000ms var(--ease-out) both;
  animation-delay: calc(150ms + var(--i) * 90ms);
}

@keyframes rise {
  from { translate: 0 2.75rem; }
}

.card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  grid-template-rows: var(--strip) auto;
  aspect-ratio: 5 / 3;
  padding: 0 2.25rem 2.75rem 1.25rem;
  font-size: 0.97rem;
  line-height: var(--line);
  background:
    linear-gradient(var(--rule-red), var(--rule-red)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--rule-red), var(--rule-red)) 0 calc(var(--strip) - 2px) / 100% 2px no-repeat,
    linear-gradient(var(--card), var(--card)) 0 0 / 100% var(--strip) no-repeat,
    linear-gradient(to bottom,
      transparent calc(var(--line) - 1px),
      var(--rule-blue) calc(var(--line) - 1px)) 0 var(--strip) / 100% var(--line) repeat-y,
    var(--card);
  border-radius: 3px;
  box-shadow:
    0 -6px 14px -8px rgba(0, 0, 0, 0.45),
    0 12px 22px -10px rgba(0, 0, 0, 0.6);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}

.card:hover,
.card:focus-within {
  transform: translateY(-6px);
  box-shadow:
    0 -8px 18px -8px rgba(0, 0, 0, 0.5),
    0 20px 28px -12px rgba(0, 0, 0, 0.65);
}

/* the rod hole */
.card::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.8rem;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: -0.525rem;
  border-radius: 50%;
  background: var(--oak-deep);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.7);
}

.card__call {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  padding-top: calc(var(--strip) - var(--line) - 2px);
  display: flex;
  flex-direction: column;
  font-size: 0.97rem;
  font-variant-numeric: tabular-nums;
}

.card__head {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0 0 2px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: var(--line);
  letter-spacing: 0.01em;
}

.card__head a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.card__head a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
}
.card:hover .card__head a,
.card__head a:focus-visible {
  color: var(--ribbon);
  text-decoration-color: var(--ribbon);
}
.card__head a:focus-visible { outline: none; }
.card__head a:focus-visible::after {
  outline: 2px solid var(--ribbon);
  outline-offset: 3px;
}

.card__body {
  grid-column: 2;
  grid-row: 2;
}

.card__body p {
  margin: 0;
  text-indent: 2ch;
  text-wrap: pretty;
}

.card__body p:first-child { text-indent: 0; }

.card__tracings { margin-top: var(--line) !important; }

.card__online {
  color: var(--ink-soft);
  font-style: italic;
}

/* in-process card: pencilled call number and note */
.pencil {
  font-family: var(--hand);
  font-size: 1.45rem;
  line-height: var(--line);
  color: var(--pencil);
}


.note {
  position: absolute;
  left: 1.25rem;
  bottom: 0.55rem;
  margin: 0;
  font-family: var(--hand);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--pencil);
  transform: rotate(-3deg);
  pointer-events: none;
}

/* ---------- call slip ---------- */

.slip {
  width: min(25rem, 100%);
  margin: 3rem 0 0 auto;
  padding: 1rem 1.4rem 1.25rem;
  background: var(--slip);
  color: var(--slip-ink);
  border-radius: 2px;
  transform: rotate(1.25deg);
  box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.6);
}

.slip__title {
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--slip-ink);
  font-family: var(--printed);
  font-weight: 850;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.slip__fields { margin: 0; }

.slip__fields div {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.45rem 0 0.2rem;
  border-bottom: 1px dashed rgba(52, 82, 42, 0.55);
}

.slip__fields dt {
  font-family: var(--printed);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.slip__fields dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.slip a {
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.slip a:hover { color: var(--ribbon); }
.slip a:focus-visible { outline-color: var(--slip-ink); }

/* ---------- plinth ---------- */

.plinth {
  padding: 3rem 1rem 2.5rem;
  text-align: center;
}

.plinth p {
  display: inline-block;
  margin: 0;
  padding: 0.4rem 1rem 0.35rem;
  background: var(--brass);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--brass-dark), inset 0 2px 0 var(--brass-light);
  color: #3a2a08;
  font-family: var(--printed);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- riffle: cards stack as you scroll, on screens tall enough to read a whole card ---------- */

@media (min-width: 760px) and (min-height: 780px) {
  .cards { display: block; }
  /* room for the finished stack to hold all six heads before it scrolls away */
  .cards::after {
    content: "";
    display: block;
    height: calc(5 * var(--strip));
  }
  .slot {
    position: sticky;
    top: calc(var(--stack-top) + 1.5rem + var(--i) * var(--strip));
    /* every slot's box ends level with the last (sticky bounds the margin box),
       so the stack leaves the viewport as one */
    padding-bottom: calc((5 - var(--i)) * var(--strip));
    pointer-events: none;
  }
  /* the next card overlaps the padding, leaving a 3rem gap between cards */
  .slot + .slot { margin-top: calc(3rem - (6 - var(--i)) * var(--strip)); }
  .slot > .card { pointer-events: auto; }
  /* catalog cards are all one size */
  .card { aspect-ratio: auto; height: 27.5rem; }
  /* lifting a card raises it out of the drawer, a full head strip above the one in front */
  .slot:hover .card,
  .slot:focus-within .card { transform: translateY(calc(var(--strip) * -0.9)); }
  .slot:hover .guide,
  .slot:focus-within .guide { translate: 0 calc(var(--strip) * -0.9); }
}

/* ---------- narrow screens ---------- */

@media (max-width: 799px) {
  body { background-image: none; }
}

@media (max-width: 640px) {
  :root { --line: 1.45rem; }

  .drawer__front { height: auto; padding: 1.75rem 1rem 1.5rem; }
  .frame__card { padding: 0.6rem 1rem 0.5rem; }
  .frame__card p { font-size: 0.85rem; }
  .frame__index { font-size: 0.8rem; gap: 0 0.85rem; }
  .frame__index a { display: inline-block; min-height: 24px; padding: 0.2rem 0; line-height: 1.2; }

  .drawer__well {
    width: calc(100% - 16px);
    padding: 2.5rem 0.75rem 2.5rem;
    border-width: 0 8px 8px;
  }

  .guide { width: 6.6rem; right: calc(0.75rem + (5 - var(--i)) * 1.9rem); font-size: 0.8rem; }

  .card {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.9rem;
    aspect-ratio: auto;
    padding: 0 1rem 2.6rem 0.9rem;
    font-size: 0.9rem;
  }
  /* call number keeps its margin column on the head line; the entry runs the full card width */
  :root { --strip: 3.5rem; }
  .card__call {
    grid-row: 1;
    align-self: end;
    padding-top: 0;
    margin-bottom: 3px;
    font-size: 0.8rem;
    line-height: 1.2;
  }
  .card__call .pencil { font-size: 1.1rem; line-height: 1; }
  .card__head { font-size: 1.02rem; }
  .card__body { grid-column: 1 / -1; }
  .slip { padding: 0.9rem 1rem 1.1rem; }
  .slip__fields div { grid-template-columns: 4rem minmax(0, 1fr); gap: 0.6rem; }
  .slip__fields dd { font-size: 0.9rem; }
  .note { font-size: 1.3rem; left: 0.9rem; }
  .crown { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .slot { animation: none; }
  .card, .guide, .crown a { transition: none; }
  .card:hover, .card:focus-within, .slot:hover .card, .slot:focus-within .card { transform: none; }
  .slot:hover .guide, .slot:focus-within .guide { translate: none; }
}