:root {
  /* Text gray scale */
  --gray-900: #111111;  /* very dark, for headings */
  --gray-700: #333333;  /* dark, for sub-headings */
  --gray-500: #555555;  /* medium, for body text */
  --gray-400: #777777;  /* light-medium, for secondary text */
  --gray-300: #aaaaaa;  /* light, for captions / metadata */
  --gray-200: #cccccc;  /* very light, for placeholders / disabled */
}


/* ---- RESET ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ---- TYPOGRAPHY ---- */
body {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.5;
  color: var(--gray-500);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--gray-900);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .5rem; }

p {
  margin-bottom: 1rem;
  color: var(--gray-500);
}

.links a,
.site-nav a {
  color: var(--gray-700);
}


footer,
.footer-wrapper {
  color: var(--gray-400);
}

/* ---- LOGO SIZING ---- */
.logo-link {
  display: block;
  margin-bottom: 0.5rem;
}

.logo {
  height: 90px;    /* adjust this value to scale your logo */
  width: auto;     /* keeps the aspect ratio */
}


/* ---- HEADER CENTERED ---- */
.site-header{
  display:flex;
  flex-direction:column;       /* stacks logo then nav */
  align-items:center;
  margin-top: 25px;
  padding-top:1rem;
}

/* ---- DROPDOWN MENU (stacked, left-aligned) ---- */
.dropdown {
  position: relative;
}
.dropdown .menu {
  display: none;           /* hide by default */
  position: absolute;
  top: 100%;               /* just under the trigger */
  left: 0;                 /* align to the left edge of the trigger */
  transform: none;
  line-height: 1.8; 
  background: #fff;
  padding: .25rem 0;
  min-width: 160px;
  z-index: 10;
  flex-direction: column;  /* vertical stack */
}
.dropdown:hover .menu {
  display: flex;           /* desktop: hover to open */
}
.dropdown.open .menu {
  display: flex;           /* mobile: JS-toggle to open/close */
}
         /* reveal on hover */

