/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --color-bg: #E6DFD1;         /* Sherwin-Williams White Duck (SW 7010) */
  --color-surface: #EDE7DA;    /* slightly lifted panel */
  --color-ink: #2B2620;        /* deep warm charcoal-brown text */
  --color-muted: #756B5C;      /* warm taupe, muted text */
  --color-accent: #A0703F;     /* warm clay accent, used sparingly */
  --color-hairline: #D6CDBA;   /* subtle warm divider */

  --color-paper: #FFFDF8;      /* the mat/paper — stays light regardless of theme */
  --color-paper-ink: #2B2926;  /* text used on top of paper elements */

  --font-display: "Prata", Georgia, serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --measure: 68ch;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 8rem;

  --radius: 2px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--space-2); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ==========================================================================
   Layout shell
   ========================================================================== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
}

.site-header__mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.site-nav {
  display: flex;
  gap: var(--space-3);
}

.site-nav a {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-1);
  margin: calc(var(--space-1) * -1);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  z-index: 101;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header--overlay .nav-toggle span {
  background: #FAF6EF;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* When the full-screen mobile menu is open, its own links are always light
   text on a dark backdrop, so force the toggle's bars to match regardless
   of which header variant is underneath. */
.nav-toggle.is-open span {
  background: #FAF6EF;
}

main { display: block; }

.site-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-4);
  border-top: 1px solid var(--color-hairline);
  color: var(--color-muted);
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ==========================================================================
   Signature element: the mat frame
   A thin inset border + generous padding around every painting,
   echoing a gallery mat board. Used consistently for hero, gallery
   thumbnails, and the lightbox so every image reads as "on display."
   ========================================================================== */
.mat-frame {
  display: block;
  background: var(--color-paper);
  padding: var(--space-1);
  border: 1px solid var(--color-hairline);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.mat-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Exhibition banner (home page)
   ========================================================================== */
.exhibition-banner {
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

.exhibition-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.exhibition-banner__label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.exhibition-banner strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* Overlay variants — used on the home page where the header and exhibition
   banner sit directly on top of the hero photo instead of the page
   background, so they need light text plus the scrim behind them for
   contrast against whatever the photo looks like. */
.site-header--overlay .site-header__mark {
  color: #FAF6EF;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.site-header--overlay {
  min-height: 4.5rem;
}

.site-header--overlay .site-nav a {
  color: rgba(250, 246, 239, 0.8);
}

.site-header--overlay .site-nav a:hover,
.site-header--overlay .site-nav a[aria-current="page"] {
  color: #FAF6EF;
  border-bottom-color: var(--color-accent);
}

.exhibition-banner--overlay {
  border-top: none;
  border-bottom: none;
}

.exhibition-banner--overlay .exhibition-banner__inner {
  color: rgba(250, 246, 239, 0.9);
  font-size: 1rem;
  padding: 0;
}

.exhibition-banner--overlay .exhibition-banner__chip {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  background: rgba(20, 14, 10, 0.5);
  padding: var(--space-2) var(--space-4);
}

.exhibition-banner--overlay .exhibition-banner__label {
  font-size: 0.9rem;
  font-weight: 700;
}

.exhibition-banner--overlay strong {
  color: #FAF6EF;
}

/* ==========================================================================
   Home / hero banner
   ========================================================================== */
.hero-banner {
  width: 100%;
  padding: 0 var(--space-4);
  box-sizing: border-box;
  background: var(--color-bg);
}

.hero-banner__inner {
  position: relative;
  max-width: 1150px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--color-ink);
}

.hero-banner__img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-banner__scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 260px;
  background: linear-gradient(to bottom, rgba(20, 14, 10, 0.6), rgba(20, 14, 10, 0));
  pointer-events: none;
}

.hero-banner__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* Exhibition banner placement relative to the hero photo: by default
   (tablet/desktop) it overlays near the top of the photo, positioned just
   below the header using the header's min-height above. The 820px
   breakpoint below switches it back to normal document flow so it lands
   right after the image on mobile instead. */
