/* ============================================================
   content.css — Shared LONG-FORM READING SYSTEM  (v2 · 2026-07-14)
   Loaded by BOTH Case Studies and Blog, AFTER /styles.css and
   BEFORE the page's own sheet. Single source of truth for how
   words are SET on any content page, so a case study and a blog
   post read as one publication and never drift.

   ── v2 — the desktop editorial grid ──────────────────────────
   v1 was a beautifully typeset MOBILE column stretched onto
   desktop: one ~680px measure jammed against the container's
   left edge, leaving 40–45% of the width as an unowned void,
   while media broke to a third, unrelated width. It read as
   unfinished on a wide monitor.

   v2 keeps the LOCKED shared LEFT edge (text still starts where
   the hero starts — never centred) and gives the right-hand void
   a JOB: a two-column reading grid with a sticky RAIL.
     · main column  = the reading measure (text + inline figures)
     · rail column  = a sticky aside pinned to the container's
                      right edge. Blog → "The 7 steps" jump-nav;
                      Case → a quiet "At a glance" dossier.
   The grid only engages ≥1081px (every desktop). At ≤1080 it
   collapses to the single left column v1 already nailed, and the
   rail (a desktop enhancement of already-published facts) hides.
   Mobile is unchanged and still fills the screen.

   Owns: the grid, reading column, type scale, vertical rhythm,
   the rail, and every content primitive (lede, section head,
   list, play/move, callout, figure, pull-quote, stat row, FAQ,
   end-CTA, chart card).
   Does NOT own: page chrome (hero, stat band, listing cards,
   nav, footer, lightbox) — that stays in each page's sheet.

   Palette + fonts inherited from /styles.css :root (LOCKED).

   ── Canonical vs legacy names ─────────────────────────────────
   New pages: .content-shell > .content-main + .content-rail,
   with .prose*, .content-list, .content-move, .content-note,
   .content-fig, .content-quote, .content-stats, .content-faq,
   .content-cta, .content-chart. The live Case-Study/Blog markup
   uses .cs-* / .blog-* names; those are grouped onto the same
   rules below so the two page types are physically one system.
   ============================================================ */

:root{
  /* ---- Editorial grid ------------------------------------------------
     The reading zone is ONE grid: a left main column (text + inline
     figures) + a right rail, both hung off the container's edges. The
     middle column is a flexible spacer, so the rail pins right and the
     text pins left at every width. Full-width "moment" bands (stat band,
     chart, quote) live in their OWN sections outside this grid and span
     the wider --band-wide measure. */
  --main-col:680px;        /* text + inline-figure column (~68–72 ch)   */
  --rail:264px;            /* sticky rail: TOC (blog) / dossier (case)   */
  --rail-gap:clamp(44px,5vw,92px);   /* min space between main and rail  */
  --band-wide:1080px;      /* chart + quote band inner (left, extends →) */
  --read-measure:680px;    /* legacy alias, == --main-col                */
  --content-frame:820px;   /* legacy token                              */

  /* ---- Type scale (Early Sans body · Glancyr display heads) ---- */
  --fs-lede:clamp(19px,1.55vw,22px);
  --fs-h2:clamp(25px,2.5vw,33px);
  --fs-h3:18px;
  --fs-body:17px;
  --fs-body-sm:16px;         /* the ONE secondary size: lists, notes, moves, faq, captions */

  /* ---- Line-heights ---- */
  --lh-lede:1.5;
  --lh-h2:1.22;
  --lh-h3:1.4;
  --lh-body:1.65;
  --lh-body-sm:1.6;

  /* ---- Vertical rhythm ----
     Contrast is the point: a large gap ABOVE a heading (between blocks)
     and a small gap BELOW it (head → its body) binds a heading to its
     copy and makes section breaks read as real pauses. */
  --gap-p:17px;                          /* paragraph → paragraph      */
  --gap-head:14px;                       /* heading → its first line   */
  --gap-block:clamp(46px,5.5vw,72px);    /* section → section          */
  --gap-object:30px;                     /* figure/note/quote outer gap */
}

