/* ==========================================================================
   blog.css: THE BLOG POST STANDARD. Approved by Blossom 2026-10-13.

   Every post (blog/<slug>/index.html) and blog/_template.html loads this
   straight after /styles.css:

     <link rel="stylesheet" href="/styles.css">
     <link rel="stylesheet" href="/blog/blog.css">

   It holds everything a post shares: the hero, the TL;DR box, the reading
   column, headings, the rich inline type kit, pull quotes, numbered lists,
   the collage image cards, the author note, the reading list band (form +
   full share row), sources and read next.

   A post's own <style> block should only hold what is truly specific to
   that one piece (e.g. a full-bleed hero photo's crop and scrim, or a
   title-specific line-break lock). If you find yourself copying a rule from
   one post into another, it belongs here instead.

   Brand values, from not-live/style-guide.html (tokens live in styles.css):
     Violet #5533FF  Magenta #E8255A  Plum #542C7B  Hot Pink #FF3399
     Sky #7BC4E8     Teal #00A8A8     Cream #F2F0EB Black #131018
   No new colours, no new typefaces. Radius 2px. Shadows hard offset.

   SECTION ACCENT ROTATION. Each h2 section sets --accent on its
   .article-part, in this order, and loops: Violet, Teal, Magenta, Plum,
   Hot Pink. The heading bar, a numbered list and its watermark all pick it
   up. Lists need --accent-ink too: Cream on Violet/Magenta/Plum, Black on
   Teal/Hot Pink/Sky.
   ========================================================================== */


/* ---------- 1. THE READING COLUMN ----------------------------------------
   640px of text on a laptop (about 66 characters), full width minus the
   6vw gutters on a phone. .wrap-narrow pads 6vw a side, so the cap adds the
   gutters back on. Every .wrap-narrow on a post (article, author note,
   reading list, sources, read next) shares the same left edge. */
.wrap-narrow { max-width: calc(640px + 12vw); }


/* ---------- 2. THE HERO ---------------------------------------------------
   Plum gradient base, up to 640px tall so the TL;DR peeks in on a laptop.
   Two image options:
     A. framed tilted picture on the right (.hero-frame), shown below
     B. full-bleed photo (.page-hero-fullbleed + .page-hero-photo-bleed from
        styles.css). The crop and scrim are tuned per photo, so they live in
        that post's own <style> block.
   The giant outline word (.giant-word.giant-word-hero) is optional. */
.article-hero {
  min-height: clamp(26rem, 64vh, 40rem);
  padding: 6.5rem 0 3.75rem;
  background: var(--jewel-2);
}
.article-hero .wrap { position: relative; z-index: 3; width: 100%; max-width: none; margin: 0; }
.article-hero-copy { max-width: min(40rem, 41vw); }
.article-hero .kicker { color: var(--sky); }

/* title: 48px laptop, 28px phone, Cream. One Magenta mark at most, the
   handwritten script is optional. */
.article-hero h1 {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.14;   /* clearance for the .mark and .script runs */
  max-width: 13em;
  color: var(--cream);
}
/* split-type forces inline-block on nested elements while it measures,
   which turns a wrapping mark into one big box. !important beats its
   inline style. */
.article-hero h1 .mark { display: inline !important; }
.article-hero h1 .mark.thick { padding: 0.2em 0.45em; margin: 0 0.02em; }
.article-hero h1 .script { font-size: 1.06em; line-height: 1; margin-right: 0.12em; }

/* subtitle line: 19px laptop, 17px phone */
.article-standfirst {
  margin-top: 1.5rem;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(242, 240, 235, 0.9);
}

/* byline: always two stacked rows. Name / date, then read time / topic. */
.article-byline {
  margin-top: 1.7rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-width: 34rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(242, 240, 235, 0.75);
}
.article-byline .article-byline-name { color: var(--cream); font-weight: 700; }
.byline-row { display: flex; flex-wrap: wrap; row-gap: 0.3rem; }
.byline-row > * { white-space: nowrap; }
.byline-row > * + *::before {
  content: '/';
  display: inline-block;
  margin: 0 0.9rem;
  letter-spacing: 0;
  color: rgba(242, 240, 235, 0.3);
}

/* default scrim: a light top and foot shade over the gradient, so the nav
   and byline always sit on dark. Photo heroes override it per post. */
.article-hero-scrim {
  background:
    linear-gradient(180deg, rgba(19,16,24,0.55) 0%, rgba(19,16,24,0) 26%),
    linear-gradient(180deg, rgba(19,16,24,0) 62%, rgba(19,16,24,0.5) 100%);
}

/* --- option A: the framed tilted picture. Laptop: shown whole on the right,
   never cropped, never under the scrim, hard Magenta offset shadow. Phone:
   a band above the title. --- */
