/* HomeIsSecure, human redesign 2026-10-14: the articles page, the article page, the legal pages and the 404 page
   (ART-DIRECTION.md section 5). Long reading is set for reading: a 64ch measure at 18 / 1.65, headings with room
   above them, the admin's notes and figures in the site's materials.
   1 articles page  2 article page  3 legal pages  4 404 page  5 tablets and phones. */

/* ---------------------------------------------------------------- 1 articles page (.h-blog), re-set after the client
   review of 2026-10-14: the head carries the h1, the lede, the facts line and the search in columns 1-4 and the three
   newest as the home's fan of job tickets in 5-12 (home.css section 9); the list runs on white (no board, so the page
   ends white, then the kraft closing panel, then the footer): the topics as equal stamped tags in rows of four, the
   older articles as kraft dog-ear cards. */
.bl-head { padding: 28px 0 56px; }
.bl-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.bl-title { grid-column: 1 / span 4; padding-top: 4px; }
.bl-title h1 { margin: 0 0 22px; font-size: 52px; line-height: 1.02; }
.bl-title .lede { margin-bottom: 20px; font-size: 18px; }
/* the facts line: "32 articles · 6 topics" in Michroma */
.bl-title .bp-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; max-width: none; margin: 0 0 32px; color: var(--muted); font: 400 12px / 1.4 var(--f-tag); letter-spacing: var(--track-tag); text-transform: uppercase; }
.bl-title .bp-facts span + span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 14px 2px -6px; background: var(--tan); }
/* the search field: a kraft field with a charcoal search plate at its right end */
.bl-search { display: block; margin: 0; cursor: text; }
.bl-search-l { display: block; margin: 0 0 8px; color: var(--charcoal); font: 700 15px / 1.3 var(--f-sans); }
.bl-field { position: relative; display: flex; align-items: stretch; }
.bl-field input[type="search"] { flex: 1; min-width: 0; min-height: 56px; padding: 12px 16px; border: 0; border-bottom: 2px solid var(--charcoal); border-radius: 4px 0 0 4px; background: var(--kraft); color: var(--charcoal); font: 400 18px / 1.3 var(--f-sans); }
.bl-field input[type="search"]:focus { outline: 3px solid var(--charcoal); outline-offset: 2px; background: var(--kraft); }
.bl-field input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.bl-glass { display: grid; place-items: center; flex: none; width: 56px; border-radius: 0 4px 4px 0; background: var(--charcoal); color: var(--white); }
.bl-glass .pi { width: 22px; height: 22px; }
/* the fan of the three newest (the home's job tickets) in columns 5-12 */
.bl-fan { grid-column: 5 / -1; display: grid; }
.bl-fan .fan { grid-column: 1; }
/* the list on white: the topic tags, the kraft cards, the pager */
.bl-list { padding: 0 0 88px; scroll-margin-top: calc(var(--hdr) + 12px); }
.h-blog .cat-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 40px; padding: 28px 0 0; border: 0; border-top: 2px solid var(--charcoal); }
.h-blog .cat-tabs button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 8px 16px;
  border: 1.5px solid var(--charcoal);
  border-radius: 3px;
  background: var(--white);
  color: var(--charcoal);
  font: 400 var(--t-tag) / 1.25 var(--f-tag);
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* the season-tag square: an outline, filled tan on the open topic */
.h-blog .cat-tabs button::before { content: ""; flex: none; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 1px; }
.h-blog .cat-tabs button:hover { background: var(--kraft-50, #f3ebde); }
.h-blog .cat-tabs button.on, .h-blog .cat-tabs button[aria-selected="true"] { background: var(--charcoal); color: var(--white); }
.h-blog .cat-tabs button.on::before, .h-blog .cat-tabs button[aria-selected="true"]::before { border-color: var(--tan); background: var(--tan); }
.h-blog .cat-tabs button:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }
.h-blog .cat-tabs .ct-t { min-width: 0; overflow-wrap: break-word; }
.bl-grid { row-gap: 28px; }
.bl-grid .h-card.dog { border-color: transparent; background: var(--kraft); background-image: var(--grain); }
.bl-grid .h-card.dog:hover, .bl-grid .h-card.dog:focus-within { border-color: var(--charcoal); }
.bl-grid .h-card .hc-meta .hc-cat { background: var(--white); }
.bl-empty { margin: 8px 0 0; padding: 22px 24px; border-radius: var(--card-r); background: var(--kraft); font-size: 18px; }
.h-blog .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 44px 0 0; }
.h-blog .pager:empty { display: none; }
.h-blog .pager button { display: grid; place-items: center; min-width: 48px; height: 48px; margin: 0; padding: 0 10px; border: 1.5px solid var(--charcoal); border-radius: 3px; background: var(--white); color: var(--charcoal); font: 400 15px / 1 var(--f-tag); cursor: pointer; }
.h-blog .pager button:hover { background: var(--charcoal); color: var(--white); }
.h-blog .pager button.on { border-color: var(--charcoal); background: var(--charcoal); color: var(--white); box-shadow: 0 4px 0 var(--tan); }
.h-blog .pager button:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }

/* ---------------------------------------------------------------- 2 article page (.h-postp) */
.h-postp .read-bar { position: fixed; z-index: 1040; left: 0; right: 0; height: 3px; pointer-events: none; }
.h-postp .read-bar i { display: block; width: 0; height: 100%; background: var(--tan); }
/* the head on a kraft board */
.h-postp main > .h-article > .a-head.panel { margin: 20px auto 0; padding: 36px 0 56px; }
/* an article without quick notes keeps the title block alone in the head: a shorter board (client review 2026-10-14) */
@media (min-width: 768px) {
  .h-postp main > .h-article > .a-head.panel:not(.has-take) { padding-bottom: 40px; }
}
.a-head-in .h-crumbs { margin-bottom: 36px; }
.a-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; max-width: none; margin: 0 0 20px; }
.a-meta .hc-cat { min-height: 28px; font-size: var(--t-tag); }
.a-meta a.hc-cat:hover { background: var(--charcoal); color: var(--white); }
.a-meta time { color: var(--charcoal); font: 400 12px / 1.3 var(--f-tag); letter-spacing: var(--track-tag); text-transform: uppercase; }
.a-head h1 { max-width: 20ch; margin: 0 0 22px; font-size: 52px; line-height: 1.04; }
.a-head .lede { max-width: 58ch; margin: 0 0 28px; }
/* the head's two columns: the title block in 1-7, the quick notes in 9-12 (without notes the title block takes 1-9;
   review 2026-10-14: the right half of the head was empty) */
.a-hgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.a-htxt { grid-column: 1 / span 9; min-width: 0; }
.has-take .a-htxt { grid-column: 1 / span 7; }
.a-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; max-width: none; margin: 0; padding-top: 20px; border-top: 1px solid var(--ink-20); color: var(--charcoal); font-size: 16px; font-weight: 700; }
.am-by { display: inline-flex; align-items: center; gap: 10px; }
.am-by img { width: 24px; height: 24px; border-radius: 3px; }
.a-mins { color: var(--muted); font-weight: 600; }
/* the lead photo under the head, in its own rounded frame */
.a-lead { aspect-ratio: 21 / 9; margin: 20px 0 0; }
/* photos pass 2026-10-14 (owner rule: no head cut, at any size). Lead photos come from the admin: the crop is weighted
   to the top, so a person's head in a future article's photo stays in the wide frame; photos with a head close to
   their top edge get their own crop, by file name. 39191044 (an older couple, the man's head at the photo's right
   edge): no 21:9 or 4:3 crop holds both heads, so its frame takes the photo's own 16:9 shape at every size. */
.a-lead > img { object-position: 50% 25%; }
.a-lead > img[src*="pexels-photo-6957650."] { object-position: 50% 15%; }
.a-lead > img[src*="pexels-photo-6148905."] { object-position: 50% 6%; }
.a-lead > img[src*="pexels-photo-5318487."] { object-position: 50% 5%; }
.a-lead > img[src*="pexels-photo-17947736."] { object-position: 50% 3%; }
/* fresh-eyes check 2026-10-15: 7683849 (a man and a woman in a kitchen): the back of the woman's hair reaches x 0.96 of
   the photo, so the phones' 4:3 frame (x 0.055-0.945 at 50%) trimmed it; 75% keeps x 0.08-0.97 (the man starts at
   0.255). The 21:9 frame shows the photo's whole width, so the x value only matters below 768 px. */
