/* ============================================================================
   notebook.css — CINDY'S NOTEBOOK.
   Styles the flipbook engine (flipbook.js), the desk it sits on, the paper
   stocks, the two handwriting faces, and every page element type. Links
   theme.css read-only for palette + grain; adds only --nb-* tokens of its own.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. HANDWRITING FACES (self-hosted; no runtime CDN)
   Patrick Hand = the neat count hand.  Caveat (variable) = the pressed / after
   hand (weight carries "pressing harder" vs "gone quiet").
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Patrick Hand";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/patrick-hand-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/caveat-var-latin.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
   2. NOTEBOOK TOKENS  (all prefixed --nb-*, never redefining theme tokens)
   --------------------------------------------------------------------------- */
:root {
  --nb-paper:        #efe7d2;   /* warm page stock */
  --nb-paper-hi:     #f6f0df;   /* lit lift near the outer edge */
  --nb-paper-edge:   #ddd0b2;   /* gutter / worn edge */
  --nb-paper-cover:  #222c34;   /* dark composition-book board */
  --nb-grid:         rgba(52, 78, 120, 0.11);
  --nb-grid-strong:  rgba(52, 78, 120, 0.16);
  --nb-rule:         rgba(46, 82, 120, 0.20);
  --nb-margin:       rgba(150, 58, 52, 0.34);

  --nb-ink-blueblack:#1b294a;
  --nb-ink-graphite: #3e3d3a;
  --nb-ink-red:      #9d2f28;
  --nb-ink-green:    #57691f;
  --nb-ink-cover:    #ece3cc;

  --nb-hand-neat:    "Patrick Hand", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
  --nb-hand-cursive: "Caveat", "Segoe Print", "Bradley Hand", "Snell Roundhand", cursive;

  --nb-tape:         rgba(226, 214, 178, 0.52);
}

/* ---------------------------------------------------------------------------
   3. THE DESK  (the lit surface the book rests on)
   --------------------------------------------------------------------------- */
.nb-desk {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  /* warm pooled light on a dark wood grain */
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(226, 178, 108, 0.12), transparent 60%),
    repeating-linear-gradient(92deg, #241a12 0 3px, #21170f 3px 6px, #281d13 6px 11px),
    linear-gradient(180deg, #1c140d, #120c08 75%, #0c0806);
  overflow: hidden;
}
/* the vignette that keeps the room dark and the book the only lit thing */
.nb-desk::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(78% 66% at 50% 46%, transparent 42%, rgba(4, 6, 10, 0.72) 100%);
}

/* ---------------------------------------------------------------------------
   4. THE FLIPBOOK STAGE + BOOK
   --------------------------------------------------------------------------- */
.nb-stage {
  position: relative;
  width: min(1100px, 94vw);
  height: 100%;
  container-type: size;      /* book sizes off this box via cqw / cqh */
  z-index: 41;               /* the lit book sits above the shared snow (z 40) */
}
.fb {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  perspective: 2400px;
  perspective-origin: 50% 44%;
}
.fb__book {
  position: relative;
  transform-style: preserve-3d;
}
/* spread: 2 pages wide (3:2). single: 1 page (3:4). Fit width AND height. */
.fb[data-mode="spread"] .fb__book {
  aspect-ratio: 3 / 2;
  width: min(96cqw, calc(84cqh * 1.5));
}
.fb[data-mode="single"] .fb__book {
  aspect-ratio: 3 / 4;
  width: min(78cqw, calc(88cqh * 0.75));
}
/* the closed-book page-stack thickness (a faint edge on each side) */
.fb__book::before {
  content: ""; position: absolute; top: 2%; bottom: 2%; left: 0; right: 0;
  z-index: 0; pointer-events: none; border-radius: 4px;
  box-shadow:
    -5px 0 0 -1px #b3a480, -9px 0 0 -2px #9a8b68,
     5px 0 0 -1px #b3a480,  9px 0 0 -2px #9a8b68;
}
/* the spine gutter shadow (spread only) */
.fb[data-mode="spread"] .fb__book::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 8%;
  transform: translateX(-50%); z-index: 300; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(30, 20, 10, 0.20) 46%,
              rgba(30, 20, 10, 0.26) 50%, rgba(30, 20, 10, 0.20) 54%, transparent);
}

