/* hammam.css v7b (BRIEF-V7B section 2.3), prefix hm-. The room in code: one full-bleed stage, 100svh on desktop and 70svh on
   phones. Layers, bottom to top: the dark ground (the house recipe, light.css), the second chamber (far), the room, the light
   shafts (a soft and a sharp copy), the picture (only when the still exists), the CSS steam (the fallback), the WebGL fog,
   the Marble mount (hidden), the near arch, a scrim for the words, the words in the lower third.
   Every plane is the same 1600 x 1000 drawing (slice), scaled from the vanishing point at 50% 54%: story.js moves them with the
   scroll under lx-live (the camera walks in); without it the room stands still and complete. */
.hm{position:relative;background-color:var(--umber-2);color:var(--off);overflow:clip;isolation:isolate}
.hm-stage{position:relative;height:100svh;min-height:600px;overflow:hidden;isolation:isolate}
.hm-ground{position:absolute;inset:0;z-index:0;background:var(--ground-dark)}
.hm-plane{position:absolute;inset:0;transform-origin:50% 54%;pointer-events:none}
.hm-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.hm-far{z-index:1}
.hm-room{z-index:2}
.hm-shafts{z-index:3;mix-blend-mode:screen}
.hm-near{z-index:7}
/* the moving planes are composited once and moved as layers */
html.lx-live .hm-plane{will-change:transform}
/* the room's details */
.hm-star{fill:#fff3dc}
.hm-rib{fill:none;stroke:#1b110a;stroke-opacity:.5;stroke-width:14;stroke-linejoin:round}
.hm-rib-lit{fill:none;stroke:#f2c99a;stroke-opacity:.16;stroke-width:4;stroke-linejoin:round}
.hm-cornice{fill:none;stroke:#f2c99a;stroke-opacity:.2;stroke-width:3}
.hm-door-edge{stroke:#ffd9a6;stroke-opacity:.28;stroke-width:3}
.hm-near-rim{stroke:#e9b783;stroke-opacity:.32;stroke-width:5}
/* the two near arches: the wide one for landscape screens, the narrow one for upright ones */
.hm-near-svg.tall{display:none}
@media (max-aspect-ratio:1/1){.hm-near-svg.wide{display:none}.hm-near-svg.tall{display:block}}
/* the shafts: the soft copy shows in the still state, the sharp one comes in with the scroll */
.hm-shafts-svg.sharp{opacity:.35}
html.lx-live .hm-shafts-svg.sharp{opacity:0}
/* the picture: covers the stage above the room, pushes in on scroll (story.js), a scrim keeps the words readable */
.hm-pic{position:absolute;inset:0;z-index:4;overflow:hidden}
.hm-pic img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%;transform-origin:50% 50%;will-change:transform}
/* the CSS steam (the fallback when WebGL is missing): soft off-white blobs moving at two rates (story.js) */
.hm-steam{position:absolute;z-index:5;inset:-20% 0 0;pointer-events:none}
html.lx-live .hm-steam{will-change:transform}
.hm-steam i{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(251,247,238,var(--o,.16)),rgba(251,247,238,0))}
.hm-steam-a i:nth-child(1){--o:.17;left:-14%;bottom:-6%;width:62%;aspect-ratio:1.9}
.hm-steam-a i:nth-child(2){--o:.13;left:40%;bottom:-12%;width:58%;aspect-ratio:1.7}
.hm-steam-a i:nth-child(3){--o:.1;left:8%;bottom:30%;width:46%;aspect-ratio:2.1}
.hm-steam-a i:nth-child(4){--o:.08;right:-10%;bottom:40%;width:44%;aspect-ratio:1.8}
.hm-steam-b i:nth-child(1){--o:.14;left:22%;bottom:-16%;width:40%;aspect-ratio:1.5}
.hm-steam-b i:nth-child(2){--o:.12;right:4%;bottom:2%;width:34%;aspect-ratio:1.4}
.hm-steam-b i:nth-child(3){--o:.09;left:56%;bottom:36%;width:28%;aspect-ratio:1.6}
/* the fog: hammam-room.js draws it and marks the stage; the CSS steam then steps aside */
.hm-fog{position:absolute;inset:0;z-index:6;width:100%;height:100%;display:block;pointer-events:none;opacity:0}
.hm-fog-on .hm-fog{opacity:1}
.hm-fog-on .hm-steam{display:none}
/* the Marble world mounts here later, above the room; hidden until the architect wires it */
.hm .world{position:absolute;inset:0;z-index:4}
.hm .world[hidden]{display:none}
/* the scrim: the floor darkens under the words */
.hm-scrim{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:8;pointer-events:none;background:linear-gradient(180deg,rgba(22,14,9,0) 0,rgba(22,14,9,.5) 52%,rgba(22,14,9,.82) 100%)}
/* the words, in the lower third */
.hm-words{position:absolute;z-index:9;left:0;right:0;bottom:clamp(44px,10svh,104px)}
.hm-label{color:rgba(251,247,238,.82)}
.hm-title{margin-top:12px;max-width:15ch;color:var(--off);text-shadow:0 2px 24px rgba(22,14,9,.6)}
.hm-line{margin-top:16px;font-size:19px;line-height:1.5;max-width:46ch;color:rgba(251,247,238,.92)}
.hm-call{margin-top:26px}
.hm-call:focus-visible{outline:2px solid var(--off);outline-offset:3px}
.hm .chap-num{z-index:10}
@media (max-width:760px){
  .hm-stage{height:70svh;min-height:520px}
  .hm-words{bottom:clamp(28px,6svh,56px)}
  .hm-line{font-size:17px}
  .hm-call{margin-top:20px;min-height:48px}
  .hm-scrim{height:64%}
}
@media (min-width:761px) and (max-height:700px){.hm-stage{min-height:0}}

/* v7b: under lx-live from 761 px the section grows by 1.5 screens (story.js) and the stage holds with sticky while the camera walks in */
.hm.hm-hold .hm-stage{position:sticky;top:0}