/*!
 * the platform — the living block, on any page.
 *
 * Deliberately self-contained and NOT scoped under `body.blx`.
 *
 * A living block is dropped into whatever page the operator chooses, and that
 * page is very often a plain WordPress page under a stock theme rather than one
 * of this plugin's own templates. Scoping these rules to the house body class
 * meant the block rendered as naked paragraphs the moment it left a BLX
 * template — which is exactly where it is most likely to be used.
 *
 * Every colour therefore states a fallback and takes the site's token when one
 * exists, so the block inherits the house palette on BLX pages and still looks
 * deliberate on a stock theme.
 */

.blx-living{
  padding: clamp(44px, 6vw, 84px) 0;
  text-align: center;
}
.blx-living-inner{
  max-width: 940px;
  margin: 0 auto;
  padding: 0 24px;
}

/* The kicker is what makes this read as filed rather than sold. */
.blx-living-kicker{
  display: inline-block;
  font-family: var(--sans, 'Manrope', -apple-system, 'Segoe UI', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold, #c9a227);
}

.blx-living-body{
  font-family: var(--serif, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
  font-weight: 500;
  color: var(--heading, #f3f1ec);
  font-size: clamp(22px, 2.5vw, 33px);
  line-height: 1.5;
  margin-top: 22px;
}
.blx-living-body p{ margin: 0 0 .5em; }
.blx-living-body p:last-child{ margin-bottom: 0; }

/*
 * Past about forty words a centred statement stops reading as a statement and
 * starts shouting, so a longer dispatch drops to a reporting size and a
 * comfortable measure.
 */
.blx-living-body.is-long{
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.72;
  color: var(--text, #e8e6e1);
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/*
 * On a light theme the house cream would vanish. Nothing here knows what the
 * page background is, so the block asks the browser instead: where the theme
 * has declared a light scheme, the ink darkens to match.
 */
@media (prefers-color-scheme: light){
  .blx-living-body{ color: var(--heading, #14130f); }
  .blx-living-body.is-long{ color: var(--text, #2c2a26); }
}
.blx-living[data-on="light"] .blx-living-body{ color: var(--heading, #14130f); }
.blx-living[data-on="light"] .blx-living-body.is-long{ color: var(--text, #2c2a26); }

/* Only an administrator sees this, and only when the block has nothing yet. */
.blx-living-idle{
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 22px;
  border: 1px dashed rgba(201,162,39,.5);
  border-radius: 8px;
  font-family: var(--sans, 'Manrope', -apple-system, 'Segoe UI', sans-serif);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted, #8d8a82);
  text-align: left;
}
.blx-living-idle b{ color: var(--gold, #c9a227); font-weight: 600; }
.blx-living-idle code{
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 12px;
}

@media (max-width: 640px){
  .blx-living{ padding: 38px 0; }
  .blx-living-body{ font-size: 21px; }
}

/* The homepage spot speaks up a little: it is a featured section of the
   front page now, not a sidebar block, and the type carries that. */
#home-beat .blx-living-body{ font-size: clamp(26px, 3vw, 40px); }
#home-beat .blx-living-body.is-long{ font-size: clamp(19px, 1.9vw, 24px); line-height: 1.7; }

/* On a blxn page the block stops guessing from the OS and reads the PAGE:
   the ink tokens are light-first and swap under blxn-dark, so the words are
   legible on Powder and Noir alike — whatever the visitor's system theme. */
body.blxn .blx-living-body{ color: var(--blxn-ink-strong, #14130f); }
body.blxn .blx-living-body.is-long{ color: var(--blxn-ink, #2c2a26); }