/* The Resource Library as the village library (rebuild, 2026-09-29).
   A librarian's desk for search that rests on the hills; one bookcase per topic, each holding a
   spine for every guide on it; a chosen topic opens as a shelf of books with coloured spines and
   ribbon bookmarks; "What do you need today?" is the notice board by the door; the Decoder is a
   card-catalogue drawer of index cards and Start Here is a note pinned beside it. Search results
   come back as catalogue cards. Every selector is scoped to body.p-library. Behaviour stays in
   js/library-nav.js (unchanged hooks and ids). */

.p-library { --wood-a: #c99a45; --wood-b: #9d7128; --cork: #ecd9ae; }
.p-library main :is(h1, h2, h3) { color: var(--navy); }
.p-library main a { text-decoration: none; }
.p-library .container { max-width: 1200px; padding-inline: clamp(16px, 4vw, 40px); }
.p-library .lib-room { padding: 0 0 clamp(30px, 4vw, 56px); }

/* ---------- the librarian's desk ---------- */
.p-library .lib-desk {
  position: relative;
  z-index: 2;
  margin: 0 auto clamp(44px, 5vw, 72px);
  max-width: 1000px;
}
/* with the page-opening hills in place (site.js), the desk rests on them */
html.js .p-library .lib-desk { margin-top: clamp(-96px, -7vw, -40px); }
.p-library .lib-desk::after { /* the desk top the card rests on */
  content: "";
  position: absolute;
  left: -18px; right: -18px; bottom: -16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--wood-a), var(--wood-b));
  box-shadow: 0 12px 16px -8px rgba(80, 50, 10, .45);
  z-index: -1;
}
.p-library .lib-tools {
  position: relative;
  margin: 0;
  padding: clamp(20px, 2.6vw, 30px) clamp(18px, 3vw, 34px) clamp(22px, 2.8vw, 32px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px 26px 8px 8px;
  box-shadow: var(--shadow-lift);
}
.p-library .lib-tools-row { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(220px, 1fr); gap: 16px 24px; align-items: end; }
.p-library .lib-field label {
  display: block;
  margin: 0 0 8px;
  font: 400 calc(26px * .9)/1.1 var(--f-hand);
  color: var(--gold-dark);
}
.p-library .lib-search-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 10px; }
.p-library .lib-search-row input[type="search"],
.p-library .lib-field--jump select {
  min-height: 56px;
  height: 56px;
  padding: 0 20px;
  border: 2px solid rgba(29, 44, 76, .22);
  border-radius: 999px;
  background: #fff;
  font: 500 17px/1.2 var(--f-body);
  color: var(--navy);
}
.p-library .lib-field--jump select { padding-right: 40px; cursor: pointer; }
.p-library .lib-search-row input[type="search"]:focus,
.p-library .lib-field--jump select:focus { border-color: var(--navy); }
.p-library .lib-search-submit {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 4px 0 var(--gold-deep);
}
.p-library .lib-search-submit:hover { background: #e2b453; }
.p-library .lib-search-submit:active { translate: 0 3px; box-shadow: 0 1px 0 var(--gold-deep); }
/* a little stack of books on the desk; one slides up when the search box is in use */
.p-library .lib-desk-books {
  position: absolute;
  left: 34px;
  bottom: 100%;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}
.p-library .lib-desk-books i { display: block; width: 14px; border-radius: 3px 3px 1px 1px; box-shadow: inset -3px 0 0 rgba(0, 0, 0, .12); }
.p-library .lib-desk-books i:nth-child(1) { height: 44px; background: var(--gold); }
.p-library .lib-desk-books i:nth-child(2) { height: 36px; background: var(--brick); }
.p-library .lib-desk-books i:nth-child(3) { height: 52px; background: var(--blue); }
.p-library .lib-desk-books i:nth-child(4) { height: 40px; background: var(--sage); }
.p-library .lib-desk-books i:nth-child(5) { height: 34px; background: var(--navy); rotate: 16deg; transform-origin: bottom left; margin-left: 4px; }

/* ---------- search results: catalogue cards ---------- */
.p-library .lib-search-results { position: relative; margin: 0 0 clamp(40px, 5vw, 64px); }
.p-library .lib-search-results h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 6px; }
.p-library .lib-search-status { font-size: 16px; color: var(--muted); }
.p-library .lib-search-clear {
  min-height: 44px;
  padding: 0 20px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--paper);
  color: var(--navy);
  font: 500 16px var(--f-display);
  box-shadow: 0 3px 0 var(--navy);
  margin-bottom: 16px;
}
.p-library .lib-search-clear:hover { background: #fff; color: var(--navy); }
.p-library .guide-search-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; margin-top: 22px; }
.p-library .guide-search-card {
  position: relative;
  padding: 26px 22px 22px;
  border: 0;
  border-radius: 6px;
  background-color: #fffdf6;
  background-image:
    linear-gradient(180deg, transparent 0 54px, rgba(169, 84, 47, .45) 54px 56px, transparent 56px),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(143, 165, 198, .28) 27px 28px);
  background-position: 0 0, 0 30px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 18px 26px -18px rgba(60, 40, 10, .5);
}
.p-library .guide-search-card::after { /* the catalogue card's rod hole */
  content: "";
  position: absolute;
  left: 50%; bottom: 10px;
  width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: inset 0 2px 3px rgba(60, 40, 10, .25);
}
.p-library .guide-search-card h3 { font-size: 21px; line-height: 1.2; margin: 8px 0 8px; }
.p-library .guide-search-card p { color: var(--text); font-size: 16px; line-height: 1.55; }
.p-library .guide-search-card .btn { margin-bottom: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .p-library .guide-search-card { animation: lib-file .5s var(--spring) both; }
  .p-library .guide-search-card:nth-child(2) { animation-delay: .05s; }
  .p-library .guide-search-card:nth-child(3) { animation-delay: .1s; }
  .p-library .guide-search-card:nth-child(4) { animation-delay: .15s; }
  .p-library .guide-search-card:nth-child(5) { animation-delay: .2s; }
  .p-library .guide-search-card:nth-child(n+6) { animation-delay: .25s; }
}
@keyframes lib-file { from { opacity: 0; transform: translateY(18px) rotate(-1.5deg); } }

