/* ============================================================
   Michael Cunningham Studio — Global Stylesheet
   Shared across all pages: index.html,
   sculptures/hawk-metal-sculpture.html,
   sculptures/barn-owl-metal-sculpture.html
   ============================================================ */

:root{
  --bg: #f7f2e8;
  --bg-panel: #f0e9db;
  --ink: #2a2521;
  --ink-soft: #74695c;
  --brass: #8a6a3f;
  --brass-deep: #62462a;
  --line: #ddd0ba;
  --cream-line: #e5dac2;
  --status-available: #52684a;
  --status-sold: #9c4a3d;
}
*{box-sizing:border-box;}
a, button{ -webkit-tap-highlight-color:transparent; }
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'EB Garamond', serif;
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Playfair Display', serif;
  font-weight:500;
  margin:0;
  color:var(--ink);
}
a{color:inherit;}
img,svg{display:block;max-width:100%;}

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 40px;
}
section{
  padding:130px 0;
  border-bottom:1px solid var(--line);
}
section:last-of-type{border-bottom:none;}
#shop{ padding-top:50px; }

/* Shape-morph accent: a single lightweight element that cycles
   through square, circle, triangle, pentagon, hexagon, diamond and
   heart using clip-path. All seven shapes are pre-computed with the
   same number of points so the browser can interpolate smoothly
   between them — no JS, no libraries. Drop <div class="shape-morph"
   aria-hidden="true"></div> anywhere on the site to reuse it. */
