/* ═══════════════════════════════════════════════════════════════════════
   Blog post template (templates/blog-post.html)

   Loaded last (after hero.css) via the `extra_css` block, so these rules
   win over the Webflow base without needing !important.

   Layout is modelled on the Stripe blog post page, restyled in Croissant's
   modern design language — the same vocabulary as the .cst-* customer
   story styles in hero.css (1180px container, 5% padding, 680px article
   measure, sticky rail, 991px stacking breakpoint).

   Everything is scoped under .bp-page so nothing here can leak into the
   home-page carousel (.bx-*) or the /blog index.
   ═══════════════════════════════════════════════════════════════════════ */

.bp-page {
  /* Design tokens, scoped. The site has no global token layer for the
     modern palette — these hex values are the ones used throughout
     hero.css, collected here so a future theme pass has one place to
     edit. */
  --bp-accent: #16A88B;
  --bp-accent-hover: #0E8C72;
  --bp-heading: #1A2634;
  --bp-body: #475467;
  --bp-muted: #5B6670;
  --bp-border: #E6EAE9;
  --bp-bullet: #C9CFD4;
  --bp-tint: #E8F6F2;

  /* Non-colour constants reused across the layout. */
  --bp-measure: 680px;   /* article text measure, matches .cst-article */
  --bp-rail: 220px;      /* left rail width */
  --bp-gap: 56px;        /* rail → content column gap */
  --bp-frame: #EEF1F0;   /* faint vertical page-frame rules */

  background: #FDFDFD;
  font-family: var(--_font-family-2---font-family-2, Inter, sans-serif);
}

/* 1180px container with 5% side padding — same as .cst-inner. */
.bp-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 5%;
  box-sizing: border-box;
}

/* ── Skip link ────────────────────────────────────────────────────────
   Defined here because blog-post.html is the only template with a skip
   target. Off-screen until focused, then pinned top-left. */
.bp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: #fff;
  color: #16A88B;
  border: 1px solid #16A88B;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.bp-skip:focus {
  left: 16px;
  top: 16px;
}

/* The article is focused programmatically by the skip link (tabindex="-1"),
   so suppress the focus ring it would otherwise draw around the whole
   column — the scroll position is the affordance here. */
.bp-content:focus { outline: none; }

/* ── Page frame ───────────────────────────────────────────────────────
   Faint vertical rules at the container's inner edges. Pseudo-elements on
   an opt-in class so the whole effect is removed by deleting `bp-framed`
   from the wrapper in blog-post.html. */
.bp-framed .bp-inner::before,
.bp-framed .bp-inner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--bp-frame);
  pointer-events: none;
}
.bp-framed .bp-inner::before { left: 5%; }
.bp-framed .bp-inner::after { right: 5%; }

/* ── Breadcrumb ───────────────────────────────────────────────────────
   The dashed rule sits directly under the nav; the breadcrumb row is 24px
   below it. */
.bp-rule {
  border: 0;
  border-top: 1px dashed var(--bp-border);
  margin: 0;
}

.bp-bread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
}

.bp-bread-l {
  display: flex;
  align-items: center;
}

.bp-bread-l a {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bp-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
.bp-bread-l a:hover { color: var(--bp-accent-hover); }

.bp-bread-sep {
  color: var(--bp-bullet);
  margin: 0 10px;
  font-size: 17px;
  line-height: 1.4;
}

/* Current crumb: the category, as plain text. Same metrics as the link
   beside it so the row stays on one baseline, but muted and not
   interactive — there are no category pages to link to. */
.bp-bread-current {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bp-muted);
}

