/* ==========================================================================
   The public blog.

   Layout concept: one centred editorial column with an optional right rail.
   Hairline rules and generous space carry the hierarchy; the company's one
   brand colour does the rest, so any hex still looks composed.

   Colour and font tokens are written per company by app/core/theme.py. The
   sizes, spacing and shadows below are the same for everyone, which is what
   keeps a hundred different blogs looking deliberate.
   ========================================================================== */

:root {
  --radius: 14px;
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-lg: calc(var(--radius) * 1.7);
  --radius-pill: 999px;
  --shadow-lift: 0 22px 44px -24px rgb(var(--rgb-text) / 0.3);

  --max-width: 1160px;
  --measure: 68ch;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 68px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --dur: 0.2s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--text-base, 17px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: rgb(var(--rgb-primary) / 0.18); }

.csb-container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.csb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.csb-skip {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 200;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  transform: translateY(-250%);
  transition: transform var(--dur) var(--ease);
}
.csb-skip:focus { transform: translateY(0); }

/* ----------------------------------------------------------- shared bits -- */

.csb-eyebrow {
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.csb-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-tint);
  color: var(--color-accent-ink);
  font-size: 0.6563rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.csb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.csb-btn:hover { background: var(--color-primary-hover); }
.csb-btn:active { transform: translateY(1px); }
.csb-btn svg { width: 16px; height: 16px; }

.csb-btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.csb-btn--ghost:hover { background: var(--color-surface); }

.csb-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: 0.9375rem;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.csb-meta .csb-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.csb-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-primary-tint);
  color: var(--color-primary-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.csb-avatar--lg { width: 56px; height: 56px; font-size: 0.9375rem; }

.csb-author-line { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.csb-author-line strong { color: var(--color-text); font-weight: 600; font-size: 0.9375rem; }

/* Cover art. A post with no image of its own is given a generated one built
   from the company's brand colour, served from /cover/<slug>.svg, so every
   card in a row has the same shape and the titles start in the same place. */
.csb-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface-2);
  isolation: isolate;
}
.csb-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.csb-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--rgb-text) / 0.07);
}
.csb-cover-link { display: block; }
.csb-cover-link:hover img { transform: scale(1.045); }

/* --------------------------------------------------------------- header -- */

.csb-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(var(--rgb-bg) / 0.86);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.csb-site-header.csb-is-scrolled {
  border-bottom-color: var(--color-border);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
}
.csb-header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
}
.csb-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
.csb-brand-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.csb-brand-tag {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 2px;
}
.csb-brand img.csb-logo { height: 32px; width: auto; }

/* A dark logo disappears on a dark page, so a company may supply both and
   the right one is shown. With only one, it is always shown. */
.csb-logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .csb-logo--light:not(:only-of-type) { display: none; }
  :root:not([data-theme="light"]) .csb-logo--dark { display: block; }
}
:root[data-theme="dark"] .csb-logo--light:not(:only-of-type) { display: none; }
:root[data-theme="dark"] .csb-logo--dark { display: block; }

.csb-icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.csb-icon-btn:hover { background: var(--color-surface); color: var(--color-text); }
.csb-icon-btn svg { width: 18px; height: 18px; }

/* Reading progress, on article pages only. */
.csb-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  height: 3px;
  pointer-events: none;
}
.csb-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 0.1s linear;
}

/* ----------------------------------------------------------------- hero -- */

