/* =====================================================================
   Ask Moiz · v3 Kinetic Bento · blog.css
   The blog index and the article pages. Loads after site.css and pages.css and only extends them:
   the yellow cover (.pg-hero), the long-form grid with sticky contents (.legal, .toc, .prose),
   tiles, stickers, chips, the pressable tile (.press) and the newsletter form (.mini).

   Contents
    1  Cover additions (chips, byline, back link)
    2  Index: featured post
    3  Index: filter row and post grid (live cards, coming-soon cards)
    4  Newsletter strip
    5  Article: pull quote, data callout, comparison, checklist
    6  Article: next-step tiles and related posts
    7  Motion + reduced motion
   ===================================================================== */

/* ---------- 1. Cover additions ---------- */
.bl-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 14px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ink);
}
.bl-back .i { width: 18px; height: 18px; transform: scaleX(-1); transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .bl-back:hover .i { transform: scaleX(-1) translateX(3px); } }
.bl-chips { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.bl-chips .chip { min-height: 32px; padding: 4px 12px; font-size: 13px; font-weight: 700; }
.bl-hero .pg-h1 { max-width: 20ch; font-size: clamp(32px, 2.6vw + 20px, 60px); line-height: 0.98; }
.bl-hero--index .pg-h1 { max-width: 14ch; font-size: clamp(36px, 3.4vw + 20px, 72px); }
.bl-byline { display: flex; align-items: center; gap: 12px; }
.bl-byline img { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; object-fit: cover; }
.bl-byline b { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; }
.bl-byline span { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink-3); }
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 26px; }
.bl-meta .sticker { gap: 6px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.bl-meta .sticker .i { width: 15px; height: 15px; }

/* ---------- 2. Index: featured post ---------- */
.bl-feat { padding: 48px 0 0; }
.bl-feat .press > .tile { display: grid; gap: 28px; padding: 24px 20px 26px; }
.bl-feat__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.bl-feat__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bl-feat__top .chip { min-height: 32px; padding: 4px 12px; font-size: 13px; font-weight: 700; }
.bl-feat__h {
  font-size: clamp(28px, 1.9vw + 18px, 48px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em;
  text-transform: uppercase; text-wrap: balance; max-width: 18ch; color: #fff;
}
.bl-feat__h em { font-style: normal; color: var(--y); }
.bl-feat__dek { color: var(--n300); font-size: var(--t-lead); line-height: 1.5; max-width: 46ch; }
.bl-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; font-weight: 600; color: var(--n400); font-variant-numeric: tabular-nums; }
.bl-when span { display: inline-flex; align-items: center; gap: 6px; }
.bl-when .i { width: 16px; height: 16px; }
.bl-feat__go { margin-top: 6px; }
.bl-feat__go::before { display: none; }

/* the "what to fix first" card: real content from the post, a white slip on the ink tile */
.bl-fix { position: relative; align-self: center; justify-self: center; width: min(100%, 420px); margin: 10px 6px 6px 0; }
.bl-fix__note { position: absolute; z-index: 1; top: -26px; right: 4px; font-size: 30px; color: var(--y); transform: rotate(-6deg); }
.bl-fix__card {
  position: relative; padding: 20px 20px 18px; border: 2px solid var(--ink); border-radius: var(--r-in);
  background: #fff; color: var(--ink); box-shadow: 6px 6px 0 var(--y); transform: rotate(-1.5deg);
}
.bl-fix__h { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n600); }
.bl-fix ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: fx; }
.bl-fix li { counter-increment: fx; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.bl-fix li::before {
  content: counter(fx); flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--y); font-size: 13px; font-weight: 800;
}
.bl-fix li + li { padding-top: 8px; border-top: 1px solid var(--n200); }
@media (min-width: 768px) {
  .bl-feat .press > .tile { padding: 36px; }
}
@media (min-width: 1024px) {
  .bl-feat { padding-top: 64px; }
  .bl-feat .press > .tile { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 48px; min-height: 440px; padding: 48px; }
}

