:root{
    --bg:#f7f1ea;
    --bg2:#efe4d8;
    --card:#fffdfb;
    --ink:#3a2f2c;
    --muted:#7a6a63;
    --berry:#a45b6b;
    --berry-deep:#7e4252;
    --gold:#b8894f;
    --line:#e6d8ca;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    min-height:100vh;
    font-family:'Nunito Sans',system-ui,sans-serif;
    color:var(--ink);
    background:
      radial-gradient(1200px 600px at 50% -10%, #fff 0%, var(--bg) 45%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 20px;
    line-height:1.75;
  }

  .wrap{
    width:100%;
    max-width:680px;
  }

  .card{
    position:relative;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:22px;
    padding:64px 56px 56px;
    box-shadow:
      0 1px 0 rgba(255,255,255,.8) inset,
      0 30px 60px -30px rgba(90,60,50,.28),
      0 12px 26px -18px rgba(90,60,50,.25);
    overflow:hidden;
  }

  /* decorative top flourish */
  .card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:7px;
    background:linear-gradient(90deg, var(--gold), var(--berry) 55%, var(--gold));
    opacity:.9;
  }
  .card::after{
    content:"";
    position:absolute;
    width:220px; height:220px;
    background:radial-gradient(circle at center, rgba(164,91,107,.10), transparent 70%);
    top:-60px; right:-50px;
    pointer-events:none;
  }

  .eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:0 auto 6px;
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:.28em;
    font-size:.72rem;
    font-weight:600;
  }
  .eyebrow .rule{
    width:42px; height:1px;
    background:linear-gradient(90deg, transparent, var(--line));
  }
  .eyebrow .rule.r{ background:linear-gradient(90deg, var(--line), transparent); }

  h1{
    font-family:'Playfair Display',serif;
    font-weight:600;
    font-size:clamp(2rem, 6vw, 2.9rem);
    line-height:1.1;
    text-align:center;
    margin:14px 0 8px;
    color:var(--berry-deep);
  }

  .sub{
    text-align:center;
    font-family:'Playfair Display',serif;
    font-style:italic;
    color:var(--muted);
    font-size:1.02rem;
    margin:0 auto;
    max-width:46ch;
  }

  .divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:34px auto;
    color:var(--gold);
  }
  .divider .ln{ width:70px; height:1px; background:var(--line); }
  .divider svg{ display:block; }

  .letter{
    position:relative;
    z-index:1;
  }
  .letter p{
    margin:0 0 1.2em;
    font-size:1.06rem;
  }
  .letter .lead{
    font-family:'Playfair Display',serif;
    font-size:1.25rem;
    color:var(--ink);
  }

  .signature{
    margin-top:38px;
    text-align:center;
  }
  .signature .name{
    font-family:'Playfair Display',serif;
    font-size:1.7rem;
    color:var(--berry-deep);
    line-height:1.2;
  }
  .signature .heart{
    display:inline-block;
    margin-left:8px;
    color:var(--berry);
    transform:scale(1.05);
  }
  .signature .farewell{
    margin-top:10px;
    font-size:.85rem;
    letter-spacing:.04em;
    color:var(--muted);
  }

  .footer-note{
    text-align:center;
    margin-top:34px;
    color:var(--muted);
    font-size:.9rem;
  }
  .footer-note a{ color:var(--berry-deep); text-decoration:none; border-bottom:1px solid rgba(126,66,82,.3); }
  .footer-note a:hover{ border-bottom-color:var(--berry-deep); }

  /* floating hearts */
  .hearts{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
  .hearts span{
    position:absolute;
    bottom:-30px;
    color:rgba(164,91,107,.16);
    animation:float 9s linear infinite;
    font-size:18px;
  }
  @keyframes float{
    0%{ transform:translateY(0) rotate(0deg); opacity:0; }
    10%{ opacity:1; }
    100%{ transform:translateY(-110vh) rotate(25deg); opacity:0; }
  }
  .hearts span:nth-child(1){ left:12%; animation-delay:0s; font-size:14px; }
  .hearts span:nth-child(2){ left:30%; animation-delay:2.4s; }
  .hearts span:nth-child(3){ left:52%; animation-delay:4.2s; font-size:22px; }
  .hearts span:nth-child(4){ left:70%; animation-delay:1.2s; font-size:16px; }
  .hearts span:nth-child(5){ left:86%; animation-delay:3.6s; }

  @media print{
    body{ background:#fff; padding:0; }
    .card{ box-shadow:none; border:none; border-radius:0; }
    .hearts{ display:none; }
  }
  @media (max-width:520px){
    .card{ padding:46px 26px 44px; }
  }