html, body { max-width: 100%; overflow-x: hidden; }
.no-scroll { overflow: hidden; }

/* ============ Base ============ */
:root{
  --bg:#0f1416;           /* dark charcoal */
  --bg-soft:#121a1d;
  --text:#f6f7f8;
  --muted:#c9d1d9;
  --brand:#18a6ad;        /* turquoise */
  --accent:#e6b27a;       /* sand beige */
  --card:#0f171a;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Fira Sans",Helvetica,Arial;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:focus{outline:3px solid var(--accent);outline-offset:2px}
.container{max-width:1100px;margin:auto;padding:24px}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid #1f2a2d;border-radius:18px;box-shadow:var(--shadow);padding:20px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 18px;border:0;background:
    linear-gradient(90deg,var(--brand),var(--accent));color:#041014;font-weight:700;cursor:pointer}
.btn:focus{outline:3px solid #fff}
.btn.secondary{background:#1b262a;color:var(--text);border:1px solid #2a383c}
h1,h2,h3{line-height:1.2;margin:0 0 10px}
h1{font-size:clamp(28px,5vw,48px)}
h2{font-size:clamp(22px,3.5vw,32px)}
h3{font-size:clamp(18px,2.5vw,24px)}
.muted{color:var(--muted)}
/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#fff;color:#000;padding:8px 12px;border-radius:6px}
/* ============ Header / Nav ============ */
.site-header{position:sticky;top:0;z-index:9999; isolation: isolate; background:rgba(15,20,22,.9);backdrop-filter:blur(8px);border-bottom:1px solid #1f2a2d}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:50px;height:50px}
.brand .name{font-family:Georgia,serif;font-weight:700;letter-spacing:.5px}
.menu{display:flex;gap:14px;align-items:center}
.menu a{padding:10px 12px;border-radius:10px}
.menu a[aria-current="page"]{background:#182125}
.burger{display:none;background:#1b262a;border:1px solid #2a383c;border-radius:10px;padding:10px}
/* Mobile */
@media (max-width: 900px){
  .slider{ min-height: 48vh; }  /* mobile */
}
@media (max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .burger{display:inline-flex; position: relative; z-index: 10002; } 
  .menu a{font-size:18px}
  
}
@media (max-width:900px){
  .menu{
    position: fixed;
    top: 64px;            /* below header */
    right: 0;
    left: auto;
    bottom: 0;
    background: #0f1518;
    padding: 20px;
    border-left: 1px solid #1f2a2d;
    z-index: 10001;  
    transform: translateX(100%);   /* fully off-screen, no overflow */
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
    min-width: 70vw;
    height: auto;         /* bottom:0 gives full height */
    overflow: auto;
    will-change: transform;
  }
  .menu.open{ transform: translateX(0); }

  .backdrop{
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45);
    display: none;
     z-index: 10000;
  }
  .backdrop.show{ display: block; }
  .no-scroll { overflow: hidden; }
}

/* ============ Hero Slider ============ */
.slider{position:relative;border-radius:20px;overflow:hidden;border:1px solid #223036 ; min-height: 64vh; } 
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slide.active{opacity:1}
.slide img{width:100%;height:64vh;object-fit:cover}
.slider .controls{position:absolute;inset:auto 0 14px 0;display:flex;justify-content:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:#ffffff55;border:1px solid #fff}
.dot.active{background:#fff}
.slider button.prev,.slider button.next{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);border:0;padding:12px;border-radius:999px;color:#fff
}
.slider button.prev{left:12px}.slider button.next{right:12px}
/* ============ Sections ============ */
.hero{padding:24px 0 0}
.features{margin-top:24px}
.feature{display:flex;gap:10px;align-items:flex-start}
.feature .dot{width:12px;height:12px}
/* Gallery grid */
/*.gallery{columns:1;column-gap:16px}
@media(min-width:600px){.gallery{columns:2}}
@media(min-width:900px){.gallery{columns:3}}
.gallery figure{break-inside:avoid;margin:0 0 16px;background:#0f171a;border:1px solid #1f2a2d;border-radius:14px;overflow:hidden}
.gallery figcaption{padding:10px;color:var(--muted);font-size:14px}*/

/* Gallery grid – keep DOM order */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.gallery figure {
  margin: 0;
  background: #0f171a;
  border: 1px solid #1f2a2d;
  border-radius: 14px;
  overflow: hidden;
}

.gallery figcaption {
  padding: 10px;
  color: var(--muted);
  font-size: 14px;
}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.show{display:flex}
.lightbox img{max-width:90vw;max-height:80vh;border-radius:12px}
/* Forms */
form label{display:block;margin:12px 0 6px}
input,textarea,select{width:100%;padding:12px;border-radius:12px;border:1px solid #2a383c;background:#0f171a;color:var(--text)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--brand)}
.form-row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(max-width:700px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:14px;color:var(--muted)}
.alert{padding:12px;border-radius:10px;margin-top:12px;background:#12322f;color:#bde4dd;border:1px solid #2a5e58}
footer{margin-top:40px;border-top:1px solid #1f2a2d;background:#0d1113}
footer .inner{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:20px}
.small{font-size:13px;color:#94a1a8}

/* ----- Lightbox slider with thumbnails ----- */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:none; align-items:center; justify-content:center; gap:16px;
  padding:16px; z-index:1000;
}
.lightbox.show{ display:flex; }

.lb-main{ position:relative; max-width:78vw; max-height:86vh; display:flex; flex-direction:column; gap:8px }
.lb-main img{ max-width:78vw; max-height:78vh; border-radius:12px; display:block }
.lb-caption{ color:#ddd; font-size:14px }
.lb-counter{ color:#aaa; font-size:12px }

.lb-prev, .lb-next, .lb-close{
  position:absolute; top:12px; background:rgba(255,255,255,.12);
  border:0; color:#fff; width:50px; height:50px; font-size: 28px; border-radius:999px; cursor:pointer;
}
.lb-prev{ left:12px; top:50%; transform:translateY(-50%); }
.lb-next{ right:12px; top:50%; transform:translateY(-50%); }
.lb-close{ right:12px; top:12px; }

.lb-prev:hover, .lb-next:hover, .lb-close:hover {
  background: rgba(255, 255, 255, .3);
}
.lb-thumbs{
  display:flex; flex-direction:column; gap:8px; max-height:86vh; overflow:auto;
  padding-left:8px;
}
.lb-thumbs button{
  border:0; background:transparent; padding:0; cursor:pointer; opacity:.65;
  outline-offset:4px;
}
.lb-thumbs button[aria-current="true"]{ opacity:1 }
.lb-thumbs img{ width:120px; height:80px; object-fit:cover; border-radius:8px }

/* Mobile: put thumbs at bottom */
@media (max-width:900px){
  .lightbox{ flex-direction:column }
  .lb-main{ max-width:94vw }
  .lb-main img{ max-width:94vw; max-height:70vh }
  .lb-thumbs{ flex-direction:row; max-width:94vw; max-height:20vh }
  .lb-thumbs img{ width:88px; height:60px }
  .lb-prev{ left:8px } .lb-next{ right:8px } .lb-close{ right:8px }
}



/* --- Mobile full-screen overlay menu (override) --- */
@media (max-width:900px){
  .site-header{ z-index: 5000; } /* menu/backdrop will sit above */
  .menu{
    position: fixed;
    inset: 0;                 /* full viewport including under header */
    background: #1f2328;
    padding: clamp(24px,4vw,32px);
    z-index: 12000;
    transform: translateX(100%);
    transition: transform .32s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    min-width: 0;
    width: 100vw;
    height: 100vh;
    border-left: 0;
  }
  .menu.open{ transform: translateX(0); }
  .menu a{
    font-size: clamp(20px, 5vw, 28px);
    padding: 12px 0;
    width: 100%;
    text-align: center;
    background: transparent;
  }
  .menu .menu-close{
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid #2a383c;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 28px;
    line-height: 1;
  }
  .backdrop{
    position: fixed;
    inset: 0;                 /* cover whole screen */
    background: rgba(0,0,0,.45);
    display: none;
    z-index: 11990;
  }
  .backdrop.show{ display: block; }
}

@media (max-width: 900px) {
  .menu a:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  /* Optional: if you still want the outline when using Tab key */
  .menu a:focus-visible {
    outline: 2px solid #c47b41;
    border-radius: 8px;
  }
}

/* === Elegant Mobile Burger Button (Villa des Arts style) === */
@media (max-width: 900px) {
  .burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background-color: #233135;   /* deep teal background */
    border: 2px solid #cfa772;   /* sand-beige border */
    color: #cfa772;              /* sand-beige icon */
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 15000; /* ensure it’s always on top */
  }

  .burger:hover,
  .burger:focus-visible {
    background-color: #2f4248;
    color: #f3dcb8;
    border-color: #f3dcb8;
    transform: scale(1.05);
  }

  /* Optional: smaller "Menu" text hidden, but accessible */
  .burger .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Increase icon size slightly inside the button */
  .burger span[aria-hidden="true"] {
    font-size: 26px;
    margin-top: -2px;
  }
}

/* --- Art page & slider --- */
.art-hero{padding:0;overflow:hidden}
.carousel{position:relative;border-radius:12px;overflow:hidden}
.carousel-viewport{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.carousel-slide{position:absolute; inset:0; opacity:0; transition:opacity .5s ease; display:flex; align-items:center; justify-content:center}
.carousel-slide.is-active{opacity:1}
.carousel-slide img{width:100%;height:100%;object-fit:cover;display:block}
.carousel .caption{position:absolute;left:1rem;bottom:1rem;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);color:#fff;padding:.5rem .75rem;border-radius:.5rem;font-size:.9rem}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.25);color:#fff;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;font-size:1.25rem;cursor:pointer}
.carousel-nav:hover{background:rgba(0,0,0,.4)}
.carousel-nav:focus{outline:2px solid #ff7a1a; outline-offset:2px}
.carousel-nav.prev{left:.5rem}
.carousel-nav.next{right:.5rem}
.carousel-dots{position:absolute;bottom:.5rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem}
.carousel-dots .dot{width:8px;height:8px;border-radius:999px;border:0;background:rgba(255,255,255,.5);cursor:pointer}
.carousel-dots .dot.is-active{background:rgba(255,255,255,.95)}
/* utilities for spacing + responsive grid */
.flow>*+*{margin-top:.75rem}
.grid-2-md{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:768px){.carousel-viewport{aspect-ratio:21/9}.grid-2-md{grid-template-columns:repeat(2,1fr);gap:24px}}
.ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.02));color:#666;font-size:1rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-radius:999px;border:1px solid currentColor;text-decoration:none}
.btn.ghost{opacity:.85}
.btn:hover{transform:translateY(-1px)}
.list.no-bullets{list-style:none;padding-left:0}


/* ==== Villa des Arts — Dark Footer Theme ==== */
:root{
  --va-footer-bg: #0f1719;      /* deep charcoal (matches page) */
  --va-footer-panel: #111c1f;   /* slightly lighter than bg */
  --va-footer-border: #1f2a2e;  /* subtle top border */
  --va-footer-text: #eaf1f2;    /* main text */
  --va-footer-muted: #9aa3a7;   /* muted */
  --va-footer-accent: #18a9a2;  /* turquoise accent */
}

.site-footer{
  background: var(--va-footer-bg);
  color: var(--va-footer-text);
  border-top: 1px solid var(--va-footer-border);
}

.footer-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 20px 36px;
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 20px 28px;
  align-items: center;
}

.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-logo{ height:48px; width:auto; filter: drop-shadow(0 0 0 transparent); }
.footer-title strong{ display:block; font-size:1.05rem; }
.footer-title span{ color: var(--va-footer-muted); }

/* Tagline */
.footer-tagline{
  margin:0;
  color: var(--va-footer-muted);
  text-align:center;
  font-style: italic;
}

/* Links */
.footer-links ul{
  display:flex; justify-content:flex-end; gap:16px; margin:0; padding:0; list-style:none;
}
.footer-links a{
  color: var(--va-footer-text);
  text-decoration:none;
  font-size:.95rem;
  position:relative;
}
.footer-links a:hover,
.footer-links a:focus{
  color: var(--va-footer-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Credits */
.footer-credits{
  grid-column:1 / -1;
  margin-top:6px;
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
  color: var(--va-footer-muted);
  font-size:.92rem;
}
.footer-credits span::after{
  content:"·"; margin:0 8px; color: var(--va-footer-border);
}
.footer-credits span:last-child::after{ content:""; }

/* Soft top shadow to separate from content (optional) */
.site-footer::before{
  content:""; display:block; height:10px; margin-top:-10px;
  background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,0));
}

/* Responsive */
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-links ul{ justify-content:center; }
}
@media (max-width: 640px){
  .footer-grid{ grid-template-columns: 1fr; text-align:center; }
  .footer-brand{ justify-content:center; }
}
.footer-logo { filter: brightness(1.08) contrast(1.02); }