/* the cast shadow under the book; grows a touch as a page lifts (--lift) */
.fb__shadow {
  position: absolute; left: 5%; right: 5%; bottom: -5%; height: 10%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.62), transparent 72%);
  filter: blur(14px);
  transform: scaleX(calc(1 + var(--lift, 0) * 0.05)) scaleY(calc(1 + var(--lift, 0) * 0.22));
  opacity: calc(0.72 + var(--lift, 0) * 0.14);
}

/* ---------------------------------------------------------------------------
   5. LEAVES + FACES (the 3D turn)
   --------------------------------------------------------------------------- */
.fb__leaf {
  position: absolute; top: 0; height: 100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateY(calc(var(--p, 0) * -180deg));
  will-change: transform;
}
.fb[data-mode="spread"] .fb__leaf { left: 50%; width: 50%; }
.fb[data-mode="single"] .fb__leaf { left: 0;   width: 100%; }

.fb__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border-radius: 2px 5px 5px 2px;
}
.fb__face--back { transform: rotateY(180deg); border-radius: 5px 2px 2px 5px; }
.fb__face > .page { width: 100%; height: 100%; }

/* the fold shading: darkens toward the spine as the leaf turns (peaks mid-turn) */
.fb__shade { position: absolute; inset: 0; pointer-events: none; }
.fb__face--front .fb__shade {
  background: linear-gradient(to left, rgba(6, 8, 12, 0.5), rgba(6, 8, 12, 0) 58%);
  opacity: calc(var(--p, 0) * 1.05);
}
.fb__face--back .fb__shade {
  background: linear-gradient(to right, rgba(6, 8, 12, 0.5), rgba(6, 8, 12, 0) 58%);
  opacity: calc((1 - var(--p, 0)) * 1.05);
}

/* ---------------------------------------------------------------------------
   6. PAPER STOCKS
   --------------------------------------------------------------------------- */
.page {
  position: relative;
  container-type: inline-size;   /* element cqw units scale with the page */
  font-size: 4.6cqw;
  color: var(--nb-ink-blueblack);
  background-color: var(--nb-paper);
  overflow: hidden;
  box-shadow: inset 0 0 34px rgba(120, 96, 54, 0.10);
  isolation: isolate;
}
/* paper grain (borrows the theme's fractal-noise data URI) */
.page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background-image: var(--grain); background-size: 150px 150px;
  opacity: 0.05; mix-blend-mode: multiply;
}
/* subtle lit lift toward the outer edge of each side */
.page--front { background-image: linear-gradient(90deg, rgba(120,96,54,0.06), transparent 22%); }
.page--back  { background-image: linear-gradient(270deg, rgba(120,96,54,0.06), transparent 22%); }

/* GRAPH */
.page--graph {
  background-image:
    linear-gradient(90deg, transparent, rgba(120,96,54,0.05) 22%, transparent 22%),
    repeating-linear-gradient(0deg, transparent 0 calc(5cqw - 1px), var(--nb-grid) calc(5cqw - 1px) 5cqw),
    repeating-linear-gradient(90deg, transparent 0 calc(5cqw - 1px), var(--nb-grid) calc(5cqw - 1px) 5cqw);
}
/* LINED */
.page--lined {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 calc(7cqw - 1px), var(--nb-rule) calc(7cqw - 1px) 7cqw);
}
.page--lined::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 11%; width: 2px;
  background: var(--nb-margin); z-index: 1;
}
/* BLANK */
.page--blank { background-image: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 30%); }

