/* ==========================================================================
   HR Burn Book — Safe Space (Cookie Design System) component layer
   Every value here resolves to a Cookie semantic token. Color tokens are HSL
   component lists, so they are consumed via hsl(var(--token)).

   GAP FLAGGED: the Cookie kit ships no radius token (design.md lists none and
   safespace.css defines none). Radii below are local scaffolding pending a
   DS decision — flagged for the Workweek design team (patrick@workweek.com).
   ========================================================================== */

html[data-community="safespace"] {
  --bb-radius-sm: 8px;
  --bb-radius-md: 12px;
  --bb-radius-lg: 16px;
  --bb-radius-pill: 999px;
  /* alpha-free HSL triplets (space-separated) for valid `hsl(... / a)` overlays —
     the Cookie color tokens already carry a trailing alpha, so they can't take one. */
  --bb-ink: 40 11% 15%;
  --bb-paper: 48 33% 97%;
  --bb-white: 0 0% 100%;
  --bb-plum: 302 79% 19%;
  /* lighter take on the Safe Space plum — the default share-card background */
  --bb-lavender: 300 38% 89%;
}

* { box-sizing: border-box; }

body {
  background-color: hsl(var(--background-app));
  color: hsl(var(--text-primary));
}

::selection { background: hsl(var(--bb-plum) / 0.18); }

/* focus ring — border-strong per Cookie spec, never suppressed */
:where(button, a, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid hsl(var(--border-strong));
  outline-offset: 2px;
  border-radius: var(--bb-radius-sm);
}

/* ---- layout ---- */
.bb-app { min-height: 100vh; }
.bb-wrap { max-width: 720px; margin: 0 auto; padding-inline: var(--2xl); }
.bb-center { text-align: center; }

/* ---- eyebrow / labels ---- */
.bb-eyebrow {
  font-size: var(--Typeface-size-xs);
  font-weight: var(--Typeface-weight-Semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--text-secondary));
  margin: 0;
}

/* ---- Safe Space logo (brand wordmark asset) ---- */
.bb-logo-img { display: inline-block; width: auto; vertical-align: middle; }

/* ---- ransom-note title ----
   DEVIATION (flagged): the Cookie kit is "Mona Sans only, no decorative type."
   This treatment evokes a cut-from-magazines ransom note in the spirit of the
   original "burn book": black & white letter tiles, several contrasting display
   faces (serif / typewriter / condensed / chunky grotesque) mixed at irregular
   sizes and angles. The per-letter font + size come from the RANSOM array. */
.bb-ransom { display: flex; flex-direction: column; align-items: center; gap: 0.02em; line-height: 1; margin: 0; }
.bb-ransom__line { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 0.1em 0.14em; }
.bb-ransom--hero { font-size: var(--Typeface-size-5xl); }
/* two-line lockup: small "THE HR" kicker over a big "BURN BOOK" */
.bb-ransom--hero2 { font-size: 3.6rem; }
.bb-ransom--hero2 .bb-ransom__line:first-child { font-size: 0.44em; margin-bottom: 0.06em; }
/* a "plain text" line — clean tracked caps instead of cut-out tiles */
.bb-ransom__line--plain {
  font-family: inherit; font-weight: var(--Typeface-weight-Bold);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: hsl(var(--text-primary)); line-height: 1;
}
.bb-ransom--book { font-size: var(--Typeface-size-3xl); }
.bb-ransom--book .bb-ransom__line:first-child { font-size: 0.44em; margin-bottom: 0.06em; }
.bb-ransom__w { display: inline-flex; align-items: flex-end; gap: 0.06em; }
.bb-ransom__l {
  display: inline-block; font-size: 1em; line-height: 0.78;
  padding: 0.06em 0.13em; border-radius: 3px;
  box-shadow: 0 1px 2px hsl(40 11% 15% / 0.22);
}
/* magazine cut-out tiles — colourful letters snipped from different pages,
   echoing the "i hate it here" wordmark: most are a coloured ink on a
   white/cream scrap, a few are dark/cream ink on a coloured scrap. */
