/* ============================================================================
   RC3.1 brand pass (owner 24.10). Loaded after rc3-gap.css (inc/enqueue.php).
     B   announcement bar: "marble" scheme (dark marble strip, gold text, slow
         light sweep, messages cross-fade) + the gold CTA chip beside the text
     D   homepage band: logo mark + living tagline (inc/tagline.php)
     D.4 header: logo mark + small static gold tagline
   Every animation sits inside (prefers-reduced-motion: no-preference), so the
   reduced-motion rules of announce-v2.css stay in force untouched.
   ============================================================================ */

/* ── B. Announcement bar: marble scheme ─────────────────────────────────── */
#sg-announce.sg-ann2[data-scheme="marble"] {
  --ann-bg:
    radial-gradient(120% 220% at 12% 0%, rgba(255, 255, 255, .07) 0, transparent 42%),
    radial-gradient(90% 260% at 78% 120%, rgba(201, 162, 75, .10) 0, transparent 45%),
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .035) 31%, transparent 34%, transparent 62%, rgba(255, 255, 255, .03) 63%, transparent 66%),
    linear-gradient(90deg, #1E1E22, #2B2B30 50%, #1E1E22);
  --ann-ink:    #E2C77E;   /* 9.6:1 on #2B2B30 */
  --ann-accent: #F0DCA0;   /* 11.6:1 */
  --ann-icon:   #C9A24B;   /* decorative */
  --ann-hover:  rgba(226, 199, 126, .14);
  --ann-focus:  #E2C77E;
  --ann-line:   linear-gradient(90deg, transparent, #8C6B26 15%, #E2C77E 50%, #8C6B26 85%, transparent);
}
#sg-announce.sg-ann2[data-scheme="marble"] .sg-ann2__inner { position: relative; z-index: 1; }
#sg-announce.sg-ann2[data-scheme="marble"] .sg-ann2__msg { letter-spacing: .3px; }

@media (prefers-reduced-motion: no-preference) {
  /* A soft light passing over the glass every 9 s; it waits while paused. */
  #sg-announce.sg-ann2[data-scheme="marble"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0 40%, rgba(255, 236, 190, 0) 42%, rgba(255, 236, 190, .22) 50%, rgba(255, 236, 190, 0) 58%, transparent 60% 100%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 110% 0;
    animation: sg-ann-marble-sweep 9s ease-in-out 1.5s infinite;
  }
  #sg-announce.sg-ann2[data-scheme="marble"].is-paused::before { animation-play-state: paused; }
  /* Cross-fade whatever transition is stored (the B1 look is a fade). */
  #sg-announce.sg-ann2[data-scheme="marble"] .sg-ann2__msg.is-in  { animation: sg-ann2-fade-in  var(--ann-dur) ease both !important; transform: none !important; }
  #sg-announce.sg-ann2[data-scheme="marble"] .sg-ann2__msg.is-out { animation: sg-ann2-fade-out var(--ann-dur) ease both !important; transform: none !important; }
}
@keyframes sg-ann-marble-sweep { 0% { background-position: 110% 0; } 28% { background-position: -10% 0; } 100% { background-position: -10% 0; } }

/* One line at every width: the text gives way (ellipsis), the chip never does. */
#sg-announce.sg-ann2 .sg-ann2__msg { white-space: nowrap; max-inline-size: 100%; }
#sg-announce.sg-ann2 .sg-ann2__text { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }

/* The gold chip, right beside the message text. */
#sg-announce.sg-ann2 .sg-ann2__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.3;
  color: #231A0B;          /* 5.7:1 on the chip's darkest stop */
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(180deg, #D4AF5A, #B58E3A);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 3px rgba(0, 0, 0, .25);
  transition: filter .2s ease;
}
#sg-announce.sg-ann2 .sg-ann2__cta:hover { filter: brightness(1.07); }
#sg-announce.sg-ann2 .sg-ann2__cta:focus-visible { outline: 2px solid var(--ann-focus); outline-offset: 2px; }
@media (max-width: 480px) {
  #sg-announce.sg-ann2 .sg-ann2__msg { font-size: .78rem; }
  #sg-announce.sg-ann2 .sg-ann2__cta { padding: 2px 9px; font-size: .7rem; }
}

