/* ============================================================================
   INSIGHTS & IDEAS — the Adaline direction, for the index and the articles
   ----------------------------------------------------------------------------
   Jayden 2026-09-25, after seeing the traces: "I like the Insights Adeline one"
   and then "deploy the isights and iseas to the new site… change eevery blog in
   this style and deploy to production".

   Geometry measured off the reference, not estimated — the measuring pass is in
   _lab/tools/ and the working notes are in _lab/. From
   mobbin.com/sites/sections/0209c5c0-4714-4777-8997-4f4bf6b6f81e:

     container  61 -> 1858 of 1920  =  1798 wide, 61px margins (9.53%)
     featured   866 | 36 gutter | 898, band 430 tall
     cards      3 x 579 on 30px gutters, 327 tall, 356 row pitch

   Expressed as percentages and fr units below so the page behaves at every
   width while landing on those exact numbers at 1920.

   SCOPED TO .ins. Everything here is prefixed so it cannot reach the nav, the
   footer, the cart drawer or any other page. The site's own stylesheets load
   first and are untouched.

   TWO DELIBERATE DEPARTURES FROM SITE-WIDE BRAND LAW, both visible and both
   reversible:

   1. TYPE. DAS sets page headings in Anton — condensed, uppercase, heavy. The
      whole reason this reference was chosen is that it is calm, and calm here
      comes from one quiet sans at a modest weight with the artwork carrying the
      energy. Anton would undo it. These two page types use Hanken Grotesk 500.
      Asked four times and still unanswered; shipping the version Jayden
      approved on screen rather than blocking on it. Change `--ins-face` and the
      three heading rules to reverse it.

   2. THE STAT STRIP. The live page sets those numbers at weight 900, white on
      near-black, with a text-shadow glow. Kept the dark ground — that contrast
      is the one place this page should raise its voice — but at 600 and without
      the glow.
   ========================================================================== */

.ins {
  --ins-face:  'Hanken Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ins-ink:   #16264F;
  --ins-navy:  #1A2E6E;
  --ins-body:  #425466;
  --ins-muted: #7A8699;
  --ins-hair:  #E6EAF0;
  --ins-paper: #FCFCFB;
  --ins-deep:  #101A2E;
  --ins-green: #4F7A52;
  --ins-soft:  #F4F5F2;

  background: var(--ins-paper);
  color: var(--ins-ink);
  font-family: var(--ins-face);
  -webkit-font-smoothing: antialiased;
}
.ins *, .ins *::before, .ins *::after { box-sizing: border-box; }
/* NO `.ins a { color: inherit }` HERE, AND THAT IS THE FIX.
   It was here, and at specificity (0,1,1) it beat `.ins-btn { color:
   var(--ins-ink) }` at (0,1,0). The CTA buttons are <a> elements inside a panel
   whose colour is white, so the primary button rendered as a white block with
   white text in it — invisible, and exactly what Jayden reported on 2026-09-26.
   The site's own styles.css already carries `a { color: inherit }` at (0,0,1),
   which loses to every rule here, so this one was redundant as well as harmful. */
.ins img { max-width: 100%; }

/* 1798 of 1920 = 93.65%, i.e. 61px margins either side. */
.ins-wrap { width: min(1798px, 100% - 122px); margin: 0 auto; }
@media (max-width: 900px) { .ins-wrap { width: calc(100% - 40px); } }

/* ── Page head ──────────────────────────────────────────────────────────── */
.ins-head { padding: 72px 0 0; }
.ins-eyebrow { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ins-muted); }
.ins-head h1 { margin: 18px 0 0; max-width: 24ch; font-size: clamp(32px, 3.4vw, 56px); line-height: 1.1; font-weight: 500; letter-spacing: -.028em; color: var(--ins-ink); }
.ins-head > p { margin: 20px 0 0; max-width: 62ch; font-size: 17.5px; line-height: 1.65; color: var(--ins-body); }

/* ── Featured: 866 | 36 | 898 ───────────────────────────────────────────── */
.ins-featured {
  margin-top: 56px; display: grid; grid-template-columns: 866fr 898fr; column-gap: 36px;
  border-radius: 10px; overflow: hidden; background: var(--ins-soft);
}
.ins-fx { padding: 46px 52px; display: flex; flex-direction: column; min-height: 430px; }
.ins-kick { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 14px; color: var(--ins-muted); }
.ins-kick b { color: var(--ins-green); font-weight: 600; }
.ins-featured h2 { margin: 26px 0 0; font-size: clamp(26px, 2.6vw, 44px); line-height: 1.16; font-weight: 500; letter-spacing: -.022em; max-width: 20ch; color: var(--ins-ink); }
.ins-ffoot { margin-top: auto; padding-top: 40px; display: flex; align-items: flex-end; justify-content: space-between; }
.ins-ffoot span { font-size: 13.5px; color: var(--ins-muted); }
.ins-fart { display: block; position: relative; overflow: hidden; }
.ins-fart img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; display: block; }

