/* Insights: the /resources/ listing and every article under /resources/<slug>/. One dark section carries the page,
   followed by the shared contact and footer. Linked on pages that declare <!--@group:insights-->.
   The menu calls this section "Insights"; the home page section is "Claims Gate News".

   ---------------------------------------------------------------------------------------------------------------
   PORTING AN ARTICLE (pages/resources/2023-trinity/base.html is the reference: copy it, then change only these)
   ---------------------------------------------------------------------------------------------------------------
   Start from the live page: curl -s https://www.claimsgate.co.uk/resources/<slug>/ and download any /_astro/ images it
   references that are missing locally into /_astro/ (the figures of all 11 stories are already there). Keep every word
   and image of the story; change nothing in it except straight apostrophes in the title (’) and obvious typos, and
   use the title exactly as the story's card on /resources/ shows it (new-uk-law-firm: "its 2nd", not "it's 2nd").
   Keep everything outside the two marked blocks as it is, including the module <script> after </html> (the live
   site's shared reveal script; its hash is in the page's content-security-policy).

   <head>
     <title>, og:title, twitter:title      "<Title> | Claims Gate" (a pipe, never the live page's em dash)
     description, og:/twitter:description  the live meta description
     canonical, og:url                     https://www.claimsgate.co.uk/resources/<slug>/
     article:published_time                the live page's value (the only place the live site keeps the date)
     JSON-LD                               BreadcrumbList item 3 = the title; Article headline, description,
                                           datePublished, image (the hero's src as an absolute URL, or og/default.png
                                           when there is none) and mainEntityOfPage
   <main> between the "ARTICLE: start" and "ARTICLE: end" comments
     .ins-k        kicker: <span>Kind</span> then, when the live banner names a firm, <span class="ins-k__firm">Firm</span>
                   Kind is the live listing's type: News, Case study, Research or Product
     .ins-art__h   the live H1
     .ins-art__lede the live <p class="lede"> (it moves out of the body into the header)
     .ins-art__by  <time datetime="YYYY-MM-DD">D Month YYYY</time> from article:published_time
     .ins-art__hero the live <img class="article__fig"> with its alt, width, height and srcset (640/960/1440w),
                   sizes="(min-width: 960px) 54rem, calc(100vw - 2.5rem)", loading="eager" fetchpriority="high".
                   The <figure> has no "rv" class: the hero often starts near the bottom of the first screen, where
                   the reveal would never fire, so it must show at once. No figure on the live page
                   (e.g. marketing-messages): leave the <figure> out; the body follows the byline.
     .ins-prose    the rest of the live .article__body, as it is: <p>, <a>, <strong>, <ul>/<ol> with <li>,
                   <blockquote><p>..</p></blockquote>, <h2>/<h3>, <img>/<figure>. Drop the lede and the first figure
                   (now in the header). Where a quote's attribution follows it after a dash ("Quote. — Name, Role"),
                   move it into <blockquote><p>Quote.</p><footer>Name, Role</footer></blockquote> (no em dashes here).
                   The last paragraph ends with the brand's blue dot (CSS); nothing to add.
   "More insights" (between the MORE comment and </nav>): the three newest stories other than this one, in the order
     of /resources/. So every article shows Stewarts, Mishcon de Reya and Slater & Gordon, except those three, where the
     fourth newest (inefficient-client-onboarding) fills the gap. Copy each <li> from pages/resources/base.html (the
     lead story's card is in the trinity page's block) and set sizes="(min-width: 900px) 28vw, (min-width: 560px) 13rem, 7.5rem".

   ---------------------------------------------------------------------------------------------------------------
   MARKUP
   ---------------------------------------------------------------------------------------------------------------
   Listing (pages/resources/base.html)
   <section class="ins"><div class="wrap ins__in">
     <header class="ins-head">  eyebrow .ins-k "Insights", H1 .ins-head__h, one line .ins-head__p
     <article class="ins-card ins-card--lead">   the newest story, large: image left, text right (stacked on phones);
                                                 adds the lede (.ins-card__p) and "Read the story"; its date is
                                                 "D Mon YYYY" like every other card
     <section class="ins-arch">  .ins-bar (h2 "Archive" + count), .ins-filter (built by insights.js; hidden without JS),
                                 .ins-sr status line, then <ul class="ins-list ins-list--rows"> of every other story
   Article: <section class="ins ins--art"> then <article class="ins-art"> (breakout grid: text column 36rem, set by
     --ins-measure, about 68 characters a line; the hero 9rem wider each side, 54rem in all) and <nav class="ins-more">
     with <ul class="ins-list ins-list--cards">.

   A story card (the same markup in the archive and in "More insights"; the list decides the layout)
   <li data-kind="news|case-study|research|product"><article class="ins-card">
     <div class="ins-card__media" [style="--fx:18% 50%" to move the crop]><img .. alt="" loading="lazy"></div>
       (no image: <div class="ins-card__media ins-card__media--ph" aria-hidden="true"><span class="ins-ph__dot"></span></div>,
        a still field of small dots with the one blue dot at the bottom left; nothing in it moves)
     <div class="ins-card__body">
       <p class="ins-meta"><span class="ins-meta__k">Case study</span><span class="ins-meta__firm">Firm</span></p>
       <h3 class="ins-card__t"><a class="ins-card__a" href="/resources/<slug>/"><span class="ins-card__tl">Title</span></a></h3>
       <time class="ins-card__d" datetime="2023-07-19">19 Jul 2023</time>
       <span class="ins-card__go" aria-hidden="true">..arrow svg..</span>
     </div></article></li>
   The title link stretches over the whole card, so the card is one target and its name is the title alone.

   Layouts
   .ins-list--rows    image left, text right; two columns from 960px (the archive)
   .ins-list--cards   rows on phones and tablets, three cards with the image on top from 900px (More insights)
   [data-ins-stagger] children arrive one after another (insights.js); visible without JS and with reduced motion. */

