/* ===========================================================================
   case.css — the case-study surface.

   The first version of these pages was prose and HTML tables on the body
   background. RD's note was that they are "very bland", carry none of the
   imagery the PitchIQ demos are full of, and are not deployable. Both true.

   The reference is HockeyStack's case studies. What they actually do, read
   rather than assumed: the INDEX carries the visual weight -- single column,
   one full-bleed image per card, logo overlaid, headline, pull-quote,
   metadata badges -- while each article is ~85% text with one hero image,
   narrative sections (The Who / The Problem / The Results) and left-accented
   pull-quotes. No charts anywhere.

   So this borrows their structure and beats them on the one axis we can:
   they have no numbers to show and we have 13,842 decoded creatives. Every
   graphic here is generated from a verified figure.

   What it deliberately does NOT use: the demos' ad stills. Those are third
   parties' creative work pulled from the Meta Ad Library with no recorded
   usage rights, and the rival ones belong to companies we have no
   relationship with. Every pixel below is ours.

   Theme is Galvor's own, not a new one: the dark ground and bloom from
   hero.css (the closing block only, since 2026-10-09), .gv-grad from
   shell.css, the 7/12 card and bottom-gradient overlay from desk.css,
   --gv-h2 from base.css.

   Namespace: cs-
   =========================================================================== */

