/* The certificate keeps one landscape proportion at every width, so its type and spacing
   scale with its own inline size (cqi) rather than the viewport. */
@layer components {
  .certificate {
    container-type: inline-size;
    inline-size: calc(var(--size-fill) - 2 * var(--gutter-fluid));
    max-inline-size: calc(var(--measure) * 1.6);
    margin-block: var(--space-8);
    margin-inline: auto;
    aspect-ratio: 1.414 / 1;
    border-radius: var(--radius-card);
    background-color: var(--color-surface-raised);
    box-shadow: var(--elev-2);
    color: var(--color-ink);
  }

  .certificate__frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    block-size: calc(100% - 6cqi);
    margin: 3cqi;
    padding-inline: 6cqi;
    border: var(--border-width-strong) solid var(--color-celebrate);
    border-radius: var(--radius-sm);
    text-align: center;
  }

  .certificate__eyebrow {
    margin-block-end: 1.6cqi;
    color: var(--color-ink-faint);
    font-family: var(--font-body);
    font-size: 1.4cqi;
    font-weight: 700;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
  }

  .certificate__title {
    color: var(--color-ink-display);
    font-family: var(--font-display);
    font-size: 5cqi;
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }

  .certificate__rule {
    inline-size: 12cqi;
    margin-block: 3cqi;
    border: none;
    border-block-start: var(--border-width-strong) solid var(--color-celebrate);
  }

  .certificate__presented {
    color: var(--color-ink-faint);
    font-family: var(--font-body);
    font-size: 1.6cqi;
  }

  .certificate__name {
    max-inline-size: 100%;
    overflow: hidden;
    color: var(--color-ink-display);
    font-family: var(--font-display);
    font-size: 4cqi;
    font-style: italic;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .certificate__recognition {
    max-inline-size: 60cqi;
    margin-block: 3cqi 4cqi;
    color: var(--color-ink-muted);
    font-family: var(--font-body);
    font-size: 1.6cqi;
    line-height: 1.55;
    text-wrap: pretty;
  }

  .certificate__facts {
    display: flex;
    justify-content: center;
    gap: 5cqi;
    margin: var(--space-0);
  }

  .certificate__fact {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.4cqi;
  }

  .certificate__term {
    color: var(--color-ink-faint);
    font-family: var(--font-body);
    font-size: 1.1cqi;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .certificate__value {
    margin: var(--space-0);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 1.6cqi;
    font-weight: 600;
  }

  .certificate__value--id {
    font-family: var(--font-mono);
    font-weight: 400;
  }

  @page certificate {
    size: landscape;
    margin: 0.5in;
  }

  @media print {
    .stage:has(.certificate) {
      position: static;
      overflow: visible;
    }

    .page:has(.certificate) {
      overflow: visible;
      padding: var(--space-0);
    }

    .page:has(.certificate) .toolbar {
      display: none;
    }

    .certificate {
      page: certificate;
      inline-size: min(100%, 141vh);
      max-inline-size: none;
      margin: var(--space-0) auto;
      box-shadow: none;
      break-inside: avoid;
      print-color-adjust: exact;
    }
  }
}