.a-lead > img[src*="pexels-photo-7683849."] { object-position: 75% 25%; }
.a-lead:has(> img[src*="pexels-photo-39191044."]) { aspect-ratio: 16 / 9; }
/* the body: the text column (64ch) in columns 1-8, the contents strip in 10-12 */
.a-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; padding-top: 56px; padding-bottom: 32px; }
.a-col { grid-column: 1 / span 8; min-width: 0; }
.a-side { grid-column: 10 / -1; align-self: stretch; }
.a-side .side-stick { top: calc(var(--hdr) + 24px); }
/* quick notes: in the head, beside the title block (columns 9-12), a white takeaways card on the kraft board with a
   tan fold, the Michroma label over a dashed rule and tan ticks */
.a-take { position: relative; grid-column: 9 / -1; max-width: none; margin: 4px 0 0; padding: 26px 28px 24px; border-radius: var(--card-r); background: var(--white); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.a-take::after { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px; border-bottom-left-radius: 4px; background: linear-gradient(to bottom left, transparent 50%, var(--tan) 50%); }
.a-take .at-h { margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1.5px dashed rgba(36, 34, 31, 0.3); color: var(--charcoal); font: 400 12px / 1.3 var(--f-tag); letter-spacing: var(--track-tag); text-transform: uppercase; }
.a-take ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.a-take li { display: flex; align-items: flex-start; gap: 12px; max-width: none; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.45; }
.a-take li .ck { margin-top: 2px; }
/* the text: 18 / 1.65 at 64ch; h2 with room above, h3 tighter; lists with tan squares */
.a-body { max-width: 64ch; color: var(--charcoal); font-size: 18px; line-height: 1.65; }
.a-body > :first-child { margin-top: 0; }
.a-body p { max-width: none; margin: 0 0 1.15em; }
.a-body h2 { margin: 2.2em 0 0.55em; font-size: 32px; line-height: 1.12; scroll-margin-top: calc(var(--hdr) + 20px); }
.a-body h3 { margin: 1.8em 0 0.45em; font-size: 23px; line-height: 1.2; scroll-margin-top: calc(var(--hdr) + 20px); }
.a-body ul, .a-body ol { margin: 0 0 1.3em; padding: 0; list-style: none; }
.a-body ul > li { position: relative; max-width: none; margin: 0; padding: 0 0 0 26px; }
.a-body ul > li + li, .a-body ol > li + li { margin-top: 0.5em; }
.a-body ul > li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; background: var(--tan); }
.a-body ol { counter-reset: abl; }
.a-body ol > li { position: relative; max-width: none; margin: 0; padding: 0 0 0 40px; counter-increment: abl; }
.a-body ol > li::before { content: counter(abl, decimal-leading-zero); position: absolute; left: 0; top: 0.2em; color: var(--charcoal); font: 400 13px / 1.6 var(--f-tag); }
.a-body a, .a-body a:visited { color: var(--charcoal); text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.a-body strong, .a-body b { font-weight: 700; }
/* the admin's notes (aside.h-note > .hn-ic + text): a tan side plate on a kraft card */
.a-body .h-note, .h-note { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; max-width: 64ch; margin: 1.6em 0; padding: 20px 24px 20px 22px; border: 0; border-left: 6px solid var(--tan); border-radius: 4px; background: var(--kraft); background-image: var(--grain); font-size: 17px; line-height: 1.55; }
.h-note .hn-ic { color: var(--charcoal); line-height: 0; }
.h-note .hn-ic .ic, .h-note .hn-ic svg { width: 22px; height: 22px; stroke-width: 2px; }
.h-note p { margin: 0; }
.h-note > :last-child, .h-note p:last-child { margin-bottom: 0; }
/* figures inside the text: the photo in a rounded frame, the caption under it after a tan square */
.a-body .a-fig, .a-fig { max-width: none; margin: 2em 0; }
.a-fig img { display: block; width: 100%; height: auto; border-radius: var(--photo-r); }
.a-fig figcaption { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding: 0; border: 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.a-fig figcaption::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--tan); transform: translateY(-1px); }
/* the disclaimer, the share row, previous / next */
.a-disc { max-width: 64ch; margin: 40px 0 24px; padding: 16px 0 0; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 15px; line-height: 1.5; }
/* share: the label, then two text links with a Phosphor glyph and the 3 px tan underline (offset 4 px), never outlined
   buttons (review 2026-10-14) */