.cs{
  --cs-bg:#08060f;
  --cs-bloom:radial-gradient(1100px 620px at 78% -8%,#3a2070 0%,#1d1034 42%,#0e0a1c00 72%);
  --cs-ground:var(--cs-bloom),linear-gradient(158deg,#1a1030 0%,#120c22 38%,var(--cs-bg) 72%),var(--cs-bg);
  --cs-accent:#b48cff;
  --cs-ink:#f3f0fa;
  --cs-ink-2:#bdb3d4;
  --cs-line:#ffffff1f;
  --cs-ease:cubic-bezier(.16,1,.3,1);
  --cs-l-ink:#1b1626;
  --cs-l-ink-2:#4e4660;
  --cs-l-ink-3:#766f82;
  --cs-l-line:#17121f14;
}

/* ---- 1. the hero: the only place the headline is large -------------------
   It was a dark purple block until 2026-10-09. The owner asked for the site's
   own ground instead, so it paints nothing: the fixed .gv-aurora field shows
   through, as it does behind every other section, and the type is the dark
   ink the body below already uses. The trail above the eyebrow is the shared
   .gv-crumbs (content.css); it replaced a "back" pill. */

.cs-hero{
  position:relative;
  padding:calc(76px + clamp(44px,7vh,88px)) 5vw clamp(40px,6vh,76px);
  color:var(--cs-l-ink);
  overflow:hidden;
}
.cs-hero-in{max-width:1040px;margin-inline:auto;position:relative;z-index:1}

.cs-eyebrow{
  margin:clamp(22px,3.4vh,34px) 0 0;
  font-size:var(--gv-eyebrow,12.5px);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#6d28d9;
}
.cs-eyebrow span{color:#a78bfa;margin-right:8px}

.cs-h{
  margin:clamp(12px,1.8vh,18px) 0 0;
  font-size:clamp(31px,4.6vw,58px);line-height:1.04;letter-spacing:-.025em;
  font-weight:700;max-width:21ch;
}
.cs-lead{
  margin:clamp(16px,2.4vh,24px) 0 0;max-width:62ch;
  font-size:clamp(16.5px,1.32vw,19.5px);line-height:1.58;color:var(--cs-l-ink-2);
}
.cs-lead b{color:var(--cs-l-ink);font-weight:650}

/* ---- 2. the stat band: the numbers, before any prose ------------------- */

.cs-stats{
  margin:clamp(26px,4vh,40px) 0 0;
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(152px,1fr));
}
.cs-stat{
  padding:clamp(14px,1.7vw,19px) clamp(15px,1.8vw,21px);
  border-radius:15px;
  /* a white card with the figure's hairline (.cs-fig-in); it was frosted
     glass while the hero was dark */
  background:#fff;box-shadow:inset 0 0 0 1px var(--cs-l-line);
}
.cs-stat b{
  display:block;
  font:700 clamp(25px,2.9vw,38px)/1 ui-monospace,Menlo,monospace;
  letter-spacing:-.02em;
  /* the violets of the volume bars: the pale gradient made for the dark
     ground could not be read on white */
  background:linear-gradient(110deg,#6d28d9,#9333ea);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cs-stat em{
  display:block;margin-top:9px;font-style:normal;
  font-size:13.5px;line-height:1.35;font-weight:600;color:var(--cs-l-ink);
}
.cs-stat i{
  display:block;margin-top:4px;font-style:normal;
  font-size:12px;line-height:1.4;color:var(--cs-l-ink-2);
}
@media (prefers-contrast:more){
  .cs-stat b{background:none;color:#5b21b6}
}

/* ---- 3. the figure: a graphic built from the numbers, not a photograph -- */

.cs-fig{
  margin:clamp(30px,5vh,56px) auto 0;max-width:1040px;
  padding:0 5vw;
}
.cs-fig-in{
  padding:clamp(18px,2.4vw,30px);
  border-radius:20px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--cs-l-line),0 30px 64px -40px #17121f59;
}
.cs-fig-k{
  margin:0 0 clamp(14px,1.8vh,20px);
  font-size:12.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cs-l-ink-3);
}
.cs-fig-cap{
  margin:clamp(14px,1.8vh,18px) 0 0;
  font-size:13.5px;line-height:1.55;color:var(--cs-l-ink-3);
}
.cs-fig-cap b{color:var(--cs-l-ink);font-weight:650}

/* -- 3a. volume bars: the brand against its rivals -- */
.cs-bars{display:grid;gap:clamp(9px,1.2vh,13px)}
.cs-bar{display:grid;grid-template-columns:minmax(88px,auto) 1fr auto;
  align-items:center;gap:clamp(10px,1.4vw,16px)}
.cs-bar-l{font-size:13.5px;font-weight:600;color:var(--cs-l-ink-2);white-space:nowrap}
.cs-bar-t{position:relative;height:clamp(22px,2.6vh,30px);border-radius:7px;
  background:#17121f0a;overflow:hidden}
.cs-bar-f{
  position:absolute;inset:0 auto 0 0;border-radius:7px;
  width:var(--w,0%);
  background:linear-gradient(90deg,#6d28d9,#a855f7);
  animation:cs-grow 1.1s var(--cs-ease) both;
}
.cs-bar.is-rival .cs-bar-f{background:linear-gradient(90deg,#b9adce,#d6cde4)}
.cs-bar-v{font:700 14.5px/1 ui-monospace,Menlo,monospace;color:var(--cs-l-ink);
  min-width:4.2ch;text-align:right}
@keyframes cs-grow{from{width:0}to{width:var(--w,0%)}}
@media (prefers-reduced-motion:reduce){
  .cs-bar-f{animation:none}
}

/* -- 3b. the collapse grid: every media file as one cell, the distinct ones lit -- */
.cs-grid{
  display:grid;gap:3px;
  grid-template-columns:repeat(var(--cols,32),1fr);
}
.cs-cell{aspect-ratio:1;border-radius:2px;background:#17121f14}
.cs-cell.is-on{background:linear-gradient(140deg,#7c3aed,#a855f7);
  box-shadow:0 0 0 1px #7c3aed40}
.cs-legend{
  display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,22px);
  margin:clamp(14px,1.8vh,18px) 0 0;
  font-size:13px;color:var(--cs-l-ink-2);
}
.cs-legend span{display:inline-flex;align-items:center;gap:7px}
.cs-legend i{width:11px;height:11px;border-radius:3px;background:#17121f14;flex:none}
.cs-legend span.on i{background:linear-gradient(140deg,#7c3aed,#a855f7)}

/* ---- 4. the body: light, narrow, and plainly set ----------------------- */

.cs-body{
  max-width:1040px;margin:clamp(34px,6vh,64px) auto 0;padding:0 5vw;
  color:var(--cs-l-ink-2);
}
.cs-sec{max-width:68ch}
.cs-sec+.cs-sec{margin-top:clamp(30px,5vh,52px)}
.cs-h2{
  margin:0 0 clamp(11px,1.5vh,16px);
  font-size:clamp(21px,2vw,27px);line-height:1.2;letter-spacing:-.015em;
  font-weight:700;color:var(--cs-l-ink);
}
.cs-h3{
  margin:clamp(18px,2.4vh,26px) 0 clamp(7px,1vh,10px);
  font-size:clamp(17px,1.45vw,20px);line-height:1.3;letter-spacing:-.01em;
  font-weight:650;color:var(--cs-l-ink);
}
.cs-p{margin:0 0 clamp(11px,1.4vh,15px);
  font-size:clamp(15.5px,1.22vw,17.5px);line-height:1.68}
.cs-p:last-child{margin-bottom:0}
.cs-p b{font-weight:650;color:var(--cs-l-ink)}
.cs-p a{color:#6d28d9;border-bottom:1px solid #c4b5fd}
.cs-p a:hover{border-bottom-color:#6d28d9}

.cs-l{list-style:none;margin:0;padding:0;display:grid;gap:clamp(9px,1.2vh,13px)}
.cs-l li{position:relative;padding-left:19px;
  font-size:clamp(15px,1.18vw,16.8px);line-height:1.62}
/* The marker is a dot. It was a short horizontal line until 2026-10-08, which
   read as a dash in front of every point; the owner asked for a dot. */
.cs-l li::before{content:"";position:absolute;left:2px;top:.6em;
  width:6px;height:6px;border-radius:50%;background:var(--cs-accent)}
/* A numbered list keeps its numbers. `list-style:none` above removed them, so
   an <ol class="cs-l"> ("Three questions to ask your team") showed the same
   marker as a bulleted list. */
ol.cs-l{counter-reset:cs-l}
ol.cs-l li{counter-increment:cs-l}
ol.cs-l li::before{content:counter(cs-l) ".";left:0;top:0;width:auto;height:auto;border-radius:0;
  background:none;color:var(--cs-accent);font-weight:650}
.cs-l b{font-weight:650;color:var(--cs-l-ink)}

/* ---- 5. the pull-quote: one sentence, the one worth remembering -------- */

.cs-quote{
  margin:clamp(28px,4.5vh,48px) 0;padding:0 0 0 clamp(18px,2.4vw,28px);
  border-left:3px solid var(--cs-accent);
  max-width:60ch;
}
.cs-quote p{
  margin:0;font-size:clamp(19px,1.95vw,27px);line-height:1.34;
  letter-spacing:-.015em;font-weight:600;color:var(--cs-l-ink);
}
.cs-quote span{
  display:block;margin-top:clamp(10px,1.4vh,14px);
  font-size:13.5px;line-height:1.5;font-weight:500;color:var(--cs-l-ink-3);
}

/* ---- 6. the limits: dark again, because it closes the page ------------- */

.cs-limits{
  margin:clamp(40px,6.5vh,76px) 0 0;padding:clamp(28px,4.5vw,46px) 5vw;
  background:var(--cs-ground);color:var(--cs-ink-2);
}
.cs-limits-in{max-width:1040px;margin-inline:auto}
.cs-limits .cs-h2{color:var(--cs-ink)}
.cs-limits .cs-p{color:var(--cs-ink-2)}
.cs-limits .cs-p b{color:var(--cs-ink)}
.cs-limits .cs-l li{color:var(--cs-ink-2)}
.cs-limits .cs-l b{color:var(--cs-ink)}
.cs-note{
  margin:clamp(18px,2.6vh,26px) 0 0;padding:clamp(14px,1.8vw,20px);
  border-radius:14px;background:#ffffff0f;border:1px solid var(--cs-line);
  font-size:14px;line-height:1.6;color:var(--cs-ink-2);
}
.cs-note b{color:var(--cs-ink);font-weight:650}

.cs-cta{
  margin:clamp(26px,4vh,40px) 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}
.cs-cta a{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 21px;border-radius:999px;font-size:15px;font-weight:600;
  background:#fff;color:#14101f;
  box-shadow:0 1px 2px #0000004d,0 10px 24px -10px #00000080;
  transition:transform .25s var(--cs-ease);
}
.cs-cta a:hover{transform:translateY(-1px)}
.cs-cta a.is-ghost{
  background:#ffffff0f;color:var(--cs-ink);border:1px solid var(--cs-line);box-shadow:none;
}

/* ---- 7. the index: one card per study, the graphic doing the work ------ */

.cs-idx{padding:calc(76px + clamp(34px,5vh,64px)) 5vw clamp(50px,8vh,90px)}
.cs-idx-in{max-width:1040px;margin-inline:auto}
.cs-idx-h{
  font-size:var(--gv-h2,clamp(30px,3.4vw,50px));line-height:1.06;
  letter-spacing:-.025em;font-weight:700;color:var(--cs-l-ink);max-width:20ch;
}
.cs-idx-sub{margin:clamp(13px,1.8vh,18px) 0 0;max-width:60ch;
  font-size:clamp(15.5px,1.22vw,17.5px);line-height:1.62;color:var(--cs-l-ink-2)}
.cs-idx-list{list-style:none;margin:clamp(28px,4.5vh,46px) 0 0;padding:0;
  display:grid;gap:clamp(12px,1.8vh,18px)}
.cs-card{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(18px,2.6vw,34px);align-items:center;
  padding:clamp(18px,2.4vw,28px);border-radius:20px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--cs-l-line),0 22px 50px -38px #17121f4d;
  transition:box-shadow .3s var(--cs-ease),transform .3s var(--cs-ease);
}
.cs-card:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px #17121f1f,0 30px 64px -34px #17121f66}
.cs-card-k{font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cs-l-ink-3)}
.cs-card-h{margin:9px 0 0;font-size:clamp(19px,1.75vw,24px);line-height:1.22;
  letter-spacing:-.018em;font-weight:700;color:var(--cs-l-ink)}
.cs-card-s{margin:10px 0 0;font-size:14.8px;line-height:1.56;color:var(--cs-l-ink-2)}
.cs-card-go{margin:clamp(12px,1.6vh,16px) 0 0;display:inline-flex;align-items:center;
  gap:7px;font-size:14px;font-weight:600;color:#6d28d9}
.cs-card-go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}
.cs-card:hover .cs-card-go svg{transform:translateX(2px)}
.cs-card-viz{padding:clamp(13px,1.7vw,18px);border-radius:14px;background:#faf9fc;
  box-shadow:inset 0 0 0 1px var(--cs-l-line)}
.cs-card-viz .cs-bar-l{font-size:11.5px;min-width:0}
.cs-card-viz .cs-bar{grid-template-columns:minmax(60px,auto) 1fr auto;gap:9px}
.cs-card-viz .cs-bar-t{height:15px;border-radius:5px}
.cs-card-viz .cs-bar-f{border-radius:5px}
.cs-card-viz .cs-bar-v{font-size:12px;min-width:3.6ch}

@media (max-width:760px){
  .cs-card{grid-template-columns:1fr}
  .cs-card-viz{order:-1}
  .cs-h{max-width:none}
}

/* ---- 8. the creative wall ----------------------------------------------
   The brands' own published advertising, as pulled from the public Meta Ad
   Library. Treatment is the Desk section's: a vertical card, a hairline, and
   a bottom gradient for any DOM sitting on top -- the one recipe on this site
   that has worked for real creative.

   Fixed aspect box with object-fit:cover, because a library mixes 9:16,
   1:1 and 1.91:1 and a wall of mixed ratios reads as a mistake. The ratio
   below matches the portrait exports, so those are not cropped at all.
   ----------------------------------------------------------------------- */

.cs-wall{
  display:grid;gap:clamp(8px,1.1vw,14px);
  grid-template-columns:repeat(auto-fit,minmax(clamp(118px,13vw,176px),1fr));
}
.cs-shot{
  margin:0;position:relative;aspect-ratio:248/440;border-radius:13px;overflow:hidden;
  background:#ece8f2;
  box-shadow:inset 0 0 0 1px #17121f1f,0 12px 28px -22px #17121f;
}
.cs-shot img,.cs-shot video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:#ece8f2;
}
.cs-shot figcaption{
  position:absolute;z-index:2;inset:auto 0 0 0;
  padding:26px 9px 8px;
  background:linear-gradient(to top,#0a0717f2 0%,#0a0717b8 52%,#0a071700 100%);
  font:600 10.5px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;
}
/* a video in the wall says so, quietly */
.cs-shot .cs-play{
  position:absolute;z-index:3;top:9px;right:9px;
  width:22px;height:22px;border-radius:50%;
  background:#0a0717a6;border:1px solid #ffffff3d;
  display:grid;place-items:center;
}
.cs-shot .cs-play svg{width:8px;height:8px;fill:#fff}

@media (max-width:520px){
  .cs-wall{grid-template-columns:repeat(2,1fr)}
}

/* ── blog cards and covers ─────────────────────────────────────────────
   A post's cover is not a stock picture: it is three or four of the brand's
   own ad frames, standing side by side. */
.cs-idx-in{max-width:1180px}
.bl-grid{list-style:none;margin:clamp(28px,4.5vh,46px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.bl-grid>li{display:flex;min-width:0}
.bl-grid>li.is-lead{grid-column:1/-1}
.bl-card{display:flex;flex-direction:column;width:100%;border-radius:20px;overflow:hidden;
  background:#fff;box-shadow:inset 0 0 0 1px var(--cs-l-line),0 22px 50px -38px #17121f4d;
  transition:box-shadow .3s var(--cs-ease),transform .3s var(--cs-ease)}
.bl-card:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px #17121f1f,0 30px 64px -34px #17121f66}
.bl-card:focus-visible{outline:2px solid #6d28d9;outline-offset:3px}
.bl-card-b{display:flex;flex-direction:column;flex:1;padding:clamp(16px,1.6vw,22px)}
.bl-card-h{margin:8px 0 0;font-size:clamp(18px,1.45vw,21px);line-height:1.24;
  letter-spacing:-.018em;font-weight:700;color:var(--cs-l-ink)}
.bl-card-s{margin:9px 0 0;font-size:14.5px;line-height:1.55;color:var(--cs-l-ink-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-card .cs-card-go{margin-top:auto;padding-top:14px}
.bl-cover{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;
  padding:14px 14px 0;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(160deg,#1b1230,#0c0817 70%)}
.bl-cover img{width:100%;height:118%;object-fit:cover;object-position:50% 12%;
  border-radius:10px 10px 0 0;display:block;
  transition:transform .5s var(--cs-ease)}
.bl-cover img:nth-child(even){margin-top:9%}
.bl-card:hover .bl-cover img{transform:translateY(-3%)}
.is-lead .bl-card{flex-direction:row}
.is-lead .bl-cover{flex:1.15;aspect-ratio:auto;min-height:340px;gap:10px;padding:22px 22px 0}
.is-lead .bl-card-b{flex:1;justify-content:center;padding:clamp(22px,3vw,44px)}
.is-lead .bl-card-h{font-size:clamp(24px,2.5vw,36px);line-height:1.12;letter-spacing:-.025em}
.is-lead .bl-card-s{font-size:16px;-webkit-line-clamp:5;margin-top:14px}
.is-lead .cs-card-go{margin-top:20px;padding-top:0}
/* in a post's hero the same strip sits beside the headline */
.cs-hero-in.has-cover{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  column-gap:clamp(24px,4vw,56px);align-items:center;max-width:1240px}
.cs-hero-in.has-cover>*{grid-column:1}
.cs-hero-in.has-cover>.bl-cover{grid-column:2;grid-row:1/span 6;aspect-ratio:4/4.4;
  background:none;padding:0;gap:10px;overflow:visible}
.cs-hero-in.has-cover>.bl-cover img{height:100%;border-radius:14px;
  box-shadow:inset 0 0 0 1px var(--cs-l-line),0 30px 64px -34px #17121f66}
.cs-hero-in.has-cover>.cs-stats{grid-column:1/-1}
@media (prefers-reduced-motion:reduce){.bl-card,.bl-cover img{transition:none}}
@media (max-width:980px){
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .is-lead .bl-card{flex-direction:column}
  .is-lead .bl-cover{min-height:0;aspect-ratio:16/10}
  .cs-hero-in.has-cover{display:block}
  .cs-hero-in.has-cover>.bl-cover{aspect-ratio:16/10;margin:22px 0 0}
}
@media (max-width:620px){.bl-grid{grid-template-columns:1fr}}
.cs-inl{float:right;width:clamp(150px,22%,240px);height:auto;margin:4px 0 14px 24px;
  border-radius:14px;box-shadow:inset 0 0 0 1px var(--cs-l-line)}
.cs-sec h2,.cs-sec .ct-tw{clear:both}
@media (max-width:620px){.cs-inl{float:none;display:block;margin:0 0 14px;width:60%}}

/* ── resources page ── */
.bl-note{margin:14px 0 0;max-width:70ch;padding:10px 14px;border-radius:10px;
  font-size:13.5px;line-height:1.5;color:var(--cs-l-ink-2);
  background:#f4f1fa;box-shadow:inset 0 0 0 1px var(--cs-l-line)}
.rsc-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:clamp(44px,7vh,76px) 0 0;padding-top:clamp(20px,3vh,30px);
  border-top:1px solid var(--cs-l-line)}
.rsc-h{margin:0;font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.025em;
  font-weight:700;color:var(--cs-l-ink)}
.rsc-sub{margin:8px 0 0;max-width:60ch;font-size:15.5px;line-height:1.55;color:var(--cs-l-ink-2)}
.rsc-all{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:14px;font-weight:600;color:#6d28d9}
.rsc-all svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}
.rsc-all:hover svg{transform:translateX(2px)}
.rsc-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.rsc-rows{grid-template-columns:1fr}}

/* ── newsletter: a cover set in type until an issue has artwork ── */
.bl-cover.is-type{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  padding:clamp(18px,2vw,26px);
  background:radial-gradient(120% 90% at 85% 0%,#5b2bd6 0%,#2a1560 42%,#0c0817 100%)}
.bl-cover-k{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#cdbdf7}
.bl-cover-n{font-family:var(--gv-mono,ui-monospace,monospace);font-size:13px;color:#fff;opacity:.75}
.bl-cover-t{font-size:clamp(22px,2.2vw,32px);line-height:1.08;letter-spacing:-.025em;
  font-weight:700;color:#fff;max-width:16ch}
.is-lead .bl-cover.is-type{padding:clamp(24px,3vw,44px)}
.is-lead .bl-cover-t{font-size:clamp(30px,3.6vw,52px)}
/* In an issue's hero the type cover is a white card in dark ink (2026-10-09:
   the hero left its dark ground, and a dark purple panel beside the headline
   was the last of it). On a hub card it keeps the purple above. */
.cs-hero-in.has-cover>.bl-cover.is-type{background:#fff;
  padding:clamp(22px,2.6vw,36px);border-radius:18px;
  box-shadow:inset 0 0 0 1px var(--cs-l-line),0 30px 64px -40px #17121f59}
.cs-hero-in.has-cover>.bl-cover.is-type .bl-cover-k{color:#6d28d9}
.cs-hero-in.has-cover>.bl-cover.is-type .bl-cover-n{color:var(--cs-l-ink-2);opacity:1}
.cs-hero-in.has-cover>.bl-cover.is-type .bl-cover-t{color:var(--cs-l-ink)}
.nl-take{margin:0 0 clamp(26px,4vh,40px);padding:clamp(18px,2.2vw,26px);border-radius:16px;
  background:#f4f1fa;box-shadow:inset 0 0 0 1px var(--cs-l-line)}
.nl-take .cs-h2{font-size:clamp(17px,1.4vw,19px);margin-bottom:10px}
.nl-pull{margin:clamp(18px,3vh,28px) 0;font-size:clamp(22px,2.3vw,30px);line-height:1.2;
  letter-spacing:-.02em;font-weight:700;color:var(--cs-l-ink)}
.nl-by{margin:14px 0 0;font-size:14px;color:var(--cs-l-ink-2)}

/* ── wider reading column (2026-10-07): the 68ch measure left half the screen
   empty on a laptop. One shared width for hero, figures, body and footer. */
.cs-hero-in,.cs-hero-in.has-cover,.cs-body,.cs-limits-in,.cs-fig,.cs-idx-in{max-width:1280px}
.cs-sec{max-width:none}
.cs-body .cs-p,.cs-body .cs-l{font-size:clamp(16.5px,1.3vw,19px)}
.cs-quote{max-width:none}
.cs-body .cs-l li{font-size:clamp(16.5px,1.3vw,19px);line-height:1.6}
.cs-body .cs-l{margin:0 0 clamp(14px,2vh,20px)}
.cs-sec>.cs-h2:not(:first-child){margin-top:clamp(30px,5vh,48px)}
.cs-sec>.cs-h3{margin-top:clamp(22px,3.4vh,34px)}
.cs-body,.cs-fig{max-width:calc(1280px + 10vw)}

/* ── article measure (2026-10-07, second pass): a centred reading column like
   Medium's, not edge to edge. Hero and figures stay wide; text, quote and the
   closing block share one 740px column in the middle of the page. */
.cs-body{max-width:calc(900px + 10vw)}
.cs-limits-in{max-width:900px}
.cs-body .cs-p,.cs-body .cs-l li{font-size:clamp(17.5px,1.38vw,20px);line-height:1.7}
.cs-body .cs-p{margin-bottom:clamp(16px,2.2vh,24px)}
.cs-sec>.cs-h2:not(:first-child){margin-top:clamp(36px,6vh,56px)}

/* ── byline (added 2026-10-08) ──
   "By <author>" as the last line of the hero's text column on research
   pages, where the newsletter's own byline (.nl-by) already sits; same size
   and colour as that line. The build inserts it (injectByline in
   src/lib/content.ts). .cs-byline-a is the author link, also used inside the
   newsletter's line: the violet, underlined link of the .ct pages. The build
   uses the same class for the links in the dark closing block (.cs-limits),
   where it is near-white instead. */
.cs-byline{margin:14px 0 0;font-size:14px;color:var(--cs-l-ink-2)}
.cs-byline-a{color:#5b21b6;text-decoration:underline;text-decoration-color:#a78bfa;
  text-underline-offset:3px}
.cs-byline-a:hover{text-decoration-color:#5b21b6}
.cs-limits .cs-byline-a{color:var(--cs-ink);text-decoration-color:var(--cs-accent)}
.cs-limits .cs-byline-a:hover{text-decoration-color:var(--cs-ink)}

/* ---- related research (added 2026-10-08) ----
   The "Related research" heading the build adds before the closing buttons
   (injectRelated in src/lib/content.ts). It follows a .cs-note box, and
   .cs-h2 has no top margin of its own outside .cs-sec, so without this the
   heading touches the box above it. Same gap as the buttons below it. The
   list under it is a plain .cs-l with .cs-byline-a links: no other new rule. */
.cs-related{margin-top:clamp(26px,4vh,40px)}

/* ---- small screens (added 2026-10-09) ----
   Found in a pass over these pages at 320 to 1024px. Every rule here sits
   inside a width query or only acts on a table that has run out of room, so
   a wide screen is drawn as before. */

/* The four stat cards. `auto-fit` at 152px gave three cards and one alone on
   a second row between about 530 and 708px, and one tall column at 320px.
   Below the width where four fit in a row they are two by two. */
@media (max-width:708px){
  .cs-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* An issue's type cover (white card, three short lines) kept the 16/10 shape
   of the picture strip once the hero became one column, so on a tablet it was
   a card more than 400px tall with its text at the bottom. It takes the
   height of its text instead. */
@media (max-width:980px){
  .cs-hero-in.has-cover>.bl-cover.is-type{aspect-ratio:auto}
}

/* Tables inside a post (`.ct-t`, drawn in content.css for the benchmark
   pages). A row head there never wraps, and one long head ("Hook plays on
   urgency (fear of missing out)") filled a phone's width and pushed every
   figure off the side. In a post the row head may wrap on a phone, and a
   table of up to three columns drops its 460px floor so it fits the screen.
   A table of four columns keeps the floor and scrolls sideways as before. */
@media (max-width:620px){
  .cs-body .ct-t tbody th{white-space:normal;min-width:7.5em}
  .cs-body .ct-t:not(:has(thead th:nth-child(4))){min-width:0}
}
/* A table that still scrolls sideways fades out at its right edge until it
   has been scrolled to the end, so a cut-off column reads as "more this way"
   and not as a broken layout. The fade is tied to the table's own scroll
   position (a scroll timeline). A table that fits has no scroll range, the
   timeline is idle and nothing is faded. A browser without scroll timelines
   shows the table as it did before. */
@property --cs-tw-fade{syntax:"<length>";inherits:false;initial-value:0px}
@keyframes cs-tw-fade{from{--cs-tw-fade:36px}to{--cs-tw-fade:0px}}
@supports (animation-timeline:scroll()){
  .cs-body .ct-tw{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--cs-tw-fade)),#0000);
    mask-image:linear-gradient(90deg,#000 calc(100% - var(--cs-tw-fade)),#0000);
    animation:cs-tw-fade linear both;animation-timeline:scroll(self inline);
  }
}

/* "All 11 posts" on the resources page was a 21px-tall target on a phone.
   The padding is taken back by the margin, so the row does not grow. */
@media (max-width:760px){
  .rsc-all{padding-block:10px;margin-block:-10px}
}

/* ── newsletter figures (2026-10-21, Issue #2): charts sit inside the reading
   column as images, and the "not this / this" opening pairs sit side by side. */
.nl-fig{margin:clamp(14px,2.2vh,22px) 0 clamp(22px,3.4vh,32px)}
.nl-fig img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--cs-l-line);background:#fff}
.nl-open{margin:clamp(22px,3.4vh,34px) 0;padding:clamp(18px,2.2vw,26px);border-radius:16px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--cs-l-line)}
.nl-open .cs-h3{margin:0 0 14px;display:flex;gap:12px;align-items:baseline}
.nl-open-n{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:#6d28d9;color:#fff;font-size:14px;font-weight:700}
.nl-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px}
.nl-nums div{padding:12px 14px;border-radius:12px;background:#f4f1fa}
.nl-nums dt{font-size:clamp(20px,1.9vw,26px);font-weight:700;letter-spacing:-.02em;color:#6d28d9}
.nl-nums dd{margin:2px 0 0;font-size:13.5px;line-height:1.4;color:var(--cs-l-ink-3)}
.nl-pair{max-width:600px;margin-inline:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px clamp(12px,1.8vw,20px)}
.nl-pair figure{margin:0;display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}
.nl-pair-k{margin:0;font-size:13px;font-weight:650;letter-spacing:.02em}
.nl-pair .is-not .nl-pair-k{color:#b42318}
.nl-pair .is-do .nl-pair-k{color:#067647}
.nl-pair img{display:block;width:100%;height:auto;border-radius:12px}
.nl-pair figcaption{margin:0;font-size:13.5px;line-height:1.5;color:var(--cs-l-ink-3)}
.nl-pair figcaption a{display:block;margin-top:4px;color:#6d28d9;font-weight:600}
aside.nl-take{margin:clamp(30px,5vh,48px) 0}
@media (max-width:620px){
  .nl-nums{grid-template-columns:1fr}
  .nl-nums div{display:flex;gap:10px;align-items:baseline}
}

/* ── a chart as an issue's cover (2026-10-21, Issue #2): one landscape image,
   shown whole on white, not cropped like the portrait ad stills above. */
.bl-cover.is-chart{display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,1.6vw,22px);background:#fff;box-shadow:inset 0 0 0 1px var(--cs-l-line)}
.bl-cover.is-chart img,.cs-hero-in.has-cover>.bl-cover.is-chart img{width:100%;height:auto;max-height:100%;
  object-fit:contain;margin:0;border-radius:0;box-shadow:none;transform:none}
.is-lead .bl-cover.is-chart{padding:clamp(18px,2.2vw,30px)}
.cs-hero-in.has-cover>.bl-cover.is-chart{aspect-ratio:auto;align-self:center;
  padding:clamp(16px,1.8vw,24px);border-radius:18px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--cs-l-line),0 30px 64px -34px #17121f66}