.bp-bread-r {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bp-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
.bp-bread-r:hover { color: var(--bp-accent-hover); }

/* Chevron nudges 2px right on hover. */
.bp-bread-chev { transition: transform 0.2s ease; }
.bp-bread-r:hover .bp-bread-chev { transform: translateX(2px); }

/* ── Article grid ─────────────────────────────────────────────────────
   Two explicit rows so the rail can start level with the hero image while
   the title/meta header sits above it in the content column only.

     row 1:  .              | .bp-header
     row 2:  .bp-rail       | .bp-content

   minmax(0, 1fr) on the content column stops long unbreakable strings
   (URLs, code) from forcing the grid wider than its container. */
.bp-grid {
  display: grid;
  grid-template-columns: var(--bp-rail) minmax(0, 1fr);
  column-gap: var(--bp-gap);
  align-items: start;
}

.bp-header {
  grid-column: 2;
  grid-row: 1;
  padding-top: 72px;
}

.bp-rail {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 110px;   /* same offset as .cst-rail */
  align-self: start;
}

.bp-content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;   /* paired with minmax(0,1fr): allows shrink-to-fit */
}

/* ── Title ────────────────────────────────────────────────────────── */
.bp-title {
  font-family: var(--font-family--font-primary);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bp-heading);
  text-wrap: balance;
  max-width: 760px;
  margin: 0;
}

/* ── Meta line ────────────────────────────────────────────────────────
   The 1px × 16px teal bar sits in the grid gutter, just outside the text
   column's left edge: -14px gap puts its right edge 14px from the text. */
.bp-meta {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bp-muted);
}

.bp-meta::before {
  content: "";
  position: absolute;
  left: -15px;          /* 1px bar + 14px gap */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: var(--bp-accent);
}

.bp-meta-dot { color: var(--bp-bullet); }

/* Category pill. .text-pill-style in the Webflow sheet is 18px with a
   30px radius — too heavy next to 14px meta text — so this is a new
   modern-language pill. */
.bp-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bp-accent);
  background: var(--bp-tint);
  border-radius: 999px;
  padding: 4px 10px;
  margin-left: 6px;
}

/* ── Author block (rail) ──────────────────────────────────────────── */
.bp-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The photo variant is wrapped in <picture>, which is itself a flex item
   and would otherwise stretch — so it gets the same `flex: none` and sizing
   as the image inside it. */
.bp-author > picture {
  flex: none;
  display: block;
  width: 44px;
  height: 44px;
}

.bp-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--bp-border);
  /* cover + square box: a non-square source is cropped, never squashed.
     The width/height attributes on the <img> reserve this space before
     the file loads, so nothing shifts. */
  object-fit: cover;
  box-sizing: border-box;
  display: block;
}

