@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   IRIS INSIGHTS · shared styles for the blog section (/insights/)
   Linked AFTER bundle-sub.css on the hub and on every note. Not part of a
   bundle (no build step). Tokens only: no new colours, Montserrat only, no
   italics, no glow or shadow, no looping animation.

   Note template, top to bottom:
     article.ins-note                 the reading column (620px)
       header.ins-head
         nav.ins-crumbs > ol > li     Home / Iris Insights / <Note title> (last crumb:
                                      span[aria-current=page], not a link; one row)
         a.eyebrow.ins-cat            category label, links to the hub (44px tap area)
         h1                           the note title
         p.lede                       the note's lede
         p.ins-meta                   By Sacred Studios · N min read
       figure.fn-hero                 optional hero image
       div.ins-body                   the article body (read time is counted here + the lede)
       aside.ins-related            "More from Iris Insights", two .ins-card links
       div.fn-end                     the note's existing end CTA + lead form

   Note-specific proof objects stay in each note's inline <style>, scoped to .ins-note.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Column ──────────────────────────────────────────────────────────────── */
.ins-note { max-width: 620px; margin: 0 auto; }

/* ─── Breadcrumb ──────────────────────────────────────────────────────────── */
.ins-crumbs { margin-bottom: var(--s-3); }
.ins-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; column-gap: 10px; font-family: var(--font); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--linen-soft); }
.ins-crumbs li { display: inline-flex; flex: none; align-items: center; gap: 10px; }
.ins-crumbs li + li::before { content: "/"; content: "/" / ""; color: var(--line3); }
/* One 44px row at every width: links are 44px tap targets; the last crumb is the current
   page as plain text and shortens with an ellipsis on phones (the full title is the H1 below) */
.ins-crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; color: var(--linen-soft); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.ins-crumbs li:last-child { flex: 0 1 auto; min-width: 0; }
.ins-crumbs [aria-current] { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 44px; color: var(--linen-soft); }

/* ─── Category label (reuses .eyebrow: Linen Soft caps + crimson dash) ────── */
.ins-head .ins-cat { width: fit-content; margin-bottom: var(--s-2); text-decoration: none; transition: color var(--t-fast) var(--ease); }
/* 44px tap area without moving the layout (padding cancelled by negative margin).
   At <=600px .eyebrow is display:block, so its bottom margin collapses with the h1's. */
.ins-head a.ins-cat { padding: 13px 0; margin-top: -13px; margin-bottom: calc(var(--s-2) - 13px); }
@media (max-width: 600px) { .ins-head a.ins-cat { margin-bottom: -13px; } }

/* ─── Title, lede, meta ───────────────────────────────────────────────────── */
.ins-note h1 { font-family: var(--font); font-weight: 800; font-size: clamp(34px, 5.4vw, 52px); line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; color: var(--linen); margin: var(--s-3) 0 var(--s-4); }
.ins-note h1 em { font-style: normal; font-weight: inherit; color: var(--crimson-bright); }
.ins-head .lede { font-size: 19px; line-height: 1.65; color: var(--linen); margin: 0 0 var(--s-4); }
.ins-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--line); font-family: var(--font); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--linen-soft); }
.ins-meta .ins-sep { color: var(--line3); }

/* ─── Hero image ──────────────────────────────────────────────────────────── */
.fn-hero { margin: 0 0 var(--s-6); border: 1px solid var(--line2); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-card-hi); }
.fn-hero img { display: block; width: 100%; height: auto; }

