/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:9rem 0 6rem;
  overflow:hidden;
}
.hero .wrap{position:relative; z-index:2;}
.hero h1{
  font-size:clamp(3.4rem, 9vw, 7.2rem);
  line-height:0.92;
  max-width:900px;
}
.hero h1 em{font-style:italic; color:var(--moss);}
.hero-sub{
  max-width:460px;
  margin-top:1.6rem;
  font-size:1.05rem;
  line-height:1.55;
  color:var(--muted);
}
.hero-cta{
  margin-top:2.4rem;
  display:inline-flex; gap:1rem; align-items:center;
}

/* root svg growing through the page */
.root-line{
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:340px;
  z-index:1; pointer-events:none;
}
.root-line path{
  fill:none; stroke:var(--moss); stroke-width:1.4;
  stroke-linecap:round;
  stroke-dasharray:1600;
  stroke-dashoffset:1600;
  transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1);
  opacity:0.55;
}
.root-line.grown path{stroke-dashoffset:0;}

/* ---------- MANIFESTO ---------- */
.manifesto{
  padding:5rem 0 6rem;
  border-top:1px solid var(--rule);
}
.manifesto .wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center;
}
.manifesto .eyebrow{margin-bottom:1rem;}
.manifesto h2{
  font-size:clamp(1.8rem, 3vw, 2.5rem);
  line-height:1.25;
  font-weight:400;
  max-width:520px;
}
.manifesto p.body-text{
  margin-top:1.4rem; color:var(--muted); line-height:1.7;
  max-width:480px; font-size:0.98rem;
}
.manifesto-visual{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:2rem 0;
}
.manifesto-visual img{
  width:44%; max-width:280px; opacity:0.92; filter:grayscale(1) contrast(1.05);
}

/* ---------- SIGNATURE STRIP ---------- */
.signature-strip{
  background:var(--moss-2);
  color:var(--bone);
  padding:3.2rem 0;
  text-align:center;
}
.signature-strip .wordline{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.6rem, 4vw, 2.6rem);
}
.signature-strip .eyebrow{color:rgba(246,243,236,0.6); margin-bottom:0.6rem;}

/* ---------- COLLECTION / SHOP ---------- */
.collection{padding:6rem 0 3rem;}
.collection-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:3rem; gap:2rem; flex-wrap:wrap;
  border-bottom:1px solid var(--rule); padding-bottom:2rem;
}
.collection-head h2{font-size:clamp(2rem,4vw,2.9rem); font-weight:400;}
.collection-head p{color:var(--muted); max-width:360px; font-size:0.95rem; line-height:1.6;}

.product-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2.4rem;
}
.product-card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:6px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.product-media{
  aspect-ratio:4/5; overflow:hidden; background:var(--bone-2);
  position:relative;
}
.product-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.product-card:hover .product-media img{transform:scale(1.035);}
.thumb-row{display:flex; gap:0.5rem; padding:0.7rem 1.5rem 0;}
.thumb-row .thumb-btn{
  width:44px; height:52px; padding:0; border-radius:4px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; background:none;
}
.thumb-row .thumb-btn.active{border-color:var(--ink);}
.thumb-row .thumb-btn img{width:100%; height:100%; object-fit:cover;}
.product-body{padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:0.9rem; flex:1;}
.product-name{font-size:1.15rem; font-weight:500;}
.product-desc{font-size:0.85rem; color:var(--muted); line-height:1.55; flex:1;}
.product-row{display:flex; align-items:center; justify-content:space-between; margin-top:0.4rem;}
.product-price{font-weight:600; font-size:1rem;}

.size-select{
  display:flex; gap:0.4rem; margin:0.2rem 0 0.2rem;
}
.size-select button{
  border:1px solid var(--rule); background:none; cursor:pointer;
  font-family:'Inter'; font-size:0.75rem; padding:0.35rem 0.6rem;
  border-radius:4px; transition:all .15s;
}
.size-select button.active{border-color:var(--ink); background:var(--ink); color:var(--bone);}

.add-btn{
  background:none; border:1px solid var(--ink); border-radius:100px;
  padding:0.7rem 1rem; font-family:'Inter'; font-size:0.82rem; font-weight:600;
  cursor:pointer; transition:background .2s, color .2s; width:100%;
}
.add-btn:hover{background:var(--ink); color:var(--bone);}
.add-btn.added{background:var(--moss); border-color:var(--moss); color:var(--bone);}

/* ---------- ORDER MODAL ---------- */
.order-modal{
  position:fixed; top:50%; left:50%; z-index:62;
  transform:translate(-50%, -50%) scale(0.96);
  width:min(560px, 92vw); max-height:88vh; overflow-y:auto;
  background:var(--paper); border-radius:8px;
  box-shadow:0 24px 60px rgba(0,0,0,0.18);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.order-modal.open{opacity:1; pointer-events:auto; transform:translate(-50%, -50%) scale(1);}
.order-modal-head{
  padding:1.6rem 1.8rem; border-bottom:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; background:var(--paper);
}
.order-modal-head h3{font-size:1.2rem; font-weight:500;}
.order-form{padding:1.8rem;}
.order-form .form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.order-form textarea[readonly]{background:var(--bone-2); color:var(--muted);}

@media (max-width: 880px){
  .manifesto .wrap{grid-template-columns:1fr;}
  .manifesto-visual{order:-1;}
  .product-grid{grid-template-columns:1fr 1fr; gap:1.4rem;}
}
@media (max-width: 560px){
  .product-grid{grid-template-columns:1fr;}
  .order-form .form-row-2{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .root-line path{stroke-dashoffset:0;}
}