/* ============================================================
   THE GRID — main column + sticky rail
   ============================================================ */
.content-shell,
.cs-layout,
.blog-layout{
  display:grid;
  grid-template-columns:minmax(0,var(--main-col)) minmax(var(--rail-gap),1fr) var(--rail);
  align-items:start;
}
/* The reading column. min-width:0 lets long tokens/figures wrap instead
   of forcing the track wider. */
.content-main{ grid-column:1; min-width:0; }

/* The sticky aside, pinned to the container's right edge. */
.content-rail{ grid-column:3; align-self:start; position:sticky; top:100px; }

/* Legacy case/blog markup wrapped its blocks in a bare <div>; keep that
   working as the main column even before the .content-main class lands. */
.cs-layout>div:first-child,
.blog-layout>.content-main{ grid-column:1; min-width:0; }

/* The blog runs a WIDER main column + narrower rail than the case studies: its
   figures are Meta UI screenshots that want room and the reading column felt
   cramped at 680. Overriding the two tokens re-computes its grid, its figure
   max-width, and its collapse width in one move. (Case studies keep 680/264 —
   their media are full-width bands, not inline figures.) */
.blog-layout{ --main-col:752px; --rail:236px; }

/* ============================================================
   LEDE — the standfirst paragraph that opens a piece
   ============================================================ */
.prose__lede,
.blog-lede{ font-size:var(--fs-lede); line-height:var(--lh-lede); color:var(--ink-soft); margin:0 0 var(--gap-block); max-width:36em; text-wrap:pretty; }
.prose__lede b,
.blog-lede b{ color:var(--ink); font-weight:700; }
.prose__lede em,
.blog-lede em{ font-style:italic; }

/* ============================================================
   SECTION BLOCK — the rhythm unit (eyebrow? + heading + body)
   ============================================================ */
.prose-block,
.cs-block,
.blog-block{ margin-bottom:var(--gap-block); }
.prose-block:last-child,
.cs-block:last-child,
.blog-block:last-child{ margin-bottom:0; }

/* Orange-dot section eyebrow */
.prose__eyebrow,
.cs-block__eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-text); margin-bottom:16px; }
.prose__eyebrow .dot,
.cs-block__eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); flex:none; }

/* Section heading (H2) */
.prose-block h2,
.cs-block h2,
.blog-block h2{ font-family:var(--display); font-weight:500; font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:-.022em; color:var(--ink); margin:0 0 var(--gap-head); text-wrap:balance; }
/* Step / index numeral inside a heading */
.prose-block h2 .n,
.blog-block h2 .n{ color:var(--orange-deep); font-variant-numeric:tabular-nums; }

/* Sub-heading (H3) inside a section */
.prose-block h3{ font-family:var(--sans); font-weight:700; font-size:var(--fs-h3); line-height:var(--lh-h3); letter-spacing:-.01em; color:var(--ink); margin:0 0 8px; }

/* Body copy */
.prose-block p,
.cs-block p,
.blog-block p{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-soft); margin:0 0 var(--gap-p); text-wrap:pretty; }
.prose-block p:last-child,
.cs-block p:last-child,
.blog-block p:last-child{ margin-bottom:0; }
.prose-block b,
.cs-block b,
.blog-block b{ color:var(--ink); font-weight:700; }
.prose-block a,
.blog-block a{ color:var(--orange-deep); text-decoration:underline; text-underline-offset:2px; }

/* ============================================================
   CHECKMARK LIST
   ============================================================ */
.content-list,
.cs-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.content-list li,
.cs-list li{ position:relative; padding-left:30px; font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); color:var(--ink-soft); }
.content-list li svg,
.cs-list li svg{ position:absolute; left:0; top:4px; color:var(--orange); }
.content-list li b,
.cs-list li b{ color:var(--ink); font-weight:700; }

/* ============================================================
   PLAY / MOVE — a numbered sub-point (index + bold subhead + copy)
   The "what we did" plays ARE the value story of a case study, so
   they read as a numbered sequence (01 · 02 · …) instead of a stack
   of look-alike bold lines. The index is a CSS counter — add or
   reorder moves in the HTML and the numbering follows, no hand-count.
   ============================================================ */
