/* Rounds Report — Stories tab
 *
 * One page per issue, merging what used to be two tabs: the narrative and
 * dated assessments from Trackers, and the published coverage from Story
 * Threads. The visual job of this sheet is to make ONE distinction legible
 * at a glance inside the arc: what was *reported* versus what *we concluded*.
 *
 * Reported (coverage) events sit on the rail in body type.
 * Our own assessments are tinted and marked, so an opinion never reads as
 * a fact someone else published.
 */

/* When body.on-stories is set, every other view stands down. */
body.on-stories #edition-view,
body.on-stories #week-view,
body.on-stories #market-view,
body.on-stories #metaline,
body.on-stories .datebar,
body.on-stories .contextbar,
body.on-stories .progress {
  display: none !important;
}
body.on-stories #stories-view {
  display: block;
}

#stories-view {
  padding: 1.2rem 0 4rem;
  max-width: 62rem;
  margin: 0 auto;
}

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

.st-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.st-pill {
  display: inline-block;
  flex: none;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.st-pill.wl-esc { color: var(--ink); font-weight: 700; }
.st-pill.wl-sta { color: var(--sig-new); }
.st-pill.wl-res { color: var(--sig-action); }
.st-pill.wl-awa { color: var(--sig-watch); }

/* Stakes -- standing, rarely changes. Muted on purpose so it does not compete with the
   movement pill, which is the thing that actually moved this window. */
.st-stakes {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}


.st-empty {
  font-family: var(--font-body);
  color: var(--muted);
  padding: 2rem 0;
}

.st-back {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin: 0 0 1.25rem;
}
.st-back a { color: var(--muted); text-decoration: none; }
.st-back a:hover { color: var(--accent); text-decoration: underline; }

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

.st-header { margin: 0 0 1.5rem; }
.st-header h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5.5vw, 2.1rem);
  line-height: 1.15;
  margin: 0 0 0.6rem;
}
.st-lede {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--body);
  margin: 0;
  max-width: 38rem;
}

/* Honest depth of the record, stated up front rather than implied. */
.st-ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--muted);
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  margin: 1.25rem 0 1rem;
}
.st-ledger b { color: var(--fg); font-weight: 700; }

/* ---------- filters ---------- */

.st-filters {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
}
.st-filter-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.st-chiprow { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.st-chip {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--body);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.35em 0.75em;
  cursor: pointer;
  min-height: 2rem;
}
.st-chip:hover { border-color: var(--rule-strong); }
.st-chip.is-on {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
.st-chip-n { opacity: 0.6; font-variant-numeric: tabular-nums; }

.st-count {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0 0 0.75rem;
}

/* ---------- index rows ---------- */

.st-list { display: flex; flex-direction: column; gap: 0.75rem; }

.st-row {
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.st-row:hover { border-color: var(--rule-strong); transform: translateY(-1px); }

.st-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
}
.st-row-head h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.25;
  margin: 0;
}
.st-row-head h3 a { color: var(--fg); text-decoration: none; }
.st-row:hover .st-row-head h3 a { color: var(--accent); }

.st-row-dir {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--body);
  margin: 0 0 0.7rem;
}

.st-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--muted);
}
.st-row-meta .st-dot { opacity: 0.45; }
.st-moved { color: var(--fg); font-weight: 500; }
.st-stale { color: var(--sig-watch); font-weight: 500; }
.st-trackonly { font-style: italic; }

.st-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.6rem 0 0; }
.st-tag {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--rule-soft);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.5em;
}

/* Density strip: one column per day (or per week past six weeks) across the
   tracked span, each stacking published coverage under our own assessments.
   The span always ends at today, so empty columns on the right are the quiet
   stretch, not a cropped axis. */
.st-strip { margin: 0.8rem 0 0; }
.st-plot {
  display: flex;
  align-items: flex-end;
  gap: var(--st-gap, 3px);
  height: 2.2rem;
  border-bottom: 1px solid var(--rule);
  /* Shrink-to-fit, so the axis is only as wide as the span is long. */
  width: max-content;
  max-width: 100%;
}
.st-col {
  /* Longhands, not the `flex` shorthand: a custom property inside the
     shorthand does not resolve as a flex-basis and the columns collapse
     to min-width. */
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: var(--st-col, 9px);
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
}
/* A faint floor on empty buckets keeps the axis readable as a timeline. */
.st-col.is-empty { background: linear-gradient(to top, var(--rule) 2px, transparent 2px); }
.st-col-fill {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 1.5px 1.5px 0 0;
  overflow: hidden;
}
.st-seg { display: block; width: 100%; }
.st-seg.is-cov { background: var(--rule-strong); opacity: 0.5; }
.st-seg.is-ass { background: var(--accent); }
.st-plot-cap {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-top: 0.28rem;
}

