/* ============================================================================
   THE PAGE BLUEPRINT
   The system the newer pages established, written down so every remaining page
   inherits it: ink hero, ivory sheet, ink closer. Never one flat surface.
   Gold is the gravity colour and gets spent once per view.
   ========================================================================== */

.bp-wrap{ width: min(var(--bt-max, 1200px), 100% - 2 * var(--bt-s-5)); margin-inline: auto; }

/* --- the ink hero --------------------------------------------------------- */
.bp-hero{
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(3.2rem, 7vw, 6rem) clamp(2.8rem, 6vw, 5rem);
  color: var(--bt-ivory);
  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);
}
/* A single diagonal sheen. One light source, not a gradient salad. */
.bp-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%);
}
.bp-hero .bp-wrap{ max-width: 62rem; }

.bp-eyebrow{
  margin: 0 0 var(--bt-s-3); 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);
}
.bp-title{
  margin: 0; font-family: var(--bt-font-display); font-weight: 600;
  font-size: var(--bt-fs-h1); line-height: 1.03; letter-spacing: -.022em;
  color: var(--bt-ivory); text-wrap: balance; max-width: 18ch;
}
.bp-lede{
  margin: var(--bt-s-5) 0 0; max-width: 46ch; font-size: var(--bt-fs-lg);
  line-height: 1.6; color: var(--bt-text-dk);
}