/* ── Filters ────────────────────────────────────────────────────────────── */
.ins-filterbar { margin-top: 42px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ins-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ins-pill {
  height: 32px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 999px; background: none; color: var(--ins-body);
  font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1; cursor: pointer;
}
.ins-pill sup { font-size: 10.5px; font-weight: 400; color: var(--ins-muted); }
.ins-pill:hover { background: #F0F1EE; }
.ins-pill[aria-pressed="true"] { background: #E8EDE6; color: #33562F; }
.ins-pill[aria-pressed="true"] sup { color: #5C7C57; }
.ins-pill:focus-visible { outline: 2px solid var(--ins-navy); outline-offset: 2px; }
.ins-count { font-size: 13.5px; color: var(--ins-muted); }

/* ── Cards: the artwork IS the card, title on top ───────────────────────── */
.ins-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; row-gap: 29px; }
.ins-card { position: relative; display: block; height: 327px; border-radius: 10px; overflow: hidden; text-decoration: none; color: #fff; background: #E9EBE6; }
.ins-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ins-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,38,79,.38) 0%, rgba(22,38,79,.10) 42%, rgba(22,38,79,.34) 100%); }
.ins-card:hover img { transform: scale(1.04); }
.ins-card:focus-visible { outline: 3px solid var(--ins-navy); outline-offset: 3px; }
.ins-card h3 { position: absolute; left: 30px; right: 30px; top: 26px; z-index: 1; margin: 0; font-size: 25px; line-height: 1.26; font-weight: 500; letter-spacing: -.015em; color: #fff; text-shadow: 0 1px 14px rgba(16,26,52,.34); }
.ins-card .m { position: absolute; left: 30px; right: 30px; bottom: 24px; z-index: 1; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.88); text-shadow: 0 1px 10px rgba(16,26,52,.4); }
.ins-card .m svg { width: 15px; height: 15px; }
.ins-empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--ins-muted); font-size: 15px; }

