/* ===================================================================
   Blog, Warm Tech v3.1

   Structure follows the CrazyDi mock-ups, which get the information
   architecture right: category pills, a featured piece, a card grid, and
   an article laid out with a table of contents on one side and an offer
   on the other.

   The skin does not follow them. Those pages sit on white and mint with
   shadowed cards, gradient image blocks and a serif display face. Rule 1
   rules out white, grey and gradient grounds, rule 13 rules out shadows,
   and the face here is Space Grotesk. Definition comes from hairline
   borders, and the accent is Titan Ember.
   =================================================================== */

/* ---------- pills ---------- */
.pill-cluster{background:var(--arctic);color:var(--carbon-ink)}
.dark .pill-cluster{background:rgba(248,200,137,.16);color:var(--amber-glow)}

/* ---------- breadcrumb ---------- */
.crumbs{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:22px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--ember-text);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{opacity:.4}

/* ---------- filter pills ----------
   Sticky under the nav. The nav is 57px tall at desktop; using a token
   keeps the two in step if either changes. */
:root{--nav-h:57px}
.pillbar{position:sticky;top:var(--nav-h);z-index:30;background:var(--warm-sand);
  border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light)}
.pillbar__inner{display:flex;gap:10px;padding-top:14px;padding-bottom:14px;
  overflow-x:auto;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}
.pillbar__inner::-webkit-scrollbar{display:none}
.fpill{font-family:'Inter',sans-serif;font-size:.86rem;padding:9px 18px;border-radius:100px;
  border:1px solid var(--line-light);background:transparent;color:var(--carbon-ink);
  cursor:pointer;transition:.15s}
.fpill:hover{border-color:var(--ember)}
.fpill.is-on{background:var(--carbon-ink);color:var(--warm-sand);border-color:var(--carbon-ink)}

/* ---------- search ---------- */
.blogsearch{margin-top:30px;max-width:520px}
.blogsearch input{width:100%;font-family:'Inter',sans-serif;font-size:1rem;
  padding:15px 20px;border-radius:var(--r-btn);border:1px solid var(--line-light);
  background:transparent;color:var(--carbon-ink)}
.blogsearch input::placeholder{color:rgba(26,26,26,.45)}
.blogsearch input:focus{outline:none;border-color:var(--ember)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- featured ---------- */
.feature{display:grid;grid-template-columns:1fr .82fr;gap:40px;align-items:center;
  border:1px solid var(--line-light);border-radius:var(--r-panel);padding:38px;
  text-decoration:none;color:inherit;transition:.18s}
.feature:hover{border-color:var(--ember);transform:translateY(-3px)}
.feature h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:14px 0 12px}
.feature p{color:rgba(26,26,26,.76);max-width:52ch}
.feature--text{grid-template-columns:1fr}
.feature--text h2{max-width:20ch}
/* 16:9, because that is the shape covers are made in. A 4:3 slot
   cropped the sides and ate the last word of the cover's own title. */
.feature__vis{aspect-ratio:16/9;border-radius:12px;background-size:cover;background-position:center;
  border:1px solid var(--line-light)}
@media(max-width:860px){.feature{grid-template-columns:1fr;gap:26px;padding:28px}}

/* ---------- card grid ---------- */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
@media(max-width:900px){.postgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.postgrid{grid-template-columns:1fr}}
.postcard{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
  border:1px solid var(--line-light);border-radius:var(--r-card);padding:26px;transition:.18s}
.postcard:hover{border-color:var(--ember);transform:translateY(-2px)}
.postcard h3{font-size:1.14rem;margin:4px 0 0}
.postcard p{font-size:.94rem;color:rgba(26,26,26,.74);margin:0}
.postcard__meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(26,26,26,.55);margin-top:auto;padding-top:12px}
.postcard .pill{align-self:flex-start;margin-bottom:2px}
.postcard--cover{padding:0;overflow:hidden}
.postcard--cover .pill,.postcard--cover h3,.postcard--cover p,.postcard--cover .postcard__meta{margin-left:24px;margin-right:24px}
.postcard--cover .pill{margin-top:22px}
.postcard--cover .postcard__meta{margin-bottom:22px}
.postcard__vis{display:block;aspect-ratio:16/9;background-size:cover;background-position:center;
  border-bottom:1px solid var(--line-light)}
.linkbtn{background:none;border:none;padding:0;font:inherit;color:var(--ember-text);
  cursor:pointer;text-decoration:underline}

