/* CÉLEVA Gallery: the tea shop as a page of the site. The site's header stays on top; the hall fills the rest of the screen. */
html:has(body.tea-house-page), body.tea-house-page { height: 100%; overflow: hidden; }
body.tea-house-page { margin: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #0b0a08; }
body.tea-house-page .site-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; max-width: none; width: 100%; background: #0b0a08; }
body.tea-house-page #site-main { position: relative; flex: 1; min-height: 0; background: #0b0a08; outline: 0; }
.tea-house-frame, .tea-house-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #0b0a08; }

/* The tea shop in words: always in the page for readers and crawlers; on screen it opens from a button that appears on keyboard focus. */
.tea-house-text-toggle, .tea-house-text:not(.is-open) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tea-house-text-toggle:focus-visible, .tea-house-text-toggle[aria-expanded="true"] { z-index: 3; top: 16px; right: max(16px, env(safe-area-inset-right, 0px)); width: auto; height: auto; clip: auto; clip-path: none; padding: 10px 16px; border: 0; border-radius: 22px; background: #f4ede0; color: #1f1a14; font: 600 11px/1.2 var(--ui, system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.tea-house-text-toggle:focus-visible { outline: 2px solid #c9a46a; outline-offset: 3px; }
.tea-house-text { z-index: 2; inset: 64px max(16px, env(safe-area-inset-right, 0px)) 16px auto; width: min(420px, calc(100% - 32px)); padding: 28px 28px 32px; overflow: auto; background: #f4ede0; color: #1f1a14; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); border-radius: 2px; }
.tea-house-text.is-open { position: absolute; }
.tea-house-text h1 { margin: 0 0 12px; font: 500 30px/1.1 var(--display, Georgia, serif); }
.tea-house-text h2 { margin: 22px 0 8px; font: 600 11px/1.2 var(--ui, system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: #6d5a3d; }
.tea-house-text p, .tea-house-text li { font: 400 15px/1.6 var(--text, Georgia, serif); }
.tea-house-text ul { margin: 0; padding-left: 18px; }
.tea-house-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }