/* ============================================================
   HOW IT WORKS — the 学生 notebook (Night Owl and Night Shift).

   A hardbound notebook. With room beside the page it lies open flat:
   the inside cover on the left, the first page on the right, and every
   leaf turns over on the spine so both sides are read. With less room it
   shows one page at a time; with none (phones) it sits under the page,
   open flat. Closed, it is the front cover, the same size as the pages.
   Built by notebook.js; sizes come in as --f (one page's width) and --h.
   ============================================================ */

.nb2 { --f: 230px; --h: 326px; position: relative; width: calc(var(--f) * 2 + 16px); font-family: 'Outfit', sans-serif; color: #2b2320; z-index: 40; }
.nb2.is-single { width: calc(var(--f) + 16px); }
.nb2.is-docked { position: absolute; }
.nb2.is-inline { margin: 2.4rem auto 0.5rem; }
/* its own layer, so the ribbon can tuck in behind the covers */
.nb2-book { position: relative; z-index: 0; padding: 8px; transition: transform 0.8s cubic-bezier(0.45, 0.05, 0.25, 1); }
.nb2.is-closed:not(.is-single) .nb2-book { transform: translateX(calc(var(--f) / -2)); }

/* the back cover under the right-hand pages */
.nb2-board { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; border-radius: 0 7px 7px 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 4px), linear-gradient(160deg, #2e3552, #1b1f31);
  box-shadow: 0 16px 26px rgba(0,0,0,0.5); }
.nb2.is-single .nb2-board { width: 100%; border-radius: 3px 7px 7px 3px; }
.nb2-spread { position: relative; width: calc(var(--f) * 2); height: var(--h); perspective: 1800px; }
.nb2.is-single .nb2-spread { width: var(--f); perspective-origin: 0 50%; }
/* paper edges peeking out on the right, under the unread pages */
.nb2-spread::before { content: ""; position: absolute; left: 50%; right: -5px; top: 2px; bottom: -4px; border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(90deg, #efe7d6 0 1px, #d2c7b0 1px 2px); z-index: 0; }
.nb2.is-single .nb2-spread::before { left: 0; }

/* a leaf: a front (read on the right) and a back (read on the left once turned) */
.nb2-leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.45, 0.05, 0.25, 1); }
.nb2.is-single .nb2-leaf { left: 0; width: 100%; }
.nb2-leaf.is-over { transform: rotateY(-180deg); }
.nb2-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  background: repeating-linear-gradient(180deg, transparent 0 21px, #e3dac8 21px 22px) 0 34px / 100% 100% no-repeat, #faf6ec;
  padding: 12px 14px 26px 20px; }
.nb2-face.is-front { border-radius: 0 3px 3px 0; }
.nb2-face.is-back { transform: rotateY(180deg); border-radius: 3px 0 0 3px; padding: 12px 20px 26px 14px; }
.nb2.is-single .nb2-face.is-back { display: none; }
/* the fold at the spine */
.nb2-face.is-front::after, .nb2-face.is-back::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22px; pointer-events: none; }
.nb2-face.is-front::after { left: 0; background: linear-gradient(90deg, rgba(40,28,20,0.28), rgba(40,28,20,0)); }
.nb2-face.is-back::after { right: 0; background: linear-gradient(270deg, rgba(40,28,20,0.28), rgba(40,28,20,0)); }

