/* The Journal: articles, guides and news as a printed magazine
   (docs/design/journal.md). A big plate, the serif headline, and the contents
   built as a stack of bricks that is laid as the reader goes. */

.bb-journal {
  --bb-j-paper: #F6F1E7;
  --bb-j-paper-2: #EDE6D8;
  --bb-j-sheet: #FFFDF8;
  --bb-j-ink: #1E1C19;
  --bb-j-ink-2: #4A443C;
  --bb-j-muted: #6B655C;
  --bb-j-rule: #D9D0BE;
  --bb-j-rubric: #A3412E;
  --bb-j-place: #4E6A6B;
  --bb-j-highlight: #F2E6C4;
  --bb-j-fs-body: clamp(1.125rem, 1.05rem + 0.25vw, 1.1875rem);
  --bb-font-reading: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  /* The site header is sticky (bb_shell.css), so anything pinned below it
     starts at its height: 77px with the 44px logo, 70px on phones. */
  --bb-j-header: 77px;

  /* The legacy article tokens (article_system.css) default to a dark theme
     that only the old .article-page wrapper flipped. Stored bodies use them
     in inline styles, so they map onto the Journal's paper here. */
  --bg: var(--bb-j-paper);
  --surface: var(--bb-j-sheet);
  --surface-elevated: var(--bb-j-paper-2);
  --muted: var(--bb-j-muted);
  --text: var(--bb-j-ink);
  --text-secondary: var(--bb-j-ink-2);
  --border: var(--bb-j-rule);
  --link: var(--bb-j-ink);
  --link-hover: var(--bb-j-rubric);
  --shadow: rgba(40, 30, 20, 0.12);
  --shadow-soft: rgba(40, 30, 20, 0.06);

  background: linear-gradient(180deg, #F7F3EA 0, var(--bb-j-paper) 640px);
  color: var(--bb-j-ink);
}

/* The chapter line every Journal page opens with: a counter, a rubric, the
   serif title and a place line, hung from a thin red rule. */
.bb-journal .bb-j-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-j-ink);
}

.bb-journal .bb-j-kicker::after {
  content: "";
  width: 40px;
  height: 1px;
  margin-left: 6px;
  background: currentColor;
  opacity: 0.6;
}

/* The section, in the kicker, as a red link. */
.bb-journal .bb-j-kicker__rubric {
  display: inline;
  padding: 0;
  color: var(--bb-j-rubric);
  text-decoration: none;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .bb-j-kicker__rubric:hover { color: var(--bb-j-rubric); text-decoration: underline; text-underline-offset: 4px; }

.bb-journal .bb-j-title {
  margin: 22px 0 18px;
  font-family: var(--bb-font-serif);
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
  font-weight: 500;
  font-stretch: normal;
  line-height: 1.02;
  letter-spacing: 0.02em;
  color: var(--bb-j-ink);
  text-wrap: balance;
}

.bb-journal .bb-j-standfirst {
  margin: 0 0 18px;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  font-style: italic;
  line-height: 1.42;
  max-width: 34rem;
  color: var(--bb-j-ink-2);
  text-wrap: pretty;
}

/* A registered mark, set small and raised as a printer would. */
.bb-journal .bb-mark { font-size: 0.42em; vertical-align: 0.95em; line-height: 0; letter-spacing: 0; }

/* The byline as one quiet mono line; items part by space, so a wrapped line
   never starts with a separator. */
.bb-journal .bb-j-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-j-place);
}

.bb-journal .bb-j-meta a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(78, 106, 107, 0.45); text-underline-offset: 4px; }
.bb-journal .bb-j-meta a:hover { color: var(--bb-j-ink); text-decoration-color: currentColor; }

/* The opening spread: the plate on white stock, tipped onto the page, and
   the chapter text beside it. */
.bb-journal__layout {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--bb-space-8);
  align-items: center;
  max-width: var(--bb-max);
  margin: 0 auto;
}

.bb-journal__spread {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "plate text";
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
  max-width: var(--bb-max);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 48px) var(--bb-margin) clamp(40px, 5vw, 80px);
}

.bb-journal__spread--plain {
  grid-template-columns: minmax(0, 52rem);
  grid-template-areas: "text";
  justify-content: center;
}

.bb-journal__spread-text {
  grid-area: text;
  padding-left: 30px;
  border-left: 1px solid rgba(163, 65, 46, 0.55);
}

.bb-journal__spread .bb-journal__figure { grid-area: plate; }

.bb-journal__figure {
  position: relative;
  margin: 0;
  transform: rotate(-1.2deg);
  padding: 14px 14px 46px;
  background: var(--bb-j-sheet, #FFFDF8);
  box-shadow: 0 30px 60px -20px rgba(40, 30, 20, 0.45), 0 2px 0 rgba(0, 0, 0, 0.05);
}

.bb-journal__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bb-journal__figure figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: var(--bb-font-serif);
  font-style: italic;
  font-size: 1rem;
  color: #5A544B;
}

.bb-journal .bb-journal__headline { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem); }

.bb-journal__standfirst {
  margin: 0 0 16px;
  font-family: var(--bb-font-serif);
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--bb-text-2);
}

@media (max-width: 1099px) {
  .bb-journal__spread {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "plate";
    max-width: 52rem;
  }

  .bb-journal__figure { transform: rotate(-0.8deg); }
}

@media (max-width: 768px) {
  .bb-journal { --bb-j-header: 70px; }
}

@media (max-width: 767px) {
  .bb-journal__spread-text { padding-left: 18px; }
  .bb-journal__figure { padding: 10px 10px 40px; transform: none; }
  .bb-journal__figure figcaption { font-size: 0.9rem; bottom: 11px; }
}

/* The reading layout: the stack in the left margin, the column, and the
   picks in the right margin. Below 1100px it is one column, with the stack
   as a contents list before the body and a meter strip pinned while reading. */
.bb-journal__read {
  display: grid;
  grid-template-columns: 232px minmax(0, 40rem) 280px;
  grid-template-areas: "stack column aside";
  justify-content: center;
  gap: 0 clamp(32px, 3.5vw, 56px);
  max-width: var(--bb-max);
  margin: 0 auto;
  padding: 0 var(--bb-margin);
}

.bb-journal__read--no-aside {
  grid-template-columns: 232px minmax(0, 40rem) 232px;
}

.bb-journal__column { grid-area: column; min-width: 0; }
/* Margins stretch the full reading height so their panels can stay pinned. */
.bb-journal .bb-journal__aside { grid-area: aside; align-self: stretch; min-width: 0; }
.bb-journal__margin { grid-area: stack; min-width: 0; }

.bb-journal .bb-journal__margin .bb-stack {
  position: sticky;
  top: calc(var(--bb-j-header) + var(--bb-space-5));
  margin-top: 0;
}

@media (max-width: 1099px) {
  .bb-journal__read,
  .bb-journal__read--no-aside {
    grid-template-columns: minmax(0, 40rem);
    grid-template-areas: "meter" "stack" "column";
  }

  .bb-journal__aside { display: none; }
  .bb-journal .bb-journal__margin .bb-stack { position: static; }
}

/* The stack: one brick per section, in reading order. "Read" bricks are
   inked, the current one is red, the rest are outlines. */
.bb-journal .bb-stack { margin-top: 26px; }

.bb-journal .bb-stack__title {
  margin: 0 0 14px;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-j-ink, #1E1C19);
}

.bb-journal .bb-stack__list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-journal .bb-stack__item {
  font-size: 0.875rem;
  color: var(--bb-j-muted, #6B655C);
}

/* The link is the row itself: a link set to display: contents drops out of
   the tab order. */
.bb-journal .bb-stack__link {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.bb-journal .bb-stack__label {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  padding: 3px 0;
}

.bb-journal .bb-stack__link:hover .bb-stack__label { color: var(--bb-j-ink, #1E1C19); text-decoration: underline; text-underline-offset: 3px; }
.bb-journal .bb-stack__link:focus-visible { outline: 3px solid var(--bb-marker); outline-offset: 2px; border-radius: 2px; }

.bb-journal .bb-stack__brick {
  width: 40px;
  height: 18px;
  fill: transparent;
  stroke: #8E8577;
  stroke-width: 1.2;
  transition: fill var(--bb-dur-2), stroke var(--bb-dur-2), transform var(--bb-dur-3) var(--bb-ease-click);
}

.bb-journal .bb-stack__item.is-read { color: var(--bb-j-ink-2, #4B5462); }
.bb-journal .bb-stack__item.is-read .bb-stack__brick { fill: #1B2129; stroke: #1B2129; }
.bb-journal .bb-stack__item.is-here { color: var(--bb-j-ink, #1E1C19); font-weight: 600; }
.bb-journal .bb-stack__item.is-here .bb-stack__brick { fill: #A3412E; stroke: #A3412E; }

/* A brick drops onto the one below with a short overshoot when its section
   is finished. */
.bb-journal .bb-stack__item.is-landing .bb-stack__brick { animation: bb-brick-land var(--bb-dur-3) var(--bb-ease-click); }

@keyframes bb-brick-land {
  from { transform: translateY(-10px); }
  to { transform: translateY(0); }
}

@media (max-width: 1099px) {
  .bb-journal .bb-journal__margin .bb-stack {
    margin: 0 0 var(--bb-space-6);
    padding: 18px 20px;
    background: var(--bb-j-sheet);
    border: 1px solid var(--bb-j-rule);
    border-radius: var(--bb-radius);
  }

}

/* The meter strip: the same bricks in a row, pinned to the top of the screen
   while the body is read on narrower screens. Decorative; the stack above is
   the navigation. */
.bb-journal .bb-meter { display: none; }

@media (max-width: 1099px) {
  .bb-journal .bb-meter {
    position: sticky;
    top: var(--bb-j-header);
    z-index: 20;
    grid-area: meter;
    display: flex;
    gap: 3px;
    margin: 0 calc(var(--bb-margin) * -1) var(--bb-space-5);
    padding: 10px var(--bb-margin);
    background: rgba(246, 241, 231, 0.94);
    border-bottom: 1px solid var(--bb-j-rule);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .bb-journal .bb-meter__brick {
    position: relative;
    flex: 1 1 0;
    height: 8px;
    border: 1px solid var(--bb-j-rule);
    border-radius: 1.5px;
    transition: background-color var(--bb-dur-2), border-color var(--bb-dur-2);
  }

  .bb-journal .bb-meter__brick::before,
  .bb-journal .bb-meter__brick::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 22%;
    max-width: 9px;
    height: 3px;
    border: inherit;
    border-bottom: 0;
    border-radius: 1px 1px 0 0;
    background: inherit;
  }

  .bb-journal .bb-meter__brick::before { left: 16%; }
  .bb-journal .bb-meter__brick::after { right: 16%; }
  .bb-journal .bb-meter__brick.is-read { background: #1B2129; border-color: #1B2129; }
  .bb-journal .bb-meter__brick.is-here { background: #A3412E; border-color: #A3412E; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-journal .bb-stack__brick,
  .bb-journal .bb-meter__brick { transition: none; }
  .bb-journal .bb-stack__item.is-landing .bb-stack__brick { animation: none; }
}

.bb-float--c1 { top: 8%; left: 6%; width: clamp(60px, 6vw, 110px); }
.bb-float--c2 { bottom: 10%; left: 52%; width: clamp(50px, 5vw, 90px); }

@media (max-width: 1023px) {
  .bb-journal__layout { grid-template-columns: 1fr; }
}
/* The Journal's reading column: an article body set like a printed
   magazine's. Bodies are stored HTML (config/blog YAML and Autopilot), so the
   classes below are the ones that HTML carries; each is restyled here under
   .bb-journal and nowhere else. */

.bb-journal .bb-prose {
  font-family: var(--bb-font-reading);
  font-size: var(--bb-j-fs-body);
  line-height: 1.68;
  color: var(--bb-j-ink);
  font-optical-sizing: auto;
  overflow-wrap: break-word;
}

/* The legacy article stylesheets (article_system.css, articles.css) style the
   same hooks: .article-content caps its width and pads itself, and its
   paragraphs, items and headings carry their own sizes and rules. Those are
   undone here once, so everything below starts from the column's type. */
.bb-journal .article-content,
.bb-journal .bb-prose .article-content {
  max-width: none;
  margin: 0;
  padding: 0;
  line-height: inherit;
  color: inherit;
}

.bb-journal .bb-prose :is(p, li, strong, td, th) { font-size: inherit; }
.bb-journal .bb-prose p { max-width: none; }
.bb-journal .bb-prose a { background-image: none; }

.bb-journal .bb-prose > * + *,
.bb-journal .bb-prose .article-content > * + * { margin-top: 1.1em; }

.bb-journal .bb-prose p { margin: 0; }
.bb-journal .bb-prose * + p { margin-top: 1.1em; }

.bb-journal .bb-prose .lead,
.bb-journal .bb-prose .article-intro > p:first-child {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 1.2em;
  line-height: 1.55;
  color: var(--bb-j-ink);
  border: 0;
}

.bb-journal .bb-prose .article-intro {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

.bb-journal .bb-prose h2 {
  position: relative;
  margin: 2.4em 0 0.6em;
  padding-top: 0.9em;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.375rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--bb-j-ink);
  border: 0;
  scroll-margin-top: calc(var(--bb-j-header) + var(--bb-space-8));
  text-align: left;
}

/* A short rubric rule over each section, like the manual's step heads. */
.bb-journal .bb-prose h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--bb-j-rubric);
}

.bb-journal .bb-prose h3 {
  margin: 1.8em 0 0.4em;
  font-family: var(--bb-font-reading);
  font-size: 1.3em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--bb-j-ink);
  scroll-margin-top: calc(var(--bb-j-header) + var(--bb-space-6));
}

.bb-journal .bb-prose h4,
.bb-journal .bb-prose h5 {
  margin: 1.5em 0 0.3em;
  font-family: var(--bb-font-text);
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--bb-j-ink);
}

.bb-journal .bb-prose h2 + *,
.bb-journal .bb-prose h3 + *,
.bb-journal .bb-prose h4 + * { margin-top: 0; }

.bb-journal .bb-prose strong { font-weight: 600; color: inherit; }

.bb-journal .bb-prose a:not([class]) {
  color: var(--bb-j-ink);
  text-decoration: underline;
  text-decoration-color: rgba(30, 28, 25, 0.32);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: background-color var(--bb-dur-2), text-decoration-color var(--bb-dur-2);
}

.bb-journal .bb-prose a:not([class]):hover {
  color: var(--bb-j-ink);
  background-color: rgba(242, 182, 61, 0.35);
  text-decoration-color: var(--bb-j-rubric);
}

/* Links inside headings show themselves only on hover; the heading already
   carries the weight. */
.bb-journal .bb-prose :is(h2, h3) a:not([class]) { text-decoration-color: transparent; }
.bb-journal .bb-prose :is(h2, h3) a:not([class]):hover { text-decoration-color: var(--bb-j-rubric); background: none; }

/* Lists keep the legacy markers' hooks (::before on each item) and draw an
   ink stud for bullets and a mono figure for numbers. */
.bb-journal .bb-prose ul,
.bb-journal .bb-prose ol {
  margin: 1.1em 0 0;
  padding-left: 0.15em;
  list-style: none;
}

.bb-journal .bb-prose ol { counter-reset: list-counter; }

.bb-journal .bb-prose li {
  position: relative;
  margin: 0.4em 0 0;
  padding-left: 1.35em;
}

.bb-journal .bb-prose ol > li {
  padding-left: 2.1em;
  counter-increment: list-counter;
}

.bb-journal .bb-prose li > ul,
.bb-journal .bb-prose li > ol { margin-top: 0.35em; }

.bb-journal .bb-prose ul > li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0.15em;
  width: 0.38em;
  height: 0.38em;
  background: var(--bb-j-ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.09em var(--bb-j-ink), inset 0.06em 0.06em 0 0.12em rgba(255, 255, 255, 0.18);
}

.bb-journal .bb-prose ol > li::before {
  content: counter(list-counter, decimal-leading-zero);
  position: absolute;
  top: 0.32em;
  left: 0;
  display: block;
  min-width: 0;
  height: auto;
  padding: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--bb-j-ink-2);
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .bb-prose hr {
  margin: 2.4em auto;
  width: 96px;
  height: 0;
  border: 0;
  border-top: 1px solid var(--bb-j-rule);
}

.bb-journal .bb-prose img {
  max-width: 100%;
  height: auto;
}

.bb-journal .bb-prose figure { margin: 2em 0; }

.bb-journal .bb-prose figcaption,
.bb-journal .bb-prose .article-set-image__caption {
  margin-top: 0.6em;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  font-family: var(--bb-font-reading);
  font-size: 0.85em;
  font-style: italic;
  color: var(--bb-j-ink-2);
}

/* Tables: ruled like a parts list, scrolled sideways on a phone rather than
   squeezed. */
.bb-journal .bb-prose table {
  width: 100%;
  margin: 1.6em 0 0;
  border-collapse: collapse;
  font-family: var(--bb-font-text);
  font-size: 0.82em;
  line-height: 1.45;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.bb-journal .bb-prose thead,
.bb-journal .bb-prose tbody tr { color: inherit; background: none; }

.bb-journal .bb-prose thead th {
  padding: 0.7em 0.8em;
  font-family: var(--bb-font-mono);
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--bb-j-ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--bb-j-ink);
}

.bb-journal .bb-prose tbody td,
.bb-journal .bb-prose tbody th {
  padding: 0.7em 0.8em;
  text-align: left;
  vertical-align: top;
  color: var(--bb-j-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bb-j-rule);
}

.bb-journal .bb-prose tbody tr:nth-child(even) td { background: transparent; }
.bb-journal .bb-prose tbody tr:hover td { background: rgba(255, 253, 248, 0.7); }
.bb-journal .bb-prose .winner-row td,
.bb-journal .bb-prose .highlight-row td { background: var(--bb-j-highlight); font-weight: 600; }
.bb-journal .bb-prose td.positive { color: #2F6B3A; }
.bb-journal .bb-prose td.negative { color: var(--bb-j-rubric); }

.bb-journal .bb-prose .data-table-wrapper,
.bb-journal .bb-prose .comparison-table-wrapper {
  margin: 1.6em 0 0;
  overflow-x: auto;
  background: none;
  border: 0;
  box-shadow: none;
}

.bb-journal .bb-prose .data-table-wrapper table,
.bb-journal .bb-prose .comparison-table-wrapper table { margin-top: 0; }

@media (max-width: 767px) {
  .bb-journal .bb-prose table:not(.data-table-wrapper table):not(.comparison-table-wrapper table) {
    display: block;
    overflow-x: auto;
  }
}

.bb-journal .bb-prose [data-scroll-region]:focus-visible { outline: 2px solid var(--bb-j-ink); outline-offset: 4px; }

/* Code: a dark plate, the Night Shift's ink on the Journal's page. */
.bb-journal .bb-prose pre {
  margin: 1.6em 0 0;
  padding: 1.1em 1.25em;
  overflow-x: auto;
  font-family: var(--bb-font-mono);
  font-size: 0.78em;
  line-height: 1.65;
  color: var(--bb-night-text);
  background: var(--bb-night);
  border: 0;
  border-radius: var(--bb-radius-sm);
  tab-size: 4;
}

.bb-journal .bb-prose pre a { color: inherit; text-decoration-color: currentColor; }

.bb-journal .bb-prose pre code {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
}

.bb-journal .bb-prose :not(pre) > code {
  padding: 0.1em 0.35em;
  font-family: var(--bb-font-mono);
  font-size: 0.82em;
  color: var(--bb-j-ink);
  background: var(--bb-paper-2);
  border-radius: 3px;
}

/* Boxes the YAML articles carry (callouts, quick answers, tips, verdicts):
   set on the page between an ink rule and a hairline, the way a manual
   sets a note, rather than as cards. */
.bb-journal .bb-prose :is(.callout, .quick-answer, .tip-box, .warning-box, .final-verdict, .recommendation-boxes, .product-spotlight, .highlight-box, .technique-box, .timeline-box, .data-box, .comparison-box, .related-content-box, .cta-box, .gift-tips, .benefits-section) {
  position: relative;
  margin: 2em 0 0;
  padding: 1.1em 0 1.2em;
  font-size: 0.95em;
  color: var(--bb-j-ink);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--bb-j-ink);
  border-bottom: 1px solid var(--bb-j-rule);
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .bb-prose :is(.callout, .quick-answer, .tip-box, .warning-box, .final-verdict, .recommendation-boxes, .product-spotlight) > :first-child { margin-top: 0; }

/* A callout's title is a kicker: mono capitals and a short trailing rule. */
.bb-journal .bb-prose .callout__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 0.7em;
  padding: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--bb-j-ink);
  background: none;
  border-radius: 0;
}

.bb-journal .bb-prose .callout__title::after { content: ""; width: 40px; height: 1px; background: currentColor; }

.bb-journal .bb-prose :is(.callout--warning, .warning-box) { border-top-color: var(--bb-j-rubric); }
.bb-journal .bb-prose .callout--warning .callout__title { color: var(--bb-j-rubric); }
.bb-journal .bb-prose .final-verdict { background: transparent; border-top-width: 2px; }

/* A closing box some articles write with inline styles reads custom
   properties, so redefining those here takes it out of its card without
   overriding the inline declarations: it becomes a closing line between
   rules, its buttons plain links. */
.bb-journal .bb-prose :is([style*="var(--surface)"], [style*="var(--success-light)"]) {
  --surface: transparent;
  --success-light: transparent;
  --r-lg: 0;
  border-top: 1px solid var(--bb-j-ink);
  border-bottom: 1px solid var(--bb-j-rule);
}

.bb-journal .bb-prose [style*="var(--surface)"] :is(.btn, .btn--primary, .btn--secondary) {
  min-height: 0;
  margin: 0 0.9em;
  padding: 0;
  color: var(--bb-j-ink);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--bb-font-text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-decoration-color: var(--bb-j-rubric);
  text-underline-offset: 4px;
}

.bb-journal .bb-prose [style*="var(--surface)"] :is(.btn, .btn--primary, .btn--secondary)::after { content: " \2192"; color: var(--bb-j-rubric); }
.bb-journal .bb-prose [style*="var(--surface)"] :is(.btn, .btn--primary, .btn--secondary):hover { transform: none; box-shadow: none; }

.bb-journal .bb-prose :is(.callout, .tip-box, .warning-box, .quick-answer) :is(ul, ol) { margin-top: 0.5em; }

/* Pull quotes and stat figures: the magazine's display moments. */
.bb-journal .bb-prose blockquote,
.bb-journal .bb-prose .pullquote {
  margin: 2em 0 0;
  padding: 0 0 0 1.2em;
  background: none;
  border: 0;
  border-left: 3px solid var(--bb-j-rubric);
  box-shadow: none;
}

.bb-journal .bb-prose blockquote p,
.bb-journal .bb-prose .pullquote__text {
  font-family: var(--bb-font-serif);
  font-size: 1.35em;
  font-style: italic;
  line-height: 1.35;
  color: var(--bb-j-ink);
}

.bb-journal .bb-prose .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin: 2em 0 0;
  background: var(--bb-j-rule);
  border: 1px solid var(--bb-j-rule);
}

.bb-journal .bb-prose .stats-grid > p:empty { display: none; }

.bb-journal .bb-prose .stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 1.1em 1em;
  background: var(--bb-j-sheet);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .bb-prose .stat-card__value {
  font-family: var(--bb-font-serif);
  font-size: 2em;
  font-weight: 500;
  line-height: 1;
  color: var(--bb-j-ink);
}

.bb-journal .bb-prose .stat-card__label {
  font-family: var(--bb-font-text);
  font-size: 0.72em;
  line-height: 1.4;
  color: var(--bb-j-ink-2);
}

.bb-journal .bb-prose .pros-cons,
.bb-journal .bb-prose .pro-con-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1em;
  margin: 1.8em 0 0;
}

.bb-journal .bb-prose .pros-cons > p:empty { display: none; }

.bb-journal .bb-prose .pros-cons__panel,
.bb-journal .bb-prose .pro-con-card {
  margin: 0;
  padding: 1.1em 1.2em;
  font-size: 0.9em;
  background: var(--bb-j-sheet);
  border: 1px solid var(--bb-j-rule);
  border-top: 3px solid #2F6B3A;
  border-radius: 0;
}

.bb-journal .bb-prose .pros-cons__panel--cons { border-top-color: var(--bb-j-rubric); }

.bb-journal .bb-prose .pros-cons__title {
  margin: 0 0 0.5em;
  font-family: var(--bb-font-mono);
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-j-ink);
}

.bb-journal .bb-prose .pros-cons__list { margin: 0; padding: 0; list-style: none; }
.bb-journal .bb-prose .pros-cons__list li { padding-left: 0; }
.bb-journal .bb-prose .pros-cons__list li::before { content: none; }

/* Buttons inside stored bodies take the system's brick button. */
.bb-journal .bb-prose :is(.btn, .btn-primary, .btn-secondary, .cta-button, .btn-cta) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 44px;
  margin: 0.25em 0.5em 0.25em 0;
  padding: 0 1.1em;
  font-family: var(--bb-font-text);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  color: var(--bb-paper);
  background: var(--bb-ink);
  border: 1.5px solid var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  box-shadow: 0 3px 0 0 var(--bb-signal);
  transition: transform var(--bb-dur-1) var(--bb-ease-out), box-shadow var(--bb-dur-1) var(--bb-ease-out);
}

.bb-journal .bb-prose :is(.btn, .btn-primary, .btn-secondary, .cta-button, .btn-cta):hover {
  color: var(--bb-paper);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 0 var(--bb-signal);
}

.bb-journal .bb-prose :is(.btn--secondary, .btn--ghost, .btn-secondary) {
  color: var(--bb-ink);
  background: transparent;
  box-shadow: 0 3px 0 0 var(--bb-ink);
}

.bb-journal .bb-prose :is(.btn--secondary, .btn--ghost, .btn-secondary):hover {
  color: var(--bb-ink);
  background: var(--bb-paper-2);
  box-shadow: 0 4px 0 0 var(--bb-ink);
}

.bb-journal .bb-prose .affiliate-cta {
  margin: 2em 0 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.bb-journal .bb-prose .affiliate-cta > h4 { margin: 0 0 0.6em; }
.bb-journal .bb-prose .affiliate-cta > h4 a {
  font-family: var(--bb-font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--bb-j-ink);
  text-decoration-color: rgba(30, 28, 25, 0.3);
}
.bb-journal .bb-prose .affiliate-cta__disclaimer { font-size: 0.8em; color: var(--bb-j-ink-2); }
.bb-journal .bb-prose .affiliate-cta__buttons,
.bb-journal .bb-prose .cta-buttons { display: flex; flex-wrap: wrap; gap: 0.5em; }

/* The product card stored in bodies: a catalogue entry on white stock. */
.bb-journal .bb-prose .article-product-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  align-items: stretch;
  gap: 0;
  margin: 1.8em 0 0;
  padding: 0;
  overflow: hidden;
  font-family: var(--bb-font-text);
  font-size: 0.9rem;
  line-height: 1.5;
  background: var(--bb-j-sheet);
  border: 1px solid rgba(30, 28, 25, 0.2);
  border-radius: 2px;
  box-shadow: none;
  transition: border-color var(--bb-dur-2);
}

.bb-journal .bb-prose .article-product-card:hover { border-color: var(--bb-j-ink); }

.bb-journal .bb-prose .article-product-card > p:empty { display: none; }

.bb-journal .bb-prose .article-product-card__image {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1em;
  min-height: 0;
  background: #FFFFFF;
  border-right: 1px solid rgba(30, 28, 25, 0.12);
}

.bb-journal .bb-prose .article-product-card__img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  margin: 0;
}

.bb-journal .bb-prose .article-product-card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.9em;
  padding: 1.1em 1.2em;
}

.bb-journal .bb-prose .article-product-card__info > * + * { margin-top: 0.35em; }

.bb-journal .bb-prose .article-product-card__name {
  display: block;
  font-family: var(--bb-font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--bb-j-ink);
  text-decoration: none;
}

.bb-journal .bb-prose .article-product-card__stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bb-journal .bb-prose .article-product-card__price {
  font-family: var(--bb-font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bb-j-ink);
}

.bb-journal .bb-prose .article-product-card__status {
  display: inline-block;
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--bb-j-muted);
}