.shape-morph{
  width:40px;
  height:40px;
  margin:0 auto 18px;
  background:var(--brass);
  clip-path:polygon(94.00% 94.00%, 79.33% 94.00%, 64.67% 94.00%, 50.00% 94.00%, 35.33% 94.00%, 20.67% 94.00%, 6.00% 94.00%, 6.00% 79.33%, 6.00% 64.67%, 6.00% 50.00%, 6.00% 35.33%, 6.00% 20.67%, 6.00% 6.00%, 20.67% 6.00%, 35.33% 6.00%, 50.00% 6.00%, 64.67% 6.00%, 79.33% 6.00%, 94.00% 6.00%, 94.00% 20.67%, 94.00% 35.33%, 94.00% 50.00%, 94.00% 64.67%, 94.00% 79.33%);
  animation:shapeMorph 14s ease-in-out infinite;
}
@keyframes shapeMorph{
  0%, 100% { clip-path:polygon(94.00% 94.00%, 79.33% 94.00%, 64.67% 94.00%, 50.00% 94.00%, 35.33% 94.00%, 20.67% 94.00%, 6.00% 94.00%, 6.00% 79.33%, 6.00% 64.67%, 6.00% 50.00%, 6.00% 35.33%, 6.00% 20.67%, 6.00% 6.00%, 20.67% 6.00%, 35.33% 6.00%, 50.00% 6.00%, 64.67% 6.00%, 79.33% 6.00%, 94.00% 6.00%, 94.00% 20.67%, 94.00% 35.33%, 94.00% 50.00%, 94.00% 64.67%, 94.00% 79.33%); }
  14.2857% { clip-path:polygon(50.00% 6.00%, 61.39% 7.50%, 72.00% 11.89%, 81.11% 18.89%, 88.11% 28.00%, 92.50% 38.61%, 94.00% 50.00%, 92.50% 61.39%, 88.11% 72.00%, 81.11% 81.11%, 72.00% 88.11%, 61.39% 92.50%, 50.00% 94.00%, 38.61% 92.50%, 28.00% 88.11%, 18.89% 81.11%, 11.89% 72.00%, 7.50% 61.39%, 6.00% 50.00%, 7.50% 38.61%, 11.89% 28.00%, 18.89% 18.89%, 28.00% 11.89%, 38.61% 7.50%); }
  28.5714% { clip-path:polygon(50.00% 11.89%, 55.50% 21.42%, 61.00% 30.95%, 66.50% 40.47%, 72.00% 50.00%, 77.50% 59.53%, 83.00% 69.05%, 88.50% 78.58%, 94.00% 88.11%, 83.00% 88.11%, 72.00% 88.11%, 61.00% 88.11%, 50.00% 88.11%, 39.00% 88.11%, 28.00% 88.11%, 17.00% 88.11%, 6.00% 88.11%, 11.50% 78.58%, 17.00% 69.05%, 22.50% 59.53%, 28.00% 50.00%, 33.50% 40.47%, 39.00% 30.95%, 44.50% 21.42%); }
  42.8571% { clip-path:polygon(50.00% 7.48%, 59.31% 14.24%, 68.63% 21.01%, 77.94% 27.78%, 87.26% 34.55%, 94.00% 42.15%, 90.44% 53.10%, 86.88% 64.05%, 83.33% 75.00%, 79.77% 85.95%, 73.03% 92.52%, 61.51% 92.52%, 50.00% 92.52%, 38.49% 92.52%, 26.97% 92.52%, 20.23% 85.95%, 16.67% 75.00%, 13.12% 64.05%, 9.56% 53.10%, 6.00% 42.15%, 12.74% 34.55%, 22.06% 27.78%, 31.37% 21.01%, 40.69% 14.24%); }
  57.1429% { clip-path:polygon(50.00% 6.00%, 59.53% 11.50%, 69.05% 17.00%, 78.58% 22.50%, 88.11% 28.00%, 88.11% 39.00%, 88.11% 50.00%, 88.11% 61.00%, 88.11% 72.00%, 78.58% 77.50%, 69.05% 83.00%, 59.53% 88.50%, 50.00% 94.00%, 40.47% 88.50%, 30.95% 83.00%, 21.42% 77.50%, 11.89% 72.00%, 11.89% 61.00%, 11.89% 50.00%, 11.89% 39.00%, 11.89% 28.00%, 21.42% 22.50%, 30.95% 17.00%, 40.47% 11.50%); }
  71.4286% { clip-path:polygon(50.00% 6.00%, 54.28% 13.33%, 58.56% 20.67%, 62.83% 28.00%, 67.11% 35.33%, 71.39% 42.67%, 75.67% 50.00%, 71.39% 57.33%, 67.11% 64.67%, 62.83% 72.00%, 58.56% 79.33%, 54.28% 86.67%, 50.00% 94.00%, 45.72% 86.67%, 41.44% 79.33%, 37.17% 72.00%, 32.89% 64.67%, 28.61% 57.33%, 24.33% 50.00%, 28.61% 42.67%, 32.89% 35.33%, 37.17% 28.00%, 41.44% 20.67%, 45.72% 13.33%); }
  85.7143% { clip-path:polygon(50.00% 28.83%, 50.76% 25.22%, 55.50% 17.12%, 65.56% 10.67%, 78.58% 10.96%, 89.65% 18.91%, 94.00% 31.58%, 89.65% 45.19%, 78.58% 57.71%, 65.56% 69.00%, 55.50% 79.04%, 50.76% 86.51%, 50.00% 89.33%, 49.24% 86.51%, 44.50% 79.04%, 34.44% 69.00%, 21.42% 57.71%, 10.35% 45.19%, 6.00% 31.58%, 10.35% 18.91%, 21.42% 10.96%, 34.44% 10.67%, 44.50% 17.12%, 49.24% 25.22%); }
}
@media (prefers-reduced-motion: reduce){
  .shape-morph{ animation:none; }
}

/* Scroll-linked morph scene: a shape that rolls square -> hexagon
   -> circle across the full screen width as the user scrolls past
   this section, rotating and bouncing with the shape's own rolling
   physics, shadow included. Position, rotation, clip-path and
   bounce are all driven by scroll progress in JS — no CSS animation
   loop, so this stays lightweight. */