.hero-frame {
  position: absolute;
  z-index: 2;
  right: clamp(1.5rem, 4.5vw, 5rem);
  top: 50%;
  width: min(45vw, 58rem);
  margin: 0;
  transform: translateY(-46%) rotate(2deg);
}
.hero-frame-img {
  background: #fff;
  border: 3px solid var(--cream);
  box-shadow: 14px 14px 0 var(--magenta);
  line-height: 0;
}
.hero-frame-img img { display: block; width: 100%; height: auto; }
.hero-frame-credit {
  margin-top: 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(242, 240, 235, 0.72);
}
.hero-frame-credit a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.hero-frame-credit a:hover,
.hero-frame-credit a:focus-visible { color: var(--magenta); }

/* optional giant outline word, bleeding off the foot of the hero */
.giant-word-hero {
  top: auto;
  bottom: -0.36em;
  z-index: 2;
  font-size: clamp(7rem, 31vw, 27rem);
  -webkit-text-stroke: 2px rgba(242, 240, 235, 0.2);
}

@media (max-width: 900px) {
  .article-hero { min-height: 0; padding: 6.2rem 0 2.6rem; justify-content: flex-start; }
  .article-hero .wrap { padding-left: 5vw; padding-right: 5vw; }
  .article-hero-copy { max-width: none; width: 100%; }
  .article-hero h1 { max-width: none; }
  .article-standfirst,
  .article-byline { max-width: none; }
  .article-byline { font-size: 0.72rem; color: rgba(242, 240, 235, 0.86); }
  .article-hero .kicker,
  .article-hero h1,
  .article-standfirst,
  .article-byline { text-shadow: 0 1px 2px rgba(19,16,24,0.9), 0 0 16px rgba(19,16,24,0.75); }
  .article-hero h1 .mark { text-shadow: none; }

  .hero-frame {
    position: relative; z-index: 3; top: auto; right: auto;
    width: calc(100% - 10vw); margin: 0 auto 2rem;
    transform: rotate(-1.2deg);
  }
  .hero-frame-img { box-shadow: 8px 8px 0 var(--magenta); border-width: 2px; }
  .hero-frame-credit { margin-top: 1.1rem; font-size: 0.68rem; }
  .article-hero:not(.has-photo) .article-hero-scrim { background: none; }
  .giant-word-hero { top: auto; bottom: -0.1em; font-size: 40vw; -webkit-text-stroke: 1.5px rgba(242, 240, 235, 0.32); }
}
@media (max-width: 380px) {
  .article-byline { letter-spacing: 0.05em; }
  .byline-row > * + *::before { margin: 0 0.5rem; }
}

/* GLITCH ON PHONES. The continuous chromatic jitter on a title mark put
   Sky and Magenta fringes on every letter, which made the words hard to
   read on a small screen. There is no hover on a phone, so on phones the
   marks sit still and clean. Laptop keeps the glitch exactly as before. */
@media (max-width: 900px) {
  .article-hero .glitch-hover.is-glitching,
  .article-peak .glitch-hover.is-glitching {
    animation: none;
    text-shadow: none;
    transform: none;
  }
}


/* ---------- 3. TL;DR -------------------------------------------------------
   One summary, above the article, wider than the reading column on purpose
   (.wrap against .wrap-narrow) so it reads as a different kind of object.
   Every point opens with a short bold lead-in: <li><strong>...</strong> rest</li>.
   3 to 5 points. Two .btn-ghost next steps under a hairline rule. */