.r-ink       { background: hsl(var(--text-primary)); color: hsl(var(--text-white)); }
.r-paper     { background: hsl(40 33% 96%); color: hsl(var(--text-primary)); }
.r-bare      { background: transparent; color: hsl(var(--text-primary)); padding-inline: 0.02em; box-shadow: none; }
.r-blue      { background: hsl(40 33% 96%); color: hsl(214 52% 47%); }
.r-pink      { background: hsl(40 33% 96%); color: hsl(335 52% 57%); }
.r-green     { background: hsl(0 0% 100%);  color: hsl(150 40% 30%); }
.r-red       { background: hsl(0 0% 100%);  color: hsl(351 50% 49%); }
.r-orange    { background: hsl(40 33% 96%); color: hsl(24 62% 51%); }
.r-yellow    { background: hsl(46 68% 60%); color: hsl(222 45% 24%); }    /* dark ink on a yellow scrap */
.r-orangetile{ background: hsl(24 60% 56%); color: hsl(28 40% 13%); }    /* near-black ink on orange */
.r-redtile   { background: hsl(351 48% 52%); color: hsl(40 40% 94%); }   /* cream ink on a crimson scrap */
.r-bluetile  { background: hsl(214 48% 46%); color: hsl(40 40% 95%); }   /* cream ink on a cobalt scrap */
.r-greentile { background: hsl(150 38% 29%); color: hsl(40 40% 95%); }   /* cream ink on a forest scrap */
.r-pinktile  { background: hsl(335 52% 56%); color: hsl(40 42% 96%); }   /* cream ink on a hot-pink scrap */
.r-navytile  { background: hsl(222 45% 26%); color: hsl(46 66% 62%); }   /* yellow ink on a navy scrap */

/* lipstick kiss accent — the one pop of color against the b/w lettering */
.bb-hero__mark { position: relative; display: inline-block; }
.bb-kiss { position: absolute; pointer-events: none; user-select: none; }
.bb-kiss--hero {
  width: 76px; height: auto; right: -30px; bottom: -22px;
  transform: rotate(-14deg);
  filter: drop-shadow(0 2px 3px hsl(40 11% 15% / 0.22));
}
@media (max-width: 560px) {
  .bb-ransom--hero2 { font-size: 2.9rem; }
  .bb-kiss--hero { width: 54px; right: -16px; bottom: -14px; }
}

/* ---- display title ---- */
.bb-title {
  font-weight: var(--Typeface-weight-Black);
  font-size: var(--Typeface-size-5xl);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.bb-title--sm { font-size: var(--Typeface-size-3xl); }
.bb-lede {
  font-size: var(--Typeface-size-lg);
  line-height: 1.5;
  color: hsl(var(--text-secondary));
  max-width: 30ch;
  margin: var(--3xl) auto 0;
  text-wrap: pretty;
}
.bb-fine { font-size: var(--Typeface-size-xs); color: hsl(var(--text-muted)); margin: 0; }

/* ---- buttons (Cookie Button spec) ---- */
.bb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--md);
  font-family: inherit;
  font-size: var(--Typeface-size-m);
  font-weight: var(--Typeface-weight-Semibold);
  line-height: 1;
  padding: var(--lg) var(--2xl);
  border-radius: var(--bb-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms cubic-bezier(.2,.7,.2,1),
              color 120ms cubic-bezier(.2,.7,.2,1),
              border-color 120ms cubic-bezier(.2,.7,.2,1);
  text-decoration: none;
}
.bb-btn--lg { padding: var(--xl) var(--3xl); font-size: var(--Typeface-size-lg); }
.bb-btn--block { width: 100%; }

.bb-btn--primary {
  background: hsl(var(--button-primary-bg-default));
  color: hsl(var(--button-primary-text-default));
}
.bb-btn--primary:hover { background: hsl(var(--button-primary-bg-hover)); }
.bb-btn--primary:active { background: hsl(var(--button-primary-bg-pressed)); }
.bb-btn--primary:disabled {
  background: hsl(var(--button-primary-bg-disabled));
  color: hsl(var(--button-primary-text-disabled));
  cursor: not-allowed;
}

