/* ==========================================================================
   Green Greenwald — gallery site
   Spare design: ink background, per-series accent colors used sparingly,
   Fraunces display + Work Sans body. No invented copy, no decoration
   that isn't load-bearing.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Barlow+Condensed:wght@300;400&family=Ma+Shan+Zheng&family=UnifrakturMaguntia&family=Bungee&family=Bungee+Inline&family=Yesteryear&family=Bangers&family=Yuji+Syuku&family=Sancreek&family=Abril+Fatface&family=Permanent+Marker&family=Cinzel+Decorative:wght@700;900&family=Lobster&family=Special+Elite&display=swap');

:root{
  --ink: #14121C;
  --ink-2: #1B1826;
  --ink-3: #221E30;
  --paper: #F3EDE0;
  --paper-dim: #ACA598;
  --paper-faint: #726C60;
  --line: rgba(243,237,224,0.12);
  --line-strong: rgba(243,237,224,0.24);

  --accent: #E8862E;
  --title-font: 'Bungee', sans-serif;

  --display: 'Fraunces', ui-serif, Georgia, serif;
  --body: 'Work Sans', ui-sans-serif, system-ui, sans-serif;

  --container: 1280px;
}

body[data-cat="counterfeit-chinese-chronicles"]{ --accent:#E3A62F; --title-font:'Ma Shan Zheng', cursive; }
body[data-cat="patron-saints-and-guardian-angels"]{ --accent:#2BC4B0; --title-font:'UnifrakturMaguntia', cursive; }
body[data-cat="extravaganzas"]{ --accent:#F1553D; --title-font:'Bungee', sans-serif; }
body[data-cat="flowers"]{ --accent:#B565D8; --title-font:'Yesteryear', cursive; }
body[data-cat="go-figure"]{ --accent:#E8862E; --title-font:'Bangers', cursive; }
body[data-cat="koi-poems"]{ --accent:#3FAE7A; --title-font:'Yuji Syuku', serif; }
body[data-cat="treescapes"]{ --accent:#2D8FA0; --title-font:'Sancreek', cursive; }
body[data-cat="women"]{ --accent:#E0468F; --title-font:'Abril Fatface', serif; }
body[data-cat="es-capes"]{ --accent:#3E8FD1; --title-font:'Permanent Marker', cursive; }
body[data-cat="egyptians"]{ --accent:#3457C2; --title-font:'Cinzel Decorative', serif; }
body[data-cat="cirque"]{ --accent:#F03E6E; --title-font:'Bungee Inline', sans-serif; }
body[data-cat="winsome-darlings"]{ --accent:#C24C7A; --title-font:'Lobster', cursive; }
body[data-cat="history"]{ --accent:#E3A62F; --title-font:'Special Elite', monospace; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* All content images: natural aspect ratio, no exceptions.
   Explicit height:auto so nothing can stretch these regardless of any
   width/height attributes present in markup. */
img{
  max-width:100%;
  height:auto;
  display:block;
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); margin:0; font-weight:600; }

::selection{ background:var(--accent); color:var(--ink); }

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

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(20px, 4vw, 56px);
}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(20,18,28,0.92);
  backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.site-nav .container{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{
  font-family:'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.02em;
  color:#FF5DA2;
  font-size:1.3rem;
  white-space:nowrap;
}

.nav-links{
  display:flex; align-items:center; gap:26px;
  font-size:0.86rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.nav-links a{
  position:relative; color:var(--paper-dim); padding:6px 0;
  transition:color 0.2s ease;
}
.nav-links a:hover{ color:var(--paper); }
.nav-links a.current{ color:var(--paper); }
.nav-links a.current::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--accent);
}

.nav-toggle{ display:none; }

