/* ============================================================
   ANNOUNCEMENTS — shared structural styles
   ------------------------------------------------------------
   One file, two brands: every corner radius and type family
   reads from the host theme tokens (--radius-*, --font-*), so
   the SAME spec renders rounded + Barlow Condensed on M&K and
   square + Archivo Narrow on J&M, automatically, with zero
   per-brand code.

   The announcement's own palette arrives as inline --an-* custom
   properties on .an-root (from specCssVars). This file positions,
   spaces, and types; it never hardcodes a brand colour or radius.
   Every derived tone (muted body, hairline, accent tint) is mixed
   from the --an-* vars so it always tracks the chosen palette.

   Served on demand as /an.css: committed copies live in each app's
   static/ (css-sync.test.ts guards drift) and are linked by
   <AnnouncementStyles /> — public layouts only when an announcement is
   active, admin layouts always (editor previews).
   ============================================================ */

/* ---------- Root container ---------- */
.an-root {
  /* Palette (overridden inline by specCssVars; these are inert fallbacks). */
  --an-bg: #101820;
  --an-text: #ffffff;
  --an-accent: #c4252a;
  --an-accent-text: #ffffff;

  /* Tones derived from the palette so they always match the chosen colours. */
  --an-muted: color-mix(in srgb, var(--an-text) 72%, transparent);
  --an-hair: color-mix(in srgb, var(--an-text) 16%, transparent);
  --an-accent-tint: color-mix(in srgb, var(--an-accent) 16%, transparent);
  /* Shared theme-shelf derived tokens (Claude Design batch-1 handoff): a
     faint texture tint and a readable two-tone headline accent for dark
     grounds (promo-250's pink-tint trick, generalized). Theme blocks below
     mix off these instead of re-deriving their own. */
  --an-soft: color-mix(in srgb, var(--an-text) 7%, transparent);
  --an-head-tone: color-mix(in srgb, var(--an-accent) 45%, var(--an-text));

  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  background: var(--an-bg);
  color: var(--an-text);
  /* Inherits the host brand's corner softness: M&K rounds, J&M squares. */
  border-radius: var(--radius-box, 0);
  font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
  line-height: 1.3;
}

/* ============================================================
   Z-INDEX STACK
   2: .an-inner (copy)
   5: .an-dismiss (floats above all content)
   ============================================================ */

/* ---------- Inner row (copy + cta) ---------- */
.an-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2.4vw, 1.4rem);
  padding: clamp(0.75rem, 1.7vw, 1rem) clamp(1rem, 3vw, 1.6rem);
  /* Leave room for the dismiss button on the trailing edge. */
  padding-inline-end: 2.6rem;
  min-height: 4.6rem;
}

/* ---------- Copy block ---------- */
.an-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.an-eyebrow {
  margin: 0;
  display: inline-block;
  width: fit-content;
  font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--an-accent-text);
  background: var(--an-accent);
  padding: 0.14em 0.55em;
  border-radius: var(--radius-field, 2px);
  line-height: 1.25;
}

.an-headline {
  margin: 0;
  font-family: var(--font-heading, var(--font-body, sans-serif));
  font-weight: 700;
  font-size: clamp(1.1rem, 2.7vw, 1.5rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--an-text);
  overflow-wrap: anywhere;
}

.an-body {
  margin: 0;
  font-size: clamp(0.8rem, 1.7vw, 0.92rem);
  color: var(--an-muted);
  overflow-wrap: anywhere;
}

/* ---------- CTA (accent-filled button) ---------- */
.an-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.66em 1.15em;
  color: var(--an-accent-text);
  background: var(--an-accent);
  border: 1px solid transparent;
  border-radius: var(--radius-field, 0.25rem);
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.an-cta:hover {
  filter: brightness(1.08);
}
.an-cta:active {
  transform: translateY(1px);
}
.an-cta:focus-visible {
  outline: 2px solid var(--an-accent-text);
  outline-offset: 2px;
}

/* ---------- Promo code chip (base; themes restyle it) ---------- */
.an-code {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.an-code-label {
  font-size: 0.7em;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.an-code-value {
  border: 1px dashed color-mix(in srgb, var(--an-text) 55%, transparent);
  padding: 0.15em 0.5em;
  border-radius: var(--radius-field, 0);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Dismiss ---------- */
.an-dismiss {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: clamp(0.4rem, 1.4vw, 0.75rem);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  color: var(--an-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-field, 4px);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.an-dismiss:hover {
  color: var(--an-text);
  background: var(--an-hair);
}
.an-dismiss:focus-visible {
  outline: 2px solid var(--an-text);
  outline-offset: 1px;
}
.an-x-glyph {
  display: block;
}

/* ============================================================
   POPUP CARD SHELL
   ------------------------------------------------------------
   The card itself; the backdrop overlay is the caller's concern.
   Shares all .an-root, .an-headline, .an-body, .an-eyebrow, .an-cta,
   and .an-dismiss base rules above.
   ============================================================ */
.an-popup {
  max-width: clamp(20rem, 92vw, 30rem);
  width: 100%;
  border-radius: var(--radius-box, 0.75rem);
  box-shadow: 0 10px 34px rgba(6, 12, 20, 0.4), 0 2px 8px rgba(6, 12, 20, 0.25);
}

/* Inner layout: vertical column */
.an-popup .an-inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: clamp(1.3rem, 3.5vw, 1.6rem);
  min-height: 0;
  /* Dismiss X is in top-right; no trailing-edge indent needed. */
  padding-inline-end: clamp(1.3rem, 3.5vw, 1.6rem);
}

/* Headline is slightly larger in the card context */
.an-popup .an-headline {
  font-size: clamp(1.35rem, 4vw, 1.7rem);
  line-height: 1.05;
}

/* Body gets more breathing room in the card */
.an-popup .an-body {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Dismiss: top-right corner of card */
.an-popup-dismiss {
  top: 0.5rem;
  right: 0.55rem;
  transform: none;
}

/* ============================================================
   COMPACT — list-page mini preview (non-interactive)
   ============================================================ */
.an-compact {
  pointer-events: none;
}
.an-compact .an-inner {
  padding: clamp(0.4rem, 1.2vw, 0.6rem) clamp(0.6rem, 2vw, 0.9rem);
  gap: 0.6rem;
  min-height: 0;
}
.an-compact .an-headline {
  font-size: clamp(0.8rem, 2.4vw, 1.05rem);
}
.an-compact .an-body {
  font-size: clamp(0.68rem, 1.6vw, 0.8rem);
}
.an-compact .an-eyebrow {
  font-size: clamp(0.52rem, 1.2vw, 0.62rem);
}
.an-compact .an-cta {
  font-size: clamp(0.68rem, 1.5vw, 0.78rem);
  padding: 0.5em 0.85em;
}

/* Popup compact */
.an-popup.an-compact .an-inner {
  padding: clamp(0.75rem, 2.5vw, 1rem);
  gap: 0.5rem;
}
.an-popup.an-compact .an-headline {
  font-size: clamp(0.9rem, 3vw, 1.15rem);
}
.an-popup.an-compact .an-body {
  font-size: clamp(0.72rem, 1.8vw, 0.85rem);
}

/* Popup full-width on very small screens */
@media (max-width: 28rem) {
  .an-popup {
    max-width: 100%;
    border-radius: var(--radius-box, 0.75rem);
  }
}

/* ============================================================
   MOTION: honour reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .an-cta {
    transition: none;
  }
  .an-cta:active {
    transform: none;
  }
  .an-dismiss {
    transition: none;
  }
  .an-popup {
    box-shadow: 0 2px 8px rgba(6, 12, 20, 0.4);
  }
}

/* -- Public host (Phase 4) -----------------------------------------------
   Rendered only by the public AnnouncementHost island; inert in admin.
   The banner needs no extra rules: as the first child of the body flow it is
   already full-width and scrolls away under the sticky header. Only the popup
   needs a backdrop (the render component asks the caller to provide one). */

/* Align the public banner's CONTENT to the site's 1280 container, so the
   eyebrow/headline/CTA line up with the header and hero. The colored bar
   stays full-bleed. Layout only: no color or contrast change here; the theme
   registry (themes/registry.tsx) remains the authority on readability. */
.an-public-banner .an-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline-start: 2rem;
}

/* Dismiss animates the banner's height to zero so the page slides up to fill
   the void instead of snapping. grid-rows 1fr->0fr collapses smoothly with no
   magic max-height; the track clips its overflow as it shrinks. */
.an-public-banner {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 320ms ease;
}
.an-public-banner > .an-public-banner-track {
  overflow: hidden;
  min-height: 0;
}
.an-public-banner.an-collapsing {
  grid-template-rows: 0fr;
}
@media (prefers-reduced-motion: reduce) {
  .an-public-banner {
    transition: none;
  }
}

.an-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  background: rgb(0 0 0 / 0.55);
  animation: an-backdrop-in 160ms ease-out;
}
.an-popup-backdrop > .an-popup {
  animation: an-popup-in 200ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes an-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes an-popup-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .an-popup-backdrop,
  .an-popup-backdrop > .an-popup {
    animation: none;
  }
}

/* ============================================================
   SHARED SLOTS: meta zone, countdown, two-tone headline.
   ============================================================ */

.an-root {
  --an-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Two-tone headline ---------- */
.an-headline-accent {
  color: var(--an-hl-accent, var(--an-accent));
  font-weight: inherit;
}

/* ---------- Sub + fine print (standard voice) ---------- */
.an-sub {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--an-muted);
}
.an-fine {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.5;
  color: var(--an-muted);
  max-width: 22rem;
}

/* ---------- Meta cluster (countdown + fine print) ---------- */
.an-banner .an-meta {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
}
.an-banner .an-meta .an-fine {
  text-align: right;
  max-width: 13rem;
}
.an-popup .an-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  text-align: center;
}

/* ---------- Countdown ---------- */
.an-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.an-cd-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-cd-segs {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.an-cd-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2rem;
}
.an-cd-seg b {
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--an-text);
}
.an-cd-lbl {
  font-family: var(--an-mono);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 0.25rem;
  color: var(--an-muted);
}
.an-cd-colon {
  font-family: var(--an-mono);
  font-size: 1rem;
  line-height: 1;
  opacity: 0.4;
  margin-top: 0.05rem;
}

