/* Local Journey study: real paper layout and transparent graphite doodles. */
body:has(#journalView:not(.hidden)){background:#f4f2e9;color:#53534c}
body:has(#journalView:not(.hidden)) header{background:#faf8f0;border-color:#dddacf}
#journalView{max-width:1180px;padding:42px 22px 0;box-sizing:border-box}
#journalView .journal-heading .eyebrow{font:400 12px/1.5 Kalam,cursive;letter-spacing:2px;color:#77796d}
#journalView .journal-heading h1{font:400 clamp(32px,3.3vw,46px)/1.25 Kalam,cursive;color:#4e514b;margin:12px 0}
#journalView .journal-heading h1 em{font-style:normal;color:#777e6b}
#journalView .journal-heading p{font:15px/1.65 Kalam,cursive;color:#7c7d70}
#journalView .journal-tools{margin:24px 0 30px;gap:12px}
#journalView .journal-tools :is(select,button){font:15px/1.5 Kalam,cursive!important;color:#62675a;background:#faf9f1;border:1px solid #d5d7c8;border-radius:20px;padding:8px 18px;box-shadow:none}
#journalView .book-scene{background:#eeeade;background-image:none;border:1px solid #dad6c9;border-radius:4px;margin:0;height:auto;min-height:0;padding:6px;filter:none;box-shadow:0 8px 24px #5e5c4310;isolation:isolate}
#journalView .book-scene:before{content:'';position:absolute;inset:6px;border:1px solid #e3dfd1;z-index:-1;transform:translate(0,3px)}
#journalView .book-spread{height:auto;min-height:700px;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
#journalView .book-spread:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:16px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#bbb4a11a 45%,#9e97811c 50%,transparent);pointer-events:none}
#journalView .book-page{height:auto;min-height:700px;overflow:visible;padding:38px 34px 20px;color:#53564f;box-sizing:border-box;background-color:#fcfaef;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h170v170H0z' opacity='.032' filter='url(%23p)'/%3E%3C/svg%3E"),linear-gradient(#8b8a781c 1px,transparent 1px),linear-gradient(90deg,#8b8a781c 1px,transparent 1px);background-size:170px 170px,28px 28px,28px 28px;border-radius:2px;box-shadow:none;display:flex;flex-direction:column}
#journalView .book-page+.book-page{padding-left:34px;border:0}
#journalView .book-page .page-eyebrow{font:400 13px/1.7 Kalam,cursive;letter-spacing:1.1px;color:#757969}
#journalView .book-page h2{font:400 clamp(28px,2.6vw,36px)/1.3 Kalam,cursive;color:#50554d;margin:22px 0 18px}
#journalView .book-page :is(p,.reading-copy){font:400 17px/1.85 Kalam,cursive;color:#60645a;margin:16px 0;white-space:pre-wrap}
#journalView .book-page .page-rule{width:100%;border-color:#a7aa9655;margin:20px 0}
#journalView .journal-card-row{gap:12px;padding:8px 5px;margin:15px 0 30px;transform:rotate(-1deg)}
#journalView .journal-card{outline-color:#fffcf1;box-shadow:1px 3px 6px #6e64451c;max-width:120px;flex:1;aspect-ratio:2/3}
#journalView .book-page label{font:400 18px/1.7 Kalam,cursive;color:#626759;margin:6px 0 8px}
#journalView .book-page textarea{font:400 18px/28px Kalam,cursive;color:#4f584c;background:transparent;border:1px solid transparent;min-height:138px;padding:6px 3px;resize:vertical;max-height:400px;margin:0 0 15px;box-sizing:border-box;border-radius:4px}
#journalView .book-page textarea::placeholder{color:#96998a}
#journalView .book-page textarea:focus{outline:1px dashed #a7b297;background:#fffef34d;border-color:transparent}
#journalView .book-page :is(.secondary,.textbutton){font:400 16px/1.5 Kalam,cursive!important;color:#62695a;border-color:#bdc3ac;margin:5px 0 12px;align-self:flex-start}
#journalView .book-page .textbutton{float:none;align-self:flex-end;margin-top:-46px}
#journalView .mood-sticker{background:#e7eadb;color:#6d785a;align-self:flex-start;font-weight:400}
#journalView .book-footer{margin:24px 0 22px;color:#838574}
#journalView .book-footer button{background:#faf9ef;border-color:#d1d5c3;color:#6f7764}
#journalView .journal-privacy,#journalView .journal-privacy button{color:#8b8c7e}
#journalView .empty-book{padding:100px 40px;min-height:480px}
/* Dedicated flow-space, never over writing or cards. */
.journal-doodle-zone{height:118px;min-height:118px;position:relative;margin-top:auto;padding-top:22px;pointer-events:none;user-select:none;overflow:hidden;clear:both}
.journal-roaming-dog{position:absolute;left:4%;bottom:10px;width:170px;height:90px;overflow:visible;pointer-events:none;color:#565953}
.journal-doodle-zone:after{content:'';position:absolute;left:8%;bottom:9px;width:64px;border-bottom:1px solid #8b8f7455;transform:rotate(-2deg)}
.journal-sticker-zone{height:118px;min-height:118px;position:relative;margin-top:auto;pointer-events:none;user-select:none;clear:both}
.journal-sleep-sticker{position:absolute;right:-4px;bottom:-2px;width:142px;height:92px;transform:rotate(5deg);filter:drop-shadow(1px 2px 1.5px #4c4c3820);overflow:visible}
#journalView .page-turn{animation:journalPageIn .25s ease-out}
@keyframes journalPageIn{from{opacity:.6}to{opacity:1}}
@media(max-width:760px){#journalView{padding:30px 12px 0}#journalView .book-page{padding:28px 22px 16px}#journalView .book-page+.book-page{padding-left:22px}#journalView .book-spread{gap:12px}#journalView .journal-card-row{gap:7px}}
@media(max-width:620px){#journalView .book-spread{grid-template-columns:1fr;gap:18px;min-height:0}#journalView .book-spread:before{display:none}#journalView .book-page{min-height:0;padding:30px 24px 15px}#journalView .book-page+.book-page{padding-left:24px;border-top:1px solid #d8dacb}#journalView .journal-heading h1{font-size:33px}#journalView .book-page h2{font-size:30px}#journalView .book-page :is(p,.reading-copy){font-size:17px}#journalView .journal-tools{gap:8px}#journalView .journal-tools :is(button,select){padding:7px 12px;font-size:14px!important}#journalView .journal-tools select{max-width:175px}#journalView .book-page .textbutton{margin-top:4px}.journal-doodle-zone{margin-top:22px;height:105px;min-height:105px}.journal-sticker-zone{margin-top:24px;height:100px;min-height:100px}}
@media(prefers-reduced-motion:reduce){#journalView .page-turn{animation:none}}

/* Original painted binder: geometry lives in the source image, not CSS replicas. */
#journalView{max-width:1300px}
#journalView .book-scene{--book-height:clamp(760px,66.67vw,900px);height:var(--book-height);min-height:0;padding:calc(var(--book-height)*.15) 12% calc(var(--book-height)*.14);box-sizing:border-box;background:#f7efdf url('assets/light-cream-polka-binder.png') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;filter:none;isolation:isolate}
#journalView .book-scene:before,#journalView .book-spread:before{display:none}
#journalView .book-spread{height:100%;min-height:0;gap:9%;align-items:stretch}
#journalView .book-page,#journalView .book-page+.book-page{height:100%;min-height:0;padding:0 8px 0;background:transparent;border:0;border-radius:0;box-shadow:none;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#b8a084 transparent}
#journalView .book-page h2{font-size:30px;margin:16px 0}
#journalView .book-page :is(p,.reading-copy){font-size:16px;line-height:1.7}
#journalView .journal-card-row{margin:12px 0 20px}
#journalView .journal-card{max-width:108px}
#journalView .book-page .page-rule{margin:14px 0}
#journalView .journal-doodle-zone{min-height:95px;height:95px;padding-top:12px}
#journalView .journal-sticker-zone{position:absolute;right:4.8%;bottom:5.6%;width:10.1%;height:8%;min-height:0;margin:0;z-index:2;background:#fffaf0;border:2px solid #e4d6be;border-radius:49% 46% 38% 35%;transform:rotate(-2deg)}
#journalView .journal-sleep-sticker{width:100%;height:100%;right:0;bottom:0;transform:none;display:flex;align-items:center}
#journalView .journal-sleep-sticker svg{width:100%;height:100%}
@media(max-width:760px) and (min-width:621px){#journalView .book-scene{padding-left:11%;padding-right:11%}#journalView .book-spread{gap:12%}#journalView .book-page h2{font-size:25px}}
@media(max-width:620px){#journalView .book-scene{height:auto;padding:70px 13% 100px;background-size:100% 100%}#journalView .book-spread{height:auto;gap:30px;grid-template-columns:1fr}#journalView .book-page,#journalView .book-page+.book-page{height:auto;overflow:visible;padding:0 4px}#journalView .book-page+.book-page{border-top:1px dashed #ac947b66;padding-top:24px}#journalView .book-page h2{font-size:28px}#journalView .journal-sticker-zone{width:75px;height:48px;right:5%;bottom:3%}}
/* Keep the painted source's exact 3:2 proportions on a spread. */
@media(min-width:621px){main:has(#journalView:not(.hidden)){max-width:1400px}#journalView .book-scene{height:auto;aspect-ratio:3/2;padding:0}#journalView .book-spread{position:absolute;inset:15% 12% 14%;height:auto}#journalView .book-page h2{font-size:27px}#journalView .book-page :is(p,.reading-copy){font-size:15px}#journalView .journal-card{max-width:100px}#journalView .journal-doodle-zone{height:80px;min-height:80px}}

#journalView .book-page+.book-page{padding-left:22px}
.journal-book-viewport{max-width:100%}
@media(max-width:620px){.journal-book-viewport{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#b7a184 #eee6d7}#journalView .book-scene{width:900px;height:600px;padding:0;aspect-ratio:3/2}#journalView .book-spread{position:absolute;inset:15% 12% 14%;height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9%}#journalView .book-page,#journalView .book-page+.book-page{height:100%;overflow:auto;border:0;padding:0 8px}#journalView .book-page+.book-page{padding-left:22px}#journalView .book-page h2{font-size:25px}#journalView .book-page :is(p,.reading-copy){font-size:16px}#journalView .journal-sticker-zone{width:10.1%;height:8%;right:4.8%;bottom:5.6%}}

/* Spring palette only; bound structure and interactive layers stay unchanged. */
body:has(#journalView:not(.hidden)){background:#fffdf8}
body:has(#journalView:not(.hidden)) header{background:#fffdf8;border-color:#eeeae0}
#journalView .book-scene{background-color:#fffdf8}