.dropdown{ position:relative; }
.dropdown-panel{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
  padding:10px; display:flex; flex-direction:column; gap:2px;
  width:280px;
  opacity:0; visibility:hidden;
  transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.dropdown-panel a{
  display:block; padding:8px 10px; border-radius:6px;
  font-size:0.85rem; color:var(--paper-dim);
}
.dropdown-panel a:hover{ background:var(--ink-3); color:var(--paper); }

/* ==========================================================================
   HOME
   ========================================================================== */

.hero{
  position:relative;
  min-height:60vh;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  text-align:left;
  background-image:url('../images/hero/BC.green_.bgndonly.jpg');
  background-size:cover;
  background-position:center bottom;
  padding:0 clamp(20px, 4vw, 56px) 40px;
}
.hero h1{
  font-family:'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  font-weight:300;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:0.01em;
  font-size:clamp(3.2rem, 11vw, 7rem);
  line-height:1;
  color:#FF5DA2;
  text-shadow:0 2px 20px rgba(0,0,0,0.45);
}

.bio{
  padding:64px 0 80px;
  border-top:1px solid var(--line);
}
.bio-grid{
  display:grid; grid-template-columns:1.1fr 1.4fr; gap:64px; align-items:start;
}
.bio p{ color:var(--paper-dim); font-size:1.05rem; margin:0 0 18px; }
.bio p:last-child{ margin-bottom:0; }
.pull{
  font-family:var(--display); font-style:italic; font-size:1.4rem;
  line-height:1.4; color:var(--paper); border-left:2px solid var(--accent);
  padding-left:22px; margin:0 0 24px;
}
.bio-photo{
  width:100%; border-radius:4px;
}
.roster-label{
  font-family:var(--body);
  font-size:0.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.12em;
  margin:0 0 16px;
  color:var(--accent);
}

.bio-roster{
  list-style:none; margin:0; padding:0;
}
.bio-roster li{
  border-bottom:1px solid var(--line);
}
.bio-roster a{
  display:block; padding:14px 2px;
  font-family:var(--display); font-size:1.25rem; color:var(--paper);
  transition:color 0.2s ease;
}
.bio-roster a:hover{ color:var(--accent); }
.ig-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  color:var(--paper-dim); font-size:0.95rem;
}
.ig-link svg{ width:40px; height:40px; flex:none; }
.ig-link:hover{ color:var(--accent); }

/* series list */
.shelf{ padding:35px 0 90px; }
.shelf h2{
  font-family:var(--body);
  font-size:0.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.12em;
  margin-bottom:24px;
  color:var(--accent);
}

.series-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:28px 22px;
}
.series-card{ display:block; }
.series-card .thumb{
  border-radius:4px; overflow:hidden; margin-bottom:10px; background:var(--ink-2);
  aspect-ratio:4/5;
}
.series-card .thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.4s ease;
}
.series-card:hover .thumb img{ transform:scale(1.03); }
.series-card h3{
  font-size:1.05rem; font-weight:500; color:var(--paper);
}
.series-card:hover h3{ color:var(--accent); }

/* mixed masonry ("from the studio") */
.masonry{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:14px;
}
.masonry .tile{
  cursor:zoom-in;
  border-radius:3px; overflow:hidden;
  aspect-ratio:4/5;
  position:relative;
}
.masonry .tile img{ width:100%; height:100%; object-fit:cover; display:block; }