/* ---------- 3. Index: filter row and post grid ---------- */
.bl-list { padding: 56px 0 0; }
.bl-list__head { display: flex; flex-direction: column; gap: 18px; }
.bl-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-filter[hidden] { display: none; }
.bl-fbtn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; box-shadow: 3px 3px 0 var(--ink);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 140ms ease;
}
.bl-fbtn[aria-pressed="true"] { background: var(--y); }
@media (hover: hover) and (pointer: fine) {
  .bl-fbtn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
  .bl-fbtn[aria-pressed="false"]:hover { background: var(--y-100); }
}
.bl-fbtn:active { transform: translate(2px, 2px) scale(0.98); box-shadow: 1px 1px 0 var(--ink); transition-duration: 100ms; }

.bl-grid { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); grid-auto-flow: dense; }
.bl-item { display: flex; min-width: 0; }
.bl-item > * { flex: 1; min-width: 0; }
.bl-item[hidden] { display: none; }
@media (min-width: 768px) {
  .bl-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-right: 6px; }
  .bl-grid .bl-item { grid-column: span 3; }
  .bl-grid .bl-item--w7 { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .bl-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bl-grid .bl-item--w7 { grid-column: span 7; }
  .bl-grid .bl-item--w5 { grid-column: span 5; }
  .bl-grid .bl-item--w4 { grid-column: span 4; }
}

/* a live post: pressable tile */
.bl-card > .tile { gap: 14px; min-height: 260px; }
.bl-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bl-card__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bl-card__chips .chip { min-height: 30px; padding: 3px 11px; font-size: 13px; font-weight: 700; }
.bl-logo {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  background: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink);
}
.bl-logo img { width: 28px; height: 28px; }
.bl-card__h { font-size: clamp(21px, 0.6vw + 18px, 28px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; max-width: 26ch; }
.bl-card__dek { font-size: 16px; line-height: 1.55; color: var(--ink-3); max-width: 52ch; }
.bl-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: auto; padding-top: 6px; }
.bl-card .bl-when { color: var(--ink-3); }
.bl-go { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; }
.bl-go .i { width: 18px; height: 18px; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .press:hover .bl-go .i { transform: translateX(3px); } }
.bl-card--big .bl-card__h { font-size: clamp(24px, 1vw + 19px, 34px); }
@media (min-width: 1024px) { .bl-card--big > .tile { min-height: 320px; padding: 36px; } }

/* not written yet: flat, dashed, clearly not a link */
.bl-soon {
  display: flex; flex-direction: column; gap: 12px; min-height: 220px;
  background: var(--paper); border: 2px dashed var(--n400); color: var(--n600);
}
.bl-soon .sticker { align-self: flex-start; margin-bottom: 4px; box-shadow: 3px 3px 0 var(--n400); border-color: var(--n600); color: var(--n700); }
.bl-soon .bl-card__chips .chip { border-color: var(--n400); background: transparent; color: var(--n600); }
.bl-soon h3 { font-size: clamp(19px, 0.4vw + 17px, 23px); font-weight: 800; line-height: 1.18; letter-spacing: -0.015em; color: var(--n700); text-wrap: balance; max-width: 28ch; }
.bl-soon p { font-size: 15px; line-height: 1.5; max-width: 48ch; }
.bl-soon__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bl-empty { margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--n600); }

/* ---------- 4. Newsletter strip ---------- */
.bl-news { padding: var(--sec) 0; }
.bl-news__tile { display: grid; gap: 22px; padding: 28px 20px; }
.bl-news__tile .h2 { max-width: 16ch; }
.bl-news__tile p { color: var(--ink-3); max-width: 46ch; }
.bl-news__copy { position: relative; z-index: 1; display: grid; gap: 14px; }
.bl-news__form { position: relative; z-index: 1; align-self: center; }
.bl-news__small { margin-top: 10px; font-size: 14px; font-weight: 600; }
.bl-news .motif--plus { right: 18px; top: 18px; width: 22px; }
@media (min-width: 768px) { .bl-news__tile { padding: 40px 36px; } }
@media (min-width: 1024px) {
  .bl-news__tile { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 56px; padding: 56px; }
  .bl-news .motif--plus { right: 32px; top: 28px; width: 28px; }
}

/* ---------- 5. Article body ---------- */
.bl-art { padding-top: 48px; }
.bl-art .prose { font-size: 18px; }
.bl-art .prose > p:first-child { font-size: var(--t-lead); font-weight: 600; color: var(--ink); line-height: 1.55; }
.prose > .bl-quote, .prose > .bl-callout, .prose > .bl-vs, .prose > .note { margin-top: 32px; }
.prose > .bl-quote + *, .prose > .bl-callout + *, .prose > .bl-vs + *, .prose > .note + * { margin-top: 32px; }
.prose > .note { max-width: none; }

