/* ============================================================================
   THE UNIFYING LAYER
   Seven page templates were built by copying one file and renaming its prefix,
   so booking, guest, listen, newsletter, quiz, resources and sponsor each carry
   an identical private stylesheet under a different name, each with its own
   slightly-off palette. Rather than rewrite seven large templates, this maps
   every one of them onto the real design tokens and lifts their buttons, type
   and cards to the blueprint standard.

   Specificity is doubled throughout because the templates print their own CSS
   inline, after the head. Doubling the class beats source order without having
   to move a stylesheet into the footer and cause a flash of unstyled content.
   ========================================================================== */

/* --- one palette, from the tokens ----------------------------------------- */
.bkg.bkg, .gst.gst, .lsn.lsn, .nws.nws, .qzp.qzp, .rsc.rsc, .spo.spo{
  --iv: var(--bt-ivory);
  --cr: var(--bt-warm);          /* was #FFF9F0, a second cream nobody chose */
  --ch: var(--bt-text);          /* was #3A3228, a brown that fights the plum */
  --tl: var(--bt-text-soft);
  --p9: var(--bt-plum);
  --g5: var(--bt-gold);
  --g4: var(--bt-gold-lift);
  --fb: var(--bt-font-body);
  --fd: var(--bt-font-display);
  --mx: var(--bt-max, 1200px);
  --sp: var(--bt-sec-pad);
}

/* --- one button ------------------------------------------------------------
   Same shape everywhere: a real 52px touch target, the display weight the rest
   of the site uses, and the 2px lift on hover. */
.bkg .bkg-btn, .gst .gst-btn, .lsn .lsn-btn, .nws .nws-btn,
.qzp .qzp-btn, .rsc .rsc-btn, .spo .spo-btn,
.a-btn, .bt-btn{
  min-height: 52px; padding: 0 var(--bt-s-6);
  border-radius: var(--bt-r-pill); border: 1px solid transparent;
  font-family: var(--bt-font-body); font-weight: 700; font-size: var(--bt-fs-sm);
  letter-spacing: .04em; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bt-s-2);
  text-decoration: none !important;
  transition: transform .3s var(--bt-ease), background .3s var(--bt-ease), box-shadow .3s var(--bt-ease);
}
.bkg .bkg-btn:hover, .gst .gst-btn:hover, .lsn .lsn-btn:hover, .nws .nws-btn:hover,
.qzp .qzp-btn:hover, .rsc .rsc-btn:hover, .spo .spo-btn:hover,
.a-btn:hover, .bt-btn:hover{ transform: translateY(-2px); }

/* The gold action, identical on every page that has one. */
.bkg .bkg-btn-primary, .gst .gst-btn-primary, .lsn .lsn-btn-primary, .nws .nws-btn-primary,
.qzp .qzp-btn-primary, .rsc .rsc-btn-primary, .spo .spo-btn-primary,
.a-btn--gold, .bt-btn--gold{
  background: var(--bt-gold); color: var(--bt-ink) !important; border-color: var(--bt-gold);
}
.bkg .bkg-btn-primary:hover, .gst .gst-btn-primary:hover, .lsn .lsn-btn-primary:hover,
.nws .nws-btn-primary:hover, .qzp .qzp-btn-primary:hover, .rsc .rsc-btn-primary:hover,
.spo .spo-btn-primary:hover, .a-btn--gold:hover, .bt-btn--gold:hover{
  background: var(--bt-gold-lift); box-shadow: 0 16px 30px -18px rgba(201,162,39,.9);
}