body:has(.ins) { background: var(--void); }

.ins {
  --ins-ink: var(--paper);
  --ins-soft: #ffffffb8;
  --ins-body: #ffffffcc;
  --ins-mute: var(--mute-dark);
  --ins-line: #ffffff1c;
  --ins-light: #8fb4ff;
  --ins-ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
  isolation: isolate;
  background: var(--void);
  color: var(--ins-ink);
  padding-block: clamp(2rem, 3.6vw, 3.25rem) clamp(4rem, 7vw, 6rem);
}
/* The same quiet wash of brand blue from the top left as the company pages. */
.ins::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(72rem 44rem at 0% 0%, rgb(0 98 254 / .09), rgb(0 98 254 / .062) 22%, rgb(0 98 254 / .034) 45%, rgb(0 98 254 / .012) 70%, rgb(0 98 254 / 0));
}
.ins ::selection { background: var(--blue); color: #fff; }
.ins .ins-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Eyebrow: the page name (listing) or the story's kind and firm (article), behind the brand's dot. */
.ins-k {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem;
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  color: #ffffffa8;
}
.ins-k::before { content: ""; flex: none; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--ins-light); }
.ins-k__firm::before { content: "/"; margin-inline-end: .625rem; color: #ffffff4d; }

/* ---------- Listing head ---------- */
.ins-head { display: grid; gap: 1.5rem; }
.ins-head__h {
  margin-top: 1.5rem; max-width: 13ch;
  font-size: var(--step-display); font-weight: 300; line-height: 1; letter-spacing: -.045em;
  text-wrap: balance;
}
.ins-head__p {
  max-width: 34ch;
  font-size: var(--step-1); font-weight: 300; line-height: 1.5; color: var(--ins-soft);
  text-wrap: pretty;
}
/* The description sits under the headline (James, 15 Oct 2026: never beside it). */

/* ---------- Story card ---------- */
.ins-card { position: relative; min-width: 0; }
.ins-card__media {
  position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 4px;
  background: #161a20;
}
.ins-card__media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--fx, 50% 50%);
}
/* a veil so the bright artwork sits on the dark page; it lifts when the card is pointed at or focused */
.ins-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: var(--void); opacity: .16;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07);
  transition: opacity .5s var(--ins-ease);
}
/* a story without artwork: a still field of dots on a 10px grid (anchored to the bottom left), thinning out from the
   one blue dot that sits on it. Static and not circular, so it never reads as a loading state. */