/* ─── Body typography (also used by the end CTA) ──────────────────────────── */
.ins-body h2, .fn-end h2 { font-family: var(--font); font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; letter-spacing: -0.01em; color: var(--linen); margin: var(--s-7) 0 var(--s-4); text-wrap: balance; }
.ins-body p, .fn-end p { font-family: var(--font); font-size: 17px; line-height: 1.75; color: var(--linen-mute); margin-bottom: var(--s-4); }
.ins-body p strong, .ins-body li strong { color: var(--linen); font-weight: 700; }
/* in-text links: same treatment as .prose a; inside a box label they keep the label colour */
.ins-body a:not([class]) { color: var(--crimson-bright); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease); }
.ins-body .fn-box-k a:not([class]) { color: inherit; }
/* a link inside the small box label: 44px tap area without moving the layout */
.ins-body .fn-box-k a:not([class]) { display: inline-block; padding: 15px 0; margin: -15px 0; }
/* hover only where a pointer can hover, so the colour never sticks after a tap (placed after
   the .fn-box-k rule so a box-label link still lightens on hover) */
@media (hover: hover) { .ins-crumbs a:hover, .ins-head a.ins-cat:hover, .ins-body a:not([class]):hover { color: var(--linen); } }
/* prose lists only (lists with no class), so shared list components keep their own spacing */
.ins-body ol:not([class]), .ins-body ul:not([class]) { margin: 0 0 var(--s-5) 0; padding-left: 1.3em; }
.ins-body ol:not([class]) > li, .ins-body ul:not([class]) > li { font-family: var(--font); font-size: 17px; line-height: 1.7; color: var(--linen-mute); margin-bottom: var(--s-3); padding-left: 4px; }
.ins-body ol:not([class]) > li::marker, .ins-body ul:not([class]) > li::marker { color: var(--crimson-coral); font-weight: 700; }

/* ─── Shared article objects: example box, pull line ──────────────────────── */
.fn-box { background: var(--bg-card); border: 1px solid var(--line2); border-radius: var(--r); padding: var(--s-5) var(--s-6); margin: var(--s-5) 0 var(--s-6); }
.fn-box .fn-box-k { font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--linen-soft); margin-bottom: var(--s-3); text-wrap: balance; }
.fn-box p { margin-bottom: var(--s-2); color: var(--linen); }
.fn-box .fn-note { font-size: 14px; color: var(--linen-soft); margin: var(--s-3) 0 0; }
.fn-pull { font-family: var(--font); font-weight: 700; font-size: 21px; line-height: 1.45; color: var(--linen); border-left: 3px solid var(--crimson); padding-left: var(--s-5); margin: var(--s-6) 0; }

/* ─── More from Iris Insights ─────────────────────────────────────────────── */
.ins-related { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.ins-related .ins-related-h { margin: 0 0 var(--s-4); }
.ins-related-grid { display: grid; gap: 12px; }
@media (min-width: 560px) { .ins-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ins-card { display: flex; flex-direction: column; gap: 10px; padding: var(--s-4); background: var(--bg-card); border: 1px solid var(--line2); border-radius: var(--r); color: inherit; text-decoration: none; transition: border-color var(--t) var(--ease), transform 0.1s var(--ease); }
@media (hover: hover) { .ins-card:hover { border-color: var(--crimson); } }
.ins-card:active { transform: scale(0.97); }
.ins-card-cat { display: flex; align-items: center; gap: 10px; font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; line-height: 1.4; letter-spacing: 0.24em; text-transform: uppercase; color: var(--linen-soft); }
.ins-card-cat::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--crimson); }
.ins-card-title { margin: 0; font-family: var(--font); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; color: var(--linen); text-wrap: balance; }
.ins-card-meta { margin-top: auto; padding-top: 4px; font-family: var(--font); font-size: var(--eyebrow-size); font-weight: 600; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--linen-soft); }

/* ─── End CTA band (each note's existing form block) ──────────────────────── */
.fn-end { margin-top: var(--s-8); padding: var(--s-6); background: var(--bg-card); border: 1px solid var(--line2); border-radius: var(--r-lg); text-align: center; }
.ins-related + .fn-end { margin-top: var(--s-6); }
.fn-end h2 { margin-top: 0; }
.fn-end p { max-width: 50ch; margin-left: auto; margin-right: auto; }
@media (max-width: 600px) { .fn-end { padding: var(--s-5) 14px; } }