/* V3.4 photo journal and garden cinema. Artwork contains no baked controls. */
.room.hammock,.room.cine{inset:36px max(16px,calc((100vw - 1220px)/2)) 142px;box-sizing:border-box;isolation:isolate}
.room.hammock>.st-shade,.room.cine>.st-shade{position:fixed;inset:0;background:#091c16c9;z-index:-1;opacity:1;backdrop-filter:blur(3px)}
.room.hammock .st-head,.room.cine .st-head{position:absolute;inset:0 0 auto;display:grid;grid-template-columns:1fr auto;gap:10px;min-height:0;padding:0 0 14px;background:none;border:0;box-sizing:border-box}
.room.hammock .st-sign,.room.cine .st-sign{grid-column:1;width:auto;height:auto;min-height:0;justify-self:start;background:none;box-shadow:none;border:0;transform:none;padding:0;animation:none}
.room.hammock .st-sign h2,.room.cine .st-sign h2{font:italic 700 29px Georgia,serif;color:#fff4d9;margin:0}
.room.hammock .st-pills,.room.cine .st-pills{grid-row:2;grid-column:1/-1;display:flex;position:static;min-height:40px;gap:8px;overflow-x:auto;padding:0;scrollbar-width:none;max-width:100%}
.room.hammock .pill,.room.cine .pill{white-space:nowrap;font:13px Georgia,serif;border:1px solid #b6a4776b;color:#f8edcf;background:#213e31;padding:8px 18px;min-height:36px}
.room.hammock .pill[aria-pressed=true],.room.cine .pill[aria-pressed=true]{color:#2e422b;background:#f5e6b6;border-color:#e9ce8f}
.room.hammock .st-close,.room.cine .st-close{position:absolute;right:0;top:0;width:38px;height:38px;min-height:38px;background:#f9edcc;color:#28442f;border:1px solid #b69a63;box-shadow:2px 3px #0005}
.room.hammock .room-body,.room.cine .room-body{position:absolute;top:106px;left:0;right:0;bottom:0;width:auto;transform:none;min-width:0;box-sizing:border-box}
.room.hammock .room-body:before,.room.cine .room-body:before{display:none}
.room.hammock .room-body{display:flex;justify-content:flex-start;gap:12px;overflow:auto;padding:0 6px 12px;scrollbar-width:thin}
.album-intro{display:flex;justify-content:space-between;align-items:center;color:#fff1d1;gap:14px;padding:0 16px;flex:none}
.album-intro small{font:10px system-ui;letter-spacing:.14em;color:#cbbb8f}.album-intro h3{font:italic 22px Georgia,serif;margin:5px 0 0}.album-intro>span{font:12px Georgia,serif;white-space:nowrap}
.room.hammock .album.book{background:#f4e8ca url('./art-v34/ui/album-book.webp') center/100% 100% no-repeat;border:0;border-radius:8px;padding:12px;box-shadow:0 6px 0 #76522d,0 10px 20px #0004;width:100%;box-sizing:border-box;flex:none;overflow:hidden}
.room.hammock .book .leaf,.room.hammock .book.one .leaf{background:transparent;box-shadow:none;padding:40px 32px;gap:14px;justify-content:center;box-sizing:border-box;min-width:0}
.room.hammock .book.one .leaf{padding:38px 28px}
.room.hammock .book:not(.one):after{display:none}
.room.hammock .book .mosaic-row{gap:14px}
.room.hammock .book .photo{box-sizing:border-box;border:0;border-image:none;filter:none;background:#fffcf2;box-shadow:0 1px 2px #4e331c55,2px 4px 8px #65452c26;padding:4px 4px 22px;transform:rotate(var(--r));position:relative;max-width:100%;flex-shrink:1}
.room.hammock .book .photo:hover,.room.hammock .book .photo:focus-visible{transform:rotate(0) translateY(-2px);scale:1;outline:2px solid #a77935}
.room.hammock .book .photo:before,.room.hammock .book .photo:after{width:11px;height:11px;background:#ad8b58;opacity:.8}
.room.hammock .book .photo img{max-width:100%;object-fit:contain}
.room.hammock .book .photo small{font:italic 11px Georgia,serif;color:#6a6045;bottom:5px}
.room.hammock .book .folio{bottom:20px;font:italic 12px Georgia,serif;color:#7c6947}
.room.hammock .book .leaf.l .folio{left:45%}.room.hammock .book .leaf.r .folio{right:45%}
.room.hammock .pager{flex:none;margin:0;gap:16px;background:#f8edcf;border:1px solid #b5a06f;border-radius:24px;padding:3px 12px;font:13px Georgia,serif}
.room.hammock .pager .logbtn{border:0;background:none;box-shadow:none;min-width:38px;min-height:38px;color:#3f5537}
.album-empty{font:italic 18px Georgia,serif;color:#897151;text-align:center;padding:40px 0}
.room.hammock .lightbox{position:fixed;inset:0;z-index:50;background:#071c15f2}.room.hammock .lightbox .polaroid{background:#fff9e9;border:0;box-shadow:0 8px 40px #0006;padding:12px 12px 42px}.room.hammock .lightbox figcaption{font:italic 15px Georgia,serif;color:#4f5b3b}.room.hammock .lightbox figcaption span{float:right;font-size:12px}
/* Screen occupies the illustration's empty cloth; all controls remain live HTML. */
.room.cine .room-body{display:grid;grid-template-columns:minmax(0,1fr) 285px;grid-template-rows:minmax(0,1fr) auto;gap:12px 20px;align-content:start;overflow:hidden;pointer-events:auto}
.projection{position:relative;grid-column:1;grid-row:1;aspect-ratio:3/2;width:100%;max-height:100%;align-self:center;justify-self:center;background:url('./art-v34/ui/cinema-frame.webp') center/100% 100% no-repeat;border-radius:7px;overflow:hidden}
.room.cine .projection .screen{position:absolute;inset:10% 11% 31%;width:auto;height:auto;max-height:none;aspect-ratio:auto;display:grid;place-items:center;border:0;box-shadow:none;background:#0d1716;animation:none;overflow:hidden}
.room.cine .screen:before,.room.cine .screen:after{display:none}
.film-start{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;background:radial-gradient(ellipse at center,#354d3e,#11271e);color:#fff2d0;border:0;cursor:pointer;box-sizing:border-box}
.film-start>span{border:1px solid #dcc78c;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;font-size:18px;padding-left:3px;transition:transform .2s}.film-start:hover>span{transform:scale(1.1)}
.film-start small{font:9px system-ui;letter-spacing:.16em;color:#c2b690}.film-start b{font:italic 700 clamp(17px,2vw,27px)/1.25 Georgia,serif}.film-start em{font:12px Georgia,serif}
.room.cine .now-film{grid-column:1;grid-row:2;width:auto;max-height:150px;margin:0;padding:0 16px 8px;color:#f6eccf;background:none;border:0;box-shadow:none;overflow:auto;scrollbar-width:thin;font:13px/1.5 Georgia,serif;box-sizing:border-box}
.film-kicker{font:9px system-ui;letter-spacing:.14em;color:#c8b687}.now-film h3{font:italic 700 23px/1.2 Georgia,serif;margin:5px 0;color:#fff0ca}.now-film .film-meta{font:12px Georgia,serif;color:#d5ceb4;margin:5px 0 8px}.film-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.room.cine .theater-open{float:none;margin:0;border:1px solid #a18a59;background:#efe2b9;color:#284530;padding:8px 14px;border-radius:4px;font:12px Georgia,serif;cursor:pointer}
.room.cine .film-external{margin:0;color:#e6d5a6;font:12px Georgia,serif;text-underline-offset:3px}.now-film details{margin-top:8px;color:#d5ccb1}.now-film summary{cursor:pointer;font-size:11px}.now-film details p{font-size:12px;line-height:1.6}
.ticket-shelf{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;min-height:0;background:#fff4da;border:1px solid #af9364;border-radius:6px;overflow:hidden;box-shadow:3px 5px #0003}
.ticket-shelf>header{padding:16px 16px 12px;color:#334b30;border-bottom:1px solid #b4a07860}.ticket-shelf>header b{font:italic 700 22px Georgia,serif}.ticket-shelf>header small{display:block;font:11px Georgia,serif;color:#7b7152;margin-top:5px}
.room.cine .tickets{display:flex;flex-direction:column;grid-column:auto;grid-row:auto;gap:10px;overflow:auto;width:auto;min-height:0;padding:12px;scrollbar-width:thin}
.room.cine .ticket{display:grid;grid-template-columns:56px minmax(0,1fr) 12px;gap:10px;align-items:center;flex:none;width:100%;min-height:98px;padding:10px 8px;border:1px solid #c7b78d;border-left:3px solid #bfa979;border-radius:3px;background:#f6ebce;box-shadow:1px 3px #9c7a3826;transform:none;translate:none;text-align:left;position:relative;color:#3a4b31;cursor:pointer;box-sizing:border-box}
.room.cine .ticket.on{background:#dce4c4;border-color:#60784c;border-left-width:5px}.room.cine .ticket:hover{background:#fff9e7;translate:0 -1px}.room.cine .ticket>img,.ticket-reel{width:56px;height:56px;object-fit:cover;border-radius:2px}.ticket-reel{display:grid;place-items:center;background:#e6d8b6}.ticket-reel img{width:44px;height:42px;object-fit:contain}
.ticket-copy{display:flex;flex-direction:column;min-width:0;padding-left:8px;border-left:1px dashed #b8a475}.room.cine .ticket b{font:700 13px/1.35 Georgia,serif;margin:6px 0;white-space:normal}.room.cine .ticket small{font:9px system-ui;color:#7e7054;letter-spacing:.03em;margin:0}.ticket-copy em{font:10px/1.35 Georgia,serif;color:#81745a}.ticket-play{font-size:10px;color:#566c3f}
.film-offsite{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;text-align:center;padding:18px;color:#f5e4b8}.film-offsite small{font:9px system-ui;letter-spacing:.1em}.film-offsite b{font:italic 22px Georgia,serif}.film-offsite a{font:14px Georgia,serif;color:#f5e4b8}
.room.cine.theater-mode{inset:0;background:#07120e;z-index:60}.room.cine.theater-mode .room-body.cine{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;pointer-events:auto}
.room.cine.theater-mode .projection{position:relative;width:min(100vw,150dvh);height:auto;aspect-ratio:3/2;max-height:none;grid-row:auto;grid-column:auto;align-self:center}
.room.cine.theater-mode .projection .screen{position:absolute;inset:10% 11% 31%;width:auto;height:auto;mask-image:none;-webkit-mask-image:none;pointer-events:auto}
.room.cine.theater-mode .ticket-shelf,.room.cine.theater-mode .now-film{display:none}.room.cine .theater-exit{border:1px solid #b1a078;background:#fff4d9;color:#2d492f;padding:12px 16px;border-radius:5px;z-index:65;font:13px Georgia,serif;cursor:pointer}
@media(max-width:760px){
 .room.hammock,.room.cine{top:24px;left:8px;right:8px;bottom:calc(142px + env(safe-area-inset-bottom))}
 .room.hammock .st-head,.room.cine .st-head{padding:0 6px 12px;gap:10px}.room.hammock .st-sign h2,.room.cine .st-sign h2{font-size:25px}.room.hammock .st-close,.room.cine .st-close{right:6px}
 .room.hammock .st-pills,.room.cine .st-pills{padding-top:2px}.room.hammock .pill,.room.cine .pill{font-size:12px;padding:8px 13px;flex:none}
 .room.hammock .room-body,.room.cine .room-body{top:96px}
 .album-intro{padding:0 10px;gap:8px}.album-intro small{font-size:8px}.album-intro h3{font-size:17px}.album-intro>span{font-size:10px}
 .room.hammock .album.book.one{background-size:200% 100%;background-position:left center;padding:9px;min-height:0;height:auto}.room.hammock .book.one .leaf{padding:38px 28px}.room.hammock .book .photo small{font-size:10px}.room.hammock .pager{font-size:12px;gap:12px}
 .room.cine .room-body{display:flex;flex-direction:column;overflow:auto;gap:12px;padding:0 2px 16px;scrollbar-width:thin}.projection{flex:none;width:100%;max-height:none;aspect-ratio:3/2}.film-start{gap:7px;padding:12px}.film-start>span{width:32px;height:32px;font-size:13px}.film-start small{font-size:7px}.film-start b{font-size:18px}.film-start em{font-size:10px}
 .room.cine .now-film{flex:none;max-height:none;overflow:visible;padding:0 12px 8px}.now-film h3{font-size:21px}.ticket-shelf{flex:none;min-height:0;margin:0 8px}.ticket-shelf>header{padding:12px}.ticket-shelf>header b{font-size:21px}.room.cine .tickets{max-height:360px}.room.cine .ticket{min-height:88px}.room.cine .ticket b{font-size:13px}
 .room.cine.theater-mode .room-body.cine{display:grid;padding:0}.room.cine.theater-mode .projection{width:100vw}.room.cine.theater-mode .projection .screen{inset:10% 5% 22%;background:#000}.room.cine.theater-mode .projection{background-size:114% 114%;background-position:center 10%}.room.cine .theater-exit{top:16px;left:12px}
}
@media(prefers-reduced-motion:reduce){.film-start>span,.room.hammock .book .photo,.room.cine .ticket{transition:none}}

body.in-room:not(.chill) .menu{display:block;z-index:26}
body.in-room:not(.chill) #menu-pets{z-index:27}

.room.cine .projection .screen{justify-self:stretch;align-self:stretch}
.room.cine .now-film{justify-self:stretch;align-self:start}
@media(min-width:761px){.room.cine:not(.theater-mode) .projection{height:100%;width:auto;max-width:100%;aspect-ratio:3/2;max-height:100%;min-height:0}}
.room.cine.theater-mode .room-body.cine{grid-template-columns:1fr;grid-template-rows:1fr}
.room.cine.theater-mode .st-head{display:none}