.cs-block,
.prose-block{ counter-reset:play; }
.content-move,
.cs-move{ position:relative; padding-left:46px; margin-bottom:26px; counter-increment:play; }
.content-move:last-child,
.cs-move:last-child{ margin-bottom:0; }
.content-move::before,
.cs-move::before{ content:counter(play,decimal-leading-zero); position:absolute; left:0; top:1px; font-family:var(--display); font-size:13px; letter-spacing:.04em; color:var(--orange-deep); font-variant-numeric:tabular-nums; }
/* faint tick between the index and the copy — a hanging rule that binds
   the play to its number without boxing it in */
.content-move::after,
.cs-move::after{ content:""; position:absolute; left:4px; top:22px; bottom:4px; width:1px; background:var(--hairline); }
.content-move:last-child::after,
.cs-move:last-child::after{ display:none; }
.content-move__t,
.cs-move__t{ font-family:var(--sans); font-weight:700; font-size:17px; letter-spacing:-.01em; color:var(--ink); margin-bottom:6px; }
.content-move__d,
.cs-move__d{ font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); color:var(--ink-soft); }
.content-move__d b,
.cs-move__d b{ color:var(--ink); font-weight:700; }

/* ============================================================
   NOTE / CALLOUT — grey card, PLAIN hairline border on all sides.
   No coloured left rail (that "accent bar on a rounded card" look
   isn't a PG device and reads as generic AI-template). Distinction
   comes from the same dot + uppercase Glancyr label that opens every
   section; the label is OPTIONAL (bare .blog-note still works).
   ============================================================ */
.content-note,
.blog-note{ background:var(--grey); border:1px solid var(--hairline); border-radius:12px; padding:20px 24px; margin:var(--gap-object) 0; font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); color:var(--ink-soft); }
.content-note b,
.blog-note b{ color:var(--ink); font-weight:700; }
.content-note__label{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-text); margin:0 0 10px; }
.content-note__label .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); flex:none; }

/* ============================================================
   FIGURE — an image inside the reading (main) column + caption.
   Fills the main column (no longer breaks to a 3rd width that
   fought the text). Add .zoom to <img> for click-to-enlarge; the
   lightbox JS lives on the page that opts in (blog only today).
   ============================================================ */
.content-fig,
.blog-fig{ margin:var(--gap-object) 0 8px; width:100%; max-width:var(--main-col); }
.content-fig img,
.blog-fig img{ width:100%; border:1px solid var(--hairline); border-radius:16px; box-shadow:var(--sh-md); display:block; }
.content-fig img.zoom,
.blog-fig img.zoom{ cursor:zoom-in; transition:filter .15s ease; }
.content-fig img.zoom:hover,
.blog-fig img.zoom:hover{ filter:brightness(.975); }
.content-fig figcaption,
.blog-fig figcaption{ margin:12px 0 0; font-family:var(--display); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--grey-text); text-align:left; }
/* portrait / tall figure — narrower, still left-aligned */
.content-fig--tall,
.blog-fig--tall{ max-width:520px; }

/* ============================================================
   PULL-QUOTE (inline) — a mid-article quote in the reading column.
   Orange left rail + Glancyr text. The left-rail is kept HERE (and
   cut from .content-note) on purpose: a rule down the left of a
   blockquote is the classic, universally-read quotation convention.
   ============================================================ */
.content-quote{ margin:var(--gap-object) 0; padding-left:22px; border-left:3px solid var(--orange); }
.content-quote p{ font-family:var(--display); font-weight:500; font-size:clamp(20px,2.2vw,26px); line-height:1.4; letter-spacing:-.018em; color:var(--ink); margin:0; }
.content-quote cite{ display:block; margin-top:14px; font-family:var(--sans); font-style:normal; font-size:14px; color:var(--grey-text); }
.content-quote cite b{ color:var(--ink); font-weight:700; }