/* ---------- detail ---------- */

.st-detail-head { margin: 0 0 1.25rem; }
.st-detail-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 5.5vw, 2.05rem);
  line-height: 1.15;
  margin: 0 0 0.7rem;
}
.st-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0 0 0.6rem;
}

/* The recency statement. Deliberately absolute, never "since your last
   visit": every reader sees the same sentence. */
.st-recency {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
  padding: 0.7rem 0.9rem;
  background: var(--rule-soft);
  border-radius: var(--radius-sm);
  margin: 0 0 1.25rem;
}
.st-recency b { color: var(--fg); }
.st-recency.is-stale { color: var(--sig-watch); }
.st-recency.is-stale b { color: var(--sig-watch); }

.st-narrative {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--body);
  margin: 0 0 1.5rem;
  padding-left: 0.9rem;
  /* Softened from the accent rule so the 3px accent bar means exactly one thing on
     this page: the spine sentence. Two elements wearing the same marker is how a
     recognition cue stops being a cue. */
  border-left: 3px solid var(--rule);
}

.st-block { margin: 0 0 1.4rem; }
.st-block-h {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.4rem;
}
.st-block-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--body);
  margin: 0;
}

/* ---------- the decision on the table ----------
   Given a rule and a tinted panel because it is the one block on the page a reader is
   meant to act on, and because its three labelled lines have to stay visually separable
   from the surrounding paragraphs -- the whole point of the field is that "what it turns
   on" and "what would flip it" are different questions. */

.st-dec {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 4px 4px 0;
  padding: 0.9rem 1.1rem 0.8rem;
}
.st-dec .st-block-h {
  margin-bottom: 0.3rem;
}
.st-dec-q {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 0.75rem;
  text-wrap: pretty;
}
.st-dec-rows {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.st-dec-row dt {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.1rem;
}
.st-dec-row dd {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}
.st-dec-foot {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  margin: 0.75rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule-soft);
}
/* Two columns once there is room; the two rows are read as a pair, not a list. */
@media (min-width: 40rem) {
  .st-dec-rows {
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1.4rem;
  }
}

/* ---------- the arc ---------- */

.st-arc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
  margin: 1.75rem 0 0.4rem;
}
.st-arc-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: 0;
}
.st-arc-note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.st-arc { list-style: none; margin: 0; padding: 0; }

/* Each day is one group on a single vertical rail. */
.st-day {
  position: relative;
  padding: 0 0 1.3rem 1.5rem;
  border-left: 1px solid var(--rule);
}
.st-day:last-child { border-left-color: transparent; padding-bottom: 0.25rem; }
.st-day::before {
  content: '';
  position: absolute;
  left: -4.5px;
  top: 0.45rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--rule-strong);
}
.st-day.has-ass::before { border-color: var(--accent); background: var(--accent); }

.st-day-when {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.55rem;
}

.st-ev { margin: 0 0 0.8rem; }
.st-ev:last-child { margin-bottom: 0; }

/* Reported: someone else published this. */
.st-ev-cov h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 0.25rem;
}
.st-ev-cov h4 a { color: var(--fg); text-decoration: none; }
.st-ev-cov h4 a:hover { color: var(--accent); text-decoration: underline; }
.st-ev-src {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
}
.st-ev-src a { color: var(--muted); }
.st-edition {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
}
.st-edition.is-chicago { color: var(--local); background: var(--local-soft); }
.st-edition.is-national { color: var(--sig-new); background: var(--rule-soft); }

/* Our own read. Tinted so it can never be mistaken for reporting. */
.st-ev-ass {
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
}
.st-ev-ass-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
}
.st-ourread {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.st-ev-note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--body);
  margin: 0 0 0.35rem;
}

/* ---------- sources + footer ---------- */