.csb-hero, .csb-article-head-wrap {
  background: linear-gradient(180deg, rgb(var(--rgb-primary) / 0.12) 0%,
                                      rgb(var(--rgb-primary) / 0.04) 45%,
                                      transparent 100%);
}
.csb-hero { padding-block: clamp(var(--s-6), 5vw, var(--s-8)) var(--s-7); }
.csb-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  align-items: center;
}
.csb-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  min-width: 0;
}
.csb-hero-title {
  font-size: clamp(2.05rem, 1.1rem + 3.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.026em;
}
.csb-hero-excerpt { font-size: 1.0625rem; color: var(--color-muted); max-width: 46ch; }
/* The button and the category filters share a line. The filters take the
   leftover width and scroll inside it, so a blog with a dozen categories
   pushes nothing off the page. On a narrow screen they wrap underneath. */
.csb-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-2);
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.csb-hero-actions .csb-btn { flex: 0 0 auto; }
.csb-hero-actions .csb-filters { flex: 1 1 14rem; min-width: 0; }
.csb-hero .csb-cover { border-radius: var(--radius-lg); }
@media (min-width: 900px) {
  .csb-hero-grid { grid-template-columns: 1fr 1.05fr; }
  .csb-hero-copy { padding-right: var(--s-5); }
  .csb-hero-grid--solo { grid-template-columns: 1fr; }
  .csb-hero-grid--solo .csb-hero-copy { padding-right: 0; }
  .csb-hero-grid--solo .csb-hero-title { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 3.9rem); max-width: 18ch; }
  .csb-hero-grid--solo .csb-hero-excerpt { max-width: 60ch; font-size: 1.125rem; }
}


/* A company's own stylesheet loads after this one, and ordinary class names
   collide: .csb-hero, .csb-container and .csb-card are used by half the web. CellSmash's
   site paints a decorative layer with .csb-hero:before, which landed on top of
   our hero and swallowed every click inside it.

   Anything a reader clicks is lifted above such a layer. This changes nothing
   visually; it only decides what receives the click. */
.csb-hero > .csb-container,
.csb-hero-grid,
.csb-hero-copy,
.csb-article-head-wrap > .csb-container,
.csb-filters-row,
.csb-layout,
.csb-card,
.csb-cover-link,
.csb-related,
.csb-pager,
.csb-site-header .csb-container,
.csb-site-footer .csb-container {
  position: relative;
  z-index: 1;
}
/* -------------------------------------------------------------- filters -- */