/* ---------- browse by topic: one bookcase per topic ---------- */
.p-library .lib-doors { margin: 0 0 clamp(56px, 7vw, 96px); text-align: center; }
.p-library .lib-doors h2 { font-size: clamp(32px, 4.2vw, 50px); margin: 0 0 6px; }
.p-library .lib-doors-lede { margin: 0 auto clamp(26px, 3vw, 40px); color: var(--text); font-size: 18px; }
.p-library .lib-doors-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); text-align: left; }
.p-library .lib-doors-grid > li { margin: 0; }
.p-library .lib-door {
  --tint: var(--gold-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 10px 10px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  color: var(--navy);
}
.p-library .lib-doors-grid > li:nth-child(4n+2) .lib-door { --tint: var(--blue-soft); }
.p-library .lib-doors-grid > li:nth-child(4n+3) .lib-door { --tint: var(--sage-soft); }
.p-library .lib-doors-grid > li:nth-child(4n+4) .lib-door { --tint: var(--brick-soft); }
.p-library .lib-door:hover { border-color: var(--line); color: var(--navy); }
.p-library .lib-door-art {
  display: block;
  border: 0;
  border-radius: 120px 120px 16px 16px / 56px 56px 16px 16px;
  background: var(--tint);
  overflow: hidden;
  aspect-ratio: 1829 / 860;
}
.p-library .lib-door-art img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8px 8px 0; mix-blend-mode: multiply; }
.p-library .lib-door-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 8px 12px; }
.p-library .lib-door-name { font: 600 clamp(19px, 1.6vw, 21px)/1.2 var(--f-display); color: var(--navy); }
.p-library .lib-door-line { display: block; font-size: 15.5px; line-height: 1.45; color: var(--text); }
.p-library .lib-door-count {
  align-self: flex-start;
  margin-top: auto;
  padding: 3px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--tint);
  font: 600 14px/1.4 var(--f-display);
  color: var(--navy);
}
/* the shelf: one spine per guide in the topic */
.p-library .lib-door-shelf {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 46px;
  margin: 2px -10px 0;
  padding: 0 18px 12px;
  overflow: hidden;
}
.p-library .lib-door-shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: linear-gradient(180deg, var(--wood-a), var(--wood-b)); }
.p-library .lib-door-shelf i { display: block; flex: 0 0 11px; height: 28px; border-radius: 2px 2px 0 0; background: var(--gold); box-shadow: inset -2px 0 0 rgba(0, 0, 0, .14), inset 0 5px 0 rgba(255, 255, 255, .18); }
.p-library .lib-door-shelf i:nth-child(7n+2) { background: var(--blue); height: 24px; }
.p-library .lib-door-shelf i:nth-child(7n+3) { background: var(--brick); height: 31px; }
.p-library .lib-door-shelf i:nth-child(7n+4) { background: var(--sage); height: 26px; }
.p-library .lib-door-shelf i:nth-child(7n+5) { background: var(--navy); height: 30px; }
.p-library .lib-door-shelf i:nth-child(7n+6) { background: var(--gold-deep); height: 23px; }
.p-library .lib-door-shelf i:nth-child(7n+7) { background: var(--blue-ink); height: 29px; }
@media (prefers-reduced-motion: no-preference) {
  .p-library .lib-door { transition: transform .35s var(--spring), box-shadow .35s var(--ease); }
  .p-library .lib-door-art img { transition: transform .6s var(--ease); }
  .p-library .lib-door-shelf i { transition: transform .35s var(--spring); }
  .p-library .lib-door:hover, .p-library .lib-door:focus-visible { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--shadow-lift); }
  .p-library .lib-door:hover .lib-door-art img { transform: scale(1.05); }
  /* hovering a bookcase lifts its books one after another, like a hand running along the shelf */
  .p-library .lib-door:is(:hover, :focus-visible) .lib-door-shelf i { transform: translateY(-6px); }
  .p-library .lib-door-shelf i:nth-child(2) { transition-delay: .03s; } .p-library .lib-door-shelf i:nth-child(3) { transition-delay: .06s; }
  .p-library .lib-door-shelf i:nth-child(4) { transition-delay: .09s; } .p-library .lib-door-shelf i:nth-child(5) { transition-delay: .12s; }
  .p-library .lib-door-shelf i:nth-child(6) { transition-delay: .15s; } .p-library .lib-door-shelf i:nth-child(7) { transition-delay: .18s; }
  .p-library .lib-door-shelf i:nth-child(8) { transition-delay: .21s; } .p-library .lib-door-shelf i:nth-child(9) { transition-delay: .24s; }
  .p-library .lib-door-shelf i:nth-child(10) { transition-delay: .27s; } .p-library .lib-door-shelf i:nth-child(11) { transition-delay: .3s; }
  .p-library .lib-door-shelf i:nth-child(12) { transition-delay: .33s; } .p-library .lib-door-shelf i:nth-child(13) { transition-delay: .36s; }
  .p-library .lib-door-shelf i:nth-child(14) { transition-delay: .39s; }
}

