/* ════════════════════════════════════════════════════
   LUMid Insights — Shared Stylesheet
   Loaded by /insights/index.html and every post page.
   Edit one place, applies everywhere.
   ════════════════════════════════════════════════════ */

:root{
  --paper:      #f7f2e7;
  --paper-2:    #f1ead9;
  --paper-3:    #ebe2cc;
  --line:       #d8ccac;
  --line-soft:  #e6dcc1;
  --ink:        #0a2530;
  --ink-2:      #143849;
  --ink-soft:   #4a5d68;
  --mute:       #74808a;
  --mute-2:     #98a0a6;
  --brand:      #096784;
  --brand-deep: #054a63;
  --brand-bright:#1a8caa;
  --brand-tint: #cfe2eb;
  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans:  "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease:  cubic-bezier(.2,.7,.2,1);
  --max:   1240px;
  --max-prose: 720px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(70vmax 60vmax at 90% -10%, rgba(9,103,132,.08), transparent 55%),
    radial-gradient(60vmax 60vmax at -10% 110%, rgba(9,103,132,.05), transparent 55%);
  z-index:0;
}
body::after{
  content:"";
  position:fixed; inset:-50%; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .04  0 0 0 0 .15  0 0 0 0 .19  0 0 0 .06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.55; mix-blend-mode:multiply; z-index:1;
}

main, header, footer{ position:relative; z-index:2 }

a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 28px }
@media (max-width:700px){ .wrap{ padding:0 20px } }

.eyebrow{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
.eyebrow .dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--brand); margin-right:10px; vertical-align:middle;
  box-shadow:0 0 0 3px rgba(9,103,132,.12);
}

.display{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30, "WONK" 0;
  line-height:.92; letter-spacing:-0.025em; color:var(--ink);
}
.display em{
  font-style:italic; color:var(--brand);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}

.lede{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(20px, 2.2vw, 26px);
  line-height:1.45; letter-spacing:-0.01em;
  color:var(--ink); max-width:62ch; margin:32px 0 0;
}

/* ─── Nav (shared with homepage) ─────────────── */
header.nav{
  position:fixed; top:0; left:0; right:0;
  padding:16px 0; z-index:50;
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  background:rgba(247,242,231,.7);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
header.nav.scrolled{ border-bottom-color:var(--line-soft); background:rgba(247,242,231,.88) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px }
.brand{ display:flex; align-items:center; gap:10px }
.brand img{ height:32px; width:auto; display:block }
@media (max-width:480px){ .brand img{ height:28px } }
.nav-links{ display:flex; align-items:center; gap:28px }
.nav-links a{
  font-size:13px; color:var(--ink-soft); letter-spacing:.02em;
  position:relative; padding:6px 0; transition:color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--brand); transition:right .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--brand) }
.nav-links a.active::after{ right:0 }
.nav-links a:hover::after{ right:0 }
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border:1px solid var(--ink);
  border-radius:999px; font-size:13px; color:var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.nav-cta:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.nav-cta .arrow{ transition:transform .25s var(--ease) }
.nav-cta:hover .arrow{ transform:translateX(3px) }
@media (max-width:760px){ .nav-links{ display:none } }

/* ─── Page hero ──────────────────────────────── */
.page-hero{
  padding:170px 0 60px;
}
.page-hero h1{
  font-size:clamp(72px, 12vw, 180px);
  margin:20px 0 0;
}

/* ─── Filter bar ─────────────────────────────── */
.filter-bar{
  padding:32px 0 24px;
  border-bottom:1px solid var(--line-soft);
}
.filters{
  display:flex; gap:12px; flex-wrap:wrap;
}
.filter-btn{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  padding:8px 16px; border-radius:999px;
  border:1px solid var(--line); background:transparent;
  color:var(--ink-soft); cursor:pointer;
  transition:all .25s var(--ease);
}
.filter-btn:hover{ border-color:var(--brand); color:var(--brand) }
.filter-btn.active{
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}

/* ─── Post list (index page) ─────────────────── */
.post-list{ padding:48px 0 80px }
.post-row{
  display:block; padding:40px 0;
  border-bottom:1px solid var(--line-soft);
  transition:padding .35s var(--ease);
}
.post-row[href]:hover{ padding-left:14px }
.post-row[href]{ cursor:pointer; position:relative }
.post-row[href]::before{
  content:""; position:absolute; left:-30px; top:40px; bottom:40px; width:2px;
  background:var(--brand); transform:scaleY(0); transform-origin:top;
  transition:transform .4s var(--ease);
}
.post-row[href]:hover::before{ transform:scaleY(1) }
.post-row.upcoming{ opacity:.55 }
.post-row.upcoming .post-cta{ color:var(--mute) }