.bb-journal .bb-prose .article-product-card__description {
  margin: 0.4em 0 0;
  font-size: 0.85rem;
  color: var(--bb-j-ink-2);
}

.bb-journal .bb-prose .article-product-card__buttons {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.bb-journal .bb-prose :is(.article-product-card__amazon-btn, .article-product-card__ebay-btn, .article-product-carousel__amazon-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  min-height: 40px;
  padding: 0 1em;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--bb-radius-sm);
  transition: transform var(--bb-dur-1) var(--bb-ease-out), box-shadow var(--bb-dur-1) var(--bb-ease-out);
}

.bb-journal .bb-prose :is(.article-product-card__amazon-btn, .article-product-carousel__amazon-btn) {
  color: var(--bb-paper);
  background: var(--bb-ink);
  border: 1.5px solid var(--bb-ink);
  box-shadow: 0 3px 0 0 var(--bb-signal);
}

.bb-journal .bb-prose .article-product-card__ebay-btn {
  color: var(--bb-ink);
  background: #FFFFFF;
  border: 1.5px solid var(--bb-ink);
  box-shadow: 0 3px 0 0 var(--bb-ink);
}

.bb-journal .bb-prose :is(.article-product-card__amazon-btn, .article-product-card__ebay-btn, .article-product-carousel__amazon-btn):hover {
  transform: translateY(-1px);
}

.bb-journal .bb-prose :is(.article-product-card__amazon-text, .article-product-card__ebay-text) { color: inherit; }

@media (max-width: 559px) {
  .bb-journal .bb-prose .article-product-card { grid-template-columns: 1fr; }
  .bb-journal .bb-prose .article-product-card__image { border-right: 0; border-bottom: 1px solid var(--bb-j-rule); }
}

/* The stored carousel: a shelf that scrolls sideways. */
.bb-journal .bb-prose .article-product-carousel {
  margin: 2em 0 0;
  padding: 1.1em 0 0;
  background: none;
  border-top: 1px solid var(--bb-j-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .bb-prose .article-product-carousel__header { display: flex; align-items: center; justify-content: space-between; }
.bb-journal .bb-prose .article-product-carousel__header > p:empty { display: none; }

.bb-journal .bb-prose .article-product-carousel__title {
  margin: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bb-journal .bb-prose .article-product-carousel__nav-btn {
  width: 40px;
  height: 40px;
  color: var(--bb-j-ink);
  background: var(--bb-j-sheet);
  border: 1px solid var(--bb-j-ink);
  border-radius: 50%;
}

.bb-journal .bb-prose .article-product-carousel__card {
  background: var(--bb-j-sheet);
  border: 1px solid var(--bb-j-rule);
  border-radius: var(--bb-radius);
  box-shadow: none;
}

.bb-journal .bb-prose .article-product-carousel__card-name {
  font-family: var(--bb-font-serif);
  font-size: 1.1rem;
  color: var(--bb-j-ink);
  text-decoration: none;
}

/* Inline set images placed in the column. */
.bb-journal .bb-prose .article-set-image__figure {
  padding: 0.8em;
  background: #FFFFFF;
  border: 1px solid var(--bb-j-rule);
  border-radius: 0;
  box-shadow: 0 18px 30px -24px rgba(40, 30, 20, 0.5);
}

.bb-journal .bb-prose .article-set-image__img { border-radius: 0; box-shadow: none; }

.bb-journal .bb-prose .autopilot-pick__facts {
  font-family: var(--bb-font-mono);
  font-size: 0.72em;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--bb-j-ink-2);
}

.bb-journal .bb-prose .autopilot-article__price-note { color: var(--bb-j-ink-2); }

/* Links the contextual linker adds inside a callout's tab take the tab's ink. */
.bb-journal .bb-prose .callout__title a { color: inherit; text-decoration-color: currentColor; }

/* One-off boxes from older guides. */
.bb-journal .bb-prose :is(.investment-card, .alert, .alert-success, .alert-info) {
  margin: 1.6em 0 0;
  padding: 1.1em 1.25em;
  color: var(--bb-j-ink);
  background: var(--bb-j-sheet);
  border: 1px solid var(--bb-j-rule);
  border-radius: var(--bb-radius);
  box-shadow: none;
}

.bb-journal .bb-prose .quick-answer-list__title {
  font-family: var(--bb-font-mono);
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-j-ink);
}

.bb-journal .bb-prose .article-product-carousel__card-price {
  font-family: var(--bb-font-mono);
  font-size: 0.8rem;
  color: var(--bb-j-ink-2);
}
/* The Journal's article page around the body: the running head, the notes
   before the column, the margins, and the back matter (docs/design/journal.md).
   Every partial here renders only on the article page. */

/* Running head: the breadcrumb set as a magazine's folio line. */
.bb-journal .bb-j-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  max-width: var(--bb-max);
  margin: 0 auto;
  padding: var(--bb-space-5) var(--bb-margin) 0;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-j-muted);
  background: none;
  border: 0;
}

.bb-journal .bb-j-crumbs a { color: var(--bb-j-ink-2); text-decoration: none; }
.bb-journal .bb-j-crumbs a:hover { color: var(--bb-j-ink); text-decoration: underline; text-underline-offset: 3px; }
.bb-journal .bb-j-crumbs__sep { color: var(--bb-j-rule); }
.bb-journal .bb-j-crumbs__here {
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bb-j-muted);
}

/* The spread's stamps: the revision date and the share row. */
.bb-journal .bb-j-stamp {
  display: inline-block;
  margin: 14px 0 0;
  padding: 3px 10px;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-j-rubric);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 2px;
  transform: rotate(-1.5deg);
  box-shadow: none;
}

.bb-journal .bb-journal__spread-text .atrem-ai-disclosure { margin: 16px 0 0; }

.bb-journal .article-social-share { max-width: 34rem; margin: 24px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--bb-j-rule); }

.bb-journal .social-share-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.bb-journal .social-share-buttons .share-label {
  margin-right: 4px;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-j-muted);
}

.bb-journal .social-share-buttons .share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-family: var(--bb-font-text);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bb-j-ink);
  background: transparent;
  border: 1px solid var(--bb-j-rule);
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--bb-dur-2), background-color var(--bb-dur-2);
}

.bb-journal .social-share-buttons .share-btn:hover {
  color: var(--bb-j-ink);
  background: var(--bb-j-sheet);
  border-color: var(--bb-j-ink);
  transform: none;
}

/* The share line at the article's foot: names with their glyphs, set as
   plain links rather than pills. */
.bb-journal .article-footer .share-btn {
  height: 32px;
  padding: 0 14px 0 0;
  border: 0;
  border-radius: 0;
}

.bb-journal .article-footer .share-btn .share-text { text-decoration: underline; text-decoration-color: rgba(30, 28, 25, 0.32); text-underline-offset: 4px; }
.bb-journal .article-footer .share-btn:hover { background: none; }
.bb-journal .article-footer .share-btn:hover .share-text { text-decoration-color: var(--bb-j-rubric); }

.bb-journal .social-share-buttons .share-btn svg { width: 15px; height: 15px; }
.bb-journal .social-share-buttons .share-text { font-size: inherit; }
/* The opening's share row is quiet: bare glyphs in soft ink. Their names
   stay for screen readers. */
.bb-journal .article-social-share .share-btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  color: rgba(30, 28, 25, 0.62);
  background: none;
  border-color: transparent;
}

.bb-journal .article-social-share .share-btn:hover { color: var(--bb-j-ink); background: none; border-color: transparent; }
.bb-journal .article-social-share .share-btn svg { width: 16px; height: 16px; }

.bb-journal .article-social-share .share-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bb-journal .social-share-buttons .share-btn.copied { color: var(--bb-j-sheet); background: var(--bb-j-ink); border-color: var(--bb-j-ink); }

/* The plate's Pin It tab. */
.bb-journal :is(.bb-journal__figure, .bb-j-scene__plate)::before { content: none; }

.bb-journal :is(.bb-journal__figure, .bb-j-scene__plate) .pin-it-button {
  top: 26px;
  right: 26px;
  left: auto;
  gap: 6px;
  padding: 7px 12px;
  font-family: var(--bb-font-text);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  transform: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.bb-journal .bb-journal__figure:hover .pin-it-button,
.bb-journal :is(.bb-journal__figure, .bb-j-scene__plate) .pin-it-button:focus-visible { opacity: 1; transform: none; }
.bb-journal :is(.bb-journal__figure, .bb-j-scene__plate) .pin-it-button:hover { transform: none; }

/* Notes set before the column: ruled slips the reader passes on the way in. */
.bb-journal .bb-journal__column > * + * { margin-top: var(--bb-space-5); }
.bb-journal .bb-journal__column > .article-body { margin-top: var(--bb-space-6); }
.bb-journal .bb-journal__column > :first-child { margin-top: 0; }

.bb-journal .affiliate-trust {
  display: block;
  margin: 0;
  padding: 0 0 0 16px;
  font-family: var(--bb-font-text);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--bb-j-ink-2);
  background: none;
  border: 0;
  border-left: 2px solid var(--bb-j-rule);
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .affiliate-trust__icon { display: none; }
.bb-journal .affiliate-trust__content p { margin: 0; font-size: inherit; color: inherit; }
.bb-journal .affiliate-trust__content p + p { margin-top: 2px; }
.bb-journal .affiliate-trust__content strong {
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-j-ink);
}

.bb-journal .bb-j-note {
  position: relative;
  padding: 28px 22px 22px;
  background: var(--bb-j-sheet);
  border: 1px solid var(--bb-j-ink);
  border-radius: var(--bb-radius);
  box-shadow: 5px 5px 0 0 var(--bb-paper-3);
}

.bb-journal .bb-j-note p { margin: 0 0 14px; font-size: 0.95rem; }

.bb-journal .bb-j-note__tab {
  position: absolute;
  top: 0;
  left: 18px;
  transform: translateY(-50%);
  padding: 2px 10px;
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-paper);
  background: var(--bb-j-ink);
  border-radius: 999px;
}