/* ---------- a chosen topic: a shelf of books ---------- */
.p-library .lib-alltopics { margin: 0 0 20px; }
.p-library .lib-topic { margin: 0 0 clamp(40px, 5vw, 64px); border: 0; scroll-margin-top: calc(var(--osv-header-h) + 16px); }
.p-library .lib-topic > summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: center;
  padding: 20px 76px 20px 26px;
  margin: 0 0 30px;
  min-height: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.p-library .lib-topic > summary::before { /* brass label-holder edge */
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 6px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, #e6c16b, var(--gold-deep));
}
.p-library .lib-topic > summary h2 { grid-column: 1; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; }
.p-library .lib-topic-count { grid-column: 2; grid-row: 1; justify-self: end; padding: 4px 12px; border-radius: 999px; background: var(--gold-soft); color: var(--navy); font: 600 14px/1.4 var(--f-display); }
.p-library .lib-topic-desc { grid-column: 1 / -1; order: 0; white-space: normal; overflow: visible; color: var(--text); font-size: 16.5px; line-height: 1.5; max-width: 60em; }
.p-library .lib-topic-chev {
  position: absolute;
  right: 20px; top: 50%;
  width: 40px; height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-soft);
  color: var(--navy);
  font-size: 18px;
}
.p-library .lib-topic > summary h2:focus { outline: none; }
.p-library .lib-topic[open] > summary .lib-topic-chev { background: var(--gold); }
.p-library .lib-topic > summary:hover .lib-topic-chev { background: var(--gold); }

