.book--notebook {
  --cloth: #3e5872;
  --cloth-light: #5a7590;
  --cloth-dark: #263a50;
  --paper: #fbf8ef;
  --paper-edge: #e4dcc8;
  --squares: rgba(96, 128, 180, 0.2);
  --margin-line: rgba(200, 86, 106, 0.45);
  --pencil-lead: #3d4660;
}
.book--notebook .book__cover {
  padding: 14px 44px 18px 16px;
  border-radius: 16px;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.05) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, 0.07) 3px 4px),
    linear-gradient(180deg, var(--cloth-light), var(--cloth) 35%, var(--cloth-dark));
  box-shadow:
    inset 0 0 0 3px var(--cloth-light),
    inset 0 0 0 5px var(--cloth-dark),
    0 6px 0 var(--ink),
    0 24px 44px rgba(0, 0, 0, 0.55);
}
.book--notebook .book__corner,
.book--notebook .book__ribbon { display: none; }
.book--notebook .book__spread { box-shadow: 0 3px 0 var(--paper-edge), 0 5px 0 #cfc5ad, 0 7px 0 var(--ink); }
.book--notebook .book__spread::after {
  width: 2px;
  background: repeating-linear-gradient(180deg, rgba(58, 42, 30, 0.6) 0 7px, transparent 7px 13px);
}
.book--notebook .book__page--left,
.book--notebook .book__page--right,
.book--notebook[data-pages-per-view="1"] .book__page--left {
  background:
    linear-gradient(90deg, transparent 0 34px, var(--margin-line) 34px 36px, transparent 36px),
    linear-gradient(var(--squares) 1px, transparent 1px) 0 0 / 100% 20px,
    linear-gradient(90deg, var(--squares) 1px, transparent 1px) 0 0 / 20px 100%,
    var(--paper);
}
.book--notebook .book__page--left { box-shadow: inset -16px 0 18px -14px rgba(70, 60, 40, 0.4); }
.book--notebook .book__page--right { box-shadow: inset 16px 0 18px -14px rgba(70, 60, 40, 0.4); }
.book--notebook[data-pages-per-view="1"] .book__page--left { box-shadow: inset 12px 0 14px -12px rgba(70, 60, 40, 0.4); }
.book--notebook .book__page { padding-left: 46px; }
.book--notebook .book__folio { color: var(--pencil-lead); }

.book__elastic {
  position: absolute;
  z-index: 4;
  top: -7px;
  bottom: -9px;
  right: 14px;
  width: 11px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: linear-gradient(90deg, #120e1c, #2f2846 50%, #120e1c);
}
.book__pencil {
  position: absolute;
  z-index: 3;
  bottom: -52px;
  right: 9px;
  width: 21px;
  filter: drop-shadow(-2px 3px 0 rgba(15, 12, 30, 0.45));
}
.book__pencil .sprite { display: block; width: 100%; }

.notebook .book__cover { --book-height: min(580px, calc(100dvh - 170px)); }
.overlay[data-kind="notebook"] .overlay__body { max-width: 880px; }

.notebook__title { display: grid; gap: 6px; padding-block: 2px 8px; }
.notebook__title h2 { margin: 0; font-family: var(--font-title); font-size: 1.4rem; color: var(--ink); }
.notebook__title p { margin: 0; }
.notebook__rule {
  position: relative;
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.35rem;
  line-height: 1.12;
  color: var(--ink);
}
.notebook__rule::before {
  content: "–";
  position: absolute;
  left: -16px;
  color: var(--cherry);
}
.notebook__rule .is-new { box-shadow: 0 0 0 2px var(--candle-bright); }

.notebook__ronde-title { margin: 0; font-family: var(--font-title); font-size: 1.05rem; color: var(--ink); }
.notebook__ronde-heading { margin: 6px 0 0; font-family: var(--font-title); font-size: 0.85rem; font-weight: 400; color: var(--pencil-lead); }
.notebook__chain,
.notebook__memory {
  position: relative;
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.3rem;
  line-height: 1.12;
  color: var(--ink);
}
.notebook__chain::before,
.notebook__memory::before { content: "–"; position: absolute; left: -16px; color: var(--cherry); }
.notebook__arrow { color: var(--cherry); }

.notebook__alphabet,
.notebook__pencil { display: grid; gap: 8px; }
.notebook__alphabet h3,
.notebook__pencil h3 { margin: 0; font-family: var(--font-title); font-size: 1.05rem; color: var(--ink); letter-spacing: 0; }
.notebook__pencil p { margin: 0; }
.book--notebook .alphabet { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.book--notebook .alphabet__pair {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 4px 2px 2px;
  border: 1px solid rgba(96, 128, 180, 0.45);
  border-radius: 4px;
  background: #fffdf6;
}
.book--notebook .alphabet__pair.is-new { background: var(--candle-bright); box-shadow: 0 0 0 2px var(--candle); }
.book--notebook .alphabet__rune { font-family: var(--font-runes); font-size: 1.35rem; line-height: 1.1; color: var(--ink); }
.book--notebook .alphabet__letter { font-family: var(--font-hand); font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--pencil-lead); }
.book--notebook .pencil { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; margin: 0; }
.book--notebook .pencil__pair { border: 1px dashed rgba(96, 128, 180, 0.55); background: #fffdf6; }
.book--notebook .pencil__rune { font-size: 1.35rem; color: var(--ink); }
.book--notebook .pencil input { width: 2.2em; font-size: 1.45rem; color: var(--pencil-lead); background: transparent; border: none; border-bottom: 2px solid rgba(61, 70, 96, 0.5); border-radius: 0; }

@media (max-width: 520px) {
  .book--notebook .book__cover { padding: 9px 34px 14px 10px; }
  .book--notebook .book__page { padding-left: 42px; }
  .book__elastic { right: 10px; width: 9px; }
  .book__pencil { right: 5px; bottom: -40px; width: 18px; }
  .notebook .book__cover { --book-height: calc(100dvh - 150px); }
}