@layer components {
  .plate {
    position: relative;
    isolation: isolate;
    padding: clamp(1.25rem, 0.5rem + 2.6vw, 3rem);
    background-color: var(--surface-warm);
    background-image: linear-gradient(var(--line-faint) 1px, transparent 1px), linear-gradient(90deg, var(--line-faint) 1px, transparent 1px);
    background-size: 1.75rem 1.75rem;
    background-position: center center;
    border-radius: var(--radius-xs);
  }

  .plate::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid var(--line);
    pointer-events: none;
  }

  .plate__caption {
    max-width: 52ch;
    margin-top: var(--space-s);
    font-family: var(--font-display);
    font-size: var(--text-ui);
    font-style: italic;
    line-height: 1.5;
    color: var(--ink-soft);
    text-wrap: pretty;
  }

  .plate__caption-label {
    margin-right: 0.2rem;
    font-family: var(--font-text);
    font-size: var(--text-2xs);
    font-style: normal;
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-accent);
  }
}