/* The Forgotten Journal — Garden Edition, 26 October 2026.
   Visual layout uses the approved mockup as an art backdrop. All controls are real HTML.
   Back up your files before replacing. */
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Caveat:wght@400;500&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Marck+Script&display=swap');
:root{--ink:#65432c;--script:'Allura',cursive;--write-size:32px;--rose:#a96b68;--paper:#f8e9cd;--brown:#694630}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#533a2c;background:#92765e;font:20px 'Cormorant Garamond',Georgia,serif}button,input,textarea,select{font:inherit}button,a{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #805a92;outline-offset:3px}
/* The real photographed desk and book remain visible all around the usable journal. */
.masthead{display:none}.journal-layout{position:relative;width:min(100%,1536px);min-height:clamp(780px,66.6667vw,1024px);margin:0 auto;background:#b49b7d url('garden-journal-desk.jpg') center center/100% 100% no-repeat;display:grid;grid-template-columns:15.2% 28.2% 56.6%;padding:0 3.2% 0 4.6%;box-shadow:0 12px 40px #28170d77;overflow:hidden}
/* The panel centres conceal lettering baked into the photographic concept, but leave the floral and paper edges showing. */
.side{align-self:stretch;margin:18% 3% 7% 0;padding:8% 5% 5%;background:linear-gradient(90deg,#faecd8f5,#f9e7cdf4);border-radius:12px 7px 12px 8px;display:flex;flex-direction:column;gap:2px;box-shadow:inset 0 0 19px #b78d5b30}
.side-title{text-align:center;font-size:clamp(18px,2.4vw,34px);font-style:italic;line-height:1.1;margin:2px 0 18px;color:#694536}.side a,.logout{display:block;width:100%;text-align:left;background:transparent;border-bottom:1px solid #ac89613a;padding:clamp(7px,1.1vw,15px) 3px;color:#664b38;font-size:clamp(15px,1.35vw,21px);line-height:1.1}.side a:hover,.logout:hover{background:#e8c7ba8a;border-radius:4px}.side-poem{margin:auto 0 2%;font-size:clamp(15px,1.6vw,24px);font-style:italic;text-align:center;line-height:1.22;color:#755642}
.archive{margin:13% 5% 8% 2%;padding:7% 6% 7%;background:linear-gradient(90deg,#f7e7cef2,#f9ead4f8 60%,#f4ddbcf2);border-radius:13px 7px 10px 12px;box-shadow:inset -14px 0 24px #7d50302b;min-width:0}.archive h2{font-size:clamp(24px,2.6vw,39px);font-weight:400;margin:0 0 13px}.archive form{display:flex;margin:0 0 16px}.archive input{width:100%;min-width:0;background:#fff6e6;border:1px solid #c8a784;border-radius:7px 0 0 7px;padding:8px;color:#533b29}.archive form button{background:#a16c59;color:#fff6e9;padding:0 12px;border-radius:0 7px 7px 0}.entry-list{overflow:auto;max-height:650px;scrollbar-color:#c6a181 transparent}.entry-link{display:flex;gap:12px;align-items:center;border-bottom:1px solid #b9907040;padding:12px 3px}.entry-link:hover,.entry-link.selected{background:#e8c5bd9c;border-radius:8px}.entry-mini{display:grid;place-items:center;flex-shrink:0;width:clamp(36px,4.1vw,62px);height:clamp(39px,4.1vw,62px);background:#e4c7aa;border:1px solid #d7b498;border-radius:7px;color:#986c69;font-size:29px;box-shadow:0 2px 5px #53301b2c}.entry-link strong{font:clamp(21px,2.2vw,32px)/1 var(--script);display:block;font-weight:400}.entry-link small{font-size:clamp(13px,1.15vw,17px)}.empty{font-style:italic}
.page{margin:12% 4% 7% 4%;padding:4% 5.8% 4%;display:flex;flex-direction:column;min-width:0;position:relative;background:linear-gradient(90deg,#f5e0c0f4 0%,#fff0d7f8 12%,#fff0d9f6 83%,#f4dcbaf0 100%);border-radius:12px 16px 14px 9px;box-shadow:inset 14px 0 24px -16px #69452b, inset -10px 0 20px -17px #674128}
.page-date{text-align:center}.page-date input{width:100%;max-width:340px;border:0;background:transparent;color:#654530;font:clamp(26px,2.7vw,40px) var(--script);text-align:center}.rule{border-bottom:1px solid #a47b5760;text-align:center;color:#a67b5b;line-height:0;margin:14px 0 22px}.rule:first-letter{background:#f9e8ce;padding:0 16px}.tools{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;font-size:clamp(15px,1.1vw,19px);padding:4px 0 14px;border-bottom:1px solid #b8927050}.tools select,.tools button:not(.ink){background:#fff3e0;border:1px solid #d3b49b;border-radius:8px;padding:4px 7px;color:#614331}.tools select{max-width:150px}.ink-label{margin-left:6px}.inks{display:flex;gap:6px}.ink{width:25px;height:25px;border-radius:50%;background:var(--ink);border:2px solid #f7e8d2;box-shadow:0 0 0 1px #a98c74}.ink.active{box-shadow:0 0 0 3px #916f51}.entry-title{width:100%;border:0;background:transparent;margin:24px 0 6px;font-size:clamp(26px,2.8vw,38px);font-style:italic;color:#72523e}.entry-title::placeholder{color:#a27f64}#entry-body{display:block;flex:1;min-height:360px;width:100%;resize:vertical;border:0;background:transparent;padding:10px 2px;color:var(--ink);font:var(--write-size)/1.48 var(--script)}#entry-body::placeholder{color:#9a7256}#photo-preview img{max-width:200px;max-height:150px;object-fit:contain;border:5px solid #fff2df;box-shadow:0 3px 8px #664a3877}.page-footer{border-top:1px solid #b38b6b77;padding:14px 0 10px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.extras{display:flex;gap:6px;flex-wrap:wrap}.extras button,.photo-control{background:transparent;color:#6c4b3b;padding:6px 3px;font-size:clamp(14px,1.12vw,18px);cursor:pointer}.extras button:hover,.photo-control:hover{background:#e7c2b2}.save,.gate button{background:#ac7775;color:#fff9ed;padding:10px 16px;border-radius:8px;box-shadow:0 3px 6px #55342640}.save:hover,.gate button:hover{background:#915d5b}#save-status{font-size:15px;font-style:italic;color:#805e4a}.page-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.turn-page{display:inline-block;font:clamp(23px,2.6vw,37px) var(--script);color:#7e5343;padding:7px 0}.turn-page:hover{text-decoration:underline}.delete{background:transparent;color:#8c5149;text-decoration:underline;font-size:15px}
/* Page turn is silent by design. Respect reduced-motion preference. */
.page-turn-leaf{position:absolute;z-index:10;inset:0;pointer-events:none;opacity:0;transform-origin:left center;background:linear-gradient(95deg,#e2b996,#fff1d8 23%,#f4d7b6 85%,#c69b78);box-shadow:10px 6px 20px #44281577;border-radius:10px 22px 22px 9px;backface-visibility:visible}.page.is-turning .page-turn-leaf{animation:fj-page-flip .9s ease-in forwards}@keyframes fj-page-flip{0%{opacity:0;transform:perspective(1200px) rotateY(0deg)}5%{opacity:1}80%{opacity:1}100%{opacity:0;transform:perspective(1200px) rotateY(-165deg)}}
/* Login, settings, and setup stay fully functional and inherit the garden palette. */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:25px;background:#a98770 url('garden-journal-desk.jpg') center/cover}.book-cover,.gate-paper{width:min(440px,100%);min-height:510px;padding:45px 34px;box-shadow:0 12px 30px #3c241a7a}.book-cover{background:linear-gradient(120deg,#a76d4c,#6f432d);border:10px double #d4a676;color:#fff0d3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.book-cover h1{font-size:52px;font-weight:400;line-height:1.05}.book-cover p{letter-spacing:.12em}.ornament,.keyhole{font-size:52px}.gate-paper{background:#faecd5;border:1px solid #c7a483;display:flex;flex-direction:column;justify-content:center;gap:10px}.gate-paper h2{font-size:35px;font-weight:400;margin:0}.gate-paper p{margin:0 0 10px}.gate-paper label{display:block;font-size:19px}.gate-paper input{width:100%;display:block;padding:9px 12px;border:1px solid #bca078;background:#fff8e9;border-radius:4px;font-family:Georgia,serif;font-size:16px}.gate-paper small{font-size:15px}.lock{text-align:center;font-size:45px}.error{background:#f1cebe;padding:10px;color:#782d20}.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;padding:20px;z-index:20}.modal[hidden]{display:none}.modal-content{position:relative;width:min(500px,100%);padding:30px;background:#f9ead4;border-radius:14px;box-shadow:0 12px 50px #0008}.modal-close{position:absolute;right:12px;top:8px;font-size:32px;background:none;color:#6b4327}
@media(max-width:1100px){.journal-layout{padding:0 2% 0 4%;grid-template-columns:16% 27% 57%}.side{padding:10% 3% 5%}.archive{padding:7% 4%}.page{padding:4% 4%}.side-poem{font-size:16px}.entry-link{gap:5px}.entry-mini{width:38px;height:42px}.page-footer{gap:4px}}
@media(max-width:760px){body{background:#e5d0b1}.masthead{display:flex;padding:18px 15px;background:#f2dfc5;color:#624331;justify-content:center}.masthead h1{font-size:32px;font-weight:400;margin:0}.masthead p{font-size:12px;letter-spacing:.12em;margin:0}.mast-quote{display:none}.journal-layout{display:flex;flex-direction:column;min-height:0;padding:8px;background:#e4caa5 url('garden-journal-desk.jpg') center top/cover}.side,.archive,.page{margin:5px;padding:18px;background:#faecd6f7;border-radius:13px;box-shadow:0 3px 8px #53352233}.side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:3px}.side-title{width:100%;font-size:26px;margin:0 0 5px}.side a,.logout{width:auto;font-size:16px;padding:8px}.side-poem{display:none}.archive{max-height:280px}.archive h2{font-size:28px}.entry-list{max-height:160px}.entry-link strong{font-size:25px}.page{min-height:680px}.page-date input{font-size:30px}.tools{font-size:16px}#entry-body{min-height:360px}.page-footer{justify-content:space-between}.gate{flex-direction:column}.book-cover,.gate-paper{min-height:0}.book-cover{padding:25px}.book-cover h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.page.is-turning .page-turn-leaf{animation:none}}