/* ---------- Live dot ---------- */
.an-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--an-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--an-accent) 55%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .an-live-dot {
    animation: an-pulse 1.8s ease-out infinite;
  }
}
@keyframes an-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--an-accent) 55%, transparent);
  }
  70% {
    box-shadow: 0 0 0 9px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* ---------- Responsive collapse ---------- */
@media (max-width: 40rem) {
  .an-banner .an-meta .an-fine {
    display: none;
  }
  .an-banner .an-cd-seg b {
    font-size: 0.95rem;
  }
  .an-banner .an-cd-lbl {
    display: none;
  }
}
@media (max-width: 28rem) {
  /* Promo codes are load-bearing content: keep the chip on mobile banners.
     The countdown is the space hog at this width (fine print already dies
     at 40rem above), so only it collapses here; .an-meta itself stays so
     .an-code can still lay out and be visible. */
  .an-banner .an-meta .an-cd {
    display: none;
  }
}

/* ============================================================
   THEME SHELF (v3)
   ------------------------------------------------------------
   One block per registry theme (packages/core/announcements/
   themes/registry.tsx), scoped by the theme class the view model
   builds (an-theme-<id>). Restyles the shared base slots above;
   themes that need slot markup beyond the shared stack point at a
   ThemeDef.inner fragment under themes/.
   ============================================================ */

/* ---------- heritage-seal ----------
   A port of the hand-built promo-250 look (the owner's quality bar): a struck
   seal emblem, a mono letterspaced kicker, a two-tone headline, a starred
   rule, segmented countdown boxes, and a stamped promo voucher, all on a
   dot-textured field. Custom slot DOM lives in themes/heritage-seal-inner.tsx.
   EVERY color derives from the four --an-* vars via color-mix -- no baked flag
   colors -- so the same structure re-skins across the americana / spooky /
   midnight variants automatically. */
.an-theme-heritage-seal {
  /* Palette-derived tones (never hardcoded). */
  --an-hs-dim: color-mix(in srgb, var(--an-text) 66%, transparent);
  --an-hs-line: color-mix(in srgb, var(--an-text) 22%, transparent);
  --an-hs-panel: color-mix(in srgb, var(--an-text) 9%, transparent);
  --an-hs-panel-line: color-mix(in srgb, var(--an-text) 20%, transparent);
  /* A lightened accent, readable on the dark field (raw accent-on-bg is muddy
     for text, exactly why the promo uses a pale tint for the two-tone word). */
  --an-hs-lift: color-mix(in srgb, var(--an-accent) 58%, var(--an-text));
  --an-hs-glow: color-mix(in srgb, var(--an-accent) 42%, transparent);
  /* Textured depth: a corner sheen + a fine dot grid, both whisper-faint so
     they never fight the copy above them. */
  background-image:
    radial-gradient(
    ellipse at 100% -25%,
    color-mix(in srgb, var(--an-text) 12%, transparent),
    transparent 60%
  ),
    radial-gradient(
    circle,
    color-mix(in srgb, var(--an-text) 24%, transparent) 0.9px,
    transparent 1.3px
  );
  background-size: 100% 100%, 22px 22px;
}

/* Seal emblem: beaded roundel + accent ring + light star. Decorative. */
.an-hs-seal {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  display: inline-flex;
  line-height: 0;
}
.an-hs-seal-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 2.85rem;
  height: 2.85rem;
}
.an-hs-seal-disc {
  fill: color-mix(in srgb, var(--an-accent) 22%, transparent);
}
.an-hs-seal-beads {
  fill: none;
  stroke: color-mix(in srgb, var(--an-text) 55%, transparent);
  stroke-width: 2.1;
  stroke-dasharray: 0.5 4.6;
  stroke-linecap: round;
}
.an-hs-seal-ring {
  fill: none;
  stroke: var(--an-hs-lift);
  stroke-width: 2;
}
.an-hs-seal-star {
  fill: var(--an-hs-lift);
}

/* Kicker: mono, letterspaced, quiet -- not the base accent pill. */
.an-theme-heritage-seal .an-eyebrow {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: var(--an-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--an-hs-dim);
}

/* Headline: heavy uppercase; the emphasized word rides the lifted accent. */
.an-theme-heritage-seal .an-headline {
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.02;
}
.an-theme-heritage-seal .an-headline-accent {
  color: var(--an-hs-lift);
}

.an-theme-heritage-seal .an-sub {
  color: var(--an-hs-dim);
}

/* Starred rule divider (popup only). */
.an-hs-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: min(15rem, 78%);
  margin: 0.15rem auto 0.1rem;
}
.an-hs-rule-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--an-hs-line));
}
.an-hs-rule-line:last-child {
  background: linear-gradient(90deg, var(--an-hs-line), transparent);
}
.an-hs-rule-star {
  color: var(--an-hs-lift);
  font-size: 0.85rem;
  line-height: 1;
}

/* Countdown: segmented boxes, tabular mono digits (the promo signature). */
.an-theme-heritage-seal .an-cd {
  gap: 0.42rem;
}
.an-theme-heritage-seal .an-cd-label {
  font-family: var(--an-mono);
  letter-spacing: 0.2em;
  color: var(--an-hs-dim);
}
.an-theme-heritage-seal .an-cd-segs {
  gap: 0.32rem;
}
.an-theme-heritage-seal .an-cd-seg {
  min-width: 2.2rem;
  padding: 0.26rem 0.32rem 0.2rem;
  background: var(--an-hs-panel);
  border: 1px solid var(--an-hs-panel-line);
  border-radius: var(--radius-field, 0);
}
.an-theme-heritage-seal .an-cd-seg b {
  font-size: 1.05rem;
  color: var(--an-text);
}
.an-theme-heritage-seal .an-cd-lbl {
  color: var(--an-hs-dim);
}
.an-theme-heritage-seal .an-cd-colon {
  align-self: center;
  margin-top: 0;
  color: var(--an-hs-dim);
  opacity: 0.7;
}

/* Promo code: a dashed voucher stub. */
.an-theme-heritage-seal .an-code {
  gap: 0.5em;
  padding: 0.32rem 0.6rem;
  background: color-mix(in srgb, var(--an-accent) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--an-accent) 62%, var(--an-text));
  border-radius: var(--radius-field, 0);
}
.an-theme-heritage-seal .an-code-label {
  font-family: var(--an-mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 1;
  color: var(--an-hs-dim);
}
.an-theme-heritage-seal .an-code-value {
  border: 0;
  padding: 0;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--an-text);
}

.an-theme-heritage-seal .an-fine {
  font-family: var(--an-mono);
  font-size: 0.56rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--an-hs-dim);
}

/* CTA: heavy uppercase button (base already fills it with the accent). */
.an-theme-heritage-seal .an-cta {
  font-family: var(--font-heading, var(--font-body, sans-serif));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* -- Banner layout: seal + copy left, countdown/voucher + CTA trailing. -- */
.an-banner.an-theme-heritage-seal .an-inner {
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1.2rem);
  flex-wrap: wrap;
  row-gap: 0.55rem;
}
.an-banner.an-theme-heritage-seal .an-copy {
  flex: 1 1 13rem;
  min-width: 0;
}
.an-banner.an-theme-heritage-seal .an-headline {
  font-size: clamp(1.15rem, 2.5vw, 1.65rem);
}
/* On the desktop banner the dates live in the countdown label, so the sub is
   redundant -- hide it (it returns on the mobile strip below). */
.an-banner.an-theme-heritage-seal .an-sub {
  display: none;
}
.an-banner.an-theme-heritage-seal .an-meta {
  gap: 0.9rem;
}
/* With no meta cluster, the CTA still rides the trailing edge. */
.an-banner.an-theme-heritage-seal:not(:has(.an-meta)) .an-cta {
  margin-inline-start: auto;
}

/* -- Popup layout: centered poster, big glowing seal on top. -- */
.an-popup.an-theme-heritage-seal .an-inner {
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding-top: clamp(1.7rem, 4vw, 2.1rem);
}
.an-popup.an-theme-heritage-seal .an-hs-seal::before {
  content: "";
  position: absolute;
  inset: -70% -70% -45%;
  z-index: 0;
  background: radial-gradient(
    ellipse at 50% 42%,
    var(--an-hs-glow),
    transparent 68%
  );
  pointer-events: none;
}
.an-popup.an-theme-heritage-seal .an-hs-seal-svg {
  width: 5.25rem;
  height: 5.25rem;
}
.an-popup.an-theme-heritage-seal .an-copy {
  align-items: center;
  text-align: center;
  gap: 0.42rem;
}
.an-popup.an-theme-heritage-seal .an-eyebrow {
  align-self: center;
}
.an-popup.an-theme-heritage-seal .an-headline {
  font-size: clamp(1.5rem, 5vw, 2rem);
}
.an-popup.an-theme-heritage-seal .an-sub {
  font-size: 0.82rem;
}
.an-popup.an-theme-heritage-seal .an-meta {
  gap: 0.7rem;
  margin-top: 0.5rem;
}
.an-popup.an-theme-heritage-seal .an-cta {
  align-self: stretch;
  margin-top: 0.35rem;
  padding: 0.82em 1.2em;
  font-size: 0.95rem;
}

/* -- Compact (gallery-card preview): shrink the seal so the headline leads. */
.an-compact.an-theme-heritage-seal .an-hs-seal-svg {
  width: 2rem;
  height: 2rem;
}

/* -- Mobile strip (<=40rem): the sub returns as a mono one-liner, and the
   voucher + CTA pack onto one trailing row instead of stacking (the fine
   print and countdown already drop out at this width, base rules). -- */
@media (max-width: 40rem) {
  .an-banner.an-theme-heritage-seal .an-sub {
    display: block;
    font-family: var(--an-mono);
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--an-hs-dim);
  }
  .an-banner.an-theme-heritage-seal .an-meta {
    margin-inline-start: 0;
  }
}

/* ---------- punch-ticket ----------
   Thermal-paper counter ticket: scanline texture, a double-rule edge, and
   a die-cut tear-off stub (mask-image notches) holding the promo code +
   CTA. Banner cuts the notches on the trailing edge; popup drops the stub
   to a bottom strip. Custom slot DOM lives in themes/punch-ticket-inner.tsx. */
.an-theme-punch-ticket {
  --stub-w: 240px;
}
.an-theme-punch-ticket::before {
  /* thermal-paper scanlines */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    var(--an-soft) 0 1px,
    transparent 1px 6px
  );
  opacity: 0.45;
}
.an-theme-punch-ticket::after {
  /* ticket edge rules */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-top: 3px double var(--an-hair);
  border-bottom: 3px double var(--an-hair);
}
.an-theme-punch-ticket .an-eyebrow {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: var(--an-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--an-accent);
}
.an-theme-punch-ticket.v-spooky .an-eyebrow {
  color: var(--an-head-tone);
}
.an-theme-punch-ticket .an-headline {
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: 0.01em;
}
.an-theme-punch-ticket .an-headline-accent {
  color: var(--an-accent);
}
.an-theme-punch-ticket.v-spooky .an-headline-accent {
  color: var(--an-head-tone);
}
.an-theme-punch-ticket .an-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.an-theme-punch-ticket .an-sub {
  font-size: 12px;
  color: var(--an-muted);
}
.an-theme-punch-ticket .an-fine {
  font-family: var(--an-mono);
  font-size: 8.5px;
  line-height: 1.5;
  color: var(--an-muted);
  max-width: 170px;
  text-align: right;
}
.an-theme-punch-ticket .an-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 20px;
}
.an-theme-punch-ticket .an-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.an-theme-punch-ticket .an-cd-label {
  font-family: var(--an-mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-punch-ticket .an-cd-segs {
  gap: 5px;
}
.an-theme-punch-ticket .an-cd-seg {
  min-width: 26px;
}
.an-theme-punch-ticket .an-cd-seg b {
  font-family: var(--an-mono);
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
}
.an-theme-punch-ticket .an-cd-lbl {
  font-family: var(--an-mono);
  font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 3px;
  color: var(--an-muted);
}
.an-theme-punch-ticket .an-cd-colon {
  font-family: var(--an-mono);
  opacity: 0.4;
  font-size: 15px;
  line-height: 1.2;
}
.an-theme-punch-ticket .an-stub {
  position: relative;
  flex: 0 0 var(--stub-w);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--an-accent) 7%, transparent);
}
.an-theme-punch-ticket .an-stub::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  border-left: 2px dashed color-mix(in srgb, var(--an-text) 38%, transparent);
}
.an-theme-punch-ticket .an-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  border: 1.5px dashed var(--an-accent);
  border-radius: var(--radius-field, 0);
  background: color-mix(in srgb, var(--an-accent) 9%, transparent);
}
.an-theme-punch-ticket .an-code-label {
  font-family: var(--an-mono);
  font-size: 7.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-punch-ticket .an-code-value {
  border: 0;
  padding: 0;
  font-family: var(--an-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--an-accent);
}
.an-theme-punch-ticket.v-spooky .an-code-value {
  color: var(--an-head-tone);
}
.an-theme-punch-ticket .an-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  padding: 8px 16px;
  background: var(--an-accent);
  color: var(--an-accent-text);
  border-radius: var(--radius-field, 0);
}
/* Banner: die-cut notches at the perforation. */
.an-theme-punch-ticket.an-banner {
  mask-image:
    radial-gradient(
    circle 9px at calc(100% - var(--stub-w)) 0,
    transparent 8.5px,
    #000 9.5px
  ),
    radial-gradient(
    circle 9px at calc(100% - var(--stub-w)) 100%,
    transparent 8.5px,
    #000 9.5px
  );
  mask-composite: intersect;
}
.an-theme-punch-ticket.an-banner .an-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 98px;
  padding: 12px 0 12px 24px;
}
/* Popup: the stub becomes the bottom strip. */
.an-theme-punch-ticket.an-popup {
  --stub-h: 150px;
  display: flex;
  flex-direction: column;
  mask-image:
    radial-gradient(
    circle 9px at 0 calc(100% - var(--stub-h)),
    transparent 8.5px,
    #000 9.5px
  ),
    radial-gradient(
    circle 9px at 100% calc(100% - var(--stub-h)),
    transparent 8.5px,
    #000 9.5px
  );
  mask-composite: intersect;
}
.an-theme-punch-ticket.an-popup .an-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 32px 28px 24px;
}
.an-theme-punch-ticket.an-popup .an-headline {
  font-size: 30px;
}
.an-theme-punch-ticket.an-popup .an-sub {
  font-size: 13px;
}
.an-theme-punch-ticket.an-popup .an-body {
  font-size: 13px;
  color: var(--an-muted);
  max-width: 36ch;
}
.an-theme-punch-ticket.an-popup .an-meta {
  margin: 4px 0 0;
  padding: 0;
}
.an-theme-punch-ticket.an-popup .an-fine {
  max-width: none;
  text-align: center;
}
.an-theme-punch-ticket.an-popup .an-stub {
  flex: 0 0 var(--stub-h);
  width: 100%;
  gap: 10px;
  padding: 16px 24px;
}
.an-theme-punch-ticket.an-popup .an-stub::before {
  left: 12px;
  right: 12px;
  top: -1px;
  bottom: auto;
  border-left: 0;
  border-top: 2px dashed color-mix(in srgb, var(--an-text) 38%, transparent);
}
.an-theme-punch-ticket.an-popup .an-cta {
  align-self: stretch;
  padding: 11px;
}
/* -- Compact (gallery-card preview): shrink the stub so the headline leads. */
.an-compact.an-theme-punch-ticket .an-stub {
  flex-basis: 120px;
  padding: 8px 10px;
  gap: 5px;
}
.an-compact.an-theme-punch-ticket .an-code {
  padding: 3px 8px;
}
.an-compact.an-theme-punch-ticket .an-code-value {
  font-size: 11px;
}
@media (max-width: 640px) {
  .an-theme-punch-ticket {
    --stub-w: 132px;
  }
  .an-theme-punch-ticket.an-banner .an-inner {
    gap: 10px;
    padding-left: 14px;
    min-height: 80px;
  }
  .an-theme-punch-ticket.an-banner .an-sub,
  .an-theme-punch-ticket.an-banner .an-fine,
  .an-theme-punch-ticket.an-banner .an-cd {
    display: none;
  }
  .an-theme-punch-ticket.an-banner .an-headline {
    font-size: 16px;
  }
  .an-theme-punch-ticket.an-banner .an-meta {
    padding-right: 6px;
  }
  .an-theme-punch-ticket.an-banner .an-stub {
    padding: 8px;
    gap: 6px;
  }
  .an-theme-punch-ticket.an-banner .an-cta {
    font-size: 10px;
    padding: 6px 10px;
  }
  .an-theme-punch-ticket.an-banner .an-code {
    padding: 4px 9px;
  }
  .an-theme-punch-ticket.an-banner .an-code-value {
    font-size: 11px;
  }
}