.a-share { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin: 0 0 44px; }
.a-share-l { margin-right: -4px; color: var(--charcoal); font: 400 12px / 1.3 var(--f-tag); letter-spacing: var(--track-tag); text-transform: uppercase; }
.a-sh, .a-sh:visited { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--charcoal); font: 700 16px / 1.2 var(--f-sans); text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.a-sh .pi { width: 18px; height: 18px; }
.a-sh > span { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.a-sh:hover { color: var(--charcoal); text-decoration: none; }
.a-sh:hover > span { text-decoration-color: var(--charcoal); }
.pn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gut); max-width: 64ch; margin: 0; }
.pn, .pn:visited { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px 22px; color: var(--charcoal); text-decoration: none; }
.pn.next { grid-column: 2; text-align: right; align-items: flex-end; }
.pn small { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 400 11px / 1.3 var(--f-tag); letter-spacing: var(--track-tag); text-transform: uppercase; }
.pn small .ic { width: 16px; height: 16px; }
.pn b { font: 800 19px / 1.25 var(--f-sans); letter-spacing: -0.01em; }
.pn:hover b { text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 3px; text-underline-offset: 4px; }
/* related articles */
.a-rel { padding: 72px 0 40px; }
.a-rel .in-head2 > h2 + .go { grid-column: 8 / -1; justify-self: end; align-self: end; }

/* ---------------------------------------------------------------- 3 legal pages (.h-legal): a white page, the h1
   with the effective date as a stamped tag; the admin's text in the 8, the contents list as a kraft strip in the 4 */
.lg-head { padding: 28px 0 32px; }
.lg-head h1 { max-width: 18ch; margin: 0 0 20px; font-size: 60px; line-height: 1.02; }
.lg-head .lg-date { min-height: 30px; margin: 0 16px 0 0; vertical-align: middle; font-size: var(--t-tag); }
.lg-head .lg-other { vertical-align: middle; }
.lg-body { padding: 24px 0 72px; border-top: 0; }
.lg-body > .wrap > .row { --bs-gutter-x: var(--gut); --bs-gutter-y: 0; }
@media (min-width: 992px) {
  .lg-body .col-lg-8 { width: 66.66666667%; padding-right: 48px; }
  .lg-body .col-lg-4 { width: 33.33333333%; }
}
.h-legal .legal { max-width: 68ch; color: var(--charcoal); font-size: 18px; line-height: 1.65; }
.h-legal .legal h2 { margin: 52px 0 14px; padding-top: 22px; border-top: 1px solid var(--line-soft); font-size: 28px; line-height: 1.15; scroll-margin-top: calc(var(--hdr) + 20px); }
.h-legal .legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.h-legal .legal h3 { margin: 32px 0 10px; font-size: 21px; }
.h-legal .legal p, .h-legal .legal li { max-width: none; }
.h-legal .legal p { margin: 0 0 1em; }
.h-legal .legal ul { margin: 0 0 1.2em; padding: 0; list-style: none; }
.h-legal .legal ul > li { position: relative; margin: 0; padding-left: 24px; }
.h-legal .legal ul > li + li { margin-top: 0.45em; }
.h-legal .legal ul > li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; background: var(--tan); }
.h-legal .legal a, .h-legal .legal a:visited { color: var(--charcoal); text-decoration-color: var(--tan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.h-legal .toc-solo-col .side-stick { top: calc(var(--hdr) + 24px); }
/* the admin lists carry .num (base.css right-aligns .num for table figures): the contents read left-aligned */
.h-legal ol.num { text-align: left; }
/* the numeral column fits the stamped numeral tag of the contents strip (inner.css section 8) */
.h-legal .h-toc ol.num a { grid-template-columns: 34px minmax(0, 1fr); }
.h-legal .toc-m ol.num a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }

/* ---------------------------------------------------------------- 4 404: the aerial photo with a sky dashed route
   ending at a stamped "404"; the heading, one sentence, the home button and the articles link beside it */
.nf { padding: 28px 0 72px; }
.nf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: center; }
.nf-txt { grid-column: 1 / span 5; }
.nf-txt h1 { margin: 0 0 20px; font-size: 64px; line-height: 1; }
.nf-txt .lede { max-width: 30ch; margin: 0 0 32px; }
.nf-map { position: relative; grid-column: 7 / -1; }
.nf-photo { aspect-ratio: 4 / 3; margin: 0; }
.nf-photo::after { content: ""; position: absolute; inset: 0; background: rgba(36, 34, 31, 0.22); }
/* clipped to the photo: the route starts on its left edge, never on the white page (review 2026-10-14) */
.nf-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.nf-route path { fill: none; stroke: var(--sky); stroke-width: 4px; stroke-linecap: square; stroke-dasharray: 12 9; vector-effect: non-scaling-stroke; }
.nf-end { position: absolute; left: 70%; top: 47%; min-height: 0; padding: 12px 18px 11px; font-size: 30px; letter-spacing: 0.1em; transform: translateY(-50%); -webkit-mask: none; mask: none; box-shadow: 0 0 0 4px var(--sky); }

