<style>
    /* =========================================================
       COLOR PALETTE — PUT YOUR HEX CODES HERE
       (cottagecore + dark academia: parchment, moss, ink, wine)
       ========================================================= */
    :root{
      --bg: #F1E9D2;
      --paper: #E8DCB8;       /* REPLACE: card background */
      --ink: #27221F;         /* REPLACE: main text */
      --muted: #423029;       /* REPLACE: secondary text */
      --moss: #7E8C54;        /* REPLACE: accent 1 */
      --wine: #58181F;      /* REPLACE: accent 2 */
      --gold: #C49C48;        /* REPLACE: accent 3 */
      --line: rgba(63,58,58,0.4);
      --shadow: rgba(0,0,0,0.25);

      --radius-lg: 22px;
      --radius-md: 14px;
      --radius-sm: 10px;

      --maxw: 1060px;
    }
    
    /* =========================================================
   CUSTOM CURSOR — PLACEHOLDER (add your own cursor images)
   Put files in /assets and replace names if needed.
   ========================================================= */

html{
  cursor: url("https://cur.cursors-4u.net/nature/images10/nat943.png") 8 8, auto; /* hotspot x y */
}

a, button, .tab, input, textarea, label{
  cursor: url("https://cur.cursors-4u.net/nature/images10/nat943.png") 8 8, pointer;
}

    /* =========================================================
       BASE
       ========================================================= */
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body{
      margin: 0;
      color: #27221F;
      background: #F1E9D2;

      /* BACKGROUND IMAGE PLACEHOLDER */
      /* Add your texture here. Keep the solid color as fallback. */
      background-image:
        url("https://paperandolivepng.carrd.co/assets/images/image06.jpg?v=e7225c92");
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
      font-family: "Libre Baskerville", serif;
      line-height: 1.65;
    }

    a{ color: inherit; text-decoration: none; }
    a:hover{ text-decoration: underline; text-underline-offset: 3px; }

    .wrap{
      width: min(1060px, 92vw);
      margin: 0 auto;
      padding: 34px 0 70px;
    }

    /* Soft overlay to keep text readable on busy textures */
    .veil{
      background: rgba(251,247,239,.78); /* adjust opacity if needed */
      border: 1px solid rgba(63,58,58,0.4);
      border-radius: 22px;
      box-shadow: 0 18px 44px rgba(0,0,0,0.25);
      overflow: hidden;
    }

    /* =========================================================
       HEADER / NAV
       ========================================================= */
    header{
      padding: 26px 22px 18px;
      border-bottom: 1px solid rgba(63,58,58,0.4);
      position: sticky;
      top: 10px;
      z-index: 10;
      backdrop-filter: blur(6px);
      background: rgba(251,247,239,.72);
    }

    .brand{
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      margin-bottom: 14px;
    }

    .brand h1{
      margin: 0;
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(1.8rem, 3.2vw, 2.5rem);
      letter-spacing: .02em;
    }

    .brand p{
      margin: 0;
      color: #423029;
      font-size: .95rem;
    }

    .accent-script{
      font-family: "Ms Madi", cursive;
      font-size: 1.7rem;
      color: #58181F;
      margin-left: 6px;
      vertical-align: baseline;
    }

    nav{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
    }

    .navlinks{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .navlinks a{
      padding: 10px 12px;
      border: 1px solid rgba(63,58,58,0.4);
      border-radius: 999px;
      background: rgba(255,255,255,.35);
      font-size: .9rem;
    }

    .navlinks a:hover{
      background: rgba(196,156,72,.10); /* gold wash */
      text-decoration: none;
    }

    .tiny{
      color: #423029;
      font-size: .85rem;
      opacity: .95;
    }

    /* =========================================================
       SECTIONS / LAYOUT
       ========================================================= */
    main{ padding: 26px 22px 34px; }

    section{
      padding: 22px;
      margin: 18px 0;
      border: 1px solid rgba(63,58,58,0.4);
      border-radius: 14px;
      background: rgba(251,247,239,.86);
    }

    .section-title{
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin: 0 0 10px;
      font-family: "Cormorant Garamond", serif;
      font-size: 1.65rem;
    }

    .section-kicker{
      color: #423029;
      font-size: .95rem;
      margin-top: 0;
    }

    /* Decorative divider image (optional) */
    .divider{
      margin: 8px 0 8px;
      height: 23px;
      opacity: .85;
      background-image: url("https://paperandolivepng.carrd.co/assets/images/image07.jpg?v=aba44a26");  /* REPLACE IMAGE PATH */
      background-repeat: repeat;
      background-position: left center;
      background-size: contain;
    }

    /* Cards */
    .grid{
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 16px;
    }
    @media (max-width: 860px){
      .grid{ grid-template-columns: 1fr; }
      header{ position: static; }
    }

    .card{
      border: 1px solid rgba(63,58,58,0.4);
      border-radius: 14px;
      padding: 16px;
      background: rgba(255,255,255,.35);
    }

    .card h3{
      margin: 0 0 8px;
      font-family: "Cormorant Garamond", serif;
      font-size: 1.25rem;
    }

    .pill{
      display: inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(63,58,58,0.4);
      font-size: .82rem;
      color: #423029;
      background: rgba(255,255,255,.35);
    }

    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid rgba(63,58,58,0.4);
      border-radius: 999px;
      padding: 10px 14px;
      background: rgba(126,140,84,.12); /* moss wash */
      cursor: pointer;
      font: inherit;
    }
    .btn:hover{ background: rgba(88,24,31,.12); } /* wine wash */

    /* =========================================================
       HOME
       ========================================================= */
    .hero{
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 16px;
      align-items: start;
    }
    @media (max-width: 860px){
      .hero{ grid-template-columns: 1fr; }
    }

    .hero h2{
      margin: 0 0 8px;
      font-family: "Cormorant Garamond", serif;
      font-size: 2rem;
    }

    .quote{
      margin: 10px 0 0;
      padding-left: 12px;
      border-left: 3px solid rgba(88,24,31,.45); /* wine */
      color: #423029;
      font-style: italic;
    }

    .portrait{
      border-radius: 22px;
      border: 1px solid rgba(63,58,58,0.4);
      overflow: hidden;
      background: rgba(255,255,255,.35);
    }
    .portrait img{
      width: 100%;
      height: auto;
      display: block;
      /* ABOUT IMAGE PLACEHOLDER */
      /* Replace src in HTML below */
    }
    .portrait figcaption{
      padding: 10px 12px;
      font-size: .85rem;
      color: #423029;
    }

    /* =========================================================
       WORKS — TABS
       ========================================================= */
    .tabs{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 10px 0 14px;
    }
    .tab{
      border: 1px solid rgba(63,58,58,0.4);
      background: rgba(255,255,255,.35);
      border-radius: 999px;
      padding: 9px 12px;
      cursor: pointer;
      font: inherit;
      font-size: .92rem;
    }
    .tab[aria-selected="true"]{
      background: rgba(196,156,72,.15); /* gold wash */
      border-color: rgba(177,139,58,.35);
    }

    .panel{
      display: none;
      border: 1px solid rgba(63,58,58,0.4);
      border-radius: 14px;
      padding: 16px;
      background: rgba(255,255,255,.35);
    }
    .panel.active{ display: block; }

    .work-item{
      padding: 12px;
      border: 1px dashed rgba(28,26,23,.22);
      border-radius: 10px;
      margin: 10px 0;
      background: rgba(251,247,239,.60);
    }
    .work-item h4{
      margin: 0 0 6px;
      font-family: "Cormorant Garamond", serif;
      font-size: 1.2rem;
    }
    .work-meta{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 6px;
    }
    .work-item p{ margin: 0; color: #423029; }
    
    /* =========================================================
   PLAYLISTS
   ========================================================= */
.playlist-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.playlist-card{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 14px;
  border: 1px solid rgba(63,58,58,0.4);
  border-radius: 22px;
  background: rgba(255,255,255,.35);
  overflow: hidden;
}

@media (max-width: 860px){
  .playlist-card{
    grid-template-columns: 1fr;
  }
}

.playlist-media{
  border-right: 1px solid rgba(63,58,58,0.4);
  background: rgba(251,247,239,.55);
}

@media (max-width: 860px){
  .playlist-media{
    border-right: none;
    border-bottom: 1px solid rgba(63,58,58,0.4);
  }
}

.playlist-media img{
  width: 100%;
  height: 100%;
  max-height: 280px;
  object-fit: cover;
  display: block;
  /* You can swap to 'contain' if you want no cropping */
}

.playlist-body{
  padding: 14px;
}

.playlist-body h3{
  margin: 0 0 6px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
}

    /* =========================================================
       CONTACT
       ========================================================= */
    form{
      display: grid;
      gap: 10px;
      max-width: 620px;
    }
    label{ font-size: .92rem; color: #423029; }
    input, textarea{
      width: 100%;
      padding: 11px 12px;
      border-radius: 12px;
      border: 1px solid rgba(63,58,58,0.4);
      background: rgba(255,255,255,.45);
      color: #27221F;
      font: inherit;
    }
    textarea{ min-height: 120px; resize: vertical; }

    .note{
      font-size: .85rem;
      color: #423029;
      margin-top: 8px;
    }

    /* =========================================================
       FOOTER
       ========================================================= */
    footer{
      padding: 18px 22px 26px;
      border-top: 1px solid rgba(63,58,58,0.4);
      color: #423029;
      font-size: .88rem;
    }

  </style>