/* The quiet action next to it. */
.bkg .bkg-btn-ghost, .gst .gst-btn-ghost, .lsn .lsn-btn-ghost, .nws .nws-btn-ghost,
.qzp .qzp-btn-ghost, .rsc .rsc-btn-ghost, .spo .spo-btn-ghost,
.a-btn--ghost, .bt-btn--ghost{
  background: transparent; color: var(--bt-ivory) !important; border-color: var(--bt-line-dk-2);
}
.bkg .bkg-btn-ghost:hover, .gst .gst-btn-ghost:hover, .lsn .lsn-btn-ghost:hover,
.nws .nws-btn-ghost:hover, .qzp .qzp-btn-ghost:hover, .rsc .rsc-btn-ghost:hover,
.spo .spo-btn-ghost:hover, .a-btn--ghost:hover, .bt-btn--ghost:hover{
  background: rgba(201,162,39,.14); border-color: var(--bt-gold); box-shadow: none;
}

/* --- one type scale --------------------------------------------------------
   The display face, the same optical tracking, and balanced headlines. */
.bkg h1, .bkg h2, .gst h1, .gst h2, .lsn h1, .lsn h2, .nws h1, .nws h2,
.qzp h1, .qzp h2, .rsc h1, .rsc h2, .spo h1, .spo h2{
  font-family: var(--bt-font-display); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.08; text-wrap: balance;
}
.bkg h3, .gst h3, .lsn h3, .nws h3, .qzp h3, .rsc h3, .spo h3{
  font-family: var(--bt-font-display); font-weight: 600; letter-spacing: -.014em; line-height: 1.18;
}

/* Uppercase labels need tracking or they read as a mistake. */
.bkg [class*="-eyebrow"], .gst [class*="-eyebrow"], .lsn [class*="-eyebrow"],
.nws [class*="-eyebrow"], .qzp [class*="-eyebrow"], .rsc [class*="-eyebrow"],
.spo [class*="-eyebrow"], .a-eyebrow, .bt-section-label{
  font-family: var(--bt-font-body); font-size: var(--bt-fs-xs); font-weight: 700;
  letter-spacing: var(--bt-track-caps); text-transform: uppercase; color: var(--bt-gold);
}

/* --- one card --------------------------------------------------------------
   Hairline border, the shared radius, and a shadow only on hover so a grid of
   cards does not look like a pile of floating boxes at rest. */
.bkg [class$="-card"], .gst [class$="-card"], .lsn [class$="-card"],
.nws [class$="-card"], .qzp [class$="-card"], .rsc [class$="-card"],
.spo [class$="-card"]{
  border-radius: var(--bt-r-lg);
  border: 1px solid var(--bt-line);
  transition: transform .32s var(--bt-ease), box-shadow .32s var(--bt-ease), border-color .32s var(--bt-ease);
}
.bkg a[class$="-card"]:hover, .gst a[class$="-card"]:hover, .lsn a[class$="-card"]:hover,
.nws a[class$="-card"]:hover, .qzp a[class$="-card"]:hover, .rsc a[class$="-card"]:hover,
.spo a[class$="-card"]:hover{
  transform: translateY(-4px); border-color: rgba(201,162,39,.45);
  box-shadow: 0 26px 50px -34px rgba(26,14,46,.5);
}

/* Cards sitting on a dark band need the dark hairline, not the light one. */
.bkg [class*="-dark"] [class$="-card"], .gst [class*="-dark"] [class$="-card"],
.lsn [class*="-dark"] [class$="-card"], .nws [class*="-dark"] [class$="-card"],
.qzp [class*="-dark"] [class$="-card"], .rsc [class*="-dark"] [class$="-card"],
.spo [class*="-dark"] [class$="-card"]{ border-color: var(--bt-line-dk); }

/* --- shared details ------------------------------------------------------- */
.bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
{ color: var(--bt-ivory); }

/* Figures line up in columns wherever a page shows numbers. */
.bkg [class*="-stat"], .gst [class*="-stat"], .lsn [class*="-stat"],
.nws [class*="-stat"], .qzp [class*="-stat"], .rsc [class*="-stat"],
.spo [class*="-stat"], .a-stat{ font-variant-numeric: tabular-nums; }

