/* moshtabastudio — faithful rebuild
   Tokens taken from the live site's own values. */

:root{
  --white:#ffffff;   /* page background */
  --ink:#000000;     /* text */
  --pink:#fff0f5;    /* alt background (News etc.) */
  --red:#d1000a;     /* accent */
  --grey:#808080;

  --display:'Jost','Century Gothic','Futura',sans-serif;   /* Futura substitute */
  --serif:'Cormorant Garamond',Georgia,serif;

  --maxw:1200px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--serif);
  font-size:20px;
  line-height:1.67;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- header / site title ---------- */
.site-title{
  text-align:center;
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  color:var(--ink);
  letter-spacing:0.05em;
  font-size:clamp(2rem,4vw,3rem);
  margin:0;
  padding:clamp(1.6rem,4vw,2.6rem) 16px clamp(1.4rem,3vw,2rem);
}
.site-title a{display:inline-block;}

/* ---------- primary menu ---------- */
.menu{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:clamp(1.1rem,2.6vw,2.4rem);
  padding-bottom:clamp(2rem,5vw,3.4rem);
}
.menu a{
  font-family:var(--display);
  font-weight:300;
  font-size:1.05rem;
  letter-spacing:0.04em;
  color:var(--ink);
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .15s ease,color .15s ease;
}
.menu a:hover{border-bottom-color:var(--ink);}
.menu a.is-active{border-bottom-color:var(--ink);}
.menu .ig{display:inline-flex;align-items:center;}
.menu .ig svg{width:20px;height:20px;fill:var(--ink);}

/* ---------- page body ---------- */
main{padding-bottom:5rem;}

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

/* ---------- home: smooth anchor scroll ---------- */
html{scroll-behavior:smooth;}
.site-title{scroll-margin-top:10px;}

/* ---------- home: three circles ---------- */
.home-circles{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:clamp(1rem,3vw,2.6rem);
  padding:clamp(2rem,5vw,3.4rem) 24px clamp(1rem,2.5vw,1.6rem);
}
.home-circles a{display:block;border-radius:50%;}
.home-circles .circle{
  width:clamp(140px,17vw,220px);aspect-ratio:1/1;border-radius:50%;
  object-fit:cover;background:#f2f2f2;
}
.home-circles .ph{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--display);font-size:.72rem;color:var(--grey);
  border:1px dashed #cfcfcf;padding:8px;
}

/* ---------- home: stacked banner artworks ---------- */
.home-banners{padding:clamp(1rem,3vw,2rem) 24px;}
.home-banners figure{max-width:1040px;margin:0 auto clamp(1.6rem,4vw,2.6rem);}
.home-banners figure:last-child{margin-bottom:0;}
.home-banners img{width:100%;display:block;}
.home-banners .ph{
  width:100%;aspect-ratio:24/10;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:.8rem;color:var(--grey);
  border:1px dashed #cfcfcf;background:#fafafa;
}

/* ---------- site footer (all pages) ---------- */
.site-footer{
  text-align:center;
  padding:clamp(3rem,7vw,5rem) 24px clamp(2.5rem,6vw,4rem);
}
.site-footer .contact{
  font-family:var(--display);font-weight:300;
  font-size:1.05rem;line-height:1.8;color:var(--ink);margin:0 0 1.6rem;
}
.site-footer .contact a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}
.site-footer .copy{
  font-family:var(--display);font-weight:300;
  font-size:.95rem;color:var(--ink);margin:0 0 1.4rem;
}
.site-footer .footer-logo{
  width:clamp(120px,14vw,170px);height:auto;margin:0 auto;display:block;
}