/* ---------- county-seal ----------
   Fairground poster authority: a dot-grid field, a corner sheen, a struck
   CSS seal emblem (star + year), and mono microtype. Occasion art masks a
   motif silhouette behind the copy. Custom slot DOM lives in
   themes/county-seal-inner.tsx. */
.an-theme-county-seal::before {
  /* dot grid */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--an-text) 55%, transparent) 1px,
    transparent 1.35px
  );
  background-size: 22px 22px;
  opacity: 0.15;
}
.an-theme-county-seal::after {
  /* corner sheen */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 100% 0,
    color-mix(in srgb, var(--an-text) 12%, transparent),
    transparent 58%
  );
}
.an-theme-county-seal .an-art {
  position: absolute;
  z-index: 0;
  background-color: color-mix(in srgb, var(--an-text) 30%, transparent);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}
.an-theme-county-seal.an-banner .an-art {
  top: -4px;
  right: 250px;
  width: 260px;
  height: 115px;
}
.an-theme-county-seal.an-popup .an-art {
  top: -8px;
  right: -14px;
  width: 240px;
  height: 150px;
}
.an-theme-county-seal.v-heritage .an-art {
  mask-image: url("/an-motifs/fireworks.svg?v=ce27a222");
}
.an-theme-county-seal.v-spooky .an-art {
  mask-image: url("/an-motifs/cobweb.svg?v=45e1cc43");
  transform: scaleX(-1);
}
.an-theme-county-seal.v-evergreen .an-art {
  mask-image: url("/an-motifs/holly.svg?v=69f1aaca");
}
.an-theme-county-seal .an-emblem {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid var(--an-head-tone);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.an-theme-county-seal .an-emblem::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--an-text) 42%, transparent);
}
.an-theme-county-seal .an-emblem-star {
  font-size: 17px;
  line-height: 1;
  color: var(--an-head-tone);
}
.an-theme-county-seal .an-emblem-txt {
  font-family: var(--an-mono);
  font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-county-seal .an-eyebrow {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: var(--an-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--an-accent) 24%, var(--an-text));
}
.an-theme-county-seal .an-headline {
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 23px;
  line-height: 1.04;
  letter-spacing: 0.01em;
}
.an-theme-county-seal .an-headline-accent {
  color: var(--an-head-tone);
}
.an-theme-county-seal .an-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.an-theme-county-seal .an-sub {
  font-family: var(--an-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-county-seal .an-fine {
  font-family: var(--an-mono);
  font-size: 8px;
  line-height: 1.6;
  color: var(--an-muted);
}
.an-theme-county-seal .an-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.an-theme-county-seal .an-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.an-theme-county-seal .an-cd-label {
  font-family: var(--an-mono);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-county-seal .an-cd-segs {
  gap: 6px;
}
.an-theme-county-seal .an-cd-seg {
  min-width: 30px;
}
.an-theme-county-seal .an-cd-seg b {
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
.an-theme-county-seal .an-cd-lbl {
  font-family: var(--an-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 3px;
  color: var(--an-muted);
}
.an-theme-county-seal .an-cd-colon {
  font-family: var(--an-mono);
  font-size: 16px;
  line-height: 1.1;
  opacity: 0.4;
}
.an-theme-county-seal .an-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 13px;
  border: 1px solid color-mix(in srgb, var(--an-text) 34%, transparent);
  outline: 1px solid color-mix(in srgb, var(--an-text) 34%, transparent);
  outline-offset: 2px;
  border-radius: var(--radius-field, 0);
}
.an-theme-county-seal .an-code-label {
  font-family: var(--an-mono);
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-county-seal .an-code-value {
  border: 0;
  padding: 0;
  font-family: var(--an-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
}
.an-theme-county-seal .an-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  padding: 9px 16px;
  background: var(--an-accent);
  color: var(--an-accent-text);
  border-radius: var(--radius-field, 0);
}
.an-theme-county-seal.an-banner .an-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 104px;
  padding: 16px 24px;
}
/* Popup: crowned poster. */
.an-theme-county-seal.an-popup .an-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 30px 30px 24px;
}
.an-theme-county-seal.an-popup .an-emblem {
  width: 84px;
  height: 84px;
}
.an-theme-county-seal.an-popup .an-emblem-star {
  font-size: 24px;
}
.an-theme-county-seal.an-popup .an-headline {
  font-size: 27px;
}
.an-theme-county-seal.an-popup .an-rulex {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 240px;
}
.an-theme-county-seal.an-popup .an-rulex i {
  height: 1px;
  flex: 1;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--an-text) 50%, transparent)
  );
}
.an-theme-county-seal.an-popup .an-rulex i:last-child {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--an-text) 50%, transparent),
    transparent
  );
}
.an-theme-county-seal.an-popup .an-rulex b {
  color: var(--an-head-tone);
  font-size: 11px;
  line-height: 1;
}
.an-theme-county-seal.an-popup .an-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 38ch;
}
.an-theme-county-seal.an-popup .an-meta {
  margin: 4px 0 0;
  flex-direction: column;
  gap: 12px;
}
.an-theme-county-seal.an-popup .an-cta {
  align-self: stretch;
  padding: 12px;
  font-size: 14px;
}
.an-theme-county-seal.an-popup .an-fine {
  max-width: 40ch;
}
/* -- Compact (gallery-card preview): shrink the emblem so the headline leads. */
.an-compact.an-theme-county-seal .an-emblem {
  width: 40px;
  height: 40px;
}
.an-compact.an-theme-county-seal .an-emblem-txt {
  display: none;
}
.an-compact.an-theme-county-seal .an-emblem-star {
  font-size: 14px;
}
.an-compact.an-theme-county-seal .an-art {
  display: none;
}
@media (max-width: 640px) {
  .an-theme-county-seal.an-banner .an-inner {
    gap: 12px;
    padding: 10px 14px;
    min-height: 76px;
  }
  .an-theme-county-seal.an-banner .an-emblem {
    width: 44px;
    height: 44px;
  }
  .an-theme-county-seal.an-banner .an-emblem-txt {
    display: none;
  }
  .an-theme-county-seal.an-banner .an-emblem-star {
    font-size: 15px;
  }
  .an-theme-county-seal.an-banner .an-headline {
    font-size: 16px;
  }
  .an-theme-county-seal.an-banner .an-cd,
  .an-theme-county-seal.an-banner .an-fine,
  .an-theme-county-seal.an-banner .an-code,
  .an-theme-county-seal.an-banner .an-art {
    display: none;
  }
  .an-theme-county-seal.an-banner .an-cta {
    font-size: 10.5px;
    padding: 7px 11px;
  }
}

/* ---------- big-type ----------
   Type-led: the oversized two-tone headline IS the art. A vertical mono
   kicker rides a hairline spine on the leading edge; sub/code/CTA/fine
   stack in a trailing column. No motif, no photo -- just scale, contrast,
   and a mono kicker. Custom slot DOM lives in themes/big-type-inner.tsx.
   Promo code only -- this theme does not style the countdown addon. */
.an-theme-big-type .an-spine {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  border-right: 1px solid var(--an-hair);
  padding-right: 16px;
}
.an-theme-big-type .an-eyebrow {
  background: transparent;
  padding: 0;
  border-radius: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--an-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--an-muted);
  white-space: nowrap;
  max-height: 118px;
  overflow: hidden;
}
.an-theme-big-type .an-headline {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(22px, 4.6cqw, 46px);
  line-height: 0.93;
  letter-spacing: -0.005em;
}
.an-theme-big-type .an-headline-accent {
  color: var(--an-accent);
}
.an-theme-big-type .an-end {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  text-align: right;
}
.an-theme-big-type .an-sub {
  font-size: 12px;
  color: var(--an-muted);
}
.an-theme-big-type .an-fine {
  font-family: var(--an-mono);
  font-size: 8px;
  line-height: 1.5;
  color: var(--an-muted);
  max-width: 230px;
}
.an-theme-big-type .an-code {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--an-mono);
}
.an-theme-big-type .an-code-label {
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-big-type .an-code-value {
  border: 0;
  border-radius: 0;
  padding: 0 0 1px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  border-bottom: 2px solid var(--an-accent);
}
.an-theme-big-type .an-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 15px;
  color: var(--an-text);
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--an-accent);
  border-radius: 0;
  padding: 0 0 2px;
}
.an-theme-big-type .an-cta::after {
  content: "\2192";
}
.an-theme-big-type.an-banner .an-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 106px;
  padding: 14px 28px 14px 24px;
}
/* Popup. */
.an-theme-big-type.an-popup .an-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px 30px 26px;
}
.an-theme-big-type.an-popup .an-spine {
  border-right: 0;
  padding: 0;
}
.an-theme-big-type.an-popup .an-eyebrow {
  writing-mode: horizontal-tb;
  transform: none;
}
.an-theme-big-type.an-popup .an-headline {
  font-size: 44px;
  line-height: 0.96;
}
.an-theme-big-type.an-popup .an-sub {
  font-size: 14px;
}
.an-theme-big-type.an-popup .an-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--an-muted);
}
.an-theme-big-type.an-popup .an-end {
  margin: 6px 0 0;
  align-items: flex-start;
  text-align: left;
  gap: 12px;
  border-top: 1px solid var(--an-hair);
  padding-top: 16px;
  align-self: stretch;
}
.an-theme-big-type.an-popup .an-cta {
  font-size: 17px;
}
/* -- Compact (gallery-card preview): drop the spine so the headline leads. */
.an-compact.an-theme-big-type .an-spine {
  display: none;
}
@media (max-width: 640px) {
  .an-theme-big-type.an-banner .an-inner {
    gap: 12px;
    padding: 10px 14px;
    min-height: 76px;
  }
  .an-theme-big-type.an-banner .an-spine {
    padding-right: 10px;
  }
  .an-theme-big-type.an-banner .an-headline {
    font-size: 19px;
    white-space: normal;
  }
  .an-theme-big-type.an-banner .an-sub,
  .an-theme-big-type.an-banner .an-fine {
    display: none;
  }
  .an-theme-big-type.an-banner .an-cta {
    font-size: 12px;
    border-bottom-width: 2px;
  }
  .an-theme-big-type.an-banner .an-code-value {
    font-size: 11px;
  }
}