.article-tldr-band { padding-top: clamp(2.4rem, 6vh, 3.6rem); padding-bottom: clamp(2.4rem, 6vh, 3.6rem); }
.tldr-wrap { padding-left: clamp(1.4rem, 4vw, 3rem); padding-right: clamp(1.4rem, 4vw, 3rem); }
.article-summary { border-left: 4px solid var(--violet); border-radius: 2px; }
.article-tldr {
  border-left-color: var(--magenta);
  background: rgba(232, 37, 90, 0.05);
  padding: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.5rem, 2.6vw, 2.2rem) clamp(1.3rem, 2.4vw, 2rem);
}
/* Plum, not Magenta: Magenta text measured 3.55:1 on this tint */
.article-tldr .kicker { color: var(--plum); margin-bottom: 0.9rem; }
.tldr-list { list-style: none; }
.tldr-list li {
  position: relative;
  padding-left: 1.5rem;
  max-width: 78ch;
  font-size: 1.02rem;
  line-height: 1.55;
  font-weight: 300;
  color: rgba(19, 16, 24, 0.84);
}
.tldr-list li + li { margin-top: 0.8rem; }
.tldr-list strong { font-weight: 600; color: var(--black); }
.tldr-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.7rem; height: 2px; background: var(--magenta); }
.tldr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 0.8rem;
  margin-top: 1.7rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(19, 16, 24, 0.13);
}
.tldr-actions .btn { margin-top: 0; font-size: 0.76rem; letter-spacing: 0.05em; padding: 0.82rem 1.45rem; gap: 0.6rem; }
.tldr-actions .btn-ghost { box-shadow: none !important; }
.tldr-actions .btn:hover { border-color: var(--violet); }
@media (max-width: 700px) {
  .tldr-wrap { max-width: 760px; padding-left: 6vw; padding-right: 6vw; }
  .article-tldr-band { padding-top: 1.7rem; padding-bottom: 1.7rem; }
  .article-tldr { padding: 1.3rem 1.2rem 1.3rem 1.1rem; }
  .article-tldr .kicker { margin-bottom: 0.7rem; }
  .tldr-list li { font-size: 16px; line-height: 1.5; }
  .tldr-list li + li { margin-top: 0.6rem; }
  .tldr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin-top: 1.1rem; padding-top: 0.95rem; align-items: stretch; }
  .tldr-actions .btn { width: 100%; justify-content: center; text-align: center; padding: 0.66rem 0.45rem; font-size: 0.66rem; letter-spacing: 0.04em; gap: 0.4rem; line-height: 1.25; flex-wrap: nowrap; }
  .tldr-actions .btn > span:first-child { min-width: 0; }
  .tldr-actions .btn .arrow { flex: 0 0 auto; }
}


/* ---------- 4. BODY TEXT ---------------------------------------------------
   19px laptop, 18px phone, light weight, Black at 85%, line spacing 1.7.
   The double class beats styles.css's .prose p (Black at 72%). */
#article-start { scroll-margin-top: 5rem; }
.article-part { padding: clamp(2.2rem, 5vh, 3.4rem) 0; }
.article-part .article-prose > h2:first-child { margin-top: 0; }
.article-part .article-prose > *:last-child { margin-bottom: 0; }
.article-prose.prose p,
.article-prose.prose li {
  max-width: 68ch;
  font-size: 1.1875rem;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(19, 16, 24, 0.85);
}
.article-prose .article-ol + p { margin-top: 1.8rem; }
/* breathing room after a numbered list (the list sits in a .list-block) */
.article-prose .list-block + p:not(.article-closing-line) { margin-top: 1.8rem; }
@media (max-width: 700px) {
  .article-prose.prose p,
  .article-prose.prose li { font-size: 18px; line-height: 1.68; }
}

/* a bigger opening line: the first paragraph after the peak, or a long
   line that would be a wall as a pull quote */
.article-prose.prose p.article-lede,
.article-prose.prose p.article-peak-lede {
  font-size: clamp(1.18rem, 2.3vw, 1.38rem);
  line-height: 1.5;
  font-weight: 400;
  color: rgba(19, 16, 24, 0.9);
  max-width: none;
}
@media (max-width: 700px) {
  .article-prose.prose p.article-lede,
  .article-prose.prose p.article-peak-lede { font-size: 19px; }
}

/* THE OPENING LEDE. The article's first paragraph, automatically: one
   step larger, a touch heavier and darker than body text, so the piece has
   a clear way in. Subtle, not a pull quote. 22px laptop, 20px phone. */
#article-start .article-prose.prose > p:first-of-type {
  font-size: 1.375rem;
  line-height: 1.55;
  font-weight: 400;
  color: rgba(19, 16, 24, 0.92);
}
@media (max-width: 700px) {
  #article-start .article-prose.prose > p:first-of-type { font-size: 20px; }
}

/* a whole spoken line in the handwritten script (e.g. what people say back
   to her). Larger than body and loosely leaded so Permanent Marker stays
   readable over several lines. <p class="script-line"> */
.article-prose.prose p.script-line {
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--magenta);
  transform: rotate(-1deg);
  margin-top: 1.8rem;
  margin-bottom: 1.8rem;
}
@media (max-width: 700px) {
  .article-prose.prose p.script-line { font-size: 1.3rem; line-height: 1.5; }
}

/* the quiet in-article line (e.g. "If that paragraph just described your
   own business...") */
.article-aside {
  margin: 2.6rem 0;
  padding: 1.15rem 0 1.15rem 1.4rem;
  border-left: 2px solid var(--magenta);
  max-width: 68ch;
}
.article-aside p {
  font-size: 0.99rem !important;
  line-height: 1.6;
  color: rgba(19, 16, 24, 0.62) !important;
  font-style: italic;
  margin: 0;
}
.article-aside a { color: var(--magenta); border-bottom-color: rgba(232, 37, 90, 0.4); }
.article-aside a:hover { background: rgba(232, 37, 90, 0.08); border-bottom-color: var(--magenta); }

