/* 04 — a slim clipboard pad seen edge-on, opening into an A4 sheet. */
.book-notes {
  --cover: #829b86;
  --cover-ink: #2f4435;
  --book-width: clamp(21px, 1.65vw, 27px);
  --book-height: clamp(380px, 55vh, 540px);
  margin-left: clamp(8px, 1vw, 15px);
}

.book-notes::before {
  inset: 0 auto 0 0;
  width: 5px;
  border: 0;
  border-radius: 1px;
  background: #3d5545;
  box-shadow: -1px 2px 3px rgba(45,35,23,.16);
  filter: none;
  transform: none;
}

.note-pad-edge {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  overflow: visible;
  color: #314438;
  background: transparent;
  box-shadow: 4px 7px 9px rgba(52,42,29,.13);
}

.note-binding-rail {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #47614f;
  box-shadow: inset -1px 0 rgba(25,39,30,.2), 1px 0 rgba(235,241,232,.3);
}

.note-paper-core {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(249,248,242,.96) 0 1px, rgba(183,191,182,.24) 1px 2px, rgba(231,234,226,.9) 2px 3px),
    #e6e8e0;
  box-shadow:
    inset 1px 0 rgba(255,255,255,.7),
    inset -1px 0 rgba(92,101,94,.13),
    1px 0 #c9cec5,
    2px 1px #aeb6ad;
  clip-path: polygon(0 .7%, 97% 0, 100% 2%, 99% 12%, 100% 22%, 98% 33%, 100% 46%, 99% 59%, 100% 71%, 98% 83%, 100% 96%, 96% 100%, 1% 99.5%);
}

.note-paper-core::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 17px;
  background: #2f332f;
  box-shadow: 0 2px rgba(34,39,35,.2), inset 0 1px rgba(255,255,255,.08);
}

.note-paper-core::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 0;
  left: 1px;
  height: 4px;
  background: #c8cdc5;
  box-shadow: 0 -1px rgba(103,111,104,.18), 0 2px rgba(80,87,81,.16);
}

.note-edge-number {
  position: absolute;
  z-index: 5;
  top: 4px;
  left: 50%;
  color: rgba(241,239,228,.88);
  font: 500 9px/1 var(--mono);
  letter-spacing: .12em;
  text-shadow: 0 -1px rgba(0,0,0,.36), 0 1px rgba(255,255,255,.08);
  transform: translateX(-50%);
}