.bb-journal .breaking-news-alert {
  position: relative;
  margin: 0;
  padding: 16px 48px 16px 18px;
  color: var(--bb-j-ink);
  background: var(--bb-j-sheet);
  border: 1px solid var(--bb-j-rule);
  border-top: 3px solid var(--bb-j-rubric);
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

.bb-journal .breaking-news-alert[hidden] { display: none; }
.bb-journal .breaking-news-alert__content { display: block; }
.bb-journal .breaking-news-alert__icon { display: none; }

.bb-journal .breaking-news-alert__label {
  margin: 0 0 6px;
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-j-rubric);
}

.bb-journal .breaking-news-alert__item + .breaking-news-alert__item { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bb-j-rule); }
.bb-journal .breaking-news-alert__title { margin: 0; font-family: var(--bb-font-serif); font-size: 1.125rem; font-weight: 500; line-height: 1.3; }
.bb-journal .breaking-news-alert__link { color: var(--bb-j-ink); text-decoration: none; }
.bb-journal .breaking-news-alert__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bb-journal .breaking-news-alert__meta { display: flex; gap: 6px; margin-top: 2px; font-size: 0.8rem; color: var(--bb-j-muted); }

.bb-journal .breaking-news-alert__dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--bb-j-ink);
  background: transparent;
  border: 1px solid var(--bb-j-rule);
  border-radius: 50%;
  cursor: pointer;
}

.bb-journal .breaking-news-alert__dismiss svg { stroke: currentColor; }
.bb-journal .breaking-news-alert__dismiss:hover { border-color: var(--bb-j-ink); }

.bb-journal .topic-cluster-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  padding: 10px 0;
  font-size: 0.875rem;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-j-rule);
  border-bottom: 1px solid var(--bb-j-rule);
  box-shadow: none;
}

.bb-journal .topic-cluster-label {
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-j-muted);
}

.bb-journal .topic-cluster-link { font-weight: 600; color: var(--bb-j-ink); text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-underline-offset: 4px; }

/* The short answer: set on the page between rules, its label a kicker. */
.bb-journal .direct-answer-box {
  position: relative;
  margin: var(--bb-space-6) 0 0;
  padding: 18px 0 20px;
  color: var(--bb-j-ink);
  background: transparent;
  border: 0;
  border-top: 2px solid var(--bb-j-ink);
  border-bottom: 1px solid var(--bb-j-rule);
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .direct-answer-box__header { display: block; margin: 0; padding: 0; border: 0; }

.bb-journal .direct-answer-box__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-j-rubric);
  background: none;
  border-radius: 0;
}

.bb-journal .direct-answer-box__label::after { content: ""; width: 40px; height: 1px; background: currentColor; }

.bb-journal .direct-answer-box__icon { display: none; }
.bb-journal .direct-answer-box__word-count { position: absolute; top: 18px; right: 0; font-family: var(--bb-font-mono); font-size: 0.7rem; color: var(--bb-j-muted); }

.bb-journal .direct-answer-box__content {
  font-family: var(--bb-font-reading);
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--bb-j-ink);
}

.bb-journal .direct-answer-box__content > * { margin: 0; }
.bb-journal .direct-answer-box__content > * + * { margin-top: 0.7em; }
.bb-journal .direct-answer-box__content a { color: inherit; text-decoration-color: var(--bb-j-rubric); text-underline-offset: 3px; }
.bb-journal .direct-answer-box__footer { margin: 14px 0 0; padding: 0; border: 0; }

.bb-journal .direct-answer-box__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bb-j-ink);
  text-decoration: underline;
  text-decoration-color: var(--bb-j-rubric);
  text-underline-offset: 4px;
}

/* Our top picks, in the right margin on wide screens and before the column
   on narrow ones. */
.bb-journal .quick-picks-sidebar--mobile { display: none; }

@media (max-width: 1099px) {
  .bb-journal .quick-picks-sidebar--mobile { display: block; }
}

.bb-journal .quick-picks-sidebar--desktop { display: none; position: static; width: auto; }
.bb-journal .bb-journal__aside .quick-picks-sidebar { position: sticky; top: calc(var(--bb-j-header) + var(--bb-space-5)); }

@media (min-width: 1100px) {
  .bb-journal .quick-picks-sidebar--desktop { display: block; }
}

.bb-journal .quick-picks-sidebar {
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* Our top picks as a margin note under a hairline, not a boxed card. */
.bb-journal .quick-picks-sidebar__inner {
  padding: 12px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-j-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .quick-picks-sidebar__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-j-ink);
}

.bb-journal .quick-picks-sidebar__icon { display: none; }
.bb-journal .quick-picks-sidebar__list { display: grid; gap: 0; }

.bb-journal .quick-picks-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas: "image badge" "image content" "image cta";
  grid-template-rows: auto auto 1fr;
  align-items: start;
  gap: 2px 14px;
  padding: 14px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-j-rule);
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .quick-picks-card:first-child { border-top: 0; padding-top: 6px; }
.bb-journal .quick-picks-card__link { display: contents; color: inherit; text-decoration: none; }
.bb-journal .quick-picks-card__image { grid-area: image; display: grid; place-items: center; width: 56px; height: 56px; background: none; border: 0; border-radius: 0; }
.bb-journal .quick-picks-card__img { max-width: 56px; max-height: 56px; object-fit: contain; }
.bb-journal .quick-picks-card__content { grid-area: content; display: block; min-width: 0; text-align: left; }

.bb-journal .quick-picks-card__name {
  display: block;
  font-family: var(--bb-font-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bb-j-ink);
}

.bb-journal .quick-picks-card__link:hover .quick-picks-card__name { text-decoration: underline; text-underline-offset: 3px; }
.bb-journal .quick-picks-card__price { margin-top: 2px; font-family: var(--bb-font-mono); font-size: 0.72rem; color: var(--bb-j-ink-2); }
.bb-journal .quick-picks-card__price .price-source { margin-right: 4px; font-size: inherit; color: var(--bb-j-muted); background: none; padding: 0; }

.bb-journal .quick-picks-card__badge {
  position: static;
  grid-area: badge;
  padding: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-j-rubric);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .quick-picks-card__cta {
  grid-area: cta;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bb-j-ink);
  background: none;
  text-decoration: underline;
  text-decoration-color: var(--bb-j-rubric);
  text-underline-offset: 3px;
}

.bb-journal .quick-picks-card__cta svg { width: 12px; height: 12px; }
.bb-journal .quick-picks-card__cta span { color: inherit; }

/* Key takeaways and the video set inside the column. */
.bb-journal .key-takeaway {
  margin: 2em 0 0;
  color: var(--bb-j-ink);
  padding: 18px 20px;
  font-size: 0.95em;
  background: var(--bb-j-highlight);
  border: 0;
  border-left: 3px solid var(--bb-j-rubric);
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .key-takeaway__title {
  display: flex;
  gap: 8px;
  margin: 0 0 6px;
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-j-ink);
}

.bb-journal .key-takeaway__icon { display: none; }

.bb-journal .article-video-section { margin: 0; }
.bb-journal .article-video-section__title { margin: 0 0 12px; font-family: var(--bb-font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-j-ink); }
/* Videos keep their own shape: 16:9, or 9:16 and narrow for a Short. */
.bb-journal .youtube-embed__wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bb-night); border-radius: var(--bb-radius-sm); }
.bb-journal .youtube-embed--short { display: flex; justify-content: center; }
.bb-journal .youtube-embed__wrapper--short { max-width: 360px; aspect-ratio: 9 / 16; }
.bb-journal .youtube-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.bb-journal .article-banner-ad { margin: var(--bb-space-7) 0 0; text-align: center; }

/* Filed under, and the share line at the foot of the column. */
.bb-journal .bb-j-label {
  margin: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-j-muted);
}

.bb-journal .tag-list {
  justify-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--bb-space-7);
  padding-top: var(--bb-space-5);
  border-top: 1px solid var(--bb-j-ink);
}

.bb-journal .tag-list .bb-j-label { margin-right: 6px; }

/* Tags are an index line: names separated by thin slashes, not pills. */
.bb-journal .tag-list .tag {
  display: inline;
  padding: 0;
  font-family: var(--bb-font-text);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bb-j-ink);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: rgba(30, 28, 25, 0.32);
  text-underline-offset: 4px;
}

.bb-journal .tag-list .tag + .tag::before { content: "/"; display: inline-block; margin: 0 0.6em 0 0.1em; color: var(--bb-j-rule); text-decoration: none; }
.bb-journal .tag-list .tag:hover { color: var(--bb-j-ink); background: none; text-decoration-color: var(--bb-j-rubric); }

.bb-journal .article-footer {
  font-style: normal;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: var(--bb-space-5);
  padding: 0;
  text-align: left;
  border: 0;
}

.bb-journal .article-footer .share-label { display: none; }

/* Back matter: full-width bands, each with a kicker and a serif title. */
.bb-journal .bb-j-band { padding: clamp(48px, 6vw, 88px) var(--bb-margin); }
.bb-journal .bb-j-band:nth-of-type(even) { background-color: var(--bb-j-paper-2); }
.bb-journal .bb-j-band__inner { max-width: var(--bb-content); margin: 0 auto; }

.bb-journal .bb-j-band__title {
  margin: 14px 0 0;
  padding: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: left;
  color: var(--bb-j-ink);
  border: 0;
}

.bb-journal .bb-j-band__lede { max-width: 40rem; margin: 10px 0 0; font-size: 1rem; color: var(--bb-j-ink-2); }

.bb-journal .bb-j-tools { margin-top: clamp(48px, 6vw, 96px); background-color: var(--bb-j-paper-2); }

/* The tools are an index at the back of the book: numbered entries under a
   rule, not buttons. */
.bb-journal .bb-j-tools__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: bb-tool;
}

.bb-journal .bb-j-tools__list > li { counter-increment: bb-tool; }

.bb-journal .bb-j-tool {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  height: 100%;
  padding: 18px 0 20px;
  color: var(--bb-j-ink);
  border-top: 1px solid var(--bb-j-ink);
  text-decoration: none;
}

.bb-journal .bb-j-tool::before {
  content: counter(bb-tool, decimal-leading-zero);
  grid-row: span 2;
  padding-top: 0.45em;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--bb-j-rubric);
}

.bb-journal .bb-j-tool:hover { color: var(--bb-j-ink); }
.bb-journal .bb-j-tool__name { font-family: var(--bb-font-serif); font-size: 1.375rem; font-weight: 500; line-height: 1.15; }
.bb-journal .bb-j-tool__name::after { content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: 0.4em; font-family: var(--bb-font-text); font-size: 0.8em; color: var(--bb-j-rubric); transition: transform var(--bb-dur-2) var(--bb-ease-out); }
.bb-journal .bb-j-tool:hover .bb-j-tool__name { text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.bb-journal .bb-j-tool:hover .bb-j-tool__name::after { transform: translateX(4px); }
.bb-journal .bb-j-tool__note { font-size: 0.875rem; color: var(--bb-j-ink-2); }

/* The FAQ: ruled questions that open like a manual's fold-outs. */
.bb-journal .faq-section { margin: 0; background-color: var(--bb-j-paper); border: 0; box-shadow: none; }
.bb-journal .faq-list { display: block; max-width: 52rem; margin: 24px 0 0; border-top: 1px solid var(--bb-j-ink); }
.bb-journal .faq-item { margin: 0; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--bb-j-rule); border-radius: 0; box-shadow: none; }

.bb-journal .faq-question {
  display: grid;
  grid-template-columns: 1fr 28px;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}

.bb-journal .faq-question::-webkit-details-marker { display: none; }
.bb-journal .faq-question::after,
.bb-journal .faq-question::before { content: none; }

.bb-journal .faq-question__text {
  font-family: var(--bb-font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--bb-j-ink);
}

.bb-journal .faq-question__icon {
  position: relative;
  width: 28px;
  height: 28px;
  transition: transform var(--bb-dur-2) var(--bb-ease-out);
}

.bb-journal .faq-question__icon::before,
.bb-journal .faq-question__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--bb-j-ink);
  transform: translate(-50%, -50%);
}

.bb-journal .faq-question__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.bb-journal .faq-item[open] .faq-question__icon { transform: rotate(45deg); }
.bb-journal .faq-question:hover .faq-question__icon::before,
.bb-journal .faq-question:hover .faq-question__icon::after { background: var(--bb-j-rubric); }
.bb-journal .faq-item[open] .faq-question__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.bb-journal .faq-question:hover .faq-question__text { text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-underline-offset: 4px; }

.bb-journal .faq-answer { max-height: none; overflow: visible; padding: 0 44px 22px 0; }

.bb-journal .faq-answer__content {
  font-family: var(--bb-font-reading);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--bb-j-ink-2);
}

.bb-journal .faq-answer__content > * { margin: 0; }
.bb-journal .faq-answer__content > * + * { margin-top: 0.7em; }
.bb-journal .faq-answer__content a { color: var(--bb-j-ink); text-decoration-color: var(--bb-j-rubric); }

/* Related news as dispatches down a ruled timeline. */
.bb-journal .article-news-timeline { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }

.bb-journal .article-news-timeline__title {
  display: block;
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--bb-j-ink);
}

.bb-journal .article-news-timeline__title svg { display: none; }
.bb-journal .timeline-container { position: relative; max-width: 52rem; margin: 28px 0 0; padding: 0 0 0 28px; }
.bb-journal .timeline-line { position: absolute; top: 6px; bottom: 6px; left: 5px; width: 1px; background: var(--bb-j-ink); }
.bb-journal .timeline-month { position: relative; margin: 24px 0 8px; }
.bb-journal .timeline-month--first { margin-top: 0; }
.bb-journal .timeline-month__dot { position: absolute; top: 50%; left: -28px; width: 11px; height: 11px; background: var(--bb-j-rubric); border: 0; border-radius: 2px; transform: translateY(-50%); }
.bb-journal .timeline-month__label { font-family: var(--bb-font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-j-rubric); }
.bb-journal .timeline-item { position: relative; margin: 0; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--bb-j-rule); box-shadow: none; }
.bb-journal .timeline-item__dot { position: absolute; top: 20px; left: -26px; width: 7px; height: 7px; background: var(--bb-j-paper-2); border: 1px solid var(--bb-j-ink); border-radius: 50%; }
.bb-journal .timeline-item__date { display: flex; gap: 8px; font-family: var(--bb-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; color: var(--bb-j-muted); background: none; }
.bb-journal .timeline-item__source { color: var(--bb-j-ink-2); }
.bb-journal .timeline-item__title { margin: 4px 0 0; font-family: var(--bb-font-serif); font-size: 1.2rem; font-weight: 500; line-height: 1.25; }
.bb-journal .timeline-item__link { color: var(--bb-j-ink); text-decoration: none; }
.bb-journal .timeline-item__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bb-journal .timeline-item__excerpt { margin: 4px 0 0; font-size: 0.9rem; color: var(--bb-j-ink-2); }
.bb-journal .timeline-item__category { display: inline-block; margin-top: 6px; padding: 0 6px; font-family: var(--bb-font-mono); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bb-j-ink-2); background: none; border: 1px solid var(--bb-j-rule); border-radius: 2px; }
.bb-journal .article-news-timeline__footer { margin: 20px 0 0; text-align: left; }
.bb-journal .article-news-timeline__more-link { font-weight: 600; color: var(--bb-j-ink); text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-underline-offset: 4px; background: none; padding: 0; }

/* The shelf of sets the guide recommends: each on a white plinth. */
.bb-journal .bb-j-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  margin: 28px 0 0;
  padding: 0;
}

.bb-journal .bb-j-set {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .bb-j-set:hover { transform: none; box-shadow: none; }
.bb-journal .bb-j-set__link { display: flex; flex-direction: column; flex: 1; gap: 4px; color: var(--bb-j-ink); text-decoration: none; }

.bb-journal .bb-j-set__plate {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 10px;
  background: #FFFFFF;
  border: 1px solid var(--bb-j-rule);
  border-radius: var(--bb-radius);
  transition: border-color var(--bb-dur-2), transform var(--bb-dur-2) var(--bb-ease-out);
}

.bb-journal .bb-j-set__link:hover .bb-j-set__plate { border-color: var(--bb-j-ink); transform: translateY(-3px); }
.bb-journal .bb-j-set__img { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); object-fit: contain; }
.bb-journal .bb-j-set__price .price-source { display: block; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bb-j-muted); }
.bb-journal .bb-j-set__num { font-family: var(--bb-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; color: var(--bb-j-rubric); }
.bb-journal .bb-j-set__name { font-family: var(--bb-font-serif); font-size: 1.35rem; font-weight: 500; line-height: 1.15; }
.bb-journal .bb-j-set__price { font-family: var(--bb-font-mono); font-size: 0.75rem; color: var(--bb-j-ink-2); }
.bb-journal .bb-j-set__buy { align-self: flex-start; margin-top: 14px; min-height: 44px; font-size: 0.875rem; }

/* Further reading: index cards. */
.bb-journal .bb-j-further {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0 32px;
  margin: 24px 0 0;
  border-top: 1px solid var(--bb-j-ink);
}

.bb-journal .related-articles-card { margin: 0; background: none; border: 0; border-bottom: 1px solid var(--bb-j-rule); border-radius: 0; box-shadow: none; overflow: visible; }
.bb-journal .related-articles-card:hover { transform: none; box-shadow: none; }
.bb-journal .bb-j-further__link { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 0 22px; color: var(--bb-j-ink); text-decoration: none; }
.bb-journal .bb-j-further__rubric { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: var(--bb-j-rubric); }
.bb-journal .bb-j-further__title { margin: 0; font-family: var(--bb-font-serif); font-size: 1.5rem; font-weight: 500; line-height: 1.12; color: var(--bb-j-ink); }
.bb-journal .bb-j-further__excerpt { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--bb-j-ink-2); }
.bb-journal .bb-j-further .read-more-link { margin-top: auto; font-size: 0.875rem; font-weight: 600; color: var(--bb-j-ink); }
.bb-journal .bb-j-further__link:hover .bb-j-further__title { text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-underline-offset: 5px; }

.bb-journal .bb-j-admin { display: flex; gap: 12px; justify-content: center; padding: var(--bb-space-7) var(--bb-margin); }

/* Partner accessories, fetched into the body for the visitor's country. */
.bb-journal .apartner-section {
  margin: 2.5em 0 0;
  padding: 22px;
  font-family: var(--bb-font-text);
  background: var(--bb-j-sheet);
  border: 1px solid var(--bb-j-rule);
  border-radius: var(--bb-radius);
}

.bb-journal .bb-prose .apartner-section h2.apartner-title { margin: 0; padding: 0; font-size: 1.5rem; }
.bb-journal .bb-prose .apartner-section h2.apartner-title::before { content: none; }
.bb-journal .bb-prose .apartner-section p { margin: 0; font-size: 0.8125rem; line-height: 1.45; }
.bb-journal .bb-prose .apartner-section p.apartner-subtitle { margin: 4px 0 16px; font-size: 0.9375rem; color: var(--bb-j-ink-2); }
.bb-journal .apartner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.bb-journal .apartner-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: #FFFFFF; border: 1px solid var(--bb-j-rule); border-radius: var(--bb-radius-sm); }
.bb-journal .apartner-image { display: block; width: 100%; height: auto; max-height: 140px; object-fit: contain; }
.bb-journal .bb-prose .apartner-section p.apartner-name { font-weight: 600; color: var(--bb-j-ink); }
.bb-journal .bb-prose .apartner-section p.apartner-set { color: var(--bb-j-ink-2); }
.bb-journal .bb-prose .apartner-section p.apartner-price strong { font-family: var(--bb-font-mono); font-size: 0.95rem; font-weight: 500; color: var(--bb-j-ink); }
.bb-journal .apartner-checked { display: block; font-size: 0.6875rem; color: var(--bb-j-muted); }
.bb-journal .bb-prose .apartner-section p.apartner-availability { font-size: 0.75rem; color: #2F6B3A; }

.bb-journal .bb-prose .apartner-card a.apartner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: auto;
  padding: 0 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bb-paper);
  background: var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  box-shadow: 0 3px 0 0 var(--bb-signal);
  text-decoration: none;
}