/* a button inside the prose */
.article-cta { margin-top: 2rem; }
.article-prose .article-cta .btn { border-bottom: 0; }


/* ---------- 5. HEADINGS ----------------------------------------------------
   h2: 34px laptop / 23px phone (size from styles.css), short bar above in
   the section's --accent. h3: one subhead style, 21px / 18px, coloured dash. */
.article-prose h2 { line-height: 1.24; }
.article-prose h2::before { background: var(--accent, var(--violet)); }
.article-prose h2 .mark { padding: 0.16em 0.42em; margin: 0 0.04em; }
.article-h3 {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 2.6rem 0 0.2rem;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.article-h3::before { content: ''; flex: 0 0 auto; width: 1.6rem; height: 4px; background: var(--accent, var(--violet)); }
@media (max-width: 700px) {
  .article-prose h2 .mark { padding: 0.14em 0.34em; margin: 0 0.02em; }
}


/* ---------- 6. RICH INLINE TYPE KIT ---------------------------------------
   The mix the love letter is known for. All of it goes on HER words, never
   added words. The test: did she put stress there first (capitals, swearing,
   italics, a repeated phrase, a short turn line)?

     <strong>SUCK</strong>                         bold, for her shouted words
     <em>lifelong</em>                             italics, her own stress
     <strong class="mark is-magenta">...</strong>  Magenta highlighter swipe.
                                                   About once in the body.
                                                   Also .is-sky, .is-pink,
                                                   .is-coral (renders Violet).
     <strong class="underline-accent">...</strong> Violet bar that draws in on
                                                   scroll. For turn lines and
                                                   punchlines. 3 to 5 a post.
     <em class="script">lifelong</em>              Permanent Marker, Magenta.
                                                   Two or three a post,
                                                   headings first.
     <span class="glitch-hover is-glitching">      chromatic glitch, only on
                                                   words about the broken old
                                                   way. Headings only.

   HEADINGS. Every h2 carries one device so it stands out: a script word,
   a magenta .mark on a phrase, or a giant outline word behind its band.
   Use the dark full-width .article-peak band for the one heading the piece
   turns on. Leave a heading plain only where the section is sober.

   LEAD-IN LINES. A line that introduces a block ("Here's what I heard:",
   "So here's the actual research data on all this:", a question that opens
   a worked example) is an <h3 class="article-h3">, never a bold paragraph.
   A bold paragraph standing alone is a punch line and gets
   .underline-accent; a very short shouted one gets .mark.

   Sober passages (suffering, statistics, hard feelings) get none of it.
   The base classes live in styles.css; the article-scoped tuning is here. */
.article-prose .script { font-style: normal; font-size: 1.18em; line-height: 1; color: var(--magenta); }
.article-prose h2 .script { font-size: 1.06em; }
.article-prose p .mark { margin: 0 0.04em; }
.article-prose strong { font-weight: 600; color: var(--black); }


/* ---------- 7. PULL QUOTES -------------------------------------------------
   One style. Full-width dark band, 54px laptop / 29px phone, capitals,
   Cream with a Magenta punchline in <strong>, three lines at most. Optional
   Sky line under it (.quote-tail). A longer line goes in the body as
   <p class="article-lede"> instead. A pull quote MOVES her line out of the
   prose; it never repeats it. */
.article-interstitial { position: relative; overflow: hidden; }
.article-interstitial > .wrap,
.article-peak > .wrap,
#reading-list > .wrap-narrow { position: relative; z-index: 1; }
.mesh-ambient { pointer-events: none; }
.article-interstitial .headline-statement { margin: 0 auto; }
.article-interstitial .headline-lead-in { color: var(--sky); }
/* a magenta run inside a pull quote, without the bold of <strong> */
.headline-statement .hl-magenta { color: var(--magenta); }
.quote-tail {
  display: block;
  margin-top: 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.5;
  color: var(--sky);
}

/* the hinge: a black band that carries the page's one glitch transition,
   with or without a pull quote in it */
.article-hinge {
  min-height: clamp(5rem, 13vh, 9rem);
  border-top: 2px solid rgba(232, 37, 90, 0.5);
  border-bottom: 2px solid rgba(232, 37, 90, 0.5);
  background: var(--black);
}
.article-hinge .glitch-transition { z-index: 0; }
.article-hinge.is-quiet { border-top-width: 1px; border-bottom-width: 1px; }
.article-hinge.is-quiet .glitch-transition { opacity: 0.55; }

/* the peak: the one heading that leaves the reading column */
.article-peak {
  position: relative;
  border-top: 6px solid var(--magenta);
  padding: clamp(3.4rem, 9vh, 6rem) 0 clamp(3.2rem, 8vh, 5.4rem);
}
.article-peak-h2 { font-size: var(--text-h2-lg); line-height: 1.22; max-width: none; margin: 0; }
.article-peak-h2::before { content: none; }
.article-peak-h2 .mark { padding: 0.18em 0.45em; }
.article-part-peak { padding-top: clamp(2.6rem, 6vh, 3.8rem); }
@media (max-width: 700px) {
  .article-peak-h2 .mark { padding: 0.14em 0.34em; margin: 0 0.02em; }
}

/* optional giant outline word behind a section of the reading column */
.has-giant { position: relative; }
.has-giant > .wrap-narrow,
.has-giant > .wrap { position: relative; z-index: 1; }
.giant-word-article {
  font-size: clamp(3.2rem, 13.5vw, 11.5rem);
  top: 0.1em;
  -webkit-text-stroke: 1.5px rgba(19, 16, 24, 0.085);
}


/* ---------- 8. NUMBERED LISTS ----------------------------------------------
   The love letter's style: a coloured number chip in the section's accent,
   and a big faded watermark numeral behind the list.

     <span class="list-watermark" aria-hidden="true" style="--accent: var(--violet);">01</span>
     <div class="list-block" style="--accent: var(--violet); --accent-ink: var(--cream);">
       <ol class="article-ol"> <li><strong>Point:</strong> detail</li> </ol>
     </div>

   The watermark goes straight before the list (as a child of
   .article-prose), so on a laptop it sits out to the right of the column
   instead of over the first point.

   The chip rules (.article-ol) live in styles.css. */
.list-block { position: relative; }
.list-block > ol { position: relative; z-index: 1; }
.list-watermark {
  position: absolute;
  top: -0.66em;
  right: -0.4rem;
  z-index: 0;
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 9rem;
  line-height: 1;
  color: var(--accent, var(--violet));
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
}
.list-block > .list-watermark { top: -0.45em; }
@media (max-width: 700px) {
  .list-watermark { font-size: 4.6rem; top: -0.62em; right: -0.1rem; }
  .list-block > .list-watermark { top: -0.4em; }
  /* a watermark placed straight under an h2 is positioned against the
     padded .wrap-narrow, so -0.1rem pushed it 2px past the screen edge and
     the whole page scrolled sideways. Pinned inside the edge instead. */
  .article-prose > .list-watermark { right: 0.25rem; }
}


/* ---------- 9. IMAGES AND COLLAGE CARDS ------------------------------------
   One look for every image: slight tilt, thin border, hard 8px offset
   shadow in a brand colour (6px on phones), caption underneath at 13px,
   links in Violet. Three reusable card sets, first built for Tell the Truth:

     .example-cards  > .example-card   mock UI "exhibits" with a big stat
     .finding-cards  > .finding-card   research findings as pinned notes.
                                       Add .is-wide to the one with teeth.
     .ad-cards       > .ad-card        real brand/marketing images, shown
                                       whole on a dotted poster ground

   They sit in a full-width band: <section class="blog-visual-band band-magenta">
   (or band-violet, or plain .tone-light) with a .wrap inside. */
.blog-visual-band { padding: clamp(2.8rem, 7vh, 4.6rem) 0; }
.band-magenta { background: rgba(232, 37, 90, 0.06); }
.band-violet  { background: rgba(85, 51, 255, 0.06); }
.band-teal    { background: rgba(0, 168, 168, 0.06); }
.blog-visual { margin: 0 auto; }
/* a card band can carry its own subhead above the cards and prose below
   them, so the heading, the cards and the follow-on lines read as one
   section */
.blog-visual-head { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.blog-visual-foot { margin-top: clamp(2.6rem, 5vw, 3.4rem); }
.blog-visual-cap {
  max-width: 62ch;
  margin: clamp(2rem, 4vw, 2.8rem) auto 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.55;
  font-weight: 400;
  color: rgba(19, 16, 24, 0.7);
}
.blog-visual-cap a { color: var(--violet); border-bottom: 1px solid rgba(85, 51, 255, 0.35); }
/* sticker tag: the site's .photo-tag, inside the frame so nothing hangs
   past a 375px gutter */
.card-tag { top: -0.85rem; left: 1rem; font-size: 0.72rem; padding: 0.35em 0.75em; }

/* --- example cards --- */
.example-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
.example-card {
  --acc: var(--violet);
  position: relative;
  background: var(--cream);
  border: 1.5px solid var(--black);
  border-radius: 2px;
  padding: 1.9rem 1.2rem 1.3rem;
  box-shadow: 8px 8px 0 0 var(--acc);
  transform: rotate(-1deg);
  min-width: 0;
}
.example-card:nth-child(2) { --acc: var(--plum); transform: rotate(0.8deg); margin-top: 1.2rem; }
.example-card:nth-child(3) { --acc: var(--magenta); transform: rotate(-0.5deg); }
.example-card .card-tag { background: var(--acc); }
.ex-dlg {
  background: var(--black);
  color: var(--cream);
  border-radius: 2px;
  padding: 1rem 0.95rem 1.05rem;
  min-height: 9.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.9rem;
}
.ex-dlg-q { font-family: 'League Spartan', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 0.92rem; line-height: 1.2; letter-spacing: 0.02em; margin: 0; }
.ex-dlg-row { display: flex; gap: 0.5rem; }
.ex-dlg-stack { display: flex; flex-direction: column; gap: 0.55rem; align-items: stretch; }
.ex-btn { display: block; text-align: center; font-family: 'League Spartan', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 2px; }
.ex-btn-eq { flex: 1; padding: 0.62rem 0.3rem; font-size: 0.78rem; background: transparent; color: var(--cream); border: 1px solid rgba(242, 240, 235, 0.6); }
.ex-btn-big { padding: 0.8rem 0.5rem; font-size: 0.84rem; background: var(--cream); color: var(--black); box-shadow: 4px 4px 0 0 var(--magenta); }
.ex-link-tiny { text-align: center; font-size: 0.66rem; color: rgba(242, 240, 235, 0.72); text-decoration: underline; }
.ex-link-guilt { text-align: center; font-size: 0.72rem; line-height: 1.3; color: rgba(242, 240, 235, 0.78); text-decoration: underline; }
.ex-stat { margin-top: 1.15rem; }
.ex-stat-num { display: block; font-family: 'League Spartan', sans-serif; font-weight: 900; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 0.9; letter-spacing: -0.02em; color: var(--acc); }
.ex-stat-label { display: block; margin-top: 0.35rem; font-family: 'League Spartan', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.16em; color: var(--black); }
.ex-bar { margin-top: 0.75rem; height: 14px; border: 1.5px solid var(--black); border-radius: 2px; background: transparent; overflow: hidden; }
.ex-bar span { display: block; height: 100%; background: var(--acc); }

/* --- finding cards (the social experiment notes) --- */
.finding-cards { list-style: none; counter-reset: fnd; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem); }
.finding-card {
  --acc: var(--violet);
  counter-increment: fnd;
  position: relative;
  background: var(--cream);
  border: 1.5px solid var(--black);
  border-radius: 2px;
  padding: 1.6rem 1.4rem 1.2rem;
  box-shadow: 8px 8px 0 0 var(--acc);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow: hidden;
  min-width: 0;
}
.finding-card::after {
  content: counter(fnd, decimal-leading-zero);
  position: absolute;
  top: -0.12em;
  right: 0.1em;
  font-family: 'League Spartan', sans-serif;
  font-weight: 900;
  font-size: 4.2rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--acc);
  opacity: 0.45;
  pointer-events: none;
}
.finding-card > * { position: relative; z-index: 1; }
.finding-card:nth-child(4n+1) { --acc: var(--violet); transform: rotate(-0.6deg); }
.finding-card:nth-child(4n+2) { --acc: var(--teal); transform: rotate(0.5deg); }
.finding-card:nth-child(4n+3) { --acc: var(--plum); transform: rotate(0.4deg); }
.finding-card:nth-child(4n+4) { --acc: var(--hotpink); transform: rotate(-0.5deg); }
.finding-big { font-family: 'League Spartan', sans-serif; font-weight: 700; font-size: clamp(1.12rem, 1.8vw, 1.32rem); line-height: 1.25; color: var(--black); margin: 0; padding-right: 3.8rem; overflow-wrap: anywhere; }
.finding-small { font-size: 0.96rem; line-height: 1.58; font-weight: 300; color: rgba(19, 16, 24, 0.84); margin: 0; }
.finding-src { margin: auto 0 0; padding-top: 0.7rem; border-top: 1px dashed rgba(19, 16, 24, 0.25); font-size: 0.76rem; line-height: 1.4; color: rgba(19, 16, 24, 0.7); }
.finding-src a { color: var(--violet); border-bottom: 1px solid rgba(85, 51, 255, 0.35); }
/* the finding with teeth: full width, black */
.finding-card.is-wide {
  --acc: var(--magenta);
  grid-column: 1 / -1;
  background: var(--black);
  border-color: var(--black);
  transform: rotate(-0.3deg);
}
.finding-card.is-wide .finding-big { color: var(--cream); font-size: clamp(1.4rem, 2.6vw, 1.9rem); text-transform: uppercase; }
.finding-card.is-wide .finding-small { color: rgba(242, 240, 235, 0.84); max-width: 70ch; }
.finding-card.is-wide .finding-src { color: rgba(242, 240, 235, 0.7); border-top-color: rgba(242, 240, 235, 0.25); }
.finding-card.is-wide .finding-src a { color: var(--sky); border-bottom-color: rgba(123, 196, 232, 0.4); }
.finding-card.is-wide::after { opacity: 0.6; }
/* .no-numbers: drop the faded outline numerals when the findings are not a
   sequence */
