.journal-scene{--pw:clamp(180px, min(26vw, 39vh), 300px);--dur:1.1s;--ease:cubic-bezier(.5, 0, .2, 1);width:var(--pw);max-width:100%;height:calc(var(--pw) * 1.3028);cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;touch-action:pan-y;outline:none;position:relative}.journal-scene:focus-visible{outline:none}.journal-scene:focus-visible:after{z-index:10;content:"";pointer-events:none;border:2px solid var(--color-brand-cream);transition:right var(--dur) var(--ease), left var(--dur) var(--ease);border-radius:2px;position:absolute;inset:-10px}.journal-scene[data-state=open]:focus-visible:after{right:calc(var(--pw) * -.5 - 10px);left:calc(var(--pw) * -.5 - 10px)}.journal-scene[data-state=open]{--s:.5;--fx:-.5;--fs:2}.journal-scene[data-state=end]{--s:1;--fx:-1;--fs:1}.journal-scene[data-state=open][data-side=left]{cursor:w-resize}.journal-scene[data-state=open][data-side=right]{cursor:e-resize}.journal-shift{transform:translateX(calc(var(--pw) * var(--s,0)));transition:transform var(--dur) var(--ease);position:absolute;inset:0}.journal-floor{filter:blur(7px);height:5%;transform:translateX(calc(var(--pw) * var(--fx,0))) scaleX(var(--fs,1));transition:transform var(--dur) var(--ease);background:radial-gradient(closest-side,#00000052,#0000);position:absolute;bottom:-2%;left:3%;right:3%}.journal-leaf{transform-origin:0;transform-style:preserve-3d;z-index:var(--zi,1);transform:perspective(calc(var(--pw) * 5.5)) rotateY(calc(var(--a,0deg) + var(--h,0deg)));transition:transform var(--dur) var(--ease) var(--d,0s);background:#fdfcf8;position:absolute;inset:0}.journal-scene[data-state=closed] .journal-leaf[data-i="0"]:hover{--h:-8deg}.journal-face{-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#fdfcf8;border-radius:2px 6px 6px 2px;position:absolute;inset:0;overflow:hidden}.journal-face.is-back{border-radius:6px 2px 2px 6px;transform:rotateY(180deg)}.journal-face.is-cover,.journal-face.is-end{background:#d8dedc;overflow:visible;box-shadow:0 0 0 1px #1e2c851f}.journal-face:before{z-index:2;content:"";pointer-events:none;background:linear-gradient(90deg,#00000029,#0000 12%);position:absolute;inset:0}.journal-face.is-back:before{background:linear-gradient(270deg,#00000029,#0000 12%)}.journal-shade{z-index:3;pointer-events:none;opacity:0;background:linear-gradient(90deg,#0000000a,#00000052);position:absolute;inset:0}.journal-face svg.journal-art{border-radius:2px 6px 6px 2px;width:100%;height:100%;display:block}.journal-face.is-back svg.journal-art{border-radius:6px 2px 2px 6px}.journal-ribbon{pointer-events:none;width:8%;position:absolute;top:99%;left:12%;overflow:visible}.journal-page{color:#2a2f45;font:400 clamp(9px, calc(var(--pw) * .034), 14px) / 1.5 "DM Sans", Arial, sans-serif;background-color:#fdfcf8;padding:9% 10% 12%;position:absolute;inset:0;overflow:hidden}.journal-page h3{color:#1f2a6b;margin:0 0 .8em;font-size:1.5em;font-weight:700}.journal-page p{margin:.6em 0}.journal-field{align-items:flex-end;gap:.6em;margin:1em 0;display:flex}.journal-field i{border-bottom:1px solid #b9bed3;flex:1;height:1em}.journal-page-number{z-index:1;color:#8b90a8;font-size:clamp(8px, calc(var(--pw) * .026), 11px);position:absolute;bottom:4.5%}.journal-face:not(.is-back) .journal-page-number{right:9%}.journal-face.is-back .journal-page-number{left:9%}@media (width<=760px){.journal-scene{--pw:clamp(190px, min(53vw, 34vh), 290px)}}@media (prefers-reduced-motion:reduce){.journal-scene{--dur:10ms}}