/* ── The stat strip ─────────────────────────────────────────────────────── */
.ins-stats { margin-top: 96px; background: var(--ins-deep); border-radius: 12px; overflow: hidden; color: #fff; }
.ins-stats .h { padding: 52px 52px 0; }
.ins-stats .h p { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.38); }
.ins-stats .h h2 { margin: 14px 0 0; font-size: clamp(24px, 2vw, 34px); font-weight: 500; letter-spacing: -.022em; color: #fff; }
.ins-statrow { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); }
.ins-stat { padding: 34px 40px 46px; border-right: 1px solid rgba(255,255,255,.09); }
.ins-stat:last-child { border-right: 0; }
.ins-stat .t { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.34); }
.ins-stat .n { margin: 16px 0 0; font-size: 52px; line-height: 1; font-weight: 600; letter-spacing: -.04em; color: #fff; }
.ins-stat .n span { color: rgba(255,255,255,.4); font-size: 30px; font-weight: 500; }
.ins-stat .l { margin: 14px 0 0; font-size: 14px; line-height: 1.62; color: rgba(255,255,255,.58); }

/* ── Newsletter + preview ───────────────────────────────────────────────── */
.ins-nl { margin-top: 96px; display: grid; grid-template-columns: 866fr 898fr; column-gap: 36px; align-items: start; }
.ins-nl h2 { margin: 0; font-size: clamp(24px, 2vw, 34px); font-weight: 500; letter-spacing: -.022em; max-width: 18ch; color: var(--ins-ink); }
.ins-nl > div > p { margin: 16px 0 0; font-size: 16px; line-height: 1.7; color: var(--ins-body); max-width: 52ch; }
.ins-nl ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ins-nl li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ins-body); }
.ins-nl li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: #9FB3A0; }
.ins-nlform { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.ins-nlform input { flex: 1 1 280px; height: 48px; padding: 0 16px; border: 1px solid var(--ins-hair); border-radius: 8px; background: #fff; font: inherit; font-size: 16px; color: var(--ins-ink); }
.ins-nlform input::placeholder { color: var(--ins-muted); }
.ins-nlform input:focus { outline: none; border-color: var(--ins-navy); box-shadow: 0 0 0 3px rgba(26,46,110,.12); }
.ins-nlform button { height: 48px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--ins-navy); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.ins-nlform button:hover { background: var(--ins-ink); }
.ins-nlnote { margin-top: 12px; font-size: 12.5px; color: var(--ins-muted); }
.ins-preview { border: 1px solid var(--ins-hair); border-radius: 12px; overflow: hidden; background: #fff; }
.ins-preview .top { padding: 16px 20px; border-bottom: 1px solid var(--ins-hair); display: flex; align-items: center; gap: 10px; }
.ins-preview .dot { width: 9px; height: 9px; border-radius: 50%; background: #D8DEE7; }
.ins-preview .top b { font-size: 13px; font-weight: 600; }
.ins-prow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 13px 20px; }
.ins-prow .t { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ins-body); }
.ins-prow .t::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: 7px; border-radius: 50%; background: #B9C4D2; }
.ins-prow .m { font-size: 12px; color: var(--ins-muted); white-space: nowrap; }
.ins-preview .bot { padding: 13px 20px; background: #FAFAF8; border-top: 1px solid var(--ins-hair); display: flex; justify-content: space-between; align-items: center; }
.ins-preview .bot span { font-size: 12.5px; color: var(--ins-muted); }
.ins-preview .bot a { font-size: 12.5px; font-weight: 600; color: var(--ins-navy); text-decoration: none; }

/* ── Closing CTA ────────────────────────────────────────────────────────── */
/* WHITE TEXT HERE IS NOT ALLOWED TO DEPEND ON THE PHOTOGRAPH.
   Jayden, 2026-09-26: "Bottom CTA is just white, and the text is white, so it
   doesn't make sense."

   The first version leaned entirely on a diagonal scrim over a photo. Measured
   afterwards it computed as legible at 1100, 1280 and 1440 — which is exactly
   the trap, because the photo is a 1254x1254 square and `object-fit: cover`
   crops a different part of it at every aspect ratio. The bright middle of that
   image (a white bottle on pale foam) slides under the text as the box gets
   wider or shorter, and the scrim's far end was only 32% opaque. A CTA that is
   readable at the three widths I happened to test is not a readable CTA.

   So the contrast no longer comes from the photo at all:
     · a solid deep base under everything, so a failed or slow image still
       leaves dark ground rather than white
     · the scrim never drops below 62%, so the worst point of the worst crop is
       still dark
   The photograph is now texture on top of a guaranteed floor, which is all it
   was ever supposed to be. */
.ins-cta {
  margin: 96px 0 0; position: relative; border-radius: 12px; overflow: hidden;
  min-height: 340px; display: flex; align-items: center;
  background: var(--ins-deep);
}
.ins-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ins-cta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(16,26,46,.95) 0%, rgba(16,26,46,.88) 48%, rgba(16,26,46,.62) 100%);
}
.ins-ctain { position: relative; z-index: 1; padding: 56px 52px; color: #fff; max-width: 60ch; }
.ins-ctain h2 { margin: 0; font-size: clamp(26px, 2.3vw, 36px); font-weight: 500; letter-spacing: -.022em; color: #fff; }
.ins-ctain p { margin: 16px 0 0; font-size: 16.5px; line-height: 1.68; color: rgba(255,255,255,.78); }
.ins-ctabtns { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.ins .ins-btn { color: var(--ins-ink); }
.ins .ins-btn.ghost { color: #fff; }
.ins-btn { height: 48px; padding: 0 22px; display: inline-flex; align-items: center; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; background: #fff; color: var(--ins-ink); }
.ins-btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.ins-btn.ghost:hover { border-color: #fff; }
.ins-tail { height: 110px; }

/* ══ THE ARTICLE PAGE ══════════════════════════════════════════════════════
   NOT the index's grid, on purpose. The index is a three-column board of
   things to choose between; an article is one thing to read, and the only
   measurement that matters is line length. 720px at 18-21px lands at ~66
   characters, which is where reading stops being work. It inherits the ground,
   the face, the weight and the artwork — everything except the grid.
   ═══════════════════════════════════════════════════════════════════════════ */
/* 660, not 720, and 20px body text — arrived at by measuring, not by taste.
   The first version paired a 720px column with 18px body and I reported "68
   characters" from it. That figure was measured on the 21px LEAD paragraph, not
   the body. Measured properly, a character of Hanken Grotesk is 0.494 x the
   font size, so 720px of 18px text is 81 characters per line — well past the
   62-68 where reading stops being work, and exactly the kind of number that
   looks fine until someone reads 10,000 characters of it.
       660 / (20 x 0.494) = 67 characters. */
.ins-measure { width: min(660px, 100%); margin-left: auto; margin-right: auto; }

.ins-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 34px; font-size: 14px; font-weight: 500; color: var(--ins-muted); text-decoration: none; }
.ins-back:hover { color: var(--ins-ink); }
.ins-back svg { width: 15px; height: 15px; }

.ins-ahead { padding: 40px 0 0; }
.ins-ameta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13.5px; color: var(--ins-muted); }
.ins-ameta .cat { padding: 4px 11px; border-radius: 999px; background: #E8EDE6; color: #33562F; font-size: 12.5px; font-weight: 600; }
.ins-ahead h1 { margin: 22px 0 0; font-size: clamp(28px, 3.1vw, 50px); line-height: 1.12; font-weight: 500; letter-spacing: -.028em; color: var(--ins-ink); }
.ins-standfirst { margin: 22px 0 0; font-size: 20px; line-height: 1.6; color: var(--ins-body); }

.ins-cover { margin: 46px 0 0; border-radius: 10px; overflow: hidden; background: #EFF1EC; }
.ins-cover img { display: block; width: 100%; height: 430px; object-fit: cover; }

.ins-article { margin-top: 52px; }
.ins-article > *:first-child { margin-top: 0; }
.ins-article p { margin: 0 0 26px; font-size: 20px; line-height: 1.72; color: var(--ins-body); }
.ins-article h2 { margin: 52px 0 18px; font-size: clamp(24px, 1.9vw, 30px); line-height: 1.24; font-weight: 500; letter-spacing: -.022em; color: var(--ins-ink); }
.ins-article h3 { margin: 38px 0 14px; font-size: 21px; font-weight: 600; color: var(--ins-ink); }
.ins-article ul, .ins-article ol { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 12px; }
.ins-article li { display: flex; gap: 12px; font-size: 20px; line-height: 1.64; color: var(--ins-body); }
.ins-article li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 11px; border-radius: 50%; background: #9FB3A0; }
.ins-article strong, .ins-article b { color: var(--ins-ink); font-weight: 600; }
.ins-article a { color: var(--ins-navy); font-weight: 600; text-underline-offset: 3px; }
.ins-article blockquote {
  margin: 44px 0; padding-left: 26px; border-left: 3px solid var(--ins-green);
  font-size: 24px; line-height: 1.42; font-weight: 500; letter-spacing: -.018em; color: var(--ins-ink);
}
.ins-article blockquote p { font-size: inherit; line-height: inherit; color: inherit; margin: 0; }
.ins-article table { width: 100%; border-collapse: collapse; margin: 0 0 30px; font-size: 15.5px; }
.ins-article th, .ins-article td { padding: 12px 14px; border-bottom: 1px solid var(--ins-hair); text-align: left; color: var(--ins-body); }
.ins-article th { font-weight: 600; color: var(--ins-ink); }
.ins-article img { border-radius: 8px; margin: 0 0 26px; }

.ins-byline { margin: 56px 0 0; padding-top: 26px; border-top: 1px solid var(--ins-hair); display: flex; align-items: center; gap: 14px; }
.ins-byline .av { width: 42px; height: 42px; border-radius: 50%; background: var(--ins-navy); flex: none; }
.ins-byline b { display: block; font-size: 15px; font-weight: 600; color: var(--ins-ink); }
.ins-byline span { font-size: 13.5px; color: var(--ins-muted); }

.ins-more { margin-top: 90px; }
.ins-more h2 { margin: 0 0 26px; font-size: 26px; font-weight: 500; letter-spacing: -.022em; color: var(--ins-ink); }
.ins-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; row-gap: 29px; }
.ins-mgrid .ins-card { height: 280px; }
.ins-mgrid .ins-card h3 { left: 26px; right: 26px; top: 24px; font-size: 21px; }
.ins-mgrid .ins-card .m { left: 26px; right: 26px; bottom: 22px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .ins-grid, .ins-mgrid { grid-template-columns: repeat(2, 1fr); }
  .ins-statrow { grid-template-columns: repeat(2, 1fr); }
  .ins-stat:nth-child(2) { border-right: 0; }
  .ins-featured, .ins-nl { grid-template-columns: minmax(0,1fr); row-gap: 26px; }
  .ins-fx { min-height: 0; }
  .ins-fart img { min-height: 300px; }
  .ins-cover img { height: 320px; }
}
@media (max-width: 680px) {
  .ins-grid, .ins-mgrid { grid-template-columns: minmax(0,1fr); }
  .ins-statrow { grid-template-columns: minmax(0,1fr); }
  .ins-stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); }
  .ins-stat:last-child { border-bottom: 0; }
  .ins-card { height: 260px; }
  .ins-card h3 { font-size: 21px; }
  .ins-stats .h, .ins-fx, .ins-ctain { padding-left: 26px; padding-right: 26px; }
  .ins-article p, .ins-article li { font-size: 18px; }
  .ins-article blockquote { font-size: 20px; }
  .ins-cover img { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .ins-card img { transition: none; }
  .ins-card:hover img { transform: none; }
}