.finding-cards.no-numbers .finding-card::after { content: none; }
.finding-cards.no-numbers .finding-big { padding-right: 0; }

/* --- ad cards (real brand and marketing images) --- */
.ad-cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.4vw, 2.8rem) clamp(1.4rem, 2.6vw, 2rem); }
.ad-card { --acc: var(--teal); display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.ad-card-fig { margin: 0; }
.ad-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 8px 8px 0 0 var(--acc);
  transform: rotate(-1deg);
}
.ad-card:nth-child(even) .ad-card-img { transform: rotate(0.9deg); }
.ad-card:nth-child(3n) .ad-card-img { transform: rotate(-0.4deg); }
.ad-card:nth-child(6n+1) { --acc: var(--teal); }
.ad-card:nth-child(6n+2) { --acc: var(--magenta); }
.ad-card:nth-child(6n+3) { --acc: var(--sky); }
.ad-card:nth-child(6n+4) { --acc: var(--hotpink); }
.ad-card:nth-child(6n+5) { --acc: var(--violet); }
.ad-card:nth-child(6n+6) { --acc: var(--teal); }
.ad-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* real images are shown whole (contain), mounted on a brand-colour poster
   ground like a pasted-in clipping, so wide, tall and square images all sit
   in the same 4:3 frame without losing any of their copy */
