:root { color-scheme: dark; --ink:#140a13; --ivory:#f8eadb; --copper:#ff7d40; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--ivory); font-family:Georgia,"Times New Roman",serif; }
main { width:100%; }
.composition { width:100%; max-width:1600px; margin-inline:auto; position:relative; isolation:isolate; }
.composition--desktop { display:block; }
.composition--tablet, .composition--mobile { display:none; }
.composition__art { display:block; width:100%; height:auto; }
.skip-link { position:absolute; z-index:1000; top:-100px; left:8px; padding:10px; background:#fff; color:#111; }
.skip-link:focus { top:8px; }
.sr-only { position:absolute!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; border:0!important; }
.no-js { padding:18px; text-align:center; }
@media (min-width:1601px) { body { background:#100810; } }
@media (min-width:601px) and (max-width:1100px) {
 .composition--desktop { display:none; }
 .composition--tablet { display:block; }
}
@media (max-width:600px) {
 .composition--desktop, .composition--tablet { display:none; }
 .composition--mobile { display:block; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }



/* PHASE 1: a real player placed only over the picture window after activation.
   No change whatsoever to the approved raster images in the resting state.
   The 16:9 video is contained within the wider architectural glass opening. */
.real-player[hidden], .real-player video[hidden], .real-player iframe[hidden], .real-player__welcome[hidden],
.real-player__actions button[hidden] { display:none !important; }
.real-player {
  position:absolute; z-index:30; display:flex; flex-direction:column;
  overflow:hidden; background:#120a16; color:#f8ecdf;
  border:1px solid rgba(249,149,90,.8); box-shadow:inset 0 0 0 2px rgba(0,0,0,.5);
  font:500 clamp(11px,1.1vw,15px)/1.35 "Trebuchet MS",Arial,sans-serif;
}
.real-player__head {
  height:clamp(28px,3.5vw,37px); flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:2px 9px 2px 14px;
  background:#130b16; border-bottom:1px solid #70455a;
}
.real-player__state {font-weight:750;font-size:.78em;letter-spacing:.17em;color:#f9c9b0;}
.real-player__close { color:#fff; background:transparent; border:0; cursor:pointer;
  min-width:30px; min-height:26px; font:25px/1 "Trebuchet MS",Arial,sans-serif; border-radius:3px; }
.real-player__close:focus-visible, .real-player button:focus-visible { outline:2px solid #f8a859;outline-offset:2px; }
.real-player__close:hover {background:#42242d;}
.real-player__body {flex:1; min-height:0; display:flex; justify-content:center; align-items:center; background:#110812;}
.real-player__screen { height:100%; max-width:100%; aspect-ratio:16 / 9; margin:auto;
  display:flex; align-items:center; justify-content:center; background:#08070d; overflow:hidden; }
.real-player__screen video {height:100%;width:100%;object-fit:contain;display:block;background:#050508;}
.real-player__screen iframe {height:100%;width:100%;border:0;display:block;background:#050508;}
.real-player__welcome { padding:clamp(6px,1.5vw,20px);width:100%;text-align:center;max-height:100%;overflow:auto;}
.real-player__welcome strong {font-size:clamp(12px,1.7vw,22px);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;display:block;}
.real-player__welcome p {font-size:clamp(9px,1vw,13px);color:#d3c3c9;margin:7px auto 10px;max-width:28rem;}
.real-player__actions {display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.real-player__actions button {cursor:pointer;color:#fff2e4;background:#7d3944;border:1px solid #e78770;
 border-radius:999px;padding:7px 11px;font:600 clamp(10px,.9vw,13px) "Trebuchet MS",sans-serif;}
.real-player__actions button:hover {background:#ae4853;}
@media(max-width:600px) {
 .real-player__head {height:25px;padding:0 5px 0 9px;}
 .real-player__welcome {padding:2px 5px;}
 .real-player__welcome strong{font-size:11px;}
 .real-player__welcome p{font-size:9px;margin:3px auto 5px;}
 .real-player__actions button{font-size:9px;padding:4px 8px;}
}

/* STEP 2 — EXACT TOP MENU SEPARATION. No changes to any other component.
   Original header pixels are losslessly cropped. Native HTML buttons provide
   focus, labels, and actions; no new glyphs or colours replace the approved art. */
.composition__header { width:100%; position:relative; z-index:2; line-height:0; }
.composition__header-art { display:block; width:100%; height:auto; }
.composition__menu { position:absolute; inset:0; pointer-events:none; }
.menu-control { position:absolute; display:flex; align-items:center; justify-content:center;
  border:0; outline:0; background:transparent; padding:0; margin:0; cursor:pointer;
  color:transparent; text-shadow:none; font-size:0; pointer-events:auto; touch-action:manipulation; }
.menu-control:focus-visible { outline:2px solid #ffd087; outline-offset:-2px;
  border-radius:2px; background:rgba(255,190,91,.10); }
@media (hover:hover) { .menu-control:hover:not(:focus-visible) { background:rgba(255,190,91,.055); } }