:root{
  --bg:#fff;
  --ink:#1f2937;
  --muted:#6b7280;
  --ring:rgba(0,0,0,.08);

  --pastel-rose:#ffe7f1;
  --pastel-mint:#e7fff7;
  --pastel-lav:#eee7ff;
  --pastel-sun:#fff5e7;
  --accent:#6b7dff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.site-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at -10% 10%, var(--pastel-rose), transparent 60%),
    radial-gradient(70vw 70vw at 110% -10%, var(--pastel-mint), transparent 55%),
    radial-gradient(60vw 60vw at 50% 110%, var(--pastel-lav), transparent 60%);
  opacity:.45;
}
.wrap{width:min(1100px,92vw); margin-inline:auto; padding:1.25rem 1rem}
.wrap-narrow{width:min(900px,90vw); margin-inline:auto; padding:0 1rem}
/* Header */
.site-header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.75); border-bottom:1px solid var(--ring)}
.brand{font-family:'Playfair Display',serif; font-weight:700; letter-spacing:.18em; padding:.75rem 0}
.nav{display:flex; justify-content:center; flex-wrap:wrap; gap:2.2rem; padding:1rem 0; font-weight:600}
.nav a{color:var(--ink); text-decoration:none; border-radius:999px; padding:.35rem .7rem}
.nav a:hover{background:var(--pastel-rose)}
/* Sections */
section{padding:4.5rem 0}
h1,h2{font-weight:700; margin:0 0 1rem}
h1{font-size:clamp(2.2rem,4.5vw,3.2rem)}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.kicker{color:var(--muted); margin-top:-.25rem}
.hero-inner{display:grid; gap:2rem; place-items:center; text-align:center}
.hero-img{width:min(340px,72vw);aspect-ratio:3/4;object-fit:cover;object-position:center 18%;border-radius:50%;box-shadow:0 30px 60px rgba(0,0,0,.08),0 0 0 6px rgba(255,255,255,.9)}
.floaty{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.sparkles::before,.sparkles::after{
  content:''; position:absolute; width:160px; height:160px; border-radius:50%;
  background: conic-gradient(from 0deg at 50% 50%, var(--pastel-sun), var(--pastel-rose), var(--pastel-mint), var(--pastel-lav), var(--pastel-sun));
  filter: blur(30px); opacity:.35; transform: translate(-100px,-30px);
}
/* Buttons */
.btn{display:inline-block; margin-top:.75rem; padding:.85rem 1.2rem; border-radius:999px; border:2px solid var(--ink); color:var(--ink); text-decoration:none; font-weight:600; box-shadow:0 10px 24px rgba(0,0,0,.08)}
.btn:hover{background:var(--pastel-mint)}
.btn.ghost{border-color:#9aa1ff; color:#3a3f9b}
.btn.ghost:hover{background:var(--pastel-lav)}
/* Feature image */
.feature img{width:100%; height:auto; border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.08)}
/* Two-column text + image */
.two-col{display:grid; gap:2rem; align-items:center; padding-top:2rem}
@media(min-width:900px){.two-col{grid-template-columns:1.1fr .9fr}}
.muted{color:var(--muted)}
.pill-list{display:flex; flex-wrap:wrap; gap:.55rem; padding:0; margin:1rem 0 0; list-style:none}
.pill-list li{border:1.5px dashed #d6d6ff; background:#fafaff; border-radius:999px; padding:.45rem .8rem; font-size:.95rem; color:#3a3f9b}
.frame{width:100%; height:auto; border-radius:18px; box-shadow:0 18px 45px rgba(0,0,0,.08)}
/* Palm specific sizing */
.palm{max-width:520px; margin-inline:auto}
@media(min-width:900px){.palm{max-width:460px}} /* shrink on desktop */
/* Aperol sticker */
.sticker-wrap{position:relative}
.sticker-aperol{
  position:absolute; width:88px; height:auto; bottom:-12px; right:-12px; transform:rotate(6deg);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.12));
}
@media(min-width:900px){.sticker-aperol{width:110px; bottom:-16px; right:-16px}}
/* Collections */
.panel.soft{background:rgba(255,255,255,.6)}
.triptych{display:grid; gap:1.25rem; grid-template-columns:1fr}
@media(min-width:900px){.triptych{grid-template-columns:repeat(3,1fr)}}
.triptych figure{margin:0; background:rgba(255,255,255,.7); border-radius:18px; padding:10px; box-shadow:0 12px 28px rgba(0,0,0,.06)}
.triptych img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px}
.triptych figcaption{display:flex; flex-direction:column; gap:.1rem; margin-top:.5rem; color:#333; text-align:center}
.triptych figcaption span{color:#6b6f8a; font-size:.95rem}
/* Gallery */
.masonry{columns:1; column-gap:1rem}
@media(min-width:700px){.masonry{columns:2}}
@media(min-width:1000px){.masonry{columns:3}}
.masonry img{width:100%; margin:0 0 1rem; border-radius:14px; display:block; box-shadow:0 12px 36px rgba(0,0,0,.07)}
/* Contact */
.contact-card{background:rgba(255,255,255,.65); border:1px solid var(--ring); border-radius:18px; padding:1.25rem; box-shadow:0 10px 24px rgba(0,0,0,.06)}
.contact-card a{color:#3a3f9b; text-decoration:none; font-weight:600}
.contact-card a:hover{text-decoration:underline}
/* Footer */
.site-footer{border-top:1px solid var(--ring); padding:2rem 0; color:#555}


/* Even gallery grid */
.gallery-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:700px){.gallery-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.gallery-grid{grid-template-columns:1fr 1fr 1fr}}
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block;box-shadow:0 12px 30px rgba(0,0,0,.06)}

/* Set the hero image to a perfect circle by adding class 'circle' to the <img> */
.hero-img.circle{aspect-ratio:1/1;border-radius:50%}

.full-image{width:100%;height:auto;object-fit:contain;border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.08)}

/* Wearable Art */
.wearable-hero{display:grid;gap:1.5rem;align-items:center}
@media(min-width:900px){.wearable-hero{grid-template-columns:1.05fr .95fr}}
.wearable-img{width:100%;border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.08);object-fit:cover}
.soon-badge{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:2px dashed #e3a6ff;color:#5a2b80;
  padding:.45rem .75rem;border-radius:999px;font-weight:600}