/* ---------- article ---------- */
.post-head{padding:88px 0 40px}
.post-head h1,.blog-h1{font-size:clamp(2.1rem,4.4vw,3.15rem);line-height:1.16;
  letter-spacing:-.015em;max-width:24ch;margin-top:22px}
.post-head .lede{margin-top:26px;max-width:62ch;color:rgba(26,26,26,.76);font-size:1.15rem}
.post-head .pill{margin-bottom:4px}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(26,26,26,.6)}

.post-hero{aspect-ratio:16/9;border-radius:var(--r-panel);background-size:cover;
  background-position:center;border:1px solid var(--line-light);margin-top:40px}

/* Wider than the site wrap. At 1120 the reading column lands near 50
   characters, which is too tight for long-form; this puts it near 70. */
.post-grid{max-width:1240px;display:grid;grid-template-columns:220px minmax(0,1fr) 220px;gap:44px;
  align-items:start;padding-top:56px;padding-bottom:40px}
@media(max-width:1080px){
  .post-grid{grid-template-columns:minmax(0,1fr) 260px;gap:40px}
  .toc{display:none}
}
@media(max-width:840px){
  .post-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .post-cta{position:static}
}

/* table of contents */
.toc{position:sticky;top:calc(var(--nav-h) + 28px)}
.toc__label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember-text);margin-bottom:14px}
.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-light)}
.toc li a{display:block;padding:8px 0 8px 16px;margin-left:-1px;font-size:.9rem;
  line-height:1.4;text-decoration:none;color:rgba(26,26,26,.66);
  border-left:2px solid transparent}
.toc li a:hover{color:var(--carbon-ink)}
.toc li a.is-current{color:var(--carbon-ink);font-weight:600;border-left-color:var(--ember)}

/* body */
.post-body{font-size:1.06rem;line-height:1.72;max-width:68ch}
.post-body h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin:44px 0 14px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.post-body h3{font-size:1.16rem;margin:30px 0 10px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.post-body p{margin-bottom:20px}
.post-body a{color:var(--ember-text);text-underline-offset:3px}
.post-body ul,.post-body ol{margin:0 0 22px;padding-left:0;list-style:none}
.post-body ol{counter-reset:n}
.post-body li{position:relative;padding-left:28px;margin-bottom:12px}
.post-body ul li::before{content:"";position:absolute;left:0;top:.68em;
  width:11px;height:2px;background:var(--ember)}
.post-body ol li{counter-increment:n}
.post-body ol li::before{content:counter(n);position:absolute;left:0;top:.1em;
  font-family:'JetBrains Mono',monospace;font-size:.76rem;color:var(--ember-text)}
.post-body blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:3px solid var(--ember)}
.post-body blockquote p{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:1.22rem;line-height:1.4;letter-spacing:-.01em;margin:0}
.post-body code{font-family:'JetBrains Mono',monospace;font-size:.88em;
  background:rgba(26,26,26,.05);border:1px solid var(--line-light);border-radius:4px;padding:1px 6px}
.post-body figure{margin:32px 0}
.post-body figure img{width:100%;border-radius:12px;border:1px solid var(--line-light)}
.post-body figcaption{font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(26,26,26,.55);margin-top:10px}
.post-body hr{border:none;border-top:1px solid var(--line-light);margin:38px 0}

/* The extractable answer. Set apart because it is doing two jobs: it is the
   first thing a skimming reader takes, and it is the block an answer engine
   lifts when it quotes the piece. */
.quick-answer{border-left:3px solid var(--ember);padding:2px 0 2px 20px;
  margin:0 0 22px;font-size:1.02rem}
.quick-answer strong:first-child{font-family:'JetBrains Mono',monospace;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ember-text);
  display:block;margin-bottom:6px;font-weight:600}

.faq-q{font-size:1.08rem;margin:30px 0 8px}
.faq-q + p{margin-bottom:0}

/* offer rail */
.post-cta{position:sticky;top:calc(var(--nav-h) + 28px);
  border:1px solid var(--line-light);border-radius:var(--r-card);padding:26px}
.post-cta .mono{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember-text);margin-bottom:12px}
.post-cta h3{font-size:1.1rem;margin-bottom:10px}
.post-cta p{font-size:.92rem;color:rgba(26,26,26,.74);margin-bottom:18px}
.post-cta .btn{padding:12px 22px;font-size:.9rem}