/* the front cover: cloth outside, endpaper inside */
.nb2-leaf.is-cover .nb2-face { margin: -8px -8px -8px 0; padding: 0; }
.nb2-leaf.is-cover .is-front { border-radius: 0 7px 7px 0; cursor: pointer;
  background:
    linear-gradient(90deg, transparent calc(100% - 24px), #11131d calc(100% - 24px) calc(100% - 18px), transparent calc(100% - 18px)),
    linear-gradient(90deg, rgba(0,0,0,0.45), rgba(0,0,0,0) 12px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 4px),
    linear-gradient(160deg, #2e3552, #1b1f31);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 0 28px 0 12px; }
.nb2.is-single .nb2-leaf.is-cover .is-front { margin-left: -8px; border-radius: 3px 7px 7px 3px; }
.nb2-leaf.is-cover .is-front::after { display: none; }
.nb2-leaf.is-cover .is-back { margin: -8px 0 -8px -8px; border-radius: 7px 0 0 7px; background: linear-gradient(160deg, #2e3552, #1b1f31); }
.nb2-endpaper { position: absolute; inset: 8px 0 8px 8px; border-radius: 3px 0 0 3px;
  background: radial-gradient(circle at 50% 50%, rgba(46,53,82,0.16) 0 1.4px, transparent 1.8px) 0 0 / 12px 12px, #f3ecdc;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
.nb2-endpaper::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 22px; background: linear-gradient(270deg, rgba(40,28,20,0.28), rgba(40,28,20,0)); pointer-events: none; }
/* one page at a time: the endpaper is page 0, on the right like the rest */
.nb2-face.is-front > .nb2-endpaper { inset: 0; border-radius: 0 3px 3px 0; }
.nb2-face.is-front > .nb2-endpaper::after { right: auto; left: 0; background: linear-gradient(90deg, rgba(40,28,20,0.28), rgba(40,28,20,0)); }

.nb2-label { background: #faf6ec; border: 1px solid #d8ceb8; border-radius: 3px; padding: 10px 14px; text-align: center; box-shadow: 2px 2px 0 #c8392b; max-width: 100%; }
.nb2-label .jp { display: block; font-family: 'Noto Serif JP', serif; font-weight: 700; color: #c8392b; font-size: 1.3rem; line-height: 1.2; }
.nb2-label b { display: block; font-size: 1rem; }
.nb2-label small { font-size: 0.6rem; color: #8b8273; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.nb2-open { font-size: 0.72rem; color: #e9dfc9; font-weight: 600; }

/* the owner's name, written on the inside cover */
.nb2-owner { font-size: 0.72rem; color: #6d6456; width: 82%; display: block; cursor: text; }
.nb2-name-line { position: relative; display: flex; align-items: center; margin-top: 4px; border-bottom: 1px solid #b9ae98; }
.nb2-name { flex: 1; min-width: 0; border: 0; background: transparent; padding: 2px 22px 3px 4px; outline: none; border-radius: 3px 3px 0 0;
  font-family: 'Klee One', 'Noto Serif JP', cursive; font-weight: 600; font-size: 1.15rem; color: #26306a; }   /* blue ink */
.nb2-name::placeholder { color: #b3a993; font-style: italic; font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 0.78rem; }
.nb2-name:focus { background: rgba(38,48,106,0.05); }
.nb2-name-line:focus-within { border-bottom-color: #26306a; }
.nb2-pen { position: absolute; right: 3px; font-style: normal; color: #b3a993; font-size: 0.85rem; pointer-events: none; transition: opacity 0.2s; }
.nb2.has-name .nb2-pen { opacity: 0; }
.nb2.has-name .nb2-owner:hover .nb2-pen, .nb2-name:focus + .nb2-pen { opacity: 1; }
.nb2-tip { font-size: 0.7rem; color: #8b8273; text-align: center; line-height: 1.4; }

/* page text */
.nb2-eyebrow { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: #c8392b; font-weight: 800; height: 22px; white-space: nowrap; overflow: hidden; }
.nb2-eyebrow .jp { font-family: 'Noto Serif JP', serif; letter-spacing: 0.05em; color: #8b8273; font-weight: 700; }
.nb2-text { font-size: 0.78rem; line-height: 22px; }
.nb2-text + .nb2-text { margin-top: 22px; }
.nb2-text b { font-weight: 700; }
.nb2-num { font-family: 'Noto Serif JP', serif; font-weight: 700; font-size: 1.05rem; color: #c8392b; margin-right: 4px; }
.nb2-text.is-first { background: rgba(200,57,43,0.07); border-radius: 6px; box-shadow: 0 0 0 4px rgba(200,57,43,0.07); }
.nb2-folio { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 600 0.62rem 'Noto Serif JP', serif; color: #a0967f; }
.nb2-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 20px; }
.nb2-end .jp { font-family: 'Noto Serif JP', serif; font-weight: 700; color: #c8392b; font-size: 1.4rem; }
.nb2-end small { font-size: 0.72rem; color: #8b8273; }
.nb2-hint { position: absolute; right: 12px; bottom: 5px; font-size: 0.62rem; color: #a0967f; font-style: italic; display: flex; align-items: center; gap: 4px; }
.nb2-wheel { width: 8px; height: 12px; border: 1.4px solid #a0967f; border-radius: 4px; position: relative; }
.nb2-wheel::after { content: ""; position: absolute; left: 2px; top: 2px; width: 1.4px; height: 3px; background: #a0967f; animation: nb2-roll 1.6s ease-in-out infinite; }
@keyframes nb2-roll { 0%,20% { transform: translateY(0); opacity: 1 } 70% { transform: translateY(4px); opacity: 0 } 100% { opacity: 0 } }

/* the ribbon bookmark hangs out from behind the notebook */
.nb2-ribbon { position: absolute; z-index: -1; left: calc(50% + 34px); bottom: -20px; width: 10px; height: 40px;
  background: linear-gradient(90deg, #7e2118, #b83629, #7e2118);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); pointer-events: none; }
.nb2.is-single .nb2-ribbon { left: 34px; }

.nb2-foot { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 24px 2px 4px; color: #e9dfc9; transition: opacity 0.3s; }
.nb2.is-closed .nb2-foot { opacity: 0; pointer-events: none; }
.nb2-arrow { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(233,223,201,0.35); background: none; color: inherit;
  font: 700 0.9rem/1 'Outfit', sans-serif; cursor: pointer; display: grid; place-items: center; padding: 0; }
.nb2-arrow:hover:not(:disabled) { border-color: #e9dfc9; background: rgba(255,255,255,0.08); }
.nb2-arrow:disabled { opacity: 0.3; cursor: default; }
.nb2-dots { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.nb2-dots button { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; background: rgba(233,223,201,0.3); cursor: pointer; }
.nb2-dots button.on { background: #f3c86b; box-shadow: 0 0 6px rgba(243,200,107,0.7); }
.nb2-close { display: block; margin: 4px auto 0; background: none; border: 0; color: #9aa0b8; font: 600 0.68rem 'Outfit', sans-serif; cursor: pointer; transition: opacity 0.3s; }
.nb2-close:hover { color: #e9dfc9; }
.nb2.is-closed .nb2-close { opacity: 0; pointer-events: none; }
.nb2 button:focus-visible { outline: 2px solid #f3c86b; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .nb2-leaf, .nb2-book { transition: none; } .nb2-wheel::after { animation: none; } }
/* a narrow cover keeps "How it works · 使い方" on one line */
.nb2.is-single .nb2-label small { letter-spacing: 0.06em; white-space: nowrap; }
.nb2.is-single .nb2-label { padding: 10px 10px; }