:root{
  --cream:#F6F1EC;
  --lilac:#E9DCEE;
  --blush:#F3D6D2;
  --sage:#D7E3D0;
  --butter:#F5DFA5;
  --ink:#3B342F;
  --ink-soft:#6b6259;
  --line: rgba(59,52,47,0.14);
  --card-bg:#FFFDF9;
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

.wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- header ---------- */
header{
  padding: 28px 0 10px;
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-family:'Fraunces', serif;
  font-weight: 560;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.logo span{ color:#B98A96; }
nav a{
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration:none;
  border-bottom: 1.5px solid transparent;
  padding-bottom:2px;
  transition: border-color 0.2s ease;
}
nav a:hover{ border-color: var(--ink); }

/* ---------- hero ---------- */
.hero{
  padding: 72px 0 40px;
  position: relative;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items:center;
}
h1{
  font-family:'Gluten', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}
.hero p.sub{
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 0 0 30px;
}
.hero-cta{
  display:flex;
  gap: 14px;
  align-items:center;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  text-decoration:none;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor:pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}
.btn:hover{ transform: translateY(-2px); background:#2c2723; }
.btn-ghost{
  background: transparent;
  color: var(--ink);
  padding: 13px 22px;
  border: 1.5px solid var(--line);
}
.btn-ghost:hover{ border-color: var(--ink); background:transparent; transform:none; }

.hero-art{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-art .blob{
  position:absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: var(--lilac);
  filter: blur(2px);
  z-index:0;
}
.hero-art svg{ position:relative; z-index:1; }

/* ---------- featured ---------- */
.featured{
  padding: 60px 0 30px;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom: 34px;
  gap: 24px;
}
.section-head h2{
  font-family:'Gluten', sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  margin: 0;
  letter-spacing: -0.01em;
}
.section-head p{
  color: var(--ink-soft);
  font-size: 0.96rem;
  margin:0;
  max-width: 30ch;
  text-align: right;
}

.card-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 22px;
}
.card{
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  border: 1px solid var(--line);
  display:flex;
  flex-direction:column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px -22px rgba(59,52,47,0.35);
}
.card-art{
  aspect-ratio: 1 / 0.82;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 20px;
}
.card-art.c-vase{ background: var(--blush); }
.card-art.c-lamp{ background: var(--butter); }
.card-art.c-toy{ background: var(--sage); }

.card-tag{
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.card h3{
  font-family:'Fraunces', serif;
  font-weight: 500;
  font-size: 1.3rem;
  margin: 0 0 8px;
}
.card p{
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height:1.55;
  margin: 0 0 18px;
  flex-grow:1;
}
.card .price-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: 0.9rem;
}
.card .price{ font-weight: 700; }
.card .link{
  color: var(--ink);
  text-decoration:none;
  border-bottom: 1.5px solid var(--ink);
}

/* ---------- signup ---------- */
.signup{
  margin: 90px 0 70px;
}
.signup-panel{
  background: var(--lilac);
  border-radius: 32px;
  padding: 64px 56px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.signup-panel::before{
  content:"";
  position:absolute;
  right: -60px; bottom: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,253,249,0.45);
}
.signup-copy{ position:relative; z-index:1; }
.signup-copy h2{
  font-family:'Gluten', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2rem;
  margin: 0 0 12px;
  line-height:1.15;
}
.signup-copy p{
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height:1.6;
  max-width: 36ch;
  margin:0;
}
form.signup-form{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.signup-form .field{
  display:flex;
  background: #FFFDF9;
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
  align-items:center;
  border: 1px solid rgba(59,52,47,0.1);
}
.signup-form input[type="email"]{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-family:'Manrope', sans-serif;
  font-size: 0.96rem;
  padding: 10px 8px;
  color: var(--ink);
}
.signup-form input::placeholder{ color:#a49c93; }
.signup-form button{
  white-space:nowrap;
}
.signup-note{
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 2px 4px 0;
}
.signup-status{
  font-size: 0.85rem;
  min-height: 1.2em;
  margin: 2px 4px 0;
  color: #5c7a4d;
}

/* ---------- color quiz ---------- */
.quiz-section{
  padding: 30px 0 20px;
}
.quiz-panel{
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 46px 48px;
  position:relative;
  overflow:hidden;
  min-height: 400px;
  display:flex;
  flex-direction:column;
  max-width: 640px;
  margin: 0 auto;
}
.quiz-progress{ display:flex; gap:8px; margin-bottom: 28px; }
.quiz-progress .qdot{ flex:1; height:5px; border-radius:999px; background: var(--line); overflow:hidden; }
.quiz-progress .qdot i{ display:block; height:100%; width:0%; background: var(--ink); transition: width 0.4s ease; border-radius:999px; }
.quiz-progress .qdot.done i{ width:100%; background:#B98A96; }
.quiz-progress .qdot.active i{ width:100%; }

.quiz-qlabel{ font-size:0.82rem; color: var(--ink-soft); margin: 0 0 10px; }
.quiz-panel h3{
  font-family:'Fraunces', serif;
  font-weight:450;
  font-style:italic;
  font-size: 1.4rem;
  line-height:1.32;
  margin: 0 0 24px;
  max-width: 34ch;
}
.quiz-options{ display:grid; gap: 11px; flex-grow:1; }
.quiz-opt{
  display:flex; align-items:center; gap: 14px;
  padding: 13px 16px; border-radius: 14px;
  border: 1.5px solid var(--line); background: transparent;
  cursor:pointer; text-align:left;
  font-family:'Manrope', sans-serif; font-size: 0.94rem; color: var(--ink);
  transition: border-color 0.18s ease, transform 0.15s ease;
}
.quiz-opt:hover{ border-color: var(--ink); transform: translateX(2px); }
.quiz-swatch{
  width: 24px; height: 24px; border-radius: 50%;
  flex-shrink:0; border: 1px solid rgba(0,0,0,0.12);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}
.quiz-swatch-transparent{
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
}
.quiz-footer-row{ display:flex; justify-content:space-between; align-items:center; margin-top: 26px; }
.quiz-back-btn{
  background:none; border:none; color: var(--ink-soft);
  font-family:'Manrope', sans-serif; font-size:0.85rem; cursor:pointer; padding:4px;
  visibility:hidden;
}
.quiz-back-btn.show{ visibility:visible; }
.quiz-step-count{ font-size:0.8rem; color: var(--ink-soft); }

.quiz-result{ display:none; text-align:center; flex-grow:1; flex-direction:column; align-items:center; justify-content:center; }
.quiz-result.show{ display:flex; }
.quiz-swatch-big{
  width: 88px; height: 88px; border-radius: 50%;
  margin: 0 auto 20px; border: 1px solid rgba(0,0,0,0.12);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
}
.quiz-result .quiz-tag{ font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 8px; }
.quiz-result h3{ margin: 0 0 12px; font-size: 1.7rem; font-style: italic; }
.quiz-result p.quiz-desc{ color: var(--ink-soft); font-size:0.95rem; line-height:1.6; max-width: 38ch; margin: 0 0 24px; }
.quiz-product-card{
  display:flex; align-items:center; gap:14px;
  border: 1.5px solid var(--line); border-radius: 16px;
  padding: 14px 18px; margin: 0 auto 22px; max-width: 380px; text-align:left;
}
.quiz-product-card .quiz-pic{ width:42px; height:42px; border-radius:10px; flex-shrink:0; }
.quiz-product-card .quiz-pname{ font-weight:700; font-size:0.9rem; }
.quiz-product-card .quiz-plabel{ font-size:0.8rem; color:var(--ink-soft); }
.quiz-restart{ background:none; border:none; color: var(--ink-soft); font-size: 0.84rem; text-decoration: underline; cursor:pointer; }

@media (max-width: 640px){
  .quiz-panel{ padding: 32px 24px; }
}

/* ---------- footer ---------- */
footer{
  padding: 34px 0 46px;
  border-top: 1px solid var(--line);
}
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.footer-row .fmarks a{
  color: var(--ink-soft);
  text-decoration:none;
  margin-left: 18px;
}
.footer-row .fmarks a:hover{ color: var(--ink); }

@media (max-width: 880px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-art{ order:-1; }
  .hero-art .blob{ width:220px; height:220px; }
  .hero-art svg{ width: 200px; }
  .card-grid{
    grid-template-columns: repeat(3, minmax(240px, 82vw));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .card-grid .card{ scroll-snap-align: start; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .section-head p{ text-align:left; }
  .signup-panel{ grid-template-columns:1fr; padding: 44px 28px; border-radius:26px; }
  .wrap{ padding: 0 20px; }
}