/* Blog: the index at /blog and each article at /blog/<slug>.
   Built on site.css: same tokens, fonts, page head, kicker, tick row and sub-CTA. Everything
   here is prefixed blog- so nothing outside the blog is affected. Loaded on blog pages only. */

/* ---------- index: page head ---------- */
/* The heading uses the page-head h1 styling shared with product, pricing, security and about. */
.blog-feature h2 em{font-style:italic;color:var(--emerald)}
/* On cream, italics are ink like the live pages' headings. Green italic is only for dark panels. */
.blog-head h1 em,.blog-article h1 em,.blog-prose h2 em{font-style:italic;color:inherit}
.blog-feature h2 em{color:#8FE0BE}
.blog-head .hero-note{justify-content:center}

/* Margin doodles either side of the heading: decorative, hidden from screen readers.
   Each sits a fixed 32px from the heading's widest line. That line is 10.56x the heading's
   font size (min(56px, 4.6vw)), so if the heading copy changes, re-measure that ratio. */
.blog-headline{position:relative}
.blog-doodle{position:absolute;top:50%;pointer-events:none;transform:translateY(-50%);
  animation:blog-float 7s ease-in-out infinite}
.blog-doodle-pencil{width:150px;right:calc(50% + min(56px,4.6vw) * 5.28 + 32px)}
.blog-doodle-mug{width:120px;left:calc(50% + min(56px,4.6vw) * 5.28 + 32px);animation-duration:8s;animation-delay:-3s}
@keyframes blog-float{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 5px))}}
.blog-doodle .d-line{stroke:var(--ink-2)}
.blog-doodle .d-deep{fill:var(--emerald-deep)}
.blog-doodle .d-band{fill:var(--ink-2)}
.blog-doodle .d-coffee{fill:#8A5A38}
.blog-doodle .d-wood{fill:var(--wash-amber)}
.blog-doodle .d-lead{fill:var(--ink)}
.blog-doodle .d-steam{stroke:var(--ink-2)}
.blog-doodle .d-handle{stroke:var(--emerald-deep)}
.blog-doodle .d-shadow{fill:var(--cream-deep)}
.blog-doodle .d-tick{stroke:var(--emerald)}
.blog-doodle .d-hand{stroke:var(--ink)}
.blog-doodle .d-cross{stroke:var(--coral)}
.blog-doodle .d-fold{stroke:var(--ink-2)}
/* Article margin doodles (any article): the doodle sits level with its .blog-anchor element,
   32px outside the text column, and shrinks with the margin so it never reaches the text. */
.blog-anchor{position:relative}
.blog-doodle-left,.blog-doodle-right{width:clamp(80px,calc((100vw - 692px) / 2 - 56px),120px)}
.blog-doodle-left{right:calc(100% + 32px)}
.blog-doodle-right{left:calc(100% + 32px);animation-duration:8s;animation-delay:-3s}
@media (max-width:960px){ .blog-doodle{display:none} }
@media (prefers-reduced-motion:reduce){ .blog-doodle{animation:none} }

/* ---------- index: featured article ---------- */
.blog-body{padding:34px 0 0}
.blog-feature{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);border-radius:28px;overflow:hidden;
  background:var(--forest);color:#fff;min-height:400px;box-shadow:var(--shadow-3);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.blog-feature:hover{transform:translateY(-3px)}
.blog-fcopy{padding:46px 44px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.blog-fcopy h2{font-size:clamp(25px,3vw,36px);font-weight:800;letter-spacing:-.025em;line-height:1.12;margin:0}
.blog-fcopy p{color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.62;max-width:44ch;font-weight:500}
.blog-feature .blog-meta{color:rgba(255,255,255,.62)}
.blog-readmore{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:#fff;margin-top:4px}
.blog-readmore i,.blog-go i{font-style:normal;transition:transform .25s var(--ease)}
.blog-feature:hover .blog-readmore i,.blog-card:hover .blog-go i{transform:translateX(4px)}

.blog-fart{background:linear-gradient(165deg,#0F4A38,#072A1F);padding:34px 30px;display:flex;
  flex-direction:column;justify-content:center;gap:10px}
.blog-uicard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:11px 15px}
.blog-uicard-h{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:#8FE0BE;margin-bottom:6px;font-weight:500}
.blog-log{display:flex;gap:12px;font-size:12.5px;padding:5px 0;color:#fff;align-items:baseline;white-space:nowrap}
.blog-log span{overflow:hidden;text-overflow:ellipsis}
.blog-log b{font-family:'JetBrains Mono',monospace;color:#8FE0BE;font-weight:500;width:72px;flex:none;font-size:11px}
.blog-log.bad span{color:#F2B8A2}
.blog-log.good span{color:#8FE0BE}
.blog-notif{display:flex;align-items:center;gap:11px;background:#fff;color:var(--ink);border-radius:14px;
  padding:11px 14px;box-shadow:0 16px 34px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.18)}
.blog-av{width:32px;height:32px;border-radius:50%;background:var(--emerald);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.blog-notif b{display:block;font-size:13px;font-weight:700}
.blog-notif span{font-size:11.5px;color:var(--ink-2)}
.blog-notif .blog-av{font-size:12px;color:#fff}
.blog-notif .t{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;white-space:nowrap}

/* ---------- index: filters and cards ---------- */
.blog-tag{display:inline-flex;width:fit-content;align-items:center;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 11px;
  background:var(--wash-green);color:var(--emerald-deep)}
.blog-feature .blog-tag{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#8FE0BE}
.blog-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.blog-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}

.blog-gridhead{display:flex;align-items:center;justify-content:space-between;margin:56px 0 20px;gap:16px;flex-wrap:wrap}
.blog-gridhead h2{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0}
.blog-filters{display:flex;gap:8px;flex-wrap:wrap}
.blog-chip{font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink);border:1px solid var(--line);
  background:var(--card);padding:9px 16px;border-radius:999px;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.blog-chip:hover{border-color:var(--emerald);box-shadow:var(--shadow-1)}
.blog-chip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fff}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog-card{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.blog-card[hidden]{display:none}
a.blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
/* The panel takes the illustrations' own 360:196 shape so they fill it edge to edge (a fixed
   196px height letterboxed them with a thin white band top and bottom). */
.blog-art{position:relative;aspect-ratio:360/196;overflow:hidden}
/* The light illustration panel sits on a white card, so a hairline separates it, as on the site's white cards. */
.blog-art-light::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.blog-art svg{width:100%;height:100%;display:block;transition:transform .5s var(--ease)}
a.blog-card:hover .blog-art svg{transform:scale(1.045)}
.blog-cbody{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-card h3{font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.25;margin:0}
.blog-card p{font-size:14.5px;color:var(--ink-2);line-height:1.6;flex:1;font-weight:500}
.blog-go{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--emerald)}
.blog-soon{font-size:13px;font-weight:700;color:var(--ink-2)}
.blog-empty{margin:6px 0 0;padding:26px;border:1px dashed var(--line);border-radius:22px;text-align:center;
  color:var(--ink-2);font-weight:500}

/* ---------- article ---------- */
.blog-article{padding-top:150px}
.blog-narrow{max-width:740px;margin:0 auto;padding:0 24px}
.blog-crumbs{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);font-weight:500}
.blog-crumbs a{display:inline-flex;align-items:center;min-height:24px;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.blog-crumbs a:hover{color:var(--emerald-deep)}
.blog-crumbs [aria-current]{color:var(--emerald);font-weight:700}
.blog-placeholder{margin:20px 0 0;padding:12px 16px;border-radius:14px;background:var(--wash-amber);
  color:#7A4A04;font-size:13.5px;line-height:1.55;font-weight:500;border:1px solid rgba(217,119,6,.25)}
.blog-placeholder b{font-weight:800}
.blog-article h1{font-size:clamp(31px,4.8vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:18px 0 22px}
.blog-byline{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.blog-ava{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:var(--forest)}
.blog-ava img{width:100%;height:100%;object-fit:cover;display:block}
.blog-who b{display:block;font-size:15px;font-weight:700}
.blog-who span{font-size:13px;color:var(--ink-2);font-weight:500}
.blog-mins{margin-left:auto;font-size:13.5px;color:var(--ink-2);font-weight:500}

.blog-prose{padding-top:30px;font-size:17px;line-height:1.75;color:var(--ink)}
.blog-prose p{margin-bottom:22px}
.blog-prose .blog-lede{font-size:19.5px;line-height:1.6;font-weight:600}
.blog-prose .blog-note{font-size:14px;color:var(--ink-2);font-style:italic;margin-top:30px}
/* Links in the body: the same underlined green as the FAQ and privacy page links. */
.blog-prose a{color:var(--emerald-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.blog-prose a:hover{color:var(--emerald)}
.blog-prose h2{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:40px 0 14px}
.blog-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.blog-stats div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow-1)}
.blog-stats b{display:block;font-size:28px;font-weight:800;color:var(--emerald);letter-spacing:-.02em;line-height:1.2}
.blog-stats span{display:block;margin-top:4px;font-size:13px;color:var(--ink-2);line-height:1.45;font-weight:500}
.blog-logpanel{margin:30px 0;background:var(--forest);border-radius:20px;padding:22px 24px;color:#fff}
.blog-logpanel .blog-log{font-size:13.5px;white-space:normal}
.blog-logpanel .blog-log b{width:92px}
/* Desktop: the stat row and log panel break out of the text column to about 900px, centred. */
@media (min-width:961px){
  .blog-prose .blog-stats,.blog-prose .blog-logpanel{width:min(900px,calc(100vw - 48px));
    margin-left:calc(50% - min(900px,calc(100vw - 48px)) / 2)}
}
.blog-pull{margin:34px 0;padding:4px 0 4px 24px;border-left:3px solid var(--emerald)}
.blog-pull blockquote p{font-size:21px;line-height:1.5;font-weight:600;letter-spacing:-.01em;font-style:italic;margin:0}
.blog-pull figcaption{margin-top:10px;font-size:13.5px;color:var(--ink-2);font-weight:500}

/* end call to action: the site's sub-CTA with the home page's two buttons */
.blog-cta .btns{position:relative;z-index:1;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.blog-cta .btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.blog-cta .btn-ghost:hover{background:rgba(255,255,255,.1);box-shadow:none}
.blog-cta .fine{position:relative;z-index:1;margin:20px 0 0;font-size:13px;color:rgba(255,255,255,.65)}

/* ---------- smaller screens ---------- */
@media (max-width:920px){ .blog-grid{grid-template-columns:1fr 1fr} }
@media (max-width:820px){
  .blog-article{padding-top:34px}
  .blog-crumbs a{min-height:44px;padding-right:6px}
  .blog-body{padding-top:24px}
  .blog-feature{grid-template-columns:minmax(0,1fr);min-height:0}
  .blog-fcopy{padding:30px 24px}
  .blog-fart{padding:24px 18px}
  .blog-gridhead{margin-top:44px}
}
@media (max-width:620px){
  .blog-grid{grid-template-columns:1fr}
  .blog-stats{grid-template-columns:1fr}
  .blog-mins{margin-left:0;width:100%}
  .blog-prose{font-size:16.5px}
  .blog-pull blockquote p{font-size:19px}
  .blog-cta .btn{width:100%;justify-content:center}
  .blog-fart .blog-log{white-space:normal}
  .blog-notif{flex-wrap:wrap}
  .blog-notif .t{margin-left:43px}
}
@media (prefers-reduced-motion:reduce){
  .blog-feature,.blog-card,.blog-art svg{transition:none}
}

/* ---------- dark heads (body.page-dark, set per page) ---------- */
/* The index head gets the shared page-dark treatment from site.css; these are
   the blog-only pieces. The tick row goes light, and the head doodles trade
   their cream-page colours for ones that read on forest: the shadow darkens,
   the pencil line and the steam lighten, the deep green mug brightens to
   emerald. The article-body margin doodles sit on cream and keep their colours. */
.page-dark .blog-head .hero-note{color:rgba(255,255,255,.78)}
.page-dark .blog-head .hero-note .mini{background:rgba(255,255,255,.15);color:#8FE0BE}
.page-dark .blog-head .blog-doodle .d-shadow{fill:rgba(0,0,0,.28)}
.page-dark .blog-head .blog-doodle .d-line{stroke:rgba(255,255,255,.55)}
.page-dark .blog-head .blog-doodle .d-steam{stroke:rgba(255,255,255,.6)}
.page-dark .blog-head .blog-doodle .d-deep{fill:var(--emerald)}
.page-dark .blog-head .blog-doodle .d-handle{stroke:var(--emerald)}

/* The article: its header sits in a full-width forest band with the shared
   glow; the prose below stays on cream, untouched. */
.page-dark .blog-article{padding-top:0}
.blog-crown{padding:150px 0 56px;color:#fff;
  background:radial-gradient(52% 60% at 50% 40%,rgba(15,159,107,.30),transparent 72%),var(--forest)}
.page-dark .blog-crown .blog-crumbs,.page-dark .blog-crown .blog-crumbs a{color:rgba(255,255,255,.65)}
.page-dark .blog-crown .blog-crumbs a:hover{color:#fff}
.page-dark .blog-crown .blog-crumbs [aria-current]{color:#8FE0BE}
.page-dark .blog-crown h1{color:#fff}
.page-dark .blog-crown h1 em{color:#8FE0BE}
.page-dark .blog-crown .blog-byline{border-color:rgba(255,255,255,.18)}
.page-dark .blog-crown .blog-who b{color:#fff}
.page-dark .blog-crown .blog-who span,.page-dark .blog-crown .blog-mins{color:rgba(255,255,255,.65)}
.page-dark .blog-prose{padding-top:44px}
@media (max-width:820px){ .blog-crown{padding:38px 0 44px} }