:root{
    --bg-1:#c9a3d1;
    --bg-2:#f3c9d2;
    --bg-3:#fbe3e6;
    --ink:#4a1250;
    --muted:#8a5f86;
    --gold:#e7b74c;
    --card:#fffaf4;
    --line: rgba(74,18,80,.12);
    --shadow: 0 26px 54px rgba(74,18,80,.16);
    --font-display: 'Playfair Display', serif;
    --font-body: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
    --max: 1120px;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; color: var(--ink); font-family: var(--font-body);
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
    -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden;
  }
  /* depth layer: soft blurred blobs + grain, sits under content, above flat gradient */
  .depth{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .depth-blob{ position:absolute; border-radius:50%; filter: blur(38px); transition: transform .25s ease-out; will-change: transform; }
  .depth-blob.b1{ width:420px; height:420px; top:-8%; left:-6%; background: radial-gradient(circle, rgba(255,255,255,.5), transparent 70%); }
  .depth-blob.b2{ width:360px; height:360px; top:12%; right:-8%; background: radial-gradient(circle, rgba(231,183,76,.28), transparent 70%); }
  .depth-blob.b3{ width:460px; height:460px; bottom:-10%; left:20%; background: radial-gradient(circle, rgba(74,18,80,.14), transparent 70%); }
  .grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width: var(--max); margin:0 auto; padding-left: clamp(20px,5vw,56px); padding-right: clamp(20px,5vw,56px); }
  section{ position:relative; z-index:2; padding: clamp(50px,7vw,88px) 0; }

  /* ---------- AMBIENT LAYER: petals + sparkles ---------- */
  .ambient{ position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
  .petal{
    position:absolute; top:-40px; width:16px; height:16px; opacity:.55;
    background: radial-gradient(circle at 30% 30%, #ffd9e6, #f2a8c4 70%);
    border-radius: 0 60% 0 60%;
    animation: fall linear infinite;
  }
  .petal:nth-child(1){ left:6%;  width:14px; height:14px; animation-duration:16s; animation-delay:0s; }
  .petal:nth-child(2){ left:18%; width:20px; height:20px; animation-duration:21s; animation-delay:3s; }
  .petal:nth-child(3){ left:32%; width:12px; height:12px; animation-duration:14s; animation-delay:6s; }
  .petal:nth-child(4){ left:48%; width:18px; height:18px; animation-duration:19s; animation-delay:1s; }
  .petal:nth-child(5){ left:63%; width:15px; height:15px; animation-duration:17s; animation-delay:8s; }
  .petal:nth-child(6){ left:77%; width:22px; height:22px; animation-duration:23s; animation-delay:4s; }
  .petal:nth-child(7){ left:88%; width:13px; height:13px; animation-duration:15s; animation-delay:10s; }
  .petal:nth-child(8){ left:95%; width:19px; height:19px; animation-duration:20s; animation-delay:2s; }
  @keyframes fall{
    0%{ transform: translateY(-5vh) translateX(0) rotate(0deg); opacity:0; }
    8%{ opacity:.55; }
    92%{ opacity:.5; }
    100%{ transform: translateY(105vh) translateX(60px) rotate(300deg); opacity:0; }
  }
  .sparkle{ position:absolute; border-radius:50%; background: radial-gradient(circle, #fff, transparent 70%); animation: twinkle ease-in-out infinite; }
  .sparkle:nth-child(9){ top:8%; left:12%; width:5px; height:5px; animation-duration:3.2s; }
  .sparkle:nth-child(10){ top:22%; left:82%; width:7px; height:7px; animation-duration:4s; animation-delay:.6s; }
  .sparkle:nth-child(11){ top:44%; left:6%; width:4px; height:4px; animation-duration:2.8s; animation-delay:1.2s; }
  .sparkle:nth-child(12){ top:63%; left:90%; width:6px; height:6px; animation-duration:3.6s; animation-delay:.3s; }
  .sparkle:nth-child(13){ top:80%; left:20%; width:5px; height:5px; animation-duration:3s; animation-delay:1.6s; }
  @keyframes twinkle{ 0%,100%{ opacity:.15; transform:scale(.7); } 50%{ opacity:.9; transform:scale(1.15); } }
  @media (prefers-reduced-motion: reduce){ .petal, .sparkle{ animation:none; display:none; } }

  /* ---------- ORNAMENT ---------- */
  .flourish{ display:flex; align-items:center; justify-content:center; gap:10px; margin: 10px 0 18px; color: var(--gold); }
  .flourish svg{ width:64px; height:14px; }
  .flourish.left{ justify-content:flex-start; }

  /* ---------- NAV ---------- */
  .navbar{ position: sticky; top:0; z-index:30; padding: 18px 0; transition: background .3s ease, box-shadow .3s ease, padding .3s ease; }
  .navbar.scrolled{ background: rgba(255,250,244,.82); backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(74,18,80,.08); padding: 10px 0; }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; max-width: var(--max); margin:0 auto; padding: 0 clamp(20px,5vw,56px); }
  .brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:19px; color: var(--ink); }
  .brand-mark{ width:30px; height:30px; border-radius:50%; overflow:hidden; box-shadow: var(--shadow); border: 2px solid #fff; }
  .brand-mark img{ width:100%; height:100%; object-fit:cover; }
  .nav-links{ display:flex; gap:26px; font-size:14px; font-weight:600; color: var(--muted); }
  .nav-links a{ text-decoration:none; }
  .nav-links a:hover{ color: var(--ink); }
  .nav-cta{
    position:relative; overflow:hidden; isolation:isolate;
    display:inline-flex; align-items:center; padding:10px 20px; border-radius: 12px;
    background: linear-gradient(155deg, #ffe2a3, var(--gold) 55%, #d99a2e);
    border: 2px solid rgba(255,255,255,.65);
    color:#4a1a00; font-weight:700; font-size:13.5px; text-decoration:none;
    box-shadow: 0 3px 0 #a9762a, 0 8px 16px rgba(231,183,76,.3);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .nav-cta::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background: radial-gradient(80px circle at var(--mx,50%) var(--my,-20%), rgba(255,255,255,.65), transparent 60%);
    opacity:0; transition: opacity .25s ease;
  }
  .nav-cta:hover::before{ opacity:1; }
  .nav-cta:hover{ transform: translateY(-1px); }
  .nav-cta:active{ transform: translateY(2px); box-shadow: 0 1px 0 #a9762a, 0 4px 10px rgba(231,183,76,.24); }
  @media (max-width:760px){ .nav-links{ display:none; } }

  /* ---------- HERO ---------- */
  .hero{ text-align:center; padding-top: clamp(30px,5vw,54px); }
  .eyebrow{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); }
  .hero h1{ font-family: var(--font-display); font-weight:700; font-size: clamp(40px,6vw,66px); line-height:1.08; margin: 10px 0 6px; }
  .hero h1 em{ font-style:italic; color: var(--gold); font-weight:500; }
  .hero .sub{ font-size:17px; color: var(--muted); max-width:52ch; margin: 14px auto 30px; line-height:1.65; }
  .hero-actions{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; margin-bottom:12px; }
  .btn-primary{
    position:relative; overflow:hidden; isolation:isolate;
    display:inline-flex; align-items:center; gap:8px;
    padding:16px 30px; border-radius: 14px;
    background: linear-gradient(155deg, #ffe2a3, var(--gold) 55%, #d99a2e);
    border: 2px solid rgba(255,255,255,.65);
    color:#4a1a00; font-weight:700; font-size:15px; text-decoration:none;
    box-shadow: 0 4px 0 #a9762a, 0 16px 30px rgba(74,18,80,.28);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .btn-primary::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background: radial-gradient(120px circle at var(--mx,50%) var(--my,-20%), rgba(255,255,255,.65), transparent 60%);
    opacity:0; transition: opacity .25s ease;
  }
  .btn-primary:hover::before{ opacity:1; }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 6px 0 #a9762a, 0 20px 34px rgba(74,18,80,.3); }
  .btn-primary:active{ transform: translateY(3px); box-shadow: 0 1px 0 #a9762a, 0 8px 18px rgba(74,18,80,.22); }
  .link-secondary{ color: var(--muted); text-decoration:none; font-weight:700; font-size:14px; border-bottom:2px solid rgba(74,18,80,.2); padding-bottom:2px; }

  .hero-visual{ position:relative; max-width:480px; margin: 40px auto 0; perspective: 1000px; }
  .hero-visual .glow{ position:absolute; inset: -10% ; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 65%); filter: blur(6px); z-index:-1; }
  .hero-visual .tilt{ transition: transform .15s ease-out; transform-style: preserve-3d; }
  .hero-visual img{
    border-radius:26px; border: 6px solid #fff;
    box-shadow:
      0 0 0 1px rgba(231,183,76,.5),
      0 2px 0 #fff,
      0 40px 70px rgba(74,18,80,.32),
      0 10px 24px rgba(74,18,80,.18);
  }

  /* ---------- STORYBOOK SECTIONS ---------- */
  .story{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,64px); align-items:center; }
  .story.reverse .story-media{ order:2; }
  .story.reverse .story-copy{ order:1; }
  .story-media{ position:relative; perspective: 900px; }
  .story-tilt{ transition: transform .15s ease-out; transform-style: preserve-3d; }
  .story-media img{
    width: 78%; margin: 0 auto; display:block; border-radius:24px;
    border: 5px solid #fff;
    box-shadow:
      0 0 0 1px rgba(231,183,76,.4),
      0 26px 44px rgba(74,18,80,.20),
      0 8px 16px rgba(74,18,80,.12);
  }
  .story:nth-of-type(odd) .story-tilt{ transform: rotate(-2.4deg); }
  .story:nth-of-type(even) .story-tilt{ transform: rotate(2.4deg); }
  .story-copy h2{ font-family: var(--font-display); font-weight:700; font-size: clamp(26px,3.2vw,36px); margin: 0 0 4px; }
  .story-copy .tagline{ font-size:14.5px; color: var(--muted); font-weight:600; margin-bottom:16px; }
  .story-copy p{ color: var(--muted); line-height:1.75; font-size:15.5px; max-width: 42ch; }
  @media (max-width: 820px){
    .story, .story.reverse{ grid-template-columns:1fr; text-align:center; }
    .story.reverse .story-media, .story.reverse .story-copy{ order:initial; }
    .story-copy p{ margin-left:auto; margin-right:auto; }
    .story-media img{ width:60%; }
  }

  /* ---------- EXPLORE / SEO CHIPS ---------- */
  .section-sub{ color: var(--muted); max-width:56ch; line-height:1.6; margin:0 0 34px; font-size:15px; }
  .explore-grid{ display:grid; grid-template-columns: 0.8fr 1fr 1.3fr; gap: 28px; text-align:left; margin-top: 30px; }
  .explore-title{ font-family: var(--font-display); font-weight:600; font-size:16px; margin-bottom:14px; color: var(--ink); }
  .chips{ display:flex; flex-wrap:wrap; gap:9px; }
  .chip-link{
    display:inline-flex; align-items:center; font-size:13px; font-weight:600; text-decoration:none;
    color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius:999px;
    padding: 8px 14px; box-shadow: 0 6px 14px rgba(74,18,80,.06); transition: border-color .15s ease, color .15s ease, transform .15s ease;
  }
  .chip-link:hover{ border-color: var(--gold); color: var(--ink); transform: translateY(-1px); }
  @media (max-width: 820px){ .explore-grid{ grid-template-columns: 1fr; } }

  /* ---------- FAQ ---------- */
  .faq{ max-width: 680px; margin: 0 auto; display:grid; gap:12px; }
  .faq details{ background: var(--card); border-radius:18px; padding: 18px 24px; box-shadow: var(--shadow); }
  .faq summary{ font-family: var(--font-display); font-weight:600; font-size:17px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:"❀"; font-size:14px; color: var(--gold); transition: transform .2s ease; }
  .faq details[open] summary::after{ transform: rotate(90deg); }
  .faq p{ margin: 12px 0 0; color: var(--muted); font-size:14.5px; line-height:1.7; }

  /* ---------- CTA "INVITATION CARD" ---------- */
  .cta-card{
    max-width: 640px; margin: 0 auto; text-align:center; background: var(--card);
    border: 1.5px solid var(--gold); border-radius: 28px; padding: clamp(40px,6vw,56px) clamp(24px,5vw,44px);
    box-shadow: var(--shadow); position:relative;
  }
  .cta-card::before, .cta-card::after{ content:"❀"; position:absolute; color: var(--gold); font-size:18px; top:18px; }
  .cta-card::before{ left:22px; } .cta-card::after{ right:22px; }
  .cta-card h2{ font-family: var(--font-display); font-weight:700; font-size: clamp(26px,3.4vw,32px); margin: 0 0 10px; }
  .cta-card p{ color: var(--muted); margin: 0 0 26px; }

  footer{ padding: 34px 0 46px; text-align:center; }
  .footer-inner{ display:flex; flex-direction:column; align-items:center; gap:12px; font-size:13px; color: var(--muted); font-weight:600; }
  .footer-links{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
  .footer-links a{ text-decoration:none; color: var(--muted); }
  .footer-links a:hover{ color: var(--ink); }

/* ================= SUBPAGE COMPONENTS ================= */
.breadcrumb{ font-size:13px; font-weight:600; color: var(--muted); margin-bottom:18px; }
.breadcrumb a{ text-decoration:none; color: var(--muted); }
.breadcrumb a:hover{ color: var(--ink); }
.breadcrumb .sep{ margin:0 6px; opacity:.5; }

.mini-hero{ padding-top: clamp(24px,4vw,40px); }
.mini-hero-inner{ display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px,4vw,48px); align-items:center; }
.mini-hero h1{ font-family: var(--font-display); font-weight:700; font-size: clamp(30px,4.2vw,44px); line-height:1.14; margin: 6px 0 16px; }
.mini-hero .sub{ font-size:16px; color: var(--muted); line-height:1.65; max-width:48ch; margin: 0 0 26px; }
.mini-hero-actions{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.mini-hero-media{ position:relative; perspective: 900px; }
.mini-hero-media img{
  width:72%; margin:0 auto; display:block; border-radius:22px; border:5px solid #fff;
  box-shadow: 0 0 0 1px rgba(231,183,76,.4), 0 24px 40px rgba(74,18,80,.2), 0 8px 16px rgba(74,18,80,.12);
  transform: rotate(-2deg);
}
@media (max-width:820px){ .mini-hero-inner{ grid-template-columns:1fr; text-align:center; } .mini-hero .sub{ margin-left:auto; margin-right:auto; } .mini-hero-media img{ width:52%; } }

.content-card{ background: var(--card); border-radius:22px; padding: clamp(24px,4vw,36px); box-shadow: var(--shadow); margin-bottom:18px; }
.content-card h2{ font-family: var(--font-display); font-weight:600; font-size: clamp(20px,2.4vw,24px); margin:0 0 14px; }
.content-card p{ color: var(--muted); line-height:1.75; font-size:15px; margin:0 0 10px; }
.content-card ul, .content-card ol{ margin:0; padding-left:20px; color: var(--muted); line-height:1.85; font-size:15px; }
.content-card ul li, .content-card ol li{ margin-bottom:4px; }
.content-card ul b, .content-card ol b{ color: var(--ink); }
.content-card a{ color: var(--ink); font-weight:700; text-decoration: underline; text-decoration-color: rgba(231,183,76,.6); text-underline-offset:3px; }

.related-title{ font-family: var(--font-display); font-weight:600; font-size:16px; margin: 0 0 14px; text-align:center; }