/* COVER (dark composition board; cream ink) */
.page--cover {
  color: var(--nb-ink-cover);
  background-color: var(--nb-paper-cover);
  background-image:
    radial-gradient(60% 40% at 30% 20%, rgba(120,140,160,0.10), transparent 60%),
    repeating-conic-gradient(from 0deg at 40% 60%, rgba(255,255,255,0.015) 0deg 6deg, transparent 6deg 12deg),
    linear-gradient(150deg, #26313a, #1b242c);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
}
.page--cover::after { mix-blend-mode: overlay; opacity: 0.12; }

/* TORN (the fire page / the gap) — opaque, with a rising scorch and a single
   ragged bottom edge (kept opaque so the page beneath never bleeds through). */
.page--torn {
  background-image:
    linear-gradient(0deg, rgba(20,16,12,0.55), rgba(20,16,12,0.12) 22%, transparent 44%);
  --torn-cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0 H200 V224 L190 243 L182 233 L171 250 L164 240 L153 246 L145 231 L134 251 L126 238 L114 234 L103 252 L94 236 L84 247 L72 230 L61 253 L53 241 L42 245 L31 232 L21 250 L12 238 L0 245 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--torn-cut);
  -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: top;
  mask-image: var(--torn-cut);
  mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: top;
}

/* the empty back of a page in single mode */
.page.is-blank::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(120,96,54,0.05), transparent);
}

/* ---------------------------------------------------------------------------
   7. ELEMENTS  (positioned in page-percentage space)
   --------------------------------------------------------------------------- */
.nb-el {
  position: absolute;
  z-index: 5;
  /* a page-relative base size: cqw here resolves against .page (this element's
     nearest container ancestor), unlike .page's OWN font-size which would
     resolve against the stage. Elements that set their own size override it;
     em-based components (ephemera) inherit it and scale with the page. */
  font-size: 4.6cqw;
  transform-origin: top left;
  transform: rotate(var(--rot, 0deg));
}

/* -- text -- */
.nb-text {
  font-family: var(--nb-hand-neat);
  line-height: 1.12;
  white-space: pre-wrap;
  text-wrap: balance;
}
/* page-default hand (when an element doesn't override) */
.page[data-hand="neat"]    .nb-text { font-family: var(--nb-hand-neat); }
.page[data-hand="pressed"] .nb-text { font-family: var(--nb-hand-cursive); font-weight: 700; letter-spacing: -0.2px; }
.page[data-hand="after"]   .nb-text { font-family: var(--nb-hand-cursive); font-weight: 500; }
/* element-level overrides win */
.nb-text.hand-neat    { font-family: var(--nb-hand-neat); font-weight: 400; letter-spacing: 0; }
.nb-text.hand-pressed { font-family: var(--nb-hand-cursive); font-weight: 700; letter-spacing: -0.2px; text-shadow: 0 0 0.4px currentColor; }
.nb-text.hand-after   { font-family: var(--nb-hand-cursive); font-weight: 500; opacity: 0.92; }

.nb-boxed {
  display: inline-block;
  padding: 0.06em 0.34em 0.12em;
  border: 2px solid currentColor;
  border-radius: 42% 58% 55% 45% / 58% 46% 60% 42%;
}
.nb-blackout {
  background: #14161c;
  color: transparent !important;
  border-radius: 2px;
  height: 1.15em;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}

/* -- tally -- */
.nb-tally { display: flex; flex-direction: column; align-items: flex-start; }
.nb-tally__marks { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.25em 0.5em; }
.nb-gate { height: 1.55em; width: 1.85em; overflow: visible; }
.nb-tally__num { font-family: var(--nb-hand-cursive); font-weight: 700; font-size: 1.9em; line-height: 0.9; }
.nb-tally__label { font-family: var(--nb-hand-neat); font-size: 0.6em; margin-top: 0.35em; max-width: 15em; opacity: 0.9; }
.nb-tally__note  { font-family: var(--nb-hand-cursive); font-weight: 600; font-size: 0.56em; opacity: 0.72; margin-top: 0.08em; }

