/* CONSOLIDATED 25 Aug 2026.
   64 selectors had multiple competing rules; 81 redundant rules removed.
   Every selector now appears ONCE, with the winning value from the old cascade
   preserved, so rendering is unchanged. Correct at source from here: appending
   an override instead of editing the rule is what built this up, and it made
   fixes land in the file and not in the browser. */
/* ==========================================================================
   BEST OF — CHROME
   Sources: BEST OF Chrome - Header.dc.html  MD5 e3a079750d01ec767709cf93b8315649
            BEST OF Chrome - Footer.dc.html  MD5 df43ff0549c83c339cf1f0852aa12a69

   Values transcribed from the design files. Where the numbered docs and the
   design file disagree, the FILE wins (Mark, 25 Aug 2026).
   ========================================================================== */

/* --- Reset, kept deliberately small --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--bo-page-bg);
  color: var(--bo-ink);
  font-family: var(--bo-font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }
img { height: auto; }

a { color: var(--bo-gold-ink); }

/* Visible keyboard focus everywhere. Not optional. */
:focus-visible {
  outline: 2px solid var(--bo-action-gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.bo-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--bo-surface);
  color: var(--bo-ink);
  padding: 12px 18px;
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-control);
  font-weight: 700;
}
.bo-skip-link:focus { left: 12px; top: 12px; }

.bo-shell {
  max-width: var(--bo-content-width);
  margin: 0 auto;
  padding: 0 var(--bo-gutter);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.bo-header {
  font-family: var(--bo-font-ui);
  position: sticky;
  top: 0;
  z-index: 80;
  background: #FFFFFF;
  border-bottom: 1px solid #EDE9E0;
  box-shadow: 0 4px 16px rgba(11,31,58,0.09);
}

.bo-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;              /* 84px only when a descriptor is set */
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  min-width: 0;
}

.bo-header--descriptor .bo-header__inner { height: 84px; }

/* --- Wordmark ------------------------------------------------------------
   LOCK 3: the SVG is INLINED in the markup because it contains live <text>.
   Never a background-image, never an <img> pointing at the file. Both fall
   back to Helvetica when Archivo is unavailable and silently ship a broken
   wordmark. The letter-spacing and dx values are measured, not approximate. */
.bo-header__brand {
  font-family: var(--bo-font-ui);
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  width: 168px;
}

.bo-header__brand svg { display: block; width: 168px; height: auto; }