.morph-scene{
  position:relative;
  height:160px;
  overflow:hidden;
}
.morph-scene .horizon-line{
  position:absolute;
  left:0; right:0;
  top:62%;
  height:1px;
  background:linear-gradient(to right, transparent, var(--cream-line) 15%, var(--cream-line) 85%, transparent);
}
.morph-scene .morph-shadow{
  position:absolute;
  top:0;
  left:0;
  width:70px;
  height:70px;
  background:rgba(30,24,20,0.18);
  will-change:transform;
}
.morph-scene .morph-shape{
  position:absolute;
  top:0;
  left:0;
  width:70px;
  height:70px;
  background:var(--brass);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .morph-scene .morph-shape, .morph-scene .morph-shadow{ transform:none !important; left:50%; top:62%; }
}

.eyebrow{
  font-family:'EB Garamond', serif;
  font-size:13px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--brass-deep);
  margin-bottom:22px;
  display:flex;
  align-items:center;
  gap:14px;
}

/* header: full logo block, scrolls away normally */
.site-header{
  display:flex;
  justify-content:flex-start;
  padding:26px 40px 16px;
  background:var(--bg);
  color:var(--ink);
}

/* nav: slim bar with just links/hamburger, stays reachable via sticky */
nav{
  position:sticky;
  top:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:16px 40px;
  background:var(--bg);
  border-bottom:1px solid var(--cream-line);
}
.brand{
  font-family:'Playfair Display', serif;
  font-size:17px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:inherit;
  line-height:1.1;
}
.brand-script{
  font-family:'Allura', cursive;
  font-size:2.2em;
  text-transform:none;
  letter-spacing:normal;
  color:var(--brass);
  margin-left:4px;
}
@media (max-width:860px){
  .brand{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .brand-script{
    margin-left:0;
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .brand-script::before, .brand-script::after{
    content:"";
    height:1px;
    width:56px;
    display:inline-block;
  }
  .brand-script::before{
    background:linear-gradient(to left, var(--brass-deep), transparent);
  }
  .brand-script::after{
    background:linear-gradient(to right, var(--brass-deep), transparent);
  }
}
nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:40px;
  margin:0;
  padding:0;
  font-family:'EB Garamond', serif;
  font-size:14px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
nav a{
  text-decoration:none;
  color:var(--ink-soft);
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:color .25s, border-color .25s;
}
nav a:hover, nav a:focus-visible{
  color:var(--brass-deep);
  border-color:var(--brass);
}
nav a.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--brass-deep);
  color:var(--brass-deep);
  padding:8px 16px 8px 18px;
  border-radius:999px;
  transition:background .25s, color .25s;
}
nav a.nav-cta:hover, nav a.nav-cta:focus-visible{
  background:var(--brass-deep);
  color:var(--bg);
  border-color:var(--brass-deep);
}
nav a.nav-cta svg{ transition:transform .25s ease; }
nav a.nav-cta:hover svg, nav a.nav-cta:focus-visible svg{ transform:translateX(3px); }
.mobile-menu a.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  font-style:normal;
  border:1px solid var(--brass-deep);
  color:var(--brass-deep);
  border-radius:999px;
  padding:12px 26px 12px 30px;
}
.hamburger{
  display:none;
  background:none;
  border:none;
  border-radius:0;
  padding:6px;
  cursor:pointer;
  flex-direction:column;
  gap:5px;
  z-index:110;
}
.hamburger:hover, .hamburger:focus, .hamburger:active{
  background:none;
  color:inherit;
}
.hamburger span{
  display:block;
  width:26px;
  height:1px;
  background:var(--ink);
  transition:transform .3s ease, opacity .3s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.mobile-menu{
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:105;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:36px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.mobile-menu.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}
.mobile-menu a{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:28px;
  text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid transparent;
  padding-bottom:4px;
  transition:color .25s, border-color .25s;
}
.mobile-menu a:hover, .mobile-menu a:focus-visible{
  color:var(--brass-deep);
  border-color:var(--brass);
}

@media (max-width:640px){
  nav ul{display:none;}
  .hamburger{display:flex;}
}
@media (prefers-reduced-motion: reduce){
  .hamburger span, .mobile-menu{transition:none;}
}

.sec-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 72px;
}
.sec-head .eyebrow{ justify-content:center; }
.sec-head h2{font-size:clamp(30px,4vw,42px);}
.sec-head p{color:var(--ink-soft); margin-top:16px; font-size:17px;}
@media (max-width:860px){
  .sec-head{ text-align:center !important; margin-left:auto !important; }
  .sec-head h2{ text-align:center !important; }
}