.csb-filters-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.csb-filters {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
  margin: -2px;
}
.csb-filters::-webkit-scrollbar { display: none; }
.csb-pill {
  flex: 0 0 auto;
  padding: 7px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 550;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.csb-pill:hover { color: var(--color-text); border-color: rgb(var(--rgb-text) / 0.3); }
.csb-pill[aria-current="page"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.csb-pill .csb-count { opacity: 0.6; margin-left: 6px; font-variant-numeric: tabular-nums; }
.csb-result-count { flex: 0 0 auto; font-size: 0.75rem; color: var(--color-muted); }
@media (max-width: 720px) { .csb-result-count { display: none; } }

/* ------------------------------------------------------- layout and feed -- */

.csb-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  padding-block: var(--s-7) var(--s-8);
  align-items: start;
}
@media (min-width: 1000px) {
  .csb-layout.csb-has-sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
}
.csb-feed-col { min-width: 0; }
.csb-feed { display: grid; gap: clamp(var(--s-5), 3vw, var(--s-6)); }

.csb-feed--grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .csb-feed--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .csb-feed--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- cards -- */

.csb-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  transition: transform 0.25s var(--ease);
}
.csb-card .csb-cover { margin-bottom: var(--s-1); }
.csb-card:hover { transform: translateY(-3px); }
.csb-card:hover .csb-cover { box-shadow: var(--shadow-lift); }
.csb-card:hover .csb-cover img { transform: scale(1.045); }
.csb-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  flex: 1 1 auto;
}
.csb-card-title {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.csb-card:hover .csb-card-title { color: var(--color-primary-ink); }
.csb-card-excerpt {
  font-size: 0.875rem;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.csb-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
}
.csb-feed--grid .csb-card--text,
.csb-magazine-rest .csb-card--text,
.csb-related-grid .csb-card--text {
  padding: var(--s-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.csb-feed--grid .csb-card--text:hover,
.csb-magazine-rest .csb-card--text:hover,
.csb-related-grid .csb-card--text:hover { border-color: rgb(var(--rgb-primary) / 0.45); }

.csb-card-foot { flex-wrap: wrap; row-gap: var(--s-2); }
.csb-card-foot .csb-meta { font-size: 0.875rem; flex-wrap: nowrap; white-space: nowrap; }
.csb-card-foot .csb-author-line strong { white-space: nowrap; }

/* List: a chronological reading list, cover beside the text. */
.csb-feed--list { grid-template-columns: 1fr; gap: 0; }
.csb-feed--list .csb-card {
  flex-direction: row;
  gap: var(--s-5);
  align-items: flex-start;
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--color-border);
}
.csb-feed--list .csb-card:first-child { padding-top: 0; }
.csb-feed--list .csb-card:hover { transform: none; }
.csb-feed--list .csb-cover-link { flex: 0 0 clamp(140px, 28vw, 260px); }
.csb-feed--list .csb-card-title {
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.5rem);
  -webkit-line-clamp: 3;
}
@media (max-width: 560px) {
  .csb-feed--list .csb-card { flex-direction: column; gap: var(--s-4); }
  .csb-feed--list .csb-cover-link { flex: 0 0 auto; width: 100%; }
}

/* Magazine: one lead story, two stacked beside it, then the regular grid. */
.csb-feed--magazine { grid-template-columns: 1fr; }
.csb-magazine-block { display: grid; grid-template-columns: 1fr; gap: clamp(var(--s-5), 3vw, var(--s-6)); }
@media (min-width: 860px) {
  .csb-magazine-block { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .csb-magazine-stack { display: grid; gap: var(--s-6); }
  .csb-magazine-lead .csb-card-title {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
    -webkit-line-clamp: 3;
  }
  .csb-magazine-lead .csb-card-excerpt { font-size: 0.9375rem; -webkit-line-clamp: 4; }
  .csb-magazine-stack .csb-card { flex-direction: row; gap: var(--s-4); }
  .csb-magazine-stack .csb-cover-link { flex: 0 0 116px; }
  .csb-magazine-stack .csb-cover { margin-bottom: 0; }
  .csb-magazine-stack .csb-card-excerpt { display: none; }
  .csb-magazine-stack .csb-card-foot { padding-top: var(--s-1); }
}
.csb-magazine-rest {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--s-5), 3vw, var(--s-6));
  padding-top: clamp(var(--s-6), 4vw, var(--s-7));
  border-top: 1px solid var(--color-border);
}
@media (min-width: 640px) { .csb-magazine-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .csb-magazine-rest { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.csb-empty {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-9) var(--s-4);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.csb-empty h2 { font-size: 1.25rem; }
.csb-empty p { color: var(--color-muted); font-size: 0.9375rem; max-width: 40ch; }

.csb-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-8);
}
.csb-pager .csb-page-of { font-size: 0.75rem; color: var(--color-muted); }

/* -------------------------------------------------------------- sidebar -- */