.exhibition-banner--overlay {
  position: absolute;
  top: 4.5rem;
  left: 0;
  right: 0;
  z-index: 5;
}

.hero-intro {
  padding: var(--space-3) var(--space-4) var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
}

.hero-intro h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

.hero-intro p {
  color: var(--color-muted);
  max-width: 42ch;
}

.hero__cta {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
}

/* ==========================================================================
   Gallery grid
   ========================================================================== */
.page-heading {
  padding: var(--space-5) var(--space-4) var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.page-heading p { color: var(--color-muted); max-width: 50ch; margin: 0 auto; }

.gallery-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  list-style: none;
}

.gallery-grid li {
  margin: 0;
  padding: 0;
}

.gallery-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 0.2s ease;
}

.gallery-item:hover {
  transform: translateY(-2px);
}

.gallery-item__frame {
  aspect-ratio: 5 / 4;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 7, 4, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.14s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox__content {
  max-width: min(900px, 92vw);
  max-height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.98);
  transition: transform 0.14s ease;
}

.lightbox.is-open .lightbox__content {
  transform: scale(1);
}

.lightbox__frame {
  background: var(--color-paper);
  padding: var(--space-1);
  max-height: 76vh;
  display: flex;
}

.lightbox__frame img {
  max-height: 72vh;
  width: auto;
  object-fit: contain;
}

.lightbox__caption {
  color: #FAF7F2;
  text-align: center;
  margin-top: var(--space-2);
  max-width: 60ch;
}

.lightbox__caption .title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  display: block;
}

.lightbox__caption .meta {
  font-size: 0.85rem;
  color: #C9C2B4;
  display: block;
  margin-top: 2px;
}

.lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  color: #FAF7F2;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #FAF7F2;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-2);
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.lightbox__nav:hover { opacity: 1; }
.lightbox__nav--prev { left: var(--space-2); }
.lightbox__nav--next { right: var(--space-2); }

/* ==========================================================================
   About page
   ========================================================================== */
.about-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-6);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-5);
  align-items: start;
}

.about-layout__frame {
  aspect-ratio: 4 / 5;
  position: sticky;
  top: var(--space-4);
}

.about-layout__text h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.about-layout__text p {
  color: var(--color-muted);
  max-width: var(--measure);
}

.about-layout__text p:first-of-type {
  color: var(--color-ink);
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-layout {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-6);
}

.contact-layout > p {
  color: var(--color-muted);
  text-align: center;
  margin-bottom: var(--space-4);
}

.form-field {
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  color: var(--color-paper-ink);
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
}

.form-submit {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-ink);
  color: var(--color-bg);
  border: none;
  padding: 0.9rem 1.8rem;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.2s ease;
}

.form-submit:hover { background: var(--color-accent); }

.form-note {
  margin-top: var(--space-2);
  font-size: 0.8rem;
  color: var(--color-muted);
  text-align: center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .about-layout {
    grid-template-columns: 1fr;
  }
  .about-layout__frame {
    position: static;
    max-width: 360px;
    margin: 0 auto;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .site-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
  }
  .hero-banner__scrim {
    height: 200px;
  }
  .exhibition-banner--overlay {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
  }
  .hero-banner {
    padding: 0;
  }
  .hero-banner__inner {
    max-width: none;
  }
  .hero-banner__img {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .site-header__mark {
    font-size: 1.1rem;
  }
  .nav-toggle {
    display: flex;
  }
  .site-nav {
    display: none;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: rgba(43, 38, 32, 0.97);
    z-index: 100;
  }
  .site-nav.is-open {
    display: flex;
  }
  .site-nav a {
    color: rgba(250, 246, 239, 0.85);
    font-size: 1.15rem;
  }
  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    color: #FAF6EF;
    border-bottom-color: var(--color-accent);
  }
  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 560px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    padding: 0 var(--space-3) var(--space-5);
  }
  .hero, .page-heading, .about-layout, .contact-layout {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}