.bb-journal .bb-prose .apartner-section p.apartner-disclosure { margin-top: 14px; font-size: 0.6875rem; color: var(--bb-j-muted); }

@media (max-width: 767px) {
  .bb-journal .bb-j-crumbs__here { max-width: 22ch; }
  .bb-journal .direct-answer-box { padding: 16px 0 18px; }
  .bb-journal .faq-question__text { font-size: 1.15rem; }
  .bb-journal .faq-answer { padding-right: 0; }
}

.bb-journal .atrem-ai-disclosure {
  max-width: 34rem;
  margin: 16px 0 0;
  padding: 8px 12px;
  color: var(--bb-j-ink-2);
  background: var(--bb-j-sheet);
  border-left: 2px solid var(--bb-j-place);
  border-radius: 0;
}

.bb-journal .atrem-ai-disclosure__icon { display: none; }
.bb-journal .atrem-ai-disclosure a { color: var(--bb-j-ink); text-underline-offset: 3px; }
/* The Journal's front and its section and tag pages: a masthead, the lead
   stories, and the index of guides as cards on white stock
   (docs/design/journal.md). */

.bb-journal .bb-j-masthead {
  padding: clamp(40px, 6vw, 88px) var(--bb-margin) clamp(32px, 4vw, 56px);
  border-bottom: 1px solid rgba(30, 28, 25, 0.15);
}

.bb-journal .bb-j-masthead__inner {
  max-width: var(--bb-content);
  margin: 0 auto;
  padding-left: 30px;
  border-left: 1px solid rgba(163, 65, 46, 0.55);
}

.bb-journal .bb-j-masthead__title {
  margin: 16px 0 14px;
  font-family: var(--bb-font-serif);
  font-size: clamp(3rem, 2rem + 4vw, 6rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0.02em;
  color: var(--bb-j-ink);
  text-wrap: balance;
}

.bb-journal .bb-j-masthead__lede {
  max-width: 38rem;
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--bb-j-ink-2);
}

.bb-journal .bb-j-masthead__rss {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-j-rubric);
  text-decoration: none;
}

.bb-journal .bb-j-masthead__rss:hover { color: var(--bb-j-rubric); text-decoration: underline; text-underline-offset: 4px; }

.bb-journal .bb-j-section-label {
  margin: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-j-ink);
}

/* Lead stories: the first big, the rest stacked beside it; beside a cover,
   the remaining two side by side. */
.bb-journal .bb-j-featured__grid.bb-j-featured__grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb-journal .bb-j-featured__grid--pair .bb-j-story__link { grid-template-columns: 1fr; gap: 18px; }
.bb-journal .bb-j-featured__grid--pair .bb-j-story__plate img { aspect-ratio: 16 / 9; }
.bb-journal .bb-j-featured__grid--pair .bb-j-story__title { font-size: clamp(1.625rem, 1.3rem + 0.8vw, 2.125rem); line-height: 1.08; text-wrap: balance; }

.bb-journal .bb-j-featured__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-auto-rows: auto;
  gap: 32px clamp(32px, 4vw, 56px);
  margin-top: 24px;
}

.bb-journal .bb-j-story { margin: 0; }
.bb-journal .bb-j-story--lead { grid-row: span 2; }

.bb-journal .bb-j-story__link {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  color: var(--bb-j-ink);
  text-decoration: none;
}

.bb-journal .bb-j-story--lead .bb-j-story__link { grid-template-columns: 1fr; gap: 22px; }

/* Plates, not polaroids: flat, edged with a hairline. */
.bb-journal .bb-j-story__plate {
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--bb-j-paper-2);
  border: 0;
  transition: transform var(--bb-dur-3) var(--bb-ease-out);
}

.bb-journal .bb-j-story__link > .bb-j-story__plate { align-self: start; }
.bb-journal .bb-j-story__link:hover .bb-j-story__plate { transform: translateY(-3px); }
.bb-journal .bb-j-story__plate img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.bb-journal .bb-j-story__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bb-journal .bb-j-story__rubric { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; color: var(--bb-j-rubric); }

.bb-journal .bb-j-story__title {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.12;
  color: var(--bb-j-ink);
}

.bb-journal .bb-j-story--lead .bb-j-story__title { font-size: clamp(2rem, 1.5rem + 1.8vw, 3.25rem); line-height: 1.04; text-wrap: balance; }
.bb-journal .bb-j-story__link:hover .bb-j-story__title { text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.bb-journal .bb-j-story__excerpt { font-size: 0.9375rem; line-height: 1.55; color: var(--bb-j-ink-2); }
.bb-journal .bb-j-story--lead .bb-j-story__excerpt { font-family: var(--bb-font-serif); font-size: 1.25rem; font-style: italic; line-height: 1.45; }
.bb-journal .bb-j-story__meta { font-family: var(--bb-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; color: var(--bb-j-muted); }

/* Index cards. */
.bb-journal .bb-j-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 40px 28px;
  margin-top: 28px;
  padding: 0;
  background: none;
}

/* The latest guides: the newest leads at double width, three follow. */
.bb-journal .bb-j-cards--four { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); align-items: start; }
.bb-journal .bb-j-cards--four > .bb-j-card:first-child .bb-j-card__title { font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2.25rem); line-height: 1.08; }

@media (max-width: 1099px) {
  .bb-journal .bb-j-cards--four { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

.bb-journal .bb-j-card {
  margin: 0;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .bb-j-card:hover { transform: none; box-shadow: none; }

.bb-journal .bb-j-card__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  color: var(--bb-j-ink);
  text-decoration: none;
}

.bb-journal .bb-j-card__plate {
  position: relative;
  display: block;
  margin: 0 0 10px;
  padding: 0;
  overflow: hidden;
  aspect-ratio: auto;
  background: var(--bb-j-paper-2);
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  transition: transform var(--bb-dur-3) var(--bb-ease-out);
}

.bb-journal .bb-j-card__link:hover .bb-j-card__plate { transform: translateY(-3px); }
.bb-journal .bb-j-card__plate img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transform: none; }
/* A guide without a header plate gets a plain cover: its section set in
   the middle of a framed page, like a book with no jacket. */
.bb-journal .bb-j-card__blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 4 / 3;
  padding: 18px;
  text-align: center;
  background: var(--bb-j-paper-2) var(--bb-j-grain);
  box-shadow: inset 0 0 0 10px var(--bb-j-paper-2), inset 0 0 0 11px rgba(30, 28, 25, 0.22);
}

.bb-journal .bb-j-card__blank-mark { font-family: var(--bb-font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-j-rubric); }
.bb-journal .bb-j-card__blank-title { max-width: 12ch; font-family: var(--bb-font-serif); font-size: 1.75rem; font-style: italic; line-height: 1.05; color: var(--bb-j-ink-2); }

.bb-journal .bb-j-card__rubric {
  position: static;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--bb-j-rubric);
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.bb-journal .bb-j-card__title {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--bb-j-ink);
}

.bb-journal .bb-j-card__link:hover .bb-j-card__title { text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.bb-journal .bb-j-card__excerpt { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--bb-j-ink-2); }

.bb-journal .bb-j-card__meta {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--bb-j-muted);
  border: 0;
}

.bb-journal .bb-j-card__meta .meta-item { padding: 0; color: inherit; background: none; }

/* Section tabs and tags. */
.bb-journal .bb-j-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 22px 0 0;
  padding: 0 0 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--bb-j-rule);
}

.bb-journal .bb-j-sections__link {
  position: relative;
  padding: 6px 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bb-j-ink-2);
  background: none;
  border: 0;
  border-radius: 0;
  text-decoration: none;
}

.bb-journal .bb-j-sections__link:hover { color: var(--bb-j-ink); background: none; }

.bb-journal .bb-j-sections__link.active {
  color: var(--bb-j-ink);
  background: none;
}

.bb-journal .bb-j-sections__link.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -11px;
  left: 0;
  height: 3px;
  background: var(--bb-j-rubric);
}

.bb-journal .bb-j-browse .bb-j-label { margin-top: 28px; }
.bb-journal .bb-j-browse .bb-j-label:first-child { margin-top: 0; }

.bb-journal .bb-j-tagline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.bb-journal .bb-j-tagline__tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bb-j-ink);
  background: var(--bb-j-sheet);
  border: 1px solid var(--bb-j-rule);
  border-radius: 999px;
  text-decoration: none;
}

.bb-journal .bb-j-tagline__tag:hover,
.bb-journal .bb-j-tagline__tag.active { color: var(--bb-j-ink); background: var(--bb-j-sheet); border-color: var(--bb-j-ink); }
.bb-journal .bb-j-tagline__tag.tags-hidden { display: inline-flex; }

.bb-journal .bb-j-more-tags { margin-top: 12px; }

.bb-journal .bb-j-more-tags summary {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bb-j-ink);
  text-decoration: underline;
  text-decoration-color: var(--bb-j-rubric);
  text-underline-offset: 4px;
  cursor: pointer;
}

/* A section's or tag's introduction. */
.bb-journal .category-intro-section { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); background: none; }

.bb-journal .category-intro-content {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px 56px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.bb-journal .category-intro-content .intro-text { grid-column: 1; }
.bb-journal .category-intro-content .intro-highlights { grid-column: 2; grid-row: 1 / span 2; }
.bb-journal .category-intro-content .intro-stats { grid-column: 1; }

.bb-journal .category-intro-content h2 {
  margin: 0 0 12px;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 500;
  color: var(--bb-j-ink);
  text-align: left;
}

.bb-journal .category-intro-content p { margin: 0; font-family: var(--bb-font-reading); font-size: 1.125rem; line-height: 1.65; color: var(--bb-j-ink-2); }
.bb-journal .category-intro-content h3 { margin: 0 0 10px; font-family: var(--bb-font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-j-ink); }

.bb-journal .intro-highlights {
  padding: 20px 22px;
  background: var(--bb-j-sheet);
  border: 1px solid var(--bb-j-rule);
  border-radius: var(--bb-radius);
}

.bb-journal .intro-highlights ul { margin: 0; padding: 0; list-style: none; }
.bb-journal .intro-highlights li { position: relative; margin: 8px 0 0; padding-left: 18px; font-size: 0.9375rem; color: var(--bb-j-ink); }
.bb-journal .intro-highlights li::before { content: ""; position: absolute; top: 0.6em; left: 2px; width: 6px; height: 6px; background: var(--bb-j-rubric); border-radius: 50%; }

.bb-journal .intro-stats { display: flex; flex-wrap: wrap; gap: 0; margin: 0; border-top: 1px solid var(--bb-j-ink); }

.bb-journal .stat-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  margin: 0;
  padding: 14px 28px 0 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.bb-journal .stat-box strong { font-family: var(--bb-font-serif); font-size: 2rem; font-weight: 500; line-height: 1; color: var(--bb-j-ink); }
.bb-journal .stat-box span { font-family: var(--bb-font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-j-muted); }

/* The pager: per-page choice and page numbers, set as a folio. */
.bb-journal .bb-j-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--bb-j-ink);
}

.bb-journal .bb-j-pager .per-page-selector { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.875rem; color: var(--bb-j-ink-2); }

.bb-journal .bb-j-pager .per-page-select {
  min-height: 36px;
  padding: 0 28px 0 4px;
  font-family: var(--bb-font-mono);
  font-size: 0.8125rem;
  color: var(--bb-j-ink);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--bb-j-ink);
  border-radius: 0;
}

.bb-journal .bb-j-pager .pagination-nav,
.bb-journal .bb-j-pager .pagination-wrapper { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; background: none; box-shadow: none; }
.bb-journal .bb-j-pager .page-numbers { display: flex; gap: 4px; }

.bb-journal .bb-j-pager .page-link,
.bb-journal .bb-j-pager .pagination-wrapper > a,
.bb-journal .bb-j-pager .pagination-wrapper > span {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-family: var(--bb-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bb-j-ink-2);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
}

/* Page numbers are set like the manual's step counters: mono figures, no
   boxes, the current page in ink over a red rule. */
.bb-journal .bb-j-pager a.page-link:hover,
.bb-journal .bb-j-pager .pagination-wrapper > a:hover { color: var(--bb-j-ink); background: transparent; border-bottom-color: var(--bb-j-ink); transform: none; }
.bb-journal .bb-j-pager .page-link.active { color: var(--bb-j-ink); font-weight: 600; background: transparent; border-bottom-color: var(--bb-j-rubric); }

.bb-journal .empty-state { padding: 48px 0; font-family: var(--bb-font-reading); font-size: 1.125rem; color: var(--bb-j-ink-2); background: none; }
.bb-journal .admin-actions { margin-top: 24px; }

@media (max-width: 1099px) {
  .bb-journal .bb-j-featured__grid,
  .bb-journal .bb-j-featured__grid--pair { grid-template-columns: minmax(0, 1fr); }
  .bb-journal .bb-j-story--lead { grid-row: auto; }
  .bb-journal .category-intro-content { grid-template-columns: minmax(0, 1fr); }
  .bb-journal .category-intro-content .intro-highlights,
  .bb-journal .category-intro-content .intro-stats { grid-column: 1; grid-row: auto; }
}

@media (max-width: 767px) {
  .bb-journal .bb-j-masthead__inner { padding-left: 18px; }
  .bb-journal .bb-j-story__link { grid-template-columns: 96px 1fr; gap: 14px; }
  .bb-journal .bb-j-cards { grid-template-columns: minmax(0, 1fr); }
  .bb-journal .bb-j-pager { justify-content: center; }
}

/* The editor's page: a monogram plate beside the chapter line, the bio in the
   reading face, and the method notes as a ruled slip. */
.bb-journal .bb-j-author__head { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }

.bb-journal .bb-j-author__monogram {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(88px, 10vw, 132px);
  aspect-ratio: 1;
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
  font-weight: 500;
  color: var(--bb-j-ink);
  background: var(--bb-j-sheet);
  box-shadow: 0 20px 36px -24px rgba(40, 30, 20, 0.55);
  transform: rotate(-2deg);
}

.bb-journal .bb-j-author__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px 64px; align-items: start; }
.bb-journal .bb-j-author__bio .bb-j-band__title { margin-top: 0; }
.bb-journal .bb-j-author__prose { margin-top: 18px; }
.bb-journal .bb-j-author__prose p { margin: 0 0 1em; font-family: var(--bb-font-reading); font-size: var(--bb-j-fs-body); line-height: 1.68; color: var(--bb-j-ink); }

.bb-journal .bb-j-author__method {
  position: relative;
  padding: 30px 24px 22px;
  background: var(--bb-j-sheet);
  border: 1.5px solid var(--bb-j-ink);
  border-radius: var(--bb-radius);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-journal .bb-j-author__method-title {
  position: absolute;
  top: 0;
  left: 18px;
  margin: 0;
  padding: 3px 12px;
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--bb-paper);
  background: var(--bb-j-ink);
  border-radius: 999px;
  transform: translateY(-50%);
}

.bb-journal .bb-j-author__method ul { margin: 0 0 14px; padding: 0; list-style: none; }
.bb-journal .bb-j-author__method li { position: relative; margin: 10px 0 0; padding-left: 18px; font-size: 0.9375rem; line-height: 1.55; color: var(--bb-j-ink); }
.bb-journal .bb-j-author__method li::before { content: ""; position: absolute; top: 0.6em; left: 2px; width: 6px; height: 6px; background: var(--bb-j-rubric); border-radius: 50%; }
.bb-journal .bb-j-author__method p { margin: 0; font-size: 0.9375rem; color: var(--bb-j-ink-2); }
.bb-journal .bb-j-author__method a,
.bb-journal .bb-j-author__back a { font-weight: 600; color: var(--bb-j-ink); text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-underline-offset: 4px; }
.bb-journal .bb-j-author__back { margin: 40px 0 0; }

/* How we review: the method as a numbered manual page. */
.bb-journal .bb-j-method__marks { display: flex; flex-wrap: wrap; gap: 0; margin: 28px 0 0; border-top: 1px solid var(--bb-j-ink); }
.bb-journal .bb-j-method__marks > div { padding: 14px 32px 0 0; }
.bb-journal .bb-j-method__marks dt { font-family: var(--bb-font-serif); font-size: 1.75rem; font-weight: 500; line-height: 1; color: var(--bb-j-ink); }
.bb-journal .bb-j-method__marks dd { margin: 4px 0 0; font-family: var(--bb-font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-j-muted); }

.bb-journal .bb-j-method__body { max-width: 52rem; margin: 0 auto; padding: clamp(32px, 4vw, 64px) var(--bb-margin) 0; }

.bb-journal .bb-j-method__section {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 20px;
  padding: 32px 0;
  border-bottom: 1px solid var(--bb-j-rule);
}

.bb-journal .bb-j-method__section > * { grid-column: 2; }
.bb-journal .bb-j-method__section > .bb-j-method__num { grid-column: 1; grid-row: 1 / span 2; }

.bb-journal .bb-j-method__section p.bb-j-method__num {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 0.9;
  color: var(--bb-j-rubric);
}

.bb-journal .bb-j-method__section h2 { margin: 0 0 12px; font-family: var(--bb-font-serif); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 500; line-height: 1.1; color: var(--bb-j-ink); text-align: left; }
.bb-journal .bb-j-method__section h3 { margin: 0 0 6px; font-family: var(--bb-font-reading); font-size: 1.25rem; font-weight: 600; color: var(--bb-j-ink); }
.bb-journal .bb-j-method__section p { margin: 0 0 12px; font-family: var(--bb-font-reading); font-size: 1.125rem; line-height: 1.65; color: var(--bb-j-ink); }
.bb-journal .bb-j-method__section ul { margin: 0 0 12px; padding: 0; list-style: none; }
.bb-journal .bb-j-method__section ul li { position: relative; margin: 8px 0 0; padding-left: 18px; font-size: 1rem; line-height: 1.55; color: var(--bb-j-ink); }
.bb-journal .bb-j-method__section ul li::before { content: ""; position: absolute; top: 0.62em; left: 2px; width: 6px; height: 6px; background: var(--bb-j-rubric); border-radius: 50%; }
.bb-journal .bb-j-method__section a { color: var(--bb-j-ink); text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-underline-offset: 3px; }

.bb-journal .bb-j-method__sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; margin: 8px 0 0; background: var(--bb-j-rule); border: 1px solid var(--bb-j-rule); }
.bb-journal .bb-j-method__sources > div { padding: 16px 18px; background: var(--bb-j-sheet); }
.bb-journal .bb-j-method__sources dt { margin: 0 0 4px; font-family: var(--bb-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-j-rubric); }
.bb-journal .bb-j-method__sources dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--bb-j-ink); }

