:root { color-scheme: light; font-family: 'Times New Roman', Times, serif; color: #171713; background: white; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: #75472c; }
button:focus-visible, a:focus-visible { outline: 1px dashed #6d543d; outline-offset: 6px; }
button { border-radius: 0; }
svg { display: block; width: 100%; height: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.site-header { position: relative; z-index: 10; height: 85px; display: flex; align-items: center; justify-content: flex-end; padding: 0 42px; background: white; }
.page-nav { display: flex; gap: 28px; font-size: 15px; }
.page-nav a { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.page-nav a[aria-current="page"] { text-decoration: none; }
.home { min-height: calc(100svh - 85px); display: flex; flex-direction: column; justify-content: center; }
.room-scene { position: relative; width: min(1080px, 88vw); aspect-ratio: 1.95; margin: auto; isolation: isolate; user-select: none; -webkit-user-select: none; }
.room-scene img, .room-scene image { -webkit-user-drag: none; }
.chest { position: absolute; width: 29.5%; height: 73%; left: 3%; bottom: 0; }
.chest-scene { overflow: visible; }
#vaseButton { cursor: pointer; }
#vaseButton[aria-disabled="true"] { cursor: default; }
#vaseButton:focus { outline: none; }
#vaseButton:focus-visible #vaseObject { filter: brightness(1.12); }
.object-button { position: relative; padding: 0; border: 0; background: transparent; }
.object-hit { position: absolute; padding: 0; border: 0; background: transparent; }
.room-scene button, .room-scene button:focus-visible, .room-scene button:hover { outline: none; box-shadow: none; }
.drawer-open-state { display: none; }
.chest:has(.drawer-hit:focus-visible) .drawer-open-state { display: block; }
.drawer-hit { top: 52.3%; left: 4.7%; width: 91%; height: 17%; }
.framed-work { position: absolute; left: 35%; top: 5%; width: 17%; }
.framed-work button { width: 100%; aspect-ratio: 316 / 274; display: block; }
.frame { position: absolute; inset: 0; }
.painting-image { position: absolute; left: 5.2%; top: 8%; width: 89.6%; height: 84%; }
.painting-caption { text-align: center; font-size: 13px; line-height: 1.45; margin-top: 14px; }
.painting-caption span, .painting-caption i { display: block; }
.guest-book { position: absolute; width: 11%; height: 22%; left: 58%; top: 45%; }
.book-closed, .book-open { pointer-events: none; }
.book-open { display: none; position: absolute; width: 145%; max-width: none; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(41deg); transform-origin: center; }
.guest-book:focus-visible .book-open { display: block; }
.guest-book:focus-visible .book-closed { visibility: hidden; }
@media (hover: hover) {
  .guest-book:hover .book-open { display: block; }
  .guest-book:hover .book-closed { visibility: hidden; }
  .chest:has(.drawer-hit:hover) .drawer-open-state { display: block; }
}
.lamp:has(.lamp-hit:focus-visible) { filter: brightness(1.08); }
.framed-work button:focus-visible { filter: brightness(1.08); }
.lamp { position: absolute; width: 24%; height: 101%; right: 0; bottom: 0; }
.lamp-hit { top: 5%; left: 3%; width: 67%; height: 19%; border-radius: 40% 40% 0 0; }
.lamp-on, .lamp-off { position: absolute; inset: 0; }
.room-links { position: absolute; left: 78%; top: 37%; display: grid; gap: 21px; font-size: clamp(16px, 1.8vw, 23px); }
.room-links a { display: flex; align-items: center; min-width: 44px; min-height: 32px; }
.room-footer { padding: 32px 42px 25px; display: flex; justify-content: space-between; font-size: 12px; color: #736d64; }
.living { position: fixed; inset: 85px 0 0; background: white; }
.wall-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.wall-viewport.is-dragging { cursor: grabbing; }
.wall-canvas { position: absolute; left: 0; top: 0; width: 2600px; height: 1750px; transform-origin: 0 0; }
.sofa { position: absolute; left: 780px; top: 1100px; width: 1040px; height: 394px; pointer-events: none; }
.wall-piece { position: absolute; padding: 0; border: 0; background: white; transform: rotate(var(--angle)); }
.wall-piece img { display: block; width: 100%; height: auto; pointer-events: none; }
.wall-piece.is-framed::after { content: ''; position: absolute; inset: -8px; border: 2px solid #171713; pointer-events: none; }
.wall-piece:hover, .wall-piece:focus-visible { outline: 1px solid #a59d8f; z-index: 2; }
.living-caption { position: absolute; bottom: 22px; left: 32px; max-width: calc(100% - 220px); font-size: 13px; margin: 0; background: white; padding: 5px; pointer-events: none; }
.wall-controls { position: absolute; bottom: 20px; right: 28px; display: flex; gap: 6px; }
.wall-controls button { min-width: 35px; min-height: 35px; background: white; border: 0; font-size: 17px; }
.wall-controls button:nth-child(2) { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.poetry { max-width: 710px; margin: 45px auto 90px; padding: 0 40px; }
.poetry-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 100px; }
.poetry-header h1 { font-weight: normal; font-size: 30px; margin: 0; }
.poetry-header span { font-size: 14px; }
.poem { margin: 0 0 100px; }
.poem h2 { font-size: 24px; font-weight: normal; margin: 0 0 20px; }
.poem time { display: block; font-size: 12px; color: #736d64; margin-bottom: 20px; }
#guestIntro, .undecided p { white-space: pre-wrap; }
#guestNotes { margin-top: 25px; font-style: italic; }
.poem-body { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; overflow-wrap: anywhere; }
.poem-body p { white-space: pre-wrap; margin: 0; min-height: 1.6em; }
.poem-body h2, .poem-body h3 { white-space: pre-wrap; font-weight: normal; line-height: 1.25; margin: 1.3em 0 .45em; }
.poem-body h2 { font-size: 1.35em; }
.poem-body h3 { font-size: 1.12em; }
.poem-body h2:first-child, .poem-body h3:first-child { margin-top: 0; }
.poem button { padding: 0; border: 0; border-bottom: 1px solid #aaa399; background: white; font-size: 12px; color: #726d64; }
.poem-end { display: block; width: 32px; height: 1px; margin-top: 28px; background: #aaa399; }
.back-room { font-size: 14px; }
.undecided { min-height: calc(100svh - 85px); display: flex; align-items: center; flex-direction: column; justify-content: center; padding-bottom: 100px; }
.undecided h1 { font-weight: normal; font-size: 26px; margin: 0 0 32px; }
.undecided p { font-size: 16px; margin-bottom: 80px; }
.undecided a { font-size: 13px; }
.guest-page { padding: 22px 42px 70px; }
.open-book { max-width: 1100px; min-height: 690px; margin: 20px auto; padding: 95px 65px 100px; display: grid; grid-template-columns: 1fr 1fr; background: url('assets/notebook-open.png') center / 100% 100% no-repeat; }
.vertical-book-art { display: none; }
.book-page { padding: 30px clamp(16px, 3vw, 40px); min-width: 0; }
.book-page h1 { font-size: 25px; font-weight: normal; margin: 0 0 45px; }
.mobile-guest-title { display: none; }
.book-page p { line-height: 1.7; font-size: 16px; margin-bottom: 28px; }
.book-page a { font-size: 16px; }
.book-page form { display: grid; gap: 13px; }
.book-page label { font-size: 15px; }
.book-page label span { color: #7b756b; }
.book-page input, .book-page textarea { width: 100%; border: 0; border-bottom: 1px solid #a49a85; border-radius: 0; background: transparent; padding: 8px 0; font-size: 16px; resize: vertical; }
.book-page form button { justify-self: start; background: transparent; border: 0; padding: 9px 0; text-decoration: underline; }
.book-page .local-note { font-size: 12px; color: #756c5b; line-height: 1.4; margin: 0; }
.guest-note { border-top: 1px solid #ded8cd; padding-top: 20px; margin-top: 30px; }
.guest-note p { white-space: pre-wrap; overflow-wrap: anywhere; }
.guest-note small { color: #746b5a; }
.reader { position: fixed; inset: 0; z-index: 30; background: white; display: grid; grid-template-rows: 65px minmax(0,1fr) 45px; }
.reader-toolbar, .reader-footer { display: flex; justify-content: space-between; align-items: center; padding: 0 30px; font-size: 13px; }
.reader button { padding: 10px; border: 0; background: white; min-width: 44px; min-height: 44px; }
.reader-toolbar span { text-align: center; }
.reader-actions { display: flex; align-items: center; gap: 4px; }
.reader-actions button { text-decoration: underline; text-underline-offset: 3px; }
.reader-scroll { overflow: auto; text-align: center; padding: 8px 22px 20px; }
.reader-postcard { --postcard-ratio: .8; display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; }
.reader-postcard.is-flippable:focus-visible { outline: none; }
.reader-postcard.is-flippable .postcard-front, .reader-postcard.is-flippable .postcard-back { cursor: pointer; }
.reader-postcard.is-flippable:focus-visible .postcard-front, .reader-postcard.is-flippable:focus-visible .postcard-back { outline: 1px dashed #6d543d; outline-offset: 4px; }
.postcard-front, .postcard-back { width: min(100%, calc((100dvh - 148px) * var(--postcard-ratio))); aspect-ratio: var(--postcard-ratio); }
.postcard-front { border: 1px solid #dedbd3; background: #fffef9; }
.postcard-front img { display: block; width: 100%; height: 100%; object-fit: contain; margin: 0 auto; }
.postcard-back { border: 1px solid #cbc7bd; background: #fffef9; }
.postcard-back > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.postcard-back-paper { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; padding: clamp(28px, 5vw, 54px); color: #37342e; }
.postcard-message { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 4px clamp(18px, 3vw, 34px) 4px 0; border-right: 1px solid #b8b4aa; text-align: left; }
.postcard-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: clamp(15px, 2.1vw, 20px); line-height: 1.45; }
.postcard-message time { font-size: 13px; }
.postcard-address { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(16px, 3vw, 26px); padding: 0 0 8px clamp(18px, 3vw, 34px); }
.postcard-address i { display: block; border-bottom: 1px solid #b8b4aa; }
.postcard-stamp { position: absolute; top: 0; right: 0; width: clamp(38px, 6vw, 58px); aspect-ratio: 5 / 6; border: 1px solid #b8b4aa; }
.reader-scroll.is-close .reader-postcard { display: block; width: max-content; height: auto; margin: 0 auto; }
.reader-scroll.is-close .postcard-front { width: max(900px, 90vw); max-width: none; }
.reader-painting { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0 auto; }
.reader-scroll.is-close:has(.reader-painting:not([hidden])) { overflow: hidden; }
.reader-scroll.is-close .reader-painting { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
body.reading { overflow: hidden; }
@media (min-width: 1500px) { .room-scene { width: min(1250px, 83vw); } }
@media (max-width: 700px) {
  .site-header { height: 65px; padding: 0 14px; align-items: center; }
  .page-nav { gap: clamp(8px, 3vw, 14px); font-size: 13px; }
  .home { min-height: calc(100svh - 65px); }
  .room-scene { width: 100%; aspect-ratio: .88; margin: auto 0; }
  .chest { left: 2%; width: 47%; height: 61%; bottom: 3%; }
  .framed-work { left: 29%; top: 5%; width: 28%; }
  .guest-book { left: 49%; top: 47%; width: 16%; height: 17%; }
  .lamp { right: 2%; width: 31%; height: 77%; bottom: 3%; }
  .room-links { left: 67%; top: 46%; gap: 21px; font-size: 17px; }
  .painting-caption { font-size: 11px; margin-top: 7px; }
  .room-footer { padding: 25px 20px; }
  .living { top: 65px; }
  .living-caption { left: 16px; bottom: 22px; max-width: 57%; font-size: 11px; line-height: 1.4; }
  .wall-controls { right: 14px; }
  .poetry { margin-top: 40px; padding: 0 26px; }
  .poetry-header { margin-bottom: 70px; }
  .poem { margin-bottom: 80px; }
  .guest-page { padding: 15px 0 40px; }
  .open-book { position: relative; isolation: isolate; max-width: 440px; min-height: 0; margin: 5px auto 0; padding: 70px clamp(58px, 18vw, 78px) 75px; display: block; background: none; }
  .vertical-book-art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .book-page { position: relative; width: 100%; padding: 0; }
  .guest-intro-page { min-height: 310px; }
  .guest-note-page { min-height: 385px; padding-top: 82px; }
  .mobile-guest-title { display: none; }
  .book-page h1 { margin: 0 0 32px; font-size: 22px; }
  .book-page p { font-size: 15px; line-height: 1.55; }
  .book-page textarea { min-height: 150px; }
  .reader-toolbar, .reader-footer { padding: 0 10px; }
  .reader-toolbar { font-size: 12px; }
  .reader-toolbar > span:not(.reader-actions) { display: none; }
  .reader-scroll { padding: 4px 12px 16px; }
  .postcard-back-paper { padding: 35px 24px 24px; }
  .postcard-message { padding-right: 18px; }
  .postcard-address { padding-left: 18px; gap: 16px; }
}