:root{
  --bg:#f8f5f0;
  --text:#2b3137;
  --gold:#c8a96a;
}

*{
  box-sizing:border-box;
}

html{ 
  scroll-behavior:smooth; 
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,sans-serif;
}


/* Navigation */ 
nav{ 
  position:fixed; top:0; left:0; width:100%; display:flex; justify-content:space-between; align-items:center; padding:22px 40px; background:rgba(248,245,240,.92); backdrop-filter:blur(10px); z-index:100; 
} 

.logo{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;

  text-decoration:none;
  color:var(--text);

  font-size:.85rem;
  line-height:1.2;
  letter-spacing:3px;

  flex-shrink:0;
}

.logo img{
  display:block;
  flex:0 0 38px;

  width:38px;
  height:38px;

  object-fit:contain;
}

.logo-text{
  display:block;
  white-space:nowrap;

  font-size:.85rem;
  line-height:1.2;
  letter-spacing:3px;
}

.logo-text span{
  display:block;
  margin-top:3px;

  font-size:.72rem;
  line-height:1.2;
  letter-spacing:.08em;
  font-style:italic;
  opacity:.75;
}

/* Desktop menu */ 
.menu{ 
  display:flex; align-items:center; gap:24px; z-index:101; 
} 
.menu a{ 
  text-decoration:none; color:var(--text); font-size:.92rem; letter-spacing:.02em; 
} 

/* Mobile button */ 
.menu-toggle{ 
  display:none; background:none; border:none; font-size:1.4rem; color:var(--text); cursor:pointer; -webkit-tap-highlight-color:transparent;
} 


/* Hero */

.hero{
  min-height:100svh;
  background:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
    url('assets/background/start-background.jpg') center/cover;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:white;
}

.hero-content{
  max-width:900px;
  padding:20px;
}

.eyebrow{
  letter-spacing:4px;
  font-size:.8rem;
}

h1,h2,h3{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
}

h1{
  font-size:6rem;
  margin:.2em 0;
}

h2{ 
  font-size:2.5rem; margin:0 0 18px; line-height:1.1; 
}


.hero p{
  font-size:1.2rem;
}

/* Intro */

.intro{
  max-width:900px;
  margin:auto;
  padding:100px 40px;
  text-align:center;
  font-size:1.2rem;
}

/* Collection Grid */

.collection{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  padding:0 8% 100px;
  align-items:start;
}

/* Work in Progress – static premium cards */

.artwork{
  position:relative;

  background:#fdfbf8;
  padding:16px;

  border:1px solid rgba(0,0,0,.03);
  border-radius:2px;

  box-shadow:
    0 3px 8px rgba(0,0,0,.05),
    0 14px 36px rgba(0,0,0,.10);

  transition:
    transform .35s ease,
    box-shadow .35s ease;

  overflow:hidden;
}

.artwork:hover{
  transform:translateY(-3px);

  box-shadow:
    0 6px 14px rgba(0,0,0,.06),
    0 22px 48px rgba(0,0,0,.14);
}

.artwork img{
  display:block;

  width:100%;
  aspect-ratio:4/5;

  object-fit:contain;
  object-position:center;

  filter:saturate(.92);

  margin:0 auto;
}

.artwork h3{
  text-align:center;

  font-size:2rem;
  margin:18px 0 6px;
}

.artwork:after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:1px;

  background:linear-gradient(
    to right,
    transparent,
    rgba(0,0,0,.06),
    transparent
  );
}

/* Progress artworks */ 
.progress-artwork{ 
	cursor:pointer; user-select:none; 
} 
.progress-artwork img { 
	transition: opacity .35s ease, transform .35s ease; 
} 
.progress-artwork:active { 
	transform:scale(.995); 
} 
.progress-hint { 
	text-align:center; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(43,49,55,.45); margin-top:6px; 
}


/* Artist / Collect */

.artist,
.collect{
  max-width:900px;
  margin:auto;
  text-align:center;
  padding:80px 40px;
}

/* Footer */

footer{
  padding:80px 20px;
  text-align:center;
  background:#1f2c35;
  color:#f8f5f0;
}

.script{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  color:var(--gold);
  font-size:2rem;
  margin:10px 0;
}


.footer-links{ 
	display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:18px; 
} 

.instagram-link{ 
	font-size:.92rem; letter-spacing:.02em; color:rgba(248,245,240,.78); transition:color .3s ease; 
}
.instagram-link:hover { 
    color:var(--gold);
} 


/* Plain mail link */

.plain-link,
.plain-link:visited,
.plain-link:hover,
.plain-link:active,
.plain-link:focus{
  color:inherit;
  text-decoration:none;
  font:inherit;
  letter-spacing:inherit;
}

