/* ============================================================
   MO's ART — Master Stylesheet
   ============================================================ */

/* ------------------------------
   Root Variables
------------------------------ */
:root {
  --brand-font:'Yanone Kaffeesatz',system-ui,sans-serif;
  --brand-display:'Limelight',serif;
  --bg:#ffffff;
  --ink:#1a1a1a;
  --muted:#6e7177;
  --accent:#c8ae7d; /* warm gold */
  --accent-ink:#111;
  --charcoal:#222326; /* deeper charcoal */
  --surface:#ffffff;
  --surface-2:#f6f7f8;
  --border:#e6e6e6;
  --shadow:0 10px 30px rgba(0,0,0,.08),0 2px 10px rgba(0,0,0,.06);
}

/* ------------------------------
   Base
------------------------------ */
html { scroll-behavior:smooth; }

body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--brand-font);
  font-size:1.05rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img { display:block; max-width:100%; height:auto; object-fit:cover; }

.display-5,h1,.h1 { font-family:var(--brand-display); letter-spacing:.2px; }
h2,.h2,h3,.h3 { letter-spacing:.2px; }
.lead {
  color:var(--muted);
  font-weight:400;
  font-size:1.25rem;
  line-height:1.6;
}
.section-title { font-family:var(--brand-display); font-weight:600; letter-spacing:.3px; }

h1,.display-5 { font-size:clamp(2.2rem,3.2vw + 1rem,3.6rem); }
h2 { font-size:clamp(1.6rem,1.4vw + .9rem,2.2rem); }
h3 { font-size:clamp(1.3rem,1.1vw + .8rem,1.7rem); }

a { color:#647372; text-decoration:none; }
a:hover { color:#000; }

:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* ------------------------------
   Buttons
------------------------------ */
.btn-dark { background:var(--charcoal); border-color:var(--charcoal); }
.btn-dark:hover { background:#000; border-color:#000; }
.btn-accent { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-accent:hover { filter:brightness(.95); color:var(--accent-ink); }
.btn-outline-secondary { border-color:#cfcfcf; color:#222; }
.btn-outline-secondary:hover { background:#f3f3f3; border-color:#bbb; color:#000; }

/* ------------------------------
   Navbar
------------------------------ */
.navbar { box-shadow:0 2px 20px rgba(0,0,0,.04); }
.navbar-brand { font-family:var(--brand-display); letter-spacing:.5px; }
.navbar .nav-link { padding:.6rem .9rem; border-radius:.75rem; transition:background .2s ease; }
.navbar .nav-link:hover,
.navbar .nav-link.active { background:var(--surface-2); }

/* ------------------------------
   Hero / Layout Helpers
------------------------------ */
.hero-card { 
  background:linear-gradient(180deg,#fff,#faf9f6);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:var(--shadow);
}

.shadow-soft { box-shadow:var(--shadow); }

section { padding-block:clamp(1.5rem,1.6vw + .5rem,3rem); }

/* ------------------------------
   Gallery Grid
------------------------------ */
.gallery {
  --gap: 1rem;
}
.gallery img {
  border-radius:.8rem;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .35s ease,box-shadow .35s ease;
}
.gallery img:hover {
  transform:translateY(-3px);
  box-shadow:0 16px 28px rgba(0,0,0,.12);
}

.gallery-item {
  overflow:hidden;
  border-radius:.75rem;
}
.img-zoom {
  transition: transform .25s ease, box-shadow .25s ease;
}
.img-zoom:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}

/* For portrait or square crops */
.ratio-portrait { aspect-ratio:4/5; object-fit:cover; }
.ratio-square { aspect-ratio:1/1; object-fit:cover; }

/* ------------------------------
   Cards / Articles
------------------------------ */
.card-img-top {
  aspect-ratio: 16/9;
  object-fit: cover;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
}
.badge-pill { border-radius:10rem; }
.shadow-soft { box-shadow:var(--shadow); }

.card { border-radius: 1rem; overflow: hidden; }


/* ------------------------------
   Lightbox
------------------------------ */
.lightbox-caption {
  font-size:.95rem;
  color:var(--muted);
}
.modal-content.bg-dark {
  background:#000;
  border:none;
}

/* ------------------------------
   Footer
------------------------------ */
footer {
  background:#2a2a2a!important;
  color:#f2f2f2;
}
footer p { color:#f2f2f2; }
footer .small { color:#aaa; }

/* ------------------------------
   Utility / Misc
------------------------------ */
.text-accent { color:var(--accent); }
.bg-accent { background:var(--accent); color:var(--accent-ink); }
.border-accent { border-color:var(--accent)!important; }

.section-divider { position:relative; padding-bottom:.5rem; margin-bottom:1rem; }
.section-divider::after {
  content:\"\"; position:absolute; left:0; bottom:0;
  width:64px; height:3px;
  background:var(--accent); border-radius:3px;
}

.rounded { border-radius:1rem!important; }
.max-w-prose { max-width:70ch; }

.exhibitions { line-height:1.9; }
.exhibitions li { list-style:none; }

.contact-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:var(--shadow);
  padding:1.25rem;
}

.badge-buy { background:var(--charcoal); }

/* ------------------------------
   Disciplines / Museum-style lists
------------------------------ */
#disciplines h3 {
  font-family:var(--brand-display);
  font-size:1rem;
  letter-spacing:.05em;
  margin-bottom:.75rem;
}
#disciplines ul li { margin-bottom:.4rem; font-size:1rem; }
#disciplines a { font-size:.9rem; }

/* ------------------------------
   Accessibility / Motion Pref
------------------------------ */
@media (prefers-reduced-motion:reduce) {
  * {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ------------------------------
   Article modal — close button
------------------------------ */
#articleModal .modal-content {
  position: relative;
  overflow: visible;
}

/* Single, consolidated rule for the in-modal close button */
#articleModal .article-close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  z-index: 5;                         /* above image/iframe */
  border-radius: 50%;
  padding: .7rem;
  line-height: 1;
  backdrop-filter: blur(2px);
  transition: background-color .2s ease, transform .15s ease;

  /* Choose ONE of these background styles: */

  /* A) Brand gold halo (elegant, on-brand) */
  /* background-color: rgba(200,174,125,0.60);  // warm gold
  color: #111; */
  
  /* B) Deep charcoal halo (high contrast, gallery feel) */
  background-color: rgba(34,35,38,0.72);
  color: #fff;
}

#articleModal .article-close:hover {
  /* match your chosen style above */
  /* background-color: rgba(200,174,125,0.85); */   /* if using gold */
  background-color: rgba(34,35,38,0.90);            /* if using charcoal */
  transform: scale(1.05);
}

/* If you keep Bootstrap's white X, ensure it's visible on dark halos */
#articleModal .btn-close-white {
  filter: invert(1); /* makes the glyph appear white consistently */
}