.foyer-passages { position:absolute; z-index:80; inset:0; overflow:hidden; padding:clamp(1rem,2.4vw,2.5rem); color:#eee6d9; background:linear-gradient(180deg,#0203049c 0%,transparent 24%,#0102035c 62%,#010203de 100%); }
.foyer-passages[hidden] { display:none; }
.foyer-passages header { position:relative; z-index:3; width:min(31rem,44vw); padding:.8rem 1rem; border-left:1px solid #b89a62; background:linear-gradient(90deg,#050709e8,#05070970 78%,transparent); }
.foyer-passages header p,.foyer-door small { margin:0; text-transform:uppercase; letter-spacing:.18em; color:#d7bd82; font-size:.65rem; }
.foyer-passages h2 { margin:.25rem 0; font:400 clamp(1.55rem,2.5vw,2.35rem)/1.1 Georgia,serif; }
.foyer-passages header span { display:block; max-width:29rem; font-size:.78rem; line-height:1.45; }
#foyer-albums { position:absolute; z-index:2; left:3vw; right:3vw; top:25%; bottom:16%; overflow-x:auto; overflow-y:hidden; scrollbar-color:#9e8148 #07090b; scrollbar-width:thin; }
.foyer-level { min-width:100%; height:100%; display:flex; align-items:flex-end; }
.foyer-level__doors { width:100%; height:100%; display:grid; grid-template-columns:repeat(6,minmax(8.5rem,1fr)); align-items:end; gap:clamp(.65rem,1.5vw,1.6rem); }
.foyer-door { position:relative; isolation:isolate; height:min(58vh,32rem); min-height:19rem; display:flex; flex-direction:column; justify-content:flex-end; padding:1.2rem .8rem 1rem; overflow:hidden; border:1px solid #876f4659; border-bottom-color:#c7a9689c; border-radius:48% 48% 2px 2px/22% 22% 2px 2px; color:inherit; text-align:center; text-decoration:none; background:linear-gradient(90deg,#0b0c0e 0%,#17130f 48%,#07090b 100%); box-shadow:inset 0 0 0 .35rem #030405,inset 0 0 0 .42rem #aa8a5050,0 1rem 2.5rem #000c; transform:perspective(900px) rotateY(calc((var(--door-index) - 2.5) * .6deg)); }
.foyer-door::before { content:""; position:absolute; z-index:1; inset:8% 10% 25%; border:1px solid #a98b5352; border-radius:50% 50% 0 0/20% 20% 0 0; background:radial-gradient(circle at 50% 8%,#81623426,transparent 30%),repeating-linear-gradient(90deg,transparent 0 27%,#aa8a501c 28% 29%,transparent 30% 50%); pointer-events:none; }
.foyer-door__architecture { position:absolute; z-index:0; inset:0; background:linear-gradient(120deg,transparent 42%,#d1ab5e12 50%,transparent 57%); transition:background .5s ease; }
.foyer-door__artwork { position:absolute; inset:8% 10% 25%; width:80%; height:67%; object-fit:cover; object-position:center; border-radius:45% 45% 0 0/18% 18% 0 0; opacity:.7; filter:saturate(.72) brightness(.66) contrast(1.08); mix-blend-mode:screen; transition:opacity .5s ease,filter .5s ease; }
.foyer-door.has-artwork::after { content:""; position:absolute; z-index:1; inset:8% 10% 25%; border-radius:45% 45% 0 0/18% 18% 0 0; background:linear-gradient(180deg,transparent 45%,#050505e8 100%); pointer-events:none; }
.foyer-door small,.foyer-door strong,.foyer-door>span:last-child { position:relative; z-index:2; padding-inline:.2rem; text-shadow:0 2px 6px #000; }
.foyer-door strong { display:block; margin:.45rem 0; font:400 clamp(1rem,1.55vw,1.45rem)/1.15 Georgia,serif; }
.foyer-door>span:last-child { color:#ddcead; font-size:.7rem; }
.foyer-door:hover,.foyer-door:focus-visible { border-color:#d4b875; box-shadow:inset 0 0 0 .35rem #030405,inset 0 0 0 .42rem #d1ad665f,0 0 2rem #8b632a4a,0 1rem 2.5rem #000c; }
.foyer-door:hover .foyer-door__architecture,.foyer-door:focus-visible .foyer-door__architecture { background:linear-gradient(120deg,transparent 34%,#ebc87938 50%,transparent 65%); }
.foyer-door:hover .foyer-door__artwork,.foyer-door:focus-visible .foyer-door__artwork { opacity:.86; filter:saturate(.82) brightness(.76) contrast(1.08); }
.foyer-directory { position:absolute; z-index:4; top:1rem; right:1.5rem; max-width:45%; display:flex; justify-content:flex-end; gap:.4rem .9rem; flex-wrap:wrap; }
.foyer-directory a,.foyer-directory button { min-height:44px; padding:.65rem .35rem; border:0; color:#e0d1b3; background:transparent; font:inherit; font-size:.7rem; text-decoration:underline; cursor:pointer; }
.foyer-disclosure { position:absolute; z-index:5; left:2.5rem; right:10.5rem; bottom:.7rem; display:grid; grid-template-columns:auto minmax(15rem,1fr) auto; align-items:center; gap:.9rem; min-height:3.6rem; padding:.65rem 1rem; border-top:1px solid #9f824e66; color:#ddd2c0; background:#050709ee; font-size:.7rem; line-height:1.4; }
.foyer-disclosure strong { color:#d9bd7b; text-transform:uppercase; letter-spacing:.14em; white-space:nowrap; }
.foyer-disclosure a { color:#ead8ae; white-space:nowrap; }
.foyer-passages :focus-visible { outline:2px solid #f4ddaa; outline-offset:4px; }
@media(max-width:900px) { .foyer-passages header { width:min(26rem,62vw); } .foyer-directory { top:auto; bottom:4.7rem; max-width:92%; left:1rem; right:1rem; justify-content:center; } #foyer-albums { top:20%; bottom:22%; overflow-x:auto; } .foyer-level { min-width:max(100%,56rem); } .foyer-level__doors { grid-template-columns:repeat(6,minmax(8rem,1fr)); } .foyer-door { height:min(51vh,27rem); } }
@media(max-width:600px) { .foyer-passages { padding:.8rem; } .foyer-passages header { width:85%; } .foyer-passages header span { font-size:.7rem; } #foyer-albums { left:.8rem; right:.8rem; top:18%; bottom:27%; } .foyer-level { min-width:max(100%,52rem); } .foyer-door { min-height:17rem; } .foyer-directory { bottom:5.7rem; } .foyer-directory a,.foyer-directory button { font-size:.65rem; padding:.45rem .25rem; } .foyer-disclosure { left:.8rem; right:.8rem; bottom:.45rem; grid-template-columns:1fr auto; gap:.25rem .7rem; padding:.5rem .65rem; font-size:.62rem; } .foyer-disclosure span { grid-column:1/-1; grid-row:2; display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; } }
@media(prefers-reduced-motion:reduce) { .foyer-door,.foyer-door__architecture { transition:none; transform:none; } }
@media(prefers-reduced-transparency:reduce) { .foyer-passages,.foyer-passages header,.foyer-disclosure { background:#07090b; } }
@media(forced-colors:active) { .foyer-door,.foyer-directory a,.foyer-directory button,.foyer-disclosure { background:Canvas; color:LinkText; border:1px solid LinkText; } }