:root{
  --white:#ffffff;
  --black:#000000;
  --red:#9d0000;
  --grey-text:#3a3a3a;
  --line:#d8d8d8;

  --display:'Cormorant Garamond', serif;
  --body:'EB Garamond', serif;

  --maxw:1220px;
  --pad:clamp(1.25rem, 4vw, 3.5rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--white);
  color:var(--black);
  font-family:var(--body);
  font-size:1.05rem;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
h1,h2,h3{ font-family:var(--display); font-weight:400; letter-spacing:.01em; }

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

/* ===== Buttons ===== */
.btn{
  display:inline-block;
  font-family:var(--display);
  font-size:1.05rem;
  padding:1.05rem 1.75rem;
  border:1px solid var(--black);
  text-align:center;
  transition:all .25s ease;
}
.btn-fill{ background:var(--black); color:var(--white); border-color:var(--black); }
.btn-fill:hover{ opacity:.8; }
.btn-line{ background:transparent; color:var(--black); }
.btn-line:hover{ background:var(--black); color:var(--white); }
.btn-center{ display:block; width:max-content; margin:3rem auto 0; }
.btn-send{ background:var(--red); color:var(--white); border-color:var(--red); cursor:pointer; width:100%; }
.btn-send:hover{ opacity:.85; }

/* ===== Header ===== */
.site-header{ padding:1.6rem var(--pad); position:relative; z-index:100; }
.nav{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.nav-side{ display:flex; gap:2.2rem; }
.nav-left{ justify-content:flex-start; }
.nav-right{ justify-content:flex-end; }
.nav-left a{ font-size:1.15rem; padding-bottom:.2rem; border-bottom:1px solid transparent; }
.nav-left a.is-active{ border-bottom-color:var(--black); }
.logo img{ height:90px; width:90px; object-fit:contain; margin:0 auto; }
.nav-toggle{ display:none; }

/* ===== Hero ===== */
.hero{ position:relative; overflow:hidden; }
.hero-img{ width:100%; aspect-ratio:2.4/1; max-height:520px; object-fit:cover; object-position:35% 48%; transform:scale(1.55); }
.hero-pill{
  position:absolute; left:50%; bottom:2.5rem; transform:translateX(-50%);
  background:var(--white); color:var(--black);
  padding:.9rem 2.4rem; font-family:var(--display); font-size:1.15rem;
  border:1px solid var(--white);
}

/* ===== Page header (About / Paintings / Contact titles) ===== */
.page-title{ max-width:var(--maxw); margin:2rem auto 0; padding:0 var(--pad); }
.page-title h1{ font-size:3.4rem; }

/* ===== Sections shared ===== */
section{ padding:5rem var(--pad); }
section > h2{ text-align:center; font-size:3.05rem; margin-bottom:3.5rem; max-width:var(--maxw); margin-left:auto; margin-right:auto; }

/* ===== Gallery ===== */
.gallery{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:3rem;
}
.gallery--full{ padding-top:2rem; }
.painting-frame{ position:relative; display:block; aspect-ratio:1/1; background:var(--white); overflow:hidden; margin-bottom:1.2rem; }
.painting-frame img{ width:100%; height:100%; object-fit:cover; }
.painting h3{ text-align:center; font-size:1.5rem; font-weight:400; letter-spacing:.03em; }
.sold-tag{
  position:absolute; top:.8rem; right:.8rem;
  background:var(--white); color:var(--black);
  font-family:var(--body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .6rem;
}
.is-sold h3{ opacity:.6; }

/* ===== Split sections (Artist / Art) ===== */
.split{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
}
.split-media{ position:relative; aspect-ratio:1/1.05; }
.media-bg{ position:absolute; inset:8% 20% 8% 0; background:var(--red); }
.media-bg--right{ inset:8% 0 8% 20%; }
.media-front{
  position:absolute; right:-6%; bottom:12%; width:76%; aspect-ratio:4/5;
  object-fit:cover; box-shadow:0 20px 40px rgba(0,0,0,.15);
}
.split-copy h2, .split-copy h1{ font-size:2.9rem; margin-bottom:1.6rem; }
.split-copy p{ font-size:1.1rem; color:var(--grey-text); max-width:38ch; margin-bottom:2.2rem; }
.split-reverse{ direction:rtl; }
.split-reverse > *{ direction:ltr; }
.split-reverse .media-bg{ inset:8% 0 8% 20%; }
.split-reverse .media-front{ left:-6%; right:auto; aspect-ratio:3/2; }

/* ===== Single painting page ===== */
.breadcrumb{ max-width:var(--maxw); margin:0 auto; padding:1rem var(--pad) 0; font-size:.95rem; color:var(--grey-text); }
.breadcrumb a:hover{ text-decoration:underline; }
.product{
  max-width:var(--maxw); margin:0 auto; padding:2rem var(--pad) 6rem;
  display:grid; grid-template-columns:1.1fr .9fr; gap:5rem; align-items:start;
}
.product-frame{ aspect-ratio:1/1; background:var(--white); overflow:hidden; position:relative; }
.product-frame img{ width:100%; height:100%; object-fit:cover; }
.product-thumbs{ display:flex; gap:.9rem; margin-top:1rem; }
.product-thumbs button{
  width:72px; height:72px; padding:0; border:1px solid var(--line); background:none; cursor:pointer;
  overflow:hidden; opacity:.7; transition:opacity .2s ease, border-color .2s ease;
}
.product-thumbs button img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-thumbs button:hover, .product-thumbs button.is-active{ opacity:1; border-color:var(--black); }
.product-info h1{ font-size:2.6rem; margin-bottom:1.6rem; }
.product-info p{ margin-bottom:.9rem; color:var(--grey-text); font-size:1.1rem; }
.product-info .btn{ margin-top:1.2rem; }
.sold-label{ display:inline-block; margin-top:1.2rem; font-family:var(--display); font-size:1.1rem; color:var(--grey-text); border:1px solid var(--line); padding:.6rem 1.6rem; }

/* ===== About page ===== */
.about-hero{
  max-width:var(--maxw); margin:0 auto; padding-top:3rem;
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
}
.about-hero h1{ font-size:3.6rem; margin-bottom:1.6rem; }
.about-hero p{ font-size:1.1rem; color:var(--grey-text); max-width:42ch; margin-bottom:1.3rem; }

/* ===== Contact ===== */
.contact{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:5rem;
}
.contact-copy h1, .contact-copy h3{ font-size:2.6rem; margin-bottom:1.8rem; }
.contact-copy p{ color:var(--grey-text); margin-bottom:1.2rem; max-width:36ch; }
.contact-line{ display:block; margin-top:.4rem; }
.contact-link{ color:var(--red); text-decoration:underline; }
.contact-form{ display:flex; flex-direction:column; gap:1.5rem; }
.contact-form label{ font-family:var(--display); font-size:1.05rem; margin-bottom:.4rem; display:block; }
.contact-form label span{ font-family:var(--body); font-size:.82rem; color:var(--grey-text); }
.contact-form input, .contact-form textarea{
  width:100%; font-family:var(--body); font-size:1rem;
  padding:.7rem .8rem; border:1px solid var(--line); background:var(--white);
  resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{ outline:1px solid var(--black); }
.form-status{ font-size:.9rem; color:var(--red); min-height:1.2em; }
.hidden-field{ position:absolute; left:-9999px; opacity:0; }

/* ===== Footer ===== */
.site-footer{
  background:var(--red); color:var(--white);
  padding:4rem var(--pad);
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:2rem;
  max-width:none;
}
.wordmark-foot{ font-family:var(--display); font-style:italic; font-size:1.4rem; }
.ig-icon{ color:var(--white); justify-self:center; }
.footer-links{ display:flex; gap:1.8rem; justify-self:end; }
.footer-links a{ font-family:var(--display); font-size:1.1rem; }
.footer-links a:hover{ opacity:.75; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .split, .split-reverse, .about-hero{ grid-template-columns:1fr; direction:ltr; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .contact{ grid-template-columns:1fr; }
  .product{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .nav{ grid-template-columns:auto 1fr auto; }
  .nav-left{ display:none; }
  .logo img{ height:64px; width:64px; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:none;
    order:-1; padding:.5rem;
  }
  .nav-toggle span{ width:22px; height:1px; background:var(--black); display:block; }
  .gallery{ grid-template-columns:1fr; }
  section > h2{ font-size:2.2rem; }
  .page-title h1{ font-size:2.4rem; }
  .hero-img{ aspect-ratio:1.1/1; max-height:420px; }
  .site-footer{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .footer-links{ justify-self:center; flex-wrap:wrap; justify-content:center; }
}