:root{
  --dove:#d8d4d1;
  --dove2:#f3f0ef;
  --black:#1d1b1b;
  --rose:#b76e79;
  --rose2:#8f4e57;
  --pink:#d8a7ad;
  --cream:#fffaf5;
  --sage:#9aa88f;
  --wood:#87685d;
  --shadow:0 22px 58px rgba(29,27,27,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Georgia, "Times New Roman", serif;
  color:var(--black);
  background:
    radial-gradient(circle at 15% 5%, rgba(216,167,173,.18), transparent 28%),
    linear-gradient(180deg,var(--dove2),#fffaf6);
  line-height:1.62;
}
a{color:inherit}
img{max-width:100%;height:auto}
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(243,240,239,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(183,110,121,.24);
}
.nav-inner{max-width:1220px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:bold;letter-spacing:.02em}
.brand img{width:34px;height:34px}
.links{display:flex;gap:18px;flex-wrap:wrap;font-size:.95rem}
.links a{text-decoration:none}
.links a:hover{color:var(--rose2)}
.hero{
  min-height:94vh;
  position:relative;display:grid;place-items:center;text-align:center;color:white;padding:110px 22px 80px;overflow:hidden;
  background:
    linear-gradient(rgba(29,27,27,.57),rgba(29,27,27,.43)),
    url("assets/banner.png") center/cover no-repeat,
    linear-gradient(135deg,#746f70,#d8a7ad);
}
.hero:after{
  content:"";position:absolute;inset:auto 0 0;height:180px;
  background:linear-gradient(transparent,rgba(243,240,239,.98));
}
.hero-card{
  position:relative;z-index:2;max-width:920px;padding:46px 30px;border-radius:36px;
  background:rgba(29,27,27,.34);border:1px solid rgba(255,255,255,.32);box-shadow:var(--shadow);
  animation:fadeUp 1.1s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.kicker{letter-spacing:.22em;text-transform:uppercase;color:#f0cbd0;font-size:.85rem}
h1,h2,h3{line-height:1.14;margin:0 0 18px}
h1{font-size:clamp(3rem,8vw,6.7rem);font-weight:400}
h2{font-size:clamp(2rem,4vw,3.45rem);font-weight:400}
h3{font-size:1.44rem;color:var(--rose2)}
.hero p{font-size:1.2rem;max-width:760px;margin:12px auto}
.btn-row{display:flex;justify-content:center;gap:13px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:999px;text-decoration:none;background:var(--rose);color:#fff;
  border:1px solid rgba(255,255,255,.32);box-shadow:0 10px 22px rgba(0,0,0,.14);font-family:inherit;cursor:pointer;
}
.btn.secondary{background:rgba(255,255,255,.16)}
.btn.dark{background:var(--black)}
.btn:hover{transform:translateY(-1px)}
.icon-inline{width:24px;height:24px;vertical-align:middle}
.hearth-button{
  display:inline-flex;align-items:center;gap:10px;margin-top:25px;border:1px solid rgba(244,213,217,.72);
  background:rgba(255,255,255,.14);color:#fff;border-radius:999px;padding:12px 20px;font-family:inherit;cursor:pointer;font-size:1.03rem
}
.hearth-button img{width:30px;height:30px}
.hearth-button.on{background:rgba(183,110,121,.9);box-shadow:0 0 34px rgba(244,213,217,.62)}
.fire-message{min-height:28px;color:#ffe8ec;font-style:italic;margin-top:10px}
section{padding:78px 22px}
.container{max-width:1200px;margin:auto}
.split{display:grid;grid-template-columns:1.07fr .93fr;gap:36px;align-items:center}
.card{
  background:rgba(255,255,255,.80);border:1px solid rgba(183,110,121,.18);border-radius:30px;padding:34px;box-shadow:var(--shadow)
}
.soft{background:linear-gradient(135deg,#fff,#f2e1e4)}
.dove{background:var(--dove)}
.pink{background:linear-gradient(135deg,#fbf2f3,#e7c6ca)}
.portrait{border-radius:34px;box-shadow:var(--shadow);border:8px solid var(--cream)}
.book{max-width:330px;display:block;margin:auto;border-radius:10px;box-shadow:0 30px 55px rgba(0,0,0,.29)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product,.blog-card{
  background:white;border-radius:26px;padding:24px;border:1px solid rgba(183,110,121,.18);box-shadow:0 12px 28px rgba(0,0,0,.07)
}
.icon{font-size:2.05rem}
.price{color:var(--rose2);font-weight:bold}
.quote{font-size:1.22rem;font-style:italic;color:#5a4b4b;border-left:4px solid var(--rose);padding-left:18px}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.badge{background:#fff;border:1px solid rgba(183,110,121,.25);padding:9px 13px;border-radius:999px}
.form{display:grid;gap:12px;max-width:580px;margin:auto}
input,textarea{width:100%;padding:14px 16px;border-radius:16px;border:1px solid rgba(29,27,27,.18);font-family:inherit;font-size:1rem;background:#fff}
textarea{min-height:130px}
.banner-strip{background:var(--black);color:white;text-align:center;padding:46px 22px}
footer{background:#1f1d1d;color:white;text-align:center;padding:56px 22px}
footer .sig{color:#f1c8cf;font-size:1.2rem}

/* Cozy rocking chair/fireplace scene */
.scene{
  position:relative;min-height:540px;border-radius:38px;overflow:hidden;box-shadow:var(--shadow);
  background:
    radial-gradient(circle at 74% 42%, rgba(255,160,92,.34), transparent 20%),
    linear-gradient(135deg,#4f4543,#9a7d73 45%,#ead7ce);
  border:1px solid rgba(183,110,121,.22);
}
.fireplace{
  position:absolute;right:8%;bottom:15%;width:230px;height:210px;background:#332626;border-radius:14px 14px 4px 4px;
  box-shadow:inset 0 0 0 12px #63493f, 0 0 70px rgba(255,139,64,.34);
}
.fire{position:absolute;left:50%;bottom:25px;width:90px;height:105px;transform:translateX(-50%)}
.flame{position:absolute;bottom:0;border-radius:50% 50% 35% 35%;filter:blur(.2px);animation:flicker 1.8s infinite ease-in-out alternate}
.flame.one{left:18px;width:42px;height:90px;background:#ff9b42}
.flame.two{left:40px;width:38px;height:75px;background:#ffd08a;animation-delay:.35s}
.flame.three{left:5px;width:35px;height:65px;background:#d95d3b;animation-delay:.7s}
@keyframes flicker{from{transform:scaleY(.86) rotate(-3deg);opacity:.85}to{transform:scaleY(1.08) rotate(3deg);opacity:1}}
.chair-wrap{position:absolute;left:9%;bottom:6%;width:330px;height:390px;animation:rock 4.8s ease-in-out infinite;transform-origin:50% 92%}
@keyframes rock{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
.chair-back{position:absolute;left:62px;top:35px;width:205px;height:235px;background:#f7eee7;border-radius:100px 100px 34px 34px;box-shadow:inset -18px -20px 35px rgba(0,0,0,.08)}
.chair-seat{position:absolute;left:38px;top:218px;width:255px;height:102px;background:#fff7f0;border-radius:35px;box-shadow:inset -12px -14px 25px rgba(0,0,0,.08)}
.chair-arm{position:absolute;top:185px;width:82px;height:150px;background:#f4e8df;border-radius:45px}
.chair-arm.left{left:16px}.chair-arm.right{right:16px}
.runner{position:absolute;bottom:22px;left:28px;width:275px;height:26px;border-bottom:10px solid #6f5148;border-radius:0 0 50% 50%}
.blanket{position:absolute;left:70px;top:205px;width:185px;height:150px;background:#f2e7db;border-radius:22px 22px 46px 46px;box-shadow:inset 0 0 0 7px rgba(255,255,255,.22)}
.blanket:before{content:"";position:absolute;inset:10px;background:repeating-linear-gradient(90deg,rgba(141,110,99,.18) 0 8px,transparent 8px 21px);border-radius:18px}
.table{position:absolute;left:49%;bottom:11%;width:170px;height:18px;background:#7d5f55;border-radius:10px}
.table:before,.table:after{content:"";position:absolute;top:14px;width:12px;height:90px;background:#5e443d;border-radius:8px}
.table:before{left:28px}.table:after{right:28px}
.candle{position:absolute;left:52%;bottom:18%;width:44px;height:78px;background:#fff5e9;border-radius:8px;box-shadow:0 0 28px rgba(255,196,118,.7)}
.candle:before{content:"";position:absolute;left:14px;top:-23px;width:16px;height:28px;background:#ffbf66;border-radius:50% 50% 45% 45%;animation:flicker 1.4s infinite alternate}
.eucalyptus{position:absolute;left:60%;bottom:18%;width:95px;height:150px}
.eucalyptus span{position:absolute;bottom:0;left:42px;width:3px;height:145px;background:#63745e;transform:rotate(var(--r))}
.eucalyptus span:before,.eucalyptus span:after{content:"";position:absolute;width:23px;height:14px;background:#9aa88f;border-radius:50%;left:-22px}
.eucalyptus span:before{top:22px}.eucalyptus span:after{top:60px;left:4px}
.note-icon-scene{position:absolute;left:47%;top:24%;background:rgba(255,250,245,.82);border:1px solid rgba(183,110,121,.32);border-radius:999px;padding:12px 18px;box-shadow:0 12px 28px rgba(0,0,0,.10);display:flex;align-items:center;gap:10px}
.note-icon-scene img{width:34px}

/* floating ember effect */
.ember{position:absolute;width:5px;height:5px;background:#ffbd82;border-radius:50%;opacity:.55;animation:ember 5s infinite ease-in}
.ember.e1{left:74%;bottom:22%;animation-delay:0s}.ember.e2{left:82%;bottom:28%;animation-delay:1.4s}.ember.e3{left:69%;bottom:30%;animation-delay:2.6s}
@keyframes ember{from{transform:translateY(0);opacity:.55}to{transform:translateY(-170px);opacity:0}}

@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .links{display:none}
  h1{font-size:3.05rem}
  section{padding:56px 18px}
  .scene{min-height:500px}
  .chair-wrap{left:2%;transform:scale(.86);animation:none}
  .fireplace{right:4%;width:170px}
  .note-icon-scene{left:31%;top:5%}
  .table,.candle,.eucalyptus{display:none}
}