/* THE ROOMS · see gbx-rooms.js. Ruled by Patrick 2026-10-15: the other rooms at the foot of every index, no text,
   animate, hover to colour and enlarge, click to the room. One register across the full width of the footer's
   content, evenly spaced, like the houses of a maison. The marks rest in their own colours at 0.78, present on a
   phone where there is no hover. They rise in one after another as the footer arrives, 90ms apart, the house reveal.
   The reveal cannot fail closed: the marks are hidden only once the script has armed the row. */
.gbx-rooms{grid-column:1/-1;width:100%;max-width:1212px;margin:0 auto;padding:21px 16px 55px;box-sizing:border-box;overflow-x:clip;min-width:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:21px}
.gbx-room{position:relative;display:block;width:36px;height:36px;line-height:0;text-decoration:none;outline-offset:10px}
.gbx-room-mark{width:36px;height:36px;display:block;opacity:.78;transform-origin:50% 50%;transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .4s cubic-bezier(.2,.7,.2,1),filter .4s}
.gbx-room:hover .gbx-room-mark,.gbx-room:focus-visible .gbx-room-mark{opacity:1;transform:scale(1.18);filter:drop-shadow(0 0 13px rgba(186,153,51,.35))}
.gbx-rooms-armed .gbx-room{opacity:0;transform:translateY(14px);transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .72s cubic-bezier(.22,1,.36,1)}
.gbx-rooms-armed.gbx-rooms-in .gbx-room{opacity:1;transform:none}
.gbx-rooms-armed .gbx-room:nth-child(2){transition-delay:90ms}.gbx-rooms-armed .gbx-room:nth-child(3){transition-delay:180ms}
.gbx-rooms-armed .gbx-room:nth-child(4){transition-delay:270ms}.gbx-rooms-armed .gbx-room:nth-child(5){transition-delay:360ms}
.gbx-rooms-armed .gbx-room:nth-child(6){transition-delay:450ms}
.gbx-room-card{position:absolute;left:50%;bottom:calc(100% + 16px);width:240px;aspect-ratio:1200/630;transform:translate(-50%,8px);opacity:0;pointer-events:none;background:var(--deep,#0f1419);border:.5px solid rgba(186,153,51,.5);box-shadow:0 13px 34px rgba(0,0,0,.4);transition:opacity .3s ease-out,transform .3s ease-out;z-index:5}
.gbx-room:first-child .gbx-room-card{left:0;transform:translate(0,8px)}
.gbx-room:last-child .gbx-room-card{left:auto;right:0;transform:translate(0,8px)}
.gbx-room-card img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.06) brightness(.96) sepia(.12)}
.gbx-room:hover .gbx-room-card,.gbx-room:focus-visible .gbx-room-card{opacity:1;transform:translate(-50%,0)}
.gbx-room:first-child:hover .gbx-room-card,.gbx-room:first-child:focus-visible .gbx-room-card,.gbx-room:last-child:hover .gbx-room-card,.gbx-room:last-child:focus-visible .gbx-room-card{transform:translate(0,0)}
/* The row is a <nav>. A page that styles bare nav as its fixed header (DDIF) must never move it: found on ddif.ai mobile 15 October, the marks sat over the header. */
nav.gbx-rooms.gbx-rooms{position:static;top:auto;left:auto;right:auto;bottom:auto;z-index:auto;height:auto;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;transition:none;overflow-x:clip}
@media (hover:none),(max-width:600px){.gbx-room-card{display:none}}
@media (max-width:600px){.gbx-rooms{padding:13px 16px 34px;gap:13px}.gbx-room,.gbx-room-mark{width:30px;height:30px}}
@media (prefers-reduced-motion:reduce){.gbx-rooms-armed .gbx-room{transform:none;transition:opacity .4s}.gbx-room:hover .gbx-room-mark,.gbx-room:focus-visible .gbx-room-mark{transform:none}.gbx-room-card{transition:opacity .3s}}