/* One focus ring, on brand, everywhere. */
.bkg a:focus-visible, .gst a:focus-visible, .lsn a:focus-visible, .nws a:focus-visible,
.qzp a:focus-visible, .rsc a:focus-visible, .spo a:focus-visible,
.bkg button:focus-visible, .gst button:focus-visible, .lsn button:focus-visible,
.nws button:focus-visible, .qzp button:focus-visible, .rsc button:focus-visible,
.spo button:focus-visible{ outline: 2px solid var(--bt-gold); outline-offset: 3px; }

/* Wide content scrolls in its own box; the page body never moves sideways. */
.bkg table, .gst table, .lsn table, .nws table, .qzp table, .rsc table, .spo table{
  font-variant-numeric: tabular-nums;
}
.bkg pre, .gst pre, .lsn pre, .nws pre, .qzp pre, .rsc pre, .spo pre{ overflow-x: auto; }

@media (prefers-reduced-motion: reduce){
  .bkg .bkg-btn, .gst .gst-btn, .lsn .lsn-btn, .nws .nws-btn,
  .qzp .qzp-btn, .rsc .rsc-btn, .spo .spo-btn, .a-btn, .bt-btn,
  .bkg [class$="-card"], .gst [class$="-card"], .lsn [class$="-card"],
  .nws [class$="-card"], .qzp [class$="-card"], .rsc [class$="-card"], .spo [class$="-card"]{
    transition: none;
  }
  .bkg .bkg-btn:hover, .gst .gst-btn:hover, .lsn .lsn-btn:hover, .nws .nws-btn:hover,
  .qzp .qzp-btn:hover, .rsc .rsc-btn:hover, .spo .spo-btn:hover,
  .a-btn:hover, .bt-btn:hover{ transform: none; }
}

/* --- one hero --------------------------------------------------------------
   These templates each opened with a flat plum-to-violet ramp, which is the
   "whole purple page" the brand explicitly does not want. This gives them the
   blueprint hero instead: an ink ground, a gold wash top right, a violet wash
   bottom left, and one diagonal sheen. Same light source on every page. */
.bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
{
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(105% 150% at 86% -25%, rgba(201,162,39,.26), transparent 58%),
    radial-gradient(85% 130% at 2% 118%, rgba(93,52,148,.58), transparent 62%),
    var(--bt-ink) !important;
}
.bkg .bkg-hero::after, .gst .gst-hero::after, .lsn .lsn-hero::after, .nws .nws-hero::after, .qzp .qzp-hero::after, .rsc .rsc-hero::after, .spo .spo-hero::after, .bt-hero.bt-hero::after
{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background: linear-gradient(112deg, transparent 40%, rgba(255,253,248,.055) 50%, transparent 60%);
}
/* Inner blocks must not repaint over the ground. */
.bkg [class*="-hero-"], .gst [class*="-hero-"], .lsn [class*="-hero-"],
.nws [class*="-hero-"], .qzp [class*="-hero-"], .rsc [class*="-hero-"],
.spo [class*="-hero-"]{ background: transparent !important; }

.bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
p, .bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
p, .bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
p,
.bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
p, .bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
p, .bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
p,
.bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
p{ color: var(--bt-text-dk) !important; }

/* The gold half of a two-tone headline, matched to the rest of the site. */
.bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
em, .bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
em, .bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
em,
.bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
em, .bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
em, .bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
em,
.bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
em, .bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
i, .bkg .bkg-hero, .gst .gst-hero, .lsn .lsn-hero, .nws .nws-hero, .qzp .qzp-hero, .rsc .rsc-hero, .spo .spo-hero, .bt-hero.bt-hero
i{
  color: var(--bt-gold); font-style: italic;
}

/* --- the three that use the shared bt-hero class ---------------------------
   Media kit, retreat and start-here were built on a generic prefix rather than
   a private one, so they missed the block above and kept the flat light plum.
   Verified that no other page on the site uses .bt-hero before touching it. */