.st-sources { list-style: none; margin: 0; padding: 0; }
.st-sources li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.45;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.st-sources li:last-child { border-bottom: 0; }
.st-sources .st-src-meta { display: block; font-size: var(--text-xs); color: var(--muted); }

.st-related {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--muted);
  background: var(--rule-soft);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.4rem;
}

.st-foot {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin: 1.75rem 0 0;
}

/* Strip on a brief item that names the stories it belongs to. */
.st-itemstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  margin: 0.6rem 0 0;
}
.st-itemstrip a { color: var(--muted); text-decoration: none; }
.st-itemstrip a:hover { color: var(--accent); text-decoration: underline; }
.st-itemstrip b { color: var(--fg); font-weight: 500; }
.st-itemstrip-icon { color: var(--accent); }

/* ---------- phone ----------
   The filter rails are the tallest piece of chrome on a narrow screen, so
   they become single swipeable rows instead of wrapping to four lines. */

@media (max-width: 48rem) {
  .st-chiprow {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.15rem;
  }
  .st-chiprow::-webkit-scrollbar { display: none; }
  .st-chip { flex: none; }
  .st-filters { gap: 0.6rem; }
  .st-ledger { margin: 1rem 0 0.85rem; }
  .st-header h1 { font-size: clamp(1.45rem, 6.5vw, 1.8rem); }
  .st-lede { font-size: var(--text-sm); }
}

/* ---------- wide ---------- */

@media (min-width: 60rem) {
  .st-filters { flex-direction: row; gap: 2rem; }
  .st-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
  .st-detail-body { max-width: 40rem; }
}

/* ---------- where Endeavor sits ----------
   Deliberately quieter than the decision panel next to it: a rule and a tint, not a
   coloured panel. This block is orientation, not a call to act, and the site's own
   employer should not be the loudest thing on a page about a national policy. Uses the
   local-news accent so it reads as "close to home" alongside the Chicago treatment. */

.st-end {
  border-left: 3px solid var(--local);
  background: color-mix(in srgb, var(--local) 6%, var(--paper));
  border-radius: 0 4px 4px 0;
  padding: 0.9rem 1.1rem 0.8rem;
}
.st-end .st-block-h {
  margin-bottom: 0.35rem;
  color: var(--local);
}
.st-end-pos {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.st-end-basis {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--body);
  margin: 0.5rem 0 0;
  text-wrap: pretty;
}
.st-end .st-dec-foot {
  margin-top: 0.7rem;
}

/* ---------- ready to brief (four-line exec summary) ----------
   Sits under "What it means for a CMO" and turns the three standing paragraphs above it
   into something a chief can carry into a meeting. Given a page-like paper-2 background
   so it reads as "the thing you copy" rather than as another tinted call-out; the head
   is the only place the buttons live so a Copy click and the label it copies stay in
   one visual unit. */