/* ---------- emblem-split ----------
   A hard diagonal splits a giant accent-filled silhouette column from calm
   copy. The column becomes a top header band on the popup. Custom slot DOM
   lives in themes/emblem-split-inner.tsx. */
.an-theme-emblem-split .an-emblem-col {
  position: relative;
  align-self: stretch;
  flex: 0 0 212px;
  overflow: hidden;
  background: var(--an-accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 38px) 100%, 0 100%);
}
.an-theme-emblem-split .an-emblem-col::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--an-accent-text) 30%, transparent) 0 7px,
    transparent 7px 20px
  );
}
.an-theme-emblem-split.v-spooky .an-emblem-col::before,
.an-theme-emblem-split.v-frost .an-emblem-col::before {
  inset: -22% -8%;
  background: color-mix(in srgb, var(--an-accent-text) 58%, transparent);
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: center;
}
.an-theme-emblem-split.v-spooky .an-emblem-col::before {
  mask-image: url("/an-motifs/bats.svg?v=b6479e9f");
}
.an-theme-emblem-split.v-frost .an-emblem-col::before {
  mask-image: url("/an-motifs/snowflakes.svg?v=a613b438");
}
.an-theme-emblem-split .an-eyebrow {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: var(--an-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--an-accent) 55%, var(--an-text));
}
.an-theme-emblem-split .an-headline {
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.02;
}
.an-theme-emblem-split .an-headline-accent {
  color: var(--an-head-tone);
}
.an-theme-emblem-split .an-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.an-theme-emblem-split .an-sub {
  font-size: 12px;
  color: var(--an-muted);
}
.an-theme-emblem-split .an-fine {
  font-family: var(--an-mono);
  font-size: 8px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 170px;
  text-align: right;
}
.an-theme-emblem-split .an-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.an-theme-emblem-split .an-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.an-theme-emblem-split .an-cd-label {
  font-family: var(--an-mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-emblem-split .an-cd-segs {
  gap: 6px;
}
.an-theme-emblem-split .an-cd-seg {
  min-width: 28px;
}
.an-theme-emblem-split .an-cd-seg b {
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
.an-theme-emblem-split .an-cd-lbl {
  font-family: var(--an-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 3px;
  color: var(--an-muted);
}
.an-theme-emblem-split .an-cd-colon {
  font-family: var(--an-mono);
  font-size: 16px;
  opacity: 0.4;
}
.an-theme-emblem-split .an-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 13px;
  border: 1px solid var(--an-accent);
  background: color-mix(in srgb, var(--an-accent) 14%, transparent);
  border-radius: var(--radius-field, 0);
}
.an-theme-emblem-split .an-code-label {
  font-family: var(--an-mono);
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-emblem-split .an-code-value {
  border: 0;
  padding: 0;
  font-family: var(--an-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--an-head-tone);
}
.an-theme-emblem-split .an-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  padding: 9px 16px;
  background: var(--an-accent);
  color: var(--an-accent-text);
  border-radius: var(--radius-field, 0);
}
.an-theme-emblem-split.an-banner .an-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 108px;
  padding: 0 24px 0 0;
}
/* The copy column needs a floor: next to the fixed 212px emblem column and
   a countdown+code .an-meta cluster (whose nowrap children barely shrink),
   a long headline's near-zero overflow-wrap: anywhere min-content width
   otherwise lets the flex-shrink algorithm collapse .an-copy down to a
   single character's width instead of wrapping normally. This guarantees
   the headline stays legible even with longer-than-typical admin copy;
   .an-root's overflow: hidden clips the rare case where meta + CTA still
   don't fit at that point. */
.an-theme-emblem-split.an-banner .an-copy {
  flex: 1 1 auto;
  min-width: 11rem;
}
/* Fine print in the banner meta cluster: the base stack ships .an-meta and
   .an-cta as flex: 0 0 auto (never shrink -- a countdown/code/button squish
   is worse than fine print wrapping), and the base .an-banner .an-meta
   .an-fine rule (max-width: 13rem, 3 classes) outranks this theme's own
   170px .an-fine rule by specificity, so the effective cap is 208px. With
   the fixed 212px emblem column and the 11rem .an-copy floor above already
   spoken for, 208px is more than the row has left over next to a countdown
   + code chip -- letting flex-shrink resolve it dynamically (tried first)
   over-corrected and crushed fine print to a one-word-per-line sliver
   instead, the same pathology moved to a different element. A punch-ticket
   style static cap is the stable fix: pin fine print to a narrow but
   readable column (a handful of words per line) sized so cd + code + fine +
   gaps never exceeds what's left after the emblem column, copy's floor, and
   the CTA. This selector's 4 classes outrank the base rule above. */
.an-theme-emblem-split.an-banner .an-meta .an-fine {
  max-width: 64px;
}
/* Popup: the emblem column becomes the header band. */
.an-theme-emblem-split.an-popup {
  display: flex;
  flex-direction: column;
}
.an-theme-emblem-split.an-popup .an-emblem-col {
  flex: 0 0 112px;
  align-self: stretch;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%);
}
.an-theme-emblem-split.an-popup .an-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 20px 28px 24px;
}
.an-theme-emblem-split.an-popup .an-headline {
  font-size: 29px;
}
.an-theme-emblem-split.an-popup .an-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--an-muted);
}
.an-theme-emblem-split.an-popup .an-meta {
  margin: 6px 0 0;
  flex-wrap: wrap;
  gap: 14px;
}
.an-theme-emblem-split.an-popup .an-fine {
  text-align: left;
  max-width: none;
}
.an-theme-emblem-split.an-popup .an-cta {
  align-self: stretch;
  padding: 12px;
  font-size: 14px;
  margin-top: 4px;
}
/* -- Compact (gallery-card preview): shrink the emblem column. */
.an-compact.an-theme-emblem-split .an-emblem-col {
  flex-basis: 56px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
@media (max-width: 640px) {
  .an-theme-emblem-split .an-emblem-col {
    flex-basis: 64px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  }
  .an-theme-emblem-split.an-banner .an-inner {
    gap: 12px;
    min-height: 80px;
    padding-right: 14px;
  }
  .an-theme-emblem-split.an-banner .an-headline {
    font-size: 16px;
  }
  .an-theme-emblem-split.an-banner .an-sub,
  .an-theme-emblem-split.an-banner .an-fine,
  .an-theme-emblem-split.an-banner .an-cd {
    display: none;
  }
  .an-theme-emblem-split.an-banner .an-code {
    padding: 4px 9px;
  }
  .an-theme-emblem-split.an-banner .an-code-value {
    font-size: 11px;
  }
  .an-theme-emblem-split.an-banner .an-cta {
    font-size: 10.5px;
    padding: 7px 11px;
  }
}

/* ---------- marquee ----------
   Theater-lights bulb frame: a chasing radial-gradient bulb pattern (the
   root's own ::before) plus a second offset layer (.an-bulbs, an inline
   sibling rendered by themes/marquee-inner.tsx) that alternates opacity
   with it for the classic marquee chase. Pure CSS, wrapped in prefers-
   reduced-motion. */
.an-theme-marquee {
  padding: 13px;
}
.an-theme-marquee::before,
.an-theme-marquee .an-bulbs {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--an-accent) 2.2px, transparent
    2.9px),
    radial-gradient(circle, var(--an-accent) 2.2px, transparent 2.9px),
    radial-gradient(circle, var(--an-accent) 2.2px, transparent 2.9px),
    radial-gradient(circle, var(--an-accent) 2.2px, transparent 2.9px);
  background-size: 26px 13px, 26px 13px, 13px 26px, 13px 26px;
  background-position: 0 0, 13px 100%, 0 0, 100% 13px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}
.an-theme-marquee .an-bulbs {
  opacity: 0.3;
  background-position: 13px 0, 0 100%, 0 13px, 100% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .an-theme-marquee::before {
    animation: an-marquee-a 1.1s steps(1) infinite;
  }
  .an-theme-marquee .an-bulbs {
    animation: an-marquee-b 1.1s steps(1) infinite;
  }
}
@keyframes an-marquee-a {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes an-marquee-b {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
.an-theme-marquee .an-inner {
  border: 1px solid var(--an-hair);
  background: color-mix(in srgb, var(--an-text) 4%, transparent);
}
.an-theme-marquee .an-eyebrow {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: var(--an-mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--an-head-tone);
}
.an-theme-marquee .an-headline {
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: 0.015em;
}
.an-theme-marquee .an-headline-accent {
  color: var(--an-accent);
}
.an-theme-marquee .an-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.an-theme-marquee .an-sub {
  font-size: 12px;
  color: var(--an-muted);
}
.an-theme-marquee .an-fine {
  font-family: var(--an-mono);
  font-size: 8px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 180px;
  text-align: right;
}
.an-theme-marquee .an-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.an-theme-marquee .an-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.an-theme-marquee .an-cd-label {
  font-family: var(--an-mono);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-marquee .an-cd-segs {
  gap: 4px;
}
.an-theme-marquee .an-cd-seg {
  min-width: 30px;
  background: color-mix(in srgb, var(--an-text) 7%, transparent);
  border: 1px solid var(--an-hair);
  padding: 4px 4px 3px;
  border-radius: var(--radius-field, 0);
}
.an-theme-marquee .an-cd-seg b {
  font-family: var(--an-mono);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
}
.an-theme-marquee .an-cd-lbl {
  font-family: var(--an-mono);
  font-size: 6.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2px;
  color: var(--an-muted);
}
.an-theme-marquee .an-cd-colon {
  display: none;
}
.an-theme-marquee .an-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 13px;
  border: 1.5px dashed var(--an-accent);
  border-radius: var(--radius-field, 0);
}
.an-theme-marquee .an-code-label {
  font-family: var(--an-mono);
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-marquee .an-code-value {
  font-family: var(--an-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--an-accent);
}
.an-theme-marquee .an-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  padding: 9px 16px;
  background: var(--an-accent);
  color: var(--an-accent-text);
  border-radius: var(--radius-field, 0);
}
.an-theme-marquee.an-banner .an-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 82px;
  padding: 10px 20px;
}
/* popup */
.an-theme-marquee.an-popup .an-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 26px 26px 22px;
}
.an-theme-marquee.an-popup .an-headline {
  font-size: 30px;
}
.an-theme-marquee.an-popup .an-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 36ch;
}
.an-theme-marquee.an-popup .an-meta {
  margin: 4px 0 0;
  flex-direction: column;
  gap: 12px;
}
.an-theme-marquee.an-popup .an-fine {
  text-align: center;
  max-width: 40ch;
}
.an-theme-marquee.an-popup .an-cta {
  align-self: stretch;
  padding: 12px;
  font-size: 14px;
}
@media (max-width: 640px) {
  .an-theme-marquee {
    padding: 10px;
  }
  .an-theme-marquee.an-banner .an-inner {
    gap: 12px;
    min-height: 66px;
    padding: 8px 12px;
  }
  .an-theme-marquee.an-banner .an-headline {
    font-size: 16px;
  }
  .an-theme-marquee.an-banner .an-sub,
  .an-theme-marquee.an-banner .an-fine,
  .an-theme-marquee.an-banner .an-cd,
  .an-theme-marquee.an-banner .an-code {
    display: none;
  }
  .an-theme-marquee.an-banner .an-cta {
    font-size: 10.5px;
    padding: 7px 11px;
  }
}