.bb-journal .bb-j-method__steps { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: bb-step; }
.bb-journal .bb-j-method__steps > li { position: relative; margin: 0; padding: 18px 0 6px 48px; border-top: 1px solid var(--bb-j-rule); counter-increment: bb-step; }
.bb-journal .bb-j-method__steps > li::before { content: counter(bb-step); position: absolute; top: 18px; left: 0; display: grid; place-items: center; width: 30px; height: 30px; font-family: var(--bb-font-mono); font-size: 0.8rem; font-weight: 500; color: var(--bb-paper); background: var(--bb-j-ink); border-radius: 50%; }
.bb-journal .bb-j-method__note { padding: 12px 16px; background: var(--bb-j-highlight); border-left: 3px solid var(--bb-j-rubric); }
.bb-journal .bb-j-method__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }

@media (max-width: 1099px) {
  .bb-journal .bb-j-author__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .bb-journal .bb-j-author__head { flex-direction: column; align-items: flex-start; }
  .bb-journal .bb-j-method__section { grid-template-columns: minmax(0, 1fr); }
  .bb-journal .bb-j-method__section > *,
  .bb-journal .bb-j-method__section > .bb-j-method__num { grid-column: 1; grid-row: auto; }
  .bb-journal .bb-j-method__section p.bb-j-method__num { font-size: 2rem; margin-bottom: 6px; }
}
/* The Journal's dispatches: the news front, its source and category lists,
   and the item page (docs/design/journal.md). The markup keeps the classes
   news_modern.css styles everywhere else; the double root class outranks its
   rules here without !important. */

.bb-journal.bb-j-news { padding-bottom: clamp(48px, 6vw, 96px); }

.bb-journal.bb-j-news .container-modern {
  max-width: var(--bb-content);
  margin: 0 auto;
  padding: 0 var(--bb-margin);
  box-sizing: content-box;
}

.bb-journal.bb-j-news .bb-j-masthead__sub {
  margin: 0 0 10px;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-j-muted);
}

.bb-journal.bb-j-news .bb-j-masthead__sub .lego-brand { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.bb-journal.bb-j-news .bb-j-masthead__note { max-width: 38rem; margin: 12px 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--bb-j-ink-2); }
.bb-journal.bb-j-news .bb-j-masthead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
.bb-journal.bb-j-news .bb-j-masthead__actions .bb-j-masthead__rss { margin-top: 0; }

/* Source and category lists open with the same chapter line. */
.bb-journal.bb-j-news .news-category-hero {
  padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px);
  color: var(--bb-j-ink);
  background: none;
  border-bottom: 1px solid var(--bb-j-ink);
}

.bb-journal.bb-j-news .news-category-hero .container-modern > * { margin-left: 0; }
.bb-journal.bb-j-news .breadcrumb-modern,
.bb-journal.bb-j-news .breadcrumbs-modern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 18px;
  padding: 0;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-j-muted);
  background: none;
}

.bb-journal.bb-j-news :is(.breadcrumb-modern, .breadcrumbs-modern) a,
.bb-journal.bb-j-news .breadcrumbs-modern .breadcrumb-link { display: inline-flex; align-items: center; gap: 6px; color: var(--bb-j-ink-2); text-decoration: none; }
.bb-journal.bb-j-news :is(.breadcrumb-modern, .breadcrumbs-modern) a:hover { color: var(--bb-j-ink); text-decoration: underline; text-underline-offset: 3px; }
.bb-journal.bb-j-news .breadcrumbs-modern .breadcrumb-link svg { display: none; }
.bb-journal.bb-j-news .breadcrumb-separator { width: auto; height: auto; color: var(--bb-j-rule); }
.bb-journal.bb-j-news .breadcrumb-current { color: var(--bb-j-muted); }

.bb-journal.bb-j-news .category-title {
  margin: 0 0 10px;
  font-family: var(--bb-font-serif);
  font-size: clamp(2.75rem, 2rem + 3vw, 5rem);
  font-weight: 500;
  line-height: 1;
  color: var(--bb-j-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.bb-journal.bb-j-news .category-description { margin: 0; font-family: var(--bb-font-serif); font-size: 1.25rem; font-style: italic; color: var(--bb-j-ink-2); }

/* The desk's dateline: the latest dispatch's date. It is that dispatch's
   date, never today's, so it cannot overstate how fresh the desk is. */
.bb-journal.bb-j-news .bb-j-masthead { position: relative; overflow: hidden; container-type: inline-size; }
.bb-journal.bb-j-news .bb-j-masthead__inner { position: relative; z-index: 1; }

.bb-journal .bb-j-dateline {
  position: absolute;
  z-index: 1;
  right: clamp(24px, 8vw, 140px);
  bottom: clamp(28px, 4vw, 56px);
  margin: 0;
  pointer-events: none;
}

.bb-journal .bb-j-dateline__label {
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-j-ink-2);
}

/* The desk keeps a lighthouse: the homepage's model at night. The still's
   own beam is a flat wedge, so its mask removes it, along with fading the
   still's foot and left edge, and a soft cone of light takes its place,
   reaching from the lamp across the masthead. */
.bb-journal.bb-j-news .bb-j-masthead { min-height: 520px; }

/* The model's right edge sits 82.5% across the still, so the figure is
   placed to end that edge on the page's column; container units measure
   the masthead's content box, inside its side margins. */
.bb-journal .bb-j-lighthouse {
  --bb-j-column-inset: max(var(--bb-margin), (100cqw + 2 * var(--bb-margin) - var(--bb-content)) / 2);
  position: absolute;
  top: 0;
  right: calc(var(--bb-j-column-inset) - 8.05cqw);
  bottom: 0;
  width: 46cqw;
  margin: 0;
  pointer-events: none;
}

.bb-journal .bb-j-lighthouse__frame {
  position: absolute;
  right: 0;
  bottom: -9%;
  width: 100%;
  aspect-ratio: 1600 / 1000;
}

/* The baseplate stands on the page: a soft contact shadow under it, as the
   shelf's sets have. */
.bb-journal .bb-j-lighthouse__frame::before {
  content: "";
  position: absolute;
  top: 57%;
  left: 47%;
  width: 38%;
  height: 8%;
  background: radial-gradient(closest-side, rgba(40, 28, 16, 0.3), rgba(40, 28, 16, 0));
}

.bb-journal .bb-j-lighthouse__still {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  filter: sepia(0.2) saturate(0.9);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x2='0' y2='1'%3E%3Cstop offset='.78' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23000'/%3E%3C/linearGradient%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-color='%23000'/%3E%3Cstop offset='.3' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='b'%3E%3Cstop offset='.92' stop-color='%23000'/%3E%3Cstop offset='.95' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cmask id='mv'%3E%3Crect width='1600' height='1000' fill='url%28%23v%29'/%3E%3C/mask%3E%3Cmask id='ml'%3E%3Crect width='1600' height='1000' fill='url%28%23l%29'/%3E%3C/mask%3E%3Cmask id='mb'%3E%3Crect width='1600' height='1000' fill='%23fff'/%3E%3Crect y='118' width='1100' height='130' fill='url%28%23b%29'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url%28%23mv%29'%3E%3Cg mask='url%28%23ml%29'%3E%3Crect width='1600' height='1000' fill='%23000' mask='url%28%23mb%29'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x2='0' y2='1'%3E%3Cstop offset='.78' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23000'/%3E%3C/linearGradient%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-color='%23000'/%3E%3Cstop offset='.3' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='b'%3E%3Cstop offset='.92' stop-color='%23000'/%3E%3Cstop offset='.95' stop-color='%23fff'/%3E%3C/linearGradient%3E%3Cmask id='mv'%3E%3Crect width='1600' height='1000' fill='url%28%23v%29'/%3E%3C/mask%3E%3Cmask id='ml'%3E%3Crect width='1600' height='1000' fill='url%28%23l%29'/%3E%3C/mask%3E%3Cmask id='mb'%3E%3Crect width='1600' height='1000' fill='%23fff'/%3E%3Crect y='118' width='1100' height='130' fill='url%28%23b%29'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url%28%23mv%29'%3E%3Cg mask='url%28%23ml%29'%3E%3Crect width='1600' height='1000' fill='%23000' mask='url%28%23mb%29'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* The lamp sits at 70.9% across and 17% down the still; the cone opens
   about ten degrees and is blurred so it lightens the paper softly. */
.bb-journal .bb-j-lighthouse__beam {
  position: absolute;
  top: calc(17% - 8.7%);
  right: 29.1%;
  width: 62%;
  height: 17.4%;
  filter: blur(8px);
}

.bb-journal .bb-j-lighthouse__beam::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(255, 214, 140, 0.55) 0, rgba(255, 214, 140, 0.25) 35%, rgba(255, 214, 140, 0) 100%);
  clip-path: polygon(100% 44%, 0 0, 0 100%, 100% 56%);
}

/* The credit ends on the page's column, under the model's right edge. */
.bb-journal .bb-j-lighthouse__credit {
  position: absolute;
  right: 8.05cqw;
  bottom: 12px;
  white-space: nowrap;
  font-family: var(--bb-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--bb-j-ink-2);
  pointer-events: auto;
}

.bb-journal .bb-j-lighthouse__credit a { color: inherit; }

/* The beam breathes slowly, as the homepage's lamp does. */
@media (prefers-reduced-motion: no-preference) {
  .bb-journal .bb-j-lighthouse__beam { animation: bb-j-beam 6s ease-in-out infinite alternate; }
}

@keyframes bb-j-beam {
  from { opacity: 0.65; }
  to { opacity: 1; }
}

/* From tablet width down there is no room beside the title, and below it
   the lighthouse would stand alone in an empty corner; phones have room
   under the intro. */
@media (max-width: 1099px) {
  .bb-journal .bb-j-dateline { display: none; }
  .bb-journal.bb-j-news .bb-j-masthead { min-height: 0; }
  .bb-journal .bb-j-lighthouse { display: none; }
}

/* The still has wide transparent margins: on a phone it is sized so the
   model itself stands about 200px tall, and the box clips the rest. */
@media (max-width: 599px) {
  .bb-journal .bb-j-lighthouse { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: auto; height: 260px; right: auto; margin: 8px 0 0; overflow: hidden; }
  .bb-journal .bb-j-lighthouse__frame { top: 20px; right: -60px; bottom: auto; width: 540px; }
  .bb-journal .bb-j-lighthouse__beam { width: 40%; }
  .bb-journal .bb-j-lighthouse__credit { position: static; text-align: right; white-space: normal; }
}

/* Filters as a ruled toolbar. */
.bb-journal.bb-j-news .news-filters-section {
  margin: 0;
  padding: 18px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--bb-j-rule);
  box-shadow: none;
}

.bb-journal.bb-j-news .news-filters-form { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.bb-journal.bb-j-news .filter-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bb-journal.bb-j-news .filter-search { position: relative; flex: 1 1 280px; padding: 0; }
.bb-journal.bb-j-news .filter-search .search-icon { position: absolute; top: 50%; left: 14px; z-index: 1; width: 16px; height: 16px; color: var(--bb-j-muted); transform: translateY(-50%); }
.bb-journal.bb-j-news .filter-select-wrapper { position: relative; flex: 0 1 auto; }
.bb-journal.bb-j-news .filter-select-wrapper .filter-icon { display: none; }

.bb-journal.bb-j-news .filter-search-input,
.bb-journal.bb-j-news .filter-select-modern {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--bb-font-text);
  font-size: 0.9375rem;
  color: var(--bb-j-ink);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--bb-j-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-journal.bb-j-news .filter-search-input { padding-left: 40px; }
.bb-journal.bb-j-news .filter-select-modern { padding-right: 32px; }
.bb-journal.bb-j-news .filter-search-input:focus,
.bb-journal.bb-j-news .filter-select-modern:focus { border-color: var(--bb-j-ink); outline: 3px solid var(--bb-marker); outline-offset: 1px; }

.bb-journal.bb-j-news .btn-filter-submit,
.bb-journal.bb-j-news .btn-primary-lego,
.bb-journal.bb-j-news .btn-white-solid,
.bb-journal.bb-j-news .source-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font-family: var(--bb-font-text);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bb-paper);
  background: var(--bb-ink);
  border: 1.5px solid var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  box-shadow: 0 4px 0 0 var(--bb-signal);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--bb-dur-1) var(--bb-ease-out), box-shadow var(--bb-dur-1) var(--bb-ease-out);
}

.bb-journal.bb-j-news :is(.btn-filter-submit, .btn-primary-lego, .btn-white-solid, .source-cta-button):hover { color: var(--bb-paper); background: var(--bb-ink); transform: translateY(-1px); box-shadow: 0 5px 0 0 var(--bb-signal); }
.bb-journal.bb-j-news :is(.btn-filter-submit, .btn-primary-lego, .btn-white-solid, .source-cta-button):active { transform: translateY(4px); box-shadow: 0 0 0 0 var(--bb-signal); }
.bb-journal.bb-j-news .btn-full-width { display: flex; width: 100%; }

/* The front: a lead dispatch, the wire in columns, and a ruled sidebar. */
.bb-journal.bb-j-news .news-layout-modern {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 4vw, 56px);
  margin: clamp(32px, 4vw, 56px) 0 0;
}

.bb-journal.bb-j-news .news-main-content { min-width: 0; }

.bb-journal.bb-j-news .news-card-featured {
  display: block;
  margin: 0 0 40px;
  padding: 0 0 36px;
  overflow: visible;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--bb-j-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-journal.bb-j-news .news-card-featured:hover { transform: none; box-shadow: none; }
.bb-journal.bb-j-news .news-card-link { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; align-items: start; color: var(--bb-j-ink); text-decoration: none; }

.bb-journal.bb-j-news .news-card-image-wrapper {
  position: relative;
  height: auto;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

/* Dispatch photos print onto the paper, so a product shot's white page
   takes the paper's tone instead of framing the photo in a white mat. */
.bb-journal.bb-j-news .news-card-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; transform: none; mix-blend-mode: multiply; }
.bb-journal.bb-j-news .news-card-featured:hover .news-card-image { transform: none; }
.bb-journal.bb-j-news .news-card-image-placeholder,
.bb-journal.bb-j-news .news-card-img-placeholder { display: grid; place-items: center; aspect-ratio: 4 / 3; height: auto; color: var(--bb-j-muted); background: var(--bb-j-paper-2); }

.bb-journal.bb-j-news .news-card-badge-featured,
.bb-journal.bb-j-news .news-card-source-badge {
  position: absolute;
  top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: var(--bb-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.bb-journal.bb-j-news .news-card-badge-featured { left: 20px; color: var(--bb-paper); background: var(--bb-j-rubric); }
.bb-journal.bb-j-news .news-card-badge-featured svg { display: none; }
.bb-journal.bb-j-news .news-card-source-badge { right: 20px; left: auto; color: var(--bb-j-ink); background: var(--bb-j-sheet); }
.bb-journal.bb-j-news .news-card-content-featured { display: flex; flex-direction: column; gap: 12px; padding: 0; }

.bb-journal.bb-j-news .news-card-title-featured {
  margin: 0;
  font-family: var(--bb-font-serif);
  font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.06;
  color: var(--bb-j-ink);
  text-wrap: balance;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.bb-journal.bb-j-news .news-card-link:hover .news-card-title-featured { text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.bb-journal.bb-j-news .news-card-excerpt-featured { margin: 0; font-family: var(--bb-font-reading); font-size: 1.125rem; line-height: 1.6; color: var(--bb-j-ink-2); }
.bb-journal.bb-j-news .featured-mentioned-sets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.bb-journal.bb-j-news .inline-set-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bb-j-ink);
  background: var(--bb-j-sheet);
  border: 1px solid var(--bb-j-rule);
  border-radius: 999px;
}

.bb-journal.bb-j-news .inline-set-chip-image { width: 26px; height: 26px; object-fit: contain; background: #FFFFFF; border-radius: 50%; }

.bb-journal.bb-j-news .news-card-meta-featured,
.bb-journal.bb-j-news .news-card-meta-regular { display: flex; gap: 14px; margin: 0; font-family: var(--bb-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; color: var(--bb-j-muted); border: 0; }
.bb-journal.bb-j-news .meta-item-modern { display: inline-flex; align-items: center; gap: 6px; font-size: inherit; color: inherit; }
.bb-journal.bb-j-news .meta-item-modern svg { display: none; }
.bb-journal.bb-j-news .meta-item-modern:empty { display: none; }
.bb-journal.bb-j-news .news-card-cta { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; color: var(--bb-j-ink); text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-underline-offset: 5px; background: none; }
.bb-journal.bb-j-news .news-card-cta svg { width: 12px; height: 12px; }

.bb-journal.bb-j-news .news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 36px 28px;
  margin: 0;
}

.bb-journal.bb-j-news .news-card {
  margin: 0;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bb-journal.bb-j-news .news-card:hover { transform: none; box-shadow: none; }
.bb-journal.bb-j-news .news-card-link-regular { display: flex; flex-direction: column; gap: 6px; height: 100%; color: var(--bb-j-ink); text-decoration: none; }
.bb-journal.bb-j-news .news-card-image-container { height: auto; margin: 0 0 8px; padding: 0; overflow: hidden; background: var(--bb-j-paper-2); border: 1px solid rgba(30, 28, 25, 0.14); border-radius: 0; box-shadow: none; transition: transform var(--bb-dur-3) var(--bb-ease-out); }
.bb-journal.bb-j-news .news-card-link-regular:hover .news-card-image-container { transform: translateY(-3px); }
.bb-journal.bb-j-news .news-card-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; transform: none; }
.bb-journal.bb-j-news .news-card:hover .news-card-img { transform: none; }
.bb-journal.bb-j-news .news-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 0; }
.bb-journal.bb-j-news .news-card-source { padding: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; color: var(--bb-j-rubric); background: none; text-transform: none; }
.bb-journal.bb-j-news .news-card-title-regular { margin: 0; font-family: var(--bb-font-serif); font-size: 1.3rem; font-weight: 500; line-height: 1.15; color: var(--bb-j-ink); }
.bb-journal.bb-j-news .news-card-link-regular:hover .news-card-title-regular { text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-underline-offset: 5px; }
.bb-journal.bb-j-news .news-card-excerpt-regular { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--bb-j-ink-2); }
.bb-journal.bb-j-news .news-card-meta-regular { margin-top: auto; padding-top: 4px; }
.bb-journal.bb-j-news .meta-date { color: inherit; }

.bb-journal.bb-j-news .pagination-modern { margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--bb-j-ink); }
.bb-journal.bb-j-news .pagination-modern .pagination-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; background: none; box-shadow: none; }
.bb-journal.bb-j-news .pagination-modern .page-numbers { display: flex; gap: 4px; }
.bb-journal.bb-j-news .pagination-modern :is(.page-link, .pagination-wrapper > a, .pagination-wrapper > span) { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; font-family: var(--bb-font-mono); font-size: 0.8125rem; color: var(--bb-j-ink); background: transparent; border: 1px solid var(--bb-j-rule); border-radius: var(--bb-radius-sm); text-decoration: none; box-shadow: none; }
.bb-journal.bb-j-news .pagination-modern .page-link.active { color: var(--bb-j-sheet); background: var(--bb-j-ink); border-color: var(--bb-j-ink); }

