:root{
    --deep-wine:#561744;
    --sage:#527763;
    --cream:#DBDBD3;
    --cream-light:#F4F2EC;
    --charcoal:#2E2E2C;
    --white:#FFFDF9;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  body{
    font-family:'Lato', sans-serif;
    background:var(--cream-light);
    color:var(--charcoal);
    line-height:1.6;
  }

  h1,h2,h3{
    font-family:'Quicksand', sans-serif;
    font-weight:600;
    color:var(--deep-wine);
  }

  .wrap{
    max-width:1000px;
    margin:0 auto;
    padding:0 28px;
  }

  /* ---------- Hero ---------- */
  .hero{
    padding:90px 0 70px;
    text-align:center;
    position:relative;
  }

  .hero .mark{
    width:52px; height:52px;
    margin:0 auto 22px;
    border-radius:50%;
    background:var(--deep-wine);
    display:flex; align-items:center; justify-content:center;
  }

  .hero .mark svg{ width:26px; height:26px; }

  .hero h1{
    font-size:clamp(2.1rem, 5vw, 3rem);
    letter-spacing:0.01em;
  }

  .hero .tagline{
    font-style:italic;
    color:var(--sage);
    font-size:1.05rem;
    margin-top:14px;
  }

  .hero .lede{
    max-width:520px;
    margin:22px auto 0;
    font-size:1.02rem;
    color:var(--charcoal);
    opacity:0.85;
  }

  /* ---------- Vine divider (signature element) ---------- */
  .vine{
    display:block;
    width:100%;
    height:64px;
    margin:6px 0 10px;
  }
  .vine path{
    fill:none;
    stroke:var(--sage);
    stroke-width:1.6;
    stroke-linecap:round;
    opacity:0.55;
  }
  .vine circle{
    fill:var(--deep-wine);
    opacity:0.7;
  }

  /* ---------- Section headers ---------- */
  .section{
    padding:20px 0 64px;
  }
  .section-head{
    text-align:center;
    margin-bottom:38px;
  }
  .section-head h2{
    font-size:1.7rem;
  }
  .section-head p{
    max-width:460px;
    margin:10px auto 0;
    opacity:0.8;
    font-size:0.98rem;
  }

  /* ---------- Social cards ---------- */
  .social-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:22px;
    position:relative;
  }

  .social-card{
    background:var(--white);
    border-radius:18px;
    padding:28px 24px;
    text-decoration:none;
    color:inherit;
    display:flex;
    flex-direction:column;
    gap:14px;
    border:1px solid rgba(86,23,68,0.08);
    box-shadow:0 2px 14px rgba(46,46,44,0.05);
    transition:transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }

  .social-card:hover, .social-card:focus-visible{
    transform:translateY(-4px);
    box-shadow:0 10px 26px rgba(86,23,68,0.14);
    border-color:rgba(82,119,99,0.35);
    outline:none;
  }

  .social-card .icon{
    width:42px; height:42px;
    border-radius:12px;
    background:var(--cream-light);
    display:flex; align-items:center; justify-content:center;
  }

  .social-card .icon svg{
    width:22px; height:22px;
    stroke:var(--deep-wine);
  }

  .social-card .platform{
    font-family:'Quicksand', sans-serif;
    font-weight:600;
    font-size:1.05rem;
    color:var(--deep-wine);
  }

  .social-card .handle{
    color:var(--sage);
    font-weight:500;
    font-size:0.96rem;
  }

  .social-card .desc{
    font-size:0.88rem;
    opacity:0.75;
  }

  .placeholder-note{
    text-align:center;
    font-size:0.85rem;
    opacity:0.6;
    margin-top:26px;
    font-style:italic;
  }

  /* ---------- Photo gallery ---------- */
  .gallery-band{
    background:var(--deep-wine);
    padding:70px 0;
  }
  .gallery-band .section-head h2,
  .gallery-band .section-head p{
    color:var(--cream-light);
  }
  .gallery-band .section-head p{ opacity:0.75; }

  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
  }

  .photo{
    aspect-ratio:1/1;
    border-radius:14px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    background:linear-gradient(145deg, rgba(219,219,211,0.28), rgba(82,119,99,0.35));
  }

  .photo::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      radial-gradient(circle at 30% 30%, rgba(255,253,249,0.18), transparent 55%),
      radial-gradient(circle at 70% 75%, rgba(255,253,249,0.12), transparent 50%);
  }

  .photo .cap{
    position:relative;
    width:100%;
    padding:14px;
    background:linear-gradient(to top, rgba(46,46,44,0.55), transparent);
    color:var(--cream-light);
    font-size:0.82rem;
    font-family:'Quicksand', sans-serif;
    font-weight:500;
  }

  .photo .add{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column;
    gap:6px;
    color:rgba(255,253,249,0.55);
    font-size:0.75rem;
  }
  .photo .add svg{ width:22px; height:22px; stroke:rgba(255,253,249,0.55); }

  .gallery-grid .wide{ grid-column:span 2; }

  @media (max-width:640px){
    .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
    .gallery-grid .wide{ grid-column:span 2; }
  }

  /* ---------- Footer contact line ---------- */
  .footer{
    padding:56px 0 70px;
    text-align:center;
  }
  .footer .email{
    display:inline-block;
    margin-top:6px;
    color:var(--deep-wine);
    font-weight:600;
    text-decoration:none;
    border-bottom:1.5px solid var(--sage);
    padding-bottom:2px;
  }
  .footer p{ opacity:0.75; font-size:0.95rem; }

  @media (prefers-reduced-motion: reduce){
    .social-card{ transition:none; }
  }