.ins-card__media--ph {
  background: radial-gradient(120% 90% at 0% 0%, rgb(0 98 254 / .16), rgb(0 98 254 / 0) 60%), #12151a;
}
.ins-card__media--ph::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgb(143 180 255 / .28) 1px, transparent 1.6px);
  background-size: 10px 10px; background-position: 0 100%;
  -webkit-mask-image: radial-gradient(140% 150% at 15px calc(100% - 15px), #000 15%, rgb(0 0 0 / .35) 60%, transparent 95%);
          mask-image: radial-gradient(140% 150% at 15px calc(100% - 15px), #000 15%, rgb(0 0 0 / .35) 60%, transparent 95%);
}
.ins-ph__dot {
  position: absolute; left: 12px; bottom: 12px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 4px rgb(0 98 254 / .14);
}
.ins-card__media--ph::after { opacity: 0; }

.ins-card__body {
  min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  column-gap: .75rem; padding-top: 1rem;
}
.ins-meta { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; min-height: 2rem; margin: 0; }
.ins-meta__k {
  font-family: var(--mono); font-size: 11px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: #9dbcff; background: rgb(157 188 255 / .14); border-radius: 999px; padding: .25rem .6875rem;
}
.ins-meta__firm {
  font-size: .6875rem; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ins-mute); overflow-wrap: anywhere; transition: color .3s;
}
.ins-card__t {
  grid-column: 1 / -1; margin: .625rem 0 0; max-width: 40ch;
  font-size: 1.125rem; font-weight: 300; line-height: 1.4; letter-spacing: -.015em; color: var(--ins-ink);
  text-wrap: pretty;
}
.ins-card__a { color: inherit; text-decoration: none; }
.ins-card__a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ins-card__a:focus-visible { outline: none; }
.ins-card__a:focus-visible::after { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 6px; }
/* the headline's underline draws in from the left on hover and focus */
.ins-card__tl {
  background-image: linear-gradient(rgb(247 247 245 / .55), rgb(247 247 245 / .55));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size .55s var(--ins-ease);
}
.ins-card__d {
  grid-column: 1 / -1; display: block; margin-top: .75rem;
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ins-mute); font-variant-numeric: tabular-nums;
}
/* the way in: a quiet disc at rest, blue when the card is reached for */
.ins-card__go {
  grid-column: 2; grid-row: 1; justify-self: end;
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: rgb(255 255 255 / .08); color: var(--ins-ink);
  transition: background-color .35s, transform .45s var(--ins-ease);
}
.ins-card__go svg { opacity: .75; transition: opacity .25s, transform .45s var(--ins-ease); }

.ins-card:hover .ins-card__media::after, .ins-card:focus-within .ins-card__media::after { opacity: 0; }
.ins-card:hover .ins-card__tl, .ins-card:focus-within .ins-card__tl { background-size: 100% 1px; }
.ins-card:hover .ins-meta__firm, .ins-card:focus-within .ins-meta__firm { color: var(--ins-soft); }
.ins-card:hover .ins-card__go, .ins-card:focus-within .ins-card__go { background: var(--blue); }
.ins-card:hover .ins-card__go svg, .ins-card:focus-within .ins-card__go svg { opacity: 1; transform: translateX(2px); }
@media (prefers-reduced-motion: no-preference) {
  .ins-card__media img { transition: transform 1.2s var(--ins-ease); }
  .ins-card:hover .ins-card__media img, .ins-card:focus-within .ins-card__media img { transform: scale(1.04); }
}
@media (hover: none) { .ins-card__go svg { opacity: 1; } }

/* ---------- The newest story, large ---------- */
.ins-card--lead { margin-top: clamp(2.5rem, 5.5vw, 4.5rem); display: grid; gap: 0; }
.ins-card--lead .ins-card__body { padding-top: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.ins-card--lead .ins-card__t {
  margin-top: 1rem; max-width: 22ch;
  font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.625rem); line-height: 1.12; letter-spacing: -.03em;
  text-wrap: balance;
}
.ins-card__p {
  grid-column: 1 / -1; margin: 1.125rem 0 0; max-width: 46ch;
  font-size: var(--step-0); font-weight: 300; line-height: 1.6; color: var(--ins-soft);
  text-wrap: pretty;
}
.ins-card--lead .ins-card__d { margin-top: 1.5rem; }
.ins-card--lead .ins-card__go {
  grid-column: 1; grid-row: auto; justify-self: start;
  display: inline-flex; gap: .875rem; width: auto; height: auto; margin-top: 1.5rem; padding: 0; border-radius: 0;
  background: none; font-size: .9375rem; color: var(--ins-ink);
}
.ins-card__disc {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid #ffffff33; transition: background-color .3s, border-color .3s;
}
.ins-card--lead:hover .ins-card__go, .ins-card--lead:focus-within .ins-card__go { background: none; }
.ins-card--lead:hover .ins-card__disc, .ins-card--lead:focus-within .ins-card__disc { background: var(--blue); border-color: var(--blue); }
@media (width >= 960px) {
  .ins-card--lead { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 4.5vw, 4.5rem); align-items: center; }
  .ins-card--lead .ins-card__body { padding-top: 0; }
  .ins-card--lead .ins-card__go { margin-top: 2rem; }
}