.bb-journal.bb-j-news .no-results-modern { padding: 48px 0; text-align: left; color: var(--bb-j-ink-2); background: none; }
.bb-journal.bb-j-news .no-results-modern svg { display: none; }
.bb-journal.bb-j-news .no-results-modern h3 { margin: 0 0 8px; font-family: var(--bb-font-serif); font-size: 2rem; font-weight: 500; color: var(--bb-j-ink); }

/* Sidebar cards on both pages: ruled lists, then two call-to-action slips. */
.bb-journal.bb-j-news :is(.news-sidebar-modern, .news-detail-sidebar) { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

.bb-journal.bb-j-news .sidebar-card {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--bb-j-ink);
  border-radius: 0;
  box-shadow: none;
}

.bb-journal.bb-j-news .sidebar-header { display: block; margin: 0; padding: 12px 0 4px; background: none; border: 0; }
.bb-journal.bb-j-news .sidebar-header svg { display: none; }
.bb-journal.bb-j-news .sidebar-header h3 { margin: 0; font-family: var(--bb-font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-j-ink); }
.bb-journal.bb-j-news .sidebar-list-modern { margin: 0; padding: 0; list-style: none; }
.bb-journal.bb-j-news .sidebar-list-item { margin: 0; padding: 0; border-bottom: 1px solid var(--bb-j-rule); }
.bb-journal.bb-j-news .sidebar-link { display: block; padding: 12px 0; color: var(--bb-j-ink); text-decoration: none; background: none; }
.bb-journal.bb-j-news .sidebar-link:hover { background: none; }
.bb-journal.bb-j-news .sidebar-link h4 { margin: 0 0 4px; font-family: var(--bb-font-serif); font-size: 1.0625rem; font-weight: 500; line-height: 1.25; color: var(--bb-j-ink); }
.bb-journal.bb-j-news .sidebar-link:hover h4 { text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-underline-offset: 3px; }
.bb-journal.bb-j-news .sidebar-meta { font-family: var(--bb-font-mono); font-size: 0.7rem; color: var(--bb-j-muted); }

.bb-journal.bb-j-news .sidebar-cta {
  padding: 22px 20px;
  text-align: left;
  color: var(--bb-j-ink);
  background: var(--bb-j-sheet);
  border: 1px solid var(--bb-j-ink);
  border-radius: var(--bb-radius);
  box-shadow: 5px 5px 0 0 var(--bb-paper-3);
}

.bb-journal.bb-j-news .sidebar-cta h3 { margin: 0 0 6px; font-family: var(--bb-font-serif); font-size: 1.5rem; font-weight: 500; color: var(--bb-j-ink); }
.bb-journal.bb-j-news .sidebar-cta p { margin: 0 0 16px; font-size: 0.9375rem; color: var(--bb-j-ink-2); }
.bb-journal.bb-j-news .sidebar-cta .cta-icon { display: none; }
.bb-journal.bb-j-news .sidebar-cta-red { color: var(--bb-night-text); background: var(--bb-night); border-color: var(--bb-night); box-shadow: 5px 5px 0 0 var(--bb-j-rubric); }
.bb-journal.bb-j-news .sidebar-cta-red h3 { color: var(--bb-night-text); }
.bb-journal.bb-j-news .sidebar-cta-red p { color: var(--bb-night-text-2); }
.bb-journal.bb-j-news .sidebar-cta-red .btn-white-solid { color: var(--bb-night); background: var(--bb-night-text); border-color: var(--bb-night-text); }
.bb-journal.bb-j-news .sidebar-cta-red .btn-white-solid:hover { color: var(--bb-night); background: #FFFFFF; }

/* The item page: an opening plate, the dispatch in the column, the sets
   it mentions, and the sidebar. */
.bb-journal.bb-j-news .news-detail-hero { margin: 0; padding: clamp(24px, 3vw, 40px) var(--bb-margin) 0; background: none; }
.bb-journal.bb-j-news .news-detail-hero:empty { display: none; }

.bb-journal.bb-j-news .news-detail-hero-image {
  position: relative;
  max-width: 920px;
  height: auto;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background: var(--bb-j-paper-2);
  border: 1px solid rgba(30, 28, 25, 0.14);
  box-shadow: none;
  transform: none;
}

.bb-journal.bb-j-news .news-detail-hero-image img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.bb-journal.bb-j-news .news-detail-hero-overlay { display: none; }
.bb-journal.bb-j-news .news-detail-page-modern > .container-modern,
.bb-journal.bb-j-news > .container-modern { padding-top: 28px; }

.bb-journal.bb-j-news .news-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 4vw, 64px); margin-top: 8px; }
.bb-journal.bb-j-news .news-detail-main { min-width: 0; max-width: 44rem; padding: 0; background: none; border: 0; box-shadow: none; }
.bb-journal.bb-j-news .news-detail-header { margin: 0 0 24px; padding: 0 0 0 26px; background: none; border: 0; border-left: 1px solid rgba(163, 65, 46, 0.55); }

.bb-journal.bb-j-news .news-detail-source-attribution { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; font-size: 0.875rem; background: none; border: 0; }
.bb-journal.bb-j-news .source-label { font-family: var(--bb-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-j-muted); }
.bb-journal.bb-j-news :is(.source-name-link, .source-name) { font-weight: 600; letter-spacing: 0.06em; color: var(--bb-j-rubric); text-decoration: none; }
.bb-journal.bb-j-news .source-name-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.bb-journal.bb-j-news .news-detail-title {
  margin: 0 0 18px;
  font-family: var(--bb-font-serif);
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  font-weight: 500;
  line-height: 1.04;
  color: var(--bb-j-ink);
  text-wrap: balance;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.bb-journal.bb-j-news .news-detail-meta-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 0; background: none; border: 0; }
.bb-journal.bb-j-news .news-meta-group { display: flex; flex-wrap: wrap; gap: 14px; }
.bb-journal.bb-j-news .news-meta-item-modern { display: inline-flex; align-items: center; gap: 6px; font-family: var(--bb-font-mono); font-size: 0.75rem; font-weight: 500; color: var(--bb-j-muted); }
.bb-journal.bb-j-news .news-meta-item-modern svg { display: none; }
.bb-journal.bb-j-news .news-meta-item-modern:empty { display: none; }
.bb-journal.bb-j-news .news-category-link { color: var(--bb-j-ink); text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-underline-offset: 3px; }

.bb-journal.bb-j-news .news-detail-meta-bar .social-share-buttons { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; background: none; border: 0; }
.bb-journal.bb-j-news .news-detail-meta-bar .share-label { font-family: var(--bb-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-j-muted); }
.bb-journal.bb-j-news .social-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; color: var(--bb-j-ink); background: transparent; border: 1px solid var(--bb-j-rule); border-radius: 50%; cursor: pointer; transition: border-color var(--bb-dur-2), background-color var(--bb-dur-2); }
.bb-journal.bb-j-news .social-btn:hover { color: var(--bb-j-ink); background: var(--bb-j-sheet); border-color: var(--bb-j-ink); transform: none; }
.bb-journal.bb-j-news .social-btn.copied { color: var(--bb-j-sheet); background: var(--bb-j-ink); border-color: var(--bb-j-ink); }

.bb-journal.bb-j-news .news-article-summary { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.bb-journal.bb-j-news .news-discovery-note { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 0; font-size: 0.875rem; color: var(--bb-j-ink-2); background: none; border: 0; }
.bb-journal.bb-j-news .news-discovery-note svg { color: var(--bb-j-muted); }

.bb-journal.bb-j-news .news-ai-summary {
  position: relative;
  margin: 26px 0 22px;
  padding: 28px 22px 18px;
  background: var(--bb-j-sheet);
  border: 1.5px solid var(--bb-j-ink);
  border-radius: var(--bb-radius);
  box-shadow: 6px 6px 0 0 var(--bb-paper-3);
}

.bb-journal.bb-j-news .ai-summary-header {
  position: absolute;
  top: 0;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 4px;
  font-family: var(--bb-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-j-ink);
  background: var(--bb-j-sheet);
  border: 1px solid var(--bb-j-ink);
  border-radius: 999px;
  transform: translateY(-50%);
}

.bb-journal.bb-j-news .blocktalk-icon { width: 20px; height: 20px; border-radius: 50%; }
.bb-journal.bb-j-news .ai-summary-content p { margin: 0; font-family: var(--bb-font-reading); font-size: 1.125rem; line-height: 1.65; color: var(--bb-j-ink); }
.bb-journal.bb-j-news .ai-summary-content p + p { margin-top: 0.8em; }
.bb-journal.bb-j-news .ai-summary-content a { color: var(--bb-j-ink); text-decoration-color: var(--bb-j-rubric); text-underline-offset: 3px; }

.bb-journal.bb-j-news .news-detail-excerpt { margin: 0; padding: 0; background: none; border: 0; }
.bb-journal.bb-j-news .news-detail-excerpt p { margin: 0; font-family: var(--bb-font-reading); font-size: 1.1875rem; line-height: 1.68; color: var(--bb-j-ink); }
.bb-journal.bb-j-news .news-continue-reading-inline { margin: 18px 0 0; }
.bb-journal.bb-j-news .continue-reading-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--bb-j-ink); text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-underline-offset: 5px; background: none; }
.bb-journal.bb-j-news .continue-reading-link svg { width: 12px; height: 12px; }

.bb-journal.bb-j-news .news-amazon-deals-section { margin: 32px 0 0; padding: 22px; background: var(--bb-j-sheet); border: 1px solid var(--bb-j-rule); border-radius: var(--bb-radius); box-shadow: none; }
.bb-journal.bb-j-news .amazon-deals-header { display: block; margin: 0 0 12px; padding: 0; background: none; border: 0; }
.bb-journal.bb-j-news .amazon-deals-header svg { display: none; }
.bb-journal.bb-j-news .amazon-deals-header h3 { margin: 0; font-family: var(--bb-font-serif); font-size: 1.5rem; font-weight: 500; color: var(--bb-j-ink); }
.bb-journal.bb-j-news .amazon-deals-disclaimer p { font-size: 0.8125rem; color: var(--bb-j-muted); }

.bb-journal.bb-j-news .news-detail-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 32px 0 0; padding: 18px 0 0; background: none; border: 0; border-top: 1px solid var(--bb-j-ink); }
.bb-journal.bb-j-news .news-detail-tags svg { display: none; }
.bb-journal.bb-j-news .news-tag-modern { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; font-size: 0.8125rem; font-weight: 600; color: var(--bb-j-ink); background: var(--bb-j-sheet); border: 1px solid var(--bb-j-rule); border-radius: 999px; }

.bb-journal.bb-j-news .news-source-cta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 32px 0 0;
  padding: 22px;
  background: var(--bb-j-highlight);
  border: 0;
  border-left: 3px solid var(--bb-j-rubric);
  border-radius: 0;
  box-shadow: none;
}

.bb-journal.bb-j-news .source-cta-content { display: block; }
.bb-journal.bb-j-news .source-cta-icon { display: none; }
.bb-journal.bb-j-news .source-cta-text h4 { margin: 0 0 4px; font-family: var(--bb-font-serif); font-size: 1.375rem; font-weight: 500; color: var(--bb-j-ink); }
.bb-journal.bb-j-news .source-cta-text p { margin: 0; font-size: 0.9375rem; color: var(--bb-j-ink-2); }
.bb-journal.bb-j-news .source-cta-button svg { width: 12px; height: 12px; }

.bb-journal.bb-j-news .news-mentioned-sets-section { margin: 40px 0 0; padding: 0; background: none; border: 0; box-shadow: none; }
.bb-journal.bb-j-news .mentioned-sets-header { display: block; margin: 0 0 18px; padding: 14px 0 0; background: none; border: 0; border-top: 1px solid var(--bb-j-ink); }
.bb-journal.bb-j-news .mentioned-sets-header svg { display: none; }
.bb-journal.bb-j-news .mentioned-sets-header h3 { margin: 0; font-family: var(--bb-font-serif); font-size: 1.75rem; font-weight: 500; color: var(--bb-j-ink); }
.bb-journal.bb-j-news .mentioned-sets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }

.bb-journal.bb-j-news :is(.mentioned-set-card, .sidebar-set-card, .sidebar-amazon-search-card) {
  margin: 0;
  overflow: visible;
  background: var(--bb-j-sheet);
  border: 1px solid var(--bb-j-rule);
  border-radius: var(--bb-radius);
  box-shadow: none;
}

.bb-journal.bb-j-news .mentioned-set-card { display: flex; flex-direction: column; padding: 12px; }
.bb-journal.bb-j-news .mentioned-set-card:hover { transform: none; border-color: var(--bb-j-ink); box-shadow: none; }
.bb-journal.bb-j-news .mentioned-set-image { display: grid; place-items: center; aspect-ratio: 4 / 3; height: auto; margin: 0 0 10px; background: #FFFFFF; border-radius: var(--bb-radius-sm); }
.bb-journal.bb-j-news .mentioned-set-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bb-journal.bb-j-news .mentioned-set-content { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 0; }
.bb-journal.bb-j-news .mentioned-set-title { margin: 0; font-family: var(--bb-font-serif); font-size: 1.15rem; font-weight: 500; line-height: 1.2; color: var(--bb-j-ink); }
.bb-journal.bb-j-news :is(.mentioned-set-meta, .mentioned-set-theme) { font-family: var(--bb-font-mono); font-size: 0.7rem; color: var(--bb-j-muted); }
.bb-journal.bb-j-news :is(.mentioned-set-price, .sidebar-set-price) { font-family: var(--bb-font-mono); font-size: 0.8rem; font-weight: 500; color: var(--bb-j-ink); }
.bb-journal.bb-j-news .mentioned-set-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }

.bb-journal.bb-j-news :is(.btn-amazon-small, .btn-ebay-small, .sidebar-amazon-btn, .sidebar-amazon-search-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bb-paper);
  background: var(--bb-ink);
  border: 1.5px solid var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  box-shadow: 0 3px 0 0 var(--bb-signal);
  text-decoration: none;
}