.ad-card-img.has-photo {
  --bg: var(--black);
  background:
    radial-gradient(rgba(242, 240, 235, 0.13) 1px, transparent 1.4px) 0 0 / 7px 7px,
    var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 2vw, 1.1rem);
}
.ad-card:nth-child(6n+2) .ad-card-img.has-photo { --bg: var(--plum); }
.ad-card:nth-child(6n+3) .ad-card-img.has-photo { --bg: var(--violet); }
.ad-card:nth-child(6n+5) .ad-card-img.has-photo { --bg: var(--magenta); }
.ad-card:nth-child(6n+6) .ad-card-img.has-photo { --bg: var(--plum); }
.ad-card-img.has-photo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 1px;
  box-shadow: 4px 4px 0 0 rgba(19, 16, 24, 0.55);
}
.ad-card-fig figcaption { margin-top: 0.9rem; font-size: 0.8125rem; line-height: 1.45; color: rgba(19, 16, 24, 0.7); }
.ad-card-fig figcaption a { color: var(--violet); border-bottom: 1px solid rgba(85, 51, 255, 0.35); }
.ad-card-text { margin: 0; font-size: 0.96rem; line-height: 1.55; font-weight: 300; color: rgba(19, 16, 24, 0.88); }

@media (max-width: 899px) { .ad-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .example-cards { grid-template-columns: 1fr; gap: 2.4rem; max-width: 26rem; margin: 0 auto; }
  .example-card:nth-child(2) { margin-top: 0; }
  .ex-dlg { min-height: 0; }
  .finding-cards { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .example-card,
  .finding-card,
  .ad-card-img { box-shadow: 6px 6px 0 0 var(--acc); }
  .finding-card::after { font-size: 3.4rem; }
  .finding-big { padding-right: 3rem; }
}
@media (max-width: 559px) { .ad-cards { grid-template-columns: 1fr; } }


/* ---------- 10. AUTHOR NOTE ("Who wrote this") -----------------------------
   The love letter's version: Teal rule, square photo with a Teal offset
   shadow and a sticker tag, 16px bio, two Instagram links with icons. */
.author-note { display: grid; grid-template-columns: 4px 9.5rem 1fr; gap: 1.8rem; align-items: start; }
.author-note .author-note-rule { background: var(--teal); align-self: stretch; border-radius: 2px; }
.author-note p { font-size: 1rem; line-height: 1.7; font-weight: 300; color: rgba(19, 16, 24, 0.75); max-width: 62ch; }
.author-note p + p { margin-top: 0.9rem; }
.author-note a { color: var(--violet); border-bottom: 1px solid rgba(85, 51, 255, 0.35); }
.author-photo { position: relative; display: block; margin-top: 0.35rem; }
.author-photo img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%;
  display: block; border-radius: 2px; filter: contrast(1.06) saturate(1.05);
  box-shadow: 10px 10px 0 0 var(--teal); transform: rotate(var(--collage-tilt));
}
.author-photo .photo-tag { bottom: 0.6rem; left: 0.6rem; font-size: 0.66rem; padding: 0.3em 0.6em; background: var(--teal); color: var(--black); }
.author-social { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.1rem; }
.author-note a.author-social-link,
.author-social-link {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0;
  font-family: 'League Spartan', sans-serif; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.02em;
  color: var(--violet); border-bottom: 1px solid rgba(85, 51, 255, 0.35);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.author-social-link:hover,
.author-social-link:focus-visible { color: var(--magenta); border-bottom-color: var(--magenta); }
.author-social-link svg { flex: 0 0 auto; }
@media (max-width: 560px) {
  .author-note { grid-template-columns: 1fr; gap: 1.2rem; }
  .author-note .author-note-rule { height: 4px; }
  .author-photo { width: 9.5rem; }
}
@media (max-width: 700px) {
  .author-photo img { box-shadow: 6px 6px 0 0 var(--teal); }
}


/* ---------- 11. THE READING LIST BAND --------------------------------------
   Every post closes on the one Black band: the reading list signup form
   (POSTs firstName + email, leadMagnet 'reading-list', to /api/subscribe,
   same as /blog), then the full share row. */
#reading-list .section-head h2 {
  max-width: none;
  font-size: min(var(--text-h2), calc((min(640px + 12vw, 100vw) - 12vw) / 11.9));
}
.tone-black .lede strong { color: var(--cream); }
.capture-form { margin-top: 2.4rem; }
.capture-form .form-row { margin-bottom: 1rem; }
.capture-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.capture-row input { flex: 1 1 15rem; min-width: 0; }
.capture-row .btn { margin-top: 0; flex: 0 0 auto; }
.doorways { margin-top: 1.9rem; border: 0; padding: 0; min-width: 0; }
.doorways legend {
  font-size: var(--text-kicker);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--magenta);
  margin-bottom: 1rem;
}
.doorways .doorway-opts { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.doorways label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line-on-dark);
  border-radius: 2px;
  font-size: 0.92rem;
  font-weight: 300;
  color: rgba(242, 240, 235, 0.8);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.doorways input { position: absolute; opacity: 0; width: 0; height: 0; }