/* ================= NEWS PAGE ================= */
body.page-news{background:var(--white);}
.news-section{background:var(--white);}
.news-section.pink{background:var(--pink);}      /* only sections that carry .pink */
.news-inner{max-width:1080px;margin:0 auto;padding:clamp(2.4rem,6vw,4rem) 24px;}
.news-section + .news-section .news-inner{border-top:3px solid var(--ink);}  /* divider between sections */
.news-lead{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:center;
}
.news-lead .news-media img{width:100%;display:block;background:#f2f2f2;}
.news-lead .cap{
  font-family:var(--display);font-weight:300;font-size:1rem;line-height:1.45;
  margin:.6rem 0 0;text-align:left;
}
.news-text{text-align:center;}
.news-text h2{
  font-family:var(--display);font-weight:400;letter-spacing:0;text-transform:none;
  font-size:clamp(1.35rem,1.1rem+1vw,1.7rem);margin:0 0 .5rem;line-height:1.25;
}
.news-text .sub{
  font-family:var(--display);font-weight:300;font-size:1rem;color:var(--ink);margin:0 0 1.1rem;
}
.news-text p{font-family:var(--serif);font-size:1.16rem;line-height:1.6;margin:0 0 1rem;}
.news-text p:last-child{margin-bottom:0;}
.news-text a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}
.news-gallery{
  display:grid;gap:clamp(.7rem,2vw,1.1rem);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:clamp(1.4rem,3.5vw,2.2rem);
}
.news-gallery img{width:100%;display:block;background:#f2f2f2;}
@media (max-width:720px){ .news-lead{grid-template-columns:1fr;} }

/* ---------- active menu item (shared header, per-page) ---------- */
body[data-page="home"] .menu a[data-nav="home"],
body[data-page="news"] .menu a[data-nav="news"],
body[data-page="artworks"] .menu a[data-nav="artworks"],
body[data-page="exhibitionsprojects"] .menu a[data-nav="exhibitionsprojects"],
body[data-page="about"] .menu a[data-nav="about"],
body[data-page="blog"] .menu a[data-nav="blog"]{
  border-bottom-color:var(--ink);
}


/* ================= ARTWORKS PAGE ================= */
.art-main{max-width:1180px;margin:0 auto;padding:clamp(1rem,3vw,2rem) 24px clamp(2rem,5vw,3rem);}
.art-year{margin-bottom:clamp(2rem,5vw,3.4rem);}
.year-label{
  font-family:var(--display);font-weight:400;text-align:center;color:var(--ink);
  font-size:clamp(1.5rem,1.1rem+1.4vw,2rem);letter-spacing:.06em;
  margin:0 0 clamp(1.2rem,3vw,2rem);
}
.art-grid{columns:3;column-gap:clamp(.6rem,1.4vw,1rem);}
@media (max-width:900px){.art-grid{columns:2;}}
@media (max-width:560px){.art-grid{columns:1;}}
.art{margin:0 0 clamp(.6rem,1.4vw,1rem);break-inside:avoid;}
.art-frame{
  position:relative;overflow:hidden;background:#f2f2f2;line-height:0;cursor:pointer;
}
.art-frame img{width:100%;height:auto;display:block;transition:transform .55s ease;}
.art-frame:hover img{transform:scale(1.08);}
.art-info{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:.15rem;padding:clamp(.8rem,2vw,1.1rem);line-height:1.3;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,0) 70%);
  opacity:0;transition:opacity .35s ease;
}
.art-frame:hover .art-info{opacity:1;}
.art-title{font-family:var(--display);font-weight:500;font-size:1.02rem;}
.art-desc{font-family:var(--display);font-weight:300;font-size:.82rem;opacity:.9;}
@media (hover:none){ .art-info{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0) 55%);} }


/* ================= EXHIBITIONS / PROJECTS ================= */
.ex-main{max-width:860px;margin:0 auto;padding:clamp(1rem,3vw,2rem) 24px clamp(2rem,5vw,3rem);text-align:center;}
.ex-banner{margin:0 0 clamp(2rem,5vw,3rem);}
.ex-banner img{width:100%;display:block;background:#f2f2f2;}
.ex-h2{
  font-family:var(--display);font-weight:400;letter-spacing:.02em;
  font-size:clamp(1.4rem,1.1rem+1.2vw,1.8rem);margin:clamp(1.6rem,4vw,2.4rem) 0 1rem;
}
.ex-list{list-style:none;margin:0 auto clamp(1.6rem,4vw,2.4rem);padding:0;max-width:720px;}
.ex-list li{font-family:var(--serif);font-size:1.2rem;line-height:1.85;}
.ex-title{font-weight:600;}
.ex-venue{}
.ex-year{color:var(--grey);}


/* ================= ABOUT PAGE (split) ================= */
.about-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.about-panel{background:var(--pink);display:flex;}
.about-inner{max-width:560px;margin-left:auto;padding:clamp(2.5rem,6vw,5rem) clamp(1.6rem,4vw,3.5rem);}
.about-logo{width:70px;max-width:70px;height:auto;display:block;margin:0 0 1.4rem;}
.about-title{font-family:var(--display);font-weight:500;color:var(--red);letter-spacing:.04em;
  font-size:clamp(1.6rem,1.2rem+1.4vw,2.1rem);margin:0 0 1.4rem;}
.about-panel p{font-family:var(--serif);font-size:1.16rem;line-height:1.55;margin:0 0 1.2rem;color:var(--ink);}
.about-panel a{color:var(--red);text-decoration:underline;text-underline-offset:2px;}
.about-buttons{margin-top:2.4rem;display:flex;flex-direction:column;gap:1rem;align-items:flex-start;}
.pill{
  font-family:var(--serif);font-size:1.05rem;color:var(--red);text-decoration:none;
  border:1px solid var(--red);border-radius:999px;padding:.55rem 2.4rem;transition:background .15s ease,color .15s ease;
}
.pill:hover{background:var(--red);color:#fff;}
.about-photo{overflow:hidden;}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block;background:#e9e2d9;}
@media (max-width:820px){
  .about-split{grid-template-columns:1fr;}
  .about-inner{margin:0 auto;}
  .about-photo{min-height:60vh;}
}


/* ================= BLOG / INSTAGRAM ================= */
.ig-main{max-width:640px;margin:0 auto;padding:clamp(1rem,3vw,2rem) 20px clamp(2rem,5vw,3rem);}
.ig-follow{text-align:center;font-family:var(--display);font-weight:300;font-size:1.15rem;margin:0 0 clamp(1.6rem,3vw,2.4rem);}
.ig-follow a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;}
.ig-follow a:hover{color:var(--red);border-color:var(--red);}
.ig-grid{display:flex;flex-direction:column;align-items:center;gap:1.6rem;}
.instagram-media{margin:0 auto!important;min-width:0!important;width:100%!important;max-width:600px!important;}
