/* A note card: torn paper edge via an SVG filter, drawn on its own layer so the
   displacement never touches the text. The filter belongs to the document. */
[qcms-mod="cont.luca.note"] {
  margin-block: clamp(3rem, 7vw, 6rem);
  /* The card stacks by its own width — it may stand in a narrow column of a wide window. */
  container-type: inline-size;

  > .card {
    position: relative;
    isolation: isolate;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
  }

  /* Three children share two columns: text, the free slot, and possibly a picture.
     With a picture the slot belongs under the text; without one it is the second column. */
  > .card > .text { grid-column: 1 }
  > .card > [qcms-name=extra] { grid-column: 2 }
  > .card:has(:is(cms-image2, img)) > [qcms-name=extra] { grid-column: 1 }
  > .card > :is(cms-image2, img) { grid-column: 2; grid-row: 1 / span 2 }

  > .card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Woven paper: two hairline grids at barely two percent of ink over the card tone.
       The deckle filter warps them along with the edge, so the weave never looks ruled. */
    background:
      repeating-linear-gradient(90deg, rgb(0 0 0 / .022) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(0deg,  rgb(0 0 0 / .022) 0 1px, transparent 1px 5px),
      color-mix(in srgb, var(--color-bg), var(--color) 5%);
    filter: url(#deckle) drop-shadow(2px 2px 4px #0003);
  }

  :is(cms-image2, img) {
    width: clamp(9rem, 20vw, 15rem);
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
  }

  .kicker {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: color-mix(in srgb, var(--color), var(--color-bg) 20%);
  }

  .figure {
    font-family: var(--font-head, inherit);
    font-size: 1.5rem;
    display: block;
    width: fit-content;
    border-bottom: 2px solid var(--color);
    margin-bottom: 1.2rem;
  }

  [qcms-name=actions] {
    p { margin: 0 }
    a {
      display: inline-block;
      font-size: .76rem;
      text-transform: uppercase;
      letter-spacing: .13em;
      text-decoration: none;
      border-bottom: 1px solid transparent;
    }
    a:hover { border-color: currentColor }
  }

  @container (width < 30rem) {
    > .card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center }
    > .card > :is(cms-image2, img) { grid-column: 1; grid-row: auto }
    > .card > [qcms-name=extra] { grid-column: 1 }
  }
}