.st-bp {
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  padding: 0.95rem 1.1rem 0.85rem;
}
.st-bp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.55rem;
  flex-wrap: wrap;
}
.st-bp-head .st-block-h {
  margin: 0;
}
.st-bp-acts {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.st-bp-copy {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--body);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.st-bp-copy:hover {
  background: var(--local-soft);
  border-color: var(--local);
  color: var(--local);
}
.st-bp-copy:focus-visible {
  outline: 2px solid var(--local);
  outline-offset: 2px;
}
.st-bp-copy.is-ok {
  background: var(--local);
  color: var(--paper);
  border-color: var(--local);
}
.st-bp-copy.is-err {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.st-bp-rows {
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.st-bp-row dt {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.1rem;
}
.st-bp-row dd {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--body);
  margin: 0;
  text-wrap: pretty;
}
.st-bp .st-dec-foot {
  margin-top: 0.7rem;
}

/* ---------- retention: the Endeavor block, hoisted ----------
   Applicability was the sixth block on the page, roughly four hundred words
   down, and a story where Endeavor has a sized exposure looked exactly like one
   where no public statement exists. Position on the page is itself a retrieval
   cue, so the block now sits directly under the title, and the two states are
   given plainly different weight. */

.st-end.is-absent {
  border-left-color: var(--rule-strong);
  background: var(--rule-soft);
}
.st-end.is-absent .st-block-h { color: var(--muted); }
.st-end.is-absent .st-end-pos {
  font-size: var(--text-sm);
  color: var(--body);
}

/* ---------- retention: the shape of the arc ----------
   A thirty-four entry chronology is reference material. What a reader still has
   a week later is a couple of turning points and the trend between them, so the
   turns are named before the list starts and everything else stays available
   underneath. */

.st-shape {
  margin: 0 0 1.4rem;
  padding: 0.85rem 1.1rem 0.9rem;
  background: var(--rule-soft);
  border-radius: var(--radius-sm);
}
.st-shape .st-block-h { margin-bottom: 0.35rem; }
.st-shape-line {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

.st-turns {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.4rem;
}
.st-turns li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.st-turn-when {
  flex: 0 0 auto;
  min-width: 3.6rem;
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.st-turn-move { color: var(--ink); }

/* Interval, not just date. Eleven days of silence and a same-day follow-up used
   to occupy identical space, and the difference between them is most of what
   shape means. */
.st-day-gap {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
  opacity: 0.75;
}
.st-day-gap::before {
  content: '·';
  margin: 0 0.4rem;
  opacity: 0.6;
}

/* A day where our read changed outranks a day where more coverage arrived. */
.st-day.is-turn::before {
  width: 11px;
  height: 11px;
  left: -6px;
  top: 0.35rem;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.st-day.is-turn .st-day-when { color: var(--accent); }

/* ---------- the spine inside the brief-item strip ----------
   The strip is a flex row of small muted links; the spine is a block sentence
   in the site's display face. Reset the pieces the strip would otherwise
   impose on it -- colour, size, family -- so the sentence looks the same here
   as it does on the story page. It has to, or the repetition stops counting
   as repetition. */
.st-itemstrip a { display: block; }
.st-itemstrip .spine.st-itemstrip-spine {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.42;
  margin: 0;
}
.st-itemstrip a:hover .spine.st-itemstrip-spine { text-decoration: none; }
.st-itemstrip-name {
  display: block;
  margin: 0.3rem 0 0 calc(0.72rem + 3px);
}

/* The story page header spine sits under the H1, above the pills. It shares the
   base .spine treatment; only its rhythm differs. */
.st-detail-head .spine { margin: 0.55rem 0 0.7rem; }
.st-row .spine { margin: 0.5rem 0 0.55rem; }

/* ---------- retention: the fixed skeleton ----------
   Every labelled section renders in the same slot on every story page. A page that
   hides its empty blocks is a different page each time, so its third heading is
   "What it means for a CMO" on one story and "Ready to brief" on the next, and a
   reader can never learn where to look.

   An empty slot keeps the heading, in position, at the same size -- that is the whole
   point of holding the slot -- and drops every other signal. No accent on the label,
   no tint, no card, no radius. The 3px left rule survives at rule-soft so the slot
   still occupies the shape a filled block would, which is what makes the page's
   geometry learnable, but it is close enough to invisible that a scanner reads the
   whole run as absence and moves on. */

.st-block.is-empty,
.st-end.is-absent.is-empty {
  background: none;
  border: 0;
  border-left: 3px solid var(--rule-soft);
  border-radius: 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
}
.st-block.is-empty .st-block-h,
.st-end.is-absent.is-empty .st-block-h {
  color: var(--ink-3);
  margin-bottom: 0.3rem;
}
.st-block-none {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}
/* The empty brief pack has no buttons, so the flex head it normally uses would
   leave the label floating alone against a stripped-out card. */
.st-bp.is-empty .st-bp-head { display: block; }

.st-narrative.is-empty {
  font-size: var(--text-sm);
  color: var(--muted);
  border-left-color: var(--rule-soft);
}
.st-sources-none {
  padding: 0.5rem 0;
}

/* ---------- retention: since you were last here ----------
   This line is about the reader, not the story, so it should not read as another
   assessment block. It gets the accent left rule and nothing else: no tint, no card, no
   pill. Sitting directly under the recency line keeps both temporal frames together,
   above the first content block, where a returning reader looks first. */
.st-since {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-2);
  border-left: 3px solid var(--accent);
  padding: 0.05rem 0 0.05rem 0.85rem;
  margin: -0.5rem 0 1.35rem;
  max-width: 62ch;
  text-wrap: pretty;
}
.st-since.is-quiet {
  color: var(--muted);
  border-left-color: var(--rule);
}