.bb-btn--secondary {
  background: transparent;
  color: hsl(var(--button-secondary-text-default));
  border-color: hsl(var(--button-secondary-border-default));
}
.bb-btn--secondary:hover {
  background: hsl(var(--button-secondary-bg-hover));
  color: hsl(var(--button-secondary-text-hover));
  border-color: transparent;
}

.bb-btn--tertiary {
  background: transparent;
  color: hsl(var(--text-secondary));
  padding: var(--md) var(--lg);
  border-radius: var(--bb-radius-sm);
}
.bb-btn--tertiary:hover { background: hsl(var(--background-surface-hover)); color: hsl(var(--text-primary)); }

/* on-dark variants for the announcement bar (neutral chrome) */
.bb-btn--on-dark {
  border-color: hsl(var(--bb-white) / 0.4);
  color: hsl(var(--text-white));
  background: transparent;
  padding: var(--md) var(--xl);
}
.bb-btn--on-dark:hover { background: hsl(var(--bb-white) / 0.12); border-color: hsl(var(--bb-white) / 0.7); }

/* ---- hero ---- */
.bb-hero {
  background: hsl(var(--background-surface));
  border-bottom: 1px solid hsl(var(--border-default));
  padding: var(--3xl) var(--2xl) var(--7xl);
}
.bb-cta-stack { display: flex; flex-direction: column; gap: var(--lg); max-width: 360px; margin: var(--4xl) auto 0; }

/* ---- announcement bar (Safe Space brand purple) ---- */
.bb-announce {
  background: hsl(var(--bg-brand));
  color: hsl(var(--text-white));
  padding: var(--lg) var(--2xl);
  position: sticky; top: 0; z-index: 50;
}
.bb-announce__inner {
  max-width: 860px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: var(--xl);
  flex-wrap: wrap; text-align: center;
}
.bb-announce p { margin: 0; font-size: var(--Typeface-size-s); color: hsl(var(--bb-white) / 0.85); line-height: 1.5; }
.bb-announce strong { color: hsl(var(--text-white)); font-weight: var(--Typeface-weight-Semibold); }

/* ---- book header ---- */
.bb-bookhead {
  position: relative;
  background: hsl(var(--background-surface));
  border-bottom: 1px solid hsl(var(--border-default));
  padding: var(--5xl) var(--2xl) var(--4xl);
  text-align: center;
}
.bb-bookhead__back { position: absolute; top: var(--xl); left: var(--xl); }
.bb-bookhead__logo { position: absolute; top: var(--xl); right: var(--xl); margin-bottom: 0; }

/* ---- filter bar ---- */
.bb-filterbar {
  background: hsl(var(--background-surface));
  border-bottom: 1px solid hsl(var(--border-default));
  padding: var(--lg) var(--2xl);
  display: flex; gap: var(--md); flex-wrap: wrap; justify-content: center;
  position: sticky; z-index: 40;
}
.bb-chip {
  font-family: inherit;
  font-size: var(--Typeface-size-s);
  font-weight: var(--Typeface-weight-Semibold);
  padding: var(--md) var(--xl);
  border-radius: var(--bb-radius-pill);
  border: 1.5px solid hsl(var(--border-default));
  background: transparent;
  color: hsl(var(--text-secondary));
  cursor: pointer;
  transition: all 120ms cubic-bezier(.2,.7,.2,1);
}
.bb-chip:hover { background: hsl(var(--background-surface-hover)); color: hsl(var(--text-primary)); }
/* active/selected state — brand accent permitted */
.bb-chip--active {
  background: hsl(var(--button-primary-bg-default));
  color: hsl(var(--button-primary-text-default));
  border-color: hsl(var(--button-primary-bg-default));
}
.bb-chip--active:hover { background: hsl(var(--button-primary-bg-hover)); color: hsl(var(--button-primary-text-default)); }

/* ---- book view: coffee-table photo sits behind the feed of cards ----
   The announcement bar, header and filter bar all carry their own solid
   surfaces, so the photo only reveals itself in the feed region. A soft
   ink scrim keeps the white cards popping and ties the warm wood tones
   to the page. background-attachment: fixed makes it a stable "window"
   the cards scroll over. */
