/* ============================================================
   IMAGINE BY THANE — 70s hippy stylesheet
   Palette: cream #FBF1DB · burnt orange #DE5B25 · marigold #F2A93B
            avocado #7E8C3C · chocolate #3B2417 · magenta #C2417E
   ============================================================ */

:root{
  --cream:#FBF1DB;
  --orange:#DE5B25;
  --gold:#F2A93B;
  --green:#7E8C3C;
  --brown:#3B2417;
  --pink:#C2417E;
  --display:'Shrikhand', 'Cooper Black', Georgia, serif;
  --body:'Quicksand', 'Trebuchet MS', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  background:var(--cream);
  color:var(--brown);
  line-height:1.6;
  font-size:1.05rem;
}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:4px dashed var(--pink);outline-offset:3px;border-radius:6px;}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 1.2rem;
  background:var(--cream);
  border-bottom:4px solid var(--brown);
}
.nav__brand{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;
  font-family:var(--display);
  font-size:1.25rem;color:var(--orange);
}
.nav__badge{width:44px;height:44px;transition:transform .5s;}
.nav__brand:hover .nav__badge{transform:rotate(180deg);}
.nav__links{display:flex;gap:1.4rem;}
.nav__links a{
  text-decoration:none;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;font-size:.9rem;
  border-bottom:3px solid transparent;padding-bottom:2px;
}
.nav__links a:hover{border-color:var(--pink);color:var(--pink);}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--cream);}
.hero__sky{
  max-width:820px;margin:0 auto;padding:3rem 1.2rem 6rem;
  text-align:center;
}
.hero__arch{width:min(480px,88%);margin:0 auto -1.5rem;display:block;}
.hero__arch .a1,.hero__arch .a2,.hero__arch .a3,.hero__arch .a4{
  stroke-dasharray:1000;stroke-dashoffset:1000;
  animation:draw 1.6s ease-out forwards;
}
.hero__arch .a2{animation-delay:.15s;}
.hero__arch .a3{animation-delay:.3s;}
.hero__arch .a4{animation-delay:.45s;}
.hero__sun{transform-origin:320px 320px;animation:rise 1.4s ease-out .3s backwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes rise{from{transform:translateY(70px);opacity:0;}to{transform:translateY(0);opacity:1;}}

.hero__title{
  font-family:var(--display);
  font-size:clamp(3rem, 9vw, 5.5rem);
  line-height:.95;
  color:var(--orange);
  text-shadow:4px 4px 0 var(--gold);
}
.hero__title span{
  display:block;font-size:.45em;color:var(--brown);
  letter-spacing:.25em;text-shadow:none;text-transform:uppercase;
}
.hero__tag{
  max-width:34rem;margin:1.2rem auto 2rem;
  font-size:1.15rem;font-weight:600;
}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;
  font-family:var(--display);
  font-size:1.05rem;
  text-decoration:none;
  padding:.7rem 1.6rem;
  border-radius:999px;
  border:4px solid var(--brown);
  box-shadow:5px 5px 0 var(--brown);
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--brown);}
.btn--orange{background:var(--orange);color:var(--cream);}
.btn--pink{background:var(--pink);color:var(--cream);}
.btn--cream{background:var(--cream);color:var(--brown);}

/* ---------- WAVES & SECTIONS ---------- */
.wave{display:block;width:100%;height:90px;position:absolute;bottom:-1px;left:0;}
.section{position:relative;padding:4.5rem 0 8rem;}
.section--green{background:var(--green);color:var(--cream);}
.section--cream{background:var(--cream);color:var(--brown);}
.section--orange{background:var(--orange);color:var(--cream);padding-bottom:5rem;}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.2rem;text-align:center;}
.wrap--narrow{max-width:720px;}