/* featured piece */
.piece-gallery{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:7%;
  -webkit-overflow-scrolling:touch;
  background:var(--bg-panel);
  border:1px solid var(--cream-line);
  padding:0 7%;
  scrollbar-width:none;
  cursor:grab;
}
.piece-gallery::-webkit-scrollbar{ display:none; }
.piece-gallery.dragging{ cursor:grabbing; scroll-snap-type:none; }
.piece-gallery .slide{
  flex:0 0 86%;
  scroll-snap-align:center;
  position:relative;
}
.piece-gallery .slide img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
  -webkit-user-drag:none;
  user-select:none;
}
.piece-gallery-wrap{
  position:relative;
}
.gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:rgba(20,16,12,0.55);
  color:#f7f2e8;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:background .2s, opacity .2s;
}
.gallery-arrow:hover{ background:rgba(20,16,12,0.75); }
.gallery-arrow:disabled{ opacity:0.35; cursor:default; pointer-events:none; }
.gallery-arrow--prev{ left:12px; }
.gallery-arrow--next{ right:12px; }
.gallery-arrow svg{ width:18px; height:18px; }

/* Mobile: break the gallery out to the screen edges and let each
   photo fill the full viewport width, taller crop, no framed panel.
   Desktop keeps the contained, framed look above this breakpoint. */
@media (max-width:860px){
  .product-grid .piece-gallery-wrap{
    margin-left:-40px;
    margin-right:-40px;
    width:calc(100% + 80px);
  }
  .product-grid .piece-gallery{
    gap:0;
    background:none;
    border:none;
    border-radius:0;
    padding:0;
    scroll-padding-left:0;
  }
  .product-grid .piece-gallery .slide{
    flex:0 0 100%;
  }
  .product-grid .piece-gallery .slide img{
    aspect-ratio:2/3;
  }
  .gallery-arrow--prev{ left:16px; }
  .gallery-arrow--next{ right:16px; }
}
.gallery-dots{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:18px;
}
.gallery-dots .dot{
  width:9px;
  height:9px;
  padding:0;
  border-radius:50%;
  border:1.5px solid var(--brass-deep);
  background:var(--bg);
  cursor:pointer;
  transition:background .25s, transform .25s, width .25s;
}
.gallery-dots .dot:hover{
  background:var(--brass);
}
.gallery-dots .dot.active{
  background:var(--brass-deep);
  border-color:var(--brass-deep);
  width:22px;
  border-radius:5px;
}
.spec-list{
  border-top:1px solid var(--line);
}
.spec-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
}
.spec-row span:first-child{color:var(--ink-soft); letter-spacing:0.06em; text-transform:uppercase; font-size:12px; flex-shrink:0;}
.spec-row span:last-child{text-align:right;}
.info-notes{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.info-note-label{
  display:block;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:4px;
}
.info-note p{
  font-size:14px;
  color:var(--ink-soft);
  margin:0;
  max-width:48ch;
}

/* about */
.about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  max-width:64ch;
}
@media (min-width:700px){
  .about-grid{
    grid-template-columns:160px 1fr;
    gap:48px;
    max-width:none;
    align-items:start;
  }
}
.about-grid p{color:var(--ink-soft); margin-bottom:20px; max-width:52ch;}
.about-photo{
  background:var(--bg-panel);
  border:1px solid var(--cream-line);
  padding:10px;
  max-width:180px;
  margin:0 auto;
}
@media (min-width:700px){
  .about-photo{ max-width:none; width:100%; margin:0; }
}
.about-photo img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  opacity:0.7;
}