/* ---------- Group bar: a label, then a count or a link (Archive, More insights) ---------- */
.ins-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.75rem;
  padding-bottom: .625rem; border-bottom: 1px solid var(--ins-line);
}
.ins-bar__h {
  font-family: var(--mono); font-size: var(--step--1); font-weight: 400; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ins-mute);
}
.ins-bar__n { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .08em; color: #ffffff59; font-variant-numeric: tabular-nums; }
.ins-bar__all {
  display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem;
  color: var(--ins-soft); font-size: .9375rem; letter-spacing: -.01em; text-decoration: none; transition: color .2s;
}
.ins-bar__disc {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid #ffffff33; color: var(--ins-ink); transition: background-color .3s, border-color .3s;
}
.ins-bar__disc svg { transition: transform .45s var(--ins-ease); }
.ins-bar__all:hover { color: var(--ins-ink); }
.ins-bar__all:hover .ins-bar__disc, .ins-bar__all:focus-visible .ins-bar__disc { background: var(--blue); border-color: var(--blue); }
.ins-bar__all:hover .ins-bar__disc svg { transform: translateX(2px); }
.ins-bar__all:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 999px; }

/* ---------- Archive ---------- */
.ins-arch { margin-top: clamp(4rem, 8vw, 6.5rem); }
.ins-filter { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1.25rem; padding-bottom: .5rem; }
.ins-filter[hidden] { display: none; }
.ins-chip {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 1rem;
  border: 1px solid #ffffff24; border-radius: 999px; background: transparent;
  color: var(--ins-soft); font: inherit; font-size: .875rem; letter-spacing: -.005em; line-height: 1; cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.ins-chip__n { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ins-mute); font-variant-numeric: tabular-nums; transition: color .2s; }
.ins-chip:hover { color: var(--ins-ink); border-color: #ffffff4d; }
.ins-chip[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--void); }
.ins-chip[aria-pressed="true"] .ins-chip__n { color: rgb(11 13 16 / .62); }
.ins-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (pointer: coarse) { .ins-chip { min-height: 2.75rem; } }

.ins-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.ins-list > li { min-width: 0; }
.ins-list > li[hidden] { display: none; }

/* Rows: image left, text right, a hairline under each (the archive, and More insights below 900px) */
.ins-list--rows { column-gap: clamp(2rem, 4.5vw, 4.5rem); }
.ins-list--rows > li { border-bottom: 1px solid var(--ins-line); }
.ins-list--rows .ins-card {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start;
  padding-block: 1.25rem;
}
.ins-list--rows .ins-card__body { padding-top: 0; }
.ins-list--rows .ins-card__t { margin-top: .5rem; font-size: 1rem; }
.ins-list--rows .ins-card__d { margin-top: .5rem; }
.ins-list--rows .ins-card__go { display: none; }
@media (width >= 560px) {
  .ins-list--rows .ins-card { grid-template-columns: 13rem minmax(0, 1fr); column-gap: 1.5rem; padding-block: 1.5rem; }
  .ins-list--rows .ins-card__t { margin-top: .75rem; font-size: 1.125rem; }
  .ins-list--rows .ins-card__d { margin-top: .875rem; }
  .ins-list--rows .ins-card__go { display: grid; }
}
@media (width >= 960px) {
  .ins-list--rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-list--rows .ins-card { grid-template-columns: 11rem minmax(0, 1fr); }
}
@media (width >= 1200px) { .ins-list--rows .ins-card { grid-template-columns: 13rem minmax(0, 1fr); } }

/* Cards: More insights. Rows below 900px, three cards with the image on top from 900px. */
@media (width < 900px) {
  .ins-list--cards > li { border-bottom: 1px solid var(--ins-line); }
  .ins-list--cards .ins-card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; padding-block: 1.25rem; }
  .ins-list--cards .ins-card__body { padding-top: 0; }
  .ins-list--cards .ins-card__t { margin-top: .5rem; font-size: 1rem; }
  .ins-list--cards .ins-card__d { margin-top: .5rem; }
  .ins-list--cards .ins-card__go { display: none; }
}
@media (560px <= width < 900px) {
  .ins-list--cards .ins-card { grid-template-columns: 13rem minmax(0, 1fr); column-gap: 1.5rem; padding-block: 1.5rem; }
  .ins-list--cards .ins-card__t { margin-top: .75rem; font-size: 1.125rem; }
  .ins-list--cards .ins-card__go { display: grid; }
}
@media (width >= 900px) {
  .ins-list--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2rem); padding-top: 1.75rem; }
}

