/* Arte d'Espace — universal responsive layer, loaded AFTER legacy page styles. */
:root { color-scheme: dark; --arte-gold: #d4af37; --arte-paper: #ededed; }
html { min-width: 0; overflow-x: clip; }
body { width: 100%; max-width: 100%; overflow-x: clip; }
.navbar {
  display:flex; align-items:center; justify-content:center;
  flex-wrap: wrap; column-gap:clamp(8px,1.4vw,24px); row-gap:10px;
  padding: clamp(14px,1.55vw,25px) 14px clamp(14px,1.55vw,25px) clamp(305px,23vw,380px);
  position:absolute; width:100%; top:0; left:0; z-index:1000;
}
.navbar .nav-link { white-space:nowrap; font-size:clamp(10px,.75vw,13px); line-height:1.5; text-shadow:0 1px 5px #000b; }
.navbar .lang-switcher {
  display:flex; position:static !important; flex: 0 0 auto;
  align-items:center; justify-content:center; gap:8px;
  margin:0 !important; padding:0 !important;
  inset:auto !important; direction:ltr;
}
.navbar .lang-link { font-size:11px; font-weight:700; color:#e4e4e4; text-decoration:none; }
.navbar .lang-link[aria-current="true"] { color:#ffd966; text-decoration:underline; text-underline-offset:4px; }
.navbar .lang-link:hover { color:#ffd966; }
.menu-toggle { display:none; }
.main-content { max-width:100%; }
img, video { max-width:100%; }
/* Responsive desktop hitboxes for the three photographic tiles on Home. */
.main-content .home-hotspot { position:absolute !important; z-index:70; display:block; background:transparent; cursor:pointer; }
.main-content .home-hotspot.btn-1 { left:.78% !important; top:57.7% !important; width:36.05% !important; height:25.9% !important; }
.main-content .home-hotspot.btn-2 { left:39.27% !important; top:57.95% !important; width:31.93% !important; height:24.82% !important; }
.main-content .home-hotspot.btn-3 { left:73.02% !important; top:57.31% !important; width:22.66% !important; height:26.76% !important; }
/* The legacy archive has no video file. Show the video only once actually ready. */
.video-block-container { visibility:hidden; pointer-events:none; }
.video-block-container.is-ready { visibility:visible; }
.mobile-links { display:none; }
/* Medium screens — use a compact menu before links collide. */
@media (max-width: 1199px) {
  .navbar {
    position:relative !important; inset:auto !important;
    display:grid !important; grid-template-columns:44px minmax(0,1fr);
    align-items:center; gap:8px; min-height:66px;
    background:rgba(8,8,10,.98) !important;
    padding:10px clamp(12px,3vw,28px) !important;
  }
  .menu-toggle {
    display:flex; grid-column:1; grid-row:1;
    width:44px; height:44px; align-items:center; justify-content:center;
    border:1px solid #a08a52; background:#131313; color:#f0e7cc;
    border-radius:6px; font-size:23px; cursor:pointer;
  }
  .navbar .lang-switcher { grid-column:2; grid-row:1; justify-content:flex-end; gap:clamp(5px,1.4vw,13px); }
  .navbar .lang-link { font-size:clamp(11px,1.7vw,13px); }
  .navbar .nav-link { display:none; grid-column:1 / -1; font-size:14px !important; padding:11px 14px; background:#161616; text-align:start; }
  .navbar.menu-open .nav-link { display:block; }
  .navbar .nav-link:focus-visible, .navbar .nav-link:hover { background:#252117; }
  .navbar .lang-divider { display:none; }
  .main-content { min-height:calc(100svh - 66px); }
  .video-block-container { max-width:100vw; }
}
@media (max-width: 1199px) {
  html { font-size:16px; }
  body {
    display:flex; flex-direction:column;
    min-height:100svh; background-color:#08090b !important;
    background-attachment:scroll !important;
    background-position:center 66px !important;
    background-size:100% auto !important;
    background-repeat:no-repeat !important;
  }
  .navbar { flex:0 0 auto; width:100%; }
  .navbar .lang-switcher { flex-wrap:wrap; }
  .navbar .lang-link { min-width:24px; min-height:32px; display:inline-flex; align-items:center; justify-content:center; }
  .main-content {
    display:block !important; position:relative !important;
    width:100% !important; min-height:56.25vw !important;
    height:auto !important; flex:0 0 auto !important;
    background-size:100% auto !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
    background-color:transparent;
  }
  /* Text-heavy desktop compositions become an image followed by legible text. */
  .main-content:has(:is(#productText, .bottom-museum-text, .tabakova-text-block, .dochev-text-block, .philosophy-container, .simple-price-container, .phoenix-text-container, .left-project-text, .right-project-text, .right-text-box, .single-contact-text)) {
    padding-top:56.25vw !important;
  }
  .main-content :is(#productText, .bottom-museum-text, .tabakova-text-block, .dochev-text-block, .philosophy-container, .simple-price-container, .phoenix-text-container, .left-project-text, .right-project-text, .right-text-box, .single-contact-text) {
    position:relative !important; inset:auto !important;
    top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    display:block !important; width:100% !important; max-width:100% !important;
    min-width:0 !important; height:auto !important;
    margin:0 !important; padding:22px 18px !important;
    box-sizing:border-box !important;
    background:rgba(7,8,11,.95) !important;
    color:#e4e4e4 !important; font-size:clamp(14px,3.7vw,17px) !important;
    line-height:1.65 !important; text-align:start !important;
    letter-spacing:normal !important; transform:none !important;
    pointer-events:auto !important;
  }
  .main-content :is(#productText, .bottom-museum-text, .tabakova-text-block, .dochev-text-block, .philosophy-container, .simple-price-container, .phoenix-text-container, .left-project-text, .right-project-text, .right-text-box, .single-contact-text) :is(p,div) {
    max-width:100%; overflow-wrap:anywhere; }
  #productText p, .philosophy-text, .tabakova-text-block p, .dochev-text-block p { font-size:inherit !important; line-height:1.7 !important; }
  #productText p { white-space:pre-line !important; }
  .philosophy-title { font-size:clamp(28px,7vw,44px) !important; line-height:1.15 !important; }
  .simple-price-container h2 { font-size:21px !important; }
  .tabakova-text-block h2, .dochev-text-block h2 { font-size:16px !important; }
  .main-content .home-hotspot, .main-content .interior-invisible-btn, .main-content .invisible-btn,
  body > .free-btn, .main-content .free-btn { display:none !important; }
  .video-block-container { position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:auto !important; aspect-ratio:1920 / 600; margin:0 !important; box-shadow:none !important; }
  .video-block-container video { object-fit:cover; }
  .mobile-links {
    display:block; padding:18px clamp(14px,4vw,24px) 28px; color:#f4eddd;
    background:#08090b; width:100%;
  }
  .mobile-links h2 { font-size:15px; font-weight:500; letter-spacing:1.2px; color:#d4af37; margin-bottom:12px; }
  .mobile-links-grid { display:grid; grid-template-columns:1fr; gap:10px; }
  .mobile-links-grid a {
    display:flex; align-items:center; justify-content:space-between; min-height:48px;
    border:1px solid #554a32; border-radius:7px; padding:13px 14px;
    background:#181715; color:#f6efdf; text-decoration:none; font-size:14px;
  }
  .mobile-links-grid a::after { content:'›'; font-size:26px; color:#d4af37; margin-inline-start:10px; }
  .nav-arrow, .page-arrow, .arrow-btn { max-width:44px; max-height:44px; font-size:22px !important; padding:8px !important; }
  .nav-arrow { top: min(30vw, 180px) !important; }
  .page-arrow { top:min(30vw,180px) !important; }
  .gallery-controls { position:fixed !important; top:37vh !important; bottom:auto !important; padding:0 10px !important; transform:translateY(-50%) !important; }
  .gallery-controls .nav-btn { width:40px !important; height:40px !important; }
  .close-btn, .page-close-btn { position:fixed !important; top:auto !important; bottom:16px !important; right:16px !important; left:auto !important; width:44px !important; height:44px !important; z-index:1100 !important; }
  [lang="ar"] .main-content :is(p,.philosophy-text,#productText,.bottom-museum-text) { direction:rtl; text-align:right !important; }
}
@media (max-width: 410px) {
  .navbar { padding:8px 10px !important; grid-template-columns:40px 1fr; }
  .menu-toggle { width:40px; height:40px; }
  .navbar .lang-switcher { gap:4px; }
  .navbar .lang-link { font-size:11px; }
}
/* Maintain the geometry of architecture/photographs when Arabic is selected. */
[lang="ar"] body { direction:ltr; }
[lang="ar"] .navbar .nav-link, [lang="ar"] .mobile-links,
[lang="ar"] .main-content :is(p,h1,h2,h3,.philosophy-text,.bottom-museum-text,#productText) { direction:rtl; text-align:right; }
[lang="ar"] .navbar .lang-switcher { direction:ltr; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; } }

/* Two-column tap targets on tablets. */
@media (min-width: 700px) and (max-width: 1199px) {
 .mobile-links-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Keep the entire circular X control clickable above the navigation layer.
   On older gallery and wallpaper pages the navigation previously intercepted
   clicks on the upper portion of this button. Do not change its geometry. */
.close-btn {
  z-index: 100000 !important;
  pointer-events: auto !important;
  touch-action: manipulation;
}