.post-meta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); margin-bottom:18px;
}
.post-meta .cat{
  color:var(--brand); border:1px solid var(--brand);
  padding:4px 10px; border-radius:999px; font-size:10px;
}
.post-meta .date, .post-meta .read-time{ color:var(--ink-soft) }

.post-title{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:clamp(28px, 4vw, 48px);
  line-height:1.05; letter-spacing:-0.022em;
  margin:0 0 18px; color:var(--ink); max-width:22ch;
}
.post-title em{
  font-style:italic; color:var(--brand);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.post-excerpt{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(16px, 1.6vw, 19px);
  line-height:1.55; color:var(--ink-soft);
  margin:0 0 22px; max-width:64ch;
}
.post-cta{
  font-family:var(--mono); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand);
}
.post-cta.muted{ color:var(--mute) }
.post-cta .arrow{ display:inline-block; transition:transform .25s var(--ease) }
.post-row[href]:hover .post-cta .arrow{ transform:translateX(4px) }

.post-row.featured{
  padding:56px 0;
  border-bottom:1px solid var(--line);
}
.post-row.featured .post-title{ font-size:clamp(36px, 6vw, 64px); max-width:20ch }

.empty-state{
  padding:80px 0; text-align:center;
  color:var(--ink-soft); font-size:16px; line-height:1.6;
}
.empty-state a{ color:var(--brand); border-bottom:1px solid var(--brand) }