.bb-book {
  background-image:
    linear-gradient(hsl(var(--bb-ink) / 0.32), hsl(var(--bb-ink) / 0.32)),
    url("assets/burn-book-photo.png");
  background-size: cover;
  background-position: 28% 60%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ---- feed ---- */
.bb-feed { padding: var(--3xl) var(--2xl) var(--7xl); display: flex; flex-direction: column; gap: var(--xl); }

/* ---- preview/dev affordance: re-trigger the fire-once email popup ----
   Subtle dashed pill pinned bottom-right; clearly a testing control, not
   part of the reader-facing UI. Remove before shipping if desired. */
.bb-preview-btn {
  position: fixed; right: var(--xl); bottom: var(--xl); z-index: 40;
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: var(--Typeface-size-xs); font-weight: var(--Typeface-weight-Semibold);
  color: hsl(var(--bb-paper)); background: hsl(var(--bb-ink) / 0.82);
  border: 1px dashed hsl(var(--bb-paper) / 0.5); border-radius: var(--bb-radius-pill);
  padding: 8px 14px; cursor: pointer; backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px hsl(var(--bb-ink) / 0.3);
  transition: background 140ms cubic-bezier(.2,.7,.2,1), transform 140ms cubic-bezier(.2,.7,.2,1);
}
.bb-preview-btn:hover { background: hsl(var(--bb-ink) / 0.95); transform: translateY(-1px); }
.bb-card {
  background: hsl(var(--background-surface));
  border: 1px solid hsl(var(--border-default));
  border-radius: var(--bb-radius-lg);
  padding: var(--2xl);
  box-shadow: 6px 6px 0 0 hsl(var(--bb-plum));
  transition: transform 220ms cubic-bezier(.2,.7,.2,1),
              box-shadow 220ms cubic-bezier(.2,.7,.2,1),
              border-color 220ms cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) {
  .bb-card:hover {
    transform: translateY(-3px);
    border-color: hsl(var(--border-strong));
    box-shadow: 9px 9px 0 0 hsl(var(--bb-plum));
  }
}
.bb-quote {
  font-size: var(--Typeface-size-lg);
  line-height: 1.5;
  color: hsl(var(--text-primary));
  margin: 0 0 var(--2xl);
  text-wrap: pretty;
}
.bb-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--lg); flex-wrap: wrap; }

/* ---- tag (Cookie Tag — neutral default; tags are not brand-accented) ---- */
.bb-tag {
  display: inline-flex; align-items: center;
  font-size: var(--Typeface-size-xs);
  font-weight: var(--Typeface-weight-Semibold);
  letter-spacing: 0.04em;
  padding: var(--xs) var(--lg);
  border-radius: var(--bb-radius-pill);
  background: hsl(var(--background-bg-muted));
  color: hsl(var(--text-secondary));
  border: 1px solid hsl(var(--border-default));
}

.bb-actions { display: flex; align-items: center; gap: var(--md); }

/* share button (tertiary icon+label) */
.bb-share {
  display: inline-flex; align-items: center; gap: var(--sm);
  font-family: inherit; font-size: var(--Typeface-size-s); font-weight: var(--Typeface-weight-Medium);
  color: hsl(var(--text-secondary));
  background: transparent; border: 1.5px solid hsl(var(--border-default));
  border-radius: var(--bb-radius-pill); padding: var(--md) var(--lg); cursor: pointer;
  transition: all 120ms cubic-bezier(.2,.7,.2,1);
}
.bb-share:hover { background: hsl(var(--background-surface-hover)); color: hsl(var(--text-primary)); }
.bb-share svg { width: 15px; height: 15px; }