/* Fallback when author.avatar is None: initials on a tinted circle. */
.bp-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bp-tint);
  color: var(--bp-accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.bp-author-text { min-width: 0; }

.bp-author-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bp-heading);
  margin: 0;
}
.bp-author-name a {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.bp-author-name a:hover { color: var(--bp-accent); }

.bp-author-role {
  font-size: 14px;
  line-height: 1.4;
  color: var(--bp-muted);
  margin: 2px 0 0;
}

/* Newsletter line under the role. */
.bp-author-series {
  font-size: 12px;
  line-height: 1.4;
  color: var(--bp-muted);
  margin: 4px 0 0;
}
.bp-author-series em {
  font-style: normal;
  font-weight: 600;
  color: var(--bp-heading);
}

/* ── "Read on LinkedIn" (rail) ────────────────────────────────────── */
.bp-orig {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bp-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
.bp-orig:hover {
  color: var(--bp-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bp-orig:focus-visible,
.bp-orig-note a:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The ↗ glyph sits high in its em box; nudge it onto the text baseline. */
.bp-ext {
  font-size: 0.9em;
  line-height: 1;
  transform: translateY(1px);
}

/* "Originally published on LinkedIn" under the end-of-article block. */
.bp-orig-note {
  max-width: var(--bp-measure);
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bp-muted);
}
.bp-orig-note a {
  color: var(--bp-accent);
  font-size: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}
.bp-orig-note a:hover {
  color: var(--bp-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Follow Croissant ─────────────────────────────────────────────── */
.bp-follow { margin-top: 28px; }

.bp-follow-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-muted);
  margin: 0 0 10px;
}

/* Six buttons (5 channels + copy) at 32px with the original 8px gap need
   232px, which overflows the 220px rail and wrapped the copy button onto
   a line of its own. 5px gaps fit the row exactly: 6*32 + 5*5 = 217px.
   flex-wrap stays as a safety net for a future sixth channel. */
.bp-share {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.bp-share-btn {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bp-border);
  border-radius: 50%;
  background: #fff;
  color: var(--bp-muted);
  padding: 0;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.bp-share-btn:hover {
  border-color: var(--bp-accent);
  color: var(--bp-accent);
}
.bp-share-btn:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
}

/* Copy button: tick swaps in for the link icon while `is-copied` is set
   by blog-post.js (2s). Both icons are stacked so the button never
   changes size mid-swap. */
.bp-copy-ok {
  position: absolute;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.bp-copy-ic { transition: opacity 0.15s ease; }
.bp-copy.is-copied { border-color: var(--bp-accent); color: var(--bp-accent); }
.bp-copy.is-copied .bp-copy-ic { opacity: 0; }
.bp-copy.is-copied .bp-copy-ok { opacity: 1; }

/* Screen-reader-only live region for the copy result. */
.bp-copy-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Hero image ───────────────────────────────────────────────────── */
.bp-hero {
  margin: 36px 0 0;
  border-radius: 16px;
  border: 1px solid var(--bp-border);
  background: #F2F4F5;
  overflow: hidden;
  /* aspect-ratio on the figure keeps the box stable before the image
     loads, so the prose below doesn't jump. */
  aspect-ratio: 16 / 8.5;
}

/* The image may be wrapped in <picture> (WebP source + JPEG fallback).
   <picture> is a plain inline box, so it needs the figure's full height
   passed through it or the img's height:100% resolves against nothing. */
.bp-hero > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.bp-hero-img,
.bp-hero-grad {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── "From Croissant" note ────────────────────────────────────────────
   Sits between the hero image and the article body. Tinted panel with a
   teal left border so it reads as our voice, clearly distinct from the
   author's article below it. */
.bp-note {
  max-width: var(--bp-measure);
  margin: 36px 0 0;
  padding: 20px 24px;
  background: var(--bp-tint);
  border-left: 3px solid var(--bp-accent);
  border-radius: 12px;
  box-sizing: border-box;
}

.bp-note-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-accent);
  margin: 0 0 8px;
}

.bp-note-body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--bp-heading);
  margin: 0 0 12px;
}
.bp-note-body p:last-child { margin-bottom: 0; }

.bp-note-body a {
  color: var(--bp-accent);
  font-size: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.bp-note-body a:hover {
  color: var(--bp-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bp-note-body a:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Prose ────────────────────────────────────────────────────────────
   Styles the HTML produced by markdown (app.py renders body_md with the
   extra, sane_lists and smarty extensions). Selectors are descendant-based
   because the markdown output carries no classes. */
.bp-prose {
  max-width: var(--bp-measure);
  margin-top: 40px;
  font-family: var(--_font-family-2---font-family-2, Inter, sans-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--bp-body);
}

.bp-prose p { font-size: 17px; line-height: 1.7; color: var(--bp-body); margin: 0 0 20px; }

/* Intro paragraph: the first child only, so an h2-led article is
   unaffected. */
.bp-prose > p:first-child {
  font-size: 18px;
  color: var(--bp-heading);
  opacity: 0.85;
}

.bp-prose a {
  color: var(--bp-accent);
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.bp-prose a:hover {
  color: var(--bp-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bp-prose a:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.bp-prose h2 {
  font-family: var(--font-family--font-primary);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bp-heading);
  margin: 48px 0 16px;
}

.bp-prose h3 {
  font-family: var(--font-family--font-primary);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bp-heading);
  margin: 32px 0 12px;
}

/* Lists — custom bullets are a signature of the reference layout, so the
   native marker is removed and a 6px dot drawn with ::before. */
.bp-prose ul,
.bp-prose ol {
  margin: 0 0 20px;
  padding-left: 24px;
  list-style: none;
}

.bp-prose li {
  position: relative;
  font-size: 17px;
  line-height: 1.7;
  color: var(--bp-body);
  margin-bottom: 14px;
}
.bp-prose li:last-child { margin-bottom: 0; }

.bp-prose ul > li::before {
  content: "";
  position: absolute;
  left: -24px;
  /* Centre the dot on the first line's cap height rather than the whole
     item, so multi-line bullets stay aligned to their first line. */
  top: calc(0.85em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bp-bullet);
}

/* Ordered lists: teal numerals via a counter. */
.bp-prose ol { counter-reset: bp-ol; }
.bp-prose ol > li { counter-increment: bp-ol; }
.bp-prose ol > li::before {
  content: counter(bp-ol) ".";
  position: absolute;
  left: -24px;
  color: var(--bp-accent);
  font-weight: 600;
}

.bp-prose li > ul,
.bp-prose li > ol { margin-top: 14px; }

/* The hustler post has multi-paragraph ordered items. Give those items
   more breathing room than a one-line bullet, and stop the last paragraph
   inside an item adding a double gap. */
.bp-prose li > p { margin-bottom: 12px; }
.bp-prose li > p:last-child { margin-bottom: 0; }
.bp-prose li:has(> p) { margin-bottom: 20px; }

/* Bold lead-ins inside list items ("**Acknowledge What You Heard:**")
   carry the emphasis, so they take the heading colour like any other
   <strong> — set explicitly here because the li colour would otherwise
   win on specificity in some orders. */
.bp-prose li strong { color: var(--bp-heading); font-weight: 600; }

.bp-prose strong { color: var(--bp-heading); font-weight: 600; }

/* Blockquote — mirrors .cst-pquote. */
.bp-prose blockquote {
  border: 0;
  border-left: 3px solid var(--bp-accent);
  padding: 6px 0 6px 22px;
  margin: 28px 0;
}
.bp-prose blockquote p {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
  font-style: italic;
  color: var(--bp-heading);
  margin: 0 0 12px;
}
.bp-prose blockquote p:last-child { margin-bottom: 0; }
.bp-prose blockquote cite {
  font-size: 14px;
  color: var(--bp-muted);
  font-style: normal;
}

/* Several posts use a blockquote for a single short line ("What's the 411
   on the follow-up?"). Without this it reads as a stray indent; the extra
   block margin and slightly tighter leading make it look deliberate. */
.bp-prose blockquote p:only-child {
  line-height: 1.4;
  margin: 0;
}
.bp-prose blockquote:has(p:only-child) { margin: 32px 0; }

/* "Kind regards" sign-off in the Casper letter — set via attr_list in the
   Markdown ({: .bp-signoff }). Extra top margin separates it from the
   final paragraph the way a letter's sign-off should sit. */
.bp-prose .bp-signoff { margin-top: 36px; margin-bottom: 8px; }

/* Figures and standalone images. */
.bp-prose figure { margin: 36px 0; }
.bp-prose img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--bp-border);
  box-sizing: border-box;
}
.bp-prose figure img { margin: 0; }
.bp-prose p > img { margin: 36px 0; }
.bp-prose figcaption {
  font-size: 14px;
  line-height: 1.5;
  color: var(--bp-muted);
  text-align: center;
  margin-top: 12px;
}

.bp-prose hr {
  border: 0;
  border-top: 1px solid var(--bp-border);
  margin: 48px 0;
}

.bp-prose code {
  font-size: 0.9em;
  background: #F2F4F5;
  border-radius: 4px;
  padding: 2px 6px;
}
.bp-prose pre {
  background: #F2F4F5;
  border-radius: 8px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 0 0 20px;
}
.bp-prose pre code { background: none; padding: 0; }

/* ── End of article ───────────────────────────────────────────────── */
.bp-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: var(--bp-measure);
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--bp-border);
}

.bp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bp-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
.bp-back:hover { color: var(--bp-accent-hover); }
.bp-back svg { transition: transform 0.2s ease; }
.bp-back:hover svg { transform: translateX(-2px); }

/* ── Related posts ────────────────────────────────────────────────── */
.bp-related {
  margin-top: 96px;
  padding-bottom: 96px;
}

/* Matches .cst-eyebrow2. */
.bp-related-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bp-accent);
  margin: 0 0 20px;
}