.note-edge-title {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(47,68,53,.94);
  font: 500 clamp(13px, 1.25vw, 19px)/1 var(--mono);
  letter-spacing: .13em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.notes-reader {
  width: min(720px, calc(100vw - 24px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 48px 26px 24px;
  overflow: visible;
  border: 0;
  background: transparent;
  color: #253027;
}

.notes-reader::backdrop {
  background: rgba(42,39,32,.74);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.notes-reader[open] {
  display: grid;
  justify-items: center;
  animation: notes-arrive .42s cubic-bezier(.2,.78,.16,1) both;
}

@keyframes notes-arrive {
  from { opacity: 0; transform: translateY(22px) scale(.93); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.notes-index {
  width: min(500px, 82vw, calc((100vh - 165px) / 1.4142));
  margin: 0 0 10px;
  color: rgba(239,241,232,.72);
  font: 500 8px/1 var(--mono);
  letter-spacing: .14em;
}

.notes-close {
  position: fixed;
  z-index: 30;
  top: 24px;
  right: 28px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(245,240,229,.45);
  border-radius: 50%;
  background: rgba(31,27,22,.18);
  color: #f6f1e7;
  font: 23px/1 var(--mono);
  cursor: pointer;
}

.tear-pad {
  position: relative;
  width: min(500px, 82vw, calc((100vh - 165px) / 1.4142));
  aspect-ratio: 210 / 297;
  perspective: 1800px;
}

.pad-board {
  position: absolute;
  inset: -11px -14px -17px;
  z-index: 0;
  border-radius: 2px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.19), transparent 30%),
    var(--paper-noise),
    #3f5548;
  box-shadow:
    18px 26px 42px rgba(20,24,20,.35),
    inset 0 0 0 1px rgba(24,38,28,.42),
    inset -4px -4px rgba(30,43,34,.13);
  transform: rotate(-.35deg);
}

.pad-paper-stack {
  position: absolute;
  inset: 13px 3px 1px 5px;
  z-index: 1;
  background: #b4c7b6;
  box-shadow:
    2px 2px #a9beaD,
    4px 4px #9eb5a2,
    6px 7px #8fa693,
    8px 10px 8px rgba(34,49,39,.2);
}

.pad-clip {
  position: absolute;
  z-index: 8;
  top: -4px;
  left: 50%;
  width: 54%;
  height: 31px;
  border: 1px solid #58615d;
  border-radius: 5px 5px 3px 3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.8), transparent 28%, rgba(33,42,38,.26)),
    linear-gradient(90deg, #6f7974, #c8cfcc 22%, #7b8580 48%, #d8ddda 72%, #68716d);
  box-shadow: 0 4px 5px rgba(30,38,33,.3), inset 0 1px rgba(255,255,255,.78);
  transform: translateX(-50%);
}

.pad-clip span {
  position: absolute;
  top: 8px;
  right: 17%;
  left: 17%;
  height: 8px;
  border: 1px solid rgba(56,65,60,.62);
  border-radius: 4px;
  background: rgba(226,231,228,.54);
}

.note-under-sheet,
.note-sheet {
  position: absolute;
  inset: 14px 4px 0;
  padding: clamp(72px, 10vh, 96px) clamp(34px, 6vw, 58px) 40px;
  color: #263129;
  background:
    linear-gradient(90deg, transparent 0 11%, rgba(70,100,78,.13) 11%, rgba(70,100,78,.13) calc(11% + 1px), transparent calc(11% + 1px)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(55,81,63,.17) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(55,81,63,.055) 31px 32px),
    linear-gradient(rgba(255,255,255,.08), rgba(57,79,62,.03)),
    var(--paper-noise),
    #bdcfbf;
  clip-path: polygon(0 0, 100% 0, 100% 98.8%, 97% 100%, 94% 98.8%, 91% 100%, 88% 98.8%, 85% 100%, 82% 98.8%, 79% 100%, 76% 98.8%, 73% 100%, 70% 98.8%, 67% 100%, 64% 98.8%, 61% 100%, 58% 98.8%, 55% 100%, 52% 98.8%, 49% 100%, 46% 98.8%, 43% 100%, 40% 98.8%, 37% 100%, 34% 98.8%, 31% 100%, 28% 98.8%, 25% 100%, 22% 98.8%, 19% 100%, 16% 98.8%, 13% 100%, 10% 98.8%, 7% 100%, 4% 98.8%, 0 100%);
}

.note-under-sheet {
  z-index: 2;
  background-color: #b1c6b4;
}

.note-under-sheet p,
.note-sheet > p {
  margin: 0;
  color: rgba(38,49,41,.62);
  font: 500 8px/1 var(--mono);
  letter-spacing: .12em;
}

.note-under-sheet h2,
.note-sheet h2 {
  margin: clamp(34px, 5vh, 52px) 0 0;
  font: 400 clamp(31px, 5vw, 48px)/.96 var(--display);
  letter-spacing: -.06em;
}

.note-sheet h2 em {
  color: #526e5a;
  font-weight: 400;
}

.note-under-sheet small {
  display: block;
  max-width: 240px;
  margin-top: 31px;
  font: 400 9px/1.75 var(--mono);
}

.note-rule {
  display: block;
  width: 62px;
  margin-top: 34px;
  border-top: 1px solid rgba(38,49,41,.48);
}

.note-sheet {
  z-index: 4;
  transform-origin: 50% 7px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: 7px 9px 13px rgba(36,49,39,.14);
  transition: transform 1.05s cubic-bezier(.22,.72,.16,1), filter .75s ease;
}

.notes-reader.is-page-turned .note-sheet {
  filter: drop-shadow(0 -14px 9px rgba(24,34,27,.23));
  transform: rotateX(168deg);
}

.tear-line {
  position: absolute;
  top: 48px;
  right: 20px;
  left: 20px;
  border-top: 1px dashed rgba(50,68,54,.42);
}

.note-sheet blockquote {
  max-width: 260px;
  margin: clamp(48px, 8vh, 78px) 0 0;
  color: rgba(37,49,40,.82);
  font: italic clamp(12px, 1.4vw, 15px)/1.8 var(--serif);
}

.note-page-number {
  position: absolute;
  right: 30px;
  bottom: 31px;
  font: 500 8px/1 var(--mono);
}

.notes-turn {
  margin-top: 28px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(241,238,227,.56);
  background: transparent;
  color: #f3efe4;
  font: 500 9px/1 var(--mono);
  letter-spacing: .14em;
  cursor: pointer;
}

.notes-turn span {
  display: inline-block;
  margin-left: 8px;
}

@media (max-width: 760px) {
  .book-notes {
    --book-width: 23px;
    --book-height: 360px;
  }

  .notes-reader {
    padding: 54px 18px 20px;
  }

  .notes-close {
    top: 16px;
    right: 16px;
  }

  .note-under-sheet,
  .note-sheet {
    padding-right: 32px;
    padding-left: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notes-reader[open],
  .note-sheet {
    animation-duration: .01ms;
    transition-duration: .01ms;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .book-notes {
    --book-width: clamp(20px, 2.4vw, 25px);
    --book-height: clamp(420px, 54vh, 535px);
    margin-left: 7px;
  }
}

@media (max-width: 760px) {
  .book-notes {
    --book-width: clamp(17px, 5vw, 21px);
    --book-height: clamp(290px, 52dvh, 405px);
    margin-left: 2px;
  }

  .note-binding-rail {
    width: 3px;
  }

  .note-paper-core {
    left: 3px;
  }

  .note-edge-number {
    top: 4px;
    font-size: 7px;
  }

  .note-edge-title {
    font-size: clamp(10px, 3.25vw, 13px);
  }

  .notes-reader {
    width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height: 100dvh;
    padding: calc(52px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  }

  .notes-index,
  .tear-pad {
    width: min(82vw, calc((100dvh - 155px) / 1.4142));
  }

  .notes-close {
    top: calc(12px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    width: 42px;
    height: 42px;
  }

  .note-under-sheet,
  .note-sheet {
    padding: clamp(62px, 10dvh, 82px) 27px 34px;
  }

  .note-under-sheet h2,
  .note-sheet h2 {
    font-size: clamp(27px, 9vw, 39px);
  }
}