/* ============================================================
   BLOG: /blog/ and each post. Every newsletter also lives here as a longer post (the email's "View in browser" lands on it).
   Built on site.css (tokens, nav, footer, gauges, .gly-* comparison rows); this file only adds the article column and its parts.
   ============================================================ */
.blog main{padding:0 0 8px;overflow:hidden}
.bl-wrap{max-width:calc(720px + 2*var(--gut));margin:0 auto;padding-inline:var(--gut)}
.bl-wide{max-width:calc(1040px + 2*var(--gut));margin:0 auto;padding-inline:var(--gut)}

/* ---- post header ---- */
.bl-head{padding-block:clamp(132px,13vw,190px) clamp(28px,4vw,44px)}
.bl-crumbs{display:flex;gap:8px;align-items:center;margin:0 0 22px;font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.bl-crumbs a{color:var(--umber)}
.bl-crumbs a:hover{color:var(--ink)}
.bl-head h1{font-size:clamp(44px,6.4vw,84px);line-height:.98;letter-spacing:-.045em;margin:14px 0 0}
.bl-head h1 .disp,.bl-body h2 .disp,.bl-close h2 .disp,.bl-index h1 .disp{font-family:var(--display);font-weight:900;letter-spacing:-.01em;font-size:1.02em;line-height:inherit}
.bl-dek{margin:20px 0 0;font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--umber);max-width:34ch}
.bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:30px 0 0;padding-top:20px;border-top:1px solid var(--rule-light);font-size:14px;color:var(--umber)}
.bl-by{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:600}
.bl-by img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.bl-by span{display:block;font-weight:400;font-size:13px;color:var(--umber)}
.bl-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--stone)}
.bl-sharebtn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;font-weight:600;font-size:14px;color:var(--ink)}
.bl-sharebtn:hover{background:var(--ink);color:var(--parchment)}
.bl-sharebtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.bl-hero{margin:0;border-radius:18px;overflow:hidden;background:var(--surface);aspect-ratio:16/9}
.bl-hero img,.bl-hero video{width:100%;height:100%;object-fit:cover}
.bl-hero{position:relative}
.bl-hero-vid{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .8s var(--ease-out)}
.bl-hero-vid.playing{opacity:1}
@media (prefers-reduced-motion:reduce){.bl-hero-vid{display:none}}
.bl-hero figcaption{position:absolute;left:-9999px}