/* --- the ivory sheet ------------------------------------------------------ */
.bp-sheet{
  background: var(--bt-ivory); color: var(--bt-text);
  padding-block: clamp(3rem, 6.5vw, 5.5rem);
}
.bp-sheet--bare{ padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.bp-feature{
  margin: 0 0 clamp(2rem, 4vw, 3rem); border-radius: var(--bt-r-lg); overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(26,14,46,.55);
}
.bp-feature img{ display: block; width: 100%; height: auto; }

/* Prose: a real measure, so long pages read like a document and not a wall. */
.bp-prose{ max-width: 68ch; margin-inline: auto; font-size: var(--bt-fs-base); line-height: 1.72; color: var(--bt-text); }
.bp-prose > * + *{ margin-block-start: 1.15em; }

.bp-prose h1, .bp-prose h2, .bp-prose h3, .bp-prose h4{
  font-family: var(--bt-font-display); font-weight: 600; color: var(--bt-plum);
  letter-spacing: -.015em; line-height: 1.14; text-wrap: balance;
}
.bp-prose h1{ font-size: clamp(2.1rem, 4.4vw, 3rem); margin-block-start: 1.6em; }
.bp-prose h2{ font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-block-start: 1.7em; }
.bp-prose h3{ font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-block-start: 1.5em; }
.bp-prose h4{ font-size: var(--bt-fs-lg); margin-block-start: 1.4em; }
.bp-prose h1:first-child, .bp-prose h2:first-child, .bp-prose h3:first-child{ margin-block-start: 0; }

/* A hairline under the big headings gives a long legal page a spine. */
.bp-prose h2{ padding-block-end: .38em; border-block-end: 1px solid var(--bt-line); }

.bp-prose p{ margin-block: 0; }
.bp-prose strong, .bp-prose b{ color: var(--bt-plum); font-weight: 600; }
.bp-prose a{ color: var(--bt-gold-link); text-decoration: none; border-block-end: 1px solid rgba(201,162,39,.42); transition: border-color var(--bt-dur, .3s) var(--bt-ease); }
.bp-prose a:hover{ border-block-end-color: var(--bt-gold); }

.bp-prose ul, .bp-prose ol{ margin-block: 0; padding-inline-start: 1.35rem; display: grid; gap: .5rem; }
.bp-prose li{ margin: 0; }
.bp-prose ul{ list-style: none; padding-inline-start: 1.25rem; }
.bp-prose ul > li{ position: relative; padding-inline-start: .35rem; }
.bp-prose ul > li::before{
  content: ""; position: absolute; inset-inline-start: -.9rem; inset-block-start: .62em;
  width: .38rem; height: .38rem; border-radius: 50%; background: var(--bt-gold); opacity: .8;
}

.bp-prose blockquote{
  margin: 1.8em 0; padding: clamp(1.2rem, 2.6vw, 1.8rem) clamp(1.3rem, 3vw, 2rem);
  background: var(--bt-ink); color: var(--bt-ivory); border-radius: var(--bt-r-lg); border: 0;
  font-family: var(--bt-font-display); font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.4; font-style: italic;
}
.bp-prose blockquote p{ margin: 0; }
.bp-prose blockquote strong{ color: var(--bt-gold); }

.bp-prose img{ border-radius: var(--bt-r-md); height: auto; }
.bp-prose figure{ margin-inline: 0; }
.bp-prose hr{ border: 0; border-block-start: 1px solid var(--bt-line); margin-block: 2.4em; }

/* Tables are data. Give them tabular numerals and room to scroll. */
.bp-prose table{ width: 100%; border-collapse: collapse; font-size: var(--bt-fs-sm); font-variant-numeric: tabular-nums; }
.bp-prose table th, .bp-prose table td{ padding: .7rem .85rem; border-block-end: 1px solid var(--bt-line); text-align: start; vertical-align: top; }
.bp-prose table th{ font-family: var(--bt-font-body); font-size: var(--bt-fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--bt-text-soft); font-weight: 700; }
.bp-prose .wp-block-table, .bp-prose figure.wp-block-table{ overflow-x: auto; }

.bp-prose code{ font-size: .9em; padding: .12em .4em; border-radius: var(--bt-r-sm); background: var(--bt-warm); }
.bp-prose pre{ overflow-x: auto; padding: 1rem 1.15rem; border-radius: var(--bt-r-md); background: var(--bt-ink); color: var(--bt-ivory); }

/* --- the ink closer ------------------------------------------------------- */
.bp-closer{
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding-block: clamp(3rem, 6.5vw, 5.5rem); color: var(--bt-ivory);
  background:
    radial-gradient(80% 140% at 50% -30%, rgba(93,52,148,.5), transparent 62%),
    var(--bt-ink);
}
.bp-closer .bp-wrap{ max-width: 46rem; }
.bp-closer .bp-eyebrow{ text-align: center; }
.bp-closer__title{
  margin: 0; font-family: var(--bt-font-display); font-weight: 600;
  font-size: var(--bt-fs-h2); line-height: 1.08; letter-spacing: -.02em;
  color: var(--bt-ivory); text-wrap: balance;
}
.bp-closer__body{ margin: var(--bt-s-4) auto 0; max-width: 48ch; color: var(--bt-text-dk-2); line-height: 1.62; }
.bp-closer__acts{ margin: clamp(1.5rem, 3vw, 2.2rem) 0 0; display: flex; flex-wrap: wrap; gap: var(--bt-s-3); justify-content: center; }

.bp-btn{
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding-inline: var(--bt-s-6); border-radius: var(--bt-r-pill);
  font: 700 var(--bt-fs-sm)/1 var(--bt-font-body); letter-spacing: .04em;
  text-decoration: none !important; background: var(--bt-gold); color: var(--bt-ink) !important;
  transition: transform .3s var(--bt-ease), background .3s var(--bt-ease), box-shadow .3s var(--bt-ease);
}
.bp-btn:hover{ transform: translateY(-2px); background: var(--bt-gold-lift); box-shadow: 0 16px 30px -18px rgba(201,162,39,.9); }
.bp-btn--ghost{ background: transparent; color: var(--bt-ivory) !important; border: 1px solid var(--bt-line-dk-2); }
.bp-btn--ghost:hover{ background: rgba(201,162,39,.14); border-color: var(--bt-gold); box-shadow: none; }

.bp-btn:focus-visible, .bp-prose a:focus-visible{ outline: 2px solid var(--bt-gold); outline-offset: 3px; }

/* --- the old default header, retired -------------------------------------- */
.bt-page-header, .bt-page-title, .bt-page-subtitle{ display: none !important; }

@media (max-width: 720px){
  .bp-title{ max-width: none; }
  .bp-closer__acts{ flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce){
  .bp-btn{ transition: none; }
  .bp-btn:hover{ transform: none; }
}

/* --- de-duplication -------------------------------------------------------
   Several pages were built before the hero existed and open with their own
   eyebrow and title. The hero says it now, so the copy inside the sheet goes.
   Everything else in those blocks (the sub, the byline, the price card) stays. */
.bp-prose .bt-pricing-eyebrow,
.bp-prose .bt-pricing-title,
.bp-prose .bt-article-h1{ display: none !important; }

.bp-prose .bt-pricing-sub,
.bp-prose .bt-article-subtitle{
  margin-block-start: 0; font-size: var(--bt-fs-lg); line-height: 1.6; color: var(--bt-text-soft);
}

/* The article byline keeps its avatar on one line with the credits. */
.bp-prose .bt-byline{ display: flex; align-items: center; gap: var(--bt-s-3); flex-wrap: wrap; }
.bp-prose .bt-byline img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; margin: 0; }

/* These pages set their own width; inside the sheet the measure is already right. */
.bp-prose .bt-article, .bp-prose .bt-pricing-wrap{ max-width: none; margin-inline: 0; padding-inline: 0; }

/* --- Tutor LMS surfaces ---------------------------------------------------
   Tutor replaces the page template outright on its own screens, so these are
   scoped to its wrapper rather than to the sheet. They stay fully functional;
   they just stop looking like a different website. */
.tutor-page-wrap{
  background: var(--bt-ivory); padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.tutor-page-wrap .tutor-h3, .tutor-page-wrap .tutor-h2, .tutor-page-wrap .tutor-h1{
  font-family: var(--bt-font-display) !important; font-weight: 600 !important;
  color: var(--bt-plum) !important; letter-spacing: -.015em;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
}
.tutor-page-wrap .tutor-login-wrap, .tutor-page-wrap .tutor-card{
  background: var(--bt-card) !important; border: 1px solid var(--bt-line) !important;
  border-radius: var(--bt-r-lg) !important;
  box-shadow: 0 26px 52px -40px rgba(26,14,46,.45) !important;
}
.tutor-page-wrap .tutor-label, .tutor-page-wrap label{
  font-family: var(--bt-font-body); font-size: var(--bt-fs-xs) !important;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--bt-text-soft) !important;
}
.tutor-page-wrap .tutor-form-control, .tutor-page-wrap .tutor-input, .tutor-page-wrap input[type="text"],
.tutor-page-wrap input[type="email"], .tutor-page-wrap input[type="password"]{
  border: 1px solid var(--bt-line) !important; border-radius: var(--bt-r-md) !important;
  background: var(--bt-card) !important; color: var(--bt-text) !important;
  min-height: 48px !important; font-family: var(--bt-font-body) !important;
}
.tutor-page-wrap .tutor-form-control:focus, .tutor-page-wrap .tutor-input:focus{
  outline: 2px solid var(--bt-gold) !important; outline-offset: 1px; border-color: transparent !important;
}
.tutor-page-wrap .tutor-btn-primary{
  background: var(--bt-gold) !important; border-color: var(--bt-gold) !important;
  color: var(--bt-ink) !important; border-radius: var(--bt-r-pill) !important;
  min-height: 50px !important; font-weight: 700 !important; letter-spacing: .04em;
}
.tutor-page-wrap .tutor-btn-primary:hover{ background: var(--bt-gold-lift) !important; border-color: var(--bt-gold-lift) !important; }
.tutor-page-wrap a, .tutor-page-wrap .tutor-btn-link-gray{ color: var(--bt-gold-link) !important; }

/* The plugin's access screen. Deliberate, not broken. */
.tutor-page-wrap .tutor-alert, .tutor-page-wrap .tutor-empty-state,
.tutor-page-wrap .tutor-dashboard-content-inner{
  background: var(--bt-warm); border: 1px solid var(--bt-line); border-radius: var(--bt-r-lg);
  padding: clamp(1.4rem, 3vw, 2rem); color: var(--bt-text-soft);
}

/* Tutor's disabled-feature screen. Registration is closed by design here, so it
   should read as a closed door rather than an error. */
.tutor-disabled-wrapper{
  max-width: 44rem; margin: clamp(2rem, 5vw, 3.5rem) auto; padding: clamp(1.6rem, 3.5vw, 2.4rem);
  background: var(--bt-warm); border: 1px solid var(--bt-line); border-radius: var(--bt-r-lg);
  text-align: center; color: var(--bt-text-soft); font-family: var(--bt-font-body);
}
.tutor-disabled-wrapper img, .tutor-disabled-wrapper svg{ display: none; }
.tutor-disabled-content-wrapper{ font-size: var(--bt-fs-base); line-height: 1.65; }
.tutor-disabled-wrapper a{ color: var(--bt-gold-link); }

/* --- events archive -------------------------------------------------------
   Cards on the ivory sheet. Past events stay visible but step back, because a
   room with a history reads better than one where nothing has ever happened. */
.ev-h2{
  margin: 0 0 clamp(1.2rem, 2.5vw, 1.8rem); font-family: var(--bt-font-display);
  font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.2rem); color: var(--bt-plum);
  letter-spacing: -.018em;
}
.ev-h2--past{ margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--bt-line); color: var(--bt-text-soft); }

