@font-face {
  font-family:"Fren Hand";
  src:url("assets/notebook/caveat.ttf") format("truetype");
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
}

/* Painted books: x=45, y=163, w=31, h=14 in the original 640×240 room. */
.books-hotspot {
  left:7.03125%; top:67.916667%; width:4.84375%; height:5.833333%;
  --art-size:2064.516129% 1714.285714%;
  --art-position:7.389163% 72.123894%;
}
.books-hotspot::before { clip-path:polygon(16.129% 0,96.774% 0,96.774% 57.143%,100% 57.143%,100% 100%,0 100%,0 28.571%,16.129% 28.571%); }
/* Invisible touch padding; the highlight still follows only the painted books. */
.books-hotspot::after { content:""; position:absolute; inset:-12px; }
body.notebook-open { overflow:hidden; }

.notebook-dialog {
  --paper:#f0e7d2;
  --pen:#30352f;
  color-scheme:light;
  width:min(1100px,calc(100vw - 48px));
  height:min(800px,calc(100dvh - 40px));
  max-width:none; max-height:none; margin:auto; padding:0; border:0;
  overflow:visible; background:transparent; color:var(--pen);
  font-family:"Fren Hand","Segoe Print",cursive;
}
.notebook-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr); gap:12px; animation:notebook-arrive .23s ease-out; }
.notebook-dialog::backdrop { background:#070e15bb; backdrop-filter:blur(6px); }
.notebook-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 5px; color:#f0e7d2; font-size:23px; }
.notebook-toolbar > span { transform:rotate(-2deg); }
.notebook-close { display:flex; align-items:center; gap:12px; min-height:44px; padding:2px 9px; border:0; background:transparent; cursor:pointer; font-size:25px; }
.notebook-close span { font-family:ui-sans-serif,system-ui,sans-serif; font-size:27px; font-weight:300; }
.notebook-close:hover { color:#fff; }
.notebook-close:focus-visible { outline:2px solid #f0e7d2; outline-offset:1px; }
.notebook-cover {
  min-height:0; padding:6px 7px 9px; border:1px solid #484c3c; border-radius:4px 6px 7px 4px;
  background:#434b3e; box-shadow:0 24px 70px #0009,0 2px 2px #0008;
  transform:rotate(-.5deg);
}
.notebook-spread { position:relative; display:grid; grid-template-columns:1fr 1fr; height:100%; min-height:0; border-radius:2px; background:var(--paper); box-shadow:0 2px #c5b79a,0 4px #e7dbc0,0 5px #b8a987; }
.notebook-spread::after { content:""; position:absolute; z-index:1; pointer-events:none; top:0; bottom:0; left:calc(50% - 18px); width:36px; background:linear-gradient(90deg,transparent,#8b79672b 40%,#74644d40 49%,#faf3e766 54%,transparent); }
.notebook-page {
  position:relative; display:flex; flex-direction:column; min-width:0; min-height:0;
  padding:clamp(24px,3.5vw,46px) clamp(24px,4vw,54px) 18px;
  overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#9e967f transparent;
  background-image:radial-gradient(ellipse at 15% 24%,#fff7e757,transparent 75%),repeating-linear-gradient(0deg,#866e4d04 0 1px,transparent 1px 4px);
}
.notebook-page:focus-visible { outline:2px dashed #80795e; outline-offset:-7px; }
.notebook-notes { background-color:#eee4cd; border-radius:2px 0 0 2px; }
.notebook-concept { background-color:#f5ecd9; border-radius:0 3px 3px 0; }
.notebook-kicker { margin:0 0 12px; color:#767761; font-size:21px; line-height:1.1; }
.notebook-dialog h2 { margin:0 0 24px; font:600 clamp(38px,4.7vw,60px)/.98 "Fren Hand","Segoe Print",cursive; letter-spacing:-.015em; }
.notebook-notes h2 { transform:rotate(-1deg); }
.notebook-copy { font-size:clamp(23px,2.45vw,29px); line-height:1.22; }
.notebook-copy p { margin:0 0 .8em; }
.notebook-underline { text-decoration:underline; text-decoration-color:#787b58; text-decoration-thickness:1.5px; text-underline-offset:6px; }
.notebook-postscript { margin:18px 0 26px; color:#73735e; font-size:23px; transform:rotate(-2deg); }
.notebook-page-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; margin:auto 0 0; padding:12px 0 0; border-top:1px solid #827c5b33; font:400 19px/1.15 "Fren Hand","Segoe Print",cursive; color:#77765f; }
.notebook-page-footer span:last-child { color:#45483c; }
.notebook-concept .notebook-kicker { text-align:center; }
.notebook-concept h2 { text-align:center; margin-bottom:6px; transform:rotate(1deg); }
.notebook-drawing { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:220px; margin:0 -20px 16px; }
.notebook-drawing img { display:block; width:100%; max-width:460px; min-height:0; flex:1; object-fit:contain; mix-blend-mode:multiply; }
.notebook-drawing figcaption { flex:none; font-size:24px; color:#626651; transform:rotate(-2deg); }
.notebook-page-switch { display:none; }
@keyframes notebook-arrive { from { opacity:0; translate:0 10px; } to { opacity:1; translate:0 0; } }

@media (min-width:701px) and (max-height:760px) {
  .notebook-page { padding-top:22px; padding-bottom:14px; }
  .notebook-dialog h2 { font-size:44px; margin-bottom:16px; }
  .notebook-copy { font-size:24px; }
  .notebook-copy p { margin-bottom:.65em; }
  .notebook-postscript { margin:8px 0 18px; font-size:21px; }
  .notebook-drawing { min-height:160px; }
}
@media (max-width:700px) {
  .notebook-dialog { width:calc(100vw - 28px); height:min(880px,calc(100dvh - 20px)); }
  .notebook-dialog[open] { grid-template-rows:auto minmax(0,1fr) auto; gap:7px; }
  .notebook-cover { transform:none; }
  .notebook-toolbar { font-size:21px; }
  .notebook-spread { grid-template-columns:1fr; }
  .notebook-spread::after { left:0; width:15px; background:linear-gradient(90deg,#85725333,transparent); }
  .notebook-page { padding:26px clamp(22px,6vw,42px) 17px; }
  .notebook-dialog[data-page="notes"] .notebook-concept,
  .notebook-dialog[data-page="concept"] .notebook-notes { display:none; }
  .notebook-dialog h2 { font-size:48px; margin-bottom:20px; }
  .notebook-copy { font-size:26px; }
  .notebook-desktop-break { display:none; }
  .notebook-postscript { font-size:22px; margin:12px 0 24px; }
  .notebook-page-switch { display:flex; justify-content:center; gap:8px; }
  .notebook-page-switch button { min-height:44px; min-width:120px; padding:5px 16px; border:1px solid #ddd0ae66; border-radius:2px; background:#15211da8; color:#eee4cd; font-size:23px; cursor:pointer; }
  .notebook-page-switch button[aria-pressed="true"] { background:#eee4cd; color:#30352f; }
  .notebook-page-switch button:focus-visible { outline:2px solid #eee4cd; outline-offset:2px; }
}
@media (prefers-reduced-motion:reduce) {
  .notebook-dialog[open] { animation:none; }
}