/* Caveat, SIL Open Font License 1.1 (assets/fonts/OFL.txt): the handwriting on the notebook pages. Latin subset, variable weight, from Google Fonts. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/caveat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.desk-notebook {
  --notebook-green: #244d38;
  --notebook-green-deep: #183927;
  --notebook-paper: #f6f0e1;
  --notebook-ink: #393c2e;
  --notebook-pen: #2f3a55;
  --notebook-rule: #93a8bf4d;
  /* Page inset from the case edge. notebook.js reads it to size and place the turning sheets. */
  --notebook-inset: 14px;
  /* Ruling pitch, also the line height of the handwriting and the body text. */
  --notebook-line: 26px;
  --notebook-top: 30px;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", var(--serif);
  color-scheme: light;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  color: var(--notebook-ink);
  font: 1rem/1.6 var(--serif);
  text-align: left;
}
.desk-notebook[open] { display: block; }
.desk-notebook::backdrop { background: transparent; }
.desk-notebook *, .desk-notebook *::before, .desk-notebook *::after { box-sizing: border-box; }
.desk-notebook [hidden] { display: none !important; }
.desk-notebook .notebook-accessible-title { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The room stays the subject: a light shade, and the book opens near its place on the desk rather than in the middle of the window. */
.desk-notebook .notebook-shade { position: absolute; inset: 0; background: oklch(12% .023 151 / .36); pointer-events: none; }
.desk-notebook .notebook-stage { position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 16px; width: 100%; height: 100%; padding: 6vh max(24px, 7vw) 20px 24px; }
.desk-notebook .notebook-position { position: relative; flex: none; width: min(680px, calc(100vw - 24px - max(24px, 7vw)), calc((100dvh - 150px) * 1.44)); aspect-ratio: 1.44; }
.desk-notebook .notebook-flight { width: 100%; height: 100%; transform-origin: 75% 50%; perspective: 1600px; perspective-origin: 75% 50%; }
.desk-notebook .notebook-book { position: relative; width: 100%; height: 100%; transform-origin: 75% 50%; transform-style: preserve-3d; }
/* One case and page block; the paper leaves do not carry separate panel shadows. The closed case is exactly the right half of the box: sourceFlight() relies on that to match the painted notebook. */
.desk-notebook .notebook-book::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; right: 0; border-radius: 4px 8px 8px 4px; background: var(--notebook-green); box-shadow: 0 2px 0 #b6ad91, 0 4px 0 #e0d6bc, 0 6px 0 #b6ad91, 0 9px 0 #183927, 0 20px 24px -12px #0008, 0 34px 70px -18px #0008; }
.desk-notebook .notebook-book.is-open::before { left: 0; border-radius: 8px; background: linear-gradient(90deg, var(--notebook-green) 0 47%, var(--notebook-green-deep) 50%, var(--notebook-green) 53%); box-shadow: inset 0 0 0 1px #3d6a4d80, 0 2px 0 #b6ad91, 0 4px 0 #e0d6bc, 0 6px 0 #b6ad91, 0 9px 0 #183927, 0 26px 36px -16px #000b, 0 50px 90px -30px #0009; }
/* Ribbon bookmark, only once the book lies open. */
.desk-notebook .notebook-book.is-open::after { content: ""; position: absolute; z-index: 0; left: calc(50% - 6px); bottom: -44px; width: 13px; height: 76px; background: linear-gradient(90deg, #8a2d2d, #b83d3d 45%, #8a2d2d); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); box-shadow: 0 6px 8px #0005; }
.desk-notebook .notebook-leaf { position: absolute; z-index: 1; top: 0; bottom: 0; width: 50%; padding: var(--notebook-inset) var(--notebook-inset) calc(var(--notebook-inset) + 2px); }
.desk-notebook .notebook-left { left: 0; padding-right: 0; }
.desk-notebook .notebook-right { right: 0; padding-left: 0; }
.desk-notebook .notebook-page { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--notebook-paper); }
/* Ruled paper: one tile per line, so shifting the tile moves every rule together and the first body line sits on a rule. */
.desk-notebook .notebook-page::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent calc(var(--notebook-line) - 1px), var(--notebook-rule) 0) 0 calc(var(--notebook-top) + 21px - var(--notebook-line)) / 100% var(--notebook-line) repeat; pointer-events: none; }
.desk-notebook .notebook-left .notebook-page, .desk-notebook .notebook-paper-left { border-radius: 2px 0 0 3px; background: linear-gradient(90deg, #f7f1e2 72%, #eee6d3 93%, #d5cab2 100%); box-shadow: inset -20px 0 24px -18px #2d221248, -2px 0 0 #e9e0ca, -4px 0 0 #cbbfa4, -6px 0 0 #ece4d0, -8px 0 0 #c9bda2; }
.desk-notebook .notebook-right .notebook-page, .desk-notebook .notebook-paper-right { border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #cdc1a6, #eee6d3 5%, #f7f1e2 18%); box-shadow: inset 20px 0 24px -18px #2d221248, 2px 0 0 #e9e0ca, 4px 0 0 #cbbfa4, 6px 0 0 #ece4d0, 8px 0 0 #c9bda2; }
/* A ring from the mug beside the notebook, on Chetan's page only. */
.desk-notebook .notebook-stained::after { content: ""; position: absolute; z-index: 0; left: -34px; bottom: 30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, transparent 57%, #8a5a2b2b 59%, #8a5a2b17 63%, #8a5a2b36 66%, transparent 68%); transform: rotate(-14deg) scaleX(.95); pointer-events: none; }
.desk-notebook .notebook-reading { position: relative; z-index: 1; min-height: 0; padding: var(--notebook-top) 30px 14px 34px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c4b99f transparent; font: 16px/var(--notebook-line) var(--serif); }
.desk-notebook p { margin: 0 0 var(--notebook-line); }
.desk-notebook .notebook-reading > :last-child { margin-bottom: 0; }
.desk-notebook .notebook-kicker { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 var(--notebook-line); color: #8c8570; font: 11px/var(--notebook-line) var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.desk-notebook .notebook-kicker time { color: #6b7690; font: 16px/var(--notebook-line) var(--hand); letter-spacing: 0; text-transform: none; }
.desk-notebook h2 { margin: 0 0 var(--notebook-line); font: 400 24px/var(--notebook-line) var(--serif); letter-spacing: -.02em; text-wrap: balance; }
/* Chetan's own page is handwritten in ink; guest pages are set in the page serif, signed by hand. */
/* Caveat has a small x-height, so it is set a step larger than a typical serif would be. */
.desk-notebook .notebook-hand { color: var(--notebook-pen); font: 19px/var(--notebook-line) var(--hand); }
.desk-notebook .notebook-hand h2 { color: #1f2b48; font: 400 28px/var(--notebook-line) var(--hand); letter-spacing: 0; }
.desk-notebook .notebook-signature { margin-top: var(--notebook-line); color: var(--notebook-pen); font: 26px/var(--notebook-line) var(--hand); }
.desk-notebook .notebook-folio { display: block; padding: 6px 22px 10px; color: #9a927c; font: 12px/1 var(--serif); }
.desk-notebook .notebook-right .notebook-folio, .desk-notebook .notebook-paper-right .notebook-folio { text-align: right; }
.desk-notebook .notebook-cover { position: absolute; z-index: 5; left: 50%; top: 0; width: 50%; height: 100%; transform: rotateY(0deg); transform-origin: left center; transform-style: preserve-3d; pointer-events: auto; }
.desk-notebook .notebook-cover-front, .desk-notebook .notebook-cover-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 0 8px 8px 0; }
.desk-notebook .notebook-cover-front { background-color: var(--notebook-green); background-image: repeating-linear-gradient(0deg, #ffffff04 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, #00000008 0 1px, transparent 1px 3px); box-shadow: inset 8px 0 8px #102c2580, inset 0 0 0 1px #43684a, inset 0 0 0 4px #244631, 0 4px 8px #0003; }
.desk-notebook .notebook-cover-title { position: absolute; top: 28%; left: 12%; right: 20%; text-align: center; color: #bfb889; font: 17px/1.5 var(--serif); letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 1px 0 #122f23; }
.desk-notebook .notebook-cover-title small { display: block; margin-top: 16px; font: italic 13px/1.5 var(--serif); letter-spacing: .02em; text-transform: none; }
.desk-notebook .notebook-cover-back { transform: rotateY(180deg); background: var(--notebook-green); border-radius: 8px 0 0 8px; }
.desk-notebook .notebook-cover-back > .notebook-page { position: absolute; inset: var(--notebook-inset) 0 calc(var(--notebook-inset) + 2px) var(--notebook-inset); width: auto; height: auto; }
.desk-notebook .notebook-elastic { position: absolute; inset: 0 11% 0 auto; width: 10px; background: #193e30; box-shadow: inset 1px 0 0 #43624b, 1px 0 2px #112c2280; }
.desk-notebook .notebook-cover.is-open { visibility: hidden; pointer-events: none; }
/* Sheets are copies of paper only, with exactly the same dimensions as the live page. */
.desk-notebook .notebook-turn-sheet, .desk-notebook .notebook-turn-hold { position: absolute; z-index: 4; top: var(--notebook-inset); width: calc(50% - var(--notebook-inset)); height: calc(100% - var(--notebook-inset) * 2 - 2px); pointer-events: none; }
.desk-notebook .notebook-turn-sheet { transform-style: preserve-3d; }
.desk-notebook .notebook-sheet-face { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; background: var(--notebook-paper); box-shadow: -6px 0 16px #392f211f; }
.desk-notebook .notebook-sheet-face.back { transform: rotateY(180deg); }
.desk-notebook .notebook-turn-hold { z-index: 3; }
/* Controls are the site's pills, kept under the book's right edge. */
.desk-notebook .notebook-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; flex: none; max-width: 100%; margin: 0; padding: 0; color: var(--text); }
.desk-notebook .notebook-pager { display: inline-flex; align-items: center; padding: 3px 4px; border: 1px solid var(--pill-line); border-radius: 999px; background: var(--pill); backdrop-filter: blur(16px) saturate(1.2); }
.desk-notebook .notebook-controls button { appearance: none; display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; margin: 0; padding: 8px 15px; border: 1px solid var(--pill-line); border-radius: 999px; background: var(--pill); backdrop-filter: blur(16px) saturate(1.2); color: var(--text); font: 15px/1.2 var(--serif); cursor: pointer; }
.desk-notebook .notebook-pager button { min-height: 32px; padding: 5px 11px; border: 0; background: transparent; backdrop-filter: none; }
.desk-notebook .notebook-controls button:hover { background: var(--pill-hover); }
.desk-notebook .notebook-controls button:active:not([aria-disabled="true"]) { transform: translateY(1px); }
.desk-notebook .notebook-controls button[aria-disabled="true"] { background: transparent; opacity: .4; cursor: default; }
.desk-notebook .notebook-counter { min-width: 92px; text-align: center; color: var(--muted); font: 14px/1.2 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.desk-notebook :focus-visible { outline: 2px solid var(--focus, oklch(83% .07 87)); outline-offset: 3px; }
.desk-notebook .notebook-reading:focus-visible { outline-color: oklch(42% .07 156); outline-offset: -6px; }
/* Guest pages and the form live on the paper. */
.desk-notebook .guestbook-note { color: oklch(43% .035 151); font-size: 13px; line-height: 1.5; }
.desk-notebook [data-guestbook-entry] h2, .desk-notebook [data-guestbook-entry] .notebook-signature { overflow-wrap: anywhere; }
.desk-notebook .guestbook-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.desk-notebook .guestbook-form { display: flex; flex-direction: column; gap: 8px; }
.desk-notebook .guestbook-form label { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.desk-notebook .guestbook-form label span { font-weight: 400; }
.desk-notebook input, .desk-notebook textarea { display: block; width: 100%; min-width: 0; margin-top: 2px; padding: 3px 4px; border: 0; border-bottom: 1px solid oklch(64% .036 145); border-radius: 0; color: var(--notebook-ink); background: oklch(97% .021 87 / .5); font: 15px/22px var(--serif); }
.desk-notebook textarea { resize: vertical; min-height: 76px; }
.desk-notebook .guestbook-form button, .desk-notebook .guestbook-more { appearance: none; align-self: flex-start; margin: 0; padding: 7px 14px; border: 1px solid oklch(55% .04 151); border-radius: 999px; background: transparent; color: var(--notebook-ink); font: 14px/1.3 var(--serif); text-align: left; cursor: pointer; }
.desk-notebook .guestbook-form button:hover, .desk-notebook .guestbook-more:hover { background: oklch(90% .035 85 / .5); }
.desk-notebook .guestbook-form :focus-visible, .desk-notebook .guestbook-more:focus-visible { outline-color: oklch(42% .07 156); }
.desk-notebook .guestbook-form button:disabled { opacity: .55; cursor: wait; }
/* Phones read one page at a time: the box is a single page, the case and the cover span it, and the hinge is the box's left edge. */
@media (max-width: 540px) {
  .desk-notebook { --notebook-inset: 10px; --notebook-top: 30px; --notebook-line: 24px; }
  .desk-notebook .notebook-hand { font-size: 19px; }
  .desk-notebook .notebook-hand h2 { font-size: 27px; }
  .desk-notebook .notebook-signature { font-size: 26px; }
  .desk-notebook h2 { font-size: 22px; }
  .desk-notebook .notebook-reading { font-size: 15px; }
  .desk-notebook .notebook-stage { align-items: center; gap: 14px; padding: 12px 16px; }
  .desk-notebook .notebook-position { width: min(calc(100vw - 32px), calc((100dvh - 190px) * .7)); aspect-ratio: .7; }
  .desk-notebook .notebook-flight { transform-origin: 50% 50%; perspective-origin: 50% 50%; }
  .desk-notebook .notebook-book { transform-origin: 50% 50%; }
  .desk-notebook .notebook-book::before, .desk-notebook .notebook-book.is-open::before { left: 0; border-radius: 4px 8px 8px 4px; background: var(--notebook-green); }
  .desk-notebook .notebook-book.is-open::after { left: auto; right: 22px; }
  .desk-notebook .notebook-leaf { width: 100%; padding: var(--notebook-inset) var(--notebook-inset) calc(var(--notebook-inset) + 2px); }
  .desk-notebook .notebook-left, .desk-notebook .notebook-right { left: 0; right: 0; }
  .desk-notebook .notebook-book[data-side="1"] .notebook-left, .desk-notebook .notebook-book:not([data-side="1"]) .notebook-right { display: none; }
  .desk-notebook .notebook-left .notebook-page, .desk-notebook .notebook-right .notebook-page { border-radius: 2px 3px 3px 2px; background: linear-gradient(90deg, #eae2cf, #f7f1e2 7%); box-shadow: inset 14px 0 18px -14px #2d221248, 2px 0 0 #e9e0ca, 4px 0 0 #cbbfa4, 6px 0 0 #ece4d0; }
  .desk-notebook .notebook-cover { left: 0; width: 100%; }
  .desk-notebook .notebook-cover-front { border-radius: 4px 8px 8px 4px; }
  .desk-notebook .notebook-reading { padding: var(--notebook-top) 18px 12px 22px; }
  .desk-notebook .notebook-stained::after { left: auto; right: -40px; bottom: 24px; }
  .desk-notebook .notebook-folio { padding: 6px 16px 10px; }
  .desk-notebook .notebook-controls { justify-content: center; gap: 8px; }
  .desk-notebook .notebook-counter { min-width: 84px; font-size: 13px; }
}
/* Narrow phones (360 px Androids): one size down so the note still fits its page. */
@media (max-width: 370px) {
  .desk-notebook { --notebook-line: 22px; }
  .desk-notebook .notebook-hand { font-size: 18px; }
  .desk-notebook .notebook-hand h2 { font-size: 25px; }
  .desk-notebook .notebook-signature { font-size: 24px; }
  .desk-notebook h2 { font-size: 20px; }
  .desk-notebook .notebook-reading { font-size: 14px; }
}
@media (max-height: 450px) {
  .desk-notebook .notebook-stage { gap: 10px; padding: 8px max(20px, 4vw) 8px 20px; }
  .desk-notebook .notebook-position { width: min(680px, calc(100vw - 20px - max(20px, 4vw)), calc((100dvh - 96px) * 1.44)); }
  .desk-notebook { --notebook-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .desk-notebook .notebook-controls button:active:not([aria-disabled="true"]) { transform: none; }
}