/* The Farmer's Wife — Signature differentiator: "We Wrap It Beautifully"  (Kai)
   Self-contained, mounted into <section id="signature">. Every rule scoped under #signature.
   Their calling card is gift-wrapping: tap a wrapped present and it unwraps (ribbon parts, paper
   lifts) to reveal the goods inside. Rustic mercantile, windmill heritage. NO real photos required
   (the "inside" is a placeholder tile that swaps to a real gen later). Local palette scoped here. */

#signature{
  --fw-brown:#3D2817; --fw-brown2:#4A2E1E; --fw-cream:#F4EEE2; --fw-tan:#C9A97E;
  --fw-rust:#8A5A3C; --fw-paper:#FBF7EF; --fw-ink:#3D2817;
}

#signature .fwr{
  max-width:70rem; margin-inline:auto; padding:clamp(1.5rem, 4vw, 2.6rem);
  border-radius:12px; color:var(--fw-brown); text-align:center;
  background:linear-gradient(170deg, var(--fw-paper), var(--fw-cream));
  box-shadow:0 12px 34px rgba(61,40,23,.16), inset 0 0 0 1px rgba(61,40,23,.08);
}
#signature .fwr__eyebrow{
  font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fw-rust); margin:0 0 .4rem;
}
#signature .fwr__title{
  margin:0 0 .3rem; font-family:Georgia,"Times New Roman",serif; font-weight:700;
  font-size:clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem); color:var(--fw-brown);
}
#signature .fwr__sub{ margin:0 auto 1.5rem; max-width:33rem; color:var(--fw-brown2); font-size:.98rem; }

#signature .fwr__row{ display:grid; grid-template-columns:1fr; gap:1rem; }

#signature .fwr__gift{
  position:relative; cursor:pointer; border:0; padding:0; border-radius:10px; overflow:hidden;
  aspect-ratio:4/3; background:var(--fw-cream); color:var(--fw-brown);
  box-shadow:0 6px 18px rgba(61,40,23,.16);
}
/* contents (revealed) */
#signature .fwr__inside{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:1rem; background:linear-gradient(160deg, #fff, var(--fw-cream));
}
#signature .fwr__inside-chip{
  width:3rem; height:3rem; border-radius:8px; background:linear-gradient(150deg, var(--fw-tan), var(--fw-rust));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
#signature .fwr__inside-name{ font-weight:800; font-size:1rem; }
#signature .fwr__inside-tag{
  font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--fw-rust);
}
/* the wrapping paper (sits on top; lifts away on open) */
#signature .fwr__paper{
  position:absolute; inset:0; z-index:2;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 6px, transparent 6px 16px),
    linear-gradient(160deg, var(--fw-brown), var(--fw-brown2));
  transition:opacity .5s ease, transform .5s ease; transform-origin:top center;
}
#signature .fwr__ribbon-v, #signature .fwr__ribbon-h{ position:absolute; background:var(--fw-rust); z-index:3; transition:transform .5s ease, opacity .5s ease; }
#signature .fwr__ribbon-v{ top:0; bottom:0; left:50%; width:16%; transform:translateX(-50%); }
#signature .fwr__ribbon-h{ left:0; right:0; top:50%; height:22%; transform:translateY(-50%); }
#signature .fwr__bow{
  position:absolute; z-index:4; top:50%; left:50%; width:2.4rem; height:2.4rem; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--fw-rust); box-shadow:0 0 0 .4rem rgba(138,90,60,.35);
  transition:transform .5s ease, opacity .4s ease;
}
#signature .fwr__hint{
  position:absolute; z-index:5; bottom:.6rem; left:0; right:0; text-align:center;
  font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--fw-cream);
}
/* OPEN state: paper + ribbon part, revealing the inside */
#signature .fwr__gift.is-open .fwr__paper{ opacity:0; transform:translateY(-14%) scale(1.02); }
#signature .fwr__gift.is-open .fwr__ribbon-v{ transform:translateX(-50%) scaleY(0); opacity:0; }
#signature .fwr__gift.is-open .fwr__ribbon-h{ transform:translateY(-50%) scaleX(0); opacity:0; }
#signature .fwr__gift.is-open .fwr__bow{ transform:translate(-50%,-50%) scale(0); opacity:0; }
#signature .fwr__gift.is-open .fwr__hint{ opacity:0; }
#signature .fwr__gift:hover, #signature .fwr__gift:focus-visible{ outline:3px solid var(--fw-rust); outline-offset:3px; }

@media (min-width:640px){ #signature .fwr__row{ grid-template-columns:repeat(3, 1fr); } }

@media (prefers-reduced-motion:reduce){
  #signature .fwr__paper, #signature .fwr__ribbon-v, #signature .fwr__ribbon-h, #signature .fwr__bow{ transition:none; }
}