/* ===== The Humbled Door — shared styles ===== */
:root{
  --sage:#8a9578;
  --sage-deep:#5c6b4d;
  --cream:#fdf8ee;
  --blush:#f6d3c1;
  --blush-deep:#e9a98f;
  --coral:#e2814f;      /* brighter terracotta */
  --coral-deep:#cf6635;
  --peach:#f8e4d1;
  --ink:#3a352c;
  --gold:#d9ab52;
  --sun:#f2b705;        /* pop accent */
  --shadow:0 18px 50px -20px rgba(58,53,44,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',sans-serif;color:var(--ink);background:var(--cream);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.1}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{text-transform:uppercase;letter-spacing:.32em;font-size:.72rem;font-weight:600;color:var(--coral-deep)}

.btn{
  display:inline-block;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  font-size:.78rem;padding:15px 34px;border-radius:40px;transition:.3s ease;cursor:pointer;
  border:1.5px solid var(--sage-deep);
}
.btn-solid{background:var(--sage-deep);color:var(--cream)}
.btn-solid:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--sage-deep)}
.btn-ghost:hover{background:var(--sage-deep);color:var(--cream);transform:translateY(-2px)}
.btn-coral{background:var(--coral);border-color:var(--coral);color:#fff}
.btn-coral:hover{background:var(--coral-deep);border-color:var(--coral-deep);transform:translateY(-2px)}

/* NAV */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:18px 40px;transition:.4s ease;
}
header.nav.scrolled{background:rgba(253,248,238,.94);backdrop-filter:blur(10px);
  box-shadow:0 6px 24px -18px rgba(0,0,0,.5);padding:12px 40px}
.brand{font-family:'Cormorant Garamond',serif;font-size:1.55rem;letter-spacing:.02em;color:var(--ink)}
.brand span{color:var(--coral)}
nav.links{display:flex;gap:30px;align-items:center}
nav.links a{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;position:relative}
nav.links a::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:1.5px;background:var(--coral);transition:.3s}
nav.links a:hover::after,nav.links a.active::after{width:100%}
.nav-cta{padding:10px 22px;border-radius:30px;background:var(--coral);color:var(--cream)!important;letter-spacing:.1em}
.nav-cta:hover{background:var(--sage-deep)}
.nav-cta::after{display:none!important}
.menu-btn{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink)}
.mobile-menu{position:fixed;inset:0;background:var(--cream);z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px;transform:translateY(-100%);transition:.4s ease}
.mobile-menu.open{transform:none}
.mobile-menu a{font-family:'Cormorant Garamond',serif;font-size:2rem}
.mobile-menu .close{position:absolute;top:24px;right:28px;font-size:2rem;background:none;border:none;cursor:pointer}

/* MARQUEE */
.marquee{background:var(--sage-deep);color:var(--cream);overflow:hidden;padding:14px 0;white-space:nowrap}
.marquee div{display:inline-block;animation:slide 24s linear infinite;font-family:'Cormorant Garamond',serif;font-size:1.3rem;letter-spacing:.04em}
.marquee span{margin:0 26px;opacity:.92}
.marquee span::before{content:'✦';margin-right:26px;color:var(--sun)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTIONS */
section{padding:100px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 60px}
.sec-head h2{font-size:clamp(2.4rem,5vw,3.4rem);margin:14px 0}
.sec-head p{color:#6a655b;font-size:1.08rem}

/* SUBPAGE HERO */
.page-hero{position:relative;padding:170px 0 90px;text-align:center;
  background:linear-gradient(115deg,#f7e7d6,#fdf8ee 55%,#f3e6dd);overflow:hidden}
.page-hero h1{font-size:clamp(2.8rem,6.5vw,4.6rem);margin:16px 0 10px}
.page-hero h1 em{font-style:italic;color:var(--coral)}
.page-hero p{max-width:560px;margin:0 auto;color:#5c584f;font-size:1.12rem}
.page-hero .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.page-hero .pb1{width:340px;height:340px;background:var(--blush);top:-60px;right:-40px}
.page-hero .pb2{width:300px;height:300px;background:#cdd3c0;bottom:-120px;left:-60px}
.page-hero .wrap{position:relative;z-index:2}

/* CARDS (shop) */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 14px 40px -26px rgba(58,53,44,.7);transition:.35s ease;position:relative}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 54px -24px rgba(58,53,44,.6)}
.card .img{aspect-ratio:1/1;overflow:hidden;background:#efe7d9}
.card .img img{width:100%;height:100%;object-fit:cover;transition:.6s ease}
.card:hover .img img{transform:scale(1.07)}
.card .body{padding:20px 22px 24px}
.card .body h3{font-size:1.5rem}
.card .price{color:var(--coral-deep);font-weight:500;letter-spacing:.05em;margin-top:2px}
.card .tag{position:absolute;top:14px;left:14px;background:var(--sun);color:var(--ink);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:20px;font-weight:600}
.card .tag.sold{background:var(--ink);color:var(--cream)}
.shop-more{text-align:center;margin-top:50px}

/* FOOTER */
footer{background:var(--ink);color:#e8e3d8;padding:70px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:44px}
footer .brand{color:var(--cream);font-size:1.9rem;margin-bottom:12px}
footer .brand span{color:var(--sun)}
footer p{color:#b3ae9f;font-size:.95rem;max-width:300px}
.foot-col h4{text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;color:var(--gold);margin-bottom:16px;font-weight:600}
.foot-col a{display:block;color:#cfcabb;margin-bottom:10px;font-size:.95rem;transition:.2s}
.foot-col a:hover{color:var(--cream);padding-left:4px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:#8f8a7c}
.socials{display:flex;gap:14px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:.3s}
.socials a:hover{background:var(--coral);border-color:var(--coral);color:#fff}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:.8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  nav.links{display:none}
  .menu-btn{display:block}
  .shop-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:560px){
  .shop-grid{grid-template-columns:1fr}
  header.nav{padding:14px 20px}
  .wrap{padding:0 20px}
}