.csb-sidebar { display: grid; gap: var(--s-5); min-width: 0; }
@media (min-width: 1000px) {
  .csb-sidebar { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.csb-panel {
  padding: var(--s-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.csb-panel h2 {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--s-4);
}
.csb-panel p { font-size: 0.875rem; color: var(--color-muted); }
.csb-panel--about strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: var(--s-2);
}

.csb-recent { display: grid; gap: var(--s-4); list-style: none; }
.csb-recent li { display: flex; gap: var(--s-3); align-items: baseline; }
.csb-recent .csb-num {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(var(--rgb-text) / 0.28);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.csb-recent a {
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.csb-recent a:hover { color: var(--color-primary-ink); }
.csb-recent .csb-meta { font-size: 0.6875rem; margin-top: 2px; }

/* Topics, across the content width under the featured article. The chips are
   the same .csb-tag used on an article page; only the row around them is new,
   so nothing here introduces a colour, weight or shape the sheet did not
   already have. */
.csb-topics-bar {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--color-border);
}
.csb-topics-bar h2 {
  margin: 0 0 var(--s-3);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
/* A tag can be named anything. Without this a single long one would push the
   page wider on a phone rather than wrapping inside its own chip. */
.csb-topics-bar .csb-tag {
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* Which one is being filtered by, in the brand colour already in use for
   the current item elsewhere. */
.csb-tag--on {
  border-color: var(--color-primary);
  color: var(--color-primary-on-bg);
}
/* The two chips that are actions rather than topics. No new colour: the
   border simply steps back so they do not read as another subject. */
.csb-tag--clear,
.csb-tag--more {
  border-style: dashed;
}

.csb-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }
.csb-tag {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-size: 0.75rem;
  color: var(--color-muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.csb-tag:hover {
  color: var(--color-primary-ink);
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
}

/* --------------------------------------------------------------- footer -- */

.csb-site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--s-8) var(--s-6);
}
.csb-footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
@media (min-width: 720px) { .csb-footer-grid { grid-template-columns: 1.8fr 1fr 1fr; } }
.csb-footer-brand p {
  margin-top: var(--s-4);
  font-size: 0.875rem;
  color: var(--color-muted);
  max-width: 38ch;
}
.csb-footer-col h2 {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--s-4);
}
.csb-footer-col ul { display: grid; gap: var(--s-3); list-style: none; }
.csb-footer-col a { font-size: 0.875rem; color: var(--color-muted); }
.csb-footer-col a:hover { color: var(--color-text); }
.csb-footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* ---------------------------------------------------------- article view -- */

.csb-article-head { padding-block: clamp(var(--s-6), 5vw, var(--s-8)) var(--s-6); }
.csb-back-btn {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--color-muted);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.csb-back-btn:hover { color: var(--color-text); gap: var(--s-3); }
.csb-back-btn svg { width: 14px; height: 14px; }
.csb-article-title {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin-block: var(--s-4) var(--s-5);
  max-width: 30ch;
}
.csb-article-standfirst {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 54ch;
}
.csb-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--color-border);
}
.csb-article-cover { margin-bottom: clamp(var(--s-6), 4vw, var(--s-8)); }
/* The article's own cover is shown whole. A customer's banner usually has
   words designed into it, and a fixed ratio with object-fit: cover crops the
   heading off. Cards keep their uniform 16:9, because a grid of mismatched
   shapes looks broken; one banner at the top of one article does not. */
.csb-article-cover .csb-cover {
  border-radius: var(--radius-lg);
  aspect-ratio: auto;
}
.csb-article-cover .csb-cover img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.csb-article-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  padding-bottom: var(--s-9);
}
@media (min-width: 1040px) {
  .csb-article-body.csb-has-contents { grid-template-columns: 220px minmax(0, 1fr); }
}

.csb-toc { min-width: 0; }
.csb-toc-inner { border-left: 1px solid var(--color-border); padding-left: var(--s-4); }
.csb-toc h2 {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--s-3);
}
.csb-toc ol { display: grid; gap: var(--s-2); list-style: none; }
.csb-toc a { font-size: 0.8125rem; line-height: 1.45; color: var(--color-muted); }
.csb-toc a:hover { color: var(--color-text); }
.csb-toc a.csb-is-active { color: var(--color-primary-ink); font-weight: 600; }
.csb-toc li.csb-lvl-3 { padding-left: var(--s-4); }
.csb-toc summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: var(--s-3) 0;
  list-style: none;
}
.csb-toc summary::-webkit-details-marker { display: none; }
@media (min-width: 1040px) {
  .csb-toc-sticky { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .csb-toc summary { display: none; }
}

/* Long-form typography. One measure, one rhythm. */
.csb-prose { min-width: 0; max-width: var(--measure); font-size: 1.0625rem; }
.csb-prose > * + * { margin-top: var(--s-5); }
.csb-prose h2 {
  color: var(--color-primary-on-bg);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  margin-top: var(--s-8);
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}
.csb-prose h3 {
  color: var(--color-primary-on-bg);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  margin-top: var(--s-7);
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}
.csb-prose p { line-height: 1.75; }
.csb-prose a { color: var(--color-primary-on-bg); text-decoration: underline; text-underline-offset: 3px; }
.csb-prose strong { font-weight: 650; }
.csb-prose ul, .csb-prose ol { padding-left: 1.35em; display: grid; gap: var(--s-2); }
.csb-prose ul { list-style-type: disc; list-style-position: outside; }
.csb-prose ol { list-style-type: decimal; list-style-position: outside; }
.csb-prose li::marker { color: var(--color-muted); }
.csb-prose img { border-radius: var(--radius); margin-block: var(--s-6); }
.csb-prose blockquote {
  margin: var(--s-7) 0;
  padding-left: var(--s-5);
  border-left: 3px solid var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.375rem);
  line-height: 1.45;
}
.csb-prose pre {
  margin: var(--s-6) 0;
  padding: var(--s-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.csb-prose code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}
.csb-prose p > code, .csb-prose li > code {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}
.csb-prose pre code { background: none; padding: 0; }
.csb-prose hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--s-8) 0; }

