@layer components {
  /* Zohar's banner, in a few looks the editor picks (Site::Banner#style →
     .promo-banner--<style>). Shared base first, then each style's character. */
  .promo-banner {
    color: var(--color-on-brand);
    letter-spacing: 0.01em;
    background: var(--color-brand-strong);
    box-shadow:
      inset 0 -1px 0 oklch(100% 0 0 / 0.10),
      0 10px 30px -18px oklch(0% 0 0 / 0.7);
  }
  .promo-banner__message { font-weight: 500; }

  /* Solid, high-contrast CTA pill that pops on every look. */
  .promo-banner__cta {
    background: var(--color-on-brand);
    color: var(--color-brand-strong);
    border-color: transparent;
    box-shadow: 0 2px 12px -5px oklch(0% 0 0 / 0.5);
  }
  .promo-banner__cta:hover {
    background: #fff;
    color: var(--color-brand-strong);
    box-shadow: 0 5px 18px -5px oklch(0% 0 0 / 0.55);
  }

  /* ── Calm (default, above the header) — a soft diagonal sheen and a gentle pulse ── */
  .promo-banner--calm {
    background:
      radial-gradient(140% 180% at 18% -60%, oklch(100% 0 0 / 0.14), transparent 55%),
      linear-gradient(100deg,
        color-mix(in oklab, var(--color-brand-strong) 86%, #000 14%),
        var(--color-brand-strong) 48%,
        color-mix(in oklab, var(--color-brand-strong) 80%, #fff 20%));
  }
  .promo-banner--calm .promo-banner__message::before {
    content: "";
    display: inline-block;
    inline-size: 0.5em;
    block-size: 0.5em;
    margin-inline-end: 0.6em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0.05em;
    box-shadow: 0 0 0 0.15em oklch(100% 0 0 / 0.18);
  }
  @media (prefers-reduced-motion: no-preference) {
    .promo-banner--calm .promo-banner__message::before { animation: promo-pulse 2.6s ease-in-out infinite; }
    @keyframes promo-pulse {
      0%, 100% { opacity: 0.55; transform: scale(0.8); }
      50%      { opacity: 1; transform: scale(1); }
    }
  }

  /* ── Bold (a solid strip below the header) — flat, uppercase, tracked, with a bright
     seam separating it from the masthead above. ── */
  .promo-banner--bold {
    background: color-mix(in oklab, var(--color-brand-strong) 90%, #000 10%);
    border-block-start: 2px solid var(--color-on-brand);
    box-shadow: 0 8px 20px -16px oklch(0% 0 0 / 0.7);
  }
  .promo-banner--bold .promo-banner__message {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
  }
  .promo-banner--bold .promo-banner__message::before {
    content: "";
    display: inline-block;
    inline-size: 0.5em;
    block-size: 0.5em;
    margin-inline-end: 0.6em;
    background: currentColor;
    vertical-align: 0.04em;
  }

  /* ── Ribbon — a fixed corner ribbon in the *trailing* top corner (a "Coming Soon" style tag),
     clear of the brand at the leading edge: an amber band (the editor-note colour) folded across
     the corner, carrying the message as a link. Floats over the page, above the header. ── */
  .promo-banner--ribbon {
    position: fixed;
    z-index: calc(var(--z-header) + 1); /* over the header it crosses */
    /* Centre the band ON the corner's 45° diagonal (Cx = Cy): block-start = inline-end + 2rem.
       That makes the off-screen overrun above the top edge equal the overrun off the side, so
       the band is symmetric about the corner — text lands in the true visible centre and both
       tips anchor just off their edges. Length is then one knob: inline-size (visible ≈ 0.9×). */
    inset-block-start: 6.5rem;
    inset-inline-end: -4.5rem;
    inline-size: 24rem;
    justify-content: center;
    gap: 0;
    padding-block: 0.65rem;
    padding-inline: 2.5rem;
    text-align: center;
    transform: rotate(45deg);
    transform-origin: center;
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--color-caution) 42%, #fff 58%),
      color-mix(in oklab, var(--color-caution) 62%, #fff 38%));
    color: oklch(42% 0.13 62);
    font-size: var(--text-small);
    font-weight: 600;
    /* Pointed, filled ends so the visible tip reads as a solid ribbon tail (not a forked cut). */
    clip-path: polygon(0.8rem 0, calc(100% - 0.8rem) 0, 100% 50%, calc(100% - 0.8rem) 100%, 0.8rem 100%, 0 50%);
    filter: drop-shadow(0 4px 7px oklch(0% 0 0 / 0.32));
    animation: none; /* the shared slide-in sets transform; keep our rotation */
  }
  [dir="rtl"] .promo-banner--ribbon { transform: rotate(-45deg); }

  /* The ribbon carries just the message; the pill CTA and dismiss don't apply here. */
  .promo-banner--ribbon .promo-banner__inner { flex: none; }
  .promo-banner--ribbon .promo-banner__message {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 18rem;
    color: inherit;
  }
  /* Underline the linked message so it's obviously clickable. */
  .promo-banner--ribbon a.promo-banner__message {
    text-decoration: underline;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  }
  .promo-banner--ribbon .promo-banner__cta,
  .promo-banner--ribbon .promo-banner__dismiss { display: none; }
}