/* Early Bird Coins banner (Baumel, 2026-11-15 — replaces the 11-09 drawn banner)
 * ============================================================================
 * The banner is now Baumel's artwork, /assets/early-bird-banner-20261115.webp
 * (2560 x 65), instead of the HTML/SVG strip this file used to style.
 *
 * Placement (his 11-15 ask, with the markings on his screenshot):
 *   - at the VERY TOP of the page, above the header, not under it;
 *   - as wide as every other element on the page, i.e. .ss-container
 *     (--ss-container + two gutters), so its edges line up with the header bar
 *     and the cards below.
 *
 * Why the art is cropped and not shrunk: the words and the bird live in the
 * middle ~600 px of the 2560 px canvas and the rest is wave filler, so scaling
 * the whole canvas down to 1280 px would leave the type about 13 px tall. The
 * band instead keeps the art near its drawn height and lets the filler run off
 * both edges (background-size: auto 100%, centred). The visible slice is always
 * wider than the artwork's core, down to a 320 px phone.
 *
 * Built and mounted by early-bird-banner.js. Signed-out visitors only; the x
 * hides it on this browser for 7 days.
 * ============================================================================ */

.ss-eb {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: calc(var(--ss-container, 1280px) + (var(--ss-gutter, 16px) * 2));
  margin: 0 auto 8px;
  padding-inline: var(--ss-gutter, 16px);
}

.ss-eb-art {
  display: block;
  position: relative;
  overflow: hidden;
  height: clamp(34px, 4.6vw, 65px);
  border-radius: var(--ss-r-media, 8px);
  /* Sampled from the art's own sky, for the moment before the file lands. */
  background-color: #BFE5FC;
  background-image: url("/assets/early-bird-banner-20261115.webp?v=20261115eb2");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
  text-decoration: none;
}
.ss-eb-art:hover { text-decoration: none; }
.ss-eb-art:focus-visible {
  outline: 3px solid var(--eb-focus, #2457C5);
  outline-offset: 3px;
}

html[data-theme="dark"] .ss-eb-art {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.ss-eb-close {
  position: absolute;
  top: 50%;
  right: calc(var(--ss-gutter, 16px) + 6px);
  transform: translateY(-50%);
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.74);
  color: #0B1F3F;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.ss-eb-close:hover { background: #FFFFFF; }
.ss-eb-close:focus-visible {
  outline: 3px solid var(--eb-focus, #2457C5);
  outline-offset: 2px;
}
.ss-eb-close svg { width: 14px; height: 14px; }

/* Hiding: a short collapse, then early-bird-banner.js removes the node. */
.ss-eb.is-leaving {
  overflow: hidden;
  transition: opacity 0.18s ease, max-height 0.22s ease, margin-bottom 0.22s ease;
  max-height: 0 !important;
  margin-bottom: 0 !important;
  opacity: 0;
}

@media (max-width: 640px) {
  .ss-eb { margin-bottom: 6px; }
  .ss-eb-close { width: 24px; height: 24px; right: calc(var(--ss-gutter, 16px) + 4px); }
  .ss-eb-close svg { width: 12px; height: 12px; }
}

/* Very small phones: shrink the band a little more so the artwork's words and
   bird still fit inside the visible slice (the core is ~590 px of the canvas). */
@media (max-width: 380px) {
  .ss-eb-art { height: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-eb.is-leaving, .ss-eb-close { transition: none; }
}

@media print {
  .ss-eb { display: none !important; }
}