/* ============================================================
   STAT ROW — big number + supporting line
   ============================================================ */
.content-stats,
.blog-stats{ display:flex; flex-direction:column; gap:2px; margin:var(--gap-object) 0; border-top:1px solid var(--hairline); }
.content-stat,
.blog-stat{ display:flex; align-items:baseline; gap:20px; padding:16px 0; border-bottom:1px solid var(--hairline); }
.content-stat .big,
.blog-stat .big{ font-family:var(--display); font-weight:500; font-size:clamp(26px,2.8vw,34px); line-height:1; letter-spacing:-.03em; color:var(--ink); white-space:nowrap; min-width:118px; font-variant-numeric:tabular-nums; }
.content-stat .txt,
.blog-stat .txt{ font-size:var(--fs-body-sm); line-height:1.5; color:var(--ink-soft); }
.content-stat .txt b,
.blog-stat .txt b{ color:var(--ink); font-weight:700; }

/* ============================================================
   FAQ — flat question/answer stack
   ============================================================ */
.content-faq,
.blog-faq{ border-top:1px solid var(--hairline); margin-top:12px; padding-top:8px; }
.content-faq h3,
.blog-faq h3{ font-family:var(--sans); font-weight:700; font-size:var(--fs-h3); letter-spacing:-.01em; color:var(--ink); margin:26px 0 6px; }
.content-faq p,
.blog-faq p{ font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); color:var(--ink-soft); margin:0; }

/* ============================================================
   END CTA — black close card inside the reading flow
   ============================================================ */
.content-cta,
.blog-end{ margin-top:var(--gap-block); background:var(--black); color:#fff; border-radius:16px; padding:clamp(28px,4vw,40px); text-align:center; }
.content-cta p,
.blog-end p{ font-family:var(--display); font-weight:500; font-size:clamp(20px,2.2vw,26px); line-height:1.25; letter-spacing:-.02em; color:#fff; margin:0 auto 18px; max-width:26ch; }
.content-cta .btn--light,
.blog-end .btn--light{ display:inline-flex; }

/* ============================================================
   CHART CARD — white card aligned to the wider band measure
   ============================================================ */
.content-chart__card,
.cs-chart__card{ background:#fff; border:1px solid var(--hairline); border-radius:16px; padding:clamp(24px,3vw,34px); box-shadow:var(--sh-sm); max-width:var(--band-wide); margin:0; }
.content-chart__cap,
.cs-chart__cap{ font-family:var(--display); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-text); margin:0 0 18px; }
.content-chart__svg,
.cs-chart__svg{ width:100%; height:auto; }
.content-chart__axis,
.cs-chart__axis{ display:flex; justify-content:space-between; margin-top:14px; padding:0 4px; }
.content-chart__axis span,
.cs-chart__axis span{ font-family:var(--display); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-text); text-align:center; }
.content-chart__axis b,
.cs-chart__axis b{ display:block; font-family:var(--sans); font-weight:500; font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--ink-soft); margin-top:4px; }

/* ============================================================
   RAIL — the sticky aside (shared shell; page fills the content)
   Quiet PG chrome: hairline, Glancyr labels, orange dots, no fills.
   ============================================================ */
.rail-label{ display:flex; align-items:center; gap:9px; font-family:var(--display); font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--grey-text); margin:0 0 16px; }
.rail-label .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); flex:none; }

/* Blog: "The 7 steps" jump-nav. A guide-rail of hairline down the left,
   each step a jump link. JS-free, so no scroll-spy highlight — a clean
   static index reads well and the anchors land below the sticky nav. */
.rail-toc{ list-style:none; margin:0; padding:0; border-left:1px solid var(--hairline); }
.rail-toc li{ margin:0; }
.rail-toc a{ display:flex; gap:11px; align-items:baseline; padding:8px 0 8px 16px; margin-left:-1px; border-left:1px solid transparent; font-size:13.5px; line-height:1.35; color:var(--grey-text); transition:color .15s ease, border-color .15s ease; }
.rail-toc a:hover{ color:var(--ink); border-left-color:var(--orange); }
.rail-toc__n{ font-family:var(--display); font-size:11px; color:var(--orange-deep); font-variant-numeric:tabular-nums; flex:none; min-width:12px; }
.rail-toc__extra{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--hairline); font-family:var(--display); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-text); transition:color .15s ease; }
.rail-toc__extra:hover{ color:var(--ink); }