/* contact */
#contact .wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:70px;
  row-gap:24px;
}
@media (max-width:800px){
  #contact .wrap{
    grid-template-columns:1fr;
    row-gap:0;
  }
}
#contact .sec-head{ margin-bottom:24px; }
form{display:flex; flex-direction:column; gap:20px;}
.form-status{
  font-size:14px;
  color:var(--status-available);
  min-height:1.2em;
}
.form-status.is-error{
  color:var(--status-sold);
}
label{
  font-size:12px;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:6px;
  display:block;
}
input, textarea{
  width:100%;
  background:var(--bg-panel);
  border:1px solid var(--cream-line);
  border-radius:6px;
  color:var(--ink);
  padding:13px 14px;
  font-family:'EB Garamond', serif;
  font-size:16px;
}
input:focus, textarea:focus{
  outline:none;
  border-color:var(--brass);
  background:var(--bg);
  box-shadow:0 0 0 3px rgba(138,106,63,0.15);
}
button:focus-visible, a:focus-visible{
  outline:none;
  border-color:var(--brass);
}
textarea{resize:vertical; min-height:110px;}
button{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:none;
  border:1px solid var(--brass-deep);
  border-radius:999px;
  color:var(--brass-deep);
  padding:13px 26px 13px 30px;
  font-family:'EB Garamond', serif;
  font-size:14px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s, color .25s;
  margin-top:6px;
}
button:hover{background:var(--brass-deep); color:var(--bg);}
button svg{ transition:transform .25s ease; }
button:hover svg, button:focus-visible svg{ transform:translateX(3px); }
.contact-info .row{
  display:flex;
  justify-content:space-between;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-size:16px;
}
.contact-info .row span:first-child{color:var(--ink-soft); font-size:13px; text-transform:uppercase; letter-spacing:0.08em;}

#commission{
  background:var(--bg-panel);
  text-align:center;
}
#commission .eyebrow{justify-content:center;}
#commission h2{font-size:clamp(30px,4vw,44px); max-width:16ch; margin:0 auto;}
#commission p{color:var(--ink-soft); max-width:56ch; margin:22px auto 0; font-size:18px;}
.commission-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:38px;
  border:1px solid var(--brass-deep);
  border-radius:999px;
  color:var(--brass-deep);
  text-decoration:none;
  padding:14px 30px 14px 34px;
  font-size:14px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  transition:background .25s, color .25s;
}
.commission-cta:hover, .commission-cta:focus-visible{
  background:var(--brass-deep);
  color:var(--bg);
}
.commission-cta svg{ transition:transform .25s ease; }
.commission-cta:hover svg, .commission-cta:focus-visible svg{ transform:translateX(3px); }

footer{
  padding:40px;
  text-align:center;
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.footer-follow{
  font-family:'EB Garamond', serif;
  font-size:14px;
  letter-spacing:0.02em;
  text-transform:none;
  color:var(--ink-soft);
  margin-bottom:22px;
}
.footer-social{
  display:flex;
  justify-content:center;
  gap:22px;
  margin-bottom:18px;
}
.footer-social a{
  display:inline-flex;
  color:var(--ink-soft);
  transition:color .25s, transform .25s;
}
.footer-social a:hover{
  color:var(--brass-deep);
  transform:translateY(-2px);
}
.footer-social svg{
  width:28px;
  height:28px;
}

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ------------------------------------------------------------
   Gallery (index.html) — a simple stacked list of pieces.
   ------------------------------------------------------------ */
.gallery-list{
  display:flex;
  flex-direction:column;
  gap:56px;
  max-width:640px;
  margin:0 auto;
}
.gallery-list .gallery-card{
  display:block;
  text-decoration:none;
  color:var(--ink);
}
.gallery-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--bg-panel);
  border:1px solid var(--cream-line);
}
/* Mobile: give each gallery photo a modest inset (16px from the
   screen edge) instead of the page's normal 40px side padding —
   noticeably bigger, but still visibly "framed" and contained, so
   it stays distinct from the full-bleed treatment on product pages
   and preserves that small-preview-to-big-reveal feeling on tap.
   Desktop keeps the original framed look inside the centered
   640px column. */
@media (max-width:860px){
  .gallery-media{
    margin-left:-24px;
    margin-right:-24px;
    width:calc(100% + 48px);
  }
}