/* ---------- corner-sash ----------
   A stitched prize-ribbon sash rotates through the corner, carrying the
   eyebrow (.an-sash, an inline sibling rendered by themes/corner-sash-
   inner.tsx); an occasion motif mask (.an-art) sits behind the copy. */
.an-theme-corner-sash .an-sash {
  position: absolute;
  z-index: 3;
  top: 17px;
  left: -56px;
  width: 210px;
  transform: rotate(-32deg);
  background: var(--an-accent);
  padding: 5px 0;
  text-align: center;
  border-top: 1px dashed color-mix(in srgb, var(--an-accent-text) 45%,
    transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--an-accent-text) 45%,
    transparent);
}
.an-theme-corner-sash .an-sash .an-eyebrow {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: var(--an-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-accent-text);
  white-space: nowrap;
  overflow: hidden;
}
.an-theme-corner-sash .an-art {
  display: none;
  position: absolute;
  z-index: 0;
  right: -16px;
  bottom: -10px;
  width: 280px;
  height: 115%;
  background-color: color-mix(in srgb, var(--an-text) 22%, transparent);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: bottom right;
}
.an-theme-corner-sash.v-spooky .an-art,
.an-theme-corner-sash.v-harvest .an-art {
  display: block;
}
.an-theme-corner-sash.v-spooky .an-art {
  mask-image: url("/an-motifs/cobweb.svg?v=45e1cc43");
  transform: scaleX(-1) scaleY(-1);
}
.an-theme-corner-sash.v-harvest .an-art {
  mask-image: url("/an-motifs/leaves.svg?v=ce05bf2c");
}
.an-theme-corner-sash .an-headline {
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.02;
}
.an-theme-corner-sash .an-headline-accent {
  color: var(--an-accent);
}
.an-theme-corner-sash.v-spooky .an-headline-accent,
.an-theme-corner-sash.v-harvest .an-headline-accent {
  color: var(--an-head-tone);
}
.an-theme-corner-sash .an-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.an-theme-corner-sash .an-sub {
  font-size: 12px;
  color: var(--an-muted);
}
.an-theme-corner-sash .an-fine {
  font-family: var(--an-mono);
  font-size: 8px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 180px;
  text-align: right;
}
.an-theme-corner-sash .an-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.an-theme-corner-sash .an-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.an-theme-corner-sash .an-cd-label {
  font-family: var(--an-mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-corner-sash .an-cd-segs {
  gap: 6px;
}
.an-theme-corner-sash .an-cd-seg {
  min-width: 28px;
}
.an-theme-corner-sash .an-cd-seg b {
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
.an-theme-corner-sash .an-cd-lbl {
  font-family: var(--an-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 3px;
  color: var(--an-muted);
}
.an-theme-corner-sash .an-cd-colon {
  font-family: var(--an-mono);
  font-size: 16px;
  opacity: 0.4;
}
.an-theme-corner-sash .an-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 13px;
  border: 1.5px dashed var(--an-accent);
  border-radius: var(--radius-field, 0);
  background: color-mix(in srgb, var(--an-accent) 14%, transparent);
}
.an-theme-corner-sash .an-code-label {
  font-family: var(--an-mono);
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-corner-sash .an-code-value {
  font-family: var(--an-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
}
.an-theme-corner-sash .an-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  padding: 9px 16px;
  background: var(--an-accent);
  color: var(--an-accent-text);
  border-radius: var(--radius-field, 0);
}
.an-theme-corner-sash.an-banner .an-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 100px;
  padding: 14px 24px 14px 118px;
}
/* popup */
.an-theme-corner-sash.an-popup .an-sash {
  top: 28px;
  left: -62px;
  width: 240px;
  transform: rotate(-38deg);
  padding: 7px 0;
}
.an-theme-corner-sash.an-popup .an-sash .an-eyebrow {
  font-size: 10px;
}
.an-theme-corner-sash.an-popup .an-art {
  width: 300px;
  height: 200px;
}
.an-theme-corner-sash.an-popup .an-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 64px 30px 24px;
}
.an-theme-corner-sash.an-popup .an-headline {
  font-size: 28px;
}
.an-theme-corner-sash.an-popup .an-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 38ch;
}
.an-theme-corner-sash.an-popup .an-meta {
  margin: 4px 0 0;
  flex-direction: column;
  gap: 12px;
}
.an-theme-corner-sash.an-popup .an-fine {
  text-align: center;
  max-width: 40ch;
}
.an-theme-corner-sash.an-popup .an-cta {
  align-self: stretch;
  padding: 12px;
  font-size: 14px;
}
@media (max-width: 640px) {
  .an-theme-corner-sash .an-sash {
    top: 16px;
    left: -44px;
    width: 176px;
    padding: 4px 0;
    transform: rotate(-28deg);
  }
  .an-theme-corner-sash .an-sash .an-eyebrow {
    font-size: 8px;
  }
  .an-theme-corner-sash.an-banner .an-inner {
    gap: 12px;
    min-height: 78px;
    padding: 10px 14px 10px 96px;
  }
  .an-theme-corner-sash.an-banner .an-headline {
    font-size: 16px;
  }
  .an-theme-corner-sash.an-banner .an-sub,
  .an-theme-corner-sash.an-banner .an-fine,
  .an-theme-corner-sash.an-banner .an-cd,
  .an-theme-corner-sash.an-banner .an-code {
    display: none;
  }
  .an-theme-corner-sash.an-banner .an-cta {
    font-size: 10.5px;
    padding: 7px 11px;
  }
}

/* ---------- deadline-board ----------
   A letterboard whose countdown + promo code live in a bordered split-flap
   board (.an-board, rendered by themes/deadline-board-inner.tsx). When the
   board is empty (both addons off), the fallback fine-print-only cluster
   uses the shared .an-meta class instead (see the inner fragment). */
.an-theme-deadline-board::before {
  /* letterboard slats */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 46px,
    var(--an-soft) 46px 47px);
  opacity: 0.55;
}
.an-theme-deadline-board .an-eyebrow {
  display: inline-block;
  width: fit-content;
  font-family: var(--an-mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-accent-text);
  background: var(--an-accent);
  padding: 3px 8px;
  border-radius: var(--radius-field, 0);
}
.an-theme-deadline-board .an-headline {
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0.01em;
}
.an-theme-deadline-board .an-eyebrow {
  white-space: nowrap;
}
.an-theme-deadline-board .an-headline-accent {
  color: var(--an-accent);
}
.an-theme-deadline-board .an-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.an-theme-deadline-board .an-sub {
  font-size: 12px;
  color: var(--an-muted);
}
.an-theme-deadline-board .an-fine {
  font-family: var(--an-mono);
  font-size: 8px;
  line-height: 1.45;
  color: var(--an-muted);
  max-width: 320px;
}
.an-theme-deadline-board .an-meta {
  margin-left: auto;
}
.an-theme-deadline-board .an-board {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 11px 16px;
  border: 1px solid var(--an-hair);
  background: color-mix(in srgb, var(--an-text) 5%, transparent);
  border-radius: var(--radius-box, 0);
}
.an-theme-deadline-board .an-cd {
  display: flex;
  align-items: center;
  gap: 13px;
}
.an-theme-deadline-board .an-cd-label {
  font-family: var(--an-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--an-accent);
  max-width: 42px;
  line-height: 1.7;
}
.an-theme-deadline-board .an-cd-segs {
  gap: 7px;
}
.an-theme-deadline-board .an-cd-seg b {
  font-family: var(--an-mono);
  font-weight: 600;
  font-size: 25px;
  line-height: 1;
  padding: 8px 8px 7px;
  min-width: 44px;
  text-align: center;
  background: linear-gradient(
    180deg,
    transparent 46%,
    color-mix(in srgb, var(--an-bg) 65%, transparent) 46% 54%,
    transparent 54%
  ),
    color-mix(in srgb, var(--an-text) 9%, transparent);
  border: 1px solid var(--an-hair);
  border-radius: var(--radius-field, 0);
}
.an-theme-deadline-board .an-cd-lbl {
  font-family: var(--an-mono);
  font-size: 6.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 4px;
  color: var(--an-muted);
}
.an-theme-deadline-board .an-cd-colon {
  font-family: var(--an-mono);
  font-size: 18px;
  opacity: 0.35;
  align-self: flex-start;
  margin-top: 8px;
}
.an-theme-deadline-board .an-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-left: 1px dashed var(--an-hair);
  padding-left: 18px;
}
.an-theme-deadline-board .an-code-label {
  font-family: var(--an-mono);
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-deadline-board .an-code-value {
  font-family: var(--an-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--an-accent);
}
.an-theme-deadline-board .an-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  padding: 10px 16px;
  background: var(--an-accent);
  color: var(--an-accent-text);
  border-radius: var(--radius-field, 0);
}
.an-theme-deadline-board.an-banner .an-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 108px;
  padding: 12px 24px;
}
.an-theme-deadline-board.an-banner .an-cta {
  flex: 0 0 auto;
}
.an-theme-deadline-board.an-banner .an-inner > .an-cta {
  margin-left: 0;
}
.an-theme-deadline-board.an-banner .an-inner:not(:has(.an-board)) .an-cta {
  margin-left: auto;
}
/* When fine print AND a populated board both render (both addons on, plus
   fine print set), the fine-print .an-meta and the .an-board each carry
   their own margin-left: auto, so with no floor on .an-copy the headline's
   own wrapping was absorbing the entire squeeze -- a single-character-per-
   line collapse at 1024px. Give copy a floor (matches the emblem-split
   fix) and cap the adjacent fine print tightly; the board itself (cd tiles
   + code chip) is the widest, least compressible element, so it keeps its
   full size and the two other slots share what's left. */
.an-theme-deadline-board.an-banner .an-copy {
  flex: 1 1 auto;
  min-width: 11rem;
}
.an-theme-deadline-board.an-banner .an-meta .an-fine {
  max-width: 96px;
}
/* popup */
.an-theme-deadline-board.an-popup .an-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 30px 28px 24px;
}
.an-theme-deadline-board.an-popup .an-headline {
  font-size: 30px;
}
.an-theme-deadline-board.an-popup .an-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 36ch;
}
.an-theme-deadline-board.an-popup .an-board {
  margin: 6px 0 0;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px;
  align-self: stretch;
}
.an-theme-deadline-board.an-popup .an-cd {
  flex-direction: column;
  gap: 8px;
}
.an-theme-deadline-board.an-popup .an-cd-label {
  max-width: none;
  line-height: 1;
}
.an-theme-deadline-board.an-popup .an-code {
  border-left: 0;
  padding-left: 0;
  border-top: 1px dashed var(--an-hair);
  padding-top: 12px;
  align-self: stretch;
}
.an-theme-deadline-board.an-popup .an-cta {
  align-self: stretch;
  padding: 12px;
  font-size: 14px;
  margin-top: 4px;
}
.an-theme-deadline-board.an-popup .an-fine {
  max-width: 40ch;
}
@media (max-width: 640px) {
  .an-theme-deadline-board.an-banner .an-inner {
    flex-wrap: wrap;
    gap: 10px 14px;
    min-height: 0;
    padding: 12px 14px;
  }
  .an-theme-deadline-board.an-banner .an-headline {
    font-size: 17px;
  }
  .an-theme-deadline-board.an-banner .an-sub,
  .an-theme-deadline-board.an-banner .an-fine,
  .an-theme-deadline-board.an-banner .an-eyebrow {
    display: none;
  }
  .an-theme-deadline-board.an-banner .an-board {
    margin-left: 0;
    flex: 1 1 auto;
    padding: 8px 10px;
    gap: 10px;
    justify-content: center;
  }
  .an-theme-deadline-board.an-banner .an-cd-seg b {
    font-size: 16px;
    padding: 5px 4px;
    min-width: 30px;
  }
  .an-theme-deadline-board.an-banner .an-cd-label {
    font-size: 7.5px;
    max-width: 36px;
  }
  .an-theme-deadline-board.an-banner .an-code {
    padding-left: 10px;
  }
  .an-theme-deadline-board.an-banner .an-code-value {
    font-size: 11px;
  }
  .an-theme-deadline-board.an-banner .an-cta {
    flex: 1 1 auto;
    font-size: 11px;
    padding: 8px;
  }
}