.p-library .lib-guide-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px 26px;
  margin: 0 0 50px;
  padding: 0 4px;
  isolation: isolate;
}
.p-library .lib-guide-grid + .lib-guide-grid { margin-top: -10px; }
.p-library .lib-guide-grid > .card {
  --c: var(--gold);
  position: relative;
  overflow: visible;
  padding: 24px 22px 20px 36px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px 16px 16px 6px;
  box-shadow: inset 15px 0 0 var(--c), inset 18px 0 0 rgba(0, 0, 0, .1), var(--shadow);
}
.p-library .lib-guide-grid > .card:nth-child(7n+2) { --c: var(--blue); }
.p-library .lib-guide-grid > .card:nth-child(7n+3) { --c: var(--brick); }
.p-library .lib-guide-grid > .card:nth-child(7n+4) { --c: var(--sage); }
.p-library .lib-guide-grid > .card:nth-child(7n+5) { --c: var(--navy); }
.p-library .lib-guide-grid > .card:nth-child(7n+6) { --c: var(--gold-deep); }
.p-library .lib-guide-grid > .card:nth-child(7n+7) { --c: var(--blue-ink); }
.p-library .lib-guide-grid > .card::before { /* ribbon bookmark */
  content: "";
  position: absolute;
  top: -1px; right: 20px;
  width: 14px; height: 32px;
  background: var(--c);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  transition: height .35s var(--spring);
}
.p-library .lib-guide-grid > .card::after { /* the shelf under each row */
  content: "";
  position: absolute;
  left: -16px; right: -16px; bottom: -24px;
  height: 13px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--wood-a), var(--wood-b));
  box-shadow: 0 9px 12px -6px rgba(80, 50, 10, .5);
  z-index: -1;
}
.p-library .lib-guide-grid > .card h3 { font-size: 20.5px; line-height: 1.22; padding-right: 22px; margin: 0 0 8px; }
.p-library .lib-guide-grid > .card p { font-size: 16px; line-height: 1.55; color: var(--text); }
.p-library .lib-guide-grid > .card .more-link { padding-top: 14px; font-size: 16.5px; }
.p-library .lib-guide-grid > .card:hover { border-color: var(--line); transform: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .p-library .lib-guide-grid > .card { transition: translate .4s var(--spring), rotate .4s var(--spring), box-shadow .4s var(--ease); transform-origin: 50% 100%; }
  .p-library .lib-guide-grid > .card:hover { translate: 0 -9px; rotate: -1.3deg; box-shadow: inset 15px 0 0 var(--c), inset 18px 0 0 rgba(0, 0, 0, .1), var(--shadow-lift); }
  .p-library .lib-guide-grid > .card:hover::before { height: 48px; }
}
/* choosing a topic slides its books onto the shelf, one after another */
@media (prefers-reduced-motion: no-preference) {
  .p-library #library-default-view[data-view="topic"] .lib-topic.is-focus .card { animation: lib-shelve .55s var(--spring) both; }
  .p-library #library-default-view[data-view="topic"] .lib-topic.is-focus > summary { animation: lib-rise .45s var(--ease) both; }
  .p-library .lib-topic.is-focus .card:nth-child(2) { animation-delay: .04s; } .p-library .lib-topic.is-focus .card:nth-child(3) { animation-delay: .08s; }
  .p-library .lib-topic.is-focus .card:nth-child(4) { animation-delay: .12s; } .p-library .lib-topic.is-focus .card:nth-child(5) { animation-delay: .16s; }
  .p-library .lib-topic.is-focus .card:nth-child(6) { animation-delay: .2s; } .p-library .lib-topic.is-focus .card:nth-child(n+7) { animation-delay: .24s; }
}
@keyframes lib-shelve { from { opacity: 0; transform: translateY(-26px) rotate(2deg); } }
@keyframes lib-rise { from { opacity: 0; transform: translateY(12px); } }

