.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.house-stop { position:absolute; left:23.5%; top:66.2%; width:11%; height:10%; min-width:44px; min-height:44px; transform:translate(-50%,-50%); border:0; background:transparent; cursor:pointer; z-index:2; }
.house-stop span { position:absolute; left:50%; top:100%; transform:translate(-50%,-12%); background:#fcf0c6df; border:1px solid #fff4d3; border-radius:4px; padding:4px 7px; font-size:10px; white-space:nowrap; color:#2d5143; }
.house-stop:hover span,.house-stop:focus-visible span { background:#fff4c7; box-shadow:0 2px 8px #254e3f44; }
body:has(#home-screen[open]) { overflow:hidden; }
.home-screen { max-width:none; max-height:none; width:100%; height:100dvh; margin:0; padding:0; border:0; color:#294b40; background:radial-gradient(ellipse at 50% 44%,#eee9d2 0,transparent 63%),#f6f3e8; overflow-y:auto; }
.home-screen::backdrop { background:#274d41; }
.home-wrap { max-width:800px; margin:auto; padding:20px 26px 32px; }
.home-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.home-bar button { color:#3a5c4e; padding:12px 0; border:0; background:none; font-size:12px; cursor:pointer; min-height:44px; }
.home-bar > span { font:9px monospace; letter-spacing:1px; color:#78856d; }
.home-intro { text-align:center; margin:30px 0 -24px; }
.home-intro .eyebrow { color:#a37343; font-size:9px; }
.home-intro h1 { font-size:52px; letter-spacing:-2px; margin:12px 0; }
#home-title:focus { outline:none; }
.home-intro > p:last-child { font-size:14px; color:#73806c; line-height:1.6; }
.room-scene { position:relative; width:100%; max-width:620px; aspect-ratio:1; margin:auto; }
.room-scene > img { display:block; width:100%; height:100%; }
.room-object { position:absolute; transform:translate(-50%,-50%); border:0; background:transparent; padding:0; color:#355043; cursor:pointer; min-width:48px; min-height:48px; }
.room-object > span { display:grid; place-items:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:23px; height:23px; border:1px solid #fffbdf; border-radius:50%; background:#fff5dbed; font:20px/1 Georgia,serif; box-shadow:0 2px 5px #243e3b33; transition:transform .2s,background .2s; }
.room-object:hover > span,.room-object:focus-visible > span { background:#fff9e6; transform:translate(-50%,-50%) scale(1.14); }
.room-tv { left:69%; top:44%; width:29%; height:20%; }
.room-book { left:46%; top:67%; width:20%; height:15%; }
.room-ball { left:64%; top:76%; width:10%; height:9%; }
.room-ball > span { width:16px; height:16px; font-size:15px; left:68%; top:30%; }
.room-door { left:17.5%; top:60%; width:9%; height:20%; }
.room-scene .room-character { width:9%; height:auto; aspect-ratio:64/88; transform:translate(-50%,-100%); filter:none; z-index:1; }
.room-character::before { content:''; position:absolute; width:95%; height:14%; left:48%; bottom:-3%; background:#463e3038; border-radius:50%; transform:rotate(22deg); }
.room-character svg { position:relative; display:block; overflow:visible; }
.room-scene .room-object { z-index:2; }
.house-panel { box-sizing:border-box; width:calc(100% - 32px); max-width:620px; max-height:calc(100dvh - 40px); margin:auto; padding:34px; border:1px solid #d4d4b9; border-radius:14px; background:#fff9ea; color:#2e4c40; box-shadow:0 24px 80px #133c3a40; overflow-y:auto; }
.house-panel::backdrop { background:#1d383cb5; backdrop-filter:blur(5px); }
.house-panel h2 { font-size:31px; margin:12px 35px 16px 0; line-height:1.14; }
.house-panel .eyebrow { font-size:9px; color:#a07346; }
.panel-close { position:absolute; right:12px; top:10px; width:44px; height:44px; background:none; border:0; font-size:26px; cursor:pointer; color:#47604a; }
.video-screen { aspect-ratio:16/9; display:grid; place-items:center; background:#244d48; border:7px solid #37564a; border-radius:9px; overflow:hidden; color:#fff1c3; font-size:13px; text-align:center; }
.video-screen iframe { border:0; width:100%; height:100%; }
.video-poster { width:100%; height:100%; position:relative; border:0; padding:0; background:#244d48; cursor:pointer; }
.video-poster img { width:100%; height:100%; object-fit:cover; opacity:.82; display:block; }
.video-poster span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#faf0cd; padding:12px 18px; border-radius:5px; color:#2b5145; font-size:13px; white-space:nowrap; }
#video-status { font-size:12px; color:#77816a; line-height:1.6; }
.room-link { display:inline-flex; align-items:center; min-height:44px; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.book-intro { font-size:14px; line-height:1.7; color:#738069; margin-bottom:24px; }
#guestbook-form { display:grid; gap:9px; }
#guestbook-form > label { font-size:12px; font-weight:600; }
#guestbook-form > input,#guestbook-form textarea { box-sizing:border-box; width:100%; border:1px solid #c6ceb3; border-radius:5px; padding:12px; font:16px 'DM Sans',sans-serif; background:#fffdf6; color:#304b3f; }
#guestbook-form textarea { resize:vertical; min-height:100px; }
#guestbook-form > label[for="guest-message"] { margin-top:8px; display:flex; justify-content:space-between; }
#message-count { font-size:10px; color:#889279; font-weight:400; }
#guestbook-form .public-consent { display:flex; gap:9px; font-size:12px; font-weight:400; line-height:1.55; align-items:start; margin-top:7px; cursor:pointer; }
.public-consent input { width:18px; height:18px; margin:0; accent-color:#3f7055; flex-shrink:0; }
.book-privacy { font-size:11px; color:#7a856d; line-height:1.6; margin:0 0 9px; }
.book-submit { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:13px 18px; background:#345b47; color:#fff5d4; border:0; border-radius:5px; font-size:14px; cursor:pointer; }
.book-submit:disabled { opacity:.5; cursor:wait; }
.book-feedback { font-size:12px; line-height:1.6; min-height:18px; margin:4px 0; color:#496c51; }
.book-feedback[data-error="true"] { color:#a84936; }
.guestbook-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
#entries-list { list-style:none; margin:0; padding:0; }
.entry-meta { display:flex; flex-direction:column; align-items:start; gap:7px; font-size:16px; }
.entry-meta time { font-size:10px; color:#889076; white-space:nowrap; }
.entry-meta strong { font-weight:600; overflow-wrap:anywhere; }
.entry-message { white-space:pre-wrap; overflow-wrap:anywhere; font:19px/1.7 Georgia,serif; margin:25px 0; }
#entries-status,.book-moderation { font-size:12px; line-height:1.6; color:#7a846d; }
.book-moderation { font-size:10px; margin:20px 0 0; }
.book-moderation a { text-decoration:underline; text-underline-offset:3px; }
.guestbook-panel { max-width:880px; padding:12px; border:1px solid #6b8365; border-radius:9px 14px 14px 9px; background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px),#365948; box-shadow:0 7px 0 #203d33,0 10px 0 #c1b59a,0 14px 0 #294638,12px 30px 70px #102b3955; }
.guestbook-panel > .panel-close { z-index:2; right:14px; top:14px; }
.book-spread { display:grid; grid-template-columns:.8fr 1fr; background:#f9f0d9; border-radius:3px 8px 8px 3px; }
.book-frontispiece { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:52px 24px; background:linear-gradient(90deg,#efe6ce,#fff5dd 85%,#b6a68580); border-right:1px solid #b9ac8d; }
.book-frontispiece .eyebrow { letter-spacing:2px; font-size:8px; }
.book-emblem { display:grid; place-items:center; width:64px; height:78px; border:1px solid #a99a68; border-radius:50% 50% 4px 4px; margin:42px 0 12px; color:#6a7956; font:22px Georgia,serif; }
.book-frontispiece h2 { margin:12px 0; font:italic 36px/1.1 Georgia,serif; letter-spacing:-1px; }
.book-frontispiece > p:not(.eyebrow) { font:15px/1.8 Georgia,serif; color:#7b8061; }
.book-edition { margin-top:55px; font:8px monospace; letter-spacing:1px; color:#8a805e; }
.book-paper { padding:34px 30px 24px; min-width:0; background:linear-gradient(90deg,#bbae8a44,transparent 8%),repeating-linear-gradient(0deg,#c8b77905 0 1px,transparent 1px 4px); }
#book-reader { min-height:400px; display:flex; flex-direction:column; }
#book-reader[hidden],#book-writing[hidden] { display:none; }
.book-running-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-right:22px; border-bottom:1px solid #cdbf9c; color:#8b805e; font:8px monospace; letter-spacing:1.5px; }
.book-running-head button,.book-pagination button { width:44px; height:44px; flex-shrink:0; background:none; border:0; color:#456451; font-size:22px; cursor:pointer; }
.book-pagination { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #cdbf9c; margin-top:auto; padding-top:8px; }
.book-pagination button:disabled { opacity:.25; cursor:default; }
#book-page-number { font:9px monospace; letter-spacing:2px; color:#8b805e; }
#entries-list { padding:18px 0; transform-origin:left center; }
#entries-status:empty { display:none; }
.book-write,.book-back { min-height:44px; border:0; background:none; color:#3d624d; cursor:pointer; font:12px 'DM Sans',sans-serif; }
.book-write { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #cdbf9c55; }
.book-back { padding:0; }
.book-writing-title { font:italic 26px Georgia,serif; margin:16px 0 24px; }
.guestbook-panel .book-moderation { border-top:1px solid #cdbf9c55; padding-top:12px; }
@media(max-width:700px) {
  .home-wrap { padding:14px 12px max(24px,env(safe-area-inset-bottom)); }
  .home-bar > span { font-size:8px; letter-spacing:.4px; }
  .home-bar button { font-size:11px; }
  .home-intro { margin:22px 0 -8px; }
  .home-intro h1 { font-size:39px; }
  .home-intro > p:last-child { font-size:12px; }
  .room-scene { width:calc(100% + 24px); margin-left:-12px; }
  .house-panel { padding:28px 20px 24px; max-height:calc(100dvh - 24px); width:calc(100% - 20px); }
  .house-panel h2 { font-size:28px; }
  .house-stop span { font-size:8px; padding:3px 5px; }
  .guestbook-panel { padding:8px 8px 8px 14px; width:calc(100% - 24px); max-height:calc(100dvh - 48px); }
  .book-spread { grid-template-columns:1fr; }
  .book-frontispiece { align-items:start; padding:23px 24px 18px; border-right:0; border-bottom:1px solid #cdbf9c; background:linear-gradient(90deg,#bbae8a44,transparent 8%); text-align:left; }
  .book-frontispiece h2 { font-size:31px; margin:8px 0 0; }
  .book-emblem,.book-frontispiece > p:not(.eyebrow),.book-edition { display:none; }
  .book-frontispiece .eyebrow { font-size:7px; letter-spacing:1px; }
  .book-paper { padding:12px 24px 20px; }
  #book-reader { min-height:340px; }
  .entry-message { font-size:18px; }
  .book-running-head { margin-right:0; }
}
@media(prefers-reduced-motion:reduce) { .room-object > span { transition:none; } }

/* One fixed spread: instructions on the left, a continuous message list on the right. */
.book-spread { grid-template-columns:1fr 1.15fr; }
.book-frontispiece { align-items:stretch; justify-content:flex-start; padding:48px 28px 24px; }
.book-frontispiece h2 { font-style:normal; font-size:34px; margin:12px 0 28px; }
#book-instructions { display:flex; flex-direction:column; flex:1; text-align:left; }
#book-instructions > p { font:18px/1.65 Georgia,serif; }
#book-instructions .book-rules { font:12px/1.6 'DM Sans',sans-serif; color:#78816b; }
#book-instructions > .book-moderation { font:10px/1.6 'DM Sans',sans-serif; margin:12px 0 18px; }
#book-instructions .book-write { margin-top:auto; justify-content:center; padding:12px; background:#365948; color:#fff4d7; border-radius:4px; }
.book-frontispiece > .book-moderation:not(.eyebrow) { display:block; text-align:left; font:9px/1.6 'DM Sans',sans-serif; }
.book-paper { display:flex; padding:38px 24px 20px; }
#book-reader { min-height:0; width:100%; height:min(530px,65dvh); }
#entries-scroll { overflow-y:auto; flex:1; min-height:0; overscroll-behavior:contain; scrollbar-color:#a5ae8c #ede5cb; scrollbar-width:thin; padding-right:10px; }
#entries-list { padding:0; }
#entries-list li { padding:22px 0; border-bottom:1px solid #cdbf9c80; }
.entry-message { font:16px/1.7 Georgia,serif; margin:12px 0 0; }
.entry-meta { font-size:13px; }
#more-entries { min-height:44px; width:100%; background:none; border:0; color:#456451; cursor:pointer; }
#book-writing { text-align:left; }
@media(max-width:700px) {
  .book-spread { grid-template-columns:1fr; }
  .book-frontispiece { padding:24px 22px 16px; }
  .book-frontispiece h2 { font-size:30px; margin:6px 20px 14px 0; }
  #book-instructions > p { font-size:16px; margin:0 0 12px; }
  #book-instructions .book-write { margin-top:8px; }
  .book-paper { padding:10px 22px 18px; }
  #book-reader { height:310px; }
  .book-frontispiece .book-moderation { margin-top:12px; }
}