/* ── D. Homepage band: mark + living tagline ────────────────────────────── */
/* The mark is 297x316: 148px = 296 device px at 2x, never upscaled. */
.sg-topband .sg-topband__logo.sg-topband__mark {
  inline-size: 148px !important;
  block-size: auto !important;
  max-inline-size: none !important;
  max-block-size: none !important;
  aspect-ratio: 297 / 316;
}
@media (max-width: 699px) {
  .sg-topband .sg-topband__logo.sg-topband__mark { inline-size: 116px !important; }
}
/* rc3-gap.css made the old tag screen-reader-only; the live tagline is visible. */
.sg-topband .sg-topband__tag.sg-tl {
  position: static !important;
  inline-size: auto !important;
  block-size: 1.2em !important;      /* reserved from the first paint: CLS 0 */
  overflow: visible !important;
  clip-path: none !important;
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font-family: 'Heebo', sans-serif;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: .2px;
}
.sg-tl__word { display: inline-grid; }
.sg-tl__glow,
.sg-tl__text { grid-area: 1 / 1; }
/* The soft halo under each glyph: what keeps the letters AA on the band photo. */
.sg-tl__glow {
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 2px rgba(var(--tl-glow), .95),
    0 0 4px rgba(var(--tl-glow), .9),
    0 0 6px rgba(var(--tl-glow), .8),
    0 0 10px rgba(var(--tl-glow), .6),
    0 1px 16px rgba(var(--tl-glow), .4);
}
/* The metallic letters. text-shadow off: the band's inherited shadow would
   paint over a background-clip:text fill and turn it muddy. */
.sg-tl__text {
  position: relative;
  text-shadow: none !important;
  background-image:
    linear-gradient(100deg, transparent 0 42%, var(--tl-shine) 50%, transparent 58% 100%),
    linear-gradient(180deg, var(--tl-s1) 0%, var(--tl-s2) 52%, var(--tl-s3) 100%);
  background-size: 320% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 115% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  /* One pass of light every 7 s (the pass itself ~1.8 s), never a flicker. */
  .sg-tl__text { animation: sg-tl-sweep 7s ease-in-out 1.2s infinite; }
}
@keyframes sg-tl-sweep { 0% { background-position: 115% 0, 0 0; } 26% { background-position: -15% 0, 0 0; } 100% { background-position: -15% 0, 0 0; } }
.sg-tl__icon {
  display: inline-grid;
  color: var(--tl-s2);
  filter: drop-shadow(0 0 1.5px rgba(var(--tl-glow), .9)) drop-shadow(0 0 6px rgba(var(--tl-glow), .7));
}
.sg-tl__icon svg { inline-size: 22px; block-size: 22px; }
.sg-tl__icon--emoji { font-size: 20px; line-height: 1; }
@media (max-width: 699px) {
  .sg-topband .sg-topband__tag.sg-tl { font-size: 19px; gap: 6px; margin-top: 4px; }
  .sg-tl__icon svg { inline-size: 17px; block-size: 17px; }
}

/* ── D.4 Header: mark + small static tagline ────────────────────────────── */
/* Specificity above the header's older is-scrolled logo rules (main.css,
   b1-logo.css, header-v2.css, rc3-gap.css), so both states use one size and
   the header never changes height: icons stay on the same centre line. */
.sg-header.sg-header.sg-header .sg-header__main .sg-logo .sg-logo__link {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.sg-header.sg-header.sg-header .sg-header__main .sg-logo img.sg-logo__mark {
  block-size: 44px !important;
  max-block-size: 44px !important;
  inline-size: auto !important;
  max-inline-size: none !important;
  aspect-ratio: 297 / 316;
}
.sg-header.sg-header.sg-header .sg-header__main .sg-logo .sg-logo__tl {
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: .2px;
  white-space: nowrap;
  text-shadow: none;
  background: linear-gradient(180deg, #F3E3B5, #C9A24B 55%, #E2C77E);   /* 7:1+ on the charcoal header */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 899px) {
  .sg-header.sg-header.sg-header .sg-header__main .sg-logo .sg-logo__tl { display: none; }
  .sg-header.sg-header.sg-header .sg-header__main .sg-logo img.sg-logo__mark { block-size: 48px !important; max-block-size: 48px !important; }
}