/* like toggle — default neutral; "on" = selected state (brand accent permitted) */
.bb-like {
  display: inline-flex; align-items: center; gap: var(--sm);
  font-family: inherit; font-size: var(--Typeface-size-s); font-weight: var(--Typeface-weight-Semibold);
  font-variant-numeric: tabular-nums;
  color: hsl(var(--text-secondary));
  background: transparent; border: 1.5px solid hsl(var(--border-default));
  border-radius: var(--bb-radius-pill); padding: var(--md) var(--lg); cursor: pointer;
  transition: all 120ms cubic-bezier(.2,.7,.2,1);
}
.bb-like:hover { background: hsl(var(--background-surface-hover)); color: hsl(var(--text-primary)); }
.bb-like svg { width: 16px; height: 16px; }
.bb-like--on {
  background: hsl(var(--button-primary-bg-default));
  color: hsl(var(--button-primary-text-default));
  border-color: hsl(var(--button-primary-bg-default));
}
.bb-like--on:hover { background: hsl(var(--button-primary-bg-hover)); color: hsl(var(--button-primary-text-default)); }
.bb-like--on svg { fill: currentColor; }

.bb-empty { text-align: center; color: hsl(var(--text-muted)); padding: var(--6xl) 0; }

/* ---- dialog (Cookie Dialog spec) ---- */
.bb-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: hsl(var(--bb-ink) / 0.55);
  display: flex; align-items: center; justify-content: center; padding: var(--2xl);
}
.bb-dialog {
  position: relative;
  background: hsl(var(--background-surface));
  border: 1px solid hsl(var(--border-default));
  border-radius: var(--bb-radius-lg);
  padding: var(--3xl);
  max-width: 520px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 16px 48px hsl(var(--bb-ink) / 0.16);
}
/* email-capture dialog — thin Safe Space plum outline to brand the moment */
.bb-dialog--brand { border-color: hsl(var(--bb-plum)); }
/* submit-a-burn dialog — full plum background; flip inner text/buttons to read on it */
.bb-dialog--plum { background: hsl(var(--bb-plum)); border-color: hsl(var(--bb-plum)); }
.bb-dialog--plum .bb-dialog__title,
.bb-dialog--plum .bb-field-label { color: hsl(var(--bb-white)); }
.bb-dialog--plum .bb-iconbtn { color: hsl(var(--bb-white) / 0.85); }
.bb-dialog--plum .bb-iconbtn:hover { background: hsl(var(--bb-white) / 0.15); }
.bb-dialog--plum .bb-charcount { color: hsl(var(--bb-white) / 0.7); }
.bb-dialog--plum .bb-btn--primary { background: hsl(var(--bb-white)); color: hsl(var(--bb-plum)); }
.bb-dialog--plum .bb-btn--primary:hover { background: hsl(var(--bb-paper)); }
.bb-dialog--plum .bb-btn--primary:disabled { background: hsl(var(--bb-white) / 0.45); color: hsl(var(--bb-plum) / 0.55); }
/* segmented control (card format toggle) */
.bb-segctl {
  display: flex; gap: var(--xs);
  padding: var(--xs);
  background: hsl(var(--background-bg-muted));
  border-radius: var(--bb-radius-pill);
  margin-bottom: var(--xl);
}
.bb-segctl__btn {
  flex: 1; font-family: inherit;
  font-size: var(--Typeface-size-s); font-weight: var(--Typeface-weight-Semibold);
  color: hsl(var(--text-secondary));
  background: transparent; border: none; cursor: pointer;
  padding: var(--md) var(--lg); border-radius: var(--bb-radius-pill);
  transition: all 120ms cubic-bezier(.2,.7,.2,1);
}
.bb-segctl__btn:hover { color: hsl(var(--text-primary)); }
.bb-segctl__btn.is-active {
  background: hsl(var(--background-surface));
  color: hsl(var(--text-primary));
  box-shadow: 0 1px 3px hsl(var(--bb-ink) / 0.12);
}
.bb-dialog__x { position: absolute; top: var(--lg); right: var(--lg); }
/* email-capture input */
.bb-input {
  width: 100%; text-align: left;
  font-family: inherit; font-size: var(--Typeface-size-lg); line-height: 1.4;
  color: hsl(var(--text-primary));
  background: hsl(var(--background-surface));
  border: 1.5px solid hsl(var(--border-input));
  border-radius: var(--bb-radius-md);
  padding: var(--lg) var(--xl);
}
.bb-input::placeholder { color: hsl(var(--text-muted)); }
.bb-input:focus { outline: none; border-color: hsl(var(--border-strong)); }
.bb-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lg); margin-bottom: var(--xl); }
.bb-dialog__title { margin: 0; font-size: var(--Typeface-size-2xl); font-weight: var(--Typeface-weight-Black); color: hsl(var(--text-primary)); }
.bb-dialog__head .bb-dialog__title { white-space: nowrap; }
.bb-dialog__sub { margin: var(--sm) 0 0; font-size: var(--Typeface-size-s); color: hsl(var(--text-secondary)); }
.bb-iconbtn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--bb-radius-sm);
  background: transparent; border: none; cursor: pointer; color: hsl(var(--icon-secondary));
}
.bb-iconbtn:hover { background: hsl(var(--background-surface-hover)); }
.bb-iconbtn svg { width: 20px; height: 20px; }