/* studio carousels: 4 auto-scrolling rows, alternating direction */
.studio-carousels{ padding-bottom:10px; }
.carousel-row{
  overflow:hidden;
  margin-bottom:14px;
}
.carousel-track{
  display:flex;
  gap:14px;
  width:max-content;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.carousel-track.dir-ltr{ animation-name:carousel-ltr; }
.carousel-track.dir-rtl{ animation-name:carousel-rtl; }
.carousel-row:hover .carousel-track{ animation-play-state:paused; }
@keyframes carousel-ltr{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@keyframes carousel-rtl{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.carousel-tile{
  flex:none; width:260px; aspect-ratio:4/5;
  border-radius:3px; overflow:hidden; position:relative; cursor:zoom-in;
}
.carousel-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (prefers-reduced-motion: reduce){
  .carousel-track{ animation:none !important; }
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity 0.5s ease, transform 0.5s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ==========================================================================
   CATEGORY PAGE
   ========================================================================== */
.cat-hero{
  padding:56px 0 40px;
  border-bottom:1px solid var(--line);
}
.cat-crumb{
  font-size:0.8rem; color:var(--paper-faint); margin-bottom:16px;
}
.cat-crumb a:hover{ color:var(--accent); }
.cat-hero h1{
  font-family:var(--title-font);
  letter-spacing:0.01em;
  font-size:clamp(2.1rem, 5.5vw, 3.6rem); color:var(--accent); line-height:1.25;
}
body[data-cat="extravaganzas"] .cat-hero h1,
body[data-cat="cirque"] .cat-hero h1,
body[data-cat="egyptians"] .cat-hero h1{
  text-transform:uppercase;
}
.cat-meta{
  margin-top:12px;
}
.cat-meta .years{
  font-size:0.9rem; color:var(--paper-faint);
}

.gallery{
  padding:44px 0 20px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:18px;
}
/* Fallback for browsers without aspect-ratio support (pre-Safari 15):
   padding-bottom percentage trick, works everywhere. */
.gal-item{
  position:relative;
  cursor:zoom-in;
  border-radius:3px; overflow:hidden;
  aspect-ratio:4/5;
}
@supports not (aspect-ratio: 1 / 1){
  .series-card .thumb{ position:relative; height:0; padding-bottom:125%; }
  .masonry .tile{ height:0; padding-bottom:125%; }
  .carousel-tile{ height:0; padding-bottom:325px; }
  .gal-item{ height:0; padding-bottom:125%; }
  .series-card .thumb img, .masonry .tile img, .carousel-tile img, .gal-item img{
    position:absolute; top:0; left:0; width:100%; height:100%;
  }
}
.gal-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.hover-cap{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(transparent, rgba(10,9,13,0.85));
  color:var(--paper);
  font-size:0.85rem;
  padding:28px 12px 10px;
  opacity:0; transition:opacity 0.2s ease;
  pointer-events:none;
}
.gal-item:hover .hover-cap, .masonry .tile:hover .hover-cap, .carousel-tile:hover .hover-cap{ opacity:1; }

.series-nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:32px 0 80px; border-top:1px solid var(--line); margin-top:16px;
  gap:20px; flex-wrap:wrap; font-size:0.9rem;
}
.series-nav a{ color:var(--paper-dim); }
.series-nav a:hover{ color:var(--accent); }
.series-nav .next{ text-align:right; }

/* ==========================================================================
   HISTORY TEXT
   ========================================================================== */
.history-text{
  padding:20px 0 70px;
  max-width:760px;
}
.history-text p{
  color:var(--paper-dim); font-size:1rem; margin:0 0 16px; line-height:1.6;
}
.history-text strong{ color:var(--paper); font-weight:600; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000; background:rgba(10,9,13,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity 0.25s ease, visibility 0.25s;
  padding:6vh 6vw;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:100%; max-height:80vh; width:auto; height:auto; border-radius:2px;
}
.lightbox-cap{
  position:absolute; bottom:4vh; left:0; right:0; text-align:center;
  font-size:0.95rem; color:var(--paper-dim);
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:none; border:none; color:var(--paper); cursor:pointer;
  opacity:0.6; transition:opacity 0.2s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ opacity:1; }
.lightbox-close{ top:24px; right:28px; font-size:1.8rem; line-height:1; }
.lightbox-prev{ left:16px; top:50%; transform:translateY(-50%); font-size:2.4rem; padding:20px; }
.lightbox-next{ right:16px; top:50%; transform:translateY(-50%); font-size:2.4rem; padding:20px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  border-top:1px solid var(--line); padding:48px 0 36px;
}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap;
}
.footer-nav{ display:flex; flex-direction:column; gap:9px; }
.footer-nav a{ color:var(--paper-dim); font-size:0.86rem; }
.footer-nav a:hover{ color:var(--accent); }
.footer-ig{ flex:none; opacity:0.85; transition:opacity 0.2s ease, transform 0.2s ease; }
.footer-ig svg{ width:44px; height:44px; }
.footer-ig:hover{ opacity:1; transform:translateY(-1px); }
.footer-bottom{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--paper-faint); font-size:0.8rem;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .bio-grid{ grid-template-columns:1fr; gap:36px; }
  .bio-photo{ max-width:340px; }
  .masonry{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }
  .carousel-tile{ width:150px; }
  .gallery{ grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); }
}

@media (max-width: 720px){
  .nav-links{
    position:fixed; top:68px; right:0; bottom:0; left:0; background:var(--ink); flex-direction:column;
    align-items:flex-start; padding:24px clamp(20px,4vw,56px) 40px; gap:18px;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    transform:translateX(100%); transition:transform 0.25s ease;
    z-index:200;
    display:flex;
  }
  .nav-links.open{ transform:translateX(0); }
  .dropdown{ width:100%; }
  .dropdown-panel{
    position:static; transform:none; opacity:1; visibility:visible;
    display:flex; flex-direction:column; width:100%; gap:4px;
    background:none; border:none; padding:10px 0 0 12px; margin-top:2px;
  }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:8px;
    cursor:pointer; z-index:110;
  }
  .nav-toggle span{ width:20px; height:1px; background:var(--paper); transition:transform 0.2s, opacity 0.2s; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .masonry{ grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); }
  .carousel-tile{ width:120px; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .series-grid{ grid-template-columns:1fr 1fr; }
  .hero{ padding:48px 0 20px; }
  .bio{ padding:48px 0 56px; }
  .lightbox-prev, .lightbox-next{ font-size:1.6rem; padding:10px; }
}