.bt-hero, .bt-retreat-split-hero{
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(105% 150% at 86% -25%, rgba(201,162,39,.26), transparent 58%),
    radial-gradient(85% 130% at 2% 118%, rgba(93,52,148,.58), transparent 62%),
    var(--bt-ink) !important;
  color: var(--bt-ivory);
}
.bt-hero::after, .bt-retreat-split-hero::after{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background: linear-gradient(112deg, transparent 40%, rgba(255,253,248,.055) 50%, transparent 60%);
}
.bt-hero-inner, .bt-hero-buttons, .bt-hero-desc{ background: transparent !important; }
.bt-hero-desc{ color: var(--bt-text-dk) !important; }
.bt-hero-title{
  font-family: var(--bt-font-display); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.06; text-wrap: balance; color: var(--bt-ivory);
}
.bt-hero-title em, .bt-hero-title i, .bt-hero-line-2{ color: var(--bt-gold); font-style: italic; }

/* The decorative orbs were tuned for a lighter ground and read as smudges on ink. */
.bt-hero-orb{ opacity: .28; }

/* --- photography behind the hero -------------------------------------------
   The gradient alone was handsome but anonymous: every page looked like every
   other. A real photograph now sits underneath as atmosphere, never as a
   competitor. The ink is painted ON TOP of the picture in the same layer, so the
   headline keeps its contrast no matter how light the photograph is, and the
   copy stays legible even where it is centred over the middle of the frame. */
.bkg .bkg-hero::before, .gst .gst-hero::before, .lsn .lsn-hero::before, .nws .nws-hero::before, .qzp .qzp-hero::before, .rsc .rsc-hero::before, .spo .spo-hero::before, .bt-hero.bt-hero::before{
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(178deg, rgba(26,14,46,.88) 0%, rgba(26,14,46,.74) 48%, rgba(26,14,46,.92) 100%),
    var(--bt-hero-img, none);
  background-size: cover, cover;
  background-position: center, var(--bt-hero-pos, 70% 30%);
  background-repeat: no-repeat;
  opacity: var(--bt-hero-scrim, 1);
  transform: scale(1.04);
}

/* Slow drift, so the hero breathes without anything moving under the reader. */
@media (prefers-reduced-motion: no-preference){
  .bkg .bkg-hero::before, .gst .gst-hero::before, .lsn .lsn-hero::before, .nws .nws-hero::before, .qzp .qzp-hero::before, .rsc .rsc-hero::before, .spo .spo-hero::before, .bt-hero.bt-hero::before{
    animation: bt-drift 30s cubic-bezier(.4,0,.2,1) infinite alternate;
  }
}
@keyframes bt-drift{
  from{ transform: scale(1.04); }
  to  { transform: scale(1.10); }
}

/* On a phone the frame is narrow and the copy fills it, so the picture goes
   quieter still rather than fighting the words. */
@media (max-width: 780px){
  .bkg .bkg-hero::before, .gst .gst-hero::before, .lsn .lsn-hero::before, .nws .nws-hero::before, .qzp .qzp-hero::before, .rsc .rsc-hero::before, .spo .spo-hero::before, .bt-hero.bt-hero::before{
    background-image:
      linear-gradient(180deg, rgba(26,14,46,.95) 0%, rgba(26,14,46,.86) 55%, rgba(26,14,46,.66) 100%),
      var(--bt-hero-img, none);
    background-size: cover, cover;
    background-position: center, var(--bt-hero-pos, 70% 30%);
    animation: none;
  }
}

/* --- motion ----------------------------------------------------------------
   Only ever applied when the script has set the flag, so nothing can be left
   invisible if it fails to run. Elements already on screen at load are skipped
   by the script itself: a reveal belongs to what you scroll to. */