/* ---- HAMBURGER (mobile only) ---- */
.hamburger {
  display: none;            /* hidden on desktop */
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger span {
  width: 24px;
  height: 3px;
  background: var(--gray-900);
  border-radius: 2px;
}

@media (max-width: 700px) {
  .hamburger {
    display: flex;         /* show on mobile */
    margin: 1rem auto;     /* center under logo */
  }
}


/* ---- MOBILE NAV ---- */
@media (max-width: 700px) {
  .site-nav {
    display: none;                 /* hide until hamburger clicked */
    flex-direction: column;
    align-items: flex-start;       /* stack links to the left */
    padding: 1rem;
    background: #fff;
  }
  .site-header.nav-open .site-nav {
    display: flex !important;
  }
  /* Once the menu’s open, let .open class control just the submenu */
  .site-header.nav-open .dropdown .menu {
    margin-top: 1.5rem;     /* space below Galleries link */
  }
}

/* ---- SITE NAVIGATION ---- */
.site-nav {
  display: flex;                    /* horizontal by default */
  flex-direction: row;
  align-items: center;
  justify-content: center;          /* center the links under the logo */
  gap: 1rem;
  padding: 1rem 2rem;
  width: 100%;                      /* take full width so justify-content:center works */
  max-width: 800px;                 /* optional: constrain the nav width */
  margin: 0 auto;                   /* center the nav block itself */
}

/* link colors in gray scale */
.site-nav a {
  color: var(--gray-700);
  text-decoration: none;
  padding: 0.25rem 0;
}
.site-nav a:hover {
  color: var(--gray-900);
}
.site-nav a.is-active {
  color: var(--gray-900);
  border-bottom: 3px solid var(--gray-900);
}




/* ---- MAIN CONTENT ---- */
main{padding:2rem}

.grid{
  display:grid;
  gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.grid img{width:100%;height:auto;display:block}

/* Hero image on home page */
.hero {
  text-align: center;
  margin: 2rem 0;
}

.hero img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* ---- GALLERY TILE GRID ---- */
.tile-grid{
  display:grid;
  gap:1.25rem;
  margin-top:2rem;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.tile{
  position:relative; overflow:hidden; border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.15); text-decoration:none;
}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.tile span{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.4);color:#fff;font-size:1.4rem;font-weight:600;
  opacity:0;transition:opacity .3s;
}
.tile:hover img{transform:scale(1.05)}
.tile:hover span{opacity:1}

.contact-form{
  display:grid;gap:1rem;max-width:480px;margin:2rem 0
}
.contact-form label{display:grid;gap:.25rem;font-weight:600}
.contact-form input,
.contact-form textarea{
  padding:.5rem;border:1px solid #ccc;border-radius:4px;font:inherit
}
.contact-form button{
  width:max-content;padding:.5rem 1.25rem;border:none;border-radius:4px;
  background: var(--gray-400);color:#fff;cursor:pointer;font-weight:600
}
.contact-form button:hover{background: var(--gray-500)}
.alert{padding:.75rem 1rem;border-radius:4px;margin-bottom:1.25rem}
.alert.success{background:#e8f5e9;color:#2e7d32}
.alert.error  {background:#ffebee;color:#c62828}

.contact-details {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.contact-details li {
  margin-bottom: 0.5rem;
}
.bio-section {
  max-width: 72ch;
  margin: 2rem auto;
  padding: 0 1rem;
}

.section-title {
  font-size: 1.25rem;   /* a bit larger than your p (1.1rem) */
  font-weight: bold;    
  margin: 1.5rem 0 0.75rem;  /* adjust vertical spacing as needed */
}

/* ---- SIMPLE GALLERY ---- */
.simple-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 2rem 0;
}

.gallery-item a {
  display: block;
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  object-fit: cover;
  transition: transform 0.3s;
}
.gallery-item a:hover img {
  transform: scale(1.05);
}


/* ---- GALLERY HOVER EFFECT ---- */
.simple-gallery .gallery-item img {
  transition: transform 0.3s ease;
}
.simple-gallery .gallery-item img:hover {
  transform: scale(1.05);
}

/* ---- LIGHTBOX OVERLAY ---- */
.lightbox {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(255,255,255,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.lightbox.open {
  display: flex;
}

/* the image itself */
.lightbox-image {
  max-width: 90%;
  max-height: 80%;
  object-fit: contain;
}

/* close & nav buttons */
.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: none;
  border: none;
  color: #bfbfbf;
  font-size: 2.5rem;
  cursor: pointer;
  padding: .25rem .5rem;
}
.lightbox-close {
  top: 1rem; right: 1rem;
}
.lightbox-nav.prev {
  left: 1rem; top: 50%; transform: translateY(-50%);
}
.lightbox-nav.next {
  right: 1rem; top: 50%; transform: translateY(-50%);
}

/* ---- ABOUT GRID ---- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2rem;
  max-width: 72ch;
  margin: 2rem auto;
  padding: 0 1rem;
}

.about-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* ---- ABOUT CONTENT ---- */
.about-name {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
}

.contact-details {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.contact-details li {
  margin-bottom: 0.5rem;
}
.contact-details a {
  color: inherit;
  text-decoration: underline;
}

/* ---- RESUME SECTIONS ---- */
.section-title {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: bold;
}

.exhibitions {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.exhibitions li {
  margin-bottom: 0.5rem;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 700px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-image {
    margin-bottom: 1.5rem;
  }
}

/* ---- CONTACT FORM BUTTON ---- */
.btn-submit {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-top: 1rem;
}

/* ---- CAPTCHA SPACING ---- */
.cf-turnstile {
  margin: 1rem 0;
}


/* ---- FOOTER ---- */
footer{background:#fff;text-align:center;padding:1rem 0;margin-top:2rem}

/* ---- FOOTER WRAPPER ---- */
.site-footer {
  background: #fff;      /* keep your existing bg */
  padding: 1rem 0;       /* vertical padding */
  margin-top: 2rem;
}

.footer-wrapper {
  max-width: 72ch;       /* same comfy width as main */
  margin: 0 auto;        /* center it */
  padding: 0 1rem;       /* horizontal gutter on small screens */
  text-align: center;    /* keep text centered */
  color: #000;           /* or inherit if you prefer */
}

/* ---- BASIC TYPE SCALE ---- */
main { max-width: 72ch; margin: 0 auto; }     /* comfy column width */
h1  { margin-top: 0; font-size: clamp(2rem,4vw,3rem); }
p   { font-size: 1.1rem; line-height: 1.65; margin: 0 0 1rem; }
/* Hide the nav by default on narrow screens */
@media (max-width: 700px) {
  .hamburger {
    display: flex; /* show the 3-bar button */
  }

  .site-nav {
    display: none;             /* hidden until hamburger click */
    flex-direction: column;
    width: 100%;
    background: #fff;
    padding: 1rem 0;
  }
  .site-header.nav-open .site-nav {
    display: flex !important;  /* show entire nav */
  }
  /* indent submenu items for clarity */
  .dropdown.open .menu a {
    padding-left: 1.5rem;
  }
}