/* ---------- freight-stencil ----------
   A shipping-crate manifest: hazard-stripe bookends, stencil type, sub +
   fine print grouped as a mono manifest block (.an-manifest, rendered by
   themes/freight-stencil-inner.tsx) separate from the countdown + code
   cluster. */
.an-theme-freight-stencil::before,
.an-theme-freight-stencil::after {
  /* hazard bookends */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 16px;
  pointer-events: none;
  background: repeating-linear-gradient(45deg, var(--an-accent) 0 9px,
    transparent 9px 19px);
  opacity: 0.9;
}
.an-theme-freight-stencil::before {
  left: 0;
  border-right: 1px solid var(--an-hair);
}
.an-theme-freight-stencil::after {
  right: 0;
  border-left: 1px solid var(--an-hair);
}
.an-theme-freight-stencil .an-eyebrow {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: var(--an-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-freight-stencil .an-headline {
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0.055em;
}
.an-theme-freight-stencil .an-headline-accent {
  color: var(--an-accent);
}
.an-theme-freight-stencil .an-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.an-theme-freight-stencil .an-manifest {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  border-left: 1px solid var(--an-hair);
  padding-left: 18px;
  align-self: stretch;
}
.an-theme-freight-stencil .an-sub {
  font-family: var(--an-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--an-text);
}
.an-theme-freight-stencil .an-fine {
  font-family: var(--an-mono);
  font-size: 8px;
  line-height: 1.6;
  color: var(--an-muted);
  max-width: 230px;
}
.an-theme-freight-stencil .an-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.an-theme-freight-stencil .an-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.an-theme-freight-stencil .an-cd-label {
  font-family: var(--an-mono);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-freight-stencil .an-cd-segs {
  gap: 6px;
}
.an-theme-freight-stencil .an-cd-seg {
  min-width: 28px;
}
.an-theme-freight-stencil .an-cd-seg b {
  font-family: var(--an-mono);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
}
.an-theme-freight-stencil .an-cd-lbl {
  font-family: var(--an-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 3px;
  color: var(--an-muted);
}
.an-theme-freight-stencil .an-cd-colon {
  font-family: var(--an-mono);
  font-size: 16px;
  opacity: 0.4;
}
.an-theme-freight-stencil .an-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 12px;
  border: 2px solid var(--an-accent);
  transform: rotate(-2deg);
}
.an-theme-freight-stencil .an-code-label {
  font-family: var(--an-mono);
  font-size: 7px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-freight-stencil .an-code-value {
  font-family: var(--an-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--an-accent);
}
.an-theme-freight-stencil .an-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 12px;
  padding: 10px 16px;
  background: var(--an-accent);
  color: var(--an-accent-text);
  border-radius: var(--radius-field, 0);
}
.an-theme-freight-stencil.an-banner .an-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 102px;
  padding: 14px 36px;
}
/* popup: hazard bands run horizontally */
.an-theme-freight-stencil.an-popup::before,
.an-theme-freight-stencil.an-popup::after {
  top: auto;
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  height: 14px;
}
.an-theme-freight-stencil.an-popup::before {
  top: 0;
  border-right: 0;
  border-bottom: 1px solid var(--an-hair);
}
.an-theme-freight-stencil.an-popup::after {
  bottom: 0;
  border-left: 0;
  border-top: 1px solid var(--an-hair);
}
.an-theme-freight-stencil.an-popup .an-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 34px 28px 32px;
}
.an-theme-freight-stencil.an-popup .an-headline {
  font-size: 29px;
}
.an-theme-freight-stencil.an-popup .an-manifest {
  border-left: 0;
  border-top: 1px solid var(--an-hair);
  padding: 10px 0 0;
  margin-top: 2px;
  align-self: stretch;
}
.an-theme-freight-stencil.an-popup .an-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--an-muted);
}
.an-theme-freight-stencil.an-popup .an-meta {
  margin: 6px 0 0;
  gap: 16px;
  flex-wrap: wrap;
}
.an-theme-freight-stencil.an-popup .an-cta {
  align-self: stretch;
  padding: 12px;
  font-size: 14px;
  margin-top: 4px;
}
@media (max-width: 640px) {
  .an-theme-freight-stencil.an-banner .an-inner {
    gap: 12px;
    min-height: 80px;
    padding: 10px 26px;
  }
  .an-theme-freight-stencil.an-banner .an-headline {
    font-size: 16px;
    letter-spacing: 0.04em;
  }
  .an-theme-freight-stencil.an-banner .an-manifest,
  .an-theme-freight-stencil.an-banner .an-cd {
    display: none;
  }
  .an-theme-freight-stencil.an-banner .an-code {
    padding: 4px 8px;
  }
  .an-theme-freight-stencil.an-banner .an-code-value {
    font-size: 11px;
  }
  .an-theme-freight-stencil.an-banner .an-cta {
    font-size: 10.5px;
    padding: 7px 11px;
  }
}

/* ---------- neon-sign ----------
   A lit neon-tube headline in a dark storefront window; an occasion motif
   mask (.an-art) sits behind the copy. Glow/pulse/flicker are pure CSS,
   wrapped in prefers-reduced-motion. */
.an-theme-neon-sign::before {
  /* storefront-window reflections */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    color-mix(in srgb, var(--an-text) 5%, transparent) 40% 46%,
    transparent 48% 55%,
    color-mix(in srgb, var(--an-text) 4%, transparent) 57% 60%,
    transparent 62%
  );
}
.an-theme-neon-sign::after {
  /* window frame */
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--an-text) 13%, transparent);
  border-radius: var(--radius-box, 0);
}
.an-theme-neon-sign .an-art {
  display: none;
  position: absolute;
  z-index: 0;
  top: -6px;
  right: 30px;
  width: 220px;
  height: 110px;
  background-color: color-mix(in srgb, var(--an-text) 16%, transparent);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: top right;
}
.an-theme-neon-sign.v-spooky .an-art {
  display: block;
  mask-image: url("/an-motifs/bats.svg?v=b6479e9f");
}
.an-theme-neon-sign.v-sweetheart .an-art {
  display: block;
  mask-image: url("/an-motifs/hearts.svg?v=aeadf772");
}
.an-theme-neon-sign .an-eyebrow {
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--an-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--an-accent) 32%, var(--an-text));
}
.an-theme-neon-sign .an-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--an-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--an-accent) 70%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .an-theme-neon-sign .an-eyebrow::before {
    animation: an-neon-pulse 2.2s ease-in-out infinite;
  }
  .an-theme-neon-sign .an-headline-accent {
    animation: an-neon-flick 6s linear infinite;
  }
}
@keyframes an-neon-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@keyframes an-neon-flick {
  0%,
  100% {
    opacity: 1;
  }
  91% {
    opacity: 1;
  }
  92% {
    opacity: 0.5;
  }
  93% {
    opacity: 1;
  }
  95% {
    opacity: 0.7;
  }
  96% {
    opacity: 1;
  }
}
.an-theme-neon-sign .an-headline {
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 25px;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--an-text) 22%, transparent);
}
.an-theme-neon-sign .an-headline-accent {
  color: var(--an-accent);
  text-shadow: 0 0 7px color-mix(in srgb, var(--an-accent) 60%, transparent),
    0 0 22px color-mix(in srgb, var(--an-accent) 38%, transparent);
}
.an-theme-neon-sign .an-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.an-theme-neon-sign .an-sub {
  font-size: 12px;
  color: var(--an-muted);
}
.an-theme-neon-sign .an-fine {
  font-family: var(--an-mono);
  font-size: 8px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 40ch;
}
.an-theme-neon-sign .an-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.an-theme-neon-sign .an-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.an-theme-neon-sign .an-cd-label {
  font-family: var(--an-mono);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-neon-sign .an-cd-segs {
  gap: 6px;
}
.an-theme-neon-sign .an-cd-seg {
  min-width: 28px;
}
.an-theme-neon-sign .an-cd-seg b {
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
.an-theme-neon-sign .an-cd-lbl {
  font-family: var(--an-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 3px;
  color: var(--an-muted);
}
.an-theme-neon-sign .an-cd-colon {
  font-family: var(--an-mono);
  font-size: 16px;
  opacity: 0.4;
}
.an-theme-neon-sign .an-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 13px;
  border: 1px solid color-mix(in srgb, var(--an-accent) 65%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--an-accent) 22%, transparent);
  border-radius: var(--radius-field, 0);
}
.an-theme-neon-sign .an-code-label {
  font-family: var(--an-mono);
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-neon-sign .an-code-value {
  font-family: var(--an-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--an-accent);
}
.an-theme-neon-sign .an-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  padding: 9px 16px;
  background: var(--an-accent);
  color: var(--an-accent-text);
  border-radius: var(--radius-field, 0);
  box-shadow: 0 0 16px color-mix(in srgb, var(--an-accent) 30%, transparent);
}
.an-theme-neon-sign.an-banner .an-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 102px;
  padding: 16px 28px;
}
.an-theme-neon-sign.an-popup .an-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 30px 28px 26px;
}
.an-theme-neon-sign.an-popup .an-headline {
  font-size: 30px;
}
.an-theme-neon-sign.an-popup .an-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 36ch;
}
.an-theme-neon-sign.an-popup .an-meta {
  margin: 4px 0 0;
  flex-direction: column;
  gap: 12px;
}
.an-theme-neon-sign.an-popup .an-fine {
  text-align: center;
}
.an-theme-neon-sign.an-popup .an-cta {
  align-self: stretch;
  padding: 12px;
  font-size: 14px;
}
@media (max-width: 640px) {
  .an-theme-neon-sign.an-banner .an-inner {
    gap: 12px;
    min-height: 76px;
    padding: 10px 16px;
  }
  .an-theme-neon-sign.an-banner .an-headline {
    font-size: 16px;
  }
  .an-theme-neon-sign.an-banner .an-sub,
  .an-theme-neon-sign.an-banner .an-cd,
  .an-theme-neon-sign.an-banner .an-code {
    display: none;
  }
  .an-theme-neon-sign.an-banner .an-cta {
    font-size: 10.5px;
    padding: 7px 11px;
  }
}

/* ---------- pennant-line ----------
   A swaying conic-gradient bunting strip along the top (.an-bunting), with
   an occasion motif mask layer (.an-art) behind the copy. Sway is pure
   CSS, wrapped in prefers-reduced-motion. */