/* ---------- Article ---------- */
/* A breakout grid centred in the page column: the story's text column is --ins-measure (36rem, about 68 characters a
   line of body text); the header runs on to the right (its left edge stays on the text's); the hero reaches 9rem past
   the text on both sides (54rem in all, which its sizes attribute assumes). */
.ins-art {
  --ins-measure: 36rem;
  display: grid;
  /* the text track is fixed at min(measure, 100%), so on a phone it takes the whole width and the side tracks fold to 0 */
  grid-template-columns: [full-start] minmax(0, 1fr) [wide-start] minmax(0, 9rem) [text-start] min(var(--ins-measure), 100%) [text-end] minmax(0, 9rem) [wide-end] minmax(0, 1fr) [full-end];
}
.ins-art > * { grid-column: text; min-width: 0; }
.ins-art > .ins-art__head { grid-column: text-start / wide-end; }
.ins-art > .ins-art__hero { grid-column: wide; }

.ins-crumb {
  justify-self: start; display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; margin: -.5rem 0 1.25rem;
  color: var(--ins-soft); font-size: .9375rem; text-decoration: none; transition: color .2s;
}
.ins-crumb__ar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #ffffff2e; transition: border-color .2s, background-color .2s; }
.ins-crumb__ar svg { transition: transform .45s var(--ins-ease); }
.ins-crumb:hover { color: var(--ins-ink); }
.ins-crumb:hover .ins-crumb__ar { border-color: #ffffff59; background: rgb(255 255 255 / .05); }
.ins-crumb:hover .ins-crumb__ar svg { transform: translateX(-2px); }
.ins-crumb:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 999px; }

.ins-art__head { display: grid; justify-items: start; }
.ins-art__h {
  margin-top: 1.5rem;
  font-size: clamp(2.125rem, 1.4rem + 2.5vw, 3.625rem); font-weight: 300; line-height: 1.04; letter-spacing: -.04em;
  text-wrap: balance;
}
.ins-art__lede {
  margin-top: 1.75rem; max-width: var(--ins-measure);
  font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem); font-weight: 300; line-height: 1.5; letter-spacing: -.012em;
  color: var(--ins-ink); text-wrap: pretty;
}
.ins-art__by {
  justify-self: stretch; max-width: var(--ins-measure); display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem 1rem;
  margin-top: 2rem; padding-block: 1rem; border-block: 1px solid var(--ins-line);
  font-size: .9375rem; color: var(--ins-soft);
}
.ins-art__byk { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--ins-mute); }

.ins-art__hero { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
/* the hero is never held back by the reveal (see the porting guide): a guard in case a port keeps the "rv" class */
.ins-art__hero.rv { opacity: 1; transform: none; transition: none; }
.ins-art__hero img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 40px 80px -40px rgb(0 0 0 / .7);
}
.ins-art__hero figcaption { margin-top: .875rem; font-size: .875rem; line-height: 1.5; color: var(--ins-mute); }