.doorways label:hover { border-color: rgba(242, 240, 235, 0.45); color: var(--cream); }
.doorways label:has(input:checked) { background: var(--magenta); border-color: var(--magenta); color: var(--cream); }
.doorways label:focus-within { outline: 2px solid var(--sky); outline-offset: 3px; }
.doorway-hint { margin-top: 0.7rem; font-size: 0.88rem; font-weight: 300; color: rgba(242, 240, 235, 0.6); }
.tone-black .form-row label { color: var(--magenta); }
.tone-black .form-row input,
.tone-black .form-row textarea {
  background: rgba(242, 240, 235, 0.06);
  border-color: var(--line-on-dark);
  color: var(--cream);
}
.tone-black .form-row input::placeholder,
.tone-black .form-row textarea::placeholder { color: rgba(242, 240, 235, 0.45); }
.tone-black .form-note { color: rgba(242, 240, 235, 0.55); }
.form-status { display: none; margin-top: 0.8rem; font-size: 0.95rem; }
.form-status.is-visible { display: block; }
.form-status.error { color: var(--hotpink); }
@media (max-width: 700px) {
  .capture-row .btn { width: 100%; justify-content: center; }
  .doorways label { width: 100%; }
}


/* ---------- 12. SOURCES ----------------------------------------------------
   Always called "Sources". 14px, Black at 74%, short Magenta bars, Violet
   links, thin line above. */
.article-sources { border-top: 1px solid var(--line); padding-top: 2.4rem; }
.article-sources ul { list-style: none; margin-top: 1.4rem; }
.article-sources li {
  position: relative;
  padding-left: 1.3rem;
  max-width: 68ch;
  font-size: 0.875rem;
  line-height: 1.55;
  font-weight: 300;
  color: rgba(19, 16, 24, 0.74);
}
.article-sources li + li { margin-top: 0.9rem; }
.article-sources li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 0.6rem; height: 2px; background: var(--magenta); }
.article-sources strong { font-weight: 600; color: rgba(19, 16, 24, 0.88); }
.article-sources a { color: var(--violet); border-bottom: 1px solid rgba(85, 51, 255, 0.35); overflow-wrap: anywhere; }


/* ---------- 13. READ NEXT ---------------------------------------------------
   .blog-card / .read-next-grid live in styles.css. The cards tumble in with
   a rotate; clip so a mid-animation card never adds sideways scroll. */
.read-next { overflow-x: clip; }