/* insights.css — the Industrial insights index (/insights/) and the four posts under
   it. One sheet for the family: a list page and a reading page that share a head, a
   reading column and a footer module. Header, nav, footer and the founders strip
   come from chrome.css; nothing here restyles them. */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font-display);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none}
::selection{background:var(--sel-bg);color:var(--sel-ink)}

.mono{font-family:var(--font-mono);font-weight:500;letter-spacing:.04em;text-transform:uppercase;font-size:11px;color:var(--ink-2)}
.mono.dim{color:var(--mute)}
.red{color:var(--red)}
.container{max-width:1480px;margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

.btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--btn);color:var(--btn-ink);padding:18px 24px;border-radius:0;
  font-family:var(--font-display);font-size:15px;font-weight:500;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.btn:hover{background:var(--btn-hover)}
.btn .arr{width:18px;height:10px;position:relative}
.btn .arr::before{content:"";position:absolute;left:0;right:4px;top:50%;height:1.5px;background:currentColor}
.btn .arr::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover{background:var(--bg-2);border-color:var(--ink)}

/* ---------- index: head ---------- */
.intro{padding:96px 0 72px;border-bottom:1px solid var(--line-2)}
.intro .mono{margin-bottom:24px}
.intro h1{font-size:clamp(44px,6.4vw,96px);line-height:.95;letter-spacing:-.04em;font-weight:500;margin:0;text-wrap:balance;max-width:14ch}
.intro .standfirst{margin-top:32px;font-size:clamp(17px,1.4vw,22px);line-height:1.45;color:var(--ink-2);max-width:60ch}

/* ---------- index: the post list ----------
   The row declarations are the unused .horizon .row set from landing.css, given a
   real home: index / title / teaser / read link, collapsing to one column at 980px. */
.posts{padding:80px 0 140px}
.posts .list{border-top:1px solid var(--line)}
.posts .row{display:grid;grid-template-columns:120px 1fr 1.4fr auto;gap:40px;padding:40px 0;border-bottom:1px solid var(--line-2);align-items:start}
.posts .row .idx{font-family:var(--font-mono);color:var(--red-deep);font-size:12px;letter-spacing:.1em;padding-top:8px}
.posts .row h2{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.025em;line-height:1.15;margin:0;font-weight:500;text-wrap:balance}
.posts .row h2 a{transition:color .15s}
.posts .row h2 a:hover{color:var(--red)}
.posts .row p{color:var(--ink-2);font-size:15px;line-height:1.6;margin:0;max-width:60ch}
.posts .row .read{font-size:14px;color:var(--ink-2);padding-top:8px;white-space:nowrap;transition:color .15s}
.posts .row .read:hover{color:var(--red-deep)}

/* ---------- post ----------
   Head and hero sit wide; the body is a 720px reading column. Every block is
   left-aligned to the container edge, the way the rest of the site sets its prose. */
.post{padding:96px 0 140px}
.post-head{max-width:880px}
.post-head .mono{margin-bottom:24px}
.post-head h1{font-size:clamp(36px,4.8vw,76px);line-height:1;letter-spacing:-.035em;font-weight:500;margin:0;text-wrap:balance}
.post-head .byline{margin:28px 0 0;font-size:15px;color:var(--ink-2)}
.post-head .byline a{color:var(--ink);border-bottom:1px solid var(--line)}
.post-head .byline a:hover{color:var(--red-deep);border-color:var(--red-deep)}

/* The photos are 900px wide (the landing hero 1700px); 960px keeps them sharp. */
.post-hero{margin:56px 0 0;max-width:960px}
.post-hero img{display:block;width:100%;height:auto}

/* The body box is as wide as the hero so figures can sit wide; the prose itself
   stays a 720px reading column. */
.post-body{max-width:960px;margin-top:64px}
.post-body p,.post-body h2{max-width:720px}
.post-body p{font-size:17px;line-height:1.6;color:var(--ink-2);margin:0 0 24px}
.post-body .lead{font-size:clamp(19px,1.5vw,23px);line-height:1.5;color:var(--ink)}
.post-body h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.025em;line-height:1.15;font-weight:500;color:var(--ink);margin:48px 0 20px;text-wrap:balance}
.post-body strong{color:var(--ink);font-weight:500}
.post-body a{color:var(--red-deep)}
.post-body a:hover{color:var(--ink)}
.post-body .sig{margin:40px 0 0;color:var(--ink)}

/* Pull quote and the closing statement: the two lines the post is built around.
   Both clear 24px, so the coral line may use the bright swatch. */