/* ---------------------------------------------------------------- 5 tablets and phones */
@media (max-width: 1199.98px) {
  /* the fan under the title block, across the row (home.css narrows the tickets to 340 px) */
  .bl-top { row-gap: 40px; }
  .bl-title { grid-column: 1 / span 8; }
  .bl-fan { grid-column: 1 / -1; }
  .bl-search { max-width: 520px; }
  .a-col { grid-column: 1 / -1; }
  .a-side { display: none; }
  .a-head h1 { font-size: 46px; }
  .a-take { grid-column: 8 / -1; padding: 22px 22px 20px; }
  .h-postp .a-col .toc-m { display: block; }
}
@media (max-width: 991.98px) {
  .bl-top { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .bl-title, .bl-fan { grid-column: 1; }
  .bl-title h1, .lg-head h1 { font-size: 48px; }
  .nf-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .nf-txt, .nf-map { grid-column: 1; }
  .nf-map { order: -1; }
  /* the article head: the quick notes under the byline */
  .a-hgrid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .a-htxt, .has-take .a-htxt, .a-take { grid-column: 1; }
  .a-take { max-width: 64ch; margin: 0; }
  .a-rel .in-head2 > h2 + .go { grid-column: 1; justify-self: start; }
}
@media (max-width: 767.98px) {
  .bl-head { padding: 16px 0 48px; }
  .bl-title h1, .lg-head h1 { font-size: 38px; line-height: 1.05; }
  /* phones: the topics two by two, "Everything" across the first row; labels may wrap inside equal tags */
  .h-blog .cat-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 28px; padding-top: 24px; }
  .h-blog .cat-tabs button { gap: 10px; min-height: 52px; padding: 8px 12px; font-size: 11px; letter-spacing: 0.06em; }
  .h-blog .cat-tabs button[data-cat="all"] { grid-column: 1 / -1; }
  .bl-list { padding-bottom: 56px; }
  .h-postp main > .h-article > .a-head.panel { margin-top: 8px; padding: 24px 0 36px; }
  .a-head-in .h-crumbs { margin-bottom: 24px; }
  .a-head h1 { font-size: 34px; line-height: 1.08; }
  .a-lead { aspect-ratio: 4 / 3; margin-top: 12px; }
  .a-wrap { padding-top: 36px; }
  .a-take { padding: 20px 20px 18px; }
  .a-body { font-size: 17px; }
  .a-body h2 { font-size: 27px; }
  .a-body h3 { font-size: 21px; }
  .pn-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pn.next { grid-column: 1; }
  .a-rel { padding: 48px 0 24px; }
  .lg-head { padding: 16px 0 24px; }
  .lg-head .lg-date { display: inline-flex; margin: 0 0 8px; padding: 6px 10px 5px; white-space: normal; line-height: 1.55; letter-spacing: 0.1em; }
  .lg-body { padding-bottom: 48px; }
  .h-legal .legal { font-size: 17px; }
  .h-legal .legal h2 { font-size: 24px; }
  .nf { padding: 16px 0 48px; }
  .nf-txt h1 { font-size: 44px; }
  .nf-end { left: 60%; font-size: 22px; padding: 9px 13px 8px; }
}
/* devices pass 2026-10-14: at 320-374 px the topic tags broke words in two ("SEASONA / L CARE", "BUSINES / S"):
   one topic per row there */
@media (max-width: 374.98px) {
  .h-blog .cat-tabs { grid-template-columns: minmax(0, 1fr); }
}
/* devices pass 2026-10-14: on tablets (768-991 px) the four topic columns were 168 px wide and "EVERYTHING" broke in
   two ("EVERYTHIN / G"): "Everything" across the first row, the six topics three by two */
@media (min-width: 768px) and (max-width: 991.98px) {
  .h-blog .cat-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h-blog .cat-tabs button[data-cat="all"] { grid-column: 1 / -1; }
}