/* Notes catalog follows the warm, matte bookshelf direction from Figma. */
.notes-page,
.notes-page .site-main { background: #fff; color: #352c24; }
.notes-page { min-width: 0; }
.notes-page .site-main { padding-inline: 0; }
.notes-library {
  --paper: #f5efdf;
  --ink: #07194a;
  --wood: #916346;
  min-height: calc(100vh - var(--topbar-height));
  padding: 0;
  overflow: visible;
  background: #fff;
  color: var(--ink);
}
.notes-hero { width: min(1200px, calc(100% - 40px)); margin: 0 auto 45px; padding-block-start: 46px; text-align: start; background: #fff; direction: rtl; }
.notes-art-credit { margin: 12px auto 0; color: #6f685b; font-size: .65rem; line-height: 1.7; text-align: center; }
.notes-art-credit a { color: #63717d; text-decoration: underline; text-underline-offset: 2px; }
.notes-art-credit a:focus-visible { outline: 2px solid #007fa8; outline-offset: 3px; }
.notes-shelf-section { width: 100%; min-height: calc(100svh - var(--topbar-height) - 340px); padding: 24px 24px 52px; background: var(--paper); }
.notes-shelves {
  display: grid;
  gap: 26px;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 28px 28px 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.notes-shelf {
  position: relative;
  height: 180px;
  overflow: visible;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.notes-shelf-title {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 8px;
  width: auto;
  margin: 0;
  padding: 4px 11px;
  border: 1px solid #e8dcc5;
  border-radius: 6px;
  background: #fff8e9;
  color: #493a2c;
  box-shadow: 0 2px 5px rgb(66 48 32 / 10%);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}
.notes-shelf-title::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-inline-end: 6px;
  vertical-align: middle;
  border-radius: 50%;
  background: #78936e;
}
.notes-plank { display: none; }
.notes-shelf::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 2%;
  bottom: -26px;
  left: 2%;
  height: 54px;
  background: linear-gradient(180deg, #b59c7a 0%, #c9b99d 55%, #cfc2a9 100%);
  clip-path: polygon(8% 0, 100% 0, 84% 100%, 0 100%);
  filter: drop-shadow(0 5px 5px rgb(61 48 34 / 15%));
}
.notes-shelf::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 2%;
  bottom: 23px;
  left: 2%;
  height: 10px;
  border: 1px solid #76553d;
  border-radius: 1px;
  background: #956a49;
  box-shadow: 0 3px 0 #c5b497, 0 6px 6px rgb(67 47 31 / 15%);
}
.notes-books {
  position: absolute;
  z-index: 2;
  inset: 0 120px 31px 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  direction: rtl;
}
.notes-shelf-row { display: contents; }
.notes-book {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 calc(var(--width) * 1.3);
  width: calc(var(--width) * 1.3);
  height: var(--height);
  color: inherit;
  text-decoration: none;
  outline: none;
}
.notes-volume {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
  transition: transform .2s ease, filter .2s ease;
}
.notes-book-art { display: block; width: 100%; height: 100%; overflow: visible; }
.notes-volume .notes-access-flag { position: absolute; transform: none; inset-inline: 3px; top: 10px; display: block; padding: 3px 1px; border: 1px solid #ddd2b9; border-radius: 5px; background: #fff8e9; color: #38544c; font-size: 8px; line-height: 1.4; font-weight: 700; text-align: center; white-space: nowrap; pointer-events: none; }
.notes-printed-title { display: none; }
.notes-printed-number {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  overflow: hidden;
  color: #f7f0df;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px rgb(48 38 29 / 38%);
  pointer-events: none;
}
.notes-caption {
  position: absolute;
  z-index: 10;
  right: 50%;
  bottom: calc(100% + 9px);
  width: max-content;
  max-width: min(230px, 64vw);
  padding: 7px 11px;
  border: 1px solid #eadfce;
  border-radius: 8px;
  background: #fff8e9;
  color: #49392a;
  box-shadow: 0 3px 8px rgb(64 48 33 / 10%);
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(50%, 5px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none;
}
.notes-caption::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  right: calc(50% - 5px);
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border-right: 1px solid #eadfce;
  border-bottom: 1px solid #eadfce;
  background: #fff8e9;
}
.notes-book:hover,
.notes-book:focus-visible,
.notes-book.is-selected { z-index: 8; }
.notes-book:not(.notes-book--coming-soon):hover .notes-volume,
.notes-book:not(.notes-book--coming-soon):focus-visible .notes-volume,
.notes-book:not(.notes-book--coming-soon).is-selected .notes-volume {
  transform: translateY(-7px) scale(1.04);
  filter: drop-shadow(0 4px 2px rgb(55 42 30 / 17%));
}
.notes-book:hover .notes-caption,
.notes-book:focus-visible .notes-caption,
.notes-book.is-selected .notes-caption {
  opacity: 1;
  visibility: visible;
  transform: translate(50%, 0);
}
.notes-book:focus-visible .notes-volume { outline: 2px solid #786145; outline-offset: 3px; }
.notes-book--coming-soon { cursor: default; }
.notes-coming-soon {
  position: absolute;
  top: 12%;
  right: 50%;
  display: grid;
  min-width: 16px;
  min-height: 53px;
  place-items: center;
  padding: 3px 1px;
  transform: translateX(50%);
  border: 1px solid rgb(89 67 44 / 32%);
  border-radius: 5px;
  background: #efe0bb;
  color: #624a2e;
  font-size: 7px;
  font-weight: 800;
  line-height: 1.35;
  writing-mode: vertical-rl;
  pointer-events: none;
}
.notes-empty { padding: 40px 20px; color: #746a53; text-align: center; }

/* Reading/detail pages share the catalog typography without inheriting its shelf. */
.notes-content { width: min(1000px, 90%); margin: 0 auto; padding: 50px 0 90px; }
.notes-content header { margin-block: 28px; }
.notes-content h1 { font-size: clamp(25px, 4vw, 40px); line-height: 1.6; }
.notes-back, .notes-content a { color: #67533e; }
.notes-filters { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; margin-bottom: 28px; }
.notes-filters label { display: grid; flex: 1; min-width: 180px; gap: 8px; }
.notes-filters input, .notes-filters select, .notes-filters button, .notes-download {
  padding: 12px 16px;
  border: 1px solid #d7cbbb;
  border-radius: 10px;
  background: #fffdf9;
  color: #49392a;
  font: inherit;
}
.notes-filters button { cursor: pointer; }
.notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.notes-card { display: flex; min-height: 205px; flex-direction: column; align-items: flex-start; padding: 22px; border: 1px solid #e4dbce; border-radius: 14px; background: #fffdf9; box-shadow: 0 5px 16px rgb(63 48 35 / 4%); }
.notes-card h2 { margin: 12px 0 4px; font-size: 19px; line-height: 1.75; }
.notes-card h2 a { color: #443629; }
.notes-card h2 a:hover { color: #806047; }
.notes-card p { margin: 5px 0 12px; color: #74695f; }
.notes-card-footer { display: flex; width: 100%; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid #eee7de; }
.notes-card-action { display: inline-flex; min-height: 38px; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #d7c6b4; border-radius: 10px; background: #f7efe5; color: #67472f !important; font-size: .78rem; font-weight: 800; }
.notes-card-action:hover { border-color: #a98260; background: #efe2d2; }
.notes-card p, .notes-body { line-height: 2; overflow-wrap: anywhere; }
.notes-card > span, .notes-card small { color: #746a5d; font-size: 12px; }
.notes-pagination { display: flex; gap: 24px; margin-top: 24px; }
.notes-reading { max-width: 800px; }
.notes-download { display: inline-block; margin-bottom: 24px; }
.notes-content :focus-visible { outline: 3px solid #786145; outline-offset: 4px; }

/* JS reveals headings first, then physical shelves. Without JS nothing is hidden. */
.notes-library--animated [data-sequence],
.notes-library--animated [data-notes-reveal] {
  opacity: 0;
  transform: translateY(12px);
  /* Entering the hidden setup state must never fade visible content out. */
  transition: none;
}
.notes-library--animated [data-sequence].is-revealed,
.notes-library--animated [data-notes-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .65, .3, 1);
}

/* Two real shelves per grade on narrow screens, using the same spine artwork. */
@media (max-width: 900px) {
  .notes-shelf-section { padding: 18px 12px 38px; }
  .notes-shelves {
    width: min(650px, 100%);
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 24px 12px 44px;
    border-radius: 0;
  }
  .notes-shelf { min-width: 0; height: auto; }
  .notes-shelf-title {
    position: static;
    width: fit-content;
    margin: 0 auto 8px;
    padding: 5px 16px;
    font-size: 13px;
  }
  .notes-shelf::before, .notes-shelf::after { display: none; }
  .notes-books {
    position: relative;
    inset: auto;
    display: grid;
    gap: 30px;
    min-width: 0;
    overflow: visible;
  }
  .notes-shelf-row {
    position: relative;
    display: flex;
    min-width: 0;
    height: 166px;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(2px, .65vw, 5px);
    padding: 0 2px 28px;
    isolation: isolate;
    direction: rtl;
  }
  .notes-shelf-row::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: auto 0 -8px;
    height: 36px;
    background: linear-gradient(180deg, #b59c7a, #cfc2a9);
    clip-path: polygon(8% 0, 100% 0, 84% 100%, 0 100%);
    pointer-events: none;
  }
  .notes-shelf-row::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: auto 0 22px;
    height: 7px;
    border: 1px solid #76553d;
    border-radius: 1px;
    background: #956a49;
    box-shadow: 0 3px 0 #c5b497, 0 5px 5px rgb(67 47 31 / 14%);
    pointer-events: none;
  }
  .notes-book {
    flex: 0 1 calc((100% - 14px) / 8);
    width: calc((100% - 14px) / 8);
    max-width: 46px;
    min-width: 0;
    height: calc(var(--height) * .92);
    min-height: 44px;
    touch-action: manipulation;
  }
  .notes-volume { overflow: visible; }
  .notes-printed-number { bottom: 7px; font-size: 9px; }
  .notes-coming-soon { min-width: 15px; min-height: 50px; font-size: 7px; }
  .notes-caption { max-width: min(210px, 72vw); font-size: 11px; }
  .notes-shelf-row .notes-book:first-child .notes-caption { right: 0; transform: translate(0, 5px); }
  .notes-shelf-row .notes-book:last-child .notes-caption { right: auto; left: 0; transform: translate(0, 5px); }
  .notes-shelf-row .notes-book:first-child:is(:hover, :focus-visible, .is-selected) .notes-caption,
  .notes-shelf-row .notes-book:last-child:is(:hover, :focus-visible, .is-selected) .notes-caption { transform: translate(0, 0); }
  .notes-shelf-row .notes-book:first-child .notes-caption::after { right: 10px; }
  .notes-shelf-row .notes-book:last-child .notes-caption::after { right: auto; left: 10px; }
  .notes-book:not(.notes-book--coming-soon):hover .notes-volume { transform: translateY(-4px); }
}
@media (max-width: 760px) {
  .notes-hero { width: calc(100% - 36px); padding-block-start: 25px; margin-block-end: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  .notes-library *, .notes-library *::before, .notes-library *::after { animation: none !important; transition: none !important; }
  .notes-library--animated [data-sequence],
  .notes-library--animated [data-notes-reveal] { opacity: 1; transform: none; }
}