/* ---- body copy ---- */
.bl-body{padding-block:clamp(40px,6vw,72px) 0}
.bl-body > p:not(.kicker),.bl-sec > p:not(.kicker){font-size:clamp(17px,1.25vw,19px);line-height:1.7;color:var(--ink-2);margin:0 0 1.15em;max-width:66ch}
.bl-body .lead{font-size:clamp(21px,1.8vw,25px);line-height:1.45;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.bl-body .em{font-weight:600;color:var(--ink)}
.bl-body h2{font-size:clamp(30px,3.2vw,44px);line-height:1.04;letter-spacing:-.035em;margin:0 0 18px}
.bl-quote{margin:clamp(28px,4vw,44px) 0;padding:4px 0 4px 24px;border-left:4px solid var(--yellow);border-radius:0}
.bl-quote p{margin:0;font-size:clamp(26px,2.6vw,36px);line-height:1.18;font-weight:600;letter-spacing:-.03em;color:var(--ink);max-width:24ch}
.bl-quote .disp{font-family:var(--display);font-weight:900;letter-spacing:-.01em;white-space:nowrap}

/* ---- sections ---- */
.bl-sec{padding-block:clamp(48px,7vw,88px) 0}
.bl-sec .kicker{margin-bottom:14px}
.bl-sec .lede{font-size:16px;line-height:1.6;color:var(--umber);max-width:60ch;margin:0 0 8px}

/* the result card: the site's gauge and comparison rows on a white card */
.bl-result{margin-top:28px;background:#fff;border-radius:18px;padding:clamp(22px,3.4vw,40px)}
.bl-result .gauge-list{margin-top:0;border-top:0}
.bl-result .gauge{border-bottom:1px solid var(--rule-light);padding:6px 0 30px;grid-template-columns:minmax(150px,1fr) minmax(0,2.4fr) minmax(150px,1fr)}
.bl-result .gly-compare{margin-top:28px}
.bl-result .gly-row{grid-template-columns:minmax(210px,1.25fr) minmax(0,2fr) minmax(104px,.7fr);gap:22px}
.bl-result .gly-val{padding-left:0;text-align:right}
.bl-result .gly-row.ours .gly-val{color:var(--ink);font-weight:600}
.bl-result .gly-track{background:var(--surface)}
.bl-result .gly-icon{background:var(--parchment)}
.bl-fine{margin:22px 0 0;font-size:12.5px;line-height:1.6;color:var(--stone);max-width:80ch}
.bl-fine a{color:var(--umber);text-decoration:underline}
@media (max-width:900px){.bl-result .gauge{grid-template-columns:1fr;gap:30px;padding:30px 0 26px}}
@media (max-width:640px){.bl-result .gly-row{grid-template-columns:1fr;row-gap:6px}.bl-result .gly-val{text-align:left}}

/* infographics (the newsletter app's infographic blocks, Oct 15): on the same card, a stat is the gauge row in umber (not the result's green), bars
   are the comparison rows with ours in ink, and steps are a journey: a solid umber line through white stops, the last one filled ink. Each part is
   a .reveal that blog.js shows as it scrolls in; the draft preview shows them landed (BLOG_PREVIEW_CSS) */
.bl-result > .bl-ig:not(:first-child){margin-top:36px}
.bl-ig .gly-kicker{margin:0 0 18px}
.bl-ig-head{margin:0 0 20px}
.bl-result .bl-ig .gauge{border-bottom:0;padding:30px 0 4px}
.bl-ig .g-zero{position:absolute;left:0;top:-24px;font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.06em;color:var(--stone);white-space:nowrap}
@media (max-width:900px){.bl-ig .g-limit{left:auto;right:0}}   /* the track's end label stays over its end: its start label holds the left */
.bl-ig .g-fill{background:var(--umber)}
.bl-ig .gauge.in .g-fill{width:var(--to)}
.bl-ig .g-tag{color:var(--umber);border-color:var(--umber)}
.bl-ig .gauge.in .g-tag,.bl-ig .gauge.in .g-detail,.bl-ig-bot .g-tag,.bl-ig-bot .g-detail{opacity:1;transform:none}
.bl-ig .gly-row.ours .gly-fill{background:var(--ink)}
.bl-ig-bot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:22px 0 0}
.bl-ig-note{margin:20px 0 0;font-size:14.5px;line-height:1.55;color:var(--umber);max-width:62ch}
.bl-ig-note sup a{color:inherit}
.ig-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));position:relative}
.ig-steps::before{content:"";position:absolute;top:12px;height:4px;left:calc(50% / var(--n,5));right:calc(50% / var(--n,5));border-radius:999px;background:var(--umber);transform-origin:left center;transform:scaleX(0);transition:transform 1.1s var(--ease-out) .15s}
.ig-steps.in::before{transform:none}
.ig-steps li{position:relative;min-width:0;padding:0 6px;text-align:center}
.ig-stop{display:block;position:relative;box-sizing:border-box;width:28px;height:28px;margin:0 auto 14px;border-radius:50%;background:#fff;border:2px solid var(--umber)}
.ig-steps li.end .ig-stop{background:var(--ink);border-color:var(--ink)}
.ig-steps b{display:block;font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.ig-steps li > span{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--umber)}
@media (max-width:640px){   /* a column: each stop joined to the next by its own length of line */
  .ig-steps{grid-template-columns:1fr;row-gap:20px}
  .ig-steps::before{display:none}
  .ig-steps li{padding:4px 0 0 44px;min-height:28px;text-align:left}
  .ig-steps li:not(:last-child)::after{content:"";position:absolute;left:12px;top:14px;width:4px;height:calc(100% + 20px);background:var(--umber)}
  .ig-stop{position:absolute;z-index:1;left:0;top:0;margin:0}
}
@media (prefers-reduced-motion:reduce){.ig-steps::before{transform:none;transition:none}}

/* two questions */
.bl-qs{list-style:none;margin:26px 0 30px;padding:0;border-top:1px solid var(--rule-light)}
.bl-qs li{display:grid;grid-template-columns:44px 1fr;gap:0 8px;padding:24px 0;border-bottom:1px solid var(--rule-light)}
.bl-qs .snum{font-size:10.5px;color:var(--stone);padding-top:9px}
.bl-qs h3{margin:0;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.025em}
.bl-qs p{margin:6px 0 12px;font-size:16px;line-height:1.5;color:var(--umber)}
.bl-qs .ours{display:inline-block;font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:#3E7349;border-radius:999px;padding:4px 9px 3px}

/* how we test */
.bl-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bl-steps li{background:#fff;border-radius:14px;padding:22px 22px 24px}
.bl-steps .snum{font-size:10.5px;color:var(--stone)}
.bl-steps h3{margin:10px 0 8px;font-size:19px;letter-spacing:-.015em}
.bl-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--umber)}
@media (max-width:640px){.bl-steps{grid-template-columns:1fr}}

/* closing card: the endcap, the CTA, the signature */
.bl-close{margin-top:clamp(56px,8vw,96px);background:var(--ink);color:var(--on-dark);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.bl-close figure{margin:0;min-height:100%}
.bl-close figure img{width:100%;height:100%;object-fit:cover}
.bl-close-copy{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.bl-close .kicker{align-self:flex-start;background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.bl-close h2{font-size:clamp(28px,2.8vw,38px);line-height:1.08;letter-spacing:-.03em;margin:14px 0 0;color:var(--on-dark)}
.bl-close p:not(.kicker){margin:14px 0 0;font-size:15.5px;line-height:1.55;color:var(--on-dark-soft)}
.bl-close .cta-row{margin-top:24px}
.bl-sig{margin-top:30px}
.bl-sig img{width:150px;height:auto}
.bl-sig p{margin:8px 0 0;color:var(--on-dark);font-weight:600;font-size:16px}
.bl-sig span{display:block;font-weight:400;font-size:13px;color:var(--on-dark-faint)}
@media (max-width:860px){.bl-close{grid-template-columns:1fr}.bl-close figure{aspect-ratio:3/2}}

/* share panel (#share: the email's "Share with a friend" lands here) */
.bl-share{margin-top:clamp(40px,6vw,64px);padding:clamp(24px,3.4vw,36px);border-radius:18px;background:var(--surface);scroll-margin-top:110px}
.bl-share h2{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.025em;margin:0}
.bl-share > p{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--umber);max-width:56ch}
.bl-share-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.bl-share-row a,.bl-share-row button{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap;cursor:pointer}
.bl-share-row a:hover,.bl-share-row button:hover{background:var(--ink);color:var(--parchment)}
.bl-share-row .primary{background:var(--ink);color:var(--parchment)}
.bl-share-row .primary:hover{background:var(--ink-2)}
.bl-share-row svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bl-share-msg{min-height:1.4em;margin:12px 0 0;font-size:14px;color:var(--umber)}
.bl-share:target{outline:2px solid var(--yellow);outline-offset:4px}

/* sources */
.bl-sources{margin-top:clamp(48px,6vw,72px);padding-top:24px;border-top:1px solid var(--rule-light)}
.bl-sources h2{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--umber);margin:0 0 14px}
.bl-sources ol{margin:0;padding-left:20px;display:grid;gap:10px}
.bl-sources li{font-size:13px;line-height:1.55;color:var(--umber)}
.bl-sources a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.bl-end{padding-bottom:clamp(64px,9vw,120px)}

/* ---- /blog/ index ---- */
.bl-index h1{font-size:clamp(48px,7vw,96px);line-height:.96;letter-spacing:-.045em;margin:14px 0 0}
.bl-cards{list-style:none;margin:0 auto;padding-top:0;padding-bottom:clamp(64px,9vw,120px);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:22px}
.bl-card a{display:grid;gap:0;background:#fff;border-radius:18px;overflow:hidden;color:var(--ink);height:100%;transition:transform .5s var(--ease-out)}
.bl-card a:hover{transform:translateY(-3px)}
.bl-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.bl-card .in{padding:22px 22px 26px;display:grid;gap:10px;align-content:start}
.bl-card .kicker{justify-self:start;margin:0}
.bl-card h2{font-size:26px;line-height:1.06;letter-spacing:-.03em;margin:4px 0 0}
.bl-card h2 .disp{font-family:var(--display);font-weight:900;letter-spacing:-.01em}
.bl-card p:not(.kicker){margin:0;font-size:15px;line-height:1.55;color:var(--umber)}
.bl-card time{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
@media (prefers-reduced-motion:reduce){.bl-card a{transition:none}}