/* pull quote: a big ink tile, the words in yellow */
.bl-quote {
  position: relative; margin-inline: 0; padding: 28px 22px 24px; border-radius: var(--r-tile);
  background: var(--ink); color: var(--y); --focus: var(--y); --halo: transparent;
}
.bl-quote::before { content: "\201C"; display: block; height: 0.5em; font-size: 72px; font-weight: 800; line-height: 1; color: var(--y); }
.bl-quote p {
  font-size: clamp(22px, 0.9vw + 17px, 30px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; color: var(--y);
}
.bl-quote footer { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--n400); }
.bl-quote .sparkle { right: 20px; bottom: 20px; fill: var(--y); }

/* data callout: one number, one line, on a yellow tile */
.bl-callout {
  display: grid; gap: 10px; padding: 22px 20px; border: 2px solid var(--ink); border-radius: var(--r-tile);
  background: var(--y); box-shadow: 6px 6px 0 var(--ink); margin-right: 6px; container-type: inline-size;
}
.bl-callout__k { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.bl-callout .bl-callout__num { font-size: clamp(30px, 9cqi, 56px); font-weight: 800; line-height: 0.98; letter-spacing: -0.04em; color: var(--ink); }
.bl-callout p { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink-3); max-width: 52ch; }

/* side-by-side setting comparison */
.bl-vs { display: grid; gap: 12px; }
.bl-vs__col { padding: 18px 18px 16px; border-radius: var(--r-in); border: 2px solid var(--ink); }
.bl-vs__col--off { background: #fff; }
.bl-vs__col--on { background: var(--y); box-shadow: 4px 4px 0 var(--ink); margin-right: 4px; }
.bl-vs__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n600); }
.bl-vs__col--on .bl-vs__tag { color: var(--ink); }
.bl-vs__tag .i { width: 16px; height: 16px; stroke-width: 3; }
.bl-vs__name { display: block; margin-top: 6px; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.bl-vs__col p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
@media (min-width: 640px) { .bl-vs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the end-of-post checklist: the prose ordered list, boxed */
.bl-check { padding: 22px 20px; border: 2px solid var(--ink); border-radius: var(--r-tile); background: #fff; }
.prose > .bl-check { margin-top: 24px; }
.bl-check ol { margin-top: 0; }
.bl-check li b { color: var(--ink); }
.bl-sign { margin-top: 28px; font-weight: 600; color: var(--ink); }

/* ---------- 6. Next steps and related posts ---------- */
.bl-next { padding: 8px 0 var(--sec); }
.bl-next__h { max-width: 20ch; }
.bl-next__grid { display: grid; gap: var(--gap); margin-top: 28px; margin-right: 6px; }
.bl-offer > .tile { gap: 14px; }
.bl-offer .sticker { align-self: flex-start; }
.bl-offer__name { font-size: var(--t-h3); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.bl-offer .ticks { margin-top: 2px; }
.bl-offer .ticks li { font-size: 16px; font-weight: 600; line-height: 1.45; }
.bl-offer .tile--ink .ticks li { color: var(--n200); }
.bl-offer .tile--sun .tick { background: var(--ink); color: var(--y); }
.bl-offer .bl-go { margin-top: auto; padding-top: 8px; }
.bl-offer .tile--ink .bl-go { color: var(--y); }
@media (min-width: 768px) { .bl-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-offer > .tile { padding: 32px; } }

.bl-rel { padding: 0 0 var(--sec); }
.bl-rel__grid { list-style: none; padding: 0; display: grid; gap: var(--gap); margin-top: 28px; margin-right: 6px; }
.bl-rel .bl-card > .tile { min-height: 220px; }
.bl-all > .tile { justify-content: space-between; gap: 18px; min-height: 220px; }
.bl-all__h { font-size: var(--t-h3); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; }
@media (min-width: 768px) { .bl-rel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-rel__grid > :first-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .bl-rel__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); } .bl-rel__grid > :first-child { grid-column: auto; } }

/* ---------- 7. Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bl-fbtn, .bl-back .i, .bl-go .i { transition: none; }
}