/* -- doodle -- */
.nb-doodle { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
.nb-doodle__svg { width: 100%; height: auto; overflow: visible; filter: url(#nbPenJitter); }

/* -- ephemera (taped-in props; real scans drop into the img slot) -- */
.nb-ephemera {
  z-index: 7;
  padding: 0.7em 0.7em 0.9em;
  transform: rotate(var(--rot, 0deg));
  background: #f4efe4;
  color: #2a2622;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.4) inset;
}
.nb-ephemera--receipt { background: #f5f1e7; font-family: var(--font-mono); }
.nb-ephemera--flyer   { background: #efe7d1; }
.nb-ephemera__title { font-weight: 700; font-size: 0.66em; letter-spacing: 0.02em; margin-bottom: 0.35em; }
.nb-ephemera--flyer .nb-ephemera__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; }
.nb-ephemera__line { font-size: 0.56em; line-height: 1.5; opacity: 0.86; }
.nb-ephemera__img { width: 100%; height: auto; display: block; }
/* mark an unfilled scan slot (a quiet hint for the content pass) */
.nb-ephemera[data-img-slot]::after {
  content: "scan"; position: absolute; right: 0.4em; bottom: 0.2em;
  font-family: var(--font-mono); font-size: 0.42em; letter-spacing: 0.08em;
  color: rgba(40,30,20,0.28); text-transform: uppercase;
}
/* tape */
.nb-tape { position: absolute; width: 22%; height: 16%;
  background: var(--nb-tape); box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  backdrop-filter: blur(0.5px); }
.nb-tape--tl { top: -6%; left: -5%; transform: rotate(-42deg); }
.nb-tape--tr { top: -6%; right: -5%; transform: rotate(42deg); }
.nb-tape--bl { bottom: -6%; left: -5%; transform: rotate(40deg); }
.nb-tape--br { bottom: -6%; right: -5%; transform: rotate(-40deg); }
.nb-tape--top { top: -7%; left: 50%; width: 30%; transform: translateX(-50%) rotate(-2deg); }

/* -- smudges -- */
.nb-smudge { z-index: 2; }
.nb-smudge--coffee {
  border-radius: 50%; transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  background: radial-gradient(closest-side, transparent 56%, rgba(96,58,26,0.30) 60%,
             rgba(96,58,26,0.16) 74%, transparent 82%);
}
.nb-smudge--ink {
  border-radius: 48% 52% 55% 45% / 50% 45% 55% 50%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  background: radial-gradient(closest-side, rgba(27,41,74,0.5), rgba(27,41,74,0.12) 70%, transparent);
}
.nb-smudge--graphite {
  border-radius: 50%; transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  background: radial-gradient(closest-side, rgba(60,60,58,0.28), transparent 72%);
  filter: blur(1.4px);
}
.nb-smudge--blackout {
  background: #14161c; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
  transform-origin: center; transform: rotate(var(--rot, 0deg));
}

/* -- ghost (pressed-through, mirrored, faint) -- */
.nb-ghost {
  z-index: 1;
  font-family: var(--nb-hand-cursive);
  font-weight: 700;
  color: rgba(40, 52, 84, 0.11);
  transform: scaleX(-1) rotate(var(--rot, 0deg));
  filter: blur(0.35px);
  line-height: 1.1;
  white-space: pre-wrap;
}

/* ---------------------------------------------------------------------------
   8. DRAG STATE + REDUCED MOTION
   --------------------------------------------------------------------------- */
.fb__book { touch-action: none; }         /* the book captures horizontal drags */
.is-dragging .fb__leaf { cursor: grabbing; }
.fb__book:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .fb__leaf { will-change: auto; transition: none; }
  .fb__shadow { transform: none; }
}