main{ padding: clamp(1rem, 2vw, 1.5rem); }

.carving-hero{
  position:relative;
  isolation:isolate;
  background-image:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('/assets/images/CP Homepage static.png');
  background-size:cover;
  background-position:center 30%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: clamp(2rem, 5vw, 5rem) 1.25rem;
  color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

@media (hover:hover){
  .carving-hero:hover{ transform: perspective(1000px) translateZ(0); }
  .carving-hero:hover .carving-text{ transform: translateY(-2px); transition: transform .4s ease; }
}

.carving-text{ max-width: 900px; margin: 0 auto; }
.carving-hero h2{
  font-family: Creepster, cursive;
  font-size: var(--step-4);
  margin: 0 0 .25rem;
  letter-spacing:.6px;
  color:#fff;
  animation: spooky-flicker 7.5s linear infinite;
}
.carving-hero p{ font-size: var(--step-0); margin:.5rem 0 .75rem; color:#f6f6f6; }

footer{
  padding:2rem 1rem; text-align:center; color:var(--muted);
}
.social-link{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius: 999px; padding:.35rem .75rem;
  background: #141414; border:1px solid #1f1f1f;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.social-link:hover{
  border-color: var(--ring);
  box-shadow: 0 0 0 6px var(--ring);
  transform: translateY(-1px);
}
.social-icon{ width:1.1rem; height:1.1rem; filter: grayscale(1) brightness(1.6); }

.reveal{ opacity:0; transform: translateY(14px); }
.reveal.is-visible{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
}

@keyframes spooky-flicker{
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity:1; }
  20%, 24%, 55% { opacity:.72; }
  23% { opacity:.45; }
}

.container{ max-width: 1100px; margin:0 auto; padding-inline: 1rem; }

.home-eyebrow{
  margin:0 0 .15rem;
  color: color-mix(in oklab, var(--accent) 85%, #ffd8c4);
  font: 600 var(--step-0) / 1 Inter, system-ui, sans-serif;
  letter-spacing:.12em;
  text-transform: uppercase;
}

.home-title{
  font-family: Creepster, cursive;
  font-size: var(--step-4);
  margin:.15rem 0 .4rem;
  letter-spacing:.6px;
  animation: spooky-flicker 7s linear infinite;
}

.home-sub{
  margin:0 auto;
  font-size: var(--step-1);
  color:#f1f1f1;
  max-width: 60ch;
  opacity:.96;
}

.gallery-title{
  font-family: Creepster, cursive;
  font-size: var(--step-3);
  margin: 0 0 .75rem;
  letter-spacing:.5px;
  color:#d3670e;
  text-shadow: 0 0 14px color-mix(in oklab, var(--accent) 35%, transparent);
  animation: spooky-flicker 8s linear infinite;
}

.gallery-intro{
  max-width: 1100px;
  margin: clamp(1rem, 4vw, 2rem) auto 1.25rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255,60,0,.06), transparent 60%),
    var(--surface);
  border:1px solid #222;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.video-wrapper{
  position:relative;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius) - 2px);
  overflow:hidden;
  outline:1px solid rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.gallery-video{
  width:100%; height:100%; object-fit:cover; display:block;
  background:#000;
}
.gallery-video:focus-visible{
  outline:none;
  box-shadow: 0 0 0 6px var(--ring);
}

.gallery-grid{
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  padding: 0 clamp(1rem, 3vw, 1.5rem);
}
.gallery-grid h3{
  font-family: Creepster, cursive;
  font-size: var(--step-2);
  margin: 0 0 .75rem;
  color: var(--accent);
  letter-spacing:.4px;
  text-shadow: 0 0 14px color-mix(in oklab, var(--accent) 40%, transparent);
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.6rem, 2vw, 1rem);
}
@media (max-width: 600px){
  .grid{ grid-template-columns: repeat(6, 1fr); }
}

.grid img{
  width:100%; height:auto; display:block;
  grid-column: span 4;              /* 3 per row on desktop (12/4) */
  border-radius: var(--radius);
  outline: 1px solid rgba(255,255,255,.05);
  box-shadow: var(--shadow);
  filter: saturate(.92) contrast(1.02);
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}
@media (max-width: 900px){
  .grid img{ grid-column: span 6; } /* 2 per row */
}
@media (max-width: 520px){
  .grid img{ grid-column: span 6; } /* still 2 per row on small phones */
}

/* Subtle hover lift/glow */
@media (hover:hover){
  .grid img:hover{
    transform: translateY(-3px);
    filter: saturate(1) contrast(1.05);
    box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent);
  }
}