.an-theme-pennant-line .an-bunting {
  position: absolute;
  top: 0;
  left: -10px;
  right: -10px;
  height: 20px;
  z-index: 1;
  pointer-events: none;
  border-top: 3px solid color-mix(in srgb, var(--an-accent) 80%, transparent);
  background: conic-gradient(
    from 332deg at 50% 100%,
    var(--an-accent) 0 56deg,
    transparent 56deg
  )
    0 0 / 34px 17px repeat-x,
    conic-gradient(
    from 332deg at 50% 100%,
    color-mix(in srgb, var(--an-accent) 42%, var(--an-text)) 0 56deg,
    transparent 56deg
  )
    17px 0 / 34px 17px repeat-x;
  transform-origin: 50% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .an-theme-pennant-line .an-bunting {
    animation: an-sway 4.5s ease-in-out infinite;
  }
}
@keyframes an-sway {
  0%,
  100% {
    transform: skewX(0);
  }
  50% {
    transform: skewX(1.4deg);
  }
}
.an-theme-pennant-line .an-art {
  display: none;
  position: absolute;
  z-index: 0;
  top: 8px;
  right: 10px;
  width: 210px;
  height: 105px;
  background-color: color-mix(in srgb, var(--an-text) 15%, transparent);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: top right;
}
.an-theme-pennant-line.v-spooky .an-art {
  display: block;
  mask-image: url("/an-motifs/bats.svg?v=b6479e9f");
}
.an-theme-pennant-line.v-ribbon .an-art {
  display: block;
  mask-image: url("/an-motifs/streamers.svg?v=1cb13381");
}
.an-theme-pennant-line .an-eyebrow {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: var(--an-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--an-accent);
}
.an-theme-pennant-line.v-spooky .an-eyebrow,
.an-theme-pennant-line.v-ribbon .an-eyebrow {
  color: var(--an-head-tone);
}
.an-theme-pennant-line .an-headline {
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.02;
}
.an-theme-pennant-line .an-headline-accent {
  color: var(--an-accent);
}
.an-theme-pennant-line.v-spooky .an-headline-accent,
.an-theme-pennant-line.v-ribbon .an-headline-accent {
  color: var(--an-head-tone);
}
.an-theme-pennant-line .an-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.an-theme-pennant-line .an-sub {
  font-size: 12px;
  color: var(--an-muted);
}
.an-theme-pennant-line .an-fine {
  font-family: var(--an-mono);
  font-size: 8px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 40ch;
}
.an-theme-pennant-line .an-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.an-theme-pennant-line .an-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.an-theme-pennant-line .an-cd-label {
  font-family: var(--an-mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-pennant-line .an-cd-segs {
  gap: 6px;
}
.an-theme-pennant-line .an-cd-seg {
  min-width: 28px;
}
.an-theme-pennant-line .an-cd-seg b {
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
.an-theme-pennant-line .an-cd-lbl {
  font-family: var(--an-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 3px;
  color: var(--an-muted);
}
.an-theme-pennant-line .an-cd-colon {
  font-family: var(--an-mono);
  font-size: 16px;
  opacity: 0.4;
}
.an-theme-pennant-line .an-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 13px;
  border: 1.5px dashed var(--an-accent);
  background: var(--an-tint);
  border-radius: var(--radius-field, 0);
}
.an-theme-pennant-line .an-code-label {
  font-family: var(--an-mono);
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-pennant-line .an-code-value {
  font-family: var(--an-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
}
.an-theme-pennant-line .an-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  padding: 9px 16px;
  background: var(--an-accent);
  color: var(--an-accent-text);
  border-radius: var(--radius-field, 0);
}
.an-theme-pennant-line.an-banner .an-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 108px;
  padding: 30px 26px 14px;
}
.an-theme-pennant-line.an-popup .an-bunting {
  height: 24px;
  background-size: 40px 20px, 40px 20px;
  background-position: 0 0, 20px 0;
}
.an-theme-pennant-line.an-popup .an-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 48px 28px 24px;
}
.an-theme-pennant-line.an-popup .an-headline {
  font-size: 29px;
}
.an-theme-pennant-line.an-popup .an-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 36ch;
}
.an-theme-pennant-line.an-popup .an-meta {
  margin: 4px 0 0;
  flex-direction: column;
  gap: 12px;
}
.an-theme-pennant-line.an-popup .an-fine {
  text-align: center;
  max-width: 40ch;
}
.an-theme-pennant-line.an-popup .an-cta {
  align-self: stretch;
  padding: 12px;
  font-size: 14px;
}
@media (max-width: 640px) {
  .an-theme-pennant-line .an-bunting {
    height: 15px;
    background-size: 26px 13px, 26px 13px;
    background-position: 0 0, 13px 0;
    border-top-width: 2px;
  }
  .an-theme-pennant-line.an-banner .an-inner {
    gap: 12px;
    min-height: 84px;
    padding: 22px 16px 10px;
  }
  .an-theme-pennant-line.an-banner .an-headline {
    font-size: 16px;
  }
  .an-theme-pennant-line.an-banner .an-sub,
  .an-theme-pennant-line.an-banner .an-fine,
  .an-theme-pennant-line.an-banner .an-cd,
  .an-theme-pennant-line.an-banner .an-code {
    display: none;
  }
  .an-theme-pennant-line.an-banner .an-cta {
    font-size: 10.5px;
    padding: 7px 11px;
  }
}

/* ---------- rodeo-poster ----------
   A letterpress rodeo-bill frame (pure CSS pseudo-elements, no DOM) with a
   CSS starburst badge (.an-emblem: three rotated squares + a circled
   star). */
.an-theme-rodeo-poster::before {
  /* letterpress frame + paper grain */
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 0;
  pointer-events: none;
  border: 3px double color-mix(in srgb, var(--an-text) 55%, transparent);
  background: radial-gradient(circle, var(--an-soft) 0.6px, transparent 1px)
    0 0 / 9px 9px;
}
.an-theme-rodeo-poster::after {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--an-text) 22%, transparent);
}
.an-theme-rodeo-poster .an-emblem {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
}
.an-theme-rodeo-poster .an-emblem i {
  position: absolute;
  inset: 12px;
  background: var(--an-accent);
}
.an-theme-rodeo-poster .an-emblem i:nth-child(1) {
  transform: rotate(0deg);
}
.an-theme-rodeo-poster .an-emblem i:nth-child(2) {
  transform: rotate(30deg);
}
.an-theme-rodeo-poster .an-emblem i:nth-child(3) {
  transform: rotate(60deg);
}
.an-theme-rodeo-poster .an-emblem b {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--an-accent);
  color: var(--an-accent-text);
  border: 2px solid color-mix(in srgb, var(--an-accent-text) 55%, transparent);
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
}
.an-theme-rodeo-poster .an-eyebrow {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: var(--an-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-rodeo-poster .an-eyebrow::before {
  content: "\2605\00a0\00a0";
  color: var(--an-accent);
  font-size: 8px;
}
.an-theme-rodeo-poster .an-eyebrow::after {
  content: "\00a0\00a0\2605";
  color: var(--an-accent);
  font-size: 8px;
}
.an-theme-rodeo-poster.v-spooky .an-eyebrow::before,
.an-theme-rodeo-poster.v-spooky .an-eyebrow::after {
  color: var(--an-head-tone);
}
.an-theme-rodeo-poster .an-headline {
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 1.5px 1.5px 0
    color-mix(in srgb, var(--an-accent) 28%, transparent);
}
.an-theme-rodeo-poster .an-headline-accent {
  color: var(--an-accent);
}
.an-theme-rodeo-poster.v-spooky .an-headline-accent {
  color: var(--an-head-tone);
}
.an-theme-rodeo-poster .an-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.an-theme-rodeo-poster .an-sub {
  font-size: 12px;
  color: var(--an-muted);
}
.an-theme-rodeo-poster .an-fine {
  font-family: var(--an-mono);
  font-size: 8px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 40ch;
}
.an-theme-rodeo-poster .an-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.an-theme-rodeo-poster .an-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.an-theme-rodeo-poster .an-cd-label {
  font-family: var(--an-mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-rodeo-poster .an-cd-segs {
  gap: 6px;
}
.an-theme-rodeo-poster .an-cd-seg {
  min-width: 28px;
}
.an-theme-rodeo-poster .an-cd-seg b {
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
.an-theme-rodeo-poster .an-cd-lbl {
  font-family: var(--an-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 3px;
  color: var(--an-muted);
}
.an-theme-rodeo-poster .an-cd-colon {
  font-family: var(--an-mono);
  font-size: 16px;
  opacity: 0.4;
}
.an-theme-rodeo-poster .an-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.an-theme-rodeo-poster .an-code-label {
  font-family: var(--an-mono);
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-rodeo-poster .an-code-value {
  font-family: var(--an-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--an-accent);
  border-bottom: 1.5px dashed
    color-mix(in srgb, var(--an-accent) 70%, transparent);
  padding-bottom: 2px;
}
.an-theme-rodeo-poster.v-spooky .an-code-value {
  color: var(--an-head-tone);
}
.an-theme-rodeo-poster .an-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  padding: 10px 16px;
  background: var(--an-accent);
  color: var(--an-accent-text);
  border-radius: var(--radius-field, 0);
}
.an-theme-rodeo-poster.an-banner .an-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 108px;
  padding: 18px 32px;
}
.an-theme-rodeo-poster.an-popup .an-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 30px 30px 26px;
}
.an-theme-rodeo-poster.an-popup .an-emblem {
  width: 86px;
  height: 86px;
}
.an-theme-rodeo-poster.an-popup .an-emblem b {
  width: 44px;
  height: 44px;
  font-size: 18px;
}
.an-theme-rodeo-poster.an-popup .an-headline {
  font-size: 28px;
}
.an-theme-rodeo-poster.an-popup .an-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 36ch;
}
.an-theme-rodeo-poster.an-popup .an-meta {
  margin: 4px 0 0;
  flex-direction: column;
  gap: 12px;
}
.an-theme-rodeo-poster.an-popup .an-fine {
  text-align: center;
  max-width: 40ch;
}
.an-theme-rodeo-poster.an-popup .an-cta {
  align-self: stretch;
  padding: 12px;
  font-size: 14px;
}
@media (max-width: 640px) {
  .an-theme-rodeo-poster.an-banner .an-inner {
    gap: 12px;
    min-height: 80px;
    padding: 12px 20px;
  }
  .an-theme-rodeo-poster.an-banner .an-emblem {
    width: 48px;
    height: 48px;
  }
  .an-theme-rodeo-poster.an-banner .an-emblem i {
    inset: 8px;
  }
  .an-theme-rodeo-poster.an-banner .an-emblem b {
    width: 27px;
    height: 27px;
    font-size: 11px;
  }
  .an-theme-rodeo-poster.an-banner .an-headline {
    font-size: 16px;
  }
  .an-theme-rodeo-poster.an-banner .an-sub,
  .an-theme-rodeo-poster.an-banner .an-fine,
  .an-theme-rodeo-poster.an-banner .an-cd,
  .an-theme-rodeo-poster.an-banner .an-eyebrow {
    display: none;
  }
  .an-theme-rodeo-poster.an-banner .an-code-value {
    font-size: 11px;
  }
  .an-theme-rodeo-poster.an-banner .an-cta {
    font-size: 10.5px;
    padding: 7px 11px;
  }
}

/* ---------- route-sign ----------
   A highway guide sign: a sign-face border + retroreflective glint sweep
   (pure CSS pseudo-elements), an exit tab carrying the eyebrow (.an-tab),
   an occasion motif mask layer (.an-art), and a baked "WY.MT" route
   marker chip (.an-emblem, banner-only). Glint is wrapped in
   prefers-reduced-motion. */
.an-theme-route-sign::before {
  /* sign-face border */
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 0;
  pointer-events: none;
  border: 2.5px solid color-mix(in srgb, var(--an-text) 85%, transparent);
  border-radius: var(--radius-box, 0);
}
.an-theme-route-sign::after {
  /* retroreflective glint */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background: linear-gradient(
    115deg,
    transparent 44%,
    color-mix(in srgb, var(--an-text) 16%, transparent) 49% 51%,
    transparent 56%
  );
  background-size: 260% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .an-theme-route-sign::after {
    animation: an-glint 7s linear infinite;
  }
}
@keyframes an-glint {
  0% {
    background-position: 130% 0;
  }
  55% {
    background-position: -80% 0;
  }
  100% {
    background-position: -80% 0;
  }
}
.an-theme-route-sign .an-tab {
  /* exit tab carries the eyebrow */
  position: absolute;
  z-index: 2;
  top: 9.5px;
  right: 40px;
  border: 2px solid color-mix(in srgb, var(--an-text) 85%, transparent);
  border-top: none;
  padding: 4px 12px;
}
.an-theme-route-sign .an-tab .an-eyebrow {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: var(--an-mono);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--an-text);
  white-space: nowrap;
}
.an-theme-route-sign .an-art {
  display: none;
  position: absolute;
  z-index: 0;
  bottom: -8px;
  right: 24px;
  width: 220px;
  height: 100px;
  background-color: color-mix(in srgb, var(--an-text) 18%, transparent);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: bottom right;
}
.an-theme-route-sign.v-spooky .an-art {
  display: block;
  mask-image: url("/an-motifs/cobweb.svg?v=45e1cc43");
  transform: scaleY(-1);
}
.an-theme-route-sign.v-pass-closed .an-art {
  display: block;
  mask-image: url("/an-motifs/snowflakes.svg?v=a613b438");
}
.an-theme-route-sign .an-emblem {
  /* baked route marker */
  flex: 0 0 auto;
  width: 52px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid var(--an-text);
  outline: 1px solid color-mix(in srgb, var(--an-text) 40%, transparent);
  outline-offset: 2px;
  font-family: var(--an-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--an-text);
  border-radius: var(--radius-field, 0);
}
.an-theme-route-sign .an-headline {
  /* mixed-case guide-sign type */
  font-family: var(--font-heading, system-ui);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.04;
  letter-spacing: 0.01em;
}
.an-theme-route-sign .an-headline-accent {
  color: var(--an-accent);
}
.an-theme-route-sign .an-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.an-theme-route-sign .an-sub {
  font-size: 12.5px;
  color: var(--an-muted);
}
.an-theme-route-sign .an-sub::before {
  content: "\2192\00a0\00a0";
  color: var(--an-accent);
}
.an-theme-route-sign .an-fine {
  font-family: var(--an-mono);
  font-size: 8px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 40ch;
}
.an-theme-route-sign .an-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.an-theme-route-sign .an-cd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.an-theme-route-sign .an-cd-label {
  font-family: var(--an-mono);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-route-sign .an-cd-segs {
  gap: 6px;
}
.an-theme-route-sign .an-cd-seg {
  min-width: 28px;
}
.an-theme-route-sign .an-cd-seg b {
  font-family: var(--an-mono);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
.an-theme-route-sign .an-cd-lbl {
  font-family: var(--an-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 3px;
  color: var(--an-muted);
}
.an-theme-route-sign .an-cd-colon {
  font-family: var(--an-mono);
  font-size: 16px;
  opacity: 0.4;
}
.an-theme-route-sign .an-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 13px;
  border: 1.5px solid color-mix(in srgb, var(--an-text) 70%, transparent);
  border-radius: var(--radius-field, 0);
}
.an-theme-route-sign .an-code-label {
  font-family: var(--an-mono);
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-route-sign .an-code-value {
  font-family: var(--an-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--an-accent);
}
.an-theme-route-sign .an-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  padding: 10px 16px;
  background: var(--an-accent);
  color: var(--an-accent-text);
  border-radius: var(--radius-field, 0);
}
.an-theme-route-sign.an-banner .an-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 106px;
  padding: 20px 32px;
}
.an-theme-route-sign.an-popup .an-tab {
  right: 30px;
}
.an-theme-route-sign.an-popup .an-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 44px 30px 28px;
}
.an-theme-route-sign.an-popup .an-headline {
  font-size: 29px;
}
.an-theme-route-sign.an-popup .an-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--an-muted);
}
.an-theme-route-sign.an-popup .an-meta {
  margin: 6px 0 0;
  gap: 16px;
  flex-wrap: wrap;
}
.an-theme-route-sign.an-popup .an-cta {
  align-self: stretch;
  padding: 12px;
  font-size: 14px;
  margin-top: 4px;
}
@media (max-width: 640px) {
  .an-theme-route-sign .an-tab {
    right: 16px;
    padding: 3px 8px;
  }
  .an-theme-route-sign .an-tab .an-eyebrow {
    font-size: 7.5px;
  }
  .an-theme-route-sign.an-banner .an-inner {
    gap: 12px;
    min-height: 84px;
    padding: 20px 18px 12px;
  }
  .an-theme-route-sign.an-banner .an-emblem {
    width: 40px;
    height: 34px;
    font-size: 8.5px;
  }
  .an-theme-route-sign.an-banner .an-headline {
    font-size: 16px;
  }
  .an-theme-route-sign.an-banner .an-sub,
  .an-theme-route-sign.an-banner .an-fine,
  .an-theme-route-sign.an-banner .an-cd,
  .an-theme-route-sign.an-banner .an-code {
    display: none;
  }
  .an-theme-route-sign.an-banner .an-cta {
    font-size: 10.5px;
    padding: 7px 11px;
  }
}