/* ---------- the notice board by the door ---------- */
.p-library .lib-board {
  position: relative;
  margin: clamp(10px, 2vw, 30px) 0 clamp(50px, 6vw, 84px);
  border-radius: var(--r-xl);
  padding: clamp(30px, 3.6vw, 48px) clamp(16px, 3vw, 40px) clamp(34px, 3.8vw, 50px);
  background-color: var(--cork);
  background-image: radial-gradient(rgba(122, 91, 19, .17) 1.2px, transparent 1.7px), radial-gradient(rgba(255, 255, 255, .4) 1px, transparent 1.5px);
  background-size: 14px 14px, 23px 23px;
  background-position: 0 0, 7px 9px;
  box-shadow: inset 0 0 0 12px #c99a45, inset 0 0 0 15px #a67a2c, inset 0 10px 26px 10px rgba(122, 91, 19, .24), var(--shadow);
}
.p-library .lib-board .task-shortcuts { margin: 0; }
.p-library .task-shortcuts-q {
  position: relative;
  display: table;
  margin: 0 auto clamp(26px, 3vw, 36px);
  padding: 14px 28px 12px;
  background: var(--paper);
  border-radius: 4px;
  font: 400 clamp(30px, 3.4vw, 40px)/1 var(--f-hand);
  color: var(--navy);
  rotate: -1.5deg;
  box-shadow: 0 16px 22px -16px rgba(60, 40, 10, .6);
}
.p-library .task-shortcuts-q::before, .p-library .task-shortcuts-q::after { /* two strips of tape */
  content: "";
  position: absolute;
  top: -10px;
  width: 64px; height: 22px;
  background: rgba(243, 229, 192, .85);
  box-shadow: 0 1px 2px rgba(60, 40, 10, .15);
}
.p-library .task-shortcuts-q::before { left: -18px; rotate: -24deg; }
.p-library .task-shortcuts-q::after { right: -18px; rotate: 22deg; }
.p-library .task-shortcuts ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; padding: 8px 6px 0; margin: 0; list-style: none; }
.p-library .task-shortcuts li { position: relative; margin: 0; --tilt: -1.2deg; --pin: var(--brick); }
.p-library .task-shortcuts li:nth-child(3n+2) { --tilt: 1deg; --pin: var(--blue-ink); }
.p-library .task-shortcuts li:nth-child(3n+3) { --tilt: -.5deg; --pin: var(--gold-deep); }
.p-library .task-shortcuts li::before { /* push-pin */
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  z-index: 2;
  width: 20px; height: 20px; margin-left: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--pin) 32% 100%);
  box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.p-library .task-shortcuts a {
  height: 100%;
  min-height: 74px;
  padding: 18px 14px 16px 20px;
  border: 0;
  border-radius: 5px;
  font-size: 17px;
  rotate: var(--tilt);
  box-shadow: 0 16px 22px -16px rgba(60, 40, 10, .6);
}
@media (prefers-reduced-motion: no-preference) {
  .p-library .task-shortcuts a { transition: rotate .4s var(--spring), translate .4s var(--spring), box-shadow .4s var(--ease); }
  .p-library .task-shortcuts li::before { transition: transform .5s var(--spring); }
  .p-library .task-shortcuts li:hover::before { animation: lib-wiggle .6s var(--ease); }
  .p-library .task-shortcuts a:hover { rotate: 0deg; translate: 0 -4px; box-shadow: 0 24px 30px -20px rgba(60, 40, 10, .65); }
}
@keyframes lib-wiggle { 30% { transform: rotate(-16deg); } 60% { transform: rotate(12deg); } }