.bo-header__descriptor {
  font-family: var(--bo-font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: #8A94A6;
  white-space: nowrap;
  padding-left: 1px;
}

/* --- Primary navigation --------------------------------------------------
   LOCK 1: exactly five items, this order, every page. Row 1 never changes. */
.bo-header__nav {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  margin-left: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bo-header__nav::-webkit-scrollbar { display: none; }

.bo-header__nav-link {
  font-family: var(--bo-font-ui);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  font-size: 13.5px;
  font-weight: 600;
  color: #10213A;
  border-bottom: 2px solid transparent;
  transition: color var(--bo-transition);
}
.bo-header__nav-link:hover { color: #B45309; }

/* Active state. The design file declares #B45309 with a #FABD12 underline.
   The Design Replication Protocol names #D97706 for this. The file wins per
   Mark's ruling of 25 Aug 2026. Logged in the conflict register. */
.bo-header__nav-link.is-active {
  font-weight: 700;
  color: #B45309;
  border-bottom-color: #FABD12;
}

/* --- Burger, shown below 1140px ------------------------------------------ */
.bo-header__burger {
  font-family: var(--bo-font-ui);
  display: none;
  flex-shrink: 0;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid #EDE9E0;
  border-radius: 10px;
  background: #FFFFFF;
  cursor: pointer;
}
.bo-header__burger:hover { background: #FBFAF7; }

@media (max-width: 1140px) {
  .bo-header__nav    { display: none !important; }
  .bo-header__burger { display: inline-flex !important; }
}

/* --- Search --------------------------------------------------------------- */
.bo-header__search-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.bo-header__search {
  flex: 1 1 180px;
  max-width: 300px;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  background: #FBFAF7;
  border: 1px solid #EDE9E0;
  border-radius: 999px;
}

.bo-header__search svg { flex-shrink: 0; }

.bo-header__search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--bo-font-ui);
  font-size: 13px;
  color: #10213A;
}

/* --- Right cluster -------------------------------------------------------- */
.bo-header__text-link {
  font-family: var(--bo-font-ui);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5F6878;
  transition: color var(--bo-transition);
}
.bo-header__text-link:hover { color: #B45309; }

/* The one filled control in the header. Action gold, never credential gold. */
.bo-header__cta {
  font-family: var(--bo-font-display);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-radius: 10px;
  background: #FABD12;
  color: #10213A;
  font-size: 13.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: background var(--bo-transition);
}
.bo-header__cta:hover { background: #BD8810; }

/* --- Menu sheet ----------------------------------------------------------- */
.bo-header__sheet {
  font-family: var(--bo-font-ui);
  position: sticky;
  top: 72px;
  z-index: 79;
  background: #FFFFFF;
  border-bottom: 1px solid #EDE9E0;
  box-shadow: 0 10px 24px rgba(11,31,58,0.10);
}
.bo-header--descriptor + .bo-header__sheet { top: 84px; }

.bo-header__sheet[hidden] { display: none; }

.bo-header__sheet-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 24px 14px;
  display: flex;
  flex-direction: column;
}

.bo-header__sheet-link {
  font-family: var(--bo-font-ui);
  text-decoration: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #EAE5DA;
  font-size: 15px;
  font-weight: 700;
  color: #10213A;
}
.bo-header__sheet-link:hover { color: #B45309; }

/* ==========================================================================
   FOOTER
   LOCK 3: the footer wordmark is icon plus BEST OF only. VERIFY · TRUST ·
   CHOOSE sits below it as separate HTML with gold dot separators. The retired
   THE TRUST REGISTER tagline is never baked into the SVG.
   ========================================================================== */









/* ==========================================================================
   PAGE SHELL
   ========================================================================== */

.bo-main { min-height: 40vh; }

.bo-placeholder {
  max-width: 1240px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}

.bo-placeholder h1 {
  font-family: var(--bo-font-display);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 12px;
}

.bo-placeholder p {
  font-family: var(--bo-font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--bo-ink-muted);
  max-width: 62ch;
}
.bo-card {
  font-family: var(--bo-font-ui);
  display: flex;
  gap: 14px;
  background: #FFFFFF;
  border: 1px solid #EDE9E0;
  border-left: 1px solid #EDE9E0;
  border-radius: 4px;
  padding: 15px 17px 13px 15px;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  overflow: visible;
  will-change: transform;
  width: 100%;
}

.bo-card:hover {
  box-shadow: var(--bo-shadow-card-hover);
  transform: translateY(-1px);
  border-color: var(--bo-border-strong);
}

.bo-card.is-risen {
  border-left: 3px solid #FABD12;
  border-color: #EFE7D8;
}

.bo-card.is-acking { animation: bo-card-ack 620ms ease-out; }
.bo-card__rail {
  flex-shrink: 0;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding-top: 2px;
  overflow: visible;
}

.bo-card__rise {
  min-width: 58px;
  min-height: var(--bo-hit-target);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1.5px solid #EDE9E0;
  background: #FFFFFF;
  cursor: pointer;
  color: var(--bo-ink-soft);
  transition: transform 150ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  position: relative;
  padding: 9px 10px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11,31,58,0.05);
}

.bo-card__rise:hover {
  color: var(--bo-gold-ink);
  transform: translateY(-1px);
  border-color: #FABD12;
  background: #FFFDF6;
}

/* ⛔ THIS RULE WAS DEAD BUT STILL WRONG — the later, near-identical selector
   at this file's own §"consequence line" section already wins the cascade
   (equal specificity, source order decides), so raw gold here never
   actually painted. Fixed anyway rather than left as a live landmine: the
   next reorder of this file would have resurrected #FABD12 on Rise with no
   warning. Same rule as below: ink, not gold — Rise is the row's one
   ink-ceiling exception, not a place for the retired accent or raw gold. */
.bo-card.is-risen .bo-card__rise {
  color: #FFFFFF;
  background: #080C0F;
  border-color: #080C0F;
  box-shadow: 0 4px 14px rgba(8,12,15,0.34);
}

.bo-card__rise-count {
  font-family: var(--bo-font-display);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  color: #10213A;
  letter-spacing: -0.02em;
}

.bo-card.is-risen .bo-card__rise-count {
  color: #10213A;
}

.bo-card__rise-label {
  font-family: var(--bo-font-display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1;
  color: #5F6878;
}



.bo-card__hairline { display: block; width: 34px; height: 1px; background: #EAE5DA; }

.bo-card__save {
  min-width: var(--bo-hit-target);
  min-height: var(--bo-hit-target);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--bo-ink-soft);
}
.bo-card__save:hover { opacity: 0.75; }
/* ⛔ THE RIBBON FILLS INK, NEVER THE ACCENT BROWN — this set both the icon
   (via currentColor below) and the label gold on save. Ink, matching the
   row's own rule; the label's own, more specific colour rule further down
   this file no longer needs to fight this one for the text, but the icon
   had nothing else overriding it, so it was the one actually going gold. */
.bo-card__save[aria-pressed="true"] { color: #080C0F; }
.bo-card__save[aria-pressed="true"] svg { fill: currentColor; }
.bo-card__save-label {
  font-family: var(--bo-font-display);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

/* --- Body ------------------------------------------------------------------ */
.bo-card__body { position: relative; min-width: 0; flex: 1; }

.bo-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.bo-card__kind {
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  border-radius: 5px;
  padding: 4px 8px;
}

.bo-card__community {
  flex-shrink: 0;
  font-family: var(--bo-font-ui);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
  color: #10213A;
}
.bo-card__community:hover { color: #B45309; }

.bo-card__dot { font-size: 11.5px; color: #5F6878; }

.bo-card__prov {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #080C0F;
  background: #F4F1EA;
  border-radius: 5px;
  padding: 4px 8px;
}
.bo-card__title {
  font-family: var(--bo-font-display);
  text-decoration: none;
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.32;
  color: #10213A;
  margin-bottom: 7px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color 160ms ease, background-size 260ms cubic-bezier(0.2,0.7,0.3,1);
}

.bo-card__title:hover {
  color: #B45309;
  background-size: 100% 1px;
}

.bo-card__text {
  font-family: var(--bo-font-serif);
  font-size: 14.5px;
  line-height: 1.55;
  color: #4A5260;
  margin: 0 0 11px;
  max-width: 68ch;
}


.bo-card__ai {
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  color: var(--bo-ink-soft);
  margin: 0 0 11px;
}

/* --- Media grid, one to three up ------------------------------------------- */
.bo-card__media {
  position: relative;
  display: grid;
  gap: 4px;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 0 11px;
  text-decoration: none;
}
.bo-card__media[data-count="1"] { grid-template-columns: 1fr; }
.bo-card__media[data-count="2"] { grid-template-columns: 1fr 1fr; }
.bo-card__media[data-count="3"] { grid-template-columns: 2fr 1fr; }
.bo-card__shot {
  position: relative;
  display: block;
  height: 190px;
  background-size: cover;
  background-position: center;
  background-color: #EFEADE;
}
.bo-card__media[data-count="3"] .bo-card__shot:first-child {
  grid-row: span 2;
  height: 190px;
}

.bo-card__media[data-count="3"] .bo-card__shot { height: 93px; }
.bo-card__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(11,31,58,0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bo-card__actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  border-top: 1px solid #EAE5DA;
  padding-top: 11px;
}

.bo-card__act {
  font-family: var(--bo-font-ui);
  text-decoration: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid #EDE9E0;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 12.5px;
  font-weight: 700;
  color: #10213A;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease;
}

.bo-card__act:hover { background: #FBFAF7; border-color: var(--bo-action-gold); }
.bo-card__act--primary {
  border-color: #F3E5C9;
  background: #FFF8E7;
  color: #8A5122;
  padding: 0 15px;
}

.bo-card__act--primary:hover { background: #FDF0D2; border-color: var(--bo-action-gold); }

.bo-card__act--more { padding: 0 11px; letter-spacing: 0.06em; color: var(--bo-ink-soft); }

/* The stat line gets its OWN line below the row. Inline, it truncated mid
   sentence at real browser widths. */
.bo-card__stat {
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--bo-ink-soft);
  margin: 9px 0 0;
}

/* --- Mobile ----------------------------------------------------------------
   The 74px rail costs 19% of a 390px screen, so it goes. RISE becomes a
   filled gold pill at the head of the action row: the core verb keeps its
   primacy. The row must fit ONE line. */
@media (max-width: 620px) {
  .bo-card { gap: 0; padding: 14px 15px 12px; }
  .bo-card__rail { display: none; }
  .bo-card__actions { flex-wrap: nowrap; overflow: hidden; }
  .bo-card__act { padding: 0 11px; }
}


/* ==========================================================================
   HOMEPAGE — sprint 1 shell
   ========================================================================== */
/* superseded below */

.bo-home__head { margin-bottom: 26px; }
.bo-home__eyebrow { font-family: var(--bo-font-ui); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bo-gold-ink); margin: 0 0 10px; }
.bo-home__title { font-family: var(--bo-font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; color: var(--bo-ink); margin: 0 0 12px; }
.bo-home__title span { color: var(--bo-action-gold); }
.bo-home__lead { font-family: var(--bo-font-serif); font-size: 16px; line-height: 1.55; color: var(--bo-ink-muted); margin: 0; max-width: 60ch; }
.bo-home__lead strong { color: var(--bo-ink); font-weight: 600; }
.bo-home__feed {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
}

.bo-home__empty { font-family: var(--bo-font-ui); font-size: 14px; color: var(--bo-ink-soft); }
@media (max-width: 620px) {
  .bo-home__title { font-size: 27px; letter-spacing: -0.02em; line-height: 1.10; }
  
}


/* ==========================================================================
   RISE — the celebration
   Keyframes and spark geometry transcribed verbatim from
   BEST OF Rise Control.dc.html, MD5 2feab079b5171b38a342e3d038372856.

   Five four point sparks, each on its OWN arc and delay: a burst, not a pair.
   They launch from OUTSIDE the plate, from the top edge and the two side
   edges, so they never cross the arrow, the count or the RISE label.
   ========================================================================== */

@keyframes bo-rise-fly {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-7px); }
  70%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
@keyframes bo-rise-ring {
  0%   { transform: scale(0.7); opacity: 0.7; border-width: 3px; }
  100% { transform: scale(1.85); opacity: 0; border-width: 1px; }
}
@keyframes bo-rise-ring2 {
  0%   { transform: scale(0.7); opacity: 0.4; }
  100% { transform: scale(2.3); opacity: 0; }
}
@keyframes bo-rise-num {
  0%   { transform: translateY(6px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes bo-spark-a {
  0%   { transform: translate(0,0) scale(0) rotate(0deg); opacity: 0; }
  30%  { transform: translate(-9px,-9px) scale(1.15) rotate(40deg); opacity: 1; }
  100% { transform: translate(-20px,-22px) scale(0.3) rotate(120deg); opacity: 0; }
}
@keyframes bo-spark-b {
  0%   { transform: translate(0,0) scale(0) rotate(0deg); opacity: 0; }
  30%  { transform: translate(9px,-9px) scale(1.05) rotate(-30deg); opacity: 1; }
  100% { transform: translate(20px,-22px) scale(0.28) rotate(-110deg); opacity: 0; }
}
@keyframes bo-spark-c {
  0%   { transform: translate(0,0) scale(0) rotate(0deg); opacity: 0; }
  32%  { transform: translate(-8px,4px) scale(0.9) rotate(60deg); opacity: 0.95; }
  100% { transform: translate(-18px,12px) scale(0.24) rotate(150deg); opacity: 0; }
}
@keyframes bo-spark-d {
  0%   { transform: translate(0,0) scale(0) rotate(0deg); opacity: 0; }
  32%  { transform: translate(8px,4px) scale(0.85) rotate(-50deg); opacity: 0.9; }
  100% { transform: translate(18px,12px) scale(0.22) rotate(-140deg); opacity: 0; }
}
@keyframes bo-spark-e {
  0%   { transform: translate(0,0) scale(0); opacity: 0; }
  35%  { transform: translate(0,-11px) scale(1.3) rotate(20deg); opacity: 1; }
  100% { transform: translate(0,-26px) scale(0.28) rotate(80deg); opacity: 0; }
}
.bo-card__rise:active {
  transform: scale(0.95);
}

.bo-card.is-risen .bo-card__rise-label {
  color: #FFFFFF;
}


/* Arrow flies, count rises. Fired by adding .is-bursting. */
.bo-card__rise.is-bursting svg { animation: bo-rise-fly 520ms cubic-bezier(0.3,-0.3,0.5,1.4) forwards; }
.bo-card__rise.is-bursting .bo-card__rise-count { animation: bo-rise-num 300ms ease forwards; }

/* Two expanding rings. */
.bo-card__ring, .bo-card__ring2 {
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  pointer-events: none;
}
.bo-card__ring  { border: 3px solid #FABD12; animation: bo-rise-ring 680ms cubic-bezier(0.2,0.7,0.3,1) forwards; }
.bo-card__ring2 { border: 1.5px solid #EDC550; animation: bo-rise-ring2 900ms cubic-bezier(0.2,0.7,0.3,1) 90ms forwards; }

/* Four point sparks. */
.bo-card__spark {
  position: absolute;
  pointer-events: none;
  clip-path: polygon(50% 0,58% 38%,72% 28%,66% 44%,100% 50%,66% 56%,72% 72%,58% 62%,50% 100%,42% 62%,28% 72%,34% 56%,0 50%,34% 44%,28% 28%,42% 38%);
}
.bo-card__spark--e { width:12px; height:12px; left:calc(50% - 6px); top:-9px;            background:#FABD12; animation: bo-spark-e 760ms cubic-bezier(0.2,0.6,0.3,1) forwards; }
.bo-card__spark--a { width:10px; height:10px; left:-3px;             top:-6px;            background:#FABD12; animation: bo-spark-a 820ms cubic-bezier(0.2,0.6,0.3,1) 40ms forwards; }
.bo-card__spark--b { width:10px; height:10px; left:calc(100% - 7px); top:-6px;            background:#EDC550; animation: bo-spark-b 840ms cubic-bezier(0.2,0.6,0.3,1) 70ms forwards; }
.bo-card__spark--c { width:8px;  height:8px;  left:-6px;             top:46%;             background:#EDC550; animation: bo-spark-c 900ms cubic-bezier(0.2,0.6,0.3,1) 130ms forwards; }
.bo-card__spark--d { width:8px;  height:8px;  left:calc(100% - 2px); top:46%;             background:#FABD12; animation: bo-spark-d 880ms cubic-bezier(0.2,0.6,0.3,1) 170ms forwards; }

/* The thank you line under the plate. */
.bo-card__thanks {
  font-family: var(--bo-font-ui);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #B45309;
  white-space: nowrap;
  animation: bo-rise-num 320ms ease forwards;
}


/* ==========================================================================
   HOMEPAGE — feed grid, filters, composer, mosaic, sentinel
   ========================================================================== */

/* Feed grid: minmax(0,1fr) 340px, gap 26px, align-items start.
   BOTH columns share the container's top padding. Do not apply a top margin
   to one column only: that caused a real misalignment bug. */
.bo-home__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bo-rail-width);
  gap: var(--bo-grid-gap);
  align-items: start;
}
/* CODEA-SPRINT-06 §3c: 1120px, matching Shell - Right rail's own stated
   breakpoint ("hides below 1120px of shell width") -- this used to be
   1000px here AND, redundantly, 900px again further down (removed there;
   see that comment). A class on the wrapper, not an inline style, so the
   media query is never fighting a higher-specificity inline rule. */
@media (max-width: 1120px) {
  .bo-home__grid { grid-template-columns: minmax(0, 1fr); }
  .bo-home__rail { display: none; }
}

/* --- Today's edition band -------------------------------------------------- */
/* superseded: the design declares only background:#FBFAF7 here */

/* Eleven tile mosaic. Rank 1 takes the two span hero. */
@media (max-width: 900px) { .bo-mosaic { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) {
  .bo-mosaic { grid-template-columns: minmax(0,1fr); }
  }
.bo-filters {
  font-family: var(--bo-font-ui);
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
  margin-bottom: 0;
}

.bo-filters::-webkit-scrollbar { display: none; }
.bo-filter {
  scroll-snap-align: start;
  flex-shrink: 0;
  font-family: var(--bo-font-ui);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #EDE9E0;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 12.5px;
  font-weight: 600;
  color: #4A5260;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 140ms ease;
}
.bo-filter:hover { border-color: var(--bo-action-gold); }
.bo-filter.is-active {
  /* GOLD TINT, not solid ink. The Filter Row component exists precisely
     because this active colour drifted when it was hand rolled in three
     separate places, which is exactly what I then did. */
  background: #FFF8E7;
  border-color: #FABD12;
  color: #B45309;
  font-weight: 700;
}

/* --- Composer --------------------------------------------------------------
   Input and button are ONE FLUSH CONTROL. No gap, shared radius, no right
   border on the input. They must not read as two separate controls. */
.bo-composer__input:focus { border-color: var(--bo-action-gold); }
.bo-composer__post:hover {
  background: #BD8810;
  border-color: var(--bo-action-gold-hover);
}

.bo-composer__control {
  gap: 0;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.bo-composer__input + .bo-composer__post { margin-left: 0; }
.bo-composer__cat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11,31,58,0.08);
}

.bo-composer__hint,
.bo-composer__guest { color: var(--bo-gold-ink); font-weight: 600; }

/* --- Load more sentinel ----------------------------------------------------
   Solid action gold, radius 12px, min-height 76px. Both the observer target
   and the manual fallback. */
.bo-sentinel {
  /* Quiet by design. If a reader ever SEES this, the prefetch was too slow.
     A prominent button teaches people that tapping is how you continue, which
     is the behaviour the spec rejected. */
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  margin: 6px 0 0;
  padding: 0;
  box-shadow: none;
}
.bo-sentinel:hover .bo-sentinel__dots span { background: var(--bo-action-gold); }
.bo-sentinel__label { font-family: var(--bo-font-display); font-size: 15px; font-weight: 800; }
.bo-sentinel__arrow { animation: bo-nudge 1.8s ease-in-out infinite; }
.bo-sentinel__sub { font-family: var(--bo-font-ui); font-size: 11.5px; font-weight: 600; opacity: 0.78; }

/* --- Section head ---------------------------------------------------------- */


/* ==========================================================================
   MASTHEAD and RAIL
   ========================================================================== */


.bo-masthead__gold { color: var(--bo-action-gold); }
/* This line is load bearing: it is the platform's integrity claim, stated
   before anything else. */
@media (max-width: 620px) {
    
}

/* --- Rail ------------------------------------------------------------------
   Anything that must be seen daily belongs here or in the header, never below
   the feed: infinite scroll makes below-feed content unreachable.
   ⛔⛔ MARK, 16 Sep 2026, THIRD TIME BRIEFED — this rule and the
   @media (max-width:1120px) hide above both target .bo-home__rail at
   equal specificity, so whichever comes LATER in source order always
   won, regardless of viewport. This one is later, so the hide was dead
   at every width including 390px — measured live, not assumed: display
   read "flex" here on a real page at 390px, well below the 1120px
   threshold. Scoped to min-width so the two rules are mutually
   exclusive by width instead of fighting over source order. */
@media (min-width: 1121px) {
.bo-home__rail { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 14px; }
}
.bo-rail-mod {
  background: #FFFFFF;
  border: 1px solid #EDE9E0;
  border-radius: 4px;
  padding: 16px;
}
.bo-rail-mod--navy {
  background: var(--bo-navy);
  border-color: var(--bo-navy);
  border-left: 3px solid var(--bo-action-gold);
  animation: bo-card-breathe 3.6s ease-in-out infinite;
}
.bo-rail-mod__head {
  font-family: var(--bo-font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bo-ink);
  margin: 0 0 7px;
}
.bo-rail-mod--navy .bo-rail-mod__head { color: #FFFFFF; }
.bo-rail-mod__copy {
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bo-ink-muted);
  margin: 0 0 12px;
}
.bo-rail-mod--navy .bo-rail-mod__copy { color: rgba(255,255,255,0.82); }
.bo-rail-mod__cta {
  width: 100%;
  min-height: var(--bo-hit-target);
  border: none;
  border-radius: var(--bo-radius-control);
  background: var(--bo-action-gold);
  font-family: var(--bo-font-display);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--bo-ink);
  cursor: pointer;
}
.bo-rail-mod__cta:hover { background: var(--bo-action-gold-hover); }
.bo-rail-mod__link {
  font-family: var(--bo-font-ui);
  font-size: 12px;
  font-weight: 700;
  color: #B45309;
  text-decoration: none;
  display: inline-block;
  margin-top: 11px;
}

.bo-rail-mod__field { display: flex; align-items: stretch; }
.bo-rail-mod__field input {
  flex: 1;
  min-width: 0;
  min-height: var(--bo-hit-target);
  padding: 0 12px;
  border: 1px solid var(--bo-border);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: var(--bo-surface-sunk);
  font-family: var(--bo-font-mono, var(--bo-font-ui));
  font-size: 12.5px;
  color: var(--bo-ink);
  outline: none;
}
.bo-rail-mod__field button {
  flex-shrink: 0;
  min-height: var(--bo-hit-target);
  padding: 0 15px;
  border: 1px solid var(--bo-navy);
  border-radius: 0 10px 10px 0;
  background: var(--bo-navy);
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
}
.bo-rail-mod__field button:hover { background: var(--bo-navy-hover); }

/* Homepage container no longer carries its own head: the masthead does. */



/* ==========================================================================
   BROWSE STRIP — masked auto scrolling mood ticker, 46s linear
   ========================================================================== */
.bo-browse { background: var(--bo-surface); border-bottom: 1px solid var(--bo-border-strong); }
.bo-browse__inner { max-width: var(--bo-content-width); margin: 0 auto; padding: 13px var(--bo-gutter) 16px; }
.bo-browse__eyebrow {
  font-family: var(--bo-font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  color: var(--bo-ink-faint);
  margin: 0 0 9px;
}
.bo-browse__mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 42px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 42px), transparent 100%);
}
.bo-browse__track {
  display: flex;
  gap: 8px;
  width: max-content;
  animation: bo-ticker 46s linear infinite;
}
/* Innovation, not in the design: pausing on hover lets a reader actually
   read and click a pill instead of chasing it. */
.bo-browse__mask:hover .bo-browse__track,
.bo-browse__mask:focus-within .bo-browse__track { animation-play-state: paused; }

.bo-mood--amber   .bo-mood__dot { background: var(--bo-amber-ink); }
.bo-mood--purple  .bo-mood__dot { background: var(--bo-purple-ink); }
.bo-mood--indigo  .bo-mood__dot { background: var(--bo-indigo-ink); }
.bo-mood--gold    .bo-mood__dot { background: var(--bo-action-gold); }
.bo-mood--teal    .bo-mood__dot { background: var(--bo-teal-ink); }
.bo-mood--blue    .bo-mood__dot { background: var(--bo-blue-ink); }
.bo-mood--rose    .bo-mood__dot { background: var(--bo-rose-ink); }
.bo-mood--green   .bo-mood__dot { background: var(--bo-live-green); }

/* ==========================================================================
   ENGAGEMENT PROMPTS
   One per batch, never two consecutively. All white panels were rejected in
   design: they were invisible against the feed, so every family is tinted.
   ========================================================================== */
.bo-prompt {
  border-radius: 4px;
  padding: 17px 19px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--bo-border);
}
.bo-prompt--indigo { background: var(--bo-indigo-panel); border-color: var(--bo-indigo-border); }
.bo-prompt--gold   { background: var(--bo-gold-panel);   border-color: var(--bo-gold-tint-border); }
.bo-prompt--green  { background: var(--bo-green-tint-alt); border-color: var(--bo-green-border); }

.bo-prompt__eyebrow {
  font-family: var(--bo-font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  margin: 0 0 7px;
}
.bo-prompt--indigo .bo-prompt__eyebrow { color: var(--bo-indigo-ink); }
.bo-prompt--gold   .bo-prompt__eyebrow { color: var(--bo-gold-ink-deep); }
.bo-prompt--green  .bo-prompt__eyebrow { color: var(--bo-live-green); }

.bo-prompt__head {
  font-family: var(--bo-font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--bo-ink);
  margin: 0 0 6px;
}
.bo-prompt__copy {
  font-family: var(--bo-font-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bo-ink-muted);
  margin: 0 0 13px;
  max-width: 56ch;
}
.bo-prompt__cta {
  min-height: var(--bo-hit-target);
  padding: 0 18px;
  border: none;
  border-radius: var(--bo-radius-control);
  background: var(--bo-action-gold);
  font-family: var(--bo-font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--bo-ink);
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}
.bo-prompt__cta:hover { background: var(--bo-action-gold-hover); transform: translateY(-1px); }
.bo-prompt__cta:active { transform: translateY(0); }
.bo-tile {
  transition: box-shadow 170ms ease, transform 170ms ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 4px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  padding: 16px;
  text-decoration: none;
  min-height: 0;
}

.bo-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: inherit;
  background-size: cover;
  background-position: center;
  transition: transform 420ms cubic-bezier(0.2,0.7,0.3,1);
}
.bo-tile:hover {
  box-shadow: 0 18px 40px rgba(11,31,58,0.28);
  transform: translateY(-3px);
}

.bo-tile:hover::before { transform: scale(1.045); }
.bo-tile__title {
  transition: color 180ms ease;
  font-family: var(--bo-font-display);
  font-weight: 800;
  line-height: 1.2;
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(6,16,32,0.5);
  margin: 0;
}

.bo-tile:hover .bo-tile__title { color: var(--bo-credential-gold); }

/* Every focusable thing keeps a visible ring, including on dark surfaces. */
.bo-rail-mod--navy :focus-visible { outline-color: var(--bo-credential-gold); }

/* Respect reduced motion everywhere, including the ticker and the breathe. */
@media (prefers-reduced-motion: reduce) {
  .bo-browse__track,
  .bo-rail-mod--navy,
  .bo-sentinel__arrow { animation: none !important; }
  .bo-card:hover, .bo-mood:hover, .bo-prompt__cta:hover { transform: none; }
  .bo-tile:hover::before { transform: none; }
}


/* ==========================================================================
   MOSAIC — CORRECTED against BEST OF Homepage - v2 (Hub).dc.html

   I had five values wrong. Recorded so the mistake is visible, not buried:
     gap        was 10px      design says 12px
     radius     4px           correct
     padding    was 14px      design says 16px
     kind badge was 9px/8px   design says 9.5px, 0.07em, 6px radius, 4px 10px
     title      was 15px/22px design assigns size BY RANK, 22/17/16/15/14px
     gradient   was 92/55/5   design says rgba(6,16,32) at 0.90 / 0.34 / 0.04
     kind colour was ink      design colours it by content family
   Heights are now per tile, 300/210/190/168px, not a single min-height.
   ========================================================================== */
.bo-mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.bo-tile__kind {
  position: absolute;
  top: 13px;
  left: 13px;
  font-family: var(--bo-font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  background: rgba(255,255,255,0.94);
  border-radius: 6px;
  padding: 4px 10px;
}
.bo-edition__lead {
  font-family: var(--bo-font-ui);
  font-size: 14px;
  line-height: 1.5;
  color: #5F6878;
  margin: 0 0 12px;
  max-width: 74ch;
}


@media (max-width: 900px) {
  .bo-mosaic { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bo-tile { height: auto !important; min-height: 190px; }
  .bo-tile[style*="span 2"] { grid-column: span 2 !important; }
}
@media (max-width: 560px) {
  .bo-mosaic { grid-template-columns: minmax(0,1fr); }
  .bo-tile { grid-column: span 1 !important; min-height: 176px; }
}
.bo-home__main { min-width: 0; }

/* Prompts and composer share the column width so the left edge is one line
   all the way down. Nothing inside the feed should be narrower than a card. */
.bo-prompt,
.bo-composer,
.bo-sentinel { width: 100%; }
/* ⚠ Found fixing the risen-state amber: hover was gold, and the icon's own
   color rule below hard-set a dark ink that would have gone invisible the
   moment the button's ground became solid #080C0F ink above — icon on ink. */
.bo-card.is-risen .bo-card__rise:hover { background: #1B2126; }
.bo-card.is-risen .bo-card__rise svg { color: #FFFFFF; }

/* Save carries its own label state: SAVE, then SAVED — ink, not the
   gold/brown family, matching the row's own "the ribbon fills ink, never
   the accent brown" rule. */
.bo-card__save[aria-pressed="true"] .bo-card__save-label { color: #080C0F; }
.bo-edition__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 24px 4px;
}


.bo-edition__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.bo-edition__title {
  border-left: 3px solid #FABD12;
  padding-left: 13px;
  margin: 0;
  font-family: var(--bo-font-display);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -0.018em;
  color: var(--bo-ink);
}
.bo-edition__title span { color: #96700D; }

/* The date sits behind a hairline divider, in Archivo caps tracking. */
.bo-edition__date {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--bo-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  color: #5F6878;
  border-left: 1px solid #EDE9E0;
  padding-left: 12px;
}
.bo-edition__spacer { flex: 1 1 auto; }

.bo-edition__share {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid #EDE9E0;
  border-radius: 999px;
  background: #FFFFFF;
  color: #10213A;
  font-family: var(--bo-font-display);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.bo-edition__share:hover { background: #FFF8E7; border-color: #E4A93C; }

.bo-edition__more {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--bo-font-ui);
  font-size: 13.5px;
  font-weight: 700;
  color: #B45309;
  text-decoration: none;
}
.bo-edition__more:hover { color: #92400E; }

/* --- Tile meta row ---------------------------------------------------------
   Sits under the title, gold for the rise figure and light grey for the rest.
   Rise is absent until the ledger exists: nothing here is invented. */
.bo-tile__meta {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 8px;
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  color: #EDC550;
  flex-wrap: wrap;
}
.bo-tile__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #E9EDF2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bo-tile__meta-text {
  color: #E9EDF2;
  font-weight: 600;
}


@media (max-width: 700px) {
  .bo-edition__title { font-size: 21px; }
  .bo-edition__share { display: none; }
}


/* ==========================================================================
   TILE DATA POINTS — rise, replies, rating, trailing meta, and the big pill
   Transcribed from BEST OF Homepage - v2 (Hub).dc.html
   ========================================================================== */

/* The rise figure is the only gold item in the row. Everything else is the
   lighter #E9EDF2 so the number people can move is the one that stands out. */
.bo-tile__rise {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #EDC550;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The big pill: a score move on SPOTLIGHT, a count on LIST.
   Sits above the title, aligned left, on a dark plate with a gold keyline. */
.bo-tile__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  white-space: nowrap;
  margin-bottom: 9px;
  padding: 6px 12px;
  background: rgba(6,16,32,0.78);
  border: 1px solid rgba(250,189,18,0.55);
  border-radius: 999px;
}
.bo-tile__pill-value {
  font-family: var(--bo-font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.bo-tile__pill-label {
  font-family: var(--bo-font-display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: #EDC550;
}
.bo-composer {
  background: #FFF8E7;
  border: 1px solid #F3E5C9;
  border-left: 3px solid #FABD12;
  border-radius: 0 14px 14px 0;
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: 0 4px 20px rgba(184,136,16,0.10);
}

.bo-composer__top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 11px;
  flex-wrap: wrap;
}

.bo-composer__intro {
  min-width: 0;
  flex: 1 1 340px;
}

.bo-composer__head {
  font-family: var(--bo-font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: #10213A;
  margin: 0 0 4px;
}

.bo-composer__sub {
  font-family: var(--bo-font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: #5F6878;
  margin: 0;
  max-width: 62ch;
}





.bo-composer__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  min-height: 44px;
  padding: 0 6px 0 14px;
  border: 1px solid #EDE9E0;
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: #FFFFFF;
  margin: 0;
  transition: min-height 160ms ease, border-color 160ms ease;
}

.bo-composer__field:focus-within {
  border-color: var(--bo-action-gold);
  min-height: 86px;
}

/* field-sizing does the growth in CSS where supported; the JS fallback
     handles the rest. Both capped at 8 lines, then scroll. */
.bo-composer__input {
  field-sizing: content;
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  overflow-y: hidden;
  font-family: var(--bo-font-ui);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bo-ink);
  padding: 11px 0 12px;
  min-height: 1.55em;
  max-height: calc(1.55em * 8 + 24px);
}

.bo-composer__input::placeholder { color: var(--bo-ink-faint); }
.bo-composer__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 10px;
  border-left: 1px solid #EFE7D8;
  margin-left: 4px;
  align-self: flex-start;
  margin-top: 4px;
}

.bo-composer__tool {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: none;
  color: #8A5122;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.bo-composer__tool:hover { background: var(--bo-gold-tint); color: var(--bo-gold-ink); }
.bo-composer__post {
  flex-shrink: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border: 1px solid #FABD12;
  border-radius: 0 10px 10px 0;
  background: #FABD12;
  font-family: var(--bo-font-ui);
  font-size: 13px;
  font-weight: 800;
  color: #10213A;
  cursor: pointer;
  transition: background 160ms ease;
  margin: 0;
  border-left: none;
  align-self: flex-start;
  height: 44px;
}

.bo-composer__cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 16px 0 0;
  margin-top: 11px;
}

.bo-composer__cat {
  /* 88px, not 104. Radius 12px. Gap 9px. Padding 12px 9px.
     Background is ALWAYS white: the design never tints the active card. */
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 9px;
  border: 1px solid var(--bo-border);
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.bo-composer__cat-icon { display: inline-flex; }
.bo-composer__cat-label {
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: #10213A;
  text-align: center;
  line-height: 1.3;
}
.bo-composer__more {
  margin-top: 11px;
  border: 1px dashed #D9C48A;
  border-radius: 12px;
  background: transparent;
}

.bo-composer__more-head {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
  color: #8A7E68;
}

.bo-composer__more-head::-webkit-details-marker { display: none; }
.bo-composer__more-icons {
  display: inline-flex;
  gap: 11px;
  flex-shrink: 0;
  color: #A79B84;
}

.bo-composer__more-text {
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  color: #6B5F49;
  min-width: 0;
  flex: 1;
  text-align: left;
  font-weight: 700;
}

.bo-composer__more-text strong {
  color: #6B5F49;
  font-weight: 700;
}

.bo-composer__more-chev {
  margin-left: auto;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-right: 2px solid var(--bo-ink-faint);
  border-bottom: 2px solid var(--bo-ink-faint);
  transform: none;
  transition: transform 180ms ease;
  border: none;
}

.bo-composer__more[open] .bo-composer__more-chev {
  transform: rotate(180deg);
}

.bo-composer__more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  padding: 4px 18px 18px;
}
.bo-composer__more-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--bo-hit-target);
  padding: 0 14px;
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-control);
  background: #FFFFFF;
  font-family: var(--bo-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bo-ink);
  cursor: pointer;
  text-align: left;
}
.bo-composer__more-item:hover { border-color: var(--bo-action-gold); }

/* --- Footer lines ---------------------------------------------------------- */
.bo-composer__unanswered {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--bo-font-ui);
  font-size: 14px;
  color: var(--bo-ink);
  margin: 16px 0 0;
}
.bo-composer__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--bo-live-green); flex-shrink: 0; }
.bo-composer__unanswered a { color: var(--bo-gold-ink); font-weight: 600; }
.bo-composer__guest {
  font-family: var(--bo-font-ui);
  font-size: 14px;
  color: var(--bo-ink-muted);
  margin: 8px 0 0;
}
.bo-composer__guest a { color: var(--bo-gold-ink); font-weight: 800; text-decoration: underline; }

@media (max-width: 640px) {
  .bo-composer { padding: 18px 16px 16px; }
  .bo-composer__head { font-size: 18px; }

  .bo-composer__cats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* ==========================================================================
   CARD VARIANTS — rank chip with movement, poll rows, quoted reply
   Transcribed from BEST OF Feed Card.dc.html and BEST OF Rise Control.dc.html
   ========================================================================== */

/* --- Rail: rank, period, movement ------------------------------------------ */
.bo-card__rankwrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bo-card__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #F4F1EA;
  border: 1px solid #EDE9E0;
  font-family: var(--bo-font-display);
  font-size: 11.5px;
  font-weight: 800;
  color: #10213A;
}
.bo-card__rank-period {
  font-family: var(--bo-font-display);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #5F6878;
}
/* Up is live green. Down is gold ink, never red: a fall on this board is not
   a failure, and colouring it as one would be a lie about what happened. */
.bo-card__move {
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  color: #2F6B45;
  white-space: nowrap;
}
.bo-card__move.is-down { color: #B45309; }

/* --- Poll ------------------------------------------------------------------
   The fill bar sits BEHIND the label, not beside it, so each row reads as one
   object rather than a bar with a caption. */
.bo-card__poll { display: flex; flex-direction: column; gap: 7px; margin-bottom: 11px; }
.bo-card__poll-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #EDE9E0;
  border-radius: 10px;
  background: #FFFFFF;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease;
}
.bo-card__poll-row:hover { border-color: #FABD12; }
.bo-card__poll-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #FFF8E7;
  transition: width 420ms cubic-bezier(0.2,0.7,0.3,1);
}
.bo-card__poll-label {
  position: relative;
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: #10213A;
}
.bo-card__poll-pct {
  position: relative;
  font-family: var(--bo-font-ui);
  font-size: 12px;
  font-weight: 800;
  color: #B45309;
  font-variant-numeric: tabular-nums;
}

/* --- Quoted reply ----------------------------------------------------------
   This is the platform's equivalent of media: it is what makes a text only
   card read as substantial. It gets the same visual care as imagery. */
.bo-card__reply {
  display: flex;
  gap: 10px;
  padding: 11px 12px;
  background: #FBFAF7;
  border-left: 2px solid #FABD12;
  border-radius: 0 4px 4px 0;
  margin-bottom: 11px;
}
.bo-card__reply-avatar {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 999px;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bo-font-ui);
  font-size: 11px;
  font-weight: 800;
}
.bo-card__reply-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bo-card__reply-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bo-card__reply-name {
  font-family: var(--bo-font-ui);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  color: #10213A;
}
.bo-card__reply-name:hover { color: #B45309; }
.bo-card__reply-label {
  font-family: var(--bo-font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #5F6878;
}
.bo-card__reply-standing {
  font-family: var(--bo-font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #312E81;
  background: #EEF0FE;
  border-radius: 999px;
  padding: 3px 8px;
}
.bo-card__reply-accepted {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--bo-font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  background: #080C0F;
  border-radius: 999px;
  padding: 3px 9px;
}
.bo-card__reply-text {
  display: block;
  font-family: var(--bo-font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: #10213A;
}
.bo-card__reply-stat { font-family: var(--bo-font-ui); font-size: 11px; color: #5F6878; }


/* ==========================================================================
   RAIL MODULE INTERNALS
   ========================================================================== */
.bo-rail-mod__empty {
  font-family: var(--bo-font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--bo-ink-faint);
  margin: 0;
}



.bo-rail-mod__cta-link:hover { background: #BD8810; }


/* --- Rising now rows: DELETED, not just disconnected -----------------------
   CODEA-SPRINT-06, 15 Sep 2026. This styled `.bo-rail-row`, the same class
   BOG_Rail::render() uses for every real navigation row -- purely a name
   collision with the dead-mock `bestof_rail_rising()` (functions.php,
   deleted alongside this), never an intentional shared style. It was the
   real source of the "every row reads as a card with a hairline beneath
   it" defect against the LIVE rail. See functions.php for the full note. */


/* --- Follow and Ask rows ---------------------------------------------------- */
.bo-rail-person {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #EAE5DA;
}
.bo-rail-person:last-of-type { border-bottom: none; }
.bo-rail-person__av {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bo-font-ui);
  font-size: 13px;
  font-weight: 800;
}
.bo-rail-person__av.is-round {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 12.5px;
}

.bo-rail-person__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bo-rail-person__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bo-rail-person__name {
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: #10213A;
  text-decoration: none;
}
.bo-rail-person__name:hover { color: #B45309; }
.bo-rail-person__kind {
  font-family: var(--bo-font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #5F6878;
}
.bo-rail-person__why { font-family: var(--bo-font-ui); font-size: 11px; color: #5F6878; line-height: 1.4; }

.bo-rail-follow {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #E4A93C;
  border-radius: 999px;
  background: #FFF8E7;
  color: #8A5122;
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.bo-rail-follow:hover { background: #FABD12; color: #10213A; border-color: #FABD12; }
.bo-rail-follow[aria-pressed="true"] { background: #FABD12; color: #10213A; border-color: #FABD12; }

.bo-rail-ask {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #D8DEE7;
  border-radius: 999px;
  background: #FFFFFF;
  color: #10213A;
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease;
}
.bo-rail-ask:hover { background: #FBFAF7; }


/* ==========================================================================
   BELOW THE FEED
   ========================================================================== */

/* --- Browse everything ------------------------------------------------------ */


.bo-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.bo-cat {
  display: flex;
  gap: 11px;
  align-items: center;
  min-height: 60px;
  padding: 11px 13px;
  border: 1px solid #EDE9E0;
  background: #FFFFFF;
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
/* Each category hovers into its OWN colour, so the grid teaches the palette
   as you move through it rather than reading as twelve identical boxes. */
.bo-cat:hover {
  border-color: var(--cat);
  background: var(--cat-tint);
  transform: translateY(-1px);
}
.bo-cat__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--cat-tint);
}
.bo-cat__body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bo-cat__label { font-family: var(--bo-font-ui); font-size: 13px; font-weight: 700; color: #10213A; }

/* --- Daily edition band ----------------------------------------------------- */
.bo-emailband { background: #080C0F; }

.bo-emailband__copy { flex: 1 1 400px; min-width: 0; }
.bo-emailband__eyebrow {
  font-family: var(--bo-font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  color: #EDC550;
  margin: 0 0 8px;
}
.bo-emailband__head {
  font-family: var(--bo-font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0 0 7px;
}
.bo-emailband__sub {
  font-family: var(--bo-font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: #C6CFDD;
  margin: 0;
  max-width: 52ch;
}
.bo-emailband__form { flex: 1 1 320px; min-width: 0; display: flex; gap: 9px; flex-wrap: wrap; }
.bo-emailband__form input {
  flex: 1 1 190px;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #FFFFFF;
  font-family: var(--bo-font-ui);
  font-size: 14px;
  outline: none;
}
.bo-emailband__form input::placeholder { color: rgba(255,255,255,0.45); }
.bo-emailband__form input:focus { border-color: var(--bo-credential-gold); }
.bo-emailband__form button {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 48px;
  padding: 0 22px;
  border: none;
  border-radius: 999px;
  background: #FABD12;
  color: #10213A;
  font-family: var(--bo-font-display);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.bo-emailband__form button:hover { background: #BD8810; }

/* --- Owner band -------------------------------------------------------------- */


.bo-owner__copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.bo-owner__eyebrow {
  font-family: var(--bo-font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  color: #B45309;
  margin: 0 0 9px;
}
.bo-owner__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bo-owner__cta {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 999px;
  background: #FABD12;
  color: #10213A;
  font-family: var(--bo-font-display);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.bo-owner__cta:hover { background: #BD8810; }
.bo-owner__ghost {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border: 1px solid #EDE9E0;
  border-radius: 999px;
  background: #FFFFFF;
  color: #10213A;
  font-family: var(--bo-font-ui);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.bo-owner__ghost:hover { background: #FBFAF7; }
.bo-owner__panel {
  min-width: 0;
  background: #FAF7F1;
  border: 1px solid #EFE7D8;
  border-radius: 12px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.bo-owner__panel-head {
  font-family: var(--bo-font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: #5F6878;
  margin: 0 0 12px;
}
.bo-owner__item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid #EAE5DA;
}
.bo-owner__item:last-child { border-bottom: none; }
.bo-owner__item svg { flex-shrink: 0; margin-top: 2px; }


/* ==========================================================================
   HERO: slim strip and dismiss
   ========================================================================== */
.bo-slim { background: var(--bo-surface); border-bottom: 1px solid var(--bo-border-strong); }
.bo-slim__inner {
  max-width: var(--bo-content-width);
  margin: 0 auto;
  padding: 11px var(--bo-gutter);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bo-slim__glyph { color: var(--bo-action-gold); display: inline-flex; }
.bo-slim__hello { font-family: var(--bo-font-display); font-size: 14px; font-weight: 800; color: var(--bo-ink); }
.bo-slim__count { font-family: var(--bo-font-ui); font-size: 12.5px; color: var(--bo-ink-soft); }
.bo-slim__restore {
  margin-left: auto;
  min-height: var(--bo-hit-target);
  padding: 0 15px;
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-pill);
  background: var(--bo-surface);
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bo-ink);
  cursor: pointer;
}
.bo-slim__restore:hover { border-color: var(--bo-action-gold); }
.bo-masthead__dismiss {
  position: absolute;
  right: 18px;
  top: 16px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #EDE9E0;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 18px;
  line-height: 1;
  color: #5F6878;
  cursor: pointer;
  z-index: 9;
}

.bo-masthead__dismiss:hover {
  border-color: #FABD12;
  color: var(--bo-ink);
  background: #FBFAF7;
}


/* ==========================================================================
   REASON CHIPS AND THE LADDER
   ========================================================================== */
.bo-card__reasons {
  background: var(--bo-gold-panel);
  border: 1px solid var(--bo-gold-tint-border);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 11px;
}
.bo-card__reasons-head {
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bo-gold-ink-deep);
  margin: 0 0 9px;
}
.bo-card__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bo-card__chip {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--bo-gold-tint-border);
  border-radius: var(--bo-radius-pill);
  background: #FFFFFF;
  font-family: var(--bo-font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--bo-gold-ink-deep);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.bo-card__chip:hover { background: var(--bo-gold-tint); border-color: var(--bo-action-gold); }

/* The ladder. Green confirmation, then Send first. */
.bo-card__ladder {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bo-green-tint);
  border: 1px solid var(--bo-green-border);
  border-radius: 4px;
  padding: 10px 13px;
  margin-bottom: 11px;
}
.bo-card__ladder-done {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--bo-font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--bo-live-green);
}
.bo-card__ladder-gap { flex: 1; }
/* Send is the ONLY filled control here: a forward recruits, a follow retains. */
.bo-card__ladder-send {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: none;
  border-radius: var(--bo-radius-pill);
  background: var(--bo-action-gold);
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--bo-ink);
  cursor: pointer;
  white-space: nowrap;
}
.bo-card__ladder-send:hover { background: var(--bo-action-gold-hover); }
.bo-card__ladder-ghost {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--bo-border);
  border-radius: var(--bo-radius-pill);
  background: #FFFFFF;
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bo-ink);
  cursor: pointer;
  white-space: nowrap;
}
.bo-card__ladder-ghost:hover { border-color: var(--bo-action-gold); }
.bo-card__ladder-link {
  border: none;
  background: none;
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bo-gold-ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* ==========================================================================
   MOBILE CUT
   Below ~900px serve the mobile design rather than squeezing the desktop one:
   the rail cannot survive the squeeze, and stacking it below an infinite feed
   hides it entirely.
   ========================================================================== */
@media (max-width: 900px) {
  /* .bo-home__grid / .bo-home__rail: moved to the 1120px rule above,
     CODEA-SPRINT-06 §3c -- 900px was a redundant duplicate of it. */

  .bo-masthead__inner,
  .bo-edition__inner,
  .bo-browse__inner,
  .bo-browse-all__inner,
  .bo-emailband__inner,
  
}

@media (max-width: 620px) {
  /* The 74px rail costs 19% of a 390px screen, so it goes entirely.
     RISE becomes a filled gold pill at the head of the action row: the core
     verb keeps its primacy. Reddit made the same call for the same reason. */
  .bo-card { border-radius: 0; border-left-width: 0; border-right-width: 0; padding: 14px 14px 12px 13px; }
  .bo-card__rail { display: none; }
  .bo-card__actions { gap: 5px; flex-wrap: nowrap; }
  .bo-card__act { padding: 0 10px; font-size: 12px; }
  .bo-card__act--primary { padding: 0 11px; }
  /* Send is icon only until used: the paper plane is idiomatic enough on
     mobile to stand alone, and it buys the width that keeps the row one line. */
  .bo-card__act[data-bo-send] { padding: 0 11px; font-size: 0; gap: 0; }
  .bo-card__act[data-bo-send] svg { font-size: 14px; }
  /* Share folds into the overflow menu, which moves to the card top right. */
  .bo-card__act[data-bo-share] { display: none; }
  .bo-card__act--more { position: absolute; right: 0; top: -2px; border: none; }
  .bo-card__body { position: relative; }
  .bo-card__meta { padding-right: 40px; }

  .bo-mosaic { gap: 8px; }
  .bo-composer { padding: 16px 14px 14px; }
  .bo-composer__control { flex-wrap: wrap; }
  .bo-composer__post { border-radius: 10px; width: 100%; margin-top: 8px; justify-content: center; }
  .bo-composer__field { border-right: 1px solid var(--bo-border); border-radius: 10px; }
  .bo-emailband__form button { width: 100%; }
}


/* ==========================================================================
   FILTER BLOCK — live banner, tabs, mood ticker
   ========================================================================== */
.bo-filterblock { padding: 2px 0 12px; }
.bo-filterblock__live { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.bo-livechip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bo-font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #2F6B45;
  background: #F1F6F1;
  border: 1px solid #D2E2D4;
  border-radius: 999px;
  padding: 4px 10px;
}
.bo-livechip__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #2F6B45;
  display: inline-block;
  animation: bo-pulse 2.2s ease-in-out infinite;
}
.bo-filterblock__count { min-width: 0; font-family: var(--bo-font-ui); font-size: 12px; color: #5F6878; }

/* The second ticker, below the tabs. Tabs answer "what is new", this answers
   "what am I after". 52s here against 46s in the header strip, so the two
   never lock into step and read as one moving object. */
.bo-moodrow {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  margin-top: 9px;
  padding-top: 10px;
  border-top: 1px solid #EAE5DA;
}
.bo-moodrow__label {
  flex-shrink: 0;
  font-family: var(--bo-font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: #8A94A6;
}
.bo-moodrow__mask {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 34px), transparent 100%);
}
.bo-moodrow__track {
  display: flex;
  gap: 7px;
  width: max-content;
  animation: bo-ticker 52s linear infinite;
}
.bo-moodrow__mask:hover .bo-moodrow__track,
.bo-moodrow__mask:focus-within .bo-moodrow__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .bo-moodrow__track { animation: none !important; } }
.bo-composer__more-text span { font-weight: 500; color: #8A7E68; }
.bo-composer__more-panel {
  margin: 9px 10px 10px;
  padding: 12px 14px;
  background: #FAF7F1;
  border: 1px solid #EFE7D8;
  border-radius: 12px;
  animation: bo-fade-up 180ms ease both;
}

.bo-composer__more-panel-head {
  display: block;
  font-family: var(--bo-font-display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: #8A5122;
  margin-bottom: 9px;
}
.bo-composer__more-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.bo-composer__more-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  background: #FFFFFF;
  border: 1px solid #EDE9E0;
  border-radius: 999px;
  font-family: var(--bo-font-ui);
  font-size: 12px;
  font-weight: 600;
  color: #4A5260;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 140ms ease, background 140ms ease;
}

.bo-composer__more-pill:hover {
  border-color: #FABD12;
  background: #FFFDF6;
}

.bo-composer__more-pill svg { flex-shrink: 0; }

@media (max-width: 640px) {
  .bo-composer__control { flex-wrap: wrap; }
  .bo-composer__field { border-right: 1px solid #EDE9E0; border-radius: 10px; flex: 1 1 100%; }
  .bo-composer__post { width: 100%; margin-top: 8px; border-radius: 10px; border-left: 1px solid #FABD12; justify-content: center; }
}


/* ==========================================================================
   EDITION BAND — CORRECTED, THEN CORRECTED AGAIN

   ⛔⛔ MARK, 16 Sep 2026, THIRD TIME BRIEFED: "the background is ivory,
   not white. The design is white." The #FBFAF7 this section declared
   below (and the identical claim in tokens.css's own --bo-page-bg)
   was wrong — Mark's own direct comparison against the real design
   wins over what this comment previously asserted. Changed to
   #FFFFFF, matching --bo-page-bg's own new value, so the page stays
   ONE continuous surface rather than reintroducing the ivory this
   section's own background property alone would otherwise still
   paint even after the token changed.

   The "no border, mosaic and feed share one continuous background"
   reasoning below is UNCHANGED and still correct — only the colour was
   wrong, not the structure.
   ========================================================================== */
.bo-edition {
  background: #FFFFFF;
  border-top: none;
  border-bottom: none;
  margin-bottom: 0;
}
/* The feed column sits on the same ground, so nothing marks the join. */
.bo-home { background: #FFFFFF; }


/* ==========================================================================
   SECTION SPACING — corrected against the declared values

   Four faults, all mine:
     grid wrapper   I had 24px 24px 60px   design 16px 24px 60px
     masthead       I had the page ground  design #FFFFFF
     owner band     I had the page ground  design #FFFFFF, border-top #EDE9E0
     browse-all     border #EDE9E0         correct, kept

   ⛔⛔ THIS "ALTERNATES" REASONING IS NOW STALE — 16 Sep 2026, Mark's
   own correction ("the design is white," see the EDITION BAND section
   above): the edition/feed ground that used to be #FBFAF7 is #FFFFFF
   now too, so the masthead, edition, feed and owner band are all the
   SAME white surface. Nothing alternates any more, by design — real
   cards still supply their own contrast against it. Left as history
   for why the SPACING values above are what they are, which is still
   correct; only the colour claim in this note was ever wrong.
   ========================================================================== */

/* Masthead: white, with the dismiss control top right. */



/* The feed grid wrapper. 16px top, not 24px: the edition band above already
   ends at 4px, and the two paddings are designed to meet. */
.bo-home__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 24px 60px;
}

/* Browse everything: white, top rule. */
.bo-browse-all { background: #FFFFFF; border-top: 1px solid #EDE9E0; }
.bo-browse-all__inner { max-width: 1240px; margin: 0 auto; padding: 30px 24px; }

/* Daily edition: navy. */
.bo-emailband__inner { max-width: 1240px; margin: 0 auto; padding: 30px 24px; display: flex; gap: 22px 40px; flex-wrap: wrap; align-items: center; }

/* Owner band: white, its own lighter rule. */
.bo-owner { background: #FFFFFF; border-top: 1px solid #EDE9E0; }
.bo-owner__inner {
  /* GRID, not flex. The design's flex 1 1 460px beside flex 0 1 340px left
     ~400px of dead air in a 1240px container and let the two blocks end at
     different heights. Stretched grid columns fix both. */
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 48px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .bo-masthead__inner,
  .bo-edition__inner,
  .bo-home__inner,
  .bo-browse-all__inner,
  .bo-emailband__inner,
  .bo-owner__inner { padding-left: 16px; padding-right: 16px; }
}


/* ==========================================================================
   JOIN CARD — transcribed from the design
   Navy #080C0F, 4px radius, 18px padding. Gold eyebrow, SERIF lead line.
   ========================================================================== */
.bo-join { background: #080C0F; border-radius: 4px; padding: 18px; }
.bo-join__eyebrow {
  font-family: var(--bo-font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  color: #EDC550;
  margin: 0 0 9px;
}
/* Serif, not sans: this line is a promise to a person, not UI chrome. */
.bo-join__lead {
  font-family: var(--bo-font-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: #E9EDF2;
  margin: 0 0 12px;
}
.bo-join__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 13px; }
.bo-join__item { display: flex; align-items: flex-start; gap: 9px; }
.bo-join__item svg { flex-shrink: 0; margin-top: 3px; }
.bo-join__item span {
  min-width: 0;
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  color: #E9EDF2;
  line-height: 1.45;
}
.bo-join__cta {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #FABD12;
  color: #10213A;
  font-family: var(--bo-font-ui);
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
}
.bo-join__cta:hover { background: #BD8810; }
.bo-join__note { font-family: var(--bo-font-ui); font-size: 11px; color: #8FA0BC; text-align: center; margin: 9px 0 0; }

/* ==========================================================================
   STANDING — transcribed from the design
   White, 1px #EDE9E0, 3px #FABD12 left rule, radius 0 4px 4px 0, 16px pad.
   ========================================================================== */
.bo-standing {
  background: #FFFFFF;
  border: 1px solid #EDE9E0;
  border-left: 3px solid #FABD12;
  border-radius: 0 4px 4px 0;
  padding: 16px;
}
.bo-standing__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.bo-standing__title { margin: 0; font-family: var(--bo-font-display); font-weight: 800; font-size: 15px; color: var(--bo-ink); }
.bo-standing__room { font-family: var(--bo-font-ui); font-size: 11px; font-weight: 700; color: #B45309; }
.bo-standing__sub { font-family: var(--bo-font-ui); font-size: 11.5px; color: #5F6878; line-height: 1.5; margin: 0 0 12px; }

/* The ladder replaces the dashboard for guests. */
.bo-standing__ladder { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.bo-standing__step { display: flex; align-items: center; gap: 9px; }
.bo-standing__n {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bo-font-display);
  font-size: 10px;
  font-weight: 800;
}
.bo-standing__steptext { min-width: 0; font-family: var(--bo-font-ui); font-size: 12px; color: #4A5260; line-height: 1.4; }

.bo-standing__expiry {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  color: #5F6878;
  margin: 0 0 12px;
}
.bo-standing__expiry svg { flex-shrink: 0; }

.bo-standing__cta {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #FABD12;
  color: #10213A;
  font-family: var(--bo-font-ui);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.bo-standing__cta:hover { background: #BD8810; }
.bo-standing__note { font-family: var(--bo-font-ui); font-size: 11px; color: #5F6878; text-align: center; margin: 9px 0 0; }


/* ==========================================================================
   MOOD PILLS — corrected

   I had white pills with a grey border and a coloured dot, plus my own
   invented labels. The design gives every pill a TINTED FILL, a matching
   border and coloured text, and a specific set of eleven labels.

   "Unanswered" is deliberately NOT among them: it is a TAB in the row
   directly above, and the two rows sit adjacent, so duplicating it would be
   visible. Tabs carry the SORTS. Moods carry the LENSES.
   ========================================================================== */
.bo-mood {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease;
}
/* On hover the border takes the pill's own ink, so it firms up in its own
   colour rather than turning gold like everything else. */
.bo-mood:hover { border-color: currentColor; transform: translateY(-1px); }
.bo-mood__dot { width: 5px; height: 5px; border-radius: 999px; display: inline-block; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .bo-mood:hover { transform: none; } }


/* The follow list. Avatar SHAPE carries meaning: round for people, 10px
   rounded square for businesses and communities, set per row in the markup. */
.bo-rail-people { display: flex; flex-direction: column; }
.bo-rail-mod__link:hover { color: #92400E; }

/* ==========================================================================
   OWNER CARD — navy with a gold keyline, not a white panel.
   ========================================================================== */
.bo-owner-card {
  background: #080C0F;
  border: 1px solid rgba(237,197,80,0.28);
  border-radius: 4px;
  padding: 17px;
}
.bo-owner-card__eyebrow {
  font-family: var(--bo-font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  color: #EDC550;
  margin: 0 0 8px;
}
.bo-owner-card__head {
  font-family: var(--bo-font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: #FFFFFF;
  margin: 0 0 6px;
}
/* Serif: addressed to a person, not UI chrome. */
.bo-owner-card__copy {
  font-family: var(--bo-font-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: #C6CFDD;
  margin: 0 0 13px;
}
.bo-owner-card__cta {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #FABD12;
  color: #10213A;
  font-family: var(--bo-font-ui);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.bo-owner-card__cta:hover { background: #BD8810; }


/* ==========================================================================
   SECTION HEAD — THE SPINE
   From BEST OF Section Head.dc.html, MD5 869dee3346b60ba6af4691ca4da3bb4c

   Every section head on the platform carries the SAME 3px #FABD12 rule with
   13px of padding after it. That gold line is the vertical spine running down
   the page, which is why the width, colour and inset must never vary by
   section: three levels change only the TYPE SIZE.

     page 24px   ·   section 19px   ·   minor 15px

   The sub is SOURCE SERIF at 14.5px / 1.6, capped at 62ch. I had it at 13px
   sans in some places and 14px in others, which broke the spine's rhythm.
   ========================================================================== */
.bo-sec { font-family: var(--bo-font-ui); margin-bottom: 16px; }
.bo-sec__bar {
  border-left: 3px solid #FABD12;
  padding-left: 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}
.bo-sec__title {
  margin: 0;
  font-family: var(--bo-font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #10213A;
  line-height: 1.2;
}
.bo-sec__gap { flex: 1; }
.bo-sec__sub {
  font-family: var(--bo-font-serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: #4A5260;
  margin: 0;
  max-width: 62ch;
}
.bo-sec__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #080C0F;
  background: #F4F1EA;
  border: 1px solid #EDE9E0;
  border-radius: 999px;
  padding: 4px 10px;
}
.bo-sec__chip.is-live { color: #2F6B45; background: #F1F6F1; border-color: #D2E2D4; }
.bo-sec__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #2F6B45;
  display: inline-block;
  animation: bo-pulse 2.2s ease-in-out infinite;
}
.bo-sec__link {
  font-family: var(--bo-font-ui);
  text-decoration: none;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #B45309;
}
.bo-sec__link:hover { color: #92400E; }

/* Rail modules sit in a 16px box, so their heads need less room below. */
.bo-rail-mod .bo-sec { margin-bottom: 12px; }
.bo-rail-mod .bo-sec__sub { font-size: 13px; line-height: 1.5; color: #5F6878; }


/* ==========================================================================
   FOOTER — rebuilt from BEST OF Chrome - Footer.dc.html
   Join band, then brand, five columns, utility row, legal row.
   ========================================================================== */
.bo-footer { font-family: var(--bo-font-ui); position: relative; background: #080C0F; overflow: hidden; margin-top: 0; }
.bo-footer__watermark { position: absolute; right: -2%; bottom: -14%; width: 300px; height: auto; opacity: 0.05; z-index: 0; }

/* --- Join band -------------------------------------------------------------- */
.bo-joinband { position: relative; z-index: 1; border-bottom: 1px solid rgba(255,255,255,0.09); }
.bo-joinband__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 38px 24px 34px;
  display: flex;
  gap: 26px 48px;
  flex-wrap: wrap;
  align-items: center;
}
.bo-joinband__copy { flex: 1 1 420px; min-width: 0; }
.bo-joinband__head {
  font-family: var(--bo-font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #FFFFFF;
  margin: 0 0 10px;
}
.bo-joinband__sub { font-size: 14.5px; line-height: 1.55; color: #C6CFDD; margin: 0 0 18px; max-width: 46ch; }
.bo-joinband__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bo-joinband__cta {
  font-family: var(--bo-font-display);
  text-decoration: none;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  border-radius: 999px;
  background: #FABD12;
  color: #10213A;
  font-size: 14.5px;
  font-weight: 800;
}
.bo-joinband__cta:hover { background: #BD8810; }
.bo-joinband__ghost {
  text-decoration: none;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
}
.bo-joinband__ghost:hover { border-color: #FABD12; color: #FABD12; }
.bo-joinband__owner { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 14px 0 0; font-size: 12.5px; color: #8FA0BC; }
.bo-joinband__owner a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #EDC550; text-decoration: none; }
.bo-joinband__owner a:hover { color: #FABD12; }

.bo-joinband__proof { flex: 0 1 400px; min-width: 0; }
.bo-joinband__stats { display: flex; gap: 20px 34px; flex-wrap: wrap; margin-bottom: 14px; }
.bo-joinband__stat { display: flex; flex-direction: column; gap: 2px; }
.bo-joinband__n {
  font-family: var(--bo-font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #FABD12;
}
.bo-joinband__label { font-size: 12px; color: #9DA9BF; }
.bo-joinband__real { font-size: 12.5px; font-weight: 700; color: #FFFFFF; margin: 0; }
.bo-joinband__independent { font-size: 11.5px; color: #8FA0BC; margin: 7px 0 0; }

/* --- Footer proper ---------------------------------------------------------- */
.bo-footer__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 32px 24px 26px; }
.bo-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.bo-footer__brand { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.bo-footer__brand svg { display: block; width: 196px; height: auto; }
.bo-footer__promise {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--bo-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #C6CFDD;
}
.bo-footer__dot { width: 4px; height: 4px; border-radius: 999px; background: #FABD12; display: inline-block; }
.bo-footer__blurb { font-size: 13px; color: #9DA9BF; max-width: 44ch; line-height: 1.55; }
.bo-footer__slogan { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; text-align: right; }
.bo-footer__slogan-text {
  font-family: var(--bo-font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #FFFFFF;
  line-height: 1.25;
}
.bo-footer__slogan-text span { color: #FABD12; }
.bo-footer__resolves { font-size: 11.5px; color: #8FA0BC; }

.bo-footer__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  border-top: 1px solid rgba(255,255,255,0.09);
  margin-top: 18px;
  padding-top: 20px;
}
.bo-footer__col { min-width: 0; }
.bo-footer__col-head { font-size: 12px; font-weight: 700; color: #FFFFFF; margin-bottom: 10px; }
.bo-footer__col-links { display: flex; flex-direction: column; gap: 7px; }
.bo-footer__col-links a { text-decoration: none; font-size: 12px; color: #9DA9BF; }
.bo-footer__col-links a:hover { color: #FFFFFF; }

.bo-footer__utility {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.09);
  margin-top: 20px;
  padding-top: 18px;
}
.bo-footer__social { display: flex; gap: 8px; flex-shrink: 0; }
.bo-footer__social a {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.bo-footer__social a:hover { border-color: #FABD12; background: rgba(250,189,18,0.10); }
.bo-footer__region, .bo-footer__check {
  text-decoration: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
}
.bo-footer__region { border: 1px solid rgba(255,255,255,0.18); font-weight: 600; color: #C6CFDD; }
.bo-footer__region:hover { border-color: #FABD12; color: #FFFFFF; }
.bo-footer__check { border: 1px solid rgba(237,197,80,0.34); font-weight: 700; color: #EDC550; }
.bo-footer__check:hover { border-color: #FABD12; color: #FABD12; }

.bo-footer__legal {
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.09);
  margin-top: 16px;
  padding-top: 14px;
}
.bo-footer__legal a { text-decoration: none; font-size: 11.5px; color: #8FA0BC; }
.bo-footer__legal a:hover { color: #FFFFFF; }
.bo-footer__gap { flex: 1; }
.bo-footer__copy { font-size: 11.5px; color: rgba(255,255,255,0.42); flex-shrink: 0; }

@media (max-width: 900px) {
  .bo-footer__cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bo-footer__slogan { align-items: flex-start; text-align: left; }
  .bo-joinband__inner, .bo-footer__inner { padding-left: 16px; padding-right: 16px; }
  .bo-joinband__head { font-size: 24px; }
}
.bo-home__feed > .bo-card {
  margin: 0 0 -1px;
  border-radius: 0;
  position: relative;
}

.bo-home__feed > .bo-card:first-child { border-radius: 4px 4px 0 0; }
.bo-home__feed > .bo-card:last-child { border-radius: 0 0 4px 4px; margin-bottom: 0; }
.bo-home__feed > .bo-card:hover { z-index: 2; }

/* Prompts break the run deliberately: a prompt must read as an invitation,
   never as content, so it keeps its own gap and radius. */
.bo-home__feed > .bo-prompt { margin: 14px 0; border-radius: 4px; }


/* ==========================================================================
   MOSAIC VARIANT B — proposal only, never shipped without a decision
   ========================================================================== */
.bo-mosb {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 190px;
  gap: 12px;
}
.bo-mosb-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 4px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  padding: 16px;
  text-decoration: none;
  transition: box-shadow 170ms ease, transform 170ms ease;
}
.bo-mosb-tile:hover { box-shadow: 0 18px 40px rgba(11,31,58,0.28); transform: translateY(-3px); }

.bo-mosb-kind {
  position: absolute;
  top: 13px;
  left: 13px;
  font-family: var(--bo-font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  background: rgba(255,255,255,0.94);
  border-radius: 6px;
  padding: 4px 10px;
}
.bo-mosb-title {
  font-family: var(--bo-font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.18;
  color: #FFFFFF;
  text-shadow: 0 1px 14px rgba(6,16,32,0.55);
}
/* The lead earns a standfirst. Nothing else does: one sentence on every tile
   would be noise, one sentence on the lead is a front page. */
.bo-mosb-stand {
  font-family: var(--bo-font-serif);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
  margin-top: 8px;
  max-width: 46ch;
}
.bo-mosb-tile.is-lead { padding: 22px; }

/* TEXT TILES: family tint, no photograph, claim in serif. These are the
   items that never had a good picture, and pretending otherwise is what
   makes an edition look like stock photography. */
.bo-mosb-tile--text { justify-content: center; }
.bo-mosb-claim {
  font-family: var(--bo-font-serif);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.bo-mosb-tile--text .bo-mosb-kind { background: #FFFFFF; }

.bo-mosb-meta {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 9px;
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 600;
  color: #E9EDF2;
}
.bo-mosb-meta span { display: inline-flex; align-items: center; gap: 4px; }
.bo-mosb-rise { color: #EDC550; font-weight: 700; }
.bo-mosb-meta.is-dark { color: #5F6878; }

/* The comparison harness. Admin preview only. */
.bo-variant { max-width: 1240px; margin: 0 auto; padding: 0 24px 26px; }
.bo-variant__label {
  font-family: var(--bo-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  color: #B45309;
  border-left: 3px solid #FABD12;
  padding-left: 10px;
  margin: 26px 0 12px;
}
.bo-variant__note { font-family: var(--bo-font-ui); font-size: 12.5px; color: #5F6878; margin: 0 0 14px; }

@media (max-width: 900px) {
  .bo-mosb { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 170px; }
  .bo-mosb-tile { grid-column: span 1 !important; grid-row: span 1 !important; }
  .bo-mosb-tile.is-lead { grid-column: span 2 !important; grid-row: span 2 !important; }
}
@media (max-width: 560px) {
  .bo-mosb { grid-template-columns: minmax(0,1fr); }
  .bo-mosb-tile.is-lead { grid-column: span 1 !important; }
}


/* ==========================================================================
   TYPE CHIP — the selected "more ways" type, sitting inside the field
   ========================================================================== */
.bo-composer__typechip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 4px 0 10px;
  margin-right: 9px;
  border-radius: 999px;
  background: #FFF8E7;
  border: 1px solid #E4A93C;
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  color: #8A5122;
  white-space: nowrap;
}
.bo-composer__typechip-x {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #8A5122;
  cursor: pointer;
  padding: 0;
}
.bo-composer__typechip-x:hover { background: rgba(138,81,34,0.14); }
.bo-composer__more-pill:active { transform: scale(0.98); }


/* ==========================================================================
   MOSAIC VARIANT C — text tiles inside A's geometry
   ========================================================================== */
.bo-tile--text {
  justify-content: flex-end;
  overflow: hidden;
  transition: background 200ms ease, box-shadow 170ms ease, transform 170ms ease;
}

/* The watermark. A text tile has no subject, so it gets a focal point: the
   family glyph, very large, very quiet, bled off the top right corner. At 6%
   it reads as texture rather than an element, and it stops the tile looking
   like an empty coloured box beside eight photographs. */
.bo-tile__mark {
  position: absolute;
  top: -34px;
  right: -14px;
  font-family: var(--bo-font-serif);
  font-size: 170px;
  line-height: 1;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

/* The claim is the content, so it gets the editorial face at a size that
   competes with the image tiles rather than deferring to them. */
.bo-tile__claim {
  position: relative;
  font-family: var(--bo-font-serif);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.006em;
  color: var(--ink);
  margin: 0;
}

/* Text tiles respond like image tiles do: same lift, same shadow, and the
   tint deepens a touch so they are not inert next to a scaling photograph. */
.bo-tile--text:hover {
  box-shadow: 0 18px 40px rgba(11,31,58,0.16);
  transform: translateY(-3px);
}
.bo-tile--text:hover .bo-tile__mark { opacity: 0.10; }

/* On a light tint the meta row needs dark ink, not the white used on photos. */
.bo-tile__meta.is-onlight { color: var(--ink); }
.bo-tile__meta.is-onlight .bo-tile__stat { color: #5F6878; }
.bo-tile__meta.is-onlight .bo-tile__rise { color: var(--ink); }

/* The kind badge sits on white on a photo. On a tint it needs its own plate
   or it disappears into the background. */
.bo-tile--text .bo-tile__kind { background: rgba(255,255,255,0.82); }

@media (prefers-reduced-motion: reduce) {
  .bo-tile--text:hover { transform: none; }
}


/* ==========================================================================
   FULL MASTHEAD — two columns: the pitch, and the stage
   ========================================================================== */


.bo-mh__eyebrow svg { flex-shrink: 0; }
.bo-mh__gold { color: #96700D; }

.bo-mh__rise { color: #96700D; white-space: nowrap; }
.bo-mh__rise svg { display: inline-block; vertical-align: -3px; margin-left: 8px; }


.bo-mh__risedef svg { flex-shrink: 0; }
.bo-mh__risedef strong { font-family: var(--bo-font-display); font-weight: 800; color: #10213A; }
.bo-mh__people { font-family: var(--bo-font-ui); font-size: 13.5px; color: #4A5260; margin: 0 0 16px; }
.bo-mh__people strong { font-family: var(--bo-font-display); font-size: 15px; font-weight: 800; color: #10213A; }

.bo-mh__promise svg { flex-shrink: 0; }

.bo-mh__cta {
  min-height: 46px; display: inline-flex; align-items: center; padding: 0 22px;
  border-radius: 10px; background: #FABD12; color: #10213A;
  font-family: var(--bo-font-ui); font-size: 14px; font-weight: 800;
  text-decoration: none; white-space: nowrap;
}
.bo-mh__cta:hover { background: #BD8810; }
.bo-mh__ghost {
  min-height: 46px; display: inline-flex; align-items: center; gap: 7px; padding: 0 20px;
  border-radius: 10px; border: 1px solid #EDE9E0; background: #FFFFFF; color: #10213A;
  font-family: var(--bo-font-ui); font-size: 14px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.bo-mh__ghost:hover { border-color: #FABD12; background: #FFF8E7; }


.bo-mh__stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bo-mh__statn { display: flex; align-items: center; gap: 7px; font-family: var(--bo-font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: #10213A; font-variant-numeric: tabular-nums; }
.bo-mh__statl { font-family: var(--bo-font-ui); font-size: 12px; color: #5F6878; line-height: 1.4; }
.bo-mh__dot { width: 7px; height: 7px; border-radius: 999px; background: #2F6B45; display: inline-block; flex-shrink: 0; animation: bo-pulse 2s ease-in-out infinite; }

/* --- The stage: scattered hook cards over drifting sparkles ---------------- */

.bo-mh__stagelabel {
  position: absolute; left: 0; top: -26px; z-index: 8;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--bo-font-display); font-size: 10px; font-weight: 800;
  letter-spacing: 0.13em; color: #5F6878;
}
.bo-mh__stagelabel .bo-mh__dot { width: 6px; height: 6px; animation-duration: 2.2s; }
.bo-mh__spark {
  position: absolute; z-index: 1; background: #FABD12;
  clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation: bo-twinkle 3.6s ease-in-out infinite;
  pointer-events: none;
}
.bo-mh__spark:nth-child(odd) { background: #EDC550; }

/* A card is tilted at rest and STRAIGHTENS on hover, which reads as picking it
   up off a table. A neat grid here would look like a product screenshot; a
   scatter reads as things in motion. */
.bo-hc {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #EDE9E0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(11,31,58,0.13);
  text-decoration: none;
  transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease;
}
.bo-hc:hover {
  transform: rotate(0deg) translateY(-7px) !important;
  box-shadow: 0 24px 48px rgba(11,31,58,0.26);
  border-color: #FABD12;
  z-index: 9;
}
.bo-hc__img { display: block; background-size: cover; background-position: center; background-color: #EFEADE; }
.bo-hc__kind {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--bo-font-ui); font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  background: rgba(255,255,255,0.94); border-radius: 6px; padding: 5px 9px;
  box-shadow: 0 1px 4px rgba(11,31,58,0.14);
}
.bo-hc__rank {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--bo-font-display); font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  color: #10213A; background: rgba(255,255,255,0.94);
  border: 1px solid #E4A93C; border-radius: 999px; padding: 4px 8px;
  box-shadow: 0 1px 4px rgba(11,31,58,0.14);
}
.bo-hc__move { color: #2F6B45; font-weight: 700; }
.bo-hc__body { display: flex; flex-direction: column; gap: 7px; padding: 12px 13px; }
.bo-hc__title { font-family: var(--bo-font-ui); font-size: 13.5px; font-weight: 700; color: #10213A; line-height: 1.32; }
.bo-hc__meta {
  display: flex; align-items: center; gap: 10px;
  padding-top: 9px; border-top: 1px solid #EAE5DA;
  font-family: var(--bo-font-ui); font-size: 11.5px; font-weight: 700; color: #B45309; white-space: nowrap;
}
.bo-hc__replies { display: inline-flex; align-items: center; gap: 5px; color: #5F6878; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .bo-mh__spark { animation: none; }
  .bo-hc:hover { transform: none !important; }
}

/* Below 1000px the stage cannot hold a 560px scatter beside the pitch. */
@media (max-width: 1000px) {


}
@media (max-width: 620px) {

  .bo-mh__rise { white-space: normal; }
  .bo-mh__rise svg { width: 30px; height: 26px; }
}


/* The picked pill. Same gold language as the chip in the field, so the two
   read as one selection shown in two places rather than two states. */
.bo-composer__more-pill.is-picked {
  background: #FFF8E7;
  border-color: #E4A93C;
  color: #8A5122;
  font-weight: 700;
}
.bo-composer__more-pill.is-picked svg { stroke: #8A5122; }
@keyframes bo-fade-up {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .bo-composer__more-panel { animation: none; } }


/* --- Owner band internals --------------------------------------------------- */
.bo-owner__lead {
  font-family: var(--bo-font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--bo-ink-muted);
  margin: 0 0 20px;
  max-width: 54ch;
}
/* The commercial model, stated plainly. For an owner this IS the product:
   every other directory sells position, and saying so is the differentiator. */
.bo-owner__model {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--bo-font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--bo-ink-soft);
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid #EAE5DA;
  max-width: 58ch;
}
.bo-owner__model svg { flex-shrink: 0; margin-top: 2px; }
.bo-owner__model strong { color: var(--bo-ink); font-weight: 700; }

.bo-owner__ico {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #FFF8E7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bo-owner__itembody { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bo-owner__itemhead {
  font-family: var(--bo-font-display);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.008em;
  color: var(--bo-ink);
}
.bo-owner__itemtext {
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--bo-ink-soft);
}

@media (max-width: 1000px) {
  .bo-owner__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
.bo-composer__count {
  align-self: auto;
  margin: 6px 0 0;
  font-family: var(--bo-font-ui);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--bo-ink-faint);
  flex-shrink: 0;
  order: 99;
  flex-basis: 100%;
  text-align: right;
}

.bo-composer__count.is-over { color: #B45309; font-weight: 700; }
.bo-composer__preview {
  margin: 10px 0 0;
  flex-basis: 100%;
  order: 98;
}

.bo-lp {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 38px 10px 10px;
  background: #FFFFFF;
  border: 1px solid #EDE9E0;
  border-radius: 10px;
  animation: bo-fade-up 200ms ease both;
  max-width: 520px;
}

.bo-lp__img {
  flex-shrink: 0;
  width: 84px;
  height: 56px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: #EFEADE;
}
.bo-lp__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bo-lp__host { font-family: var(--bo-font-ui); font-size: 12.5px; font-weight: 800; color: var(--bo-ink); }
.bo-lp__state { font-family: var(--bo-font-ui); font-size: 11.5px; color: var(--bo-ink-soft); }
.bo-lp__x {
  position: absolute; right: 8px; top: 8px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; background: transparent;
  color: var(--bo-ink-soft); cursor: pointer;
}
.bo-lp__x:hover { background: var(--bo-neutral-tint); }

/* --- The post moment --------------------------------------------------------
   Shows the CONSEQUENCE of the contribution, not praise for the person.
   No points, no streak, no leaderboard: the research finds no evidence that
   competition motivates contribution to a public good, and a variable reward
   would be manipulation rather than satisfaction. */
.bo-composer.is-posted > *:not(.bo-posted) { display: none; }
.bo-posted {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  padding: 26px 20px 22px;
  animation: bo-fade-up 260ms ease both;
}
.bo-posted__tick {
  width: 54px; height: 54px;
  border-radius: 999px;
  background: #FABD12;
  color: #10213A;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  animation: bo-pop 460ms cubic-bezier(0.2,-0.2,0.4,1.5) both;
}
/* One ring, once. Enough to mark the moment, not enough to be a slot machine. */
.bo-posted__burst {
  position: absolute;
  top: 26px;
  width: 54px; height: 54px;
  border-radius: 999px;
  border: 3px solid #FABD12;
  animation: bo-rise-ring 720ms cubic-bezier(0.2,0.7,0.3,1) 60ms both;
  pointer-events: none;
}
@keyframes bo-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.bo-posted__head {
  font-family: var(--bo-font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.014em;
  color: var(--bo-ink);
}
/* The relatedness line: what your post DOES for someone else. */
.bo-posted__sub {
  font-family: var(--bo-font-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bo-ink-muted);
  max-width: 44ch;
}
.bo-posted__acts { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }





@media (prefers-reduced-motion: reduce) {
  .bo-posted, .bo-posted__tick, .bo-posted__burst, .bo-lp { animation: none; }
  .bo-posted__burst { display: none; }
}


/* ==========================================================================
   THE TWINKLE — missing keyframe

   The sparkles carried "animation: bo-twinkle 3.6s" but bo-twinkle was never
   defined in any stylesheet, so they sat static. Transcribed from the design:
   they scale from 0.82 to 1.3 AND rotate 18 degrees while fading 0.30 to 1.

   The rotation is what makes it read as a twinkle rather than a pulse: a star
   that only fades looks like a notification dot, one that turns catches light.
   ========================================================================== */
@keyframes bo-twinkle {
  0%, 100% { transform: scale(0.82) rotate(0deg); opacity: 0.30; }
  50%      { transform: scale(1.3) rotate(18deg); opacity: 1; }
}

/* ==========================================================================
   HOOK CARD HOVER — bring the card forward

   The tilt and stacking order are set INLINE per card, so a CSS :hover rule
   could never win: inline styles beat stylesheet rules regardless of
   specificity. Both need !important here, which is the correct use of it
   rather than laziness — it is the only way a stylesheet can override an
   inline value.
   ========================================================================== */
.bo-hc:hover,
.bo-hc:focus-visible {
  z-index: 20 !important;
  transform: rotate(0deg) translateY(-7px) !important;
  box-shadow: 0 24px 48px rgba(11,31,58,0.26);
  border-color: #FABD12;
}

/* ==========================================================================
   THE FACE PILE
   ========================================================================== */

.bo-mh__pile { display: flex; align-items: center; padding-left: 9px; }
.bo-mh__face {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2.5px solid #FFFFFF;
  background-size: cover;
  background-position: center;
  background-color: #EFEADE;
  margin-left: -9px;
  box-shadow: 0 1px 3px rgba(11,31,58,0.18);
  flex-shrink: 0;
}
.bo-mh__facetext { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-family: var(--bo-font-ui); font-size: 13.5px; color: #4A5260; }
.bo-mh__facetext strong { font-family: var(--bo-font-display); font-size: 15px; font-weight: 800; color: #10213A; }

@media (prefers-reduced-motion: reduce) {
  .bo-mh__spark { animation: none !important; opacity: 0.6 !important; }
}


/* The check count. Sits between the lead and the buttons because it is the
   argument, not decoration: an owner reads the number, then the button. */
.bo-owner__proof {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 22px;
  padding: 14px 16px;
  background: #FFF8E7;
  border-left: 3px solid #FABD12;
  border-radius: 0 8px 8px 0;
  max-width: 54ch;
}
.bo-owner__proofn {
  flex-shrink: 0;
  font-family: var(--bo-font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #8A5122;
  font-variant-numeric: tabular-nums;
}
.bo-owner__prooft {
  font-family: var(--bo-font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--bo-ink-muted);
}


/* ==========================================================================
   COMPOSER — FIVE FAULTS FOUND IN TESTING

   1 A second box drawn inside the field on focus. The textarea was picking up
     a global focus ring, so you got the field's border AND the textarea's,
     misaligned. The FIELD shows focus; the textarea never does.

   2 The Post button stretched into a full-height gold slab as the field grew.
     It stays 44px and pins to the top, so the flush seam holds at every
     height instead of only at rest.

   3 The character counter floated outside the panel. It belongs under the
     control, right aligned, where it is legible and out of the way.

   4 The link preview rendered INSIDE the field, squeezing the pasted URL into
     a narrow column. It belongs below the control at full width.

   5 The field grew but its inner padding did not, so long text pressed
     against the edges.
   ========================================================================== */
.bo-composer__input:focus,
.bo-composer__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}


/* Confirmation buttons use the SAME icons and pill shape as the card action
   row, so the moment reads as part of the product rather than a dialogue. */
.bo-posted__btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  border: 1px solid var(--bo-border);
  border-radius: 999px;
  background: #FFFFFF;
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bo-ink);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.bo-posted__btn:hover { border-color: var(--bo-action-gold); background: #FFFDF6; transform: translateY(-1px); }
/* Send is the only filled control: a forward recruits, the rest retain. */
.bo-posted__btn.is-primary { background: var(--bo-action-gold); border-color: var(--bo-action-gold); }
.bo-posted__btn.is-primary:hover { background: var(--bo-action-gold-hover); }

.bo-posted__again {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bo-gold-ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bo-posted__again:hover { color: #92400E; }

/* The poster's own card, marked and briefly highlighted so "see your post"
   lands somewhere obvious. */
.bo-card__yours {
  font-family: var(--bo-font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #8A5122;
  background: #FFF8E7;
  border: 1px solid #F3E5C9;
  border-radius: 999px;
  padding: 3px 8px;
}
.bo-card.is-yours { border-left: 3px solid var(--bo-action-gold); animation: bo-fade-up 300ms ease both; }
.bo-card.is-flash { box-shadow: 0 0 0 3px rgba(216,162,27,0.34); transition: box-shadow 300ms ease; }


/* Three dots breathing in sequence: a loading hint, not a call to action. */
.bo-sentinel__dots { display: inline-flex; gap: 6px; }
.bo-sentinel__dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--bo-ink-faint);
  display: inline-block;
  animation: bo-dot 1.4s ease-in-out infinite;
}
.bo-sentinel__dots span:nth-child(2) { animation-delay: 0.18s; }
.bo-sentinel__dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes bo-dot {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .bo-sentinel__dots span { animation: none; opacity: 0.6; } }

/* A parked card holds its height and shows nothing, so scroll never jumps. */


/* ==========================================================================
   HELP IT RISE — shown only on the poster's own new card

   A new post with nothing behind it goes nowhere, and the poster is the only
   person with a reason to push it. So the ask is made once, to them, at the
   only moment they care — and it is framed as helping the post rather than
   promoting themselves, which is both truer and easier to act on.
   ========================================================================== */
.bo-card__helprise {
  background: #FFF8E7;
  border: 1px solid #F3E5C9;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 11px;
}
.bo-card__helprise-text {
  display: block;
  font-family: var(--bo-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: #8A5122;
  margin-bottom: 10px;
}
.bo-card__helprise-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bo-card__helprise-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid #F3E5C9;
  border-radius: 999px;
  background: #FFFFFF;
  font-family: var(--bo-font-ui);
  font-size: 12px;
  font-weight: 700;
  color: #8A5122;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease;
}
.bo-card__helprise-btn:hover { border-color: var(--bo-action-gold); transform: translateY(-1px); }
/* Send is the only filled one: a forward recruits a reader, the rest do not. */
.bo-card__helprise-btn.is-primary {
  background: var(--bo-action-gold);
  border-color: var(--bo-action-gold);
  color: var(--bo-ink);
}
.bo-card__helprise-btn.is-primary:hover { background: var(--bo-action-gold-hover); }

@media (prefers-reduced-motion: reduce) { .bo-card__helprise-btn:hover { transform: none; } }


/* The composer answers when called. One pulse of the gold edge and a lifted
   shadow: enough to say "here it is" without a message, and gone in 1.4s.
   Scrolling someone to a form without marking it leaves them unsure anything
   happened. Anchor offset clears the 72px sticky header. */
#bo-compose { scroll-margin-top: 92px; }
.bo-composer.is-called {
  animation: bo-called 1400ms ease-out;
}
@keyframes bo-called {
  0%   { box-shadow: 0 4px 20px rgba(184,136,16,0.10); border-left-color: #FABD12; }
  18%  { box-shadow: 0 10px 34px rgba(184,136,16,0.34); border-left-color: #FABD12; }
  100% { box-shadow: 0 4px 20px rgba(184,136,16,0.10); border-left-color: #FABD12; }
}
@media (prefers-reduced-motion: reduce) { .bo-composer.is-called { animation: none; } }


/* ==========================================================================
   COMPOSER CONTROL — TOOLBAR BELOW, NOT BESIDE

   The flush "one unit" works at 44px and falls apart the moment the field
   grows: the gold button covers only the top 44px of a 90px field, the icons
   float at the top of an empty column, and the right edge reads as broken.

   Making the button full height was worse — a tall gold slab.

   So the actions move to their own row underneath, which is what every
   composer that supports multi-line does (X, LinkedIn, Facebook). The field
   becomes a plain rounded box that can be any height, and the toolbar sits
   below it: attach icons left, post button right. Nothing to misalign.
   ========================================================================== */
.bo-composer__control {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
}


/* Row one: mark + field, field fully rounded on all four corners now. */
.bo-composer__field {
  flex: 1 1 auto;
  border: 1px solid #EDE9E0;
  border-radius: 10px;
  padding: 0 14px;
  min-height: 44px;
}
.bo-composer__field:focus-within { border-color: var(--bo-action-gold); min-height: 86px; }

/* Force a line break so the toolbar starts a new row. */
.bo-composer__control::after { content: ""; flex-basis: 100%; height: 0; order: 3; }

.bo-composer__tools {
  order: 4;
  align-self: center;
  margin: 10px 0 0 52px;
  gap: 6px;
}
.bo-composer__post {
  order: 5;
  align-self: center;
  margin: 10px 0 0 auto;
  height: 44px;
  min-height: 44px;
  border-radius: 999px;
  padding: 0 20px;
}
.bo-composer__count { order: 6; flex-basis: 100%; text-align: right; margin: 8px 0 0; }
.bo-composer__preview { order: 7; flex-basis: 100%; margin: 10px 0 0 52px; }

@media (max-width: 620px) {
  .bo-composer__tools { margin-left: 0; }
  .bo-composer__preview { margin-left: 0; }
}


/* The sticky rail composer. Navy, so it holds its place as the rail's anchor,
   with a real field rather than a description of one. */
.bo-railpost__input {
  width: 100%;
  field-sizing: content;
  min-height: 64px;
  max-height: 160px;
  margin: 10px 0 9px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: #FFFFFF;
  font-family: var(--bo-font-ui);
  font-size: 13px;
  line-height: 1.5;
  resize: none;
}
.bo-railpost__input::placeholder { color: #8FA0BC; }
.bo-railpost__input:focus {
  outline: none;
  border-color: var(--bo-credential-gold);
  background: rgba(255,255,255,0.10);
}
.bo-railpost__post {
  width: 100%;
  min-height: 44px;
  border: none;
  border-radius: 10px;
  background: var(--bo-action-gold);
  color: var(--bo-ink);
  font-family: var(--bo-font-display);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 140ms ease;
}
.bo-railpost__post:hover { background: var(--bo-action-gold-hover); }
.bo-railpost__note {
  margin: 9px 0 0;
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  color: #8FA0BC;
  text-align: center;
}


/* ==========================================================================
   THE RAIL COMPOSER — an interceptor, not a second destination

   Deliberately NOT a copy of the main composer:

     main   826px  a DESTINATION. You arrive with intent. It teaches what the
                   platform accepts — six type cards, a headline that rewrites
                   itself, nine more ways behind a disclosure.
     rail   340px  an INTERCEPTOR. It catches an impulse mid-scroll, when
                   somebody has just read something and wants to say something.
                   Teaching is over by then; speed is the whole job.

   Two identical forms on one screen also read as a rendering bug rather than
   a feature. Same navy, same gold, same type — different density.

   STICKY ON ITSELF, not just inside a sticky rail. The rail is seven modules
   tall, far taller than the viewport, so a sticky CONTAINER lets the composer
   scroll away and pins whatever module happens to sit at the bottom. Pinning
   the composer is the entire point of putting it here.
   ========================================================================== */
.bo-railpost {
  position: sticky;
  top: 88px;
  z-index: 5;
  padding: 16px 17px 14px;
}
.bo-railpost__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bo-railpost__head {
  margin: 0;
  font-family: var(--bo-font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.012em;
  color: #FFFFFF;
}
/* A sticky composer people scroll away from needs to say the words are safe. */
.bo-railpost__saved {
  font-family: var(--bo-font-ui);
  font-size: 11px;
  font-weight: 700;
  color: #EDC550;
  white-space: nowrap;
}
.bo-railpost__row { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
/* The predicted type, editable. Clicking it jumps to the full type picker
   rather than cycling blindly through eleven options in a 340px column. */
.bo-railpost__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(250,189,18,0.16);
  border: 1px solid rgba(250,189,18,0.45);
  font-family: var(--bo-font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #EDC550;
  cursor: pointer;
  white-space: nowrap;
}
.bo-railpost__chip:hover { background: rgba(250,189,18,0.26); }
.bo-railpost__post { flex: 1; margin: 0; }


/* ==========================================================================
   FEED PERFORMANCE — browser-native rendering skip

   content-visibility: auto tells the engine to skip LAYOUT, PAINT and
   HIT-TESTING for any card outside the viewport. Baseline widely available
   since 2024, and it replaces the hand-rolled JavaScript parking I had, which
   ran on every scroll frame and iterated every card — getting slower exactly
   as the feed grew, which is the opposite of what it was for.

   contain-intrinsic-size is NOT optional. A skipped element has no rendered
   content, so the browser would treat its height as zero, the scrollbar would
   lurch and the page would jump as cards render in. The placeholder height
   prevents that.

   The "auto" keyword in front of the length is the important part: the browser
   uses 620px until a card has rendered once, then REMEMBERS that card's real
   height for every later off-screen pass. So the estimate stops mattering
   after first view, and scroll position stays stable with variable heights.

   620px is the median rendered card height here (title + body + media + poll
   varies from ~200px to ~1100px).

   Applied to the CARDS, never the container: chunks let the browser skip and
   render in pieces, and containing the whole feed would defeat it.
   ========================================================================== */
.bo-home__feed > .bo-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}

/* The spacer that preserves scroll height when old cards are removed from the
   DOM entirely. Without it, dropping cards would yank the page upward. */
.bo-feed__spacer { width: 100%; flex-shrink: 0; }


/* The caret says this is a control rather than a badge. §7 requires the
   inferred type to be visibly editable, and a plain word does not look
   editable to anyone. */
.bo-railpost__caret { font-size: 9px; opacity: 0.75; margin-left: 1px; }

/* It appears when a type is first recognised, and again whenever it changes,
   so you can SEE it thinking. A chip that never moves is decoration. */
.bo-railpost__chip.is-new { animation: bo-chip-in 400ms cubic-bezier(0.2,-0.1,0.3,1.4) both; }
@keyframes bo-chip-in {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .bo-railpost__chip.is-new { animation: none; } }

/* Family headings sit ABOVE their pills, not beside them.
   The parent is a wrapping flex row, so the heading and the pill group became
   siblings on the same line. Forcing both to full width restores the stack. */
.bo-composer__more-pills { display: block; }
.bo-composer__family-head {
  display: block;
  width: 100%;
  margin: 16px 0 8px;
  font-family: var(--bo-font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  color: #8A5122;
}
.bo-composer__more-pills > .bo-composer__family-head:first-child { margin-top: 0; }
.bo-composer__family-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* ==========================================================================
   COMPOSER LAYOUT — the toolbar row, and a 3x2 card grid

   TWO FAULTS FIXED.

   1 THE ORPHANED POST BUTTON. Moving Post out of the field stopped it
     stretching into a gold slab as the field grew, but the attach icons were
     left INSIDE the field — so the row below held one item and ~70px of empty
     space. The icons now move down to join it: attach on the left, Post on the
     right, one balanced row. This is what every multi-line composer does.

   2 THE 5 + 1 WRAP. Six cards in a five-column grid stranded "Write a review"
     beside a large gap. Three columns by two rows is even, and at ~250px wide
     every label fits on ONE line — so "Something's changed" and "Recommend
     something" stop being the odd ones out.
   ========================================================================== */
.bo-composer__field {
  padding: 0 14px;
}
/* Attach icons leave the field and join the toolbar row. */
.bo-composer__tools {
  order: 4;
  align-self: center;
  margin: 12px 0 0;
  padding: 0;
  border: none;
  gap: 4px;
}
.bo-composer__post {
  order: 5;
  align-self: center;
  margin: 12px 0 0 auto;
  height: 44px;
  min-height: 44px;
  border-radius: 999px;
  padding: 0 22px;
}

/* Three across, two down. Even, and every label fits on one line. */
.bo-composer__cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.bo-composer__cat {
  min-height: 76px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 16px;
}
.bo-composer__cat-label { text-align: left; white-space: nowrap; }

@media (max-width: 620px) {
  .bo-composer__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-composer__cat { padding: 0 12px; gap: 9px; }
  .bo-composer__cat-label { white-space: normal; }
}

/* ==========================================================================
   ATTACHMENTS + TOOL ALIGNMENT

   The attach icons stay on the LEFT and Post on the right. The row reads
   "add to your post -> finish your post", and putting secondary icons next to
   the one irreversible action invites a mis-tap. Every major composer does the
   same. They were aligned to the crown though, not the field, which is why
   they looked stranded.
   ========================================================================== */
.bo-composer__tools { margin-left: 52px; }
.bo-composer__tool { width: 38px; height: 38px; border-radius: 9px; }
.bo-composer__tool:hover { background: rgba(216,162,27,0.12); }

.bo-composer__attachments {
  order: 6;
  flex-basis: 100%;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 0 52px;
}
.bo-attach {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  background: #EFEADE;
  border: 1px solid var(--bo-border);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bo-attach__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-attach__play {
  position: absolute;
  color: #FFFFFF;
  font-size: 15px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  pointer-events: none;
}
.bo-attach__x {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px;
  background: rgba(11,31,58,0.72);
  color: #FFFFFF;
  cursor: pointer; padding: 0;
}
.bo-attach__x:hover { background: rgba(11,31,58,0.9); }
.bo-attach--add {
  border-style: dashed;
  border-color: #D9C48A;
  background: #FFFDF6;
  color: #8A5122;
  font-family: var(--bo-font-display);
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}
.bo-attach--add:hover { border-color: var(--bo-action-gold); background: #FFF8E7; }

@media (max-width: 620px) {
  .bo-composer__tools, .bo-composer__attachments { margin-left: 0; }
}

/* ==========================================================================
   MORE WAYS STRIP — solid, not dashed

   A dashed border means DROP ZONE or PLACEHOLDER in interface convention:
   something unfinished, awaiting input. This is a finished, permanent control,
   and dressing it as a placeholder made the panel look like a work in progress.

   Not louder, though. The six must dominate; if the strip competes, the primary
   choice is diluted. So it is better made, not more prominent.
   ========================================================================== */
.bo-composer__more {
  border: 1px solid #EFE1BE;
  border-radius: 12px;
  background: #FFFDF6;
}
.bo-composer__more[open] { background: #FFFCF2; }
.bo-composer__more-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}
.bo-composer__more-head::-webkit-details-marker { display: none; }
.bo-composer__more-head:hover { background: #FFF8E7; border-radius: 12px; }

/* The count does the work the four grey glyphs were pretending to. */
.bo-composer__more-count {
  flex-shrink: 0;
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  background: #FFF8E7;
  border: 1px solid #E4A93C;
  font-family: var(--bo-font-display);
  font-size: 12px;
  font-weight: 800;
  color: #8A5122;
}
.bo-composer__more-text { flex: 1; font-family: var(--bo-font-ui); font-size: 13.5px; color: var(--bo-ink-soft); }
.bo-composer__more-text strong { color: var(--bo-ink); font-weight: 800; }
.bo-composer__more-chev { flex-shrink: 0; color: var(--bo-ink-faint); transition: transform 180ms ease; }
.bo-composer__more[open] .bo-composer__more-chev { transform: rotate(180deg); }

/* ==========================================================================
   COMPOSER HEIGHT — the hierarchy was inverted

   Measured before this change: the type cards were 161px, 32% of the whole
   panel. The field you actually write in was 46px. The thing you DO was the
   smallest element; the thing you mostly do not do — because prediction picks
   the type — was the largest.

   Cards drop to one row of six at 58px. They still teach breadth and still
   let you correct a wrong guess, in a third of the space. That returns ~110px,
   which is why the box no longer scrolls out of view when you interact with it.
   ========================================================================== */
.bo-composer__cats {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.bo-composer__cat {
  min-height: 58px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
}
.bo-composer__cat-label { font-size: 11.5px; white-space: normal; text-align: center; line-height: 1.25; }
.bo-composer__cat svg { width: 17px; height: 17px; }

/* The type chip sits ON the field edge, not floating inside a tall box. */
.bo-composer__typechip { align-self: flex-start; margin-top: 9px; }

@media (max-width: 900px) {
  .bo-composer__cats { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .bo-composer__cats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ==========================================================================
   THE FIELD BECOMES THE HERO

   Cards are now 69px. The field was 46px — still the smallest element on a
   panel whose entire purpose is writing. A 46px box looks like a search bar,
   and people write search-bar-length things in search bars.

   Three lines at rest, 15px type. It should look like somewhere a paragraph
   goes, because a paragraph is what we want.

   This is what GO PILLS was really for. Pills themselves would have made the
   panel TALLER — six labels come to ~900px of content in an 826px column, so
   they would wrap to two rows at ~88px against the cards' 69px.
   ========================================================================== */
.bo-composer__field { min-height: 88px; align-items: flex-start; }
.bo-composer__input { font-size: 15px; line-height: 1.55; padding: 13px 0; }
.bo-composer__input::placeholder { font-size: 15px; }

/* Focus adds a little more room and the gold edge, rather than being the only
   moment the box looks usable. */
.bo-composer__field:focus-within { min-height: 108px; }

/* ==========================================================================
   FINAL COMPOSER PASS

   1 THE SUB IS GONE at rest. It said "a question, a place worth knowing,
     something that made you laugh" directly above six cards that say exactly
     that, more precisely. It still appears the moment a TYPE is picked, where
     it earns its place by explaining that specific type.

   2 LABELS 11.5px -> 12.5px, using the space the sub returned. 11.5 was the
     smallest text on the panel and near the floor for comfortable reading.

   3 THE OPEN PANEL WAS A TALL, NARROW COLUMN. Four families stacked vertically
     with the entire right half empty, and ASK sitting alone on its own row.
     Two columns halves the height and uses the width that was already there.
   ========================================================================== */
.bo-composer .bo-composer__sub { display: none; }
.bo-composer.has-type .bo-composer__sub { display: block; }

.bo-composer__cat-label { font-size: 12.5px; }

/* Two columns, so the families read as a set rather than a long list. */
.bo-composer__more-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 26px;
  align-items: start;
}
.bo-composer__family-head { margin: 10px 0 7px; }
.bo-composer__more-pills > .bo-composer__family-head:nth-child(-n+2) { margin-top: 0; }

/* The inner panel had its own background and border inside the strip's border:
   two containers doing one job. */
.bo-composer__more-panel { background: transparent; border: none; padding: 4px 16px 16px; }

@media (max-width: 700px) {
  .bo-composer__more-pills { grid-template-columns: minmax(0, 1fr); }
}

/* The earlier stacking fix forced every heading and pill group to width:100%,
   which now defeats a two-column grid. CSS columns handle it instead: each
   family flows as a block and break-inside keeps a heading with its pills. */
.bo-composer__family-head { width: auto; }
.bo-composer__family-pills { width: auto; }
.bo-composer__more-pills { display: block; column-count: 2; column-gap: 30px; }
.bo-composer__more-pills > .bo-composer__family-head { break-after: avoid; break-inside: avoid; }
.bo-composer__more-pills > .bo-composer__family-pills { break-inside: avoid; margin-bottom: 14px; }
@media (max-width: 700px) { .bo-composer__more-pills { column-count: 1; } }

/* ==========================================================================
   1 THE HIDDEN-ATTRIBUTE BUG

   display:inline-flex on the chip OVERRIDES the hidden attribute, so an empty
   chip rendered as a dark blob beside Post. Any component that toggles with
   [hidden] needs this, and several here do.
   ========================================================================== */
[hidden] { display: none !important; }

/* ==========================================================================
   2 THE CROWN MOVES UP TO THE HEADING

   Mark's idea, and it is right: the mark sat in its own 52px column beside the
   field, so every row underneath had to be indented to clear it. On the heading
   line it costs nothing and the field runs full width.
   ========================================================================== */
.bo-composer__control { padding-left: 0; }

.bo-composer__head { display: flex; align-items: center; gap: 11px; }
.bo-composer__head-mark { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; }
.bo-composer__head-mark svg, .bo-composer__head-mark img { width: 100%; height: auto; display: block; }
.bo-composer__tools, .bo-composer__attachments, .bo-composer__preview { margin-left: 0; }

/* ==========================================================================
   3 THE RAIL COMPOSER — a prompt, not a blank box

   It asked "Say something" of a person who was READING, not composing. That is
   the blank-page problem, and it is the main thing between a viewer and a
   poster: most people do not arrive with something to say, they arrive with
   something to read.

   So it now SUPPLIES the thought. A rotating prompt is a question they can
   answer rather than a void they must fill, and tapping it starts the post.
   ========================================================================== */
.bo-railpost__prompt {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 10px;
  padding: 11px 13px;
  border: 1px solid rgba(250,189,18,0.30);
  border-radius: 10px;
  background: rgba(250,189,18,0.08);
  color: #EDC550;
  font-family: var(--bo-font-serif);
  font-size: 13.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.bo-railpost__prompt:hover { background: rgba(250,189,18,0.15); border-color: rgba(250,189,18,0.55); }
.bo-railpost__prompt-label {
  display: block;
  font-family: var(--bo-font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #8FA0BC;
  margin-bottom: 5px;
}
.bo-railpost { padding: 15px 16px 14px; }
.bo-railpost__input { min-height: 56px; margin: 0 0 9px; }

/* The crown moves onto the heading line without moving in the markup: the top
   block becomes a flex row, and the mark is pulled into it with order. It sat
   in its own 52px column beside the field, so every row underneath had to be
   indented to clear it. Up here it costs nothing and the field runs full width. */
.bo-composer__mark { display: inline-flex !important; }
.bo-composer__top { display: flex; align-items: flex-start; gap: 12px; }
.bo-composer__intro { flex: 1; min-width: 0; }
.bo-composer__control { position: relative; }

.bo-composer__top { padding-left: 46px; }
.bo-composer__field { margin-left: 0; }

/* ==========================================================================
   MOBILE — tab bar, header hide-on-scroll, and the rail triage (doc 04)

   The governing decision: mobile is FEED-FIRST and the rail does not exist.
   At 390px there is no room for 340px of rail, and stacking it BELOW an
   infinite feed makes every module unreachable — the same bug that hid the
   email capture on desktop. So the rail is triaged, not squeezed.
   ========================================================================== */
.bo-tabbar { display: none; }

@media (max-width: 900px) {
  /* THE BAR NEVER HIDES: it is primary navigation and carries POST. */
  .bo-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    display: flex;
    background: #FFFFFF;
    border-top: 1px solid #EDE9E0;
    box-shadow: 0 -2px 14px rgba(11,31,58,0.08);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .bo-tab {
    flex: 1;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: #5F6878;
    font-family: var(--bo-font-ui);
  }
  .bo-tab__ico { position: relative; display: inline-flex; }
  .bo-tab__label { font-size: 10px; font-weight: 700; letter-spacing: 0.01em; }
  .bo-tab.is-on { color: #B45309; }
  .bo-tab.is-on .bo-tab__ico svg { fill: rgba(216,162,27,0.16); }
  /* ME carries the alerts dot; no tab of its own for notifications. */
  .bo-tab__dot {
    position: absolute; top: -1px; right: -2px;
    width: 8px; height: 8px; border-radius: 999px;
    background: #2F6B45; border: 1.5px solid #FFFFFF;
  }
  /* POST promoted above the other four, in the thumb zone. */
  .bo-tab--post .bo-tab__pill {
    width: 46px; height: 34px;
    border-radius: 999px;
    background: var(--bo-action-gold);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(184,136,16,0.34);
  }
  .bo-tab--post .bo-tab__label { color: #8A5122; }

  /* Clear the bar so the last card is never trapped underneath it. */
  body { padding-bottom: 92px; }

  /* THE HEADER YIELDS. Top chrome is occasional navigation, so it can give
     ~56px back to content. Directional: any upward intent brings it straight
     back. Never hidden in the top 140px. */
  .bo-header { transition: transform 220ms ease; }
  .bo-header.is-tucked { transform: translateY(-100%); }
}

@media (max-width: 620px) {
  /* No auto-scroll ticker on mobile: auto-scrolling content fights the thumb. */
  .bo-moods__track, .bo-browse__track { animation: none !important; }
  .bo-moods, .bo-browse-strip {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .bo-moods::-webkit-scrollbar, .bo-browse-strip::-webkit-scrollbar { display: none; }
  .bo-mood, .bo-browse__pill { scroll-snap-align: start; }
}

/* ==========================================================================
   TEXT TILES — a different KIND of tile, not a photo tile missing its photo

   Why they looked broken: they inherited everything from the image tiles —
   bottom-anchored text, caption position, the same tall proportions — so the
   eye read them as a photograph that failed to load.

   A text tile is not a picture with the picture removed. It is a QUOTATION
   BOARD, and it should be built like one:

     text CENTRED, not sitting where a caption would go
     the claim is the hero — display face, large, tight
     the glyph is a DESIGN ELEMENT at readable opacity, not a 6% watermark
     a deeper tint so the block reads as a deliberate colour field
   ========================================================================== */
.bo-tile--text {
  justify-content: center;
  align-items: flex-start;
  padding: 22px 20px;
  gap: 0;
}

/* The glyph anchors the tile the way a subject anchors a photograph. Big,
   bled off the corner, and actually visible — at 6% it was doing nothing. */
.bo-tile__mark {
  top: auto;
  bottom: -38px;
  right: -8px;
  font-size: 150px;
  opacity: 0.13;
  line-height: 0.8;
}
.bo-tile--text:hover .bo-tile__mark { opacity: 0.20; }

/* The claim carries the tile, so it gets the display face and real size.
   Serif at 15px read as body copy sitting in an empty box. */
.bo-tile__claim {
  font-family: var(--bo-font-display);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.22;
  margin: 0;
  max-width: 24ch;
  position: relative;
  z-index: 2;
}

/* A rule above the claim, in the family ink: it gives the block a top edge to
   sit under, which is what the photo tiles get from the image itself. */
.bo-tile--text .bo-tile__kind {
  position: static;
  align-self: flex-start;
  margin-bottom: 12px;
  background: transparent;
  border-left: 3px solid currentColor;
  border-radius: 0;
  padding: 1px 0 1px 9px;
  box-shadow: none;
}
.bo-tile--text .bo-tile__meta { position: relative; z-index: 2; margin-top: 12px; }

/* ==========================================================================
   VARIANT D — the text STRIP

   A strip is short and wide, so one line of text FILLS it. That is the whole
   fix: the old text tiles were 210px tall holding a single sentence, which is
   why they read as a photograph that failed to load rather than a design
   choice. Nothing about the colour was wrong.

   Different shape = different KIND. The eye stops comparing them to the
   photographs and starts reading them as what they are.
   ========================================================================== */
.bo-mosd { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }

.bo-tile--strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: transform 170ms ease, box-shadow 170ms ease;
}
.bo-tile--strip:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,31,58,0.14); }
.bo-strip__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; position: relative; z-index: 2; }
.bo-strip__kind {
  font-family: var(--bo-font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink);
  opacity: 0.75;
}
/* Display face, not serif: at strip size the claim IS the headline. */
.bo-strip__claim {
  font-family: var(--bo-font-display);
  font-weight: 800;
  letter-spacing: -0.016em;
  line-height: 1.2;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bo-strip__meta {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--bo-font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  opacity: 0.8;
}
/* The glyph sits behind, sized to the strip rather than a tall tile. */
.bo-tile--strip .bo-tile__mark {
  position: absolute;
  right: -6px; top: -26px; bottom: auto;
  font-size: 108px;
  opacity: 0.11;
  color: var(--ink);
  line-height: 1;
}
@media (max-width: 900px) {
  .bo-mosd { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bo-mosd .bo-tile { grid-column: span 1 !important; }
  .bo-mosd .bo-tile--strip { grid-column: span 2 !important; }
}

/* ==========================================================================
   VARIANT E — one grid, three sizes

   12 columns, 12px gutters. Every edge lines up down the whole block, which is
   most of what "organised" actually means. The earlier mosaics had eleven
   tiles at seven sizes and no column rhythm, so the eye read scatter.
   ========================================================================== */
.bo-mose {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 12px;
}














/* TEXT TREATMENT — same box, different surface. Because the shape is
   identical to its neighbours, a text tile reads as a VARIANT rather than a
   hole. That is what every earlier attempt got wrong: the text tile was always
   a different shape from the image tile beside it, so it looked like a fault. */
.bo-etile.is-text { justify-content: center; }









@media (max-width: 900px) {



}
@media (max-width: 560px) {

}

/* ==========================================================================
   VARIANT E — EXPLICIT PLACEMENT

   THE BUG: a 400px lead beside 194px side tiles, with placement left on auto.
   The lead spans 7 columns and the sides span 5, so the second side could not
   sit under the first — it wrapped to row two, leaving a 206px hole under the
   first side tile and staggering everything below.

   The arithmetic was always right: 194 + 12 + 194 = 400. But a grid only
   stacks them beside the lead if you SAY SO. Auto-placement will not infer it.
   ========================================================================== */
.bo-mose {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 194px 194px 220px;
  gap: 12px;
}









@media (max-width: 900px) {








}
@media (max-width: 560px) {








}

/* The since-strip. Quiet, factual, and absent whenever it has nothing to say. */
.bo-since { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bo-since__label {
  font-family: var(--bo-font-ui); font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.12em; color: var(--bo-ink-faint);
}
.bo-since__items { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bo-since__item {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 11px;
  border-radius: 999px; border: 1px solid #EDE9E0; background: #FFFFFF;
  font-family: var(--bo-font-ui); font-size: 12.5px; font-weight: 700;
  color: var(--bo-ink); text-decoration: none;
}
.bo-since__item:hover { border-color: var(--bo-action-gold); background: #FFF8E7; }
/* Personal items lead visually, because they are the only ones that are about
   the reader rather than about the platform. */
.bo-since__item.is-you { background: #FFF8E7; border-color: #E4A93C; color: #8A5122; }

/* ==========================================================================
   COMPOSER — TRIM THE SLACK, KEEP THE INVITATION

   Mark's call, and the reasoning behind it is worth recording: every mature
   platform collapses its composer, but they are all places where posting is an
   established habit. Nobody arrives at BEST OF intending to post, because
   nobody knows yet that they can. The six cards are doing a teaching job that
   X and Reddit stopped needing years ago.

   The asymmetry decides it: collapsing and being wrong costs posts during the
   phase where each one matters most, and an empty platform compounds. Leaving
   it and being wrong costs a bit of scrolling. Not the same bet.

   So: take the DEAD space only. Every reduction below is slack — padding,
   gaps, and a field holding nothing at rest. Nothing that teaches is touched.

   Measured before: 410px. The 67px gap between field and cards was the worst
   offender — a 44px toolbar row wearing 23px of slack.
   ========================================================================== */
.bo-composer { padding: 16px 20px 14px; }

/* 88px at rest was a field braced for a paragraph nobody had written yet.
   66px still reads as "a paragraph goes here" and it still grows on focus. */
.bo-composer__field { min-height: 66px; }
.bo-composer__field:focus-within { min-height: 104px; }

/* The toolbar row was carrying 12px above and the cards another 11px below. */
.bo-composer__tools { margin-top: 8px; }
.bo-composer__post { margin-top: 8px; }
.bo-composer__cats { margin-top: 6px; }
.bo-composer__more { margin-top: 8px; }
.bo-composer__unanswered { margin-top: 11px; }

/* The heading block sat 11px clear of a control that already has its own
   breathing room. */
.bo-composer__top { margin-bottom: 8px; }

/* ==========================================================================
   THE SIDE SLOT BECOMES TWO HALVES

   194px holding one line was the same fault as the old variant C: a height
   sized for a photograph, carrying a sentence. Text needs less room, so the
   same space now carries two items — an eighth tile out of space that was
   already being wasted.

   Rows: 194 (side) / 91 (half) / 91 (half) / 220 (quads). The lead spans the
   first three, so it still reads as one tall block beside them.
   ========================================================================== */
.bo-mose { grid-template-rows: 194px 91px 91px 220px; }











/* A half is a STRIP: centred, one line, badge inline rather than floating in a
   corner it would otherwise share with nothing. */
.bo-etile--half { justify-content: center; }





@media (max-width: 900px) {









}

/* ==========================================================================
   TWO FIXES

   1 THE CROWN WAS BLEEDING OUT OF THE PANEL. It was pinned at top:-62px
     relative to the control, which was right at the old padding. Trimming the
     composer left the offset behind and it pushed 9px through the top edge.
     An absolute offset that depends on padding elsewhere will break every time
     that padding changes — so it is anchored to the heading row instead.

   2 THE RAIL PROMPT LOOKED LIKE A SECOND INPUT. A bordered box directly above
     the real field reads as two fields. A suggestion should look like speech,
     not like somewhere to type: no border, no box, just the words.
   ========================================================================== */
.bo-composer__top { position: relative; padding-left: 44px; }


/* The prompt is speech, not a field. */
.bo-railpost__prompt {
  border: none;
  background: transparent;
  padding: 0 0 12px;
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  border-radius: 0;
  margin-bottom: 12px;
}
.bo-railpost__prompt:hover { background: transparent; }
.bo-railpost__prompt:hover .bo-railpost__prompt-q { text-decoration: underline; text-underline-offset: 3px; }
.bo-railpost__prompt-label { margin-bottom: 4px; }

/* ==========================================================================
   MOSAIC POLISH

   1 THE GRADIENT WAS DROWNING THE PHOTOGRAPHS. 0.92 at the base with a slow
     ramp meant the wash reached most of the way up the tile. Tightening it to
     the lower 62% keeps the text legible and lets the top of each image breathe
     — which is the whole reason for choosing a photograph over a colour block.

   2 TITLES WERE RUNNING TO THREE LINES on some tiles and one on others, so
     tiles competed unevenly. Clamped: two lines everywhere except the lead.

   3 ON TEXT TILES THE BADGE FLOATED with nothing holding it. On an image tile
     the photograph anchors it; on a pale surface it needs to sit in the flow.
   ========================================================================== */
.bo-etile__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}



/* Text tiles: badge in the flow, content top-aligned, nothing floating. */
.bo-etile.is-text { justify-content: flex-start; padding-top: 16px; }



/* The glyph is a watermark, not a character on the page. */
.bo-etile__mark { opacity: 0.10; }


/* A hairline lifts each tile off the cream background without a heavy border. */
.bo-etile { box-shadow: 0 1px 2px rgba(11,31,58,0.06); }

/* ==========================================================================
   MOSAIC — LEGIBILITY AND RHYTHM

   1 THE QUESTION TILE WAS UNREADABLE. I lightened the gradient last pass and
     overshot: white text over pale furniture had nothing behind it. The base
     is stronger now and the ramp steeper, so text is safe on any photograph
     while the top of the image still breathes.

   2 THE TWO TEXT TILES HAD DIFFERENT RHYTHMS — one sat its title high, the
     other low. Every tile now behaves identically: badge at the top, content
     anchored to the base, exactly as the image tiles do.

   3 THE GLYPH SCALE WAS INCONSISTENT: the star dominated its tile while the
     quotation mark receded. Sized by SLOT now, not by character.

   4 THE META RECEDES. It is supporting information, not a headline, and at
     full white it competed with the titles on every tile.
   ========================================================================== */
.bo-etile.is-text { justify-content: flex-start; }


/* One scale per slot, so no glyph shouts and none disappears. */
.bo-etile__mark { font-size: 120px; bottom: -28px; right: -6px; opacity: 0.09; }





/* Supporting, not competing. */
.bo-etile__meta { font-size: 11px; color: rgba(255,255,255,0.78); font-weight: 600; }


/* A clearer step between rows: lead, side, quad, half. */
.bo-etile--lead .bo-etile__title { font-size: 27px; letter-spacing: -0.022em; }




/* Badges: same size everywhere, so the eye reads them as one system. */
.bo-etile__kind { font-size: 9.5px; padding: 4px 9px; letter-spacing: 0.09em; }

/* ==========================================================================
   THE MOSAIC — CONSOLIDATED 26 Aug 2026

   Every mosaic rule now lives here, once. This replaced four layers of
   corrections written across the morning, where the last rule written won by
   accident rather than intent — which is why the same faults kept resurfacing
   in slightly different forms (an invisible title, a crown outside its panel,
   two badge sizes, two vertical rhythms).

   STRUCTURE: 12 columns, four rows, everything placed EXPLICITLY. Auto-placement
   is what left a 206px hole under the first side tile.

     row 1   lead (cols 1-7, spans 3 rows)   side  (cols 8-12)
     row 2                                    half  (cols 8-12)
     row 3                                    half  (cols 8-12)
     row 4   quad · quad · quad · quad  (3 cols each)

   TEXT AND IMAGE ARE THE SAME BOX. A text tile is not a photo tile with the
   photo removed — it is the same shape with a different surface, which is what
   lets it read as a variant rather than a hole.
   ========================================================================== */
.bo-mose {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 194px 91px 91px 220px;
  gap: 12px;
}

.bo-etile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 4px;
  padding: 16px;
  height: auto;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 2px rgba(11,31,58,0.06);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.bo-etile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11,31,58,0.22); }

/* Explicit placement. Nothing flows. */
.bo-etile--lead { grid-column: 1 / span 7;  grid-row: 1 / span 3; padding: 22px; }
.bo-etile--side:nth-of-type(2) { grid-column: 8 / span 5; grid-row: 1; }
.bo-etile--half { grid-column: 8 / span 5; padding: 14px 16px; }
.bo-etile--half:nth-of-type(3) { grid-row: 2; }
.bo-etile--half:nth-of-type(4) { grid-row: 3; }
.bo-etile--quad { grid-row: 4; }
.bo-etile--quad:nth-of-type(5)  { grid-column: 1 / span 3; }
.bo-etile--quad:nth-of-type(6)  { grid-column: 4 / span 3; }
.bo-etile--quad:nth-of-type(7)  { grid-column: 7 / span 3; }
.bo-etile--quad:nth-of-type(8)  { grid-column: 10 / span 3; }


/* BADGE POSITION IS NOT UNIFORM, AND SHOULD NOT BE.

   Consolidating, I made every badge absolute for consistency. That broke the
   short tiles: a 91px half has no room for an absolute badge AND a title
   underneath, so the title ran up beneath it. Same on text tiles, where the
   content sits high rather than at the base.

   Uniformity was the wrong goal. A badge floats over a PHOTOGRAPH, which is
   what holds it; on a short or pale tile it has to sit in the flow and take
   its own space. Same size everywhere, position decided by the tile. */
.bo-etile--half .bo-etile__kind,
.bo-etile.is-text .bo-etile__kind {
  position: static;
  align-self: flex-start;
  margin-bottom: 7px;
}
.bo-etile--half { justify-content: center; }
.bo-etile--half .bo-etile__body { margin-top: 0; }
/* TEXT TILES CENTRE THEIR CONTENT.

   I had them push the title to the base, copying the image tiles. But an image
   tile can do that because the PHOTOGRAPH fills the space above — on a pale
   tile it left ~100px of empty colour between the badge and the title, which
   reads as something that failed to load.

   Centred, the block sits as one unit and the tint becomes a deliberate
   surface rather than a gap. The glyph then anchors the corner instead of
   competing with a floating title. */
.bo-etile.is-text:not(.bo-etile--half) { justify-content: center; }
.bo-etile.is-text:not(.bo-etile--half) .bo-etile__body { margin-top: 0; }
.bo-etile.is-text .bo-etile__kind { align-self: flex-start; }
/* A little more room between the words and the meta than an image tile needs,
   because there is no photograph doing the separating. */
.bo-etile.is-text .bo-etile__body { gap: 9px; }

/* ONE badge size everywhere, so the eye reads them as a single system. */
.bo-etile__kind {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  font-family: var(--bo-font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  background: rgba(255,255,255,0.94);
  color: var(--ink);
  border-radius: 6px;
  padding: 4px 9px;
}

.bo-etile__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.bo-etile__title {
  font-family: var(--bo-font-display);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: #FFFFFF;
  text-shadow: 0 1px 14px rgba(6,16,32,0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* One clear step per row. */
.bo-etile--lead .bo-etile__title { font-size: 27px; letter-spacing: -0.022em; -webkit-line-clamp: 3; }
.bo-etile--side .bo-etile__title { font-size: 17px; }
.bo-etile--quad .bo-etile__title { font-size: 15px; }
.bo-etile--half .bo-etile__title { font-size: 14px; }

/* Supporting information, never competing with a headline. */
.bo-etile__meta {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--bo-font-ui); font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.78);
}

/* TEXT TILES: same box, different surface. Badge stays pinned, content stays
   anchored to the base — identical rhythm to an image tile. */
.bo-etile.is-text .bo-etile__title { color: var(--ink); text-shadow: none; }
.bo-etile.is-text .bo-etile__meta  { color: var(--ink); opacity: 0.62; }
.bo-etile.is-text .bo-etile__kind  { background: rgba(255,255,255,0.78); }

/* One glyph scale per slot: none shouts, none disappears. */
.bo-etile__mark {
  position: absolute;
  right: -6px; bottom: -28px;
  font-family: var(--bo-font-serif);
  font-size: 120px;
  line-height: 0.8;
  color: var(--ink);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
}
.bo-etile--lead .bo-etile__mark { font-size: 240px; bottom: -56px; }
.bo-etile--side .bo-etile__mark { font-size: 150px; bottom: -34px; }
.bo-etile--half .bo-etile__mark { font-size: 78px;  bottom: -16px; }
.bo-etile:hover .bo-etile__mark { opacity: 0.14; }

.bo-mose__more {
  display: inline-block; margin-top: 14px;
  font-family: var(--bo-font-ui); font-size: 13px; font-weight: 700;
  color: var(--bo-gold-ink); text-decoration: none;
}
.bo-mose__more:hover { color: #92400E; }

@media (max-width: 900px) {
  .bo-mose { grid-template-rows: 260px 170px 86px 86px 170px 170px; }
  .bo-etile--lead { grid-column: 1 / span 12; grid-row: 1; }
  .bo-etile--side:nth-of-type(2) { grid-column: 1 / span 12; grid-row: 2; }
  .bo-etile--half:nth-of-type(3) { grid-column: 1 / span 12; grid-row: 3; }
  .bo-etile--half:nth-of-type(4) { grid-column: 1 / span 12; grid-row: 4; }
  .bo-etile--quad:nth-of-type(5) { grid-column: 1 / span 6;  grid-row: 5; }
  .bo-etile--quad:nth-of-type(6) { grid-column: 7 / span 6;  grid-row: 5; }
  .bo-etile--quad:nth-of-type(7) { grid-column: 1 / span 6;  grid-row: 6; }
  .bo-etile--quad:nth-of-type(8) { grid-column: 7 / span 6;  grid-row: 6; }
  .bo-etile--lead .bo-etile__title { font-size: 21px; }
}

/* THE CROWN LIVES IN THE CONTROL ROW, NOT THE HEADING ROW.

   That was the actual fault behind eight rules of drift. Every attempt to put
   it "on the heading line" was positioning it ABSOLUTELY out of one container
   and into another — which works only until the padding around it changes, and
   then it lands wherever the old offset points. It has been chasing the layout
   all morning.

   So it stays where it is in the markup: first item in the control row, beside
   the field, aligned to the top of it. No offsets, nothing to drift. */
.bo-composer__control { align-items: flex-start; }
.bo-composer__mark {
  position: static;
  order: 0;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 6px 10px 0 0;
  transform: none;
  display: inline-flex;
  align-items: center;
}
.bo-composer__top { display: block; padding-left: 0; margin-bottom: 8px; }

/* ==========================================================================
   THE CROWN — CONSOLIDATED

   EIGHT competing rules had accumulated on this one element. The winner was
   placing it at top:59px inside a 28px heading block, so it sat 43px too low
   and landed on the input field.

   Every earlier attempt was an absolute offset measured from something else —
   and each time the padding around it changed, the crown moved. So it is not
   positioned at all now: it is a flex item in the heading row, and it sits
   beside the heading because that is where it is in the layout.
   ========================================================================== */
.bo-composer__top {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-left: 0;
  position: static;
  margin-bottom: 8px;
}
.bo-composer__mark {
  position: static;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0;
  transform: none;
  display: inline-flex;
  align-items: center;
}
.bo-composer__mark svg,
.bo-composer__mark img { width: 100%; height: auto; display: block; }
.bo-composer__intro { flex: 1; min-width: 0; }

/* ==========================================================================
   THE CROWN SITS WITH THE HEADLINE

   In the control row it read as attached to the input box and kept colliding
   with it. Beside the headline it reads as the platform speaking, which is
   what a mark is for. Moved in the MARKUP, so nothing has to position it and
   nothing can drift when padding changes.
   ========================================================================== */
.bo-composer__headline { display: flex; align-items: center; gap: 10px; }
.bo-composer__headline .bo-composer__mark {
  position: static; flex: 0 0 30px; width: 30px; height: 30px; margin: 0;
  transform: none; display: inline-flex; align-items: center;
}
.bo-composer__headline .bo-composer__head { margin: 0; }
.bo-composer__control { padding-left: 0; }

/* ==========================================================================
   THE RAIL COMPOSER — ONE ASK

   It was making four in one small card: "Say something", "Not sure what to
   post?", a rotating question, and "What should BEST OF know?". Four asks read
   as none, because the reader has to work out which one to answer.

   Now: a headline that says why to bother, ONE question, and a box. The
   rotating prompt IS the placeholder — a second question underneath was
   competing with the one above it.
   ========================================================================== */
.bo-railpost__head { font-size: 16px; margin-bottom: 10px; }
.bo-railpost__prompt {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0 0 12px;
  border-bottom: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.bo-railpost__prompt-label { display: none; }
.bo-railpost__prompt span:last-child {
  font-family: var(--bo-font-serif);
  font-size: 15px;
  line-height: 1.4;
  color: #EDC550;
}
.bo-railpost__prompt:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.bo-railpost__input { min-height: 62px; }



/* The crown sits beside the headline. Now that its span closes properly, this
   is all it needs — a flex row and a fixed mark. Every earlier attempt was
   compensating for the missing tag, which is why each one broke differently. */
.bo-composer__top { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 8px; }
.bo-composer__mark { position: static; flex: 0 0 30px; width: 30px; height: 30px; margin: 0; overflow: visible; transform: none; display: inline-flex; align-items: center; }
.bo-composer__mark svg, .bo-composer__mark img { width: 30px; height: 30px; display: block; }
.bo-composer__intro { flex: 1 1 auto; min-width: 0; }
.bo-composer__control { padding-left: 0; align-items: flex-start; }

/* ==========================================================================
   THE ORPHANED CROWN SVG

   Closing the mark span put the </span> BEFORE the svg, so the mark is empty
   and the crown escaped into the control row as a direct child — with no size
   constraint it rendered 813px tall, which is the whole of the composer's
   excess height.

   Rather than another blind markup edit, the control row constrains any svg
   that lands directly in it. The mark is empty and simply collapses.
   ========================================================================== */
.bo-composer__control > svg {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  max-height: 30px;
  align-self: flex-start;
  margin: 6px 10px 0 0;
  order: -1;
}
.bo-composer__mark:empty { display: none; }

/* ==========================================================================
   THE RAIL COMPOSER MATCHES THE MAIN ONE

   Navy made it read as a different KIND of thing — the owner band and the join
   band are navy, so in a pale rail it looked like another promotional module
   rather than the composer it actually is.

   Cream with a gold left rule says plainly: this is the same tool, always in
   reach. One posting surface with two positions, not two different things.

   It keeps its own scale — smaller type, no type cards — because it is the
   interceptor and the main composer is the destination. Same identity,
   different job.
   ========================================================================== */
.bo-railpost {
  /* Exactly the main composer's cream. --bo-cream resolved to #FDF8EC, close
     enough to read as a mistake rather than a match. */
  background: #FFF8E7;
  border: 1px solid #EFE1BE;
  border-left: 3px solid var(--bo-action-gold, #FABD12);
  border-radius: 4px;
  padding: 16px 18px 15px;
}
.bo-railpost__head {
  color: var(--bo-ink, #080C0F);
  font-family: var(--bo-font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
}
.bo-railpost__prompt span:last-child { color: #8A5122; }
.bo-railpost__prompt:hover span:last-child { color: #6F3F19; }
.bo-railpost__input {
  background: #FFFFFF;
  border: 1px solid var(--bo-border, #EDE9E0);
  color: var(--bo-ink, #080C0F);
  min-height: 62px;
}
.bo-railpost__input::placeholder { color: var(--bo-ink-faint, #8A93A3); }
.bo-railpost__input:focus { border-color: var(--bo-action-gold, #FABD12); outline: none; }
.bo-railpost__note { color: var(--bo-ink-soft, #5F6878); }
.bo-railpost__saved { color: #8A5122; }
.bo-railpost__chip { border-color: #E4A93C; color: #8A5122; background: #FFF8E7; }

/* ==========================================================================
   RAIL COMPOSER — TYPE ROW

   Six words instead of one rotating question. They show what the box accepts
   without asking for any one of them, and each is a shortcut rather than a
   filter — prediction still runs and can override the choice as they write.
   ========================================================================== */
.bo-railpost__types {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 9px 0 12px;
}
.bo-railpost__type {
  border: 1px solid var(--bo-border, #EDE9E0);
  background: #FFFFFF;
  border-radius: 999px;
  padding: 5px 10px;
  font-family: var(--bo-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bo-ink-soft, #5F6878);
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.bo-railpost__type:hover { border-color: var(--bo-action-gold, #FABD12); color: var(--bo-ink, #080C0F); }
.bo-railpost__type.is-on {
  background: #FFF8E7;
  border-color: #E4A93C;
  color: #8A5122;
}
.bo-railpost__head { margin-bottom: 4px; }
.bo-railpost__note { font-size: 11.5px; margin-top: 8px; }

/* The spark sits UNDER the field as a quiet suggestion, not above it as a
   headline. That placement is the whole difference: a prompt at the top tells
   you what the box is FOR; a prompt underneath offers one thing you COULD say. */
.bo-railpost__spark {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0 0 12px;
  cursor: pointer;
  font-family: var(--bo-font-serif);
  font-size: 13px;
  line-height: 1.4;
  color: #8A5122;
}
.bo-railpost__spark::before {
  content: "Try: ";
  font-family: var(--bo-font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--bo-ink-faint, #8A93A3);
}
.bo-railpost__spark:hover span { text-decoration: underline; text-underline-offset: 3px; }
.bo-railpost__types { margin: 9px 0 8px; }

/* A fade, not a slide. A slide draws the eye to the movement; a fade draws it
   to the new words, which is the point. */
.bo-railpost__spark span { transition: opacity 260ms ease; }
.bo-railpost__spark.is-fading span { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .bo-railpost__spark span { transition: none; }
}

/* The placeholder fades between prompts. Inside a fixed-height field nothing
   can resize, which is what made the card jump when the line sat underneath. */
.bo-railpost__input::placeholder { transition: opacity 260ms ease; opacity: 1; }
.bo-railpost__input.is-fading::placeholder { opacity: 0; }
.bo-composer__input::placeholder { transition: opacity 260ms ease; opacity: 1; }
.bo-composer__input.is-fading::placeholder { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .bo-railpost__input::placeholder, .bo-composer__input::placeholder { transition: none; }
}

/* Post button matches the main composer: icon then label. */
.bo-railpost__post { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.bo-railpost__spark { display: none; }

/* ==========================================================================
   THE MARK ON THE RAIL COMPOSER

   ON THE HEADING LINE, not beside the field. The rail is 340px: a 30px mark
   plus its gap takes ~12% of that and narrows the input, which is the one
   element that most needs the width. In the main composer at 782px that cost
   is trivial; here it is not. The heading row already exists and has room.

   22px rather than 30px — it is identifying a small panel, not fronting a
   large one. And it is hard-capped, because an unconstrained SVG in a flex row
   is exactly what swallowed the main composer earlier today.
   ========================================================================== */
.bo-railpost__headrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.bo-railpost__mark {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}
.bo-railpost__mark > svg,
.bo-railpost__mark > img {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  display: block;
}
.bo-railpost__headrow .bo-railpost__head { margin: 0; }

/* ==========================================================================
   THE SOLO RAIL, AND MODULES IN THE FEED
   ========================================================================== */
.bo-home__rail.is-solo { align-self: start; }
.bo-home__rail.is-solo .bo-railpost { position: sticky; top: 88px; }

/* A module in the feed is a GUEST, not a card. It carries the gold rule so it
   reads as ours rather than as somebody's post — a module dressed as a post
   would be the platform talking in the community's voice. */
.bo-infeed {
  border-left: 3px solid var(--bo-action-gold, #FABD12);
  margin: 0 0 14px;
}
.bo-infeed + .bo-card { margin-top: 0; }

/* Empty below the composer, and it stays empty. Filling it means putting
   something where nobody looks, which is the problem this change solved. */
@media (min-width: 901px) {
  .bo-home__rail.is-solo { max-height: none; }
}

/* ==========================================================================
   THE CARD ANSWERS BACK

   is-risen was already being set on the card and NOTHING was listening for it,
   so the button animated alone and the content it referred to sat inert. The
   ripple was in the design and never built.

   A wash rather than a flash: it should feel like the card acknowledging you,
   not like the interface celebrating itself. 620ms, once, no repeat.
   ========================================================================== */
@keyframes bo-risen-wash {
  0%   { box-shadow: 0 0 0 0 rgba(216,162,27,0.45), 0 1px 2px rgba(11,31,58,0.06); }
  45%  { box-shadow: 0 0 0 7px rgba(216,162,27,0.14), 0 6px 22px rgba(216,162,27,0.22); }
  100% { box-shadow: 0 0 0 0 rgba(216,162,27,0), 0 1px 2px rgba(11,31,58,0.06); }
}
.bo-card.is-risen { animation: bo-risen-wash 620ms cubic-bezier(0.22,0.9,0.3,1) 1; }

/* The rail keeps a permanent trace afterwards, so a card you have risen still
   looks different tomorrow. The moment passes; the record should not.
   ⭐ Rise is the row's one ink-ceiling exception (#080C0F, the only primary) —
   the amber tint this used to carry was the retired accent brown standing in
   for "you did this," when solid ink is what the row's own rule names. */
.bo-card.is-risen .bo-card__rise { background: #080C0F; border-color: #080C0F; }
.bo-card.is-risen .bo-card__rise-label { color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .bo-card.is-risen { animation: none; }
}

/* ==========================================================================
   THE CONSEQUENCE LINE

   Sits in the rail directly under the button, because that is where the eye
   already is — they just pressed the thing above it. It arrives, then settles.
   ========================================================================== */
.bo-card__felt {
  display: block;
  margin: 7px 0 0;
  font-family: var(--bo-font-ui);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: #080C0F;
  text-align: center;
  animation: bo-felt-in 420ms cubic-bezier(0.2,0.8,0.3,1.1) both;
}
.bo-card__felt strong { font-family: var(--bo-font-display); font-size: 13px; }
@keyframes bo-felt-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* The second line is quieter than the first: the rank is the news, the person
   is the reason. It should not compete. */
.bo-card__felt-sub {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bo-ink-faint, #8A93A3);
  animation: bo-felt-in 380ms ease both;
}

/* The permanent trace. The MOMENT should pass; the RECORD should not — a card
   you have risen still looks different tomorrow.
   ⚠⚠ A THIRD, !important-GUARDED COPY OF THE SAME RULE, missed on the first
   pass through this file: two other near-identical blocks fixed above,
   this one left the retired accent brown sitting behind !important, which
   would have beaten either of those fixes outright regardless of source
   order. Same rule as the others — ink, never the retired brown. */
.bo-card.is-risen .bo-card__rise,
.bo-card[data-bo-felt="1"] .bo-card__rise {
  background: #080C0F !important;
  border-color: #080C0F !important;
}
.bo-card.is-risen .bo-card__rise-label,
.bo-card[data-bo-felt="1"] .bo-card__rise-label { color: #FFFFFF !important; }

@media (prefers-reduced-motion: reduce) {
  .bo-card__felt, .bo-card__felt-sub { animation: none; }
}

/* ==========================================================================
   THE MERGED HERO — pitch only, no scatter

   With the hook cards gone the masthead has no right-hand column, so the two
   column grid becomes one. It is now purely explanatory and roughly half the
   height, flowing straight into the mosaic which does all the visual work.

   ONE PITCH, ONE VISUAL BLOCK, THEN THE FEED — instead of a pitch, a
   mini-mosaic, a repeated headline and then the real mosaic.
   ========================================================================== */



/* Without a column beside it the pitch would run the full page width, which is
   unreadable. Capped at a comfortable measure and left-aligned, so it reads as
   an introduction rather than a banner. */


.bo-mh { padding-bottom: 26px; }

/* The three figures sit in a row rather than a column now there is room. */


/* ==========================================================================
   THE HERO IS ONE COLUMN NOW

   Removing the card scatter left the column it occupied behind — an empty half
   with orphaned sparkles floating in it, because the sparkles were separate
   elements from the cards they decorated. Half a change is worse than none.

   The pitch now uses the full shell. Two changes make that readable rather
   than a wall: the headline goes larger because it has room, and the prose
   stays capped at a comfortable measure. A 40px headline can span 1200px; a
   paragraph cannot.
   ========================================================================== */
.bo-mh__scatter, .bo-mh__cards, .bo-mh__right,
.bo-mh .bo-twinkle, .bo-mh__spark, .bo-mh__sparkle,
.bo-mh [class*="twinkle"], .bo-mh [class*="spark"] { display: none !important; }




/* Prose keeps its measure; the headline takes the width. */




/* The figures were a stacked column beside the cards. In a full-width hero
   they read as a row, and they close the block. */

.bo-mh { padding-bottom: 28px; }

@media (max-width: 900px) {

  .bo-mh__figures, .bo-mh__stats { gap: 26px; }
}

/* THE GRID IS .bo-masthead__inner, NOT .bo-mh__inner.

   I had been targeting a class that does not exist, which is why the two-column
   split survived every attempt and the right half stayed empty. Found by walking
   the parent chain from the pitch and reading grid-template-columns off each
   ancestor — the element holding a layout is not always the one named after it. */

.bo-masthead__inner > *:not(.bo-mh__pitch) { display: none !important; }


/* ==========================================================================
   WIDEN — the last constraint was my own

   The container went full width but the TEXT stayed left, because max-width:
   16ch on the headline and 54ch on the standfirst were measures I set for a
   narrow column. With the column gone they became the constraint.

   A headline can span the shell; prose cannot. So the headline goes bigger and
   wider, the reading measures stay generous but capped, and the whole block
   reads as an opening statement rather than a sidebar.
   ========================================================================== */


/* Prose keeps a comfortable measure — a 1200px paragraph is unreadable — but
   wide enough that it no longer looks like a column with a hole beside it. */



/* The supporting rows sit on one line now there is width for them. */



@media (max-width: 900px) {


  .bo-mh__figures, .bo-mh__stats { gap: 26px; }
}

/* ==========================================================================
   THE HERO IS A BAND, NOT A PAGE

   588px of pitch with an empty right half read as half-built — because it was:
   one column of a two-column layout removed, the other stretched over the gap.

   The fault was HEIGHT, not width. A tall block with nothing beside it looks
   broken; a SHORT one that spans the page looks deliberate. So the pitch
   becomes a horizontal band — the eight stacked parts laid out in two columns
   across the full shell, ~220px instead of 588.

   It also resolves the tension in the whole hero question: the explanation is
   still there for a first-time visitor who does not know what RISE means, and
   the mosaic now starts near the fold instead of 900px down.
   ========================================================================== */









/* The promise line is the one thing that will not fit a band without crowding
   it, and the RISE definition already carries the same idea. */


/* Tighter type: a band needs a headline that fits two lines, not four. */





@media (max-width: 900px) {


}

/* ==========================================================================
   THE BAND, COMPOSED — split by KIND, not by position

   The first attempt was the left column cut in half: the eyebrow sat beside
   the RISE definition, which has nothing to do with it, and the CTA that
   COMPLETES the headline was stranded bottom-right. One thought broken across
   two columns, with a gap in the middle of each.

   The columns now divide by what things ARE:

     LEFT   what we say      eyebrow -> headline -> standfirst -> the buttons
                             a single narrative, read top to bottom, ending in
                             the action it argues for

     RIGHT  why believe it   how RISE works -> who is here -> the numbers
                             every item is evidence for the claim on the left

   Each column now reads on its own, and they answer each other across the gap
   rather than sitting at the same altitude by accident.
   ========================================================================== */


/* LEFT — the argument, ending in the button. */





/* RIGHT — the evidence, in descending weight. */




/* The figures were a separate strip under a rule, floating clear of both
   columns. As the foot of the evidence column they belong to something. */







@media (max-width: 900px) {



}

/* ==========================================================================
   BALANCE

   Measured: the left COLUMN was 622px but the standfirst rendered at 370px and
   wrapped to four lines — my own max-width:40ch choking prose inside a column
   that had room for it. And the right column ended 115px above the left, so
   the evidence clustered at the top with a hole beneath.

   Two fixes: let the prose use its column, and let the evidence column
   DISTRIBUTE down the band rather than stack tight.
   ========================================================================== */



/* The evidence column spreads to the height of the argument beside it, so the
   two finish together instead of one trailing off. */




/* A hairline above the figures gives the evidence column a foot, the way the
   buttons give the argument column one. Without it the numbers float. */


@media (max-width: 900px) {


}

/* ==========================================================================
   THE EVIDENCE COLUMN, COMPOSED

   It read as "spread to fill" because it WAS: I had stretched three items to
   match the height of the argument beside them. And one of the three was a
   duplicate — 716K appeared in the face pile AND again in the figures, the
   same number under a different label 300px apart.

   With the duplicate gone there is no need to stretch. The column is now a
   TIGHT BLOCK, top-aligned, reading downward in one movement:

     how it works   ->   who is here   ->   how much they have done

   Empty space beneath a top-aligned block reads as intentional. Empty space
   BETWEEN stretched items reads as a mistake. That is the whole difference.
   ========================================================================== */


/* One tight stack. Nothing stretches, nothing is pushed to the bottom. */




/* The single remaining figure sits at the same weight as the face count, so
   the two read as a pair of facts rather than a heading and a footnote. */


/* ==========================================================================
   NO GRID — TWO INDEPENDENT COLUMNS

   THE WASTED SPACE WAS THE GRID ITSELF. Items in a shared grid row must start
   at the same height, so the tall RISE definition pushed the headline ~200px
   down, and the tall headline pushed 1.22M ~220px down. Every item was held
   hostage by whatever happened to sit opposite it. Roughly a third of the band
   was gaps created by that coupling.

   Floats give genuinely independent columns: each stack flows tightly on its
   own and nothing waits for its neighbour. No markup change, no row coupling,
   and it collapses cleanly on mobile.
   ========================================================================== */



/* RIGHT — the evidence. Floated, so it flows on its own. */
.bo-mh__risedef,
.bo-mh__faces,





/* LEFT — the argument. Flows normally beside the float. */







@media (max-width: 900px) {


}

/* A float only clears what comes BEFORE it in the markup, and the evidence
   items sit after the eyebrow, title and standfirst — so they were pushed below
   all three instead of starting at the top of the band. Absolute placement in a
   relative parent gives the right column its own origin. */





@media (max-width: 900px) { .bo-mh__pitch { position: static; min-height: 0; }
 }

/* ==========================================================================
   TIGHTEN — three measured gaps

   Measured, not guessed:
     60px  above the eyebrow, from masthead padding stacked on wrapper padding
     64px  below the right column, which ended at 201px while the left ran to
           265px — the two columns were different lengths and the shorter one
           left a hole at the bottom
     16px  between eyebrow and headline, doing nothing at all

   The right column now DISTRIBUTES to the height of the left instead of
   stacking at fixed offsets. Both end together, so there is no hole.
   ========================================================================== */



/* Left: the eyebrow belongs TO the headline, so it sits on it. */




/* Right: spread across the same height as the left rather than clustering at
   fixed offsets and leaving 64px empty beneath. */




@media (max-width: 900px) {

}

/* ==========================================================================
   THE MASTHEAD — CONSOLIDATED 26 Aug 2026

   137 competing rules had accumulated here across the evening, which is why
   the last three edits reported success and changed nothing: whatever was
   written last lost to something written earlier with equal specificity.

   THE THREE MEASURED GAPS, fixed at source rather than appended over:
     60px above the eyebrow   -> masthead padding stacked on wrapper padding
     16px eyebrow to headline -> the eyebrow belongs TO the headline
     64px below the right col -> left ended at 265px, right at 201px

   STRUCTURE: two independent columns. NOT a grid — items in a shared grid row
   must start at the same height, so the tall RISE definition was pushing the
   headline down and the tall headline was pushing the figures down. That
   coupling was a third of the wasted height.
   ========================================================================== */
.bo-masthead { padding: 14px 0 16px; }
.bo-masthead__inner { display: block; padding-top: 0; padding-bottom: 0; }

.bo-mh__pitch {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
}

/* LEFT — the argument, ending in the button it argues for. */
.bo-mh__eyebrow { width: 54%; margin: 0 0 6px; }
.bo-mh__title   { width: 54%; margin: 0 0 10px; font-size: clamp(32px, 3.3vw, 46px); line-height: 1.05; letter-spacing: -0.026em; }
.bo-mh__stand   { width: 54%; margin: 0 0 16px; max-width: none; font-size: 17.5px; line-height: 1.45; }
.bo-mh__actions { width: 54%; margin: 0; }
.bo-mh__promise { display: none; }

/* RIGHT — the evidence. Absolute, so it has its own origin and its own flow,
   pinned top AND bottom so the two columns finish level. */
.bo-mh__risedef {
  position: absolute; top: 0; right: 0; width: 40%;
  margin: 0; padding: 0 0 13px;
  border-bottom: 1px solid var(--bo-border, #EDE9E0);
  max-width: none;
}
.bo-mh__faces { position: absolute; top: 78px; right: 0; width: 40%; margin: 0; }
.bo-mh__live  { position: absolute; bottom: 0; right: 0; width: 40%; margin: 0; padding: 0; border: none; display: flex; gap: 40px; }

/* Anything left over from the removed card scatter. */
.bo-mh__scatter, .bo-mh__cards, .bo-mh__right, .bo-mh__stage { display: none; }

@media (max-width: 900px) {
  .bo-mh__pitch { position: static; }
  .bo-mh__eyebrow, .bo-mh__title, .bo-mh__stand, .bo-mh__actions { width: 100%; }
  .bo-mh__risedef, .bo-mh__faces, .bo-mh__live {
    position: static; width: 100%; margin: 16px 0 0;
  }
  .bo-mh__title { font-size: clamp(28px, 7vw, 36px); }
}

/* THE MASTHEAD LOST ITS SHELL.

   Consolidating, I set .bo-masthead__inner to display:block and in doing so
   dropped its max-width and horizontal padding — so the hero ran edge to edge
   at 1425px while Today's edition sat correctly inset at 1240px with 24px
   padding. Two blocks on the same page starting at different left edges.

   Matched to the edition shell exactly, so every band on the page shares one
   left edge. */
.bo-masthead__inner {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* THE EYEBROW LOST ITS STYLING IN THE CONSOLIDATION.

   It came back as Inter 15px/400 with no tracking and display:block, so the
   star had no gap and the line read as body copy rather than an eyebrow. That
   is the cost of replacing a rule: you inherit everything it was doing, not
   just the part you were thinking about. Second time tonight — the masthead
   shell was the first.

   Restored to a proper eyebrow: display face, small, heavily tracked, upper. */
.bo-mh__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 54%;
  margin: 0 0 10px;
  font-family: var(--bo-font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bo-ink);
}
.bo-mh__eyebrow svg { flex-shrink: 0; width: 13px; height: 13px; }
.bo-mh__gold { color: var(--bo-gold-ink, #8A5122); }

/* THE LINE SURVIVES THE HERO.

   "The best of everything. Every day." only ever appeared in the first-visit
   masthead — so after one visit the best line on the site was gone for good.
   It now sits above the mosaic, where it is true every day and seen by
   everybody, not just first-timers. */
.bo-edition__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-family: var(--bo-font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bo-ink-soft, #5F6878);
}
.bo-edition__eyebrow strong { color: var(--bo-gold-ink, #8A5122); font-weight: 800; }

/* The edition eyebrow landed INLINE beside the heading, because its parent is
   a flex row. Forced onto its own line above it — and hidden entirely while
   the full hero is showing, since the masthead already says it four hundred
   pixels up. It exists FOR the returning visitor, who never sees the hero. */
.bo-edition__eyebrow { flex-basis: 100%; width: 100%; order: -1; }
.bo-masthead + * .bo-edition__eyebrow,
body:has(.bo-mh__pitch) .bo-edition__eyebrow { display: none; }

/* ==========================================================================
   IN-FEED PROMPTS ARE TINTED PANELS, NOT LOUD CARDS  (doc 06 §2)

   The spec is explicit: "Prompts are tinted panels, never the white feed-card
   shell." Ours were white cards carrying FULL-WIDTH gold buttons — visually
   louder than the content they interrupt, so a reader met two shouting CTAs
   within five cards.

   A prompt should read as a quiet aside between posts, not as the most
   important thing on the screen. Tinted ground, hairline edge, and a button
   sized to its ask rather than to the panel.
   ========================================================================== */
.bo-infeed {
  background: #FBF9F4;
  border: 1px solid var(--bo-border, #EDE9E0);
  border-left: 3px solid var(--bo-action-gold, #FABD12);
  border-radius: 4px;
  padding: 16px 18px;
  box-shadow: none;
}

/* The button is sized to the ask. A one-tap confirm does not need the width of
   the panel, and giving it that width is what made the feed feel shouty. */
.bo-infeed .bo-standing__cta,
.bo-infeed .bo-rail-mod__cta,
.bo-infeed a[class*="cta"],
.bo-infeed button[class*="cta"] {
  display: inline-flex;
  width: auto;
  min-height: 38px;
  padding: 0 18px;
  font-size: 13.5px;
}

/* Headings inside a prompt sit below the feed cards around them, not above. */
.bo-infeed h2, .bo-infeed h3, .bo-infeed .bo-standing__title { font-size: 16px; }
.bo-infeed p { font-size: 13.5px; }

/* Never two in a row, whatever the data does. */
.bo-infeed + .bo-infeed { display: none; }


/* Text tiles carry no colour of their own. The kind word does the
   differentiating, so the surface is white and the ink is navy. Without a
   border they read as a hole in the cream page rather than a card. */
.bo-etile.is-text{border:0.5px solid #DCD8CE;}
.bo-etile.is-text .bo-etile__kind{background:transparent;padding-left:0;}
.bo-etile.is-text .bo-etile__mark{color:#B4B2A9;}


/* The burger appears at 1140px but three items were never collapsed with
   the nav: two text links and the Post button. Brand 168 + burger 44 +
   links 158 + CTA 84 does not fit a 371px viewport on a nowrap row, so the
   whole document scrolled sideways on a phone. Both text links already
   exist inside the burger sheet, so hiding them here loses no route. */
@media (max-width: 620px) {
  .bo-header__text-link { display: none; }
}


/* ==========================================================================
   COMPOSER MARK — MOBILE

   The mobile spec does not have it. Doc 04 §5: "Composer. White, 3px gold left
   rule, 12px top margin. H2 · flush input + `Post` button · six category pills
   in a snapping scroller · the paste-a-link hint."

   H2, then input and button. No avatar, where the desktop spec explicitly has
   one. That is not an oversight in the pack: at 390px, 30px of mark plus its
   gap is roughly 10% of the writing area, spent on a decoration next to a box
   whose whole job is to be big enough to write in.

   So the mark is desktop-only. Hidden rather than shrunk, because a smaller
   crown is still a crown taking the width the field needs.
   ========================================================================== */
@media (max-width: 620px) {
  .bo-composer__control .bo-composer__mark { display: none !important; }
}

/* An empty mark must never hold space. This already existed, but an earlier
   `display: inline-flex !important` on the same selector outranked it, so an
   empty span rendered a 30px gap with nothing in it. Matching !important here
   so the intent survives regardless of source order. */
.bo-composer__mark:empty { display: none !important; }


/* ==========================================================================
   MOBILE — SEARCH APPEARS EXACTLY ONCE, AND CONTENT IS FULL BLEED

   Two rules the packs already state, never implemented. Both verified on a
   real 390px viewport, not a resized desktop window.

   1 · NO SEARCH IN THE MOBILE HEADER
   ----------------------------------
   Doc 04 §1: "No search icon in the mobile header — search lives in the tab bar
   and appears exactly once. The tab is the better home: thumb-reachable,
   labelled, persistent while scrolling, and it frees header width. (Desktop
   keeps its header search field; there is no tab bar there.)"

   It was not a near miss. Measured at 390px: the brand ends at x=192 and the
   search input starts at x=118 — SEVENTY-FOUR pixels of overlap, printing the
   field straight through the wordmark.

   REMOVED, NOT REFLOWED, and deliberately not replaced with an expanding icon.
   An icon would put search on the page twice again, which is the duplication
   the rule exists to prevent — the tab bar already carries SEARCH.

   This is the homepage rule. Profiles keep their header field, because a
   profile has no tab bar (Global navigation.md: "Mobile: logo · search ·
   menu"). Both documents are right about their own surface.

   2 · FULL BLEED
   --------------
   Doc 04 §6: "Cards are full-bleed — zero page gutter, square corners. The
   double inset (page gutter + card padding) was costing 24px of text width;
   going edge-to-edge returns it, giving 362px of text on a 390px screen."

   The single source was .bo-home__inner's 16px horizontal padding, which every
   descendant inherited. Cards were already square-cornered and side-borderless
   at this width — they simply never reached the edge.

   Non-card items keep a 12px inset "so they still read as controls rather than
   content": the filter row, the sentinel, and the in-feed prompts, which have
   to read as invitations and not as another post.
   ========================================================================== */
@media (max-width: 620px) {

  /* 1 · The header field goes. */
  .bo-header__search,
  .bo-header__search-wrap { display: none !important; }

  /* 2 · Zero page gutter. One rule, because one rule created the inset. */
  .bo-home__inner { padding-left: 0; padding-right: 0; }

  /* The composer joins the cards at the edge. */
  .bo-composer {
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
  }

  /* Controls, not content — these keep their inset.
   *
   * width:auto matters and is not tidying. The feed is a flex column, so these
   * items stretch to the container's width. With a resolved width of 390px the
   * margins could not shrink them — they pushed the items 12px off the right
   * edge instead, producing a horizontally scrolling page. Caught at 390px
   * immediately after applying it.
   *
   * With width auto, stretch sizes them to the line minus their margins, which
   * is what the inset was asking for in the first place. */
  .bo-home__feed > .bo-prompt,
  .bo-filterblock,
  .bo-filters,
  .bo-sentinel,
  [data-bo-sentinel] {
    width: auto;
    margin-left: 12px;
    margin-right: 12px;
  }
}

/* ==========================================================================
   EDITION LEAD TILE — the photograph as an <img>, not a background

   Only the first PHOTOGRAPHIC tile. The other seven keep their
   background-image, because they are below the fold or beside it and lazy is
   right for them. See bestof_mosaic_e().

   STACKING, in painting order:
     the element's own background   the scrim, fully covered by the img below
     .bo-etile__img      z-index 0  the photograph
     ::before            z-index 1  the scrim again, this time OVER the photo
     everything else     z-index 2  badge, title, meta

   `isolate` pins that to this tile so nothing here can escape and stack
   against the page. `background: inherit` on ::before takes the scrim from the
   inline style rather than restating the gradient in CSS — one place to change
   it, so the lead tile cannot drift away from the other seven.
   ========================================================================== */
.bo-etile.is-lead { isolation: isolate; }

.bo-etile.is-lead > .bo-etile__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bo-etile.is-lead::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: inherit;
  background-size: cover;
  background-position: center;
}

/* Positioned children paint above in-flow content, so the text has to be
   lifted explicitly or the scrim buries it. */
.bo-etile.is-lead > *:not(.bo-etile__img) {
  position: relative;
  z-index: 2;
}