.bp-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.bp-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--bp-border);
  border-radius: 16px;
  padding: 16px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(14, 19, 32, 0.04), 0 10px 26px rgba(14, 19, 32, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(14, 19, 32, 0.06), 0 16px 34px rgba(14, 19, 32, 0.09);
}
.bp-card:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 3px;
}

.bp-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: #F2F4F5;
  overflow: hidden;
  margin-bottom: 14px;
}
/* Thumbnails are wrapped in <picture> (WebP + JPEG), which is an inline
   box by default and would collapse the img's height:100%. */
.bp-card-media > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.bp-card-img,
.bp-card-grad {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bp-card-pill { margin: 0 0 10px; }

.bp-card-title {
  display: block;
  font-family: var(--font-family--font-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bp-heading);
  text-wrap: balance;
  margin-bottom: 8px;
}

.bp-card-read {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--bp-muted);
  margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive — single stacking breakpoint at 991px, following the
   .cst-* precedent in hero.css.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* One column. Source order is header → rail → content, which is exactly
     the required reading order (title → meta → author/share → hero →
     body), so no explicit `order` is needed. */
  .bp-grid {
    display: block;
  }

  .bp-header { padding-top: 40px; }

  /* Rail becomes an inline row: author left, follow buttons right.
     "Read on LinkedIn" takes its own full-width line below them, since
     three items competing on one row gets cramped fast. */
  .bp-rail {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 20px;
    flex-wrap: wrap;
    margin-top: 28px;
  }
  .bp-follow { margin-top: 0; }

  /* No 220px rail to fit inside once stacked — give the icons back the
     roomier spacing. */
  .bp-share { gap: 8px; }

  /* The label would push the icons onto a second line in the inline row,
     and "Follow Croissant" is already implied by the icons sitting beside
     the author. Each button keeps its own aria-label. */
  .bp-follow-label { display: none; }

  .bp-orig {
    order: 3;
    width: 100%;
    margin-top: 0;
  }

  /* The date bar moves inside the column — there is no gutter to sit in
     once the rail is gone. */
  .bp-meta { padding-left: 15px; }
  .bp-meta::before { left: 0; }

  .bp-prose { max-width: none; }
  .bp-end { max-width: none; }

  .bp-related { margin-top: 72px; padding-bottom: 72px; }
  .bp-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .bp-related-grid { grid-template-columns: minmax(0, 1fr); }

  /* Secondary breadcrumb link is the first thing to go. */
  .bp-bread-r { display: none; }

  /* Taller crop so the hero keeps presence on a narrow screen. */
  .bp-hero { aspect-ratio: 4 / 3; }

  /* Frame lines are visual polish only — drop them when the gutters are
     too tight to read as a frame. */
  .bp-framed .bp-inner::before,
  .bp-framed .bp-inner::after { display: none; }

  .bp-title { font-size: clamp(28px, 7.5vw, 36px); }
  .bp-header { padding-top: 32px; }

  /* Keep the author/share row readable rather than cramped: let it wrap
     to two lines on very narrow screens. */
  .bp-rail { gap: 16px; }

  .bp-end { gap: 18px; }
}

/* ── Motion ───────────────────────────────────────────────────────────
   Every transition/transform above is decorative; disable them all when
   the visitor has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .bp-bread-chev,
  .bp-bread-l a,
  .bp-bread-r,
  .bp-share-btn,
  .bp-copy-ic,
  .bp-copy-ok,
  .bp-prose a,
  .bp-author-name a,
  .bp-back,
  .bp-back svg,
  .bp-card {
    transition: none;
  }
  .bp-card:hover,
  .bp-bread-r:hover .bp-bread-chev,
  .bp-back:hover svg {
    transform: none;
  }
}