/* ============================================================================
   RA promo top bar · scoped CSS
   Paste into Theme Settings > Custom CSS. Every selector sits under .brpdp-tb,
   so the block cannot leak into the theme or inherit from it.

   The bar is its own container (container-type: inline-size), so it restyles by
   its OWN width, not the viewport. Drop it in a narrow column and it stacks
   correctly there too.
   ============================================================================ */

.brpdp-tb {
  /* --- ground and ink --- */
  --brpdp-ground: #7A2A24;          /* oxblood */
  --brpdp-ink-on-ground: #F5F1EA;   /* cream, ~8.6:1 on oxblood */
  --brpdp-label: #E3B4A0;           /* light terra, ~5.4:1 on oxblood */
  --brpdp-dot: #D08C55;             /* warm gold accent */
  /* --- CTA --- */
  --brpdp-cta-bg: #FBF8F2;
  --brpdp-cta-ink: #29241C;
  --brpdp-cta-width: 146px;
  --brpdp-cta-height: 46px;
  /* --- structure --- */
  --brpdp-max: 1364px;
  --brpdp-pad-x: clamp(16px, 3cqi, 40px);
  --brpdp-pad-y: 11px;
  --brpdp-gap: clamp(16px, 2.6cqi, 34px);
  --brpdp-radius-pill: 999px;
  /* --- type --- */
  --brpdp-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brpdp-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --brpdp-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  /* --- motion --- */
  --brpdp-ease: cubic-bezier(.32, .08, .24, 1);

  container-type: inline-size;
  width: 100%;
  background: var(--brpdp-ground);
  position: relative;
  z-index: 68;
  box-shadow: 0 3px 10px -4px rgba(24, 20, 16, 0.45);
}

.brpdp-tb__shell {
  max-width: var(--brpdp-max);
  margin: 0 auto;
  padding: var(--brpdp-pad-y) var(--brpdp-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brpdp-gap);
}

/* --- eyebrow ------------------------------------------------------------- */
.brpdp-tb__eyebrow {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
}
.brpdp-tb__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--brpdp-dot);
}
.brpdp-tb__label {
  font-family: var(--brpdp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brpdp-label);
}