/* ---- text area (Cookie Text Area spec) ---- */
.bb-field-label { display: block; font-size: var(--Typeface-size-s); font-weight: var(--Typeface-weight-Semibold); color: hsl(var(--text-primary)); margin-bottom: var(--md); }
.bb-textarea {
  width: 100%; min-height: 132px; resize: vertical;
  font-family: inherit; font-size: var(--Typeface-size-lg); line-height: 1.5;
  color: hsl(var(--text-primary));
  background: hsl(var(--background-surface));
  border: 1.5px solid hsl(var(--border-input));
  border-radius: var(--bb-radius-md);
  padding: var(--xl);
}
.bb-textarea::placeholder { color: hsl(var(--text-muted)); }
.bb-textarea:focus { outline: none; border-color: hsl(var(--border-strong)); }
.bb-field-row { display: flex; align-items: center; justify-content: space-between; gap: var(--lg); margin: var(--md) 0 var(--2xl); }
.bb-charcount { font-size: var(--Typeface-size-xs); color: hsl(var(--text-muted)); font-variant-numeric: tabular-nums; }
.bb-select {
  font-family: inherit; font-size: var(--Typeface-size-s); font-weight: var(--Typeface-weight-Semibold);
  color: hsl(var(--text-primary));
  background: hsl(var(--background-surface));
  border: 1.5px solid hsl(var(--border-input));
  border-radius: var(--bb-radius-sm);
  padding: var(--md) var(--lg); cursor: pointer;
}
.bb-select:focus { outline: none; border-color: hsl(var(--border-strong)); }