/* Case: "At a glance" dossier — a quiet hairline card of already-published
   facts (channels, model, outcome). Label:value rows in a definition list. */
.cs-rail__card{ border:1px solid var(--hairline); border-radius:14px; padding:22px 22px 8px; background:#fff; box-shadow:var(--sh-sm); }
.cs-rail__dl{ margin:0; }
.cs-rail__dl>div{ padding:0 0 14px; margin:0 0 14px; border-bottom:1px solid var(--hairline); }
.cs-rail__dl>div:last-child{ border-bottom:0; }
.cs-rail__dl dt{ font-family:var(--display); font-size:10px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--grey-text); margin:0 0 5px; }
.cs-rail__dl dd{ margin:0; font-size:14px; line-height:1.4; color:var(--ink); font-weight:500; }
.cs-rail__dl dd .u{ position:relative; white-space:nowrap; }
.cs-rail__dl dd .u::after{ content:""; position:absolute; left:0; right:0; bottom:-.02em; height:.07em; background:var(--orange); border-radius:999px; }

/* Certified-partner credential — the REAL official partner badges. Klaviyo's
   badge is charcoal + orange + white (already the PG palette, used as-is);
   the Postscript seal is grayscaled to sit in the white/grey/ink palette —
   the same monochrome convention the client-logo strip already uses, so a
   pale-blue seal doesn't fight the locked colors. Stacked, left-aligned to the
   card edge, each carrying its tier (the badge = platform ID, tier = the one
   orange accent). Widths are tuned so the wide banner and the square seal read
   as equal visual weight. */
.cs-badges{ display:flex; flex-direction:column; }
.cs-badge{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:18px 0; }
.cs-badge:first-child{ padding-top:6px; }
.cs-badge + .cs-badge{ border-top:1px solid var(--hairline); }
.cs-badge__img{ display:block; height:auto; }
.cs-badge__img--klaviyo{ width:184px; max-width:100%; }
/* Postscript's official "Partner" seal read weak next to Klaviyo's badge, so we
   use the plain Postscript wordmark in its original purple (Joel's call) and let
   the "Silver tier" line below carry the partnership level. The one off-palette
   spot of colour is intentional + client-approved. Sized a touch narrower than
   the Klaviyo badge so the two read as equal weight. */
.cs-badge__img--postscript{ width:156px; }
.cs-badge__tier{ display:inline-flex; align-items:center; gap:7px; font-family:var(--display); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-text); }
.cs-badge__tier::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--orange); flex:none; }

/* ============================================================
   RESPONSIVE
   ≥1081px: the two-column grid above is live.
   ≤1080px: collapse to the single left column v1 nailed; the rail
   (a desktop enhancement of facts already on the page) hides.
   ≤720px: mobile — figures get a smaller radius.
   ============================================================ */
@media (max-width:1080px){
  .content-shell,
  .cs-layout,
  .blog-layout{ display:block; max-width:var(--main-col); }
  /* A rail carrying UNIQUE content (e.g. "What's next", "Certified partner")
     must survive on mobile — it flows inline as a trailing card after the copy.
     Pure-enhancement rails — the "At a glance" dossier (every fact is echoed in
     the hero/stat band) and the blog TOC (nav, useless at the end) — carry
     .content-rail--meta / .blog-rail and hide, losing nothing. */
  .content-rail{ position:static; width:auto; margin-top:var(--gap-object); }
  .content-rail--meta,
  .blog-rail{ display:none; }
  .content-fig,
  .blog-fig{ max-width:var(--main-col); }
}
@media (max-width:720px){
  .content-fig img,
  .blog-fig img{ border-radius:12px; }
  .content-stat .big,
  .blog-stat .big{ min-width:96px; }
}