/* --- message ------------------------------------------------------------- */
.brpdp-tb__msg {
  flex: 1 1 auto;
  margin: 0;
  text-align: center;
  text-wrap: pretty;
  font-family: var(--brpdp-sans);
  font-size: clamp(14.5px, 1.35cqi, 17px);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
  color: var(--brpdp-ink-on-ground);
}
.brpdp-tb__accent {
  font-family: var(--brpdp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: 0;
  color: var(--brpdp-ink-on-ground);
}

/* --- CTA ----------------------------------------------------------------- */
.brpdp-tb__action { flex: none; display: flex; }
.brpdp-tb__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: var(--brpdp-cta-width);
  height: var(--brpdp-cta-height);
  padding: 0;
  border-radius: var(--brpdp-radius-pill);
  background: var(--brpdp-cta-bg);
  /* label colour is locked: the theme's own a { color } would otherwise force
     dark-on-dark or light-on-light here */
  color: var(--brpdp-cta-ink) !important;
  font-family: var(--brpdp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 220ms var(--brpdp-ease), box-shadow 220ms var(--brpdp-ease);
}
.brpdp-tb__cta:hover,
.brpdp-tb__cta:focus-visible {
  color: var(--brpdp-cta-ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 9px 20px -9px rgba(24, 20, 16, 0.6);
}
.brpdp-tb__arrow {
  font-family: var(--brpdp-sans);
  font-size: 15px;
  line-height: 1;
}

/* --- focus --------------------------------------------------------------- */
.brpdp-tb :focus-visible {
  outline: 2px solid var(--brpdp-ink-on-ground);
  outline-offset: 3px;
  border-radius: var(--brpdp-radius-pill);
}

/* ============================================================================
   STACKED STATE
   Below the width where eyebrow + message + CTA stop fitting one line, the bar
   becomes a two-row grid: eyebrow left and CTA right on the top row, message
   centred on its own full-width row underneath.

   940px is where the shipped copy stops fitting. If you change the message
   length, move this one number.
   ============================================================================ */
@container (max-width: 940px) {
  .brpdp-tb__shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
    justify-content: stretch;
    padding-top: 13px;
    padding-bottom: 14px;
  }
  .brpdp-tb__eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
  .brpdp-tb__action { grid-column: 2; grid-row: 1; justify-self: end; }
  .brpdp-tb__msg { grid-column: 1 / -1; grid-row: 2; flex: 0 1 auto; }
}

/* Small phones: the label and the pill step down so the top row still fits 390px */
@container (max-width: 430px) {
  .brpdp-tb { --brpdp-cta-width: 128px; }
  .brpdp-tb__label { font-size: 10px; letter-spacing: 0.12em; }
  .brpdp-tb__cta { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .brpdp-tb__cta { transition: none; }
}

/* ============================================================================
   RA promo bar · ROTATION + THEME INTEGRATION   (Cowork, 2026-08-16)
   Appended to the shipped handoff CSS. Everything above this line is Design's
   file, byte-for-byte. Everything below is install plumbing.
   ============================================================================ */

/* --- slot machinery ------------------------------------------------------
   All four variants ship in the markup so the page cache cannot freeze one.
   Every slot is hidden; promo-bar.js adds .is-active to exactly one.
   ------------------------------------------------------------------------ */
.brpdp-tb__slot { display: none; }
.brpdp-tb__slot.is-active { display: block; }

/* Before JS resolves the slot the bar has no content and would be 0px tall,
   which shifts the page. Reserve the shipped height for that one frame only.
   Dropped the instant [data-ra-ready] lands. */
.brpdp-tb:not([data-ra-ready]) { min-height: 68px; }
@media (max-width: 940px) { .brpdp-tb:not([data-ra-ready]) { min-height: 96px; } }

/* --- countdown ----------------------------------------------------------
   No bar currently opts in (data-ra-countdown is absent), so this paints
   nothing today. It is here so turning one on is a markup change, not a
   stylesheet change. Tabular figures stop the row twitching each tick.
   ------------------------------------------------------------------------ */
.brpdp-tb__countdown {
  font-family: var(--brpdp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brpdp-label);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- theme integration ---------------------------------------------------
   Basel lays the header out inside .website-wrapper like this:
     .topbar-wrapp    42px, in flow
     .header-spacing  95px, in flow, reserves room
     .main-header     position:absolute; top:42px  <- pinned to the topbar height
   Hiding the topbar removes 42px of flow, so the absolute header must come
   back to 0 or it leaves a 42px gap and overlaps the content beneath.
   Measured on /blog/ 2026-08-16; nothing on the site is position:fixed at the
   top, so the bar simply sits in normal flow and scrolls away with the page.
   ------------------------------------------------------------------------ */
:root { --ra-tb-h: 0px; }
.topbar-wrapp { display: none !important; }
.main-header { top: 0 !important; }

/* Defensive: if a fixed/sticky header is ever switched on in Theme Settings,
   keep it clear of the bar rather than under it. Inert today. */
.main-header.act-scroll,
.basel-sticky-header { top: var(--ra-tb-h) !important; }

html { scroll-padding-top: calc(var(--ra-tb-h) + 32px); }

/* ============================================================================
   RA promo bar · POST-INSTALL CORRECTIONS  (JKM, 2026-08-16)
   ============================================================================ */

/* 1 · MESSAGE COLOUR LOCK.  The message flipped dark on the live site. Cause:
   the theme prints  p:not(.rapdp *):not(.raap *){color:#303030}  in an inline
   sheet that loads after this file. :not() takes the weight of its argument,
   so that selector scores (0,2,1) and outranks the plain (0,1,0) .brpdp-tb__msg
   class above. Specificity, not order -- moving the rule would not have fixed it.
   The accent <em> was never affected, because the theme rule only matches <p>.
   Locked the same way, and for the same reason, as the CTA label. */
.brpdp-tb .brpdp-tb__msg,
.brpdp-tb .brpdp-tb__msg .brpdp-tb__accent { color: var(--brpdp-ink-on-ground) !important; }

/* 2 · CTA 10% SHORTER, every screen. 46px -> 41.4px. Declared on .brpdp-tb so
   it overrides the token block at the top of this file; the 430px container
   query only touches width, so nothing else needs changing. */
.brpdp-tb { --brpdp-cta-height: 41.4px; }

/* 3 · PER-BAR STACK POINT.  The shipped 940px was tuned to the original short
   message. Bars 1 and 3 now carry a much longer line, so they need to drop to
   two rows earlier; bars 2 and 4 are still short and keep 940px. Scoping the
   wider breakpoint to those two slots stops the short bars stacking early. */
@container (max-width: 1180px) {
  [data-ra-slot="1"] .brpdp-tb__shell,
  [data-ra-slot="3"] .brpdp-tb__shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
    justify-content: stretch;
    padding-top: 13px;
    padding-bottom: 14px;
  }
  [data-ra-slot="1"] .brpdp-tb__eyebrow,
  [data-ra-slot="3"] .brpdp-tb__eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
  [data-ra-slot="1"] .brpdp-tb__action,
  [data-ra-slot="3"] .brpdp-tb__action { grid-column: 2; grid-row: 1; justify-self: end; }
  [data-ra-slot="1"] .brpdp-tb__msg,
  [data-ra-slot="3"] .brpdp-tb__msg { grid-column: 1 / -1; grid-row: 2; flex: 0 1 auto; }
}