/* ---------- scoreboard ----------
   A stadium board: a rivet-framed border + scanlines (pure CSS pseudo-
   elements), an occasion motif mask layer (.an-art), and a glowing LED
   countdown + code board (.an-board, rendered by
   themes/scoreboard-inner.tsx). When the board is empty (both addons
   off), the fallback fine-print-only cluster uses the shared .an-meta
   class instead (see the inner fragment) -- the exact deadline-board
   pattern. */
.an-theme-scoreboard::before {
  /* frame + rivets */
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 1;
  pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--an-text) 22%, transparent);
  background: radial-gradient(
    circle 2.5px at 10px 10px,
    color-mix(in srgb, var(--an-text) 40%, transparent) 2.5px,
    transparent 3px
  ),
    radial-gradient(
    circle 2.5px at calc(100% - 10px) 10px,
    color-mix(in srgb, var(--an-text) 40%, transparent) 2.5px,
    transparent 3px
  ),
    radial-gradient(
    circle 2.5px at 10px calc(100% - 10px),
    color-mix(in srgb, var(--an-text) 40%, transparent) 2.5px,
    transparent 3px
  ),
    radial-gradient(
    circle 2.5px at calc(100% - 10px) calc(100% - 10px),
    color-mix(in srgb, var(--an-text) 40%, transparent) 2.5px,
    transparent 3px
  );
}
.an-theme-scoreboard::after {
  /* scanlines */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    var(--an-soft) 3px 4px
  );
}
.an-theme-scoreboard .an-art {
  display: none;
  position: absolute;
  z-index: 0;
  top: -4px;
  right: 40px;
  width: 210px;
  height: 100px;
  background-color: color-mix(in srgb, var(--an-text) 16%, transparent);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: top right;
}
.an-theme-scoreboard.v-spooky .an-art {
  display: block;
  mask-image: url("/an-motifs/bats.svg?v=b6479e9f");
}
.an-theme-scoreboard.v-home-team .an-art {
  display: block;
  mask-image: url("/an-motifs/fireworks.svg?v=ce27a222");
}
.an-theme-scoreboard .an-eyebrow {
  background: transparent;
  display: inline-block;
  width: fit-content;
  white-space: nowrap;
  font-family: var(--an-mono);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--an-muted);
  border: 1px solid color-mix(in srgb, var(--an-text) 30%, transparent);
  padding: 2px 8px;
  border-radius: var(--radius-field, 0);
}
.an-theme-scoreboard .an-headline {
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0.01em;
}
.an-theme-scoreboard .an-headline-accent {
  color: var(--an-accent);
  text-shadow: 0 0 9px color-mix(in srgb, var(--an-accent) 45%, transparent);
}
.an-theme-scoreboard .an-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.an-theme-scoreboard .an-sub {
  font-size: 12px;
  color: var(--an-muted);
}
.an-theme-scoreboard .an-fine {
  font-family: var(--an-mono);
  font-size: 8px;
  line-height: 1.45;
  color: var(--an-muted);
  max-width: 320px;
}
.an-theme-scoreboard .an-meta {
  margin-left: auto;
}
.an-theme-scoreboard .an-board {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--an-text) 14%, transparent);
  background: color-mix(in srgb, var(--an-text) 4%, transparent);
}
.an-theme-scoreboard .an-cd {
  display: flex;
  align-items: center;
  gap: 13px;
}
.an-theme-scoreboard .an-cd-label {
  font-family: var(--an-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--an-muted);
  max-width: 42px;
  line-height: 1.7;
}
.an-theme-scoreboard .an-cd-segs {
  gap: 7px;
}
.an-theme-scoreboard .an-cd-seg b {
  font-family: var(--an-mono);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  padding: 7px 7px 6px;
  min-width: 42px;
  text-align: center;
  color: var(--an-accent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--an-accent) 50%, transparent),
    0 0 18px color-mix(in srgb, var(--an-accent) 28%, transparent);
  background: color-mix(in srgb, var(--an-text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--an-text) 14%, transparent);
  border-radius: var(--radius-field, 0);
}
.an-theme-scoreboard .an-cd-lbl {
  font-family: var(--an-mono);
  font-size: 6.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 4px;
  color: var(--an-muted);
}
.an-theme-scoreboard .an-cd-colon {
  font-family: var(--an-mono);
  font-size: 18px;
  color: var(--an-accent);
  opacity: 0.65;
  align-self: flex-start;
  margin-top: 8px;
}
.an-theme-scoreboard .an-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-left: 1px dashed color-mix(in srgb, var(--an-text) 20%, transparent);
  padding-left: 18px;
}
.an-theme-scoreboard .an-code-label {
  font-family: var(--an-mono);
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--an-muted);
}
.an-theme-scoreboard .an-code-value {
  font-family: var(--an-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--an-accent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--an-accent) 35%, transparent);
}
.an-theme-scoreboard .an-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  padding: 10px 16px;
  background: var(--an-accent);
  color: var(--an-accent-text);
  border-radius: var(--radius-field, 0);
}
.an-theme-scoreboard.an-banner .an-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 110px;
  padding: 14px 26px;
}
.an-theme-scoreboard.an-banner .an-inner:not(:has(.an-board)) .an-cta {
  margin-left: auto;
}
/* When fine print AND a populated board both render (both addons on, plus
   fine print set), the fine-print .an-meta and the .an-board each carry
   their own margin-left: auto, so with no floor on .an-copy the headline's
   own wrapping was absorbing the entire squeeze -- a single-character-per-
   line collapse at 1024px. Give copy a floor (matches the deadline-board
   fix) and cap the adjacent fine print tightly; the board itself (cd tiles
   + code chip) is the widest, least compressible element, so it keeps its
   full size and the two other slots share what's left. */
.an-theme-scoreboard.an-banner .an-copy {
  flex: 1 1 auto;
  min-width: 11rem;
}
.an-theme-scoreboard.an-banner .an-meta .an-fine {
  max-width: 96px;
}
.an-theme-scoreboard.an-popup .an-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 30px 28px 26px;
}
.an-theme-scoreboard.an-popup .an-headline {
  font-size: 29px;
}
.an-theme-scoreboard.an-popup .an-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--an-muted);
  max-width: 36ch;
}
.an-theme-scoreboard.an-popup .an-board {
  margin: 6px 0 0;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px;
  align-self: stretch;
}
.an-theme-scoreboard.an-popup .an-cd {
  flex-direction: column;
  gap: 8px;
}
.an-theme-scoreboard.an-popup .an-cd-label {
  max-width: none;
  line-height: 1;
}
.an-theme-scoreboard.an-popup .an-code {
  border-left: 0;
  padding-left: 0;
  border-top: 1px dashed color-mix(in srgb, var(--an-text) 20%, transparent);
  padding-top: 12px;
  align-self: stretch;
}
.an-theme-scoreboard.an-popup .an-cta {
  align-self: stretch;
  padding: 12px;
  font-size: 14px;
  margin-top: 4px;
}
.an-theme-scoreboard.an-popup .an-fine {
  max-width: 40ch;
}
@media (max-width: 640px) {
  .an-theme-scoreboard.an-banner .an-inner {
    flex-wrap: wrap;
    gap: 10px 14px;
    min-height: 0;
    padding: 14px 16px;
  }
  .an-theme-scoreboard.an-banner .an-headline {
    font-size: 17px;
  }
  .an-theme-scoreboard.an-banner .an-sub,
  .an-theme-scoreboard.an-banner .an-fine,
  .an-theme-scoreboard.an-banner .an-eyebrow {
    display: none;
  }
  .an-theme-scoreboard.an-banner .an-board {
    margin-left: 0;
    flex: 1 1 auto;
    padding: 8px 10px;
    gap: 10px;
    justify-content: center;
  }
  .an-theme-scoreboard.an-banner .an-cd-seg b {
    font-size: 15px;
    padding: 5px 4px;
    min-width: 30px;
  }
  .an-theme-scoreboard.an-banner .an-cd-label {
    font-size: 7.5px;
    max-width: 36px;
  }
  .an-theme-scoreboard.an-banner .an-code {
    padding-left: 10px;
  }
  .an-theme-scoreboard.an-banner .an-code-value {
    font-size: 11px;
  }
  .an-theme-scoreboard.an-banner .an-cta {
    flex: 1 1 auto;
    font-size: 11px;
    padding: 8px;
  }
}