:root{
    --ivory:#FBF3EF;
    --card:#FFFFFF;
    --blush:#F6D9DD;
    --rose:#E38A9D;
    --rose-deep:#C96B82;
    --mauve:#7C4A54;
    --ink:#2B2321;
    --ink-soft:#6E5D5A;
    --line: rgba(43,35,33,0.10);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--ivory);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-weight:400;
    line-height:1.6;
  }
  h1,h2,h3,.serif{ font-family:'Lora', serif; font-weight:500; color:var(--ink); }
  em{ font-style:italic; font-family:'Lora', serif; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }

  .label{
    font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--rose-deep); font-weight:500;
  }

  .wrap{ max-width:1080px; margin:0 auto; padding:0 6vw; }
  @media (max-width:600px){ .wrap{ padding:0 7.5vw; } }

  /* ---------- top nav ---------- */
  header.site{
    position:sticky; top:0; z-index:40; background:rgba(251,243,239,0.9);
    backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1080px; margin:0 auto; padding:1.1rem 6vw;
    display:flex; align-items:center; justify-content:space-between;
  }
  .brand-mark{ display:flex; align-items:center; gap:0.7rem; }
  .brand-mark .circle{
    width:34px; height:34px; border-radius:50%; border:1.4px solid var(--rose-deep);
    display:flex; align-items:center; justify-content:center;
    font-family:'Lora', serif; font-style:italic; font-size:1rem; color:var(--rose-deep);
  }
  .brand-mark .name{ font-family:'Lora', serif; font-size:1.15rem; letter-spacing:0.01em; }
  nav.links{ display:flex; gap:2.2rem; }
  nav.links a{ font-size:0.9rem; color:var(--ink-soft); transition:color .2s ease; }
  nav.links a:hover{ color:var(--rose-deep); }
  .menu-toggle{
    display:none; background:none; border:none; cursor:pointer; padding:0.5rem;
    flex-direction:column; gap:5px; width:38px; height:38px; align-items:center; justify-content:center;
  }
  .menu-toggle span{ display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:all .25s ease; }
  .menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2){ opacity:0; }
  .menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  @media (max-width:680px){
    nav.links{
      display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
      background:var(--ivory); border-bottom:1px solid var(--line); padding:0.5rem 6vw 1.2rem;
      gap:0; max-height:0; overflow:hidden; transition:max-height .3s ease;
    }
    nav.links.open{ max-height:300px; }
    nav.links a{ padding:0.8rem 0; border-bottom:1px solid var(--line); }
    .menu-toggle{ display:flex; }
  }

  /* ---------- hero ---------- */
  .hero{
    padding:5.5rem 0 4.5rem; display:grid; grid-template-columns:1.05fr 0.95fr;
    gap:4vw; align-items:center;
  }
  .hero .label{ margin-bottom:1.1rem; display:block; }
  .hero h1{ font-size:clamp(2.3rem, 5vw, 3.7rem); line-height:1.15; letter-spacing:-0.01em; }
  .hero h1 em{ color:var(--rose-deep); }
  .hero p{ margin-top:1.3rem; max-width:42ch; color:var(--ink-soft); font-size:1.02rem; }
  .hero .cta-row{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }
  .btn{
    font-size:0.86rem; padding:0.85rem 1.6rem; border-radius:100px; display:inline-block;
    transition:all .2s ease; border:1px solid transparent;
  }
  .btn-solid{ background:var(--rose-deep); color:#fff; }
  .btn-solid:hover{ background:var(--mauve); }
  .btn-ghost{ border-color:var(--ink); color:var(--ink); }
  .btn-ghost:hover{ background:var(--ink); color:var(--ivory); }

  .hero-visual{
    aspect-ratio:1/1.05; border-radius:50%; background:linear-gradient(155deg, var(--blush), var(--rose));
    display:flex; align-items:center; justify-content:center; position:relative;
    box-shadow:0 20px 50px rgba(124,74,84,0.18);
  }
  .hero-visual img{ width:56%; height:56%; object-fit:contain; }
  @media (max-width:820px){ .hero{ grid-template-columns:1fr; } .hero-visual{ order:-1; max-width:280px; margin:0 auto; } }

  /* ---------- section shell ---------- */
  section{ padding:4.5rem 0; }
  .sect-top{ display:flex; align-items:baseline; justify-content:space-between; gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap; }
  .sect-top h2{ font-size:clamp(1.6rem,3vw,2.1rem); }
  .sect-top p{ color:var(--ink-soft); max-width:32ch; font-size:0.92rem; }

  /* ---------- about ---------- */
  .about{ background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:5vw; align-items:center; }
  .about-badge{
    width:100%; aspect-ratio:1/1; border-radius:50%; background:var(--blush);
    display:flex; align-items:center; justify-content:center; position:relative;
    overflow:hidden; border:3px solid #fff; box-shadow:0 14px 34px rgba(124,74,84,0.16);
  }
  .about-badge img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
  .about-text p{ color:var(--ink-soft); margin-bottom:1.2rem; font-size:0.98rem; line-height:1.75; max-width:52ch; }
  .about-text strong{ color:var(--ink); font-weight:500; font-family:'Lora', serif; }
  @media (max-width:780px){ .about-grid{ grid-template-columns:1fr; } .about-badge{ max-width:220px; margin:0 auto; } }

  /* ---------- moods ---------- */
  .mood-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
  .mood-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:2rem 1.6rem;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .mood-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(124,74,84,0.10); }
  .mood-card .label{ color:var(--rose-deep); }
  .mood-card h3{ font-size:1.25rem; margin-top:0.7rem; }
  .mood-card p{ font-size:0.9rem; color:var(--ink-soft); margin-top:0.6rem; }
  .mood-card .notes{ font-size:0.78rem; color:var(--ink-soft); margin-top:1.2rem; font-style:italic; font-family:'Lora',serif; }
  @media (max-width:900px){ .mood-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .mood-grid{ grid-template-columns:1fr; } }

  /* ---------- tip banner ---------- */
  .tip{
    background:linear-gradient(120deg, var(--rose), var(--rose-deep));
    color:#fff; border-radius:20px; padding:3rem 2.4rem; display:grid;
    grid-template-columns:1fr auto; gap:2rem; align-items:center;
  }
  .tip .label{ color:rgba(255,255,255,0.85); }
  .tip h3{ color:#fff; font-size:1.6rem; margin-top:0.5rem; max-width:22ch; }
  .tip ul{ list-style:none; font-size:0.92rem; }
  .tip li{ padding:0.35rem 0; border-bottom:1px solid rgba(255,255,255,0.25); }
  .tip li:last-child{ border-bottom:none; }
  @media (max-width:680px){ .tip{ grid-template-columns:1fr; } }

  /* ---------- follow / contact ---------- */
  .follow{ text-align:center; padding-top:1rem; }
  .follow h2{ font-size:clamp(1.8rem,3.6vw,2.5rem); max-width:20ch; margin:0 auto 1rem; }
  .follow p{ color:var(--ink-soft); max-width:38ch; margin:0 auto; }
  .follow-links{ margin-top:2.2rem; display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }
  .follow-links a{
    border:1px solid var(--ink); border-radius:100px; padding:0.85rem 1.7rem; font-size:0.88rem;
    transition:all .2s ease;
  }
  .follow-links a:hover{ background:var(--ink); color:var(--ivory); }
  .follow-links a.solid{ background:var(--rose-deep); border-color:var(--rose-deep); color:#fff; }
  .follow-links a.solid:hover{ background:var(--mauve); }

  footer{
    border-top:1px solid var(--line); padding:2.4rem 0; margin-top:2rem;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  }
  footer .wordmark{ font-family:'Lora', serif; font-style:italic; color:var(--ink-soft); }
  footer .fine{ font-size:0.78rem; color:var(--ink-soft); }

  .scent-link{
    background:none; border:none; padding:0; margin:0; cursor:pointer; font-family:'Work Sans', sans-serif;
    font-size:inherit; color:var(--rose-deep); text-decoration:underline; text-underline-offset:3px;
    text-decoration-color:rgba(201,107,130,0.4); transition:color .2s ease;
  }
  .scent-link:hover{ color:var(--mauve); }

  .photo-modal{
    position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
    background:rgba(43,35,33,0.55); backdrop-filter:blur(3px); padding:1.5rem;
  }
  .photo-modal.open{ display:flex; }
  .photo-modal-inner{
    background:#fff; border-radius:16px; max-width:380px; width:100%; overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,0.3); position:relative; animation:pop .25s ease;
  }
  @keyframes pop{ from{ transform:scale(0.95); opacity:0; } to{ transform:scale(1); opacity:1; } }
  .photo-modal-inner img{ width:100%; display:block; aspect-ratio:1/1; object-fit:cover; background:var(--blush); }
  .photo-modal-inner .cap{ padding:1.2rem 1.4rem 1.4rem; }
  .photo-modal-inner .cap .label{ display:block; margin-bottom:0.3rem; }
  .photo-modal-inner .cap h4{ font-family:'Lora', serif; font-size:1.05rem; color:var(--ink); }
  .photo-modal-inner .cap p{ font-size:0.82rem; color:var(--ink-soft); margin-top:0.4rem; }
  .info-panel{ display:none; padding:1.5rem 1.6rem 1.7rem; max-height:70vh; overflow-y:auto; }
  .info-panel h5{ font-family:'Lora', serif; font-size:0.95rem; color:var(--ink); margin:1.1rem 0 0.6rem; }
  .info-panel h5:first-child{ margin-top:0; }
  .info-panel ul{ padding-left:1.1rem; }
  .info-panel li{ font-size:0.85rem; color:var(--ink-soft); line-height:1.55; margin-bottom:0.4rem; }
  .info-panel .vendor-name{ color:var(--ink); font-weight:500; }
  .modal-close{
    position:absolute; top:0.7rem; right:0.7rem; width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,0.9); border:none; cursor:pointer; font-size:1.1rem; color:var(--ink);
    display:flex; align-items:center; justify-content:center; line-height:1;
  }

  [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
  [data-reveal].in{ opacity:1; transform:none; }