@layer components {
  .site-notice {
    position: relative;
    z-index: 81;
    background: color-mix(in oklch, var(--pw-secondary) 7%, var(--pw-bg-app));
    border-block-end: 1px solid color-mix(in oklch, var(--pw-secondary) 20%, var(--pw-border));
    color: var(--pw-fg-meta);
  }
  .site-notice__inner {
    min-block-size: 2.5rem;
    display: flex;
    align-items: center;
    padding-block: .35rem;
  }
  .site-notice__icon {
    --notice-icon-size: .875rem;
    flex: none;
    inline-size: var(--notice-icon-size);
    block-size: var(--notice-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .site-notice__content {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-inline-size: 0;
  }
  .site-notice__title {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--pw-secondary);
    font-family: var(--pw-font-mono);
    font-size: var(--pw-fs-2xs);
    font-weight: 700;
    letter-spacing: var(--pw-track-eyebrow);
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .site-notice__title::after { content: "-"; }
  .site-notice__message {
    min-inline-size: 0;
    font-size: var(--pw-fs-xs);
    line-height: 1.4;
    text-wrap: pretty;
    white-space: nowrap;
  }
  .site-notice__message-short { display: none; }

  @media (width < 40rem) {
    .site-notice__inner { min-block-size: 2.25rem; }
    .site-notice__message { font-size: var(--pw-fs-2xs); }
    .site-notice__message-full { display: none; }
    .site-notice__message-short { display: inline; }
  }
}