.bb-journal.bb-j-news .btn-ebay-small { color: var(--bb-ink); background: #FFFFFF; box-shadow: 0 3px 0 0 var(--bb-ink); }
.bb-journal.bb-j-news .sidebar-sets-list,
.bb-journal.bb-j-news .sidebar-amazon-list,
.bb-journal.bb-j-news .related-news-list { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 0; }
.bb-journal.bb-j-news .sidebar-set-card { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px; }
.bb-journal.bb-j-news .sidebar-set-image { display: grid; place-items: center; width: 64px; height: 64px; background: #FFFFFF; border-radius: var(--bb-radius-sm); }
.bb-journal.bb-j-news .sidebar-set-image img { max-width: 60px; max-height: 60px; object-fit: contain; }
.bb-journal.bb-j-news .sidebar-set-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bb-journal.bb-j-news .sidebar-set-link { font-family: var(--bb-font-serif); font-size: 1rem; line-height: 1.2; color: var(--bb-j-ink); text-decoration: none; }
.bb-journal.bb-j-news .sidebar-set-cta { margin-top: 4px; }
.bb-journal.bb-j-news .sidebar-amazon-search-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.bb-journal.bb-j-news .amazon-search-set-num { font-family: var(--bb-font-mono); font-size: 0.8rem; color: var(--bb-j-ink); }

.bb-journal.bb-j-news .related-news-card { margin: 0; background: none; border: 0; border-bottom: 1px solid var(--bb-j-rule); border-radius: 0; box-shadow: none; }
.bb-journal.bb-j-news .related-news-link { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 0 0 10px; color: var(--bb-j-ink); text-decoration: none; }
.bb-journal.bb-j-news .related-news-image { width: 72px; height: 54px; overflow: hidden; background: var(--bb-j-paper-2); border-radius: 0; }
.bb-journal.bb-j-news .related-news-image img { width: 100%; height: 100%; object-fit: cover; }
.bb-journal.bb-j-news .related-news-content h4 { margin: 0 0 4px; font-family: var(--bb-font-serif); font-size: 1rem; font-weight: 500; line-height: 1.25; color: var(--bb-j-ink); }
.bb-journal.bb-j-news .related-news-meta { font-family: var(--bb-font-mono); font-size: 0.7rem; color: var(--bb-j-muted); }

.bb-journal.bb-j-news .news-detail-navigation { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 40px 0 0; padding: 20px 0 0; border-top: 1px solid var(--bb-j-ink); }
.bb-journal.bb-j-news .btn-back-modern { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; font-weight: 600; color: var(--bb-j-ink); background: transparent; border: 1.5px solid var(--bb-j-ink); border-radius: var(--bb-radius-sm); box-shadow: 0 4px 0 0 var(--bb-j-ink); text-decoration: none; }
.bb-journal.bb-j-news .btn-back-modern svg { width: 12px; height: 12px; }

@media (max-width: 1099px) {
  .bb-journal.bb-j-news .news-layout-modern,
  .bb-journal.bb-j-news .news-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .bb-journal.bb-j-news .news-detail-main { max-width: none; }
}

@media (max-width: 767px) {
  .bb-journal.bb-j-news .news-card-link { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bb-journal.bb-j-news .news-detail-header { padding-left: 16px; }
}

.bb-journal.bb-j-news .news-card-image-wrapper { display: block; }
.bb-journal.bb-j-news .news-card-badge-featured,
.bb-journal.bb-j-news .news-card-source-badge { bottom: auto; transform: none; }
.bb-journal.bb-j-news .news-discovery-note strong { font-weight: 600; color: var(--bb-j-ink); }
.bb-journal.bb-j-news .source-cta-text { margin: 0; padding: 0; }
.bb-journal.bb-j-news .news-continue-reading-inline { padding: 0; background: none; border: 0; }

/* BlockTalk's two-colour wordmark, in shades that keep 4.5:1 on white stock. */
.bb-journal.bb-j-news .blocktalk-wordmark__block { font-weight: 700; color: var(--bb-signal-ink); }
.bb-journal.bb-j-news .blocktalk-wordmark__talk { font-weight: 700; color: #1572BF; }

.bb-journal.bb-j-news .btn-filter-submit { color: var(--bb-j-ink); background: transparent; box-shadow: none; }
.bb-journal.bb-j-news .btn-filter-submit:hover { box-shadow: none; transform: none; }
.bb-journal.bb-j-news .btn-filter-submit:active { transform: none; }

.bb-journal.bb-j-news .news-layout-modern { margin-top: 0; padding-top: 12px; }
/* The Journal's atmosphere: an article opens on its plate as a scene that
   dissolves into the paper, the paper has a grain, product photos are
   printed into it, and the back matter moves through the afternoon to dusk
   (docs/design/journal.md, "Atmosphere"). */

/* The grain's filter reference is written url%28...%29: Sprockets rewrites
   any literal url( in a stylesheet, which would break it. */
.bb-journal {
  --bb-j-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .24 0 0 0 0 .16 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  /* Ink washes: a gradient broken up by cloud-sized noise, so an edge
     dissolves the way mist does instead of along a ruled line. The opening
     plate fades at the top, side and foot, or only the side and foot for a
     wide header; the downward wash is for narrow screens. The drift tile is
     the mist that moves over the plate's edge. */
  --bb-j-wash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 800' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='h'%3E%3Cstop offset='.02' stop-opacity='0'/%3E%3Cstop offset='.16' stop-opacity='.06'/%3E%3Cstop offset='.26' stop-opacity='.25'/%3E%3Cstop offset='.34' stop-opacity='.65'/%3E%3Cstop offset='.39'/%3E%3C/linearGradient%3E%3ClinearGradient id='v' x2='0' y2='1'%3E%3Cstop offset='.04' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.14' stop-color='%23fff' stop-opacity='.06'/%3E%3Cstop offset='.21' stop-color='%23fff' stop-opacity='.25'/%3E%3Cstop offset='.27' stop-color='%23fff' stop-opacity='.65'/%3E%3Cstop offset='.31' stop-color='%23fff'/%3E%3Cstop offset='.76' stop-color='%23fff'/%3E%3Cstop offset='.81' stop-color='%23fff' stop-opacity='.65'/%3E%3Cstop offset='.87' stop-color='%23fff' stop-opacity='.25'/%3E%3Cstop offset='.92' stop-color='%23fff' stop-opacity='.06'/%3E%3Cstop offset='.96' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='1000' height='800' fill='url%28%23v%29'/%3E%3C/mask%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0042 .0075' numOctaves='4' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.25 0 0 0 -.12' result='n'/%3E%3CfeComposite in='SourceGraphic' in2='n' operator='arithmetic' k2='2.1' k3='.95' k4='-1.05'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url%28%23f%29'%3E%3Crect width='1000' height='800' fill='url%28%23h%29' mask='url%28%23m%29'/%3E%3C/g%3E%3C/svg%3E");
  --bb-j-wash-bleed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 800' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='h'%3E%3Cstop offset='0' stop-opacity='.35'/%3E%3Cstop offset='.06'/%3E%3C/linearGradient%3E%3ClinearGradient id='v' x2='0' y2='1'%3E%3Cstop offset='.76' stop-color='%23fff'/%3E%3Cstop offset='.81' stop-color='%23fff' stop-opacity='.65'/%3E%3Cstop offset='.87' stop-color='%23fff' stop-opacity='.25'/%3E%3Cstop offset='.92' stop-color='%23fff' stop-opacity='.06'/%3E%3Cstop offset='.96' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='1000' height='800' fill='url%28%23v%29'/%3E%3C/mask%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0042 .0075' numOctaves='4' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.25 0 0 0 -.12' result='n'/%3E%3CfeComposite in='SourceGraphic' in2='n' operator='arithmetic' k2='2.1' k3='.95' k4='-1.05'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url%28%23f%29'%3E%3Crect width='1000' height='800' fill='url%28%23h%29' mask='url%28%23m%29'/%3E%3C/g%3E%3C/svg%3E");
  --bb-j-clouds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x2='0' y2='1'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='.5'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .03' numOctaves='4' seed='12'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 0 0 0 -.5' result='n'/%3E%3CfeComposite in='SourceGraphic' in2='n' operator='arithmetic' k1='1.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1200' height='140' fill='url%28%23v%29' filter='url%28%23f%29'/%3E%3C/svg%3E");
  --bb-j-wash-wide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 800' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='h'%3E%3Cstop offset='.02' stop-opacity='0'/%3E%3Cstop offset='.16' stop-opacity='.06'/%3E%3Cstop offset='.26' stop-opacity='.25'/%3E%3Cstop offset='.34' stop-opacity='.65'/%3E%3Cstop offset='.39'/%3E%3C/linearGradient%3E%3ClinearGradient id='v' x2='0' y2='1'%3E%3Cstop offset='.76' stop-color='%23fff'/%3E%3Cstop offset='.81' stop-color='%23fff' stop-opacity='.65'/%3E%3Cstop offset='.87' stop-color='%23fff' stop-opacity='.25'/%3E%3Cstop offset='.92' stop-color='%23fff' stop-opacity='.06'/%3E%3Cstop offset='.96' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='1000' height='800' fill='url%28%23v%29'/%3E%3C/mask%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0042 .0075' numOctaves='4' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.25 0 0 0 -.12' result='n'/%3E%3CfeComposite in='SourceGraphic' in2='n' operator='arithmetic' k2='2.1' k3='.95' k4='-1.05'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url%28%23f%29'%3E%3Crect width='1000' height='800' fill='url%28%23h%29' mask='url%28%23m%29'/%3E%3C/g%3E%3C/svg%3E");
  --bb-j-drift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='c' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .007' numOctaves='4' seed='33' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.4 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='900' height='600' filter='url%28%23c%29'/%3E%3C/svg%3E");
  --bb-j-wash-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 700' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x2='0' y2='1'%3E%3Cstop offset='.5'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.25 0 0 0 -.12' result='n'/%3E%3CfeComposite in='SourceGraphic' in2='n' operator='arithmetic' k2='1.6' k3='.45' k4='-.55'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url%28%23f%29'%3E%3Crect width='1000' height='700' fill='url%28%23v%29'/%3E%3C/g%3E%3C/svg%3E");
  --bb-j-crumbs-h: 50px;
  background:
    var(--bb-j-grain),
    radial-gradient(1100px 560px at 15% 0%, rgba(255, 236, 200, 0.45), rgba(255, 236, 200, 0) 70%),
    linear-gradient(180deg, #F7F3EA 0, var(--bb-j-paper) 640px);
}


/* The opening scene: the plate fills the right of the screen and bleeds off
   the top, right and bottom; on the text side it thins into the paper the
   way an ink wash does. */
.bb-journal .bb-j-crumbs { position: relative; z-index: 4; }

.bb-journal .bb-j-scene {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 37rem) minmax(0, 1fr);
  grid-template-areas: "text .";
  align-items: center;
  max-width: none;
  min-height: max(560px, calc(100svh - var(--bb-j-header)));
  margin: calc(var(--bb-j-crumbs-h) * -1) 0 0;
  padding: calc(var(--bb-j-crumbs-h) + clamp(32px, 4vw, 64px)) var(--bb-margin) clamp(48px, 6vw, 96px);
  overflow: hidden;
}

.bb-journal .bb-j-scene .bb-journal__spread-text { position: relative; }

/* A wash of paper laid over the photo behind the text, solid under every
   line and breaking into cloud just past the column, so the text reads on
   paper whatever the photo holds. */
.bb-journal .bb-j-scene .bb-journal__spread-text { max-width: 37rem; }

.bb-journal .bb-j-scene .bb-journal__spread-text::before {
  content: "";
  position: absolute;
  inset: -100vh -180px -100vh -100vw;
  z-index: -1;
  /* The wash carries the grain too: flat paper here read as a lighter band
     beside the grained page below the scene. */
  background: var(--bb-j-grain), linear-gradient(90deg, var(--bb-j-paper) calc(100% - 40px), rgba(246, 241, 231, 0) calc(100% - 20px));
  pointer-events: none;
  -webkit-mask: linear-gradient(#000, #000) left / calc(100% - 159px) 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 600' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='h'%3E%3Cstop offset='0'/%3E%3Cstop offset='.9' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .009' numOctaves='4' seed='21' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.25 0 0 0 -.12' result='n'/%3E%3CfeComposite in='SourceGraphic' in2='n' operator='arithmetic' k2='1.8' k3='.7' k4='-.85'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url%28%23f%29'%3E%3Crect width='160' height='600' fill='url%28%23h%29'/%3E%3C/g%3E%3C/svg%3E") right top / 160px 600px repeat-y;
  mask: linear-gradient(#000, #000) left / calc(100% - 159px) 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 600' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='h'%3E%3Cstop offset='0'/%3E%3Cstop offset='.9' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .009' numOctaves='4' seed='21' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.25 0 0 0 -.12' result='n'/%3E%3CfeComposite in='SourceGraphic' in2='n' operator='arithmetic' k2='1.8' k3='.7' k4='-.85'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url%28%23f%29'%3E%3Crect width='160' height='600' fill='url%28%23h%29'/%3E%3C/g%3E%3C/svg%3E") right top / 160px 600px repeat-y;
}

.bb-journal .bb-j-scene__plate {
  position: absolute;
  inset: 0 0 0 22%;
  z-index: -2;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}

.bb-journal .bb-j-scene__plate img {
  border-radius: 0;
  box-shadow: none;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  /* Older square headers are cropped top and bottom here, and many carry
     poster text along an edge; the wash fades the top and the foot into
     mist, so a centred crop leaves that text in the fade. */
  object-position: 50% 50%;
  -webkit-mask: var(--bb-j-wash) 0 0 / 100% 100% no-repeat;
  mask: var(--bb-j-wash) 0 0 / 100% 100% no-repeat;
  /* Warmed so a cool photo, a night scene especially, meets the paper in
     grey-brown rather than blue. */
  filter: sepia(0.3) saturate(0.8) contrast(0.98) brightness(1.03);
}

/* The mist: where the photo thins into the page it is first lifted toward
   a paper a shade lighter than the page, and at the top toward sunlit cream,
   so a dark photo fades through warm light, as the video's mist does,
   rather than through grey. Then haze under the
   header, a warm sun, and the far corners darkened like an old print's. The
   layer is masked with the photo, so none of it lands on bare paper. */
.bb-journal .bb-j-scene__mist {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: var(--bb-j-wash) 0 0 / 100% 100% no-repeat;
  mask: var(--bb-j-wash) 0 0 / 100% 100% no-repeat;
  --bb-j-lift: 248, 244, 236;
  --bb-j-sunlit: 252, 238, 214;
  background:
    linear-gradient(90deg, rgba(var(--bb-j-lift), 0.95) 0, rgba(var(--bb-j-lift), 0.8) 15%, rgba(var(--bb-j-lift), 0.45) 28%, rgba(var(--bb-j-lift), 0) 40%),
    linear-gradient(0deg, rgba(var(--bb-j-lift), 0.9) 0, rgba(var(--bb-j-lift), 0.4) 12%, rgba(var(--bb-j-lift), 0) 26%),
    linear-gradient(180deg, rgba(var(--bb-j-sunlit), 1) 0, rgba(var(--bb-j-sunlit), 1) 27%, rgba(var(--bb-j-sunlit), 0.7) 33%, rgba(var(--bb-j-sunlit), 0.3) 39%, rgba(var(--bb-j-sunlit), 0) 46%),
    radial-gradient(ellipse 80% 90% at 56% 52%, rgba(62, 44, 26, 0) 60%, rgba(62, 44, 26, 0.3) 100%),
    radial-gradient(ellipse 50% 42% at 78% 18%, rgba(255, 222, 170, 0.42), rgba(255, 222, 170, 0) 70%);
}

.bb-journal .bb-j-scene__plate figcaption {
  position: absolute;
  right: var(--bb-margin);
  bottom: 22px;
  left: auto;
  padding: 3px 10px;
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-j-ink-2);
  background: none;
}

.bb-journal .bb-j-scene__plate .pin-it-button { top: calc(var(--bb-j-crumbs-h) + 20px); right: var(--bb-margin); }
.bb-journal .bb-j-scene:hover .pin-it-button { opacity: 1; }

@media (max-width: 1099px) {
  .bb-journal .bb-j-scene {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    margin: 0;
    padding: 0 0 clamp(32px, 5vw, 56px);
  }

  .bb-journal .bb-j-scene__plate {
    position: relative;
    inset: auto;
    order: -1;
    aspect-ratio: 16 / 11;
    margin: 0 0 -28px;
  }

  .bb-journal .bb-j-scene__plate img,
  .bb-journal .bb-j-scene__mist {
    -webkit-mask: var(--bb-j-wash-down) 0 0 / 100% 100% no-repeat;
    mask: var(--bb-j-wash-down) 0 0 / 100% 100% no-repeat;
  }
  .bb-journal .bb-j-scene .bb-journal__spread-text { margin: 0 var(--bb-margin); }
  .bb-journal .bb-j-scene .bb-journal__spread-text { max-width: none; }
  .bb-journal .bb-j-scene .bb-journal__spread-text::before {
    inset: -24px -20px -24px -40px;
    background: radial-gradient(ellipse 62% 58% at 42% 50%, rgba(246, 241, 231, 0.94) 52%, rgba(246, 241, 231, 0) 100%);
    -webkit-mask: none;
    mask: none;
  }
  .bb-journal .bb-j-scene__plate figcaption { display: none; }
  .bb-journal .bb-j-scene__plate .pin-it-button { top: 16px; }
}

/* Print: product photos multiply into paper-toned stock instead of sitting
   in white boxes. */
.bb-journal .apartner-card { background: var(--bb-j-sheet); }
/* The quick picks stick, and a sticky box is a group of its own: it needs the
   paper inside it for its photos to multiply into. */
.bb-journal .quick-picks-sidebar { background: var(--bb-j-paper) var(--bb-j-grain); }
/* Catalog photos on white print straight onto the page's paper. A product
   card fades in as it scrolls into view, which makes it a group of its own,
   so it carries the paper for its photo to multiply into. */
.bb-journal :is(.bb-j-set__plate, .quick-picks-card__image) { background: transparent; }
.bb-journal .bb-prose .article-product-card { background: var(--bb-j-paper) var(--bb-j-grain); }
.bb-journal .bb-prose .article-product-card__image { background: transparent; }
/* On the shelf the sets stand on the band itself, each over a soft floor
   shadow, rather than in boxes. */
.bb-journal .bb-j-band--shelf .bb-j-set__plate { background: none; border: 0; border-radius: 0; }
.bb-journal .bb-j-band--shelf .bb-j-set__plate::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 14%;
  bottom: 1px;
  left: 14%;
  height: 18px;
  background: radial-gradient(closest-side, rgba(60, 40, 20, 0.28), rgba(60, 40, 20, 0));
}
/* The photo sits above its shadow but must not isolate, or it could not
   multiply into the band behind it. */
.bb-journal .bb-j-band--shelf .bb-j-set__img { z-index: 1; }
.bb-journal .bb-j-band--shelf .bb-j-set__link:hover .bb-j-set__plate { border-color: transparent; transform: translateY(-4px); }

.bb-journal :is(.bb-j-set__img, .quick-picks-card__img, .article-product-card__img, .apartner-image, .article-product-carousel__card-img, .mentioned-set-image img, .sidebar-set-image img) { mix-blend-mode: multiply; }

/* Editorial plates share the opening's grade, so a page of guides reads as
   one printing rather than photos from different cameras. Product photos
   keep their colour: a reader is choosing what to buy from them. */
.bb-journal :is(.bb-j-card__plate, .bb-j-story__plate) img { filter: sepia(0.12) saturate(0.9) contrast(0.97); }

/* The day moves on through the back matter in one continuous light, paper to
   late afternoon, with no band edges; further reading falls to dusk and runs
   on into the night of the footer. Warm stretches take darker muted, rubric
   and place shades to keep 4.5:1. */
.bb-journal .bb-j-backmatter {
  --bb-j-muted: #5A544B;
  --bb-j-rubric: #93392A;
  --bb-j-place: #3F5A5B;
  background-color: var(--bb-j-paper);
  background-image: var(--bb-j-grain), radial-gradient(ellipse 75% 520px at 50% 100%, rgba(236, 196, 132, 0.55), rgba(236, 196, 132, 0) 100%), linear-gradient(180deg, rgba(234, 223, 201, 0) 0%, #EADFC9 50%, #E4D6BB calc(100% - 110px), #E3C596 100%);
}

.bb-journal .bb-j-backmatter .bb-j-band { background-color: transparent; background-image: none; }
.bb-journal .bb-j-backmatter .bb-j-tools { margin-top: 0; }
.bb-journal .bb-j-backmatter .bb-j-band { padding-bottom: 0; }
/* The last band stands in the glow, and dusk comes in just below it. */
.bb-journal .bb-j-backmatter .bb-j-band:last-child { padding-bottom: 72px; }
.bb-journal .bb-j-backmatter .bb-j-band + .bb-j-band { padding-top: 56px; }
.bb-journal .bb-j-backmatter .bb-j-band + .bb-j-band .bb-j-band__inner { padding-top: 56px; border-top: 1px solid var(--bb-j-rule); }

/* On the front, the latest guides sit in a deeper tone of paper that the
   page passes into and out of, rather than a block with ruled edges. */
.bb-journal .bb-j-band.latest-articles-section {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(237, 230, 216, 0) 0, var(--bb-j-paper-2) 160px, var(--bb-j-paper-2) calc(100% - 160px), rgba(237, 230, 216, 0) 100%);
}

.bb-journal .bb-j-band.bb-j-band--dusk {
  --bb-j-ink: #F1ECE1;
  --bb-j-ink-2: #C9C1B2;
  --bb-j-muted: #B4BAC4;
  --bb-j-rubric: #FFD58A;
  --bb-j-rule: #4A5162;
  position: relative;
  z-index: 1;
  padding-top: 150px;
  color: var(--bb-j-ink);
  background-color: var(--bb-night-2);
  background-image: var(--bb-j-grain), radial-gradient(520px 280px at 15% 250px, rgba(255, 175, 95, 0.26), rgba(255, 175, 95, 0) 70%), linear-gradient(180deg, #E3C596 0, #C29A7A 40px, #7E6670 90px, #45435A 135px, var(--bb-dusk) 170px, var(--bb-night-2) 100%);
}

/* Streaks of cloud across the sunset, darker than the sky they cross. */
.bb-journal .bb-j-band.bb-j-band--dusk::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
  height: 120px;
  background: #4A3F4E;
  opacity: 0.4;
  pointer-events: none;
  -webkit-mask: var(--bb-j-clouds) 0 0 / 100% 100% no-repeat;
  mask: var(--bb-j-clouds) 0 0 / 100% 100% no-repeat;
}

/* The clouds' tops catch the last of the sun: the same streaks, a few
   pixels higher and rose, leaving dark undersides below them. */
.bb-journal .bb-j-band.bb-j-band--dusk::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 0;
  left: 0;
  height: 120px;
  background: #D49A8C;
  opacity: 0.4;
  pointer-events: none;
  -webkit-mask: var(--bb-j-clouds) 0 0 / 100% 100% no-repeat;
  mask: var(--bb-j-clouds) 0 0 / 100% 100% no-repeat;
}

.bb-journal .bb-j-band--dusk .bb-j-band__inner { position: relative; }

.bb-journal .bb-j-band--dusk .bb-j-kicker::after { opacity: 0.4; }

/* Reading progress: a red hairline under the header while the body is read,
   on wide screens (narrow ones have the brick strip). */
.bb-journal .bb-j-progress {
  position: fixed;
  top: var(--bb-j-header);
  right: 0;
  left: 0;
  z-index: 900;
  height: 2px;
  background: var(--bb-signal);
  transform: scaleX(var(--bb-j-read, 0));
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bb-dur-2);
}

.bb-journal .is-reading > .bb-j-progress { opacity: 1; }

@media (max-width: 1099px) {
  .bb-journal .bb-j-progress { display: none; }
}

/* The revision date stamped on the plate like a postmark. */
.bb-journal .bb-j-stamp--postmark {
  position: absolute;
  top: calc(var(--bb-j-crumbs-h) + 56px);
  right: calc(var(--bb-margin) + 6%);
  z-index: 3;
  margin: 0;
  padding: 7px 12px;
  font-size: 0.7rem;
  color: var(--bb-j-ink-2);
  background: var(--bb-j-paper);
  transform: rotate(-3deg);
}

@media (max-width: 1099px) {
  .bb-journal .bb-j-stamp--postmark { top: 14px; right: auto; left: 14px; padding: 4px 8px; font-size: 0.62rem; }
}

/* A shelf of up to three sets stands at its natural width. */
.bb-journal .bb-j-band--shelf .bb-j-shelf { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Each set stands on a drawn shelf line under its shadow. */
.bb-journal .bb-j-band--shelf .bb-j-set__plate { border-bottom: 1px solid rgba(30, 28, 25, 0.4); }
.bb-journal .bb-j-band--shelf .bb-j-set__link:hover .bb-j-set__plate { border-bottom-color: rgba(30, 28, 25, 0.4); }
.bb-journal .bb-j-band--shelf .bb-j-set__num { color: var(--bb-j-ink-2); }

/* Motion. The scene surfaces from haze, the opening type rises once, and
   each section's rule draws as it arrives. None of it plays for visitors who
   ask for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .bb-journal .bb-journal__spread-text > * { animation: bb-j-rise 900ms var(--bb-ease-out) both; }
  .bb-journal .bb-journal__spread-text > :nth-child(2) { animation-delay: 70ms; }
  .bb-journal .bb-journal__spread-text > :nth-child(3) { animation-delay: 140ms; }
  .bb-journal .bb-journal__spread-text > :nth-child(4) { animation-delay: 210ms; }
  .bb-journal .bb-journal__spread-text > :nth-child(n+5) { animation-delay: 280ms; }

  .bb-journal .is-live .bb-prose h2::before,
  .bb-journal .is-live .bb-prose--counted h2::after { background-size: 0 1px; transition: background-size 900ms var(--bb-ease-out); }
  .bb-journal .is-live .bb-prose h2.is-drawn::before,
  .bb-journal .is-live .bb-prose--counted h2.is-drawn::after { background-size: 40px 1px; }
}

@keyframes bb-j-surface {
  from { opacity: 0.4; filter: blur(12px) saturate(0.4) contrast(0.85); transform: scale(1.05); }
  to { opacity: 1; filter: sepia(0.3) saturate(0.8) contrast(0.98) brightness(1.03); transform: none; }
}

@keyframes bb-j-rise {
  from { opacity: 0.01; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* As the reader leaves the scene it dissolves into mist and falls behind,
   moving slower than the page, like a camera pulling away to the next
   chapter. Browsers without scroll timelines keep it still. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bb-journal .bb-j-scene__plate {
      animation: bb-j-dissolve linear both;
      animation-timeline: view();
      animation-range: exit 5% exit 95%;
    }
  }
}

@keyframes bb-j-dissolve {
  to { opacity: 0.12; filter: blur(5px); translate: 0 16%; }
}

/* The plate is printed into the paper: the scene carries the paper itself,
   so the photo multiplies into it inside its own group. */
.bb-journal .bb-j-scene { background-color: var(--bb-j-paper); background-image: var(--bb-j-grain); }
.bb-journal .bb-j-scene__plate img { mix-blend-mode: multiply; }

/* The opening's parts callout: one part, boxed and counted the way a
   manual lists what a step needs, level with the kicker. Below 1200px it
   would cover the revision stamp, and a phone's plate is too small to
   share, so it shows only on wide screens. */
.bb-journal .bb-j-parts {
  position: absolute;
  top: -8px;
  left: calc(100% + 36px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 92px;
  padding: 10px 8px 8px;
  background: var(--bb-j-paper);
  border: 1px solid rgba(30, 28, 25, 0.6);
  border-radius: 6px;
  pointer-events: none;
}

.bb-journal .bb-j-parts__part { width: 62px; height: auto; filter: drop-shadow(0 6px 5px rgba(40, 28, 16, 0.22)); }
.bb-journal .bb-j-parts__qty { align-self: flex-start; padding-left: 4px; font-family: var(--bb-font-mono); font-size: 0.8125rem; font-weight: 500; line-height: 1; color: var(--bb-j-ink); }

@media (max-width: 1199px) {
  .bb-journal .bb-j-parts { display: none; }
}

/* A drop cap opens the article, in the rubric's red, when its first
   character is a letter (ArticleContents#drop_cap?). */
.bb-journal .bb-prose--drop-cap p.lead:first-of-type::first-letter,
.bb-journal .bb-prose--drop-cap .article-intro > p:first-child::first-letter {
  float: left;
  margin: 0.06em 0.1em 0 -0.03em;
  font-family: var(--bb-font-serif);
  font-size: 3.55em;
  font-weight: 500;
  font-style: normal;
  line-height: 0.8;
  color: var(--bb-j-rubric);
}

@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .bb-journal .bb-prose--drop-cap p.lead:first-of-type::first-letter,
  .bb-journal .bb-prose--drop-cap .article-intro > p:first-child::first-letter {
    float: none;
    margin: 0 0.12em 0 0;
    font-size: inherit;
    line-height: inherit;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}

/* Each section is numbered the way a manual numbers its steps: a small
   counter and a rule above the heading. Autopilot guides number their picks
   in the heading text, so their rule carries no number. */
.bb-journal .bb-prose { counter-reset: bb-section; }

.bb-journal .bb-prose h2 { counter-increment: bb-section; }

.bb-journal .bb-prose h2::before {
  content: counter(bb-section, decimal-leading-zero);
  width: auto;
  height: auto;
  padding-right: 52px;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--bb-j-rubric);
  background: linear-gradient(currentColor, currentColor) right center / 40px 1px no-repeat;
}

.bb-journal .bb-prose :is(.autopilot-article, .apartner-section) h2 { counter-increment: none; }
.bb-journal .bb-prose :is(.autopilot-article, .apartner-section) h2::before { content: ""; height: 1px; padding-right: 40px; }

/* Where the page knows how many sections there are, the counter reads
   "04 / 10", as the video counts its chapters; the total and the rule move
   to the heading's ::after. The counters are set as decoration (the "/ ''"
   alternative text) so a screen reader reads the heading alone; browsers
   without that syntax keep the first declaration. */
.bb-journal .bb-prose--counted { counter-reset: bb-section bb-total var(--bb-sections); }
.bb-journal .bb-prose--counted h2::before { content: counter(bb-section, decimal-leading-zero); content: counter(bb-section, decimal-leading-zero) / ""; padding-right: 0; background: none; }

.bb-journal .bb-prose--counted h2::after {
  content: "/ " counter(bb-total, decimal-leading-zero);
  content: "/ " counter(bb-total, decimal-leading-zero) / "";
  position: absolute;
  top: 0;
  left: calc(2ch + 0.28em + 0.6em);
  padding-right: 52px;
  font-family: var(--bb-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--bb-j-muted);
  background: linear-gradient(var(--bb-j-rubric), var(--bb-j-rubric)) right center / 40px 1px no-repeat;
}

.bb-journal .bb-prose--counted :is(.autopilot-article, .apartner-section) h2::after { content: none; }

/* The Journal's front opens on a cover: the cover story's plate is the
   masthead's scene, captioned like a magazine cover line. */
.bb-journal .bb-j-scene.bb-j-cover {
  min-height: clamp(560px, calc(100svh - var(--bb-j-header) - 60px), 780px);
  margin-top: 0;
  padding: clamp(48px, 6vw, 96px) var(--bb-margin);
  border-bottom: 0;
}

.bb-journal .bb-j-cover .bb-j-masthead__inner { max-width: none; margin: 0; }
.bb-journal .bb-j-cover .bb-j-masthead__title { font-size: clamp(3rem, 2rem + 3.2vw, 5.25rem); }

/* The cover line sits on the paper below the masthead, not on the photo:
   a header's own artwork can carry the same headline. */
.bb-journal .bb-j-cover .bb-j-cover__caption {
  position: absolute;
  z-index: 1;
  margin: 0;
  bottom: clamp(40px, 6vh, 64px);
  left: calc(var(--bb-margin) + 31px);
  max-width: 30rem;
  padding: 0;
  font-family: var(--bb-font-text);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bb-j-ink);
  background: none;
}

.bb-journal .bb-j-cover__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-family: var(--bb-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-j-rubric);
}

.bb-journal .bb-j-cover__label::before { content: ""; width: 28px; height: 1px; background: currentColor; }

.bb-journal .bb-j-cover__title { display: block; font-family: var(--bb-font-serif); font-size: 1.5rem; font-weight: 500; line-height: 1.15; color: var(--bb-j-ink); text-decoration: none; }
.bb-journal .bb-j-cover__title:hover { color: var(--bb-j-ink); text-decoration: underline; text-decoration-color: var(--bb-j-rubric); text-underline-offset: 5px; }

@media (max-width: 1099px) {
  .bb-journal .bb-j-scene.bb-j-cover { padding: 0 0 40px; }
  .bb-journal .bb-j-scene.bb-j-cover .bb-j-masthead__inner { margin: 0 var(--bb-margin); }
  .bb-journal .bb-j-cover .bb-j-cover__caption { position: static; display: block; max-width: none; margin: 28px var(--bb-margin) 0; padding: 18px 0 0; background: none; border-top: 1px solid var(--bb-j-rule); }
}

/* A wide header is not cropped top and bottom, so it bleeds up to the
   header as the video's plates bleed off the frame. */
@media (min-width: 1100px) {
  .bb-journal .bb-j-scene__plate[data-plate-shape="wide"] :is(img, .bb-j-scene__mist) {
    -webkit-mask: var(--bb-j-wash-wide) 0 0 / 100% 100% no-repeat;
    mask: var(--bb-j-wash-wide) 0 0 / 100% 100% no-repeat;
  }
}

/* Mist drifts slowly over the plate's paper edge in two layers, the nearer
   one faster, the farther one fainter and drifting the other way. */
.bb-journal .bb-j-scene__mist::before {
  content: "";
  position: absolute;
  inset: -12% -14% -12% -10%;
  background: rgb(var(--bb-j-lift));
  opacity: 0.32;
  -webkit-mask: var(--bb-j-drift) 340px 120px / 1300px 860px repeat, linear-gradient(90deg, #000 0, #000 30%, transparent 62%);
  -webkit-mask-composite: source-in;
  mask: var(--bb-j-drift) 340px 120px / 1300px 860px repeat, linear-gradient(90deg, #000 0, #000 30%, transparent 62%);
  mask-composite: intersect;
}

.bb-journal .bb-j-scene__mist::after {
  content: "";
  position: absolute;
  inset: -12% -8% -12% -14%;
  background: rgb(var(--bb-j-lift));
  opacity: 0.6;
  -webkit-mask: var(--bb-j-drift) 0 0 / 900px 600px repeat, linear-gradient(90deg, #000 0, #000 22%, transparent 48%);
  -webkit-mask-composite: source-in;
  mask: var(--bb-j-drift) 0 0 / 900px 600px repeat, linear-gradient(90deg, #000 0, #000 22%, transparent 48%);
  mask-composite: intersect;
}

@media (prefers-reduced-motion: no-preference) {
  .bb-journal .bb-j-scene__mist::after { animation: bb-j-drift 46s ease-in-out infinite alternate; }
  .bb-journal .bb-j-scene__mist::before { animation: bb-j-drift-back 70s ease-in-out infinite alternate; }
}

@keyframes bb-j-drift {
  to { transform: translate3d(120px, -14px, 0); }
}

@keyframes bb-j-drift-back {
  from { transform: translate3d(90px, 8px, 0); }
  to { transform: translate3d(-40px, -6px, 0); }
}

/* Sections, figures and product cards surface as they come into view, the
   way the video's chapters fade in, rising 12px. Browsers without scroll
   timelines show them still. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bb-journal .bb-prose :is(h2, figure, .article-product-card) {
      animation: bb-j-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

@keyframes bb-j-reveal {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: none; }
}

@media (max-width: 1099px) {
  .bb-journal .bb-j-scene__mist { background: linear-gradient(0deg, rgba(var(--bb-j-lift), 0.9) 0, rgba(var(--bb-j-lift), 0.4) 14%, rgba(var(--bb-j-lift), 0) 30%); }
  .bb-journal .bb-j-scene__mist::after,
  .bb-journal .bb-j-scene__mist::before { content: none; }
}

/* A wide header bleeds to the site header, so it takes no top lift. */
@media (min-width: 1100px) {
  .bb-journal .bb-j-scene__plate[data-plate-shape="wide"] .bb-j-scene__mist {
    background:
      linear-gradient(90deg, rgba(var(--bb-j-lift), 0.95) 0, rgba(var(--bb-j-lift), 0.8) 15%, rgba(var(--bb-j-lift), 0.45) 28%, rgba(var(--bb-j-lift), 0) 40%),
      linear-gradient(0deg, rgba(var(--bb-j-lift), 0.9) 0, rgba(var(--bb-j-lift), 0.4) 12%, rgba(var(--bb-j-lift), 0) 26%),
      linear-gradient(180deg, rgba(var(--bb-j-lift), 0.4) 0, rgba(var(--bb-j-lift), 0) 16%),
      radial-gradient(ellipse 80% 90% at 56% 52%, rgba(62, 44, 26, 0) 60%, rgba(62, 44, 26, 0.3) 100%),
      radial-gradient(ellipse 50% 42% at 78% 18%, rgba(255, 222, 170, 0.42), rgba(255, 222, 170, 0) 70%);
  }
}

/* Store buttons in the Journal are the system's button without its red
   plate, which shows only on hover: on a page of type the plate under every
   button read as a template. */
.bb-journal :is(.bb-j-set__buy, .bb-prose .btn, .bb-prose .btn-primary, .bb-prose .cta-button, .bb-prose .btn-cta, .bb-prose .article-product-card__amazon-btn, .bb-prose .article-product-carousel__amazon-btn, .bb-prose .apartner-card a.apartner-cta) { --bb-plate: 0px; box-shadow: none; }
.bb-journal :is(.bb-j-set__buy, .bb-prose .btn, .bb-prose .btn-primary, .bb-prose .cta-button, .bb-prose .btn-cta, .bb-prose .article-product-card__amazon-btn, .bb-prose .article-product-carousel__amazon-btn, .bb-prose .apartner-card a.apartner-cta):hover { box-shadow: 0 3px 0 0 var(--bb-signal); }

/* The front's story and card photos are printed into the page rather than
   pasted on it: their edges feather into the paper. */
.bb-journal :is(.bb-j-story__plate, .bb-j-card__plate) { background: transparent; }
.bb-journal :is(.bb-j-story__plate, .bb-j-card__plate) img {
  -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent), linear-gradient(transparent, #000 14px, #000 calc(100% - 14px), transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent), linear-gradient(transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-composite: intersect;
}

/* A wide header runs under the text, as the video's paintings run under
   its text column: the photo fills the scene, and the wash over it becomes
   a translucent veil the photo shows faintly through. Muted text inside
   takes darker shades so it keeps 4.5:1 over the veil. */
@media (min-width: 1100px) {
  .bb-journal .bb-j-scene:has(.bb-j-scene__plate[data-plate-shape="wide"]) {
    --bb-j-muted: #57514A;
    --bb-j-place: #3F5A5B;
    --bb-j-rubric: #93392A;
  }

  .bb-journal .bb-j-scene__plate[data-plate-shape="wide"] { inset: 0; }

  .bb-journal .bb-j-scene__plate[data-plate-shape="wide"] img,
  .bb-journal .bb-j-scene__plate[data-plate-shape="wide"] .bb-j-scene__mist {
    -webkit-mask: var(--bb-j-wash-bleed) 0 0 / 100% 100% no-repeat;
    mask: var(--bb-j-wash-bleed) 0 0 / 100% 100% no-repeat;
  }

  .bb-journal .bb-j-scene__plate[data-plate-shape="wide"] img { object-position: 70% 50%; }

  .bb-journal .bb-j-scene__plate[data-plate-shape="wide"] .bb-j-scene__mist {
    background:
      linear-gradient(0deg, rgba(var(--bb-j-lift), 0.9) 0, rgba(var(--bb-j-lift), 0.4) 12%, rgba(var(--bb-j-lift), 0) 26%),
      linear-gradient(180deg, rgba(var(--bb-j-lift), 0.4) 0, rgba(var(--bb-j-lift), 0) 16%),
      radial-gradient(ellipse 80% 90% at 56% 52%, rgba(62, 44, 26, 0) 60%, rgba(62, 44, 26, 0.3) 100%),
      radial-gradient(ellipse 50% 42% at 78% 18%, rgba(255, 222, 170, 0.42), rgba(255, 222, 170, 0) 70%);
  }

  .bb-journal .bb-j-scene:has(.bb-j-scene__plate[data-plate-shape="wide"]) .bb-journal__spread-text::before {
    background: var(--bb-j-grain), linear-gradient(90deg, rgba(246, 241, 231, 0.9) calc(100% - 40px), rgba(246, 241, 231, 0) calc(100% - 20px));
    -webkit-backdrop-filter: blur(3px) grayscale(0.6);
    backdrop-filter: blur(3px) grayscale(0.6);
  }
}

/* The camera breathes: the opening photo drifts slowly closer and back,
   anchored at its paper edge so the fade stays put. */
@media (prefers-reduced-motion: no-preference) {
  .bb-journal .bb-j-scene__plate img {
    transform-origin: 12% 50%;
    animation: bb-j-surface 1600ms var(--bb-ease-out) both, bb-j-breathe 38s ease-in-out 1600ms infinite alternate;
  }
}

@keyframes bb-j-breathe {
  from { scale: 1; }
  to { scale: 1.05; }
}

/* Every Journal page ends at nightfall, as an article's further reading
   does: the paper falls through sunset into the night of the footer. */
.bb-journal:has(> .bb-j-nightfall) { padding-bottom: 0; }
.bb-journal .bb-j-band:has(.bb-j-pager) { padding-bottom: 24px; }

.bb-journal .bb-j-nightfall {
  position: relative;
  height: clamp(220px, 22vw, 320px);
  margin-top: clamp(16px, 2vw, 32px);
  background-image: var(--bb-j-grain), linear-gradient(180deg, rgba(246, 241, 231, 0) 0, #E9D3A8 30%, #C29A7A 50%, #7E6670 66%, #45435A 80%, var(--bb-night-2) 97%);
  background-color: transparent;
  border-bottom: 0;
}

.bb-journal .bb-j-nightfall::before,
.bb-journal .bb-j-nightfall::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 42%;
  pointer-events: none;
  -webkit-mask: var(--bb-j-clouds) 0 0 / 100% 100% no-repeat;
  mask: var(--bb-j-clouds) 0 0 / 100% 100% no-repeat;
}

.bb-journal .bb-j-nightfall::before { top: 40%; background: #4A3F4E; opacity: 0.4; }
.bb-journal .bb-j-nightfall::after { top: calc(40% - 6px); background: #D49A8C; opacity: 0.4; }

/* The opening's fact line sets each fact after a small red dot, as the
   video sets its chapter facts; the dots take the place of part of the gap,
   so the line keeps its length. */
.bb-journal .bb-j-meta { column-gap: 12px; letter-spacing: 0.04em; }
.bb-journal .bb-j-meta > *::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 5px 2px 0;
  border-radius: 50%;
  background: var(--bb-j-rubric);
  vertical-align: middle;
}

/* Editorial photos in an article print into the page like the front's:
   their edges feather and they share its grade. */
.bb-journal .bb-prose img.article-image {
  filter: sepia(0.12) saturate(0.9) contrast(0.97);
  -webkit-mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent), linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent), linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-composite: intersect;
}
/*
 * The Journal: articles, guides, news and the editor's pages
 * (docs/design/journal.md). Linked only by those pages, through
 * DesignWorldHelper#design_world, and scoped under .bb-journal.






 */