/* Component: NoteCard ------------------------------------------------------ */
@layer components {
  .tp-note {
    position: relative;
    display: block;
    max-width: 100%;
  }

  /* The artwork is placed whole: no crop, no stretch, no recolour. */
  .tp-note__paper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 10px 20px rgba(60, 45, 25, 0.14));
  }

  /* Copy sits inside the writing area, clear of torn edges, pins and clips. */
  .tp-note__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 17% 15%;
    text-align: center;
    color: var(--tp-color-text);
  }

  .tp-note__body > * + * {
    margin-top: var(--tp-space-2);
  }

  .tp-note__label {
    font-family: var(--tp-font-mono);
    font-size: clamp(7px, 0.62vw, 9.5px);
    letter-spacing: var(--tp-track-wide);
    text-transform: uppercase;
    color: var(--tp-color-gold-text);
  }

  .tp-note__text {
    font-size: clamp(11px, 1.05vw, 16px);
    font-style: italic;
    font-weight: var(--tp-weight-light);
    line-height: 1.42;
    color: var(--tp-color-text-body);
    text-wrap: pretty;
  }

  .tp-note__title {
    font-size: clamp(12px, 1.1vw, 17px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tp-color-ink);
  }

  /* Photo frames: the photograph sits BEHIND the frame artwork, cropped to
     the opening. Openings are percentages of the card, per the asset spec. */
  .tp-note--8 .tp-note__photo { inset: 22.7% 18.7% 19.2% 17.9%; }
  .tp-note--9 .tp-note__photo { inset: 18.6% 17.9% 18.7% 17.9%; }
  .tp-note--10 .tp-note__photo { inset: 22.2% 19.3% 17.6% 19.1%; }

  .tp-note__photo {
    position: absolute;
    overflow: hidden;
    z-index: -1;
  }

  .tp-note__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}