.post-body .pull{margin:36px 0;padding-left:24px;border-left:3px solid var(--red);font-size:clamp(22px,2.2vw,27px);line-height:1.34;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.post-body .big{margin:48px 0;font-size:clamp(28px,3.4vw,40px);line-height:1.12;letter-spacing:-.025em;font-weight:500;color:var(--ink);text-wrap:balance}

/* ---------- post: figures ----------
   Inline SVG drawn from the design tokens (fill="var(--…)" works inside inline SVG).
   The panel is the mint tint; the dark variant is the teal band used once per
   page elsewhere. Text under 24 units is --ink, --mute, or --red-deep, never bright
   coral — the same rule as the rest of the site. Under 700px a figure scrolls
   sideways inside its own box rather than shrinking its labels below legibility. */
.fig{margin:40px 0 44px;padding:28px 28px 24px;background:var(--bg-2);border:1px solid var(--line)}
.fig-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.fig-head .fig-n{color:var(--red-deep)}
.fig-head .fig-t{font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.fig .art{overflow-x:auto}
.fig svg{display:block;width:100%;height:auto;font-family:var(--font-display)}
.fig svg .lab{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.12em}
.fig svg .lab:not([fill]){fill:var(--mute)}
.fig figcaption{margin-top:16px;font-size:14px;line-height:1.5;color:var(--mute);max-width:720px}
.fig figcaption em{color:var(--ink);font-style:italic}
.fig-dark{background:var(--teal);border-color:transparent}
.fig-dark .fig-head .fig-n,.fig-dark .fig-head .fig-t,.fig-dark figcaption{color:var(--mint)}
.fig-dark .fig-head .fig-t{color:var(--bg)}
.fig-dark svg .lab:not([fill]){fill:var(--mint)}

.post-foot{margin-top:80px;padding-top:48px;border-top:1px solid var(--line)}
.post-foot .btns{display:flex;gap:12px;flex-wrap:wrap}
.post-foot .founders{margin-top:48px}
.post-foot .back{margin:32px 0 0;font-size:14px}
.post-foot .back a{color:var(--ink-2)}
.post-foot .back a:hover{color:var(--ink)}

/* ---------- post: calls to action ----------
   Two per post, both partials (src/_partials/post-cta-top.html, post-cta-end.html).
   The top one is a slim strip between the byline and the hero photo, so it is above
   the fold without pushing the article down; the closing one is a panel on the mint
   tint after the signature, before the team module. Both go to the app's signup
   (absolute URL, other host). The asides carry
   ids (cta-top, cta-end) because analytics.js reports the enclosing id as the
   placement of an app_link_clicked event. Under the closing button: "No credit
   card required." */
.post-cta{max-width:960px}
.post-cta.top{margin:32px 0 0;display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-cta.top p{margin:0;font-size:15px;line-height:1.45;color:var(--ink-2);position:relative;padding-left:20px;flex:1 1 32ch}
.post-cta.top p::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--red)}
.post-cta.top b{color:var(--ink);font-weight:500}
.cta-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:var(--btn);color:var(--btn-ink);font-size:14px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background .2s ease}
.cta-pill:hover{background:var(--btn-hover)}
.post-cta.top + .post-hero{margin-top:40px}
.post-cta.end{margin:56px 0 0;padding:36px 36px 32px;background:var(--bg-2);border:1px solid var(--line);display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:end}
.post-cta.end h2{margin:0;font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:500;text-wrap:balance}
.post-cta.end p{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:44ch}
.post-cta.end .btns{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.post-cta.end .note{font-size:13px;color:var(--mute)}
@media (max-width: 700px){
  .post-cta.top{margin-top:24px}
  .post-cta.top + .post-hero{margin-top:32px}
  .post-cta.end{grid-template-columns:1fr;padding:24px 20px;gap:24px}
  .post-cta.end .btns{align-items:flex-start}
}

@media (max-width: 980px){
  .posts .row{grid-template-columns:1fr;gap:14px}
  .posts .row .idx,.posts .row .read{padding-top:0}
  .post{padding:64px 0 96px}
  .post-hero{margin-top:40px}
  .post-body{margin-top:48px}
}
@media (max-width: 700px){
  .intro{padding:64px 0 48px}
  .posts{padding:56px 0 96px}
  .post-body p{font-size:16px}
  .post-body .pull{padding-left:18px}
  .fig{padding:20px 18px 18px}
  .fig svg{min-width:640px}
  .fig-wide svg{min-width:800px}
}