/* ── featured hero ── */
.hero-feat{position:relative;min-height:min(72vh,620px);background:#0d0d0d;overflow:hidden;
  display:flex;align-items:flex-end;margin-bottom:72px}
.hero-feat .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.38;filter:grayscale(1) contrast(1.15)}
.hero-feat::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(#ffffff14 1px,transparent 1px);background-size:6px 6px}
.hero-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;width:100%;
  padding:0 24px 56px;color:#F5F3EE}
.hero-inner h2{font-size:clamp(30px,4.2vw,52px);font-weight:500;line-height:105%;
  letter-spacing:-1.04px;max-width:16ch;margin:0 0 14px;color:#F5F3EE}
.hero-date{font-family:var(--mono);font-size:12px;letter-spacing:var(--eyebrow-ls);
  text-transform:uppercase;color:#B9B9B9;margin:0 0 26px}

/* ── filters ── */
.all-head{margin-bottom:28px}
.all-head h2{font-size:var(--h2);font-weight:500;letter-spacing:var(--h2-ls);margin:0 0 20px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:var(--eyebrow-ls);
  text-transform:uppercase;padding:9px 16px;border:1px solid var(--grey);border-radius:100px;
  background:transparent;color:var(--secondary);cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.chip:hover{border-color:var(--secondary)}
.chip.is-on{background:var(--secondary);color:var(--bg);border-color:var(--secondary)}

/* ── card grid ── */
.posts{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;
  /* minmax(320px,1fr) is a hard 320px floor, and auto-fill always keeps one
     track, so at a 320px viewport the 272px content box held a 320px card and
     /blog scrolled sideways. min() clamps the floor to the container, which
     changes nothing at any width that already fits the card. WCAG 2.2 SC
     1.4.10 Reflow: no horizontal scroll at 320 CSS px. MODE=reflow is the gate. */
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:40px 32px}
.post{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.post[hidden]{display:none}
.post-img{display:block;aspect-ratio:16/10;background:#0d0d0d;overflow:hidden;border-radius:4px}
.post-img img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.1);transition:transform .6s var(--ease),filter .4s ease}
.post:hover .post-img img{transform:scale(1.04);filter:grayscale(0) contrast(1)}
.post-meta{display:flex;align-items:center;gap:10px;padding:16px 0 8px}
.pill{font-family:var(--mono);font-size:10px;letter-spacing:var(--eyebrow-ls);
  text-transform:uppercase;border:1px solid var(--grey);border-radius:100px;padding:5px 11px}
.post-read{font-family:var(--mono);font-size:10px;letter-spacing:var(--eyebrow-ls);
  text-transform:uppercase;color:var(--static);margin-left:auto}
.post-t{font-size:20px;font-weight:500;line-height:125%;letter-spacing:-.4px;
  transition:opacity .2s ease}
.post:hover .post-t{opacity:.55}
.post-d{font-family:var(--mono);font-size:10px;letter-spacing:var(--eyebrow-ls);
  text-transform:uppercase;color:var(--static);padding-top:8px}

/* ── article ── */
.article{padding-top:8px}
.art-head{margin-bottom:40px}
.art-tags{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.art-date{font-family:var(--mono);font-size:11px;letter-spacing:var(--eyebrow-ls);
  text-transform:uppercase;color:var(--static)}
.art-head h1{font-size:clamp(28px,3.6vw,44px);line-height:108%;letter-spacing:-.88px;
  max-width:20ch;margin:0}
.art-body{max-width:1080px;margin:0 auto;padding:0 24px;display:grid;
  grid-template-columns:200px minmax(0,1fr);gap:56px;align-items:start}
/* top was a flat 32px, which is a 32px gap from the top of the VIEWPORT and the
   header is 99px tall and sticky over it at z-index 100. Measured on
   /blog/blogging-for-seo at scrollY 1400: the rail pinned at y=32 and the 48px
   avatar sat at y 49..97, entirely inside the header's 0..99 band, with
   elementFromPoint at its centre returning header.site. The author image was
   drawn behind the header for every reader on all 15 articles the moment they
   scrolled, which is why it reads as missing. The 32px gap is Dave's and is
   kept; it is now measured from the bottom of the header rather than from the
   top of the window. Only matters above 900px, where the rail stops being
   sticky, but the header is taller below that so a flat number would be worse
   there too. */
.art-author{position:sticky;top:calc(var(--header-h) + 32px);
  border-top:1px solid var(--grey);padding-top:16px}
/* The avatar's disc is painted HERE, not in the SVG, and that is the fix for a
   defect that only exists in dark. `author-dijitally.svg` used to carry an
   opaque `#121010` rect, which is correct on the bone ground and is EXACTLY
   the dark page's own `--bg`. Measured on /blog/local-seo in dark: 2604 of the
   3096 pixels inside the 48px disc were the page colour, 84.1% of the avatar
   invisible, leaving the accent `D` floating with no disc behind it on all 15
   articles. An image cannot read a CSS variable, so a ground baked into the
   file is a ground that cannot follow the theme: the same lesson as
   `--logo-filter`, one asset further on.
   `--secondary` rather than a hex, because it IS #121010 on light and
   reproduces the old rendering exactly. Dark takes `--grey` (#2A2A2A) rather
   than `--secondary` (#FDFEFF): the mark is accent green, which needs a dark
   ground to read, and `--grey` is already what this rule asked for. */
.art-author .av{width:48px;height:48px;border-radius:50%;background:var(--secondary);margin-bottom:12px;
  display:block;object-fit:cover}
.dark .art-author .av{background:var(--grey)}
/* style.css gives .fig a -80px breakout, which suits the single-column .wrap pages.
   In here the article sits in a 200px + 56px + 776px grid that already fills the
   container, so a breakout would run under the author rail. Keep figures to the
   column and carry the emphasis in the vertical rhythm. */
.art-body .fig{margin:48px 0;max-width:100%}
.art-body .fig img{border-radius:4px}
.art-body .fig figcaption{margin-top:10px}
.art-body .pull{margin:44px 0}
.art-by{font-size:15px;font-weight:500;margin:0}
.art-role,.art-read{font-family:var(--mono);font-size:10px;letter-spacing:var(--eyebrow-ls);
  text-transform:uppercase;color:var(--static);margin:2px 0 0}
.share{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:var(--eyebrow-ls);
  text-transform:uppercase;background:none;border:1px solid var(--grey);border-radius:100px;
  padding:8px 14px;cursor:pointer;color:var(--secondary)}
.share:hover{border-color:var(--secondary)}
.art-next{margin-top:72px;border-top:1px solid var(--grey);padding-top:20px}
.art-next a{font-size:26px;font-weight:500;line-height:120%;letter-spacing:-.52px;
  text-decoration:none;display:inline-block;margin-top:6px}
.art-next a:hover{opacity:.55}

/* ── lets chat ── */
.lets-chat{margin:88px 0 0;padding:64px 24px;background:var(--grey);
  background-image:radial-gradient(#ffffff 1px,transparent 1px);background-size:8px 8px}
.lc-card{max-width:760px;margin:0 auto;background:var(--bg);padding:44px}
.lc-card h2{font-size:var(--h2);font-weight:500;line-height:var(--h2-lh);
  letter-spacing:var(--h2-ls);margin:0 0 24px;max-width:14ch}

/* ── footer wordmark ── */
.blog-footer{border-top:1px solid var(--grey);padding-bottom:0}
.blog-footer .wrap a{margin-right:14px}
.wordmark{display:block;max-width:1200px;margin:24px auto 0;padding:0 24px;
  font-size:clamp(56px,13.2vw,176px);font-weight:700;line-height:.86;letter-spacing:-.04em;
  text-decoration:none;color:var(--secondary)}
.wordmark sup{font-size:.16em;vertical-align:super;letter-spacing:0}
/* footer.site a is more specific than .back-to-top, so it was overriding this
   colour and painting muted grey on the mint fill: 4.07:1. Scoped to win. */
footer.site a.back-to-top,
.back-to-top{display:block;text-align:center;background:var(--tech);color:#121010;
  font-family:var(--mono);font-size:11px;letter-spacing:var(--eyebrow-ls);
  text-transform:uppercase;padding:14px;text-decoration:none;margin-top:28px}

@media(max-width:900px){
  .art-body{grid-template-columns:1fr;gap:28px}
  .art-author{position:static;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .art-author .av{margin-bottom:0}
  .art-by,.art-role,.art-read{margin:0}
  .share{margin-top:0}
}
@media(max-width:640px){.lc-card{padding:26px}.lets-chat{padding:40px 16px}}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

nav.site a.is-current{background:var(--secondary);color:var(--bg);padding:6px 10px}
nav.site a.is-current::before{background:var(--bg)}

/* ── summing up ──
   The card that closes nine of the articles. Numbers, titles and descriptions
   are Builder.io's own, recovered from the scrape; the setting is Dave's:
   the mono eyebrow off .art-date, body type off --body, rules off --grey, and
   square corners, since only images take a radius. */
.summing-up{margin:56px 0 0;border-top:1px solid var(--grey);padding-top:20px}
.su-head{font-family:var(--mono);font-size:11px;letter-spacing:var(--eyebrow-ls);
  text-transform:uppercase;color:var(--static);font-weight:400;margin:0 0 4px}
.su-items{list-style:none;margin:0;padding:0;counter-reset:none}
.su-items li{display:grid;grid-template-columns:32px minmax(0,1fr);
  column-gap:16px;padding:20px 0;border-bottom:1px solid var(--grey)}
.su-items li:last-child{border-bottom:0}
.su-n{grid-row:1/span 2;font-family:var(--mono);font-size:11px;
  letter-spacing:var(--eyebrow-ls);color:var(--static);padding-top:3px}
.su-t{font-size:var(--body);font-weight:500;line-height:140%}
.su-d{font-size:var(--body);line-height:var(--body-lh);color:var(--static);margin-top:2px}
@media(max-width:860px){
  .summing-up{margin-top:40px}
  .su-items li{grid-template-columns:24px minmax(0,1fr);column-gap:12px;padding:16px 0}
}

/* ── print ─────────────────────────────────────────────────────────────────
   The rule and the reasoning are in style.css, under "print: the fourth
   rendering". Two grounds on this side are content rather than decoration and
   so opt back in:

   `.hero-feat` is a FULL-BLEED HERO, not a panel on the page: a photograph at
   `opacity: .38` over #0d0d0d, with the headline set in #F5F3EE on top of the
   pair. The <img> prints either way, because an image is content, but drop the
   ground beneath it and the composite is a washed grey field with a 52px
   headline at 1.11:1 across it. Making that text ink instead would leave the
   ink sitting on a photograph, which is not a print fix, it is a different
   design. Measured on /blog: headline 17.53:1 on screen, 1.11:1 on paper, and
   the date line 9.91 and 1.96.

   `.chip.is-on` is the category filter, and it is the same case as `.nav-item`
   and `.filter-pill` on the other side: the fill is the only thing that says
   which category is showing, so printing the chip without it prints the
   question and not the answer. It is 11px type, so the ink is a rounding
   error.

   Everything else here is already tokenised and needs nothing: blog.css
   carries no colour of its own beyond these, which is the same reason it needs
   no `.dark` rules. Count the tokens, not the selectors. */
@media print {
  .hero-feat, .chip.is-on {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}