.csb-author-box {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  margin-top: var(--s-8);
  padding: var(--s-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.csb-author-box strong { display: block; font-family: var(--font-heading); font-size: 1.0625rem; }
.csb-author-box p { margin-top: var(--s-2); font-size: 0.875rem; color: var(--color-muted); }

.csb-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--color-border);
}
.csb-share > span {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.csb-share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--color-muted);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.csb-share-btn:hover { color: var(--color-text); border-color: rgb(var(--rgb-text) / 0.3); }
.csb-share-btn svg { width: 15px; height: 15px; }

.csb-related { padding-block: var(--s-8); border-top: 1px solid var(--color-border); }
.csb-related h2 { font-size: 1.375rem; margin-bottom: var(--s-6); color: var(--color-primary-on-bg); }
.csb-related-grid { display: grid; grid-template-columns: 1fr; gap: clamp(var(--s-5), 3vw, var(--s-6)); }
@media (min-width: 720px) { .csb-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- toast -- */

.csb-toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-6);
  transform: translateX(-50%);
  z-index: 180;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 0.8125rem;
  font-weight: 550;
  box-shadow: var(--shadow-lift);
}
.csb-toast[hidden] { display: none; }

/* ------------------------------------------------------------ notice ----- */

.csb-notice {
  display: grid;
  place-items: center;
  gap: var(--s-4);
  min-height: 60vh;
  text-align: center;
  padding: var(--s-8) var(--gutter);
}
.csb-notice h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.csb-notice p { color: var(--color-muted); max-width: 44ch; }

@media (max-width: 860px) { :root { --header-h: 60px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* Inherited properties are the one thing a class prefix cannot protect us
   from. A customer stylesheet that sets `a { color: #1d1d1f }` loads after
   ours and reaches straight into the sidebar, where our panel is dark and the
   text then disappears. Anything of ours sitting on one of our own
   backgrounds states its own colour, which also outranks a bare element
   selector whatever the load order. */
.csb-panel { color: var(--color-text); }
.csb-panel a,
.csb-recent a { color: var(--color-text); }
.csb-panel p,
.csb-panel .csb-meta,
.csb-recent .csb-meta { color: var(--color-muted); }
.csb-sidebar { color: var(--color-text); }


/* The subscribe band. A plain form, no script, so it survives an embedded
   page and a blocked script. */
.csb-subscribe {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--s-8) 0;
  color: var(--color-text);
}
.csb-subscribe-inner {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 760px) {
  .csb-subscribe-inner { grid-template-columns: 1fr auto; gap: var(--s-7); }
}
.csb-subscribe h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 var(--s-2);
  color: var(--color-text);
}
.csb-subscribe p { margin: 0; font-size: 0.875rem; color: var(--color-muted); }
/* The button stays on the field's line. It used to wrap underneath,
   because the field asked for 15rem and the form sits in the narrow column
   of the two column band, so there was never room for both. The field now
   shrinks instead of pushing the button down. */
.csb-subscribe-form { display: flex; flex-wrap: nowrap; gap: var(--s-3); }
.csb-subscribe-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.csb-subscribe-form input::placeholder { color: var(--color-muted); }
.csb-subscribe-form button {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 11px 22px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 650;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-primary-contrast, #fff);
  cursor: pointer;
}
.csb-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}