body {
      margin: 0;
      padding: 50px 20px;
      background: #0c0c0c;
      color: #f5efe6;
      font-family: "Spectral", serif;
      line-height: 1.7;
    }
    .wrapper {
      max-width: 660px;
      margin: 0 auto;
    }

    h1 {
      font-family: "Cormorant Unicase", serif;
      /* responsive size */
      font-size: clamp(3.8rem, 12vw, 6rem);
      letter-spacing: 0.18em;
      margin-bottom: 1.4rem;
      color: #f7f2be;
      text-transform: uppercase;
      font-weight: 500;
      line-height: 1.2;
    }
    h2 {
      font-family: "Cormorant Unicase", serif;
      font-size: clamp(1.2rem, 4.5vw, 1.7rem);
      font-style: italic;
      letter-spacing: 0.22em;
      font-weight: 400;
      margin-top: 0.4rem;
      opacity: 0.8;
    }
    h3 {
      font-family: "Cormorant Unicase", serif;
      font-size: 1.6rem;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      font-weight: 400;
      margin-top: 3.4rem;
      margin-bottom: 0rem;
    }

    .meta {
      font-size: 0.9rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      opacity: 0.7;
      margin-top: 1.8rem;
      margin-bottom: 3.2em;
    }

    p {
      font-size: 1.22rem;
      line-height: 2.2rem;
      margin-bottom: 1.3em;
      margin-top: 0.4rem;
    }

    a, a:active {
      color: white;
      text-decoration: underline;
      text-decoration-color: grey;
    }

    a:hover {
      color: #f7f2be;
      text-decoration-color: #f7f2be;
    }

    ol, ul {
      font-size: 1.22rem;
      padding-left: 2.4rem;
      margin-bottom: 1.4rem;
    }
    li {
      margin-bottom: 0.3rem;
    }

    hr {
      border: none;
      border-top: 1px solid rgba(245, 239, 230, 0.16);
      margin: 2.4em 0;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* Facilitator block – flex instead of floats */
    #mattis {
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
      margin-top: 0.5rem;
      margin-bottom: 2.4rem;
    }
    #mattis-text {
      flex: 1 1 60%;
      padding-right: 0.6rem;
    }
    #mattis-image {
      flex: 0 0 auto;
      max-width: 180px;
      margin-top: 1.2rem;
    }


    #mattis-image img {
      border-radius: 4px;
    }


    .button {
      display: inline-block;
      margin-top: 0.8rem;
      margin-bottom: 0.8rem;
      padding: 0.7rem 1.6rem;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 0.9rem;
      border-radius: 999px;
      border: 1px solid #f7f2be;
      color: #0c0c0c;
      background-color: #f7f2be;
    }
    .button:hover {
      text-decoration: none;
      color: grey;
    }
    .button a:hover {
      color: black;
      text-decoration: none;
    }

    .note {
      font-size: 0.86rem;
      color: #b7b0a5;
      margin-top: 1.6rem;
      line-height: 1.8rem;
    }

    .note a {
      color: #ddd;
      text-decoration: none;
    }
    .note a:hover {
      color: #ddd;
      text-decoration: underline;
    }
    .top {
      text-align: center;
    }
    .gold {
      color:#f7f2be;
    }
    p.cost {
      margin-bottom: 0.5rem;
    }
    p.img-text {
  text-align: right;
  font-size: 0.8rem;
  color: grey;
  line-height: 1.2;         /* tighter line box */
  margin: 0.3rem 0 0;       /* small top margin, no bottom margin */
}
    /* Mobile adjustments */
    @media (max-width: 640px) {
      body {
        padding: 32px 16px;
      }
      .meta {
        font-size: 0.8rem;
        letter-spacing: 0.14em;
      }
      #mattis {
        flex-direction: column-reverse; /* image below text */
        gap: 1rem;
        align-items: flex-start;
        margin-bottom: 1.4rem;          /* was 2.4rem */
      }
      #mattis-image {
        max-width: 280px;
        margin-top: 0.2rem;
      }
      #mattis-image img {
        width: 100%;                 /* ensure it expands */
        height: auto;
      }
      #mattis-text {
        padding-right: 0;
      }
      h3 {
      margin-top: 2.2rem;             /* was 3.4rem */
    }
    }