/* ---- confirmation ---- */
.bb-confirm-badge {
  width: 72px; height: 72px; border-radius: var(--bb-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: hsl(var(--bg-brand));
  color: hsl(var(--text-white));
  margin-bottom: var(--xl);
}
.bb-confirm-badge svg { width: 34px; height: 34px; }

/* ---- share poster — square social card (off-white paper) ---- */
.bb-poster {
  position: relative; overflow: hidden;
  background: hsl(var(--bb-lavender));
  border: 1px solid hsl(var(--border-default));
  border-radius: var(--bb-radius-md);
  padding: var(--3xl);
  color: hsl(var(--text-primary));
  margin-bottom: var(--xl);
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column;
}
.bb-poster::before { /* halftone-dot texture */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(hsl(var(--bb-plum) / 0.08) 1.3px, transparent 1.3px);
  background-size: 15px 15px;
}
/* image background variant — photo darkened by an overlay; text sits in white directly on it */
.bb-poster--image { background-size: cover; background-position: center; }
.bb-poster--image::before { /* darkening veil over the photo */
  display: block;
  background-image: none;
  background: linear-gradient(hsl(var(--bb-ink) / 0.42), hsl(var(--bb-ink) / 0.62));
}
.bb-poster--image .bb-poster__rule { display: none; }
.bb-poster--image .bb-poster__cat { color: hsl(var(--bb-paper)); border-color: hsl(var(--bb-paper) / 0.55); }
.bb-poster--image .bb-poster__qmark { color: hsl(var(--bb-paper)); text-shadow: 0 2px 12px hsl(var(--bb-ink) / 0.55); }
.bb-poster--image .bb-poster__quote { line-height: 1.55; }
.bb-poster__quotetext {
  background: hsl(var(--bb-paper));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.05em 0.26em;
  border-radius: 3px;
}
.bb-poster--image .bb-poster__site { color: hsl(var(--bb-paper) / 0.85); }
/* keep the real logo (with its pink highlight) on a small cream chip so it reads on the dark photo */
.bb-poster--image .bb-poster__foot .bb-logo-img { background: hsl(var(--bb-paper)); padding: 5px 9px; border-radius: 5px; box-shadow: 0 1px 5px hsl(var(--bb-ink) / 0.4); }
/* same cream chip behind the corner wordmark so the footer reads as a matched pair */
.bb-poster--image .bb-poster__foot .bb-ransom--mark { background: hsl(var(--bb-paper)); padding: 5px 9px; border-radius: 5px; box-shadow: 0 1px 5px hsl(var(--bb-ink) / 0.4); }
/* background picker */
.bb-bgpicker { display: flex; gap: var(--md); justify-content: center; margin-bottom: var(--xl); }
.bb-bgpicker__sw {
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  border-radius: var(--bb-radius-sm);
  border: 1.5px solid hsl(var(--border-default));
  background-color: hsl(var(--background-app));
  background-size: cover; background-position: center;
  transition: box-shadow 120ms cubic-bezier(.2,.7,.2,1), border-color 120ms cubic-bezier(.2,.7,.2,1);
}
.bb-bgpicker__sw.is-active { border-color: hsl(var(--text-primary)); box-shadow: 0 0 0 2px hsl(var(--background-surface)), 0 0 0 4px hsl(var(--text-primary)); }
.bb-bgpicker__sw--solid { background: hsl(var(--bb-lavender)); }
.bb-poster > * { position: relative; }
/* title block — the ransom wordmark leads, most prominent */
.bb-poster__top { display: flex; flex-direction: column; align-items: center; gap: var(--lg); text-align: center; padding-bottom: var(--xs); }
.bb-poster .bb-ransom--poster { font-size: var(--Typeface-size-2xl); }
/* vertical / story format — taller card, height-capped so it fits the dialog */
.bb-poster--vertical { aspect-ratio: 9 / 16; max-height: 62vh; width: auto; max-width: 100%; margin-inline: auto; }
.bb-poster__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: var(--lg) 0; }
.bb-poster__cat {
  font-size: var(--Typeface-size-xxs); font-weight: var(--Typeface-weight-Semibold);
  letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--text-secondary));
  border: 1px solid hsl(var(--border-strong)); border-radius: var(--bb-radius-pill); padding: 3px 11px;
}
.bb-poster__qmark { display: block; font-size: 72px; font-weight: var(--Typeface-weight-Black); line-height: 0.9; height: 0.5em; overflow: visible; color: hsl(var(--bb-plum) / 0.9); margin-bottom: var(--sm); }
.bb-poster__quote { color: hsl(var(--text-primary)); font-size: var(--Typeface-size-2xl); font-weight: var(--Typeface-weight-Semibold); line-height: 1.55; margin: 0; text-wrap: pretty; }
.bb-poster--vertical .bb-poster__quote { font-size: var(--Typeface-size-xl); }
.bb-poster__rule { height: 1px; background: hsl(var(--bb-ink) / 0.12); margin: var(--lg) 0; }
.bb-poster__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--md); }
.bb-poster__foot .bb-logo-img { height: 22px; }
.bb-poster__foot .bb-ransom--mark { font-size: 11px; flex-wrap: nowrap; gap: 0.1em 0.16em; }
.bb-poster__site { display: inline-flex; align-items: center; gap: 6px; color: hsl(var(--text-muted)); font-size: var(--Typeface-size-xs); white-space: nowrap; }

@media (max-width: 768px) {
  .bb-hero { padding: var(--5xl) var(--xl); }
  .bb-title { font-size: var(--Typeface-size-4xl); }
}