/* ---------- the Decoder drawer and the Start Here note ---------- */
.p-library .lib-pair { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(22px, 3vw, 36px); align-items: stretch; margin-bottom: clamp(20px, 3vw, 40px); }
.p-library .lib-pair h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.08; margin: 0 0 12px; }
.p-library .lib-pair p { font-size: 17.5px; line-height: 1.6; margin: 0 0 22px; }
.p-library .lib-decoder {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 22px;
  align-items: center;
  padding: clamp(28px, 3.6vw, 44px);
  border-radius: var(--r-xl);
  color: var(--on-dark);
  background:
    radial-gradient(1.5px 1.5px at 8% 18%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 22% 80%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 44% 10%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 62% 88%, rgba(255,255,255,.45), transparent),
    radial-gradient(2px 2px at 90% 12%, rgba(255,255,255,.65), transparent),
    radial-gradient(600px 320px at 85% 100%, rgba(247, 200, 100, .18), transparent 70%),
    var(--navy-deep);
  box-shadow: var(--shadow-lift);
}
.p-library .lib-decoder .eyebrow { color: var(--gold); }
.p-library .lib-decoder h2 { color: var(--paper); }
.p-library .lib-decoder p { color: var(--on-dark); }
/* the card-catalogue drawer: index cards standing in a drawer, fanning when you reach for them */
.p-library .lib-drawer { position: relative; height: 200px; align-self: end; }
.p-library .lib-drawer-card {
  position: absolute;
  left: 18px; right: 18px; bottom: 58px;
  height: 104px;
  padding: 10px 14px;
  border-radius: 6px 6px 2px 2px;
  background-color: #fffdf6;
  background-image: linear-gradient(180deg, transparent 0 36px, rgba(169, 84, 47, .5) 36px 38px, transparent 38px), repeating-linear-gradient(180deg, transparent 0 17px, rgba(143, 165, 198, .35) 17px 18px);
  background-position: 0 0, 0 40px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, .18);
  font: 600 22px/1 var(--f-display);
  color: var(--navy);
  transform-origin: 50% 100%;
}
.p-library .lib-drawer-card:nth-child(1) { rotate: -9deg; translate: -14px 0; }
.p-library .lib-drawer-card:nth-child(2) { rotate: -3deg; translate: -4px -8px; }
.p-library .lib-drawer-card:nth-child(3) { rotate: 3deg; translate: 6px -14px; }
.p-library .lib-drawer-card:nth-child(4) { rotate: 8deg; translate: 14px -20px; text-align: right; }
.p-library .lib-drawer-card:nth-child(2) b, .p-library .lib-drawer-card:nth-child(3) b { display: block; text-align: center; }
.p-library .lib-drawer-front {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 76px;
  border-radius: 10px 10px 16px 16px;
  background: linear-gradient(180deg, #c99a45, #9d7128);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .22), 0 16px 24px -12px rgba(0, 0, 0, .7);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.p-library .lib-drawer-label { width: 76px; height: 20px; border-radius: 3px; background: #fffdf6; box-shadow: 0 0 0 3px #d9b35c, inset 0 -6px 0 rgba(143, 165, 198, .25); }
.p-library .lib-drawer-pull { width: 58px; height: 14px; border-radius: 0 0 30px 30px; background: linear-gradient(180deg, #f3dd9a, #b4861f); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: no-preference) {
  .p-library .lib-drawer-card { transition: rotate .5s var(--spring), translate .5s var(--spring); }
  .p-library .lib-decoder:is(:hover, :focus-within) .lib-drawer-card:nth-child(1) { rotate: -18deg; translate: -34px -12px; }
  .p-library .lib-decoder:is(:hover, :focus-within) .lib-drawer-card:nth-child(2) { rotate: -6deg; translate: -10px -26px; }
  .p-library .lib-decoder:is(:hover, :focus-within) .lib-drawer-card:nth-child(3) { rotate: 6deg; translate: 12px -30px; }
  .p-library .lib-decoder:is(:hover, :focus-within) .lib-drawer-card:nth-child(4) { rotate: 17deg; translate: 34px -18px; }
}

.p-library .lib-start {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
  padding: clamp(40px, 4.4vw, 54px) clamp(24px, 3.6vw, 42px) clamp(28px, 3.4vw, 40px);
  border-radius: 6px;
  background: #fbf0cf;
  box-shadow: 0 22px 34px -22px rgba(60, 40, 10, .55);
  rotate: 1deg;
}
.p-library .lib-start::after { content: ""; position: absolute; right: 0; bottom: 0; width: 38px; height: 38px; background: linear-gradient(135deg, #f1dfae 50%, var(--cream) 50%); border-radius: 0 0 6px 0; }
.p-library .lib-start .pushpin { position: absolute; top: -12px; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--brick) 32% 100%); box-shadow: 0 5px 6px -2px rgba(0, 0, 0, .35); }
.p-library .lib-start p { color: var(--text); }
/* four stepping stones: one focus a week */
.p-library .lib-start-weeks { display: flex; gap: 10px; order: -1; }
.p-library .lib-start-weeks i { width: 30px; height: 30px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px var(--gold); }
.p-library .lib-start-weeks i:nth-child(2) { box-shadow: 0 0 0 3px var(--blue); }
.p-library .lib-start-weeks i:nth-child(3) { box-shadow: 0 0 0 3px var(--sage); }
.p-library .lib-start-weeks i:nth-child(4) { box-shadow: 0 0 0 3px var(--brick); }
@media (prefers-reduced-motion: no-preference) {
  .p-library .lib-start { transition: rotate .5s var(--spring); }
  .p-library .lib-start:hover { rotate: 0deg; }
  .p-library .lib-start-weeks i { transition: background-color .3s, transform .35s var(--spring); }
  .p-library .lib-start:hover .lib-start-weeks i { background: var(--gold-soft); transform: translateY(-4px); }
  .p-library .lib-start:hover .lib-start-weeks i:nth-child(2) { transition-delay: .08s; }
  .p-library .lib-start:hover .lib-start-weeks i:nth-child(3) { transition-delay: .16s; }
  .p-library .lib-start:hover .lib-start-weeks i:nth-child(4) { transition-delay: .24s; }
  .p-library .lib-start:hover .pushpin { animation: lib-wiggle .6s var(--ease); }
}

/* ---------- widths ---------- */
@media (max-width: 1100px) {
  .p-library .lib-doors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-library .lib-pair { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .p-library .lib-guide-grid, .p-library .guide-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-library .task-shortcuts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 819px) {
  .p-library .lib-tools-row { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .p-library .lib-guide-grid, .p-library .guide-search-grid { grid-template-columns: 1fr; gap: 46px; }
  .p-library .task-shortcuts ul { grid-template-columns: 1fr; gap: 18px; }
  .p-library .lib-decoder { grid-template-columns: 1fr; }
  .p-library .lib-drawer { width: 210px; height: 170px; justify-self: center; }
  .p-library .lib-topic > summary { grid-template-columns: 1fr; padding: 18px 64px 18px 22px; }
  .p-library .lib-topic-count { grid-column: 1; grid-row: auto; justify-self: start; }
  .p-library .lib-topic-chev { right: 14px; }
}
@media (max-width: 600px) {
  /* bookcases become rows: painting beside the words, the shelf underneath */
  .p-library .lib-doors-grid { grid-template-columns: 1fr; gap: 14px; }
  .p-library .lib-door { display: grid; grid-template-columns: 40% minmax(0, 1fr); column-gap: 12px; padding: 10px 10px 0; }
  .p-library .lib-door-art { align-self: center; border-radius: 60px 60px 12px 12px / 28px 28px 12px 12px; }
  .p-library .lib-door-body { padding: 4px 0 10px; gap: 4px; }
  .p-library .lib-door-name { font-size: 18px; }
  .p-library .lib-door-line { display: block; font-size: 14.5px; }
  .p-library .lib-door-count { margin-top: 4px; font-size: 13.5px; }
  .p-library .lib-door-shelf { grid-column: 1 / -1; height: 38px; padding-bottom: 10px; }
  .p-library .lib-door-shelf::after { height: 10px; }
  .p-library .lib-door-shelf i { height: 22px; flex-basis: 10px; }
  .p-library .lib-desk-books { left: 22px; }
  .p-library .lib-desk-books i { width: 11px; }
  .p-library .lib-board { padding-inline: 18px; }
  .p-library .task-shortcuts a { font-size: 16.5px; }
}
@media (max-width: 374px) {
  .p-library .lib-door { grid-template-columns: 36% minmax(0, 1fr); }
  .p-library .lib-door-line { font-size: 14px; }
  .p-library .lib-desk::after { left: -8px; right: -8px; }
  .p-library .lib-search-row input[type="search"] { padding: 0 14px; font-size: 16px; }
  .p-library .task-shortcuts-q::before, .p-library .task-shortcuts-q::after { display: none; }
}
@media print {
  .p-library .lib-desk-books, .p-library .lib-drawer, .p-library .lib-door-shelf, .p-library .lib-start-weeks { display: none; }
}

/* the opening words sit clear of the treeline, above the desk */
@media (min-width: 900px) { .p-library main > .page-head .pack-hero-copy { padding-bottom: 56px; } }
.p-library .lib-decoder { row-gap: 0; }
.p-library .lib-decoder > div:first-child { grid-column: 1; grid-row: 1; }
.p-library .lib-decoder > div:nth-child(2) { grid-column: 1; grid-row: 2; align-self: start; }
.p-library .lib-decoder > .lib-drawer { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 680px) {
  .p-library .lib-decoder > .lib-drawer { grid-column: 1; grid-row: 3; margin-top: 16px; }
}
@media (max-width: 600px) { .p-library .lib-desk::after { left: -10px; right: -10px; } }