/* =========================================
   3D REVEAL GALLERY CARD
   ========================================= */

.art-card{
  perspective:1200px;
  cursor:pointer;
  position:relative;
  padding:8px;
}

.art-card-inner{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  transition:transform .8s ease;
  transform-style:preserve-3d;
  overflow:hidden;
}

/* Subtle gallery rotation */

.art-card.active .art-card-inner{
  transform:rotateY(6deg) scale(1.01);
}

/* FRONT */

.art-front{
  position:absolute;
  inset:0;

  background:#fdfbf8;
  padding:16px;

  border:1px solid rgba(0,0,0,.03);
  border-radius:2px;

  box-shadow:
    0 3px 8px rgba(0,0,0,.05),
    0 14px 36px rgba(0,0,0,.10);

  z-index:2;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  transition:opacity .35s ease;
}

.art-front img{
  width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

/* BACK */

.art-back{
  position:absolute;
  inset:8px;

  background:#ece7df;
  border-radius:4px;

  overflow:hidden;

  z-index:1;

  opacity:0;
  pointer-events:none;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;

  transition:opacity .35s ease;
}

.art-card.active .art-back{
  opacity:1;
}

.art-card.active .art-front{
  opacity:0;
}

/* Background image */

.art-back .bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;

  filter:brightness(.90) ;

  transform:scale(1.03);
}

/* Overlay */

.art-back .overlay{
  position:absolute;
  inset:0;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:24px;

  color:#fff;

  background:linear-gradient(
    to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,.10)
  );

  opacity:0;
  transform:translateY(10px);

  transition:all .35s ease .15s;
}

.art-card.active .art-back .overlay{
  opacity:1;
  transform:translateY(0);
}

.art-back h3{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;
  margin:0 0 8px;
}

.art-back p{
  margin:2px 0;
  font-size:.95rem;
  letter-spacing:.02em;
}


.details-section{ 
  padding:40px 8% 100px; 
} 

.details-intro{ 
  max-width:700px; margin:0 auto 42px; text-align:center; 
} 

.details-intro p{ 
  color:rgba(43,49,55,.75); line-height:1.7; 
} 

.details-grid{ 
  display:flex; justify-content:center; gap:24px; flex-wrap:wrap; 
} 

.details-grid img{ 
  width:240px; height:240px; object-fit:cover; display:block; border-radius:2px; border:1px solid rgba(0,0,0,.04); box-shadow: 0 3px 8px rgba(0,0,0,.05), 0 14px 32px rgba(0,0,0,.08); transition: transform .25s ease, box-shadow .25s ease; aspect-ratio:1/1;
} 

.details-grid img:hover{ 
  transform:translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.06), 0 20px 38px rgba(0,0,0,.10); 
}


/* Mobile */ 
@media (max-width:900px){ 
  nav{ 
    padding:18px 22px; align-items:flex-start; 
  } 
  .menu-toggle{ 
    display:block; margin-top:2px; 
  } 

  .menu{ 
    position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:flex-start; gap:0; padding:16px 22px 22px; background:rgba(248,245,240,.98); backdrop-filter:blur(14px); border-top:1px solid rgba(0,0,0,.05); box-shadow:0 10px 30px rgba(0,0,0,.08); 
  }

  .menu.open{ 
    display:flex; 
  } 

  .menu a{ 
    width:100%; padding:14px 0; border-bottom:1px solid rgba(0,0,0,.05); 
  } 
  
  .menu a:last-child{ 
    border-bottom:none; 
  } 

  .logo{
    gap:8px;
    font-size:.72rem;
    letter-spacing:2px;
  }

  .logo img{
    flex:0 0 32px;
    width:32px;
    height:32px;
  }

  .logo-text{
    font-size:.72rem;
    letter-spacing:2px;
  }

  .logo-text span{
    font-size:.62rem;
  }
  
  .intro{ 
    padding:72px 24px; font-size:1.05rem; 
  }


  h1{ 
    font-size:3.5rem; 
  } 
  
  h2{ 
    font-size:2.2rem; 
  }


  .collection{ 
    grid-template-columns:1fr; gap:28px; padding:0 22px 70px; 
  }

  .art-back .overlay{ 
    padding:18px; 
  } 

  .art-back h3{ 
    font-size:1.45rem; margin-bottom:6px; 
  } 

  .art-back p{ 
    font-size:.82rem; line-height:1.3; 
  }

  .details-section{ 
    padding:20px 22px 70px; 
  } 

  .details-grid{ 
    gap:14px; 
  } 

  .details-grid img{ 
    width:92px; height:92px;
  }

}