.ev-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1rem, 2.2vw, 1.6rem); align-items: start; }

.ev-card{
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  background: var(--bt-card); border: 1px solid var(--bt-line); border-radius: var(--bt-r-lg);
  transition: transform .32s var(--bt-ease), box-shadow .32s var(--bt-ease), border-color .32s var(--bt-ease);
}
.ev-card:hover{ transform: translateY(-4px); border-color: rgba(201,162,39,.45); box-shadow: 0 26px 50px -34px rgba(26,14,46,.5); }
.ev-card__img{ display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bt-warm); }
.ev-card__img img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--bt-ease); }
.ev-card:hover .ev-card__img img{ transform: scale(1.04); }

.ev-card__body{ display: grid; align-content: start; gap: .55rem; padding: clamp(1.1rem, 2.4vw, 1.5rem); }
.ev-card__meta{
  margin: 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  font-size: var(--bt-fs-xs); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--bt-gold-text); font-variant-numeric: tabular-nums;
}
.ev-card__title{ margin: 0; font-family: var(--bt-font-display); font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.18; letter-spacing: -.012em; }
.ev-card__title a{ color: var(--bt-plum); text-decoration: none; border: 0; }
.ev-card__title a:hover{ color: var(--bt-violet); }
.ev-card__desc{ margin: 0; font-size: var(--bt-fs-sm); line-height: 1.6; color: var(--bt-text-soft); }
.ev-card__foot{ margin: .35rem 0 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.ev-card__price{ font-family: var(--bt-font-display); font-size: var(--bt-fs-lg); font-weight: 600; color: var(--bt-plum); font-variant-numeric: tabular-nums; }
.ev-card__cta{
  font-size: var(--bt-fs-sm); font-weight: 700; color: var(--bt-gold-link) !important;
  text-decoration: none !important; border-bottom: 1px solid rgba(201,162,39,.45) !important;
}
.ev-card__cta:hover{ border-bottom-color: var(--bt-gold) !important; }

.ev-card.is-past{ opacity: .74; }
.ev-card.is-past:hover{ opacity: 1; }
.ev-grid--past{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ev-grid--past .ev-card__img{ aspect-ratio: 3 / 2; }

.ev-empty{
  padding: clamp(2rem, 5vw, 3.5rem); text-align: center;
  background: var(--bt-warm); border: 1px solid var(--bt-line); border-radius: var(--bt-r-lg);
}
.ev-empty .ev-h2{ margin-bottom: .6rem; }
.ev-empty p{ margin: 0 auto; max-width: 46ch; color: var(--bt-text-soft); line-height: 1.62; }
.ev-empty p + p{ margin-top: 1.4rem; }

@media (prefers-reduced-motion: reduce){
  .ev-card, .ev-card__img img{ transition: none; }
  .ev-card:hover{ transform: none; }
  .ev-card:hover .ev-card__img img{ transform: none; }
}

/* --- selling sections on the pricing pages ---------------------------------
   These pages listed features and never made a case. The added sections carry
   the argument: the problem first, then what is actually done, then who it is
   not for. Honesty about the last one is what makes the rest believable. */
.bt-sell{
  max-width: 66ch; margin: clamp(2rem, 4vw, 3rem) auto 0; text-align: left;
  font-size: var(--bt-fs-base); line-height: 1.72; color: var(--bt-text);
}
.bt-sell h2{
  font-family: var(--bt-font-display); font-weight: 600; color: var(--bt-plum);
  font-size: clamp(1.4rem, 2.8vw, 1.9rem); line-height: 1.16; letter-spacing: -.015em;
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 .6rem; text-wrap: balance;
}
.bt-sell h2:first-child{ margin-top: 0; }
.bt-sell p{ margin: 0 0 1.05em; }
.bt-sell strong{ color: var(--bt-plum); font-weight: 600; }

/* The closing block sits on warm ground so the honest part reads as a considered
   aside rather than more sales copy. */
.bt-sell--close{
  max-width: 72ch;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.4rem, 3vw, 2.2rem);
  background: var(--bt-warm);
  border: 1px solid var(--bt-line);
  border-radius: var(--bt-r-lg);
}
.bt-sell--close h2{ font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

/* The three pricing pages were built with an inline two-column grid and no
   breakpoint, so on a 360px phone the price card sat half off the screen. The
   declaration is inline, which is why this needs !important to reach it; the
   alternative is rewriting the stored HTML of three pages to say the same thing.
   Grid children also default to min-width:auto, so the columns are told they may
   shrink or the text inside keeps them wide. */
@media (max-width: 820px){
  .bt-pricing-wrap [style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
    gap: clamp(1.5rem, 5vw, 2.5rem) !important;
  }
  .bt-pricing-wrap [style*="grid-template-columns"] > *{
    min-width: 0;
    max-width: 100%;
  }
  .bt-pricing-wrap aside{
    max-width: 100%;
    box-sizing: border-box;
  }
}