/* ─── Page CTA (bottom strip) ────────────────── */
.page-cta{
  padding:100px 0 140px;
  border-top:1px solid var(--line-soft);
  text-align:center;
}
.page-cta h2{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:clamp(40px, 6vw, 72px);
  line-height:1; letter-spacing:-0.025em;
  margin:0 0 32px; color:var(--ink);
}
.page-cta h2 em{
  font-style:italic; color:var(--brand);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.email-cta{
  display:inline-flex; align-items:baseline; gap:14px;
  font-family:var(--serif); font-size:clamp(22px, 2.6vw, 30px);
  color:var(--ink); border-bottom:1px solid var(--brand);
  padding-bottom:6px;
  transition:color .25s var(--ease);
}
.email-cta:hover{ color:var(--brand) }
.email-cta .arrow{ font-family:var(--sans); font-size:.7em; color:var(--brand) }

/* ════════════════════════════════════════════════════
   POST PAGE STYLES
   Used by individual post HTML files
   ════════════════════════════════════════════════════ */

.post-hero{
  padding:170px 0 40px;
}
.post-hero .post-meta{ margin-bottom:28px }
.post-hero h1{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:clamp(40px, 6.5vw, 84px);
  line-height:1.02; letter-spacing:-0.028em;
  margin:0 0 24px; color:var(--ink);
  max-width:22ch;
}
.post-hero h1 em{
  font-style:italic; color:var(--brand);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.post-hero .standfirst{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(20px, 2.3vw, 26px);
  line-height:1.45; letter-spacing:-0.01em;
  color:var(--ink-soft); max-width:60ch; margin:0;
}
.post-hero .byline{
  margin-top:40px; padding-top:24px;
  border-top:1px solid var(--line-soft);
  display:flex; gap:24px; align-items:center;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; color:var(--mute);
}
.post-hero .byline .author{ color:var(--ink) }

/* The article body */
article.post{
  padding:60px 0 100px;
}
article.post .body{
  max-width:var(--max-prose);
  margin:0 auto;
}
article.post .body > *{ margin-left:auto; margin-right:auto }

/* Typography for prose */
article.post p,
article.post ul,
article.post ol{
  font-size:18px; line-height:1.7;
  color:var(--ink); margin:0 0 28px;
}
article.post p:first-of-type::first-letter{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:4.5em; line-height:0.85;
  float:left; padding:8px 12px 0 0;
  color:var(--brand);
}

article.post h2{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:clamp(28px, 3.5vw, 40px);
  line-height:1.1; letter-spacing:-0.022em;
  margin:64px 0 24px; color:var(--ink);
}
article.post h2 em{
  font-style:italic; color:var(--brand);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
article.post h3{
  font-family:var(--serif); font-weight:500;
  font-size:24px; line-height:1.2;
  letter-spacing:-0.018em; margin:48px 0 16px;
  color:var(--ink);
}

article.post a{
  color:var(--brand);
  border-bottom:1px solid rgba(9,103,132,.4);
  transition:border-color .2s var(--ease);
}
article.post a:hover{ border-bottom-color:var(--brand) }

article.post ul, article.post ol{ padding-left:24px }
article.post li{ margin-bottom:8px }

article.post strong{ font-weight:600; color:var(--ink) }
article.post em{ font-style:italic }

/* ─── Block components ──────────────────────── */

/* Pull quote */
article.post blockquote.pull{
  margin:48px 0;
  padding:0 0 0 32px;
  border-left:3px solid var(--brand);
  max-width:none;
}
article.post blockquote.pull p{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:clamp(22px, 2.6vw, 32px);
  line-height:1.3; letter-spacing:-0.018em;
  color:var(--ink); margin:0;
}
article.post blockquote.pull p em{
  color:var(--brand);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
article.post blockquote.pull cite{
  display:block; margin-top:16px;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; color:var(--mute);
  font-style:normal;
}

/* Callout box (tip, note, warning) */
article.post .callout{
  margin:36px 0; padding:24px 28px;
  border:1px solid var(--line); border-left:3px solid var(--brand);
  background:rgba(9,103,132,.04);
  border-radius:0 4px 4px 0;
}
article.post .callout .callout-label{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); margin-bottom:8px;
}
article.post .callout p:last-child{ margin-bottom:0 }
article.post .callout p:first-of-type::first-letter{
  font-family:inherit; font-size:inherit; line-height:inherit;
  float:none; padding:0; color:inherit; font-weight:inherit;
}

/* Stat callout (for case studies) */
article.post .stat-block{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  margin:48px 0;
}
@media (max-width:700px){
  article.post .stat-block{ grid-template-columns:1fr }
}
article.post .stat-block .stat{
  background:var(--paper); padding:28px 24px;
  text-align:center;
}
article.post .stat-block .stat .k{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:48px; line-height:1;
  color:var(--brand); letter-spacing:-0.02em;
}
article.post .stat-block .stat .v{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); margin-top:10px;
}

/* Code blocks (for tutorials) */
article.post pre{
  margin:32px 0; padding:24px 28px;
  background:var(--ink); color:#e6dcc1;
  border-radius:6px; overflow-x:auto;
  font-family:var(--mono); font-size:13.5px; line-height:1.6;
  border:1px solid var(--ink-2);
}
article.post code{
  font-family:var(--mono); font-size:.92em;
  background:rgba(9,103,132,.08);
  color:var(--brand);
  padding:2px 6px; border-radius:3px;
}
article.post pre code{
  background:transparent; color:inherit; padding:0;
}

/* Step list (for tutorials) */
article.post ol.steps{
  list-style:none; padding-left:0; counter-reset:step;
  margin:32px 0;
}
article.post ol.steps li{
  position:relative; padding-left:64px; margin-bottom:24px;
  counter-increment:step;
}
article.post ol.steps li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:13px;
  color:var(--brand); letter-spacing:.06em;
  width:48px; height:48px;
  border:1px solid var(--brand); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* Inline image with caption */
article.post figure{
  margin:48px 0; max-width:none;
  width:calc(100% + 80px); margin-left:-40px;
}
@media (max-width:800px){
  article.post figure{ width:100%; margin-left:0 }
}
article.post figure img{
  border-radius:6px; border:1px solid var(--line);
}
article.post figcaption{
  margin-top:14px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.06em;
  color:var(--mute); text-align:center;
}

/* Horizontal rule between sections */
article.post hr{
  border:none; height:1px;
  background:var(--line);
  margin:48px auto;
  max-width:80px;
}

/* ─── Post footer / next-up ─────────────────── */
.post-footer{
  border-top:1px solid var(--line-soft);
  padding:48px 0; margin-top:0;
}
.post-footer-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:start;
}
@media (max-width:760px){
  .post-footer-inner{ grid-template-columns:1fr; gap:32px }
}
.post-footer .label{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); margin-bottom:12px;
}
.post-footer a.share-link,
.post-footer a.next-link{
  font-family:var(--serif); font-size:22px;
  line-height:1.2; color:var(--ink);
  border-bottom:1px solid var(--brand);
  padding-bottom:4px;
}
.post-footer a:hover{ color:var(--brand) }

/* ─── Footer (shared with homepage) ─────────── */
footer{
  border-top:1px solid var(--line); padding:48px 0 36px;
  color:var(--mute); font-size:13px;
  background:var(--paper-2);
}
.foot-grid{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px }
.foot-grid .brand img{ height:28px }

/* SignalStack "Built by" badge — cross-marketing */
.ss-badge{
  border-top:1px solid var(--line-soft);
  margin-top:28px;
  padding-top:22px;
  text-align:center;
}
.ss-badge a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  opacity:.55;
  transition:opacity .2s ease;
}
.ss-badge a:hover{ opacity:1 }
.ss-badge .label{
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:500;
}
.ss-badge img{
  height:22px;
  width:auto;
  display:block;
}

::selection{ background:var(--brand); color:var(--paper) }