html[data-bt-motion="on"] .bt-reveal{
  opacity: 0; transform: translateY(14px);
  transition: opacity .62s var(--bt-ease), transform .62s var(--bt-ease);
  transition-delay: var(--bt-reveal-delay, 0ms);
  will-change: opacity, transform;
}
html[data-bt-motion="on"] .bt-reveal.is-in{ opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce){
  html[data-bt-motion="on"] .bt-reveal{ opacity: 1; transform: none; transition: none; }
  .bkg .bkg-hero::before, .gst .gst-hero::before, .lsn .lsn-hero::before, .nws .nws-hero::before, .qzp .qzp-hero::before, .rsc .rsc-hero::before, .spo .spo-hero::before, .bt-hero.bt-hero::before{ animation: none; transform: scale(1.04); }
}

/* --- hero video ------------------------------------------------------------
   Real footage from the studio recordings on the two pages where it belongs.
   It sits under the same scrim as the stills, fades in once it is actually
   playing so there is never a flash of black, and is inert to assistive tech. */
.bt-hero-video, .bt-hero > .bt-hero-video, .bt-hero > .bt-hero-video{
  position: absolute !important; inset: 0 !important; z-index: -3 !important;
  width: 100% !important; height: 100% !important; max-width: none !important;
  margin: 0 !important; object-fit: cover; object-position: center 32%;
  opacity: 0; transition: opacity .9s var(--bt-ease); pointer-events: none;
  border-radius: 0 !important;
}
.bt-hero.has-video .bt-hero-video, .bt-hero.has-video .bt-hero-video{ opacity: .55; }

/* With footage running underneath, the still is only there to cover the load. */
.bt-hero.has-video::before, .bt-hero.has-video::before{
  background-image:
    linear-gradient(178deg, rgba(26,14,46,.88) 0%, rgba(26,14,46,.74) 48%, rgba(26,14,46,.92) 100%);
}

@media (max-width: 899px), (prefers-reduced-motion: reduce){
  .bt-hero-video{ display: none !important; }
}


/* --- off-canvas furniture must never widen the page -------------------------
   A phone sweep found 17 of 49 pages scrolling sideways. The cause was not the
   page content: it was the chrome that sits on every page. The sticky player's
   inner container and the slide-out cart panel size themselves to their CONTENT,
   so on a 390px phone they measured 658px and 605px, and because they sit in the
   normal flow they pushed the document's scroll width out with them.
   Constraining them to the viewport fixes every affected page at once. */
.sticky-player,
body .sticky-player,
.sticky-player-inner,
.sticky-player-inner.container{
  max-width: 100%;
  box-sizing: border-box;
}
.bt-side-cart,
.bt-side-cart-header,
.bt-side-cart-body,
.bt-side-cart-footer,
.widget_shopping_cart_content{
  max-width: min(100vw, 420px);
  box-sizing: border-box;
}
.bt-cart-overlay{ max-width: 100vw; }

/* Long tables are content, not layout: let them scroll inside their own box
   rather than dragging the whole page sideways. The cookie policy table is 712px
   of real data and there is no honest way to squeeze that onto a phone. */
.entry-content table,
.bp-prose table,
.bt-sell table{
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* The skip link is for keyboard users and must not occupy layout space when
   unfocused. Kept reachable, kept out of the scroll box. */
.skip-to-content:not(:focus):not(:focus-visible){
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The sticky player is position:fixed with an auto width, which makes it
   shrink-to-fit its own content rather than the screen. On a 390px phone it
   measured 658px and dragged four Resources pages sideways with it. A percentage
   cap cannot fix that, because the percentage resolves against a containing block
   that is itself wider; viewport units are measured against the screen, so they
   hold regardless. Bounded to phones so the desktop player is untouched. */
@media (max-width: 900px){
  .sticky-player,
  body .sticky-player{
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .sticky-player-inner,
  .sticky-player-inner.container{
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }
}

/* Worksheet pages use long runs of underscores as write-on blanks. An underscore
   run is a single unbreakable "word", so on a 390px phone one line measured 658px
   and pushed four Resources pages sideways. break-word only intervenes when a word
   genuinely cannot fit, so ordinary prose keeps its normal ragged edge. */
.bp-prose,
.bt-article-body,
.bt-article,
.entry-content{
  overflow-wrap: break-word;
}