/* shell/base.css */
.notebook { position:relative; width:min(450px,78vw); height:590px; font-family:var(--hand); transform:rotate(-3deg); transition:transform .28s cubic-bezier(.2,.65,.25,1); isolation:isolate; }
body:not(.room-view) .desk-pencil { display:none!important; }
.notebook:not(.is-open):hover { transform:translateY(-6px) rotate(-1deg); }
.notebook::after { content:''; position:absolute; inset:7px -6px -7px 6px; background:repeating-linear-gradient(to bottom,#d7d3c5 0 1px,#f9f5e8 1px 3px); border:1px solid #a7a496; border-radius:4px 15px 15px 4px; z-index:-1; box-shadow:10px 21px 27px #36332328,2px 4px 5px #36332336; }
.cover { position:absolute; inset:0; transform-origin:left center; transform-style:preserve-3d; transition:transform .72s cubic-bezier(.22,.7,.2,1), visibility .72s; z-index:3; border-radius:4px 13px 13px 4px; }
.cover-front,.cover-back { position:absolute; inset:0; backface-visibility:hidden; border-radius:inherit; overflow:hidden; }
.cover-front { background:#252724; border:1px solid #30312e; box-shadow:inset -2px 0 5px #0009; }
.marble { position:absolute; inset:0; width:100%; height:100%; opacity:.94; pointer-events:none; }
.spine { position:absolute; left:0; top:0; bottom:0; width:34px; background:linear-gradient(90deg,#121514,#30312e 35%,#232623 75%,#171a18); border-right:1px solid #ffffff40; box-shadow:3px 0 4px #0004; }
.spine::after { content:''; position:absolute; inset:0 5px; border-left:1px dashed #ffffff18; border-right:1px solid #0004; }
.open-cover { position:absolute; inset:0; border:0; background:transparent; color:inherit; cursor:pointer; width:100%; padding:0; }
.name-label { position:absolute; top:67px; left:74px; right:40px; background:#fffef5; padding:12px 15px 14px; border:3px double #32362f; border-radius:12px; box-shadow:1px 3px 1px #0004; transform:rotate(1.5deg); text-align:center; }
.label-title { display:block; font:700 26px var(--hand); letter-spacing:.06em; border-bottom:2px solid #292e27; padding:0 0 9px; }
.label-name { display:block; font:400 38px/1.65 var(--hand); border-bottom:1px solid #989d90; }
.label-sub { display:block; margin-top:10px; font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.sticker { position:absolute; z-index:4; display:flex; align-items:center; justify-content:center; padding:11px 13px; box-shadow:2px 4px 3px #0005; font:700 16px/1.15 var(--hand); text-align:center; }
.work-label { position:absolute; top:254px; left:73px; right:38px; display:flex; gap:10px; align-items:center; justify-content:center; z-index:4; pointer-events:none; }
.work-label > span { background:#fff6cf; box-shadow:1px 2px 2px #0005; padding:7px 10px; font:16px/1.2 var(--hand); transform:rotate(-2deg); max-width:166px; }
.clay-sticker { display:flex; background:#fffef6; padding:3px 12px; border-radius:12px; box-shadow:2px 4px 3px #0005; transform:rotate(7deg); pointer-events:auto; transition:transform .2s; }
.clay-sticker:hover { transform:rotate(3deg) translateY(-4px); }
.clay-sticker img { width:89px; height:48px; object-fit:contain; }
.cover-back { transform:rotateY(180deg); background:#fff; border:1px solid #c4c2ba; box-shadow:inset -12px 0 24px #514b3d18; }
.inside-note { margin:100px 45px; padding:28px 20px; border:1px solid #b3b09c; text-align:center; font:22px/1.7 var(--hand); transform:rotate(-3deg); }
.inside-note span { display:block; margin-top:18px; font:12px var(--hand); letter-spacing:.14em; }
.pages { --rule-step:32px; --margin-line:48px; position:absolute; inset:0; overflow:auto; border-radius:3px 12px 12px 3px; background:linear-gradient(to right,transparent 0 calc(var(--margin-line) - 1px),#e6a49e calc(var(--margin-line) - 1px) var(--margin-line),transparent var(--margin-line)),repeating-linear-gradient(to bottom,transparent 0 calc(var(--rule-step) - 1px),#94b5ce70 calc(var(--rule-step) - 1px) var(--rule-step)),var(--paper); background-attachment:local; padding:64px 34px 30px 67px; box-shadow:inset 13px 0 19px #554d3420; scrollbar-width:thin; }
.page-meta { position:relative; line-height:var(--rule-step); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:#73736a; margin:0 0 32px; }
.entry { font:20px/var(--rule-step) var(--hand); }
.entry p { position:relative; margin:0 0 32px; }
.entry a { text-decoration-thickness:1px; text-underline-offset:5px; }
.signature { position:relative; font-size:27px; line-height:var(--rule-step); display:block; }
.toc-line:is(button) { border:0; background:transparent; text-align:left; cursor:pointer; }
/* Paper and all writing share one ruler; only the available width changes wrapping.
   Headings use two rules on desktop and one in essays/phone spreads. */
.notebook #page-title { position:relative; font:400 44px/calc(var(--rule-step) * 2) var(--hand); margin:0 0 var(--rule-step); }
.notebook .reading-essay #page-title { font-size:30px; line-height:var(--rule-step); }
.notebook .pages:has(#doodle-page:not([hidden])) #page-title { font-size:22px; margin-bottom:var(--rule-step); }
.notebook .pages [data-ruled-writing] { translate:0 var(--baseline-shift,0px); }
.toc { margin:0; padding:0; list-style:none; font:20px/var(--rule-step) var(--hand); }
.toc li { margin:0 0 var(--rule-step); }
.toc-line { position:relative; display:block; width:100%; min-height:44px; padding:0 0 0 34px; color:#323630; text-decoration:none; font:25px/var(--rule-step) var(--hand); }
.toc-line .essay-number { position:absolute; left:0; top:0; color:#878a7e; font-size:16px; line-height:var(--rule-step); }
/* Desktop contents fill the page; phone titles flow naturally and can scroll. */
@media(min-width:651px) {
  .notebook-view .pages:has(#contents:not([hidden])) { display:flex; flex-direction:column; }
  .notebook-view .pages:has(#contents:not([hidden])) #contents { display:flex; flex:1; min-height:0; }
  .notebook-view .pages:has(#contents:not([hidden])) .toc { display:grid; flex:1; grid-template-rows:repeat(4,minmax(min-content,1fr)); }
  .notebook-view .pages:has(#contents:not([hidden])) .toc li { display:flex; align-items:center; margin:0; }
  .notebook-view .pages:has(#contents:not([hidden])) .toc-line { font-size:clamp(22px,2.1vw,31px); }
  .notebook-view .pages:has(#contents:not([hidden])) .page-bottom { flex:none; margin-top:0; }
}
@media(max-width:650px) {
  .notebook .pages:not(.reading-essay) { --rule-step:24px; }
  .notebook .pages:not(.reading-essay) #page-title { font-size:22px; line-height:var(--rule-step); }
  .notebook .toc-line { padding-left:20px; font-size:15px; }
  .notebook .toc-line .essay-number { font-size:10px; }
}
.quote-page { min-height:320px; }
.quote-copy { margin:0; font:20px/32px var(--hand); }
.quote-copy::before { content:'“'; color:#ec6545; font:700 30px/1 var(--hand); margin-right:5px; }
.quote-source { min-height:32px; margin:32px 0 0; font:700 11px/32px var(--hand); letter-spacing:.12em; text-transform:uppercase; color:#77796f; }
.quote-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:32px; }
.page-turn { border:1px solid #aead9f; border-radius:999px; padding:7px 13px; background:#fffdf488; color:var(--ink); cursor:pointer; font-size:13px; }
.page-turn:hover { background:#fff; }
.page-turn:disabled { opacity:.3; cursor:default; }
.quote-count { font-size:11px; color:#77796f; }
.page-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:32px; font-size:12px; color:#66665d; }
.page-bottom #page-number { margin-left:auto; }
.close { min-height:44px; border:0; border-bottom:1px solid #aaa99f; padding:5px 0; cursor:pointer; background:transparent; font-size:13px; color:var(--ink); }
.notebook.is-open { transform:rotate(0); }
.is-open .cover { transform:rotateY(-100deg); pointer-events:none; }
.is-open .cover-front { pointer-events:none; }
@media (max-width:650px) {
.notebook { width:min(390px,84vw); height:550px; }
.name-label { left:53px; right:22px; top:61px; padding:10px; }
.label-title { font-size:21px; }
.label-name { font-size:clamp(26px,7.3vw,37px); }
.work-label { top:238px; left:44px; right:17px; gap:8px; }
.work-label > span { font-size:14px; padding:6px 8px; }
.clay-sticker { padding:3px 9px; }
.clay-sticker img { width:70px; height:40px; }
.spine { width:25px; }
.pages { padding:64px 25px 25px 51px; }
.pages { --margin-line:36px; }
.entry { font-size:18px; }
.notebook.is-open { transform:rotate(0); }
}

/* retro.css */
.notebook { z-index:2; }
@media (max-width:999px) {
.notebook { margin-block:-35px; transform:scale(.88) rotate(-3deg); transition:transform .85s cubic-bezier(.22,.7,.2,1),margin .85s cubic-bezier(.22,.7,.2,1); }
.notebook.is-open { margin-block:0; }
}
@media (max-width:650px) {
.notebook { margin-block:-33px; }
.notebook.is-open { margin-block:0; }
}
@media (max-width:650px) and (max-height:720px) {
.notebook:not(.is-open) { transform:scale(.8) rotate(-3deg); margin-block:-55px; }
}

/* scrapbook.css */
.pages:has(.quote-page:not([hidden])) { padding-top:64px; }
.pages:has(.quote-page:not([hidden])) h1 { font-size:34px; margin-bottom:16px; }
.pages:has(.quote-page:not([hidden])) .page-meta { margin-bottom:0; }
.quote-copy { margin:0; font:700 22px/1.28 var(--book-type); letter-spacing:0; text-wrap:pretty; overflow-wrap:break-word; }
.quote-copy::before { content:none; }
.quote-source { min-height:0; margin:13px 0 0; font:italic 14px/1.4 var(--book-type); letter-spacing:0; text-transform:none; color:inherit; }
.long-quote .quote-copy { font-size:21px; }
.quote-controls { margin-top:26px; padding-top:6px; }
.quote-count { font-size:13px; }
@media (max-width:650px) {
.quote-copy { font-size:21px; }
.long-quote .quote-copy { font-size:20px; }
}

/* desk-v2.css */
.stage .notebook { grid-column:span 2; width:77%; max-width:220px; height:auto; min-height:0; aspect-ratio:3/4; }
.stage .notebook:not(.is-open) { margin:0; transform:rotate(-3deg); }
.stage .notebook:not(.is-open):hover { transform:translateY(-6px) rotate(-1deg); }
.cover-front { container-type:inline-size; background:transparent; border:0; box-shadow:none; overflow:visible; }
.notebook-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.notebook:not(.is-open)::after { opacity:0; }
.name-label { top:24%; left:31%; right:15%; height:23%; padding:0; border:0; background:none; box-shadow:none; border-radius:0; transform:none; display:flex; flex-direction:column; justify-content:center; }
.label-title { font:900 4.9cqw/1.05 Arial,Helvetica,sans-serif; letter-spacing:.01em; border:0; padding:0; margin-bottom:1.4cqw; }
.label-name,.label-location { display:block; margin:0 8%; border-bottom:1px solid #8d8c86; text-transform:none; letter-spacing:0; white-space:nowrap; font:400 7.2cqw/1.12 var(--hand); }
.label-location { font-size:6.1cqw; margin-top:1.2cqw; }
.label-sub { font:400 2.1cqw/1.2 Georgia,serif; letter-spacing:0; text-transform:none; text-align:left; margin:1.6cqw 8% 0; }
.work-label { top:47%; left:38%; right:8%; gap:0; }
.work-label > span { flex:1; min-width:0; max-width:none; white-space:nowrap; font-size:4.3cqw; line-height:1.05; padding:1.8cqw 2cqw; }
.work-label .clay-sticker { flex-shrink:0; padding:1cqw 2cqw; border-radius:2.6cqw; }
.work-label .clay-sticker img { width:21cqw; height:11.3cqw; }
#page-title:focus { outline:none; }
.toc-line:hover { color:#884730; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.stage:has(.notebook.is-open) { display:flex; min-height:640px; }
.stage:has(.notebook.is-open) .object-rack { display:none; }
.stage .notebook.is-open { width:min(430px,100%); max-width:430px; height:590px; min-height:590px; margin:0; transform:rotate(0); }
@media(max-width:999px) {
.stage .notebook.is-open { transform:none; }
}
@media(max-width:650px) {
.stage .notebook.is-open { width:100%; }
}
#board-room .quote-controls { padding-top:15px; margin-top:0; border-top:1px solid #d4dad7; font-family:var(--ui); }
#board-room .page-turn { font:14px var(--ui); border:0; background:transparent; }
#board-room .quote-count { font:12px var(--ui); }
.notebook:not(.is-open) .pages { visibility:hidden; }
.notebook:not(.is-open) .cover { transition:none; }
.stage .notebook.is-open { translate:none!important; touch-action:auto; user-select:auto; }
.stage .notebook:not(.is-open) .open-cover { cursor:grab; }

/* interactions.css */
.pages.reading-essay { padding-top:calc(var(--rule-step) * 3); }
.reading-essay .page-meta { margin-bottom:0; }
#essay-date { position:absolute; top:64px; right:30px; color:#74766b; font:15px/var(--rule-step) var(--hand); }
#essay-subtitle { font:20px/var(--rule-step) var(--hand); margin:0 0 32px; }
.essay-body { font:20px/var(--rule-step) var(--hand); overflow-wrap:anywhere; }
.essay-body p,.essay-body h2,.essay-body h3,.essay-body h4,.essay-body h5,.essay-body h6,.essay-body ul,.essay-body ol,.essay-body blockquote { margin:0 0 var(--rule-step); font:inherit; line-height:var(--rule-step); }
.essay-body h2,.essay-body h3,.essay-body h4 { font-weight:700; }
.essay-body blockquote { padding-left:14px; border-left:2px solid #9b9a88; }
.essay-body ul,.essay-body ol { padding-left:24px; }
.essay-body li { margin:0; }
.essay-body hr { height:32px; border:0; margin:0 0 32px; text-align:center; }
.essay-body hr::after { content:'· · ·'; }
.essay-body a { text-decoration-thickness:1px; text-underline-offset:4px; }
.essay-body figure { position:relative; margin:32px 0; padding:8px; background:#fffefa; box-shadow:1px 3px 5px #453e3529; }
.essay-body figure::before,.essay-body figure::after { content:''; position:absolute; z-index:1; top:-9px; width:58px; height:23px; background:linear-gradient(90deg,#dbc39774,#e8d1a698,#d0bb9380); box-shadow:0 1px 1px #745d3920; }
.essay-body figure::before { left:8%; transform:rotate(-13deg); }
.essay-body figure::after { right:7%; transform:rotate(10deg); }
.essay-body img { display:block; width:100%; height:auto; }
.essay-body figcaption { color:#77766d; font:15px/var(--rule-step) var(--hand); text-align:center; padding-bottom:calc(var(--rule-step) / 2); }
.reading-essay .page-bottom { flex-wrap:wrap; }
#essay-contents,#essay-next { font:17px/var(--rule-step) var(--hand); }
@media(max-width:650px) {
#essay-date { right:22px; font-size:13px; }
}
.notebook-nav { position:absolute; top:14px; right:18px; z-index:5; display:flex; gap:7px; }
.notebook:not(.is-open) .notebook-nav { display:none; }
.notebook-nav button,.notebook-nav .home-tab { position:static; min-height:44px; margin:0; padding:4px 11px; border:1px solid #aaa99f; border-radius:999px; background:#fffdf4f5; color:#393a32; font:16px/24px var(--hand); line-height:24px; text-decoration:none; box-shadow:0 2px 3px #33291420; cursor:pointer; }
@media(max-width:650px) {
.notebook-nav { right:10px; }
.notebook-nav button,.notebook-nav .home-tab { font-size:14px; padding:3px 9px; }
}
.semester-learning { margin:78px 36px; color:#454948; }
.semester-learning h2 { margin:0 0 30px; text-align:center; text-transform:uppercase; font:700 23px/1.2 var(--ui); letter-spacing:.02em; }
.semester-learning h2 span { white-space:nowrap; }
.semester-learning table { border-collapse:collapse; width:100%; }
.semester-learning td { border:1px solid #747974; padding:22px 14px; font:24px/1.4 var(--hand); }
@media(max-width:600px) {
.semester-learning { margin:60px 20px; }
.semester-learning h2 { font-size:18px; }
.semester-learning td { padding:18px 10px; font-size:20px; }
}
.stage .notebook.is-open { width:min(430px,calc(100vw - 40px)); }
@media(max-width:650px) {
.stage .notebook.is-open { height:540px; min-height:540px; }
.notebook.is-open .semester-learning { margin:54px 12px; }
.notebook.is-open .semester-learning h2 { font-size:clamp(12px,3vw,18px); margin-bottom:24px; }
.notebook.is-open .semester-learning td { padding:18px 8px; font-size:clamp(15px,3.6vw,20px); }
.notebook.is-open .pages { padding:48px 12px 24px 20px; }
.notebook.is-open .pages.reading-essay { padding-top:calc(var(--rule-step) * 5); }
.notebook.is-open .pages { --margin-line:12px; }
.notebook.is-open .page-meta { font-size:8px; line-height:16px; margin-bottom:20px; }
}


/* mobile-page.css */
/* Open the inside cover as a real facing page and center the complete spread. */
/* On desktop, each opened page keeps the closed cover's physical scale.
   The stage must be allowed to shrink when a phone rotates to landscape. */
.notebook-view .stage:has(.notebook.is-open) { min-height:0; }
.notebook-view .stage .notebook.is-open { --open-page-width:min(61vw,68svh,720px,calc((100vw - 32px)/2)); width:var(--open-page-width); max-width:none; height:auto; min-height:0; aspect-ratio:3/4; margin-left:var(--open-page-width); }
.notebook-view .notebook.is-open .cover { transform:rotateY(-180deg); visibility:visible; }
@media(max-width:650px) {
/* A phone keeps the complete facing-page spread in view. */
.notebook-view .stage .notebook.is-open { width:calc((100vw - 20px)/2); max-width:none; height:min(540px,calc(100svh - 140px)); min-height:0; margin-left:calc((100vw - 20px)/2); transform:none; }
.notebook-view .notebook.is-open .semester-learning { margin:38px 10px; }
.notebook-view .notebook.is-open .semester-learning h2 { font-size:13px; margin-bottom:20px; }
.notebook-view .notebook.is-open .semester-learning td { padding:13px 6px; font-size:15px; }
.notebook-view .notebook.is-open .pages:not(.reading-essay) { padding:37px 10px 18px 20px; }
}

/* The classic desktop wallpaper surrounds the clean composition-book cover. */
.notebook-view { background:#79a9cf url('../../assets/bliss.jpg') center center / cover no-repeat fixed; }
.notebook-view .work-label,.notebook-view .stage > .object-rack { display:none; }

/* Use the full inside cover for the semester list and center each subject. */
.notebook-view .notebook.is-open .semester-learning {
  box-sizing:border-box; display:flex; flex-direction:column; height:100%; margin:0;
  padding:clamp(24px,4vw,54px) clamp(18px,3vw,42px);
}
.notebook-view .notebook.is-open .semester-learning table { flex:1; }
.notebook-view .notebook.is-open .semester-learning td { text-align:center; vertical-align:middle; }

/* Short landscape spreads keep the entire printed semester table on its cover. */
@media(min-width:651px) and (max-height:500px) {
  .notebook-view .notebook.is-open .semester-learning { padding:18px; }
  .notebook-view .semester-learning h2 { font-size:18px; margin-bottom:16px; }
  .notebook-view .semester-learning td { padding:10px; font-size:17px; }
}

/* A woven ribbon marks the essay waiting inside the closed book. */
.notebook-bookmark { position:absolute; z-index:3; top:-17px; right:19%; width:19px; height:74px; pointer-events:none; background:repeating-linear-gradient(90deg,#853528 0 1px,#a54c39 1px 3px,#963d2f 3px 4px); clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%); filter:drop-shadow(2px 3px 2px #28160855); }
.notebook-bookmark[hidden],.notebook.is-open .notebook-bookmark { display:none; }

/* Keep the hidden face out of WebKit’s flattened compositing layer. */
.notebook:not(.is-open) .cover-back { visibility:hidden; }

/* mobile-essay-expand.css */
/* Tapping an essay on a phone grows the open book until the page fills the screen. */
@media(max-width:650px) {
  /* Perspective otherwise makes the stage the fixed essay's containing block. */
  .notebook-view .stage:has(.pages.reading-essay) { perspective:none; }
  .stage .notebook.is-open:has(.pages.reading-essay) { position:fixed; inset:0; z-index:160; width:100%; max-width:none; height:100dvh; min-height:0; margin:0; transform:none; border-radius:0; }
  .notebook.is-open:has(.pages.reading-essay) .cover { display:none; }
  .notebook.is-open .pages.reading-essay { border-radius:0; }
}

/* The page corner replaces the visible next button: it idles with a slight lift and peels on drag. */
#essay-next { position:absolute; width:1px; height:1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.page-corner { position:absolute; z-index:4; right:0; bottom:0; width:110px; height:110px; border:0; padding:0; background:transparent; cursor:grab; touch-action:none; }
.page-corner[hidden] { display:none; }
.page-corner:active { cursor:grabbing; }
.page-corner::before { content:''; position:absolute; right:0; bottom:0; width:calc((30px + var(--peel,0) * 110px) * var(--lift,1)); height:calc((30px + var(--peel,0) * 110px) * var(--lift,1)); clip-path:polygon(0 100%,100% 0,100% 100%); background:linear-gradient(45deg,#fffdf4 0%,#f6f0dd 42%,#e2d9bf 55%,#c9bfa2 100%); filter:drop-shadow(-2px -2px 3px #453b1e59); transform-origin:bottom right; transition:width .22s ease,height .22s ease; animation:corner-invite 4.6s ease-in-out 1.4s infinite; }
.page-corner::after { content:''; position:absolute; inset:0; background:linear-gradient(45deg,transparent 55%,#2e2a1850 100%); opacity:calc(var(--peel,0) * .9); pointer-events:none; }
.page-corner:hover::before,.page-corner:focus-visible::before { width:calc((44px + var(--peel,0) * 110px) * var(--lift,1)); height:calc((44px + var(--peel,0) * 110px) * var(--lift,1)); }
.page-corner.is-peeling::before { transition:none; animation:none; }
@keyframes corner-invite {
  0%,100% { transform:scale(1); }
  7% { transform:scale(1.14); }
  14% { transform:scale(1); }
}
@media(max-width:650px) {
.page-corner { width:96px; height:96px; }
}
@media(prefers-reduced-motion:reduce) {
.page-corner::before { animation:none; transition:none; }
}

/* Phone pull-to-close: the open notebook follows the finger, then springs or slides away. */
.notebook.is-open { transition:transform .25s cubic-bezier(.16,1,.3,1); }
.notebook.is-open.is-pulling { transition:none; }

/* Real thickness below the photographic cover, and light falling into the spine. */
.notebook::before { content:''; position:absolute; inset:3px -3px -5px 2px; border-radius:3px 12px 12px 3px; background:repeating-linear-gradient(#e6ddcc 0 1px,#fff9eb 1px 3px); box-shadow:2px 5px 6px #251b1940; pointer-events:none; }
.notebook .pages { rotate:y var(--page-bend,0deg); transform-origin:left center; transition:rotate 160ms ease; box-shadow:inset 13px 0 19px #554d3420,inset -25px 0 35px rgb(51 40 20 / var(--page-shade,0)); }
.notebook .cover-back { box-shadow:inset -12px 0 24px #514b3d30,1px 3px 0 #bbb5a6; }
.room-view .notebook:not(.is-open)::before { display:none; }
@media(prefers-reduced-motion:reduce) { .notebook .pages { rotate:none; transition:none; } }

/* Backface visibility hides the front only after the photographed cover turns away. */
.room-view .stage .notebook.is-open .cover-front { visibility:visible; }


/* ── the pencil's doodle page: his quote, his creatures, your turn ───── */
.doodle-page { padding:0; display:flex; flex-direction:column; flex:1; min-height:0; }
.pages:has(#doodle-page:not([hidden])) { display:flex; flex-direction:column; padding-top:44px; }
.doodle-quote { margin:0 0 var(--rule-step); font:17px/var(--rule-step) var(--hand); color:#36424c; }
.doodle-sheet { position:relative; flex:1; min-height:110px; border:1px dashed #b9b2a0; border-radius:2px; background:#fbfaf6; touch-action:none; overflow:hidden; cursor:crosshair; }
.doodle-canvas { position:absolute; inset:0; width:100%; height:100%; }


/* Keep the open spread below the site controls on phones. */
@media(max-width:650px) {
  .notebook.is-open .cover-front { visibility:hidden!important; }
  body:not(.room-view) .stage:has(.notebook.is-open) .desk-pencil { display:none; }
  .notebook-view .stage .notebook.is-open { height:min(540px,calc(100dvh - 155px)); }
  .mobile-swipe-cue { display:none; }
  .notebook.is-open .pages.reading-essay .mobile-swipe-cue {
    position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:180; display:block; width:max-content;
    max-width:calc(100% - 10px); margin:0; padding:7px 13px;
    border:1px solid #b3a98b; border-radius:999px; background:#fffdf0ed;
    color:#554c3e; box-shadow:0 2px 8px #4035232b;
    font:15px/1.2 var(--hand); text-align:center; pointer-events:none;
  }
  .mobile-swipe-cue[hidden] { display:none!important; }
}


/* An essay is one full phone page in every entry view, including the notebook
   spread, whose more specific half-page rule otherwise wins. */
@media(max-width:650px) {
  .notebook-view .stage .notebook.is-open:has(.pages.reading-essay) {
    position:fixed; inset:0; width:100%; max-width:none; height:100dvh;
    margin:0; transform:none;
  }
}
@media (hover:hover) and (pointer:fine) {
  .notebook:not(.is-open) .open-cover,
  .notebook.is-open .pages,
  .notebook .doodle-sheet { cursor:url('../../assets/cursors/pencil.png') 3 29,pointer; }
}