/* The story itself: about 68 characters a line (the --ins-measure column), quiet links, the brand's dots for bullets. */
.ins-prose {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: clamp(1.0625rem, 1rem + .22vw, 1.1875rem); font-weight: 300; line-height: 1.7; color: var(--ins-body);
  font-feature-settings: "kern", "liga";
}
.ins-prose > * { margin: 0; max-width: 68ch; }
.ins-prose > * + * { margin-top: 1.3em; }
.ins-prose p { text-wrap: pretty; }
/* the end of the story: the brand's blue dot after the last word */
.ins-prose > p:last-child::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: .5em; border-radius: 50%;
  background: var(--blue); vertical-align: .08em;
}
.ins-prose a {
  color: var(--ins-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: rgb(143 180 255 / .65); transition: text-decoration-color .2s, color .2s;
}
.ins-prose a:hover { text-decoration-color: var(--ins-ink); }
.ins-prose a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.ins-prose strong, .ins-prose b { font-weight: 500; color: var(--ins-ink); }
.ins-prose em, .ins-prose i { font-style: italic; }
.ins-prose h2 {
  margin-top: 2.4em;
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: 400; line-height: 1.25; letter-spacing: -.02em;
  color: var(--ins-ink); text-wrap: balance;
}
.ins-prose h3 { margin-top: 2em; font-size: 1.1875rem; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; color: var(--ins-ink); }
.ins-prose h2 + *, .ins-prose h3 + * { margin-top: .75em; }
.ins-prose ul, .ins-prose ol { list-style: none; padding: 0; display: grid; gap: .7em; }
.ins-prose li { position: relative; }
.ins-prose ul > li { padding-left: 1.625em; }
.ins-prose ul > li::before {
  content: ""; position: absolute; left: .25em; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ins-light);
}
.ins-prose ol { counter-reset: ins-ol; }
.ins-prose ol > li { counter-increment: ins-ol; padding-left: 2.75em; }
.ins-prose ol > li::before {
  content: counter(ins-ol, decimal-leading-zero);
  position: absolute; left: 0; top: .42em;
  font-family: var(--mono); font-size: .8125rem; line-height: 1.4; letter-spacing: .06em; color: var(--ins-light);
  font-variant-numeric: tabular-nums;
}
.ins-prose li > ul, .ins-prose li > ol { margin-top: .7em; }
.ins-prose blockquote {
  margin-block: 1.75em; padding: .125em 0 .125em 1.5em; border-left: 2px solid var(--blue);
  font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.4375rem); line-height: 1.5; letter-spacing: -.012em;
  color: var(--ins-ink);
}
.ins-prose blockquote > * + * { margin-top: .75em; }
.ins-prose blockquote footer, .ins-prose blockquote cite {
  display: block; margin-top: 1rem;
  font-family: var(--mono); font-size: var(--step--1); font-style: normal; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ins-mute);
}
.ins-prose > blockquote + * { margin-top: 0; }
.ins-prose img { display: block; max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px rgb(255 255 255 / .07); }
.ins-prose figure, .ins-prose > img { margin-block: 2.25em; }
.ins-prose figcaption { margin-top: .75rem; font-size: .875rem; line-height: 1.5; color: var(--ins-mute); }
.ins-prose hr { border: 0; height: 1px; background: var(--ins-line); margin-block: 2.5em; }
.ins-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.ins-prose th, .ins-prose td { padding: .625rem .75rem .625rem 0; border-bottom: 1px solid var(--ins-line); text-align: left; vertical-align: top; }
.ins-prose th { font-weight: 500; color: var(--ins-ink); }

/* More insights: under the story, the full page column */
.ins-more { margin-top: clamp(4.5rem, 9vw, 7.5rem); }

/* ---------- Arrival ---------- */
/* Children of [data-ins-stagger] rise in one after another once in view (insights.js adds .is-in). Without JS everything
   shows. If the script never runs, a fallback reveals the lists after 2.5s; insights.js marks <html> .ins-armed as soon
   as it runs, which retires the fallback, and a script that arrives late marks the lists .ins-static. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-ins-stagger]:not(.ins-static) > * { opacity: 0; }
  html.js:not(.ins-armed) [data-ins-stagger]:not(.is-in) > * { animation: ins-show 0s 2.5s forwards; }
  html.js [data-ins-stagger].is-in:not(.ins-static) > * { animation: ins-rise .7s var(--ins-ease, ease-out) calc(var(--i, 0) * 50ms + 80ms) both; }
}
.ins-static > * { animation: none; opacity: 1; }
@keyframes ins-show { to { opacity: 1; } }
@keyframes ins-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ins-card__media::after, .ins-card__tl, .ins-card__go, .ins-card__go svg, .ins-card__disc, .ins-meta__firm,
  .ins-bar__disc, .ins-bar__disc svg, .ins-crumb__ar svg, .ins-chip { transition: none; }
  .ins-card:hover .ins-card__go svg, .ins-card:focus-within .ins-card__go svg,
  .ins-bar__all:hover .ins-bar__disc svg, .ins-crumb:hover .ins-crumb__ar svg { transform: none; }
}

@media print {
  .ins { background: #fff; color: #000; padding-block: 1rem; }
  .ins::before, .ins-crumb, .ins-filter, .ins-more, .ins-card__go { display: none; }
  .ins-prose, .ins-art__lede, .ins-prose blockquote { color: #000; }
  [data-ins-stagger] > * { opacity: 1 !important; animation: none !important; }
}