/* Sold / Available status tags — a plain info label (not a
   button/pill shape, so it doesn't read as a CTA). Used beside
   the piece title on gallery cards and near the title on
   product pages — never overlaid on the artwork itself. */
.status-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:'EB Garamond', serif;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
  padding:6px 11px 6px 9px;
  border-radius:4px;
}
.status-tag::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
}
.status-tag--available{ color:var(--status-available); background:rgba(82,104,74,0.11); }
.status-tag--sold{ color:var(--status-sold); background:rgba(156,74,61,0.1); }
.status-tag--tbd{ color:var(--ink-soft); background:rgba(116,105,92,0.1); }
.parallax-layer{
  position:absolute;
  top:-10%;
  left:0;
  width:100%;
  height:120%;
  display:flex;
  align-items:center;
  justify-content:center;
  will-change:transform;
}
.parallax-layer svg{
  width:62%;
  height:62%;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.parallax-layer img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.gallery-card:hover .parallax-layer svg,
.gallery-card:hover .parallax-layer img{
  transform:scale(1.06);
}
.gallery-caption{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-top:20px;
  padding-bottom:10px;
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.gallery-caption > div{ min-width:0; }
.gallery-caption .see-more{ flex-shrink:0; }
.gallery-card:hover .gallery-caption{
  border-color:var(--line);
}
.gallery-caption h3{
  font-size:26px;
  margin:0 0 6px;
}
.piece-species{
  display:block;
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:14px;
  color:var(--ink-soft);
  margin:0 0 10px;
}
.gallery-teaser{
  font-size:15px;
  color:var(--ink-soft);
  margin:6px 0 0;
  max-width:44ch;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gallery-caption .see-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  font-family:'EB Garamond', serif;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--brass-deep);
  border:1px solid var(--brass-deep);
  border-radius:999px;
  padding:8px 16px;
  white-space:nowrap;
  transition:background-color .25s ease, color .25s ease;
}
.gallery-caption .see-more svg{
  transition:transform .25s ease;
}
.gallery-card:hover .see-more{
  background:var(--brass-deep);
  color:var(--bg);
}
.gallery-card:hover .see-more svg{
  transform:translateX(3px);
}
@media (prefers-reduced-motion: reduce){
  .parallax-layer{ transform:none !important; }
  .parallax-layer svg{ transition:none; }
}

/* ------------------------------------------------------------
   Product detail pages only
   (sculptures/hawk-metal-sculpture.html,
   sculptures/barn-owl-metal-sculpture.html)
   ------------------------------------------------------------ */

.product-hero{
  padding-top: 20px;
  padding-bottom: 100px;
}
.back-link{
  position:sticky;
  top:60px;
  z-index:50;
  display:block;
  background:var(--bg);
  border-bottom:1px solid var(--cream-line);
  box-shadow:0 2px 10px rgba(42,37,33,0.06);
  padding:12px 0;
  margin-bottom:24px;
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
}
.back-link:hover{ color:var(--brass-deep); }
@media (max-width:860px){
  .back-link{
    margin-left:-40px;
    margin-right:-40px;
    width:calc(100% + 80px);
    padding:12px 40px;
  }
}
.product-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:start;
}
@media (max-width:860px){ .product-grid{grid-template-columns:1fr;} }
.price-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin:18px 0 26px;
}
.price-row .price-tag{
  margin:0;
}
.price-tag{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:28px;
  color:var(--brass-deep);
  margin:18px 0 26px;
}
.price-tag--sold{
  color:var(--ink-soft);
}
.purchase-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:30px;
  background:var(--brass-deep);
  color:var(--bg);
  border:1px solid var(--brass-deep);
  border-radius:999px;
  padding:15px 30px 15px 34px;
  font-family:'EB Garamond', serif;
  font-size:15px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  transition:opacity .25s;
}
.purchase-btn:hover{ opacity:0.85; }
.purchase-btn svg{ transition:transform .25s ease; }
.purchase-btn:hover svg, .purchase-btn:focus-visible svg{ transform:translateX(3px); }
.purchase-note{
  margin-top:14px;
  font-size:13px;
  color:var(--ink-soft);
  font-style:italic;
}