.eyebrow{
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  font-size:.85rem;color:var(--gold);
}
.eyebrow--orange{color:var(--pink);}
.section__title{
  font-family:var(--display);
  font-size:clamp(2.2rem, 6vw, 3.6rem);
  margin:.3rem 0 1rem;
  color:var(--cream);
  text-shadow:3px 3px 0 var(--brown);
}
.section__title--dark{color:var(--orange);text-shadow:3px 3px 0 var(--gold);}
.section__lead{max-width:40rem;margin:0 auto 2.5rem;font-weight:600;}
.section__lead--dark{color:var(--brown);}
.section__more{margin-top:2.5rem;}

/* ---------- YOUTUBE PLAYER + REEL ---------- */
.player{
  max-width:780px;margin:0 auto 2rem;
  border:5px solid var(--brown);
  border-radius:24px;
  overflow:hidden;
  box-shadow:8px 8px 0 var(--brown);
  background:#000;
  aspect-ratio:16/9;
}
.player iframe{width:100%;height:100%;border:0;display:block;}

.reel{
  display:flex;gap:1rem;
  overflow-x:auto;
  padding:.5rem .2rem 1.2rem;
  scroll-snap-type:x mandatory;
}
.reel::-webkit-scrollbar{height:10px;}
.reel::-webkit-scrollbar-thumb{background:var(--gold);border-radius:999px;}
.reel::-webkit-scrollbar-track{background:rgba(0,0,0,.15);border-radius:999px;}
.reel__item{
  flex:0 0 240px;
  scroll-snap-align:start;
  text-decoration:none;
  background:var(--cream);
  color:var(--brown);
  border:4px solid var(--brown);
  border-radius:18px;
  overflow:hidden;
  box-shadow:5px 5px 0 var(--brown);
  transition:transform .15s;
  text-align:left;
  cursor:pointer;
  font-family:var(--body);
}
.reel__item:hover{transform:translateY(-4px) rotate(-1deg);}
.reel__thumb{width:100%;aspect-ratio:16/9;object-fit:cover;}
.reel__title{
  font-size:.85rem;font-weight:700;
  padding:.55rem .7rem .7rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------- ETSY PRODUCT GRID ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:1.6rem;
  text-align:left;
}
.card{
  text-decoration:none;
  background:#fff;
  border:4px solid var(--brown);
  border-radius:22px;
  overflow:hidden;
  box-shadow:7px 7px 0 var(--gold);
  transition:transform .15s, box-shadow .15s;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-5px) rotate(1deg);box-shadow:7px 12px 0 var(--pink);}
.card__img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--gold);}
.card__img--placeholder{
  display:flex;align-items:center;justify-content:center;
  font-size:4.5rem;
  background:repeating-linear-gradient(45deg, var(--gold), var(--gold) 18px, #f6b95c 18px, #f6b95c 36px);
}
.card__body{padding:1rem 1.1rem 1.2rem;}
.card__body h3{
  font-family:var(--display);font-size:1.1rem;line-height:1.25;
  color:var(--brown);margin-bottom:.35rem;
}
.card__price{font-weight:700;color:var(--green);font-size:.95rem;margin-bottom:.6rem;}
.card__go{
  font-weight:700;color:var(--orange);
  text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;
}
.card:hover .card__go{color:var(--pink);}

/* ---------- ABOUT ---------- */
.about__logo{width:min(340px,80%);margin:0 auto 1rem;}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--brown);
  color:var(--cream);
  text-align:center;
  padding:2.5rem 1.2rem;
  font-weight:600;
}
.footer__peace{width:52px;height:52px;margin:0 auto 1rem;animation:spin 14s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.footer__links{margin-top:.4rem;}
.footer__links a{color:var(--gold);font-weight:700;}
.footer__links a:hover{color:var(--pink);}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ---------- MOBILE ---------- */
@media (max-width:600px){
  .nav{flex-direction:column;gap:.5rem;}
  .reel__item{flex-basis:200px;}
  .section{padding:3.2rem 0 7rem;}
}