/* =========================================================================
   Studio3D — BLOG
   An image-free editorial system: type, hairline rules, mono data. No cards,
   no thumbnails, no placeholder blocks. Structure comes from the measure, the
   rules and the space between them.

   Loaded after main.css. Every rule is scoped to a blog root (.s3-blog for the
   index/archives, .s3-blog-post for a single article) so nothing leaks into
   the marketplace, the studio or the content pages.
   ========================================================================= */

.s3-blog,
.s3-blog-post{
  /* Long-form copy sits brighter than --muted; 1,500 words at .65 is a squint. */
  --blog-ink:rgba(255,255,255,.80);
  --blog-dim:rgba(255,255,255,.28);
  padding:clamp(36px,5vw,64px) 0 clamp(80px,10vw,132px);
}

/* Anchor jumps from the contents list glide rather than teleport. */
@media (prefers-reduced-motion:no-preference){
  html:has(.s3-blog-post){scroll-behavior:smooth}
}

/* =========================================================================
   1. MASTHEAD  (index, category, tag, author, search)
   ========================================================================= */

.s3-blog-masthead{max-width:900px}

.s3-blog-rail{display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding-bottom:15px; border-bottom:1px solid var(--border)}
.s3-blog-kicker,
.s3-blog-count{font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; line-height:1}
.s3-blog-kicker{color:var(--accent)}
.s3-blog-count{color:var(--faint); font-variant-numeric:tabular-nums}

.s3-blog-title{margin:clamp(30px,4.5vw,54px) 0 0; max-width:16ch;
  font-size:clamp(40px,6.4vw,74px); font-weight:500; line-height:.98; letter-spacing:-.05em;
  text-wrap:balance; overflow-wrap:break-word}
.s3-blog-desc{margin:clamp(18px,2.4vw,26px) 0 0; max-width:56ch; color:var(--muted);
  font-size:clamp(16px,1.5vw,18.5px); line-height:1.6; text-wrap:pretty}

/* =========================================================================
   2. CATEGORY FILTER — plain text, one accent rule marks the active section
   ========================================================================= */

.s3-blog-filter{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 26px;
  margin-top:clamp(36px,5vw,58px); padding-bottom:clamp(24px,3vw,34px)}

.s3-filter-link{position:relative; display:inline-flex; align-items:baseline; gap:6px;
  padding-bottom:7px; font-size:15px; color:var(--faint);
  transition:color var(--t-base) var(--ease-out)}
.s3-filter-link::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-base) var(--ease-out)}
.s3-filter-link:hover,
.s3-filter-link:focus-visible{color:var(--text); outline:none}
.s3-filter-link:hover::after{transform:scaleX(1); opacity:.4}
.s3-filter-link.is-active{color:var(--text)}
.s3-filter-link.is-active::after{transform:scaleX(1); opacity:1}
.s3-filter-count{display:inline-block; transform:translateY(-.55em);
  font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--blog-dim);
  font-variant-numeric:tabular-nums}

/* =========================================================================
   3. THE INDEX — a set contents page. Shared with "Read next" on singles.
   ========================================================================= */

.s3-idx-list{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--border)}

.s3-idx-item{position:relative; border-top:1px solid var(--border)}
/* The signature hover: the entry's own hairline sweeps to accent. */
.s3-idx-item::before{content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; pointer-events:none;
  transition:transform var(--t-slow) var(--ease-out)}
.s3-idx-item:hover::before,
.s3-idx-item:focus-within::before{transform:scaleX(1)}

.s3-idx-link{display:grid; grid-template-columns:96px minmax(0,1fr) 26px;
  gap:clamp(18px,3vw,40px); align-items:start; color:inherit;
  padding:clamp(24px,2.8vw,34px) 0}
.s3-idx-link:focus-visible{outline:1px solid rgba(207,254,37,.5); outline-offset:8px}

.s3-idx-rail{display:flex; flex-direction:column; gap:7px; padding-top:5px}
.s3-idx-flag{font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent)}
.s3-idx-num{font-family:var(--mono); font-size:16px; line-height:1; letter-spacing:.02em;
  color:var(--faint); font-variant-numeric:tabular-nums;
  transition:color var(--t-base) var(--ease-out)}
.s3-idx-date{font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blog-dim); white-space:nowrap}

.s3-idx-body{min-width:0}
.s3-idx-title{font-size:clamp(21px,2.1vw,27px); font-weight:500; line-height:1.2;
  letter-spacing:-.028em; color:var(--text); text-wrap:balance; overflow-wrap:break-word;
  transition:color var(--t-base) var(--ease-out)}
.s3-idx-excerpt{margin:13px 0 0; max-width:62ch; color:var(--muted);
  font-size:15.5px; line-height:1.65; text-wrap:pretty}
.s3-idx-meta{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:15px 0 0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); font-variant-numeric:tabular-nums}
.s3-idx-meta > span + span::before{content:'·'; margin-right:9px; color:var(--blog-dim)}

/* Arrow drawn in CSS — the only mark on the page that could pass for an icon. */
.s3-idx-arrow{position:relative; width:24px; height:8px; margin-top:12px; color:var(--faint);
  opacity:.4; transition:opacity var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out)}
.s3-idx-arrow::before{content:''; position:absolute; left:0; top:50%; width:100%; height:1px;
  background:currentColor}
.s3-idx-arrow::after{content:''; position:absolute; right:1px; top:50%; width:7px; height:7px;
  margin-top:-4px; border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg)}

.s3-idx-item:hover .s3-idx-num,
.s3-idx-item:focus-within .s3-idx-num{color:var(--accent)}
.s3-idx-item:hover .s3-idx-title,
.s3-idx-item:focus-within .s3-idx-title{color:var(--accent)}
.s3-idx-item:hover .s3-idx-arrow,
.s3-idx-item:focus-within .s3-idx-arrow{opacity:1; color:var(--accent); transform:translateX(5px)}

/* Lead entry — the newest piece carries more weight. */
.s3-idx-item--lead .s3-idx-link{padding:clamp(32px,4vw,50px) 0}
.s3-idx-item--lead .s3-idx-title{font-size:clamp(28px,3.6vw,44px); line-height:1.08; letter-spacing:-.04em}
.s3-idx-item--lead .s3-idx-excerpt{margin-top:18px; max-width:62ch; font-size:17px; line-height:1.6}
.s3-idx-item--lead .s3-idx-num{font-size:18px}

/* Compact variant — "Read next" on a single post. */
.s3-idx-list--compact .s3-idx-link{grid-template-columns:48px minmax(0,1fr) 22px;
  gap:20px; padding:19px 0}
.s3-idx-list--compact .s3-idx-rail{padding-top:3px}
.s3-idx-list--compact .s3-idx-num{font-size:13px}
.s3-idx-list--compact .s3-idx-title{font-size:clamp(17px,1.6vw,19.5px); line-height:1.3; letter-spacing:-.02em}
.s3-idx-list--compact .s3-idx-meta{margin-top:9px; font-size:10px}
.s3-idx-list--compact .s3-idx-arrow{width:20px; margin-top:6px}

/* =========================================================================
   4. PAGINATION — same restraint as the listing
   ========================================================================= */

.s3-pager{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:16px 24px; margin-top:clamp(38px,5vw,60px)}
.s3-pager-status{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); font-variant-numeric:tabular-nums}
.s3-pager-links{display:flex; align-items:center; flex-wrap:wrap; gap:2px}

.s3-pager .page-numbers{display:inline-grid; place-items:center; min-width:32px; height:32px;
  padding:0 9px; border:0; background:none; border-radius:0;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--faint);
  font-variant-numeric:tabular-nums; transition:color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out)}
.s3-pager a.page-numbers:hover{color:var(--text); box-shadow:inset 0 -1px 0 rgba(207,254,37,.45)}
.s3-pager .page-numbers.current{color:var(--text); box-shadow:inset 0 -1px 0 var(--accent)}
.s3-pager .page-numbers.dots{color:var(--blog-dim); min-width:22px}
.s3-pager .prev,
.s3-pager .next{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; padding:0 12px}
.s3-pager .prev::before,
.s3-pager .next::after{content:''; display:inline-block; width:14px; height:1px;
  background:currentColor; vertical-align:middle; opacity:.55}
.s3-pager .prev::before{margin-right:10px}
.s3-pager .next::after{margin-left:10px}

/* =========================================================================
   5. EMPTY STATE
   ========================================================================= */

.s3-blog-empty{max-width:54ch; padding:clamp(52px,8vw,88px) 0 clamp(20px,3vw,32px);
  border-top:1px solid var(--border)}
.s3-blog-empty-title{margin:0 0 12px; color:var(--text);
  font-size:clamp(22px,2.6vw,30px); font-weight:500; letter-spacing:-.03em; line-height:1.15}
.s3-blog-empty-text{margin:0 0 28px; color:var(--muted); line-height:1.65}

/* =========================================================================
   6. SINGLE — reading progress
   ========================================================================= */

.s3-progress{position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  background:rgba(255,255,255,.06); pointer-events:none}
.s3-progress-fill{display:block; height:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%; will-change:transform}
/* Clear the WordPress toolbar when it is on screen — it follows these exact
   breakpoints, and stops being fixed below 600px. */
body.admin-bar .s3-progress{top:32px}
@media screen and (max-width:782px){ body.admin-bar .s3-progress{top:46px} }
@media screen and (max-width:600px){ body.admin-bar .s3-progress{top:0} }

/* =========================================================================
   7. SINGLE — header
   ========================================================================= */

/* Space Grotesk's zero is wide, so `ch` runs ahead of real characters: 60ch
   measures out at roughly 70 characters, which is the target for the body. */
.s3-blog-post .s3-container{max-width:700px}

.s3-post-head{max-width:820px; padding-bottom:clamp(30px,4vw,46px);
  margin-bottom:clamp(36px,5vw,58px); border-bottom:1px solid var(--border)}

.s3-post-back{display:inline-flex; align-items:center; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  transition:color var(--t-base) var(--ease-out)}
.s3-post-back::before{content:''; width:16px; height:1px; background:currentColor; opacity:.6;
  margin-right:11px; transition:width var(--t-base) var(--ease-out)}
.s3-post-back:hover{color:var(--accent)}
.s3-post-back:hover::before{width:24px}

.s3-post-kicker{display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:clamp(26px,4vw,40px) 0 0; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  font-variant-numeric:tabular-nums}
.s3-post-kicker > * + *::before{content:'·'; margin-right:10px; color:var(--blog-dim)}
.s3-post-cat-link{color:var(--accent); transition:opacity var(--t-quick) var(--ease-out)}
.s3-post-cat-link:hover{opacity:.7}

.s3-blog-post .s3-post-title{margin:22px 0 0; max-width:21ch; font-weight:500;
  font-size:clamp(32px,4.4vw,54px); line-height:1.05; letter-spacing:-.042em;
  text-wrap:balance; overflow-wrap:break-word}
.s3-post-standfirst{margin:24px 0 0; max-width:58ch; color:var(--muted);
  font-size:clamp(17px,1.6vw,20px); line-height:1.55; text-wrap:pretty}

/* =========================================================================
   8. SINGLE — layout + table of contents
   ========================================================================= */

.s3-toc{margin:0 0 clamp(34px,5vw,50px); padding:22px 24px;
  border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface-1)}
.s3-toc-label{margin:0 0 15px; font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}
.s3-toc-list{counter-reset:s3toc; list-style:none; margin:0; padding:0}
.s3-toc-list li{counter-increment:s3toc; margin:0; break-inside:avoid}
.s3-toc-list a{display:flex; gap:10px; padding:6px 0; font-size:13.5px; line-height:1.45;
  color:var(--faint); transition:color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out)}
.s3-toc-list a::before{content:counter(s3toc,decimal-leading-zero); flex:none; width:19px;
  padding-top:2px; font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:var(--blog-dim); transition:color var(--t-base) var(--ease-out)}
.s3-toc-list a:hover{color:var(--text)}
.s3-toc-list a.is-active{color:var(--text)}
.s3-toc-list a.is-active::before{color:var(--accent)}

@media (min-width:560px){
  .s3-toc-list{columns:2; column-gap:30px}
}

@media (min-width:1080px){
  .s3-blog-post .s3-container{max-width:1000px}
  .s3-post-layout{display:grid; grid-template-columns:minmax(0,1fr) 220px;
    gap:clamp(44px,5vw,76px); align-items:start}
  .s3-article{grid-column:1; grid-row:1}
  /* The contents list comes first in the template's DOM order, so it stacks
     above the copy on narrow screens and rails right on wide ones. */
  .s3-toc{grid-column:2; grid-row:1; position:sticky; top:96px; margin:0; padding:0;
    border:0; background:none; max-height:calc(100vh - 140px); overflow-y:auto;
    scrollbar-width:thin}
  .s3-toc-list{columns:1}
  .s3-toc-list a{padding:7px 0 7px 14px; border-left:1px solid var(--border)}
  .s3-toc-list a.is-active{border-left-color:var(--accent)}
}

/* =========================================================================
   9. SINGLE — body typography. The whole point of the page.
   ========================================================================= */

.s3-article{max-width:60ch; color:var(--blog-ink); font-size:18.5px; line-height:1.75;
  counter-reset:s3sec; overflow-wrap:break-word}
.s3-article > *:first-child{margin-top:0}
.s3-article > *:last-child{margin-bottom:0}

.s3-article p{margin:0 0 1.35em; text-wrap:pretty}
/* The opening paragraph is set a notch up — a standfirst for the body. */
.s3-article > p:first-of-type{font-size:1.06em; line-height:1.68; color:rgba(255,255,255,.87)}

.s3-article h2{counter-increment:s3sec; margin:3em 0 .75em; padding-top:2em;
  border-top:1px solid var(--border); color:var(--text);
  font-size:clamp(23px,2.4vw,30px); font-weight:500; line-height:1.18; letter-spacing:-.03em;
  text-wrap:balance; scroll-margin-top:110px}
.s3-article h2::before{content:counter(s3sec,decimal-leading-zero); display:block; margin-bottom:14px;
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.2em; color:var(--accent)}
.s3-article > h2:first-child{margin-top:0; padding-top:0; border-top:0}

.s3-article h3{margin:2.4em 0 .55em; color:var(--text);
  font-size:clamp(17.5px,1.5vw,20px); font-weight:500; line-height:1.3; letter-spacing:-.018em;
  scroll-margin-top:110px}
.s3-article h4{margin:2em 0 .5em; color:var(--text); font-size:17px; font-weight:500;
  letter-spacing:-.01em}

.s3-article strong{color:var(--text); font-weight:500}
.s3-article em{color:rgba(255,255,255,.92)}
.s3-article a{color:var(--accent); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px; text-decoration-color:rgba(207,254,37,.4);
  transition:text-decoration-color var(--t-quick) var(--ease-out)}
.s3-article a:hover{text-decoration-color:var(--accent)}
.s3-article hr{margin:2.6em 0; height:1px; border:0; background:var(--border)}

/* Lists — accent square for bullets, mono counter for numbers. */
.s3-article ul,
.s3-article ol{margin:0 0 1.5em; padding:0; list-style:none}
.s3-article li{position:relative; margin:0 0 .68em; padding-left:26px; line-height:1.7}
.s3-article li:last-child{margin-bottom:0}
.s3-article ul > li::before{content:''; position:absolute; left:3px; top:.66em; width:6px; height:6px;
  border-radius:1px; background:var(--accent); opacity:.9}
.s3-article ol{counter-reset:s3li}
.s3-article ol > li{counter-increment:s3li; padding-left:40px}
.s3-article ol > li::before{content:counter(s3li,decimal-leading-zero); position:absolute; left:0; top:.2em;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--accent); opacity:.85}
.s3-article li > ul,
.s3-article li > ol{margin:.6em 0 0}

/* Quote — an accent rule and a size shift. No decorative quotation marks. */
.s3-article blockquote{margin:2.4em 0; padding:.15em 0 .15em 30px;
  border-left:2px solid var(--accent); color:var(--text);
  font-size:1.1em; line-height:1.6; letter-spacing:-.008em}
.s3-article blockquote p{margin:0 0 1em}
.s3-article blockquote p:last-child{margin-bottom:0}
.s3-article blockquote strong{display:inline-block; margin-right:2px; font-family:var(--mono);
  font-size:.78em; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.s3-article blockquote cite{display:block; margin-top:1em; font-family:var(--mono); font-size:.6em;
  font-style:normal; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}

/* Code — mono on a raised surface. */
.s3-article code{font-family:var(--mono); font-size:.82em; letter-spacing:-.01em; color:var(--accent);
  background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-chip); padding:.16em .4em}
.s3-article pre{margin:2em 0; padding:22px 24px; background:var(--surface-1);
  border:1px solid var(--border); border-left:2px solid rgba(207,254,37,.45);
  border-radius:var(--r-card); overflow-x:auto; -webkit-overflow-scrolling:touch;
  font-family:var(--mono); font-size:13.5px; line-height:1.7; tab-size:2}
.s3-article pre code{padding:0; border:0; border-radius:0; background:none; font-size:inherit;
  color:rgba(255,255,255,.86); white-space:pre}

/* Tables — spec sheets. Mono body, uppercase mono headers, own scroll box. */
.s3-table-wrap{margin:2.3em 0; border:1px solid var(--border); border-radius:var(--r-card);
  background:var(--surface-1); overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin}
.s3-article table{width:100%; min-width:520px; border-collapse:collapse;
  font-family:var(--mono); font-size:12.5px; line-height:1.6; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums slashed-zero}
/* Fallback for a table that reaches the page unwrapped — never push the layout. */
.s3-article > table{display:block; min-width:0; max-width:100%; overflow-x:auto}
.s3-article caption{padding:14px 16px; text-align:left; font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.s3-article thead th{padding:13px 16px; text-align:left; background:var(--surface-3);
  border-bottom:1px solid var(--border-strong); color:var(--faint);
  font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap}
.s3-article tbody th{padding:12px 16px; text-align:left; border-top:1px solid var(--border);
  color:var(--text); font-weight:500}
.s3-article tbody td{padding:12px 16px; border-top:1px solid var(--border);
  color:var(--muted); vertical-align:top}
.s3-article tbody tr:first-child > *{border-top:0}
.s3-article tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
.s3-article tbody tr{transition:background var(--t-quick) var(--ease-quick)}
.s3-article tbody tr:hover{background:rgba(207,254,37,.045)}
.s3-article tbody td:first-child{color:var(--text)}

/* =========================================================================
   10. SINGLE — footer: tags + read next
   ========================================================================= */

.s3-post-foot{max-width:820px; margin-top:clamp(54px,7vw,88px);
  padding-top:clamp(26px,3.5vw,40px); border-top:1px solid var(--border)}

.s3-foot-label{display:block; margin:0 0 18px; font-family:var(--mono); font-size:10px;
  font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}

.s3-post-tags{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
  margin-bottom:clamp(46px,6vw,72px)}
.s3-post-tags .s3-foot-label{flex:none; margin:0}
.s3-tag-row{display:flex; flex-wrap:wrap; gap:8px}
.s3-post-tags .s3-tag{padding:5px 13px; border:1px solid var(--border); border-radius:var(--r-pill);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); transition:color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out)}
.s3-post-tags .s3-tag:hover{color:var(--accent); border-color:rgba(207,254,37,.45)}

.s3-readnext .s3-idx-list{border-top:0}

/* =========================================================================
   11. RESPONSIVE
   ========================================================================= */

@media (max-width:860px){
  /* The index rail lies down above the entry instead of holding a column. */
  .s3-idx-link,
  .s3-idx-list--compact .s3-idx-link{grid-template-columns:minmax(0,1fr); gap:13px}
  .s3-idx-rail,
  .s3-idx-list--compact .s3-idx-rail{flex-direction:row; align-items:baseline; gap:14px; padding-top:0}
  .s3-idx-arrow{display:none}
  .s3-idx-excerpt{margin-top:11px}
  .s3-idx-meta{margin-top:13px}
}

@media (max-width:640px){
  .s3-blog,
  .s3-blog-post{--blog-ink:rgba(255,255,255,.82)}
  .s3-blog-title{max-width:none}
  .s3-blog-filter{gap:4px 20px}
  .s3-idx-title{font-size:20px}
  .s3-idx-item--lead .s3-idx-title{font-size:26px}
  .s3-idx-item--lead .s3-idx-excerpt{font-size:16px}
  .s3-article{font-size:17px; line-height:1.72}
  .s3-article pre{padding:18px; font-size:12.5px}
  .s3-toc{padding:20px}
  .s3-pager{gap:14px}
  .s3-pager-status{width:100%}
}

/* =========================================================================
   11b. TOUCH SIZING
   Nothing here changes a size or a colour — every rule grows a hit box to
   44px around type that stays exactly where it was. The category filter, the
   pager, the contents list, the tag row and the back link were all between
   17px and 32px tall, which on a phone is a coin toss.
   ========================================================================= */

@media (max-width:900px){
  /* The underline is drawn on ::after at bottom:0, so the extra room has to go
     above the text or the rule detaches from it. */
  .s3-filter-link{padding-top:13px}

  .s3-pager .page-numbers{min-width:44px; height:44px}
  .s3-pager .page-numbers.dots{min-width:28px}

  .s3-toc-list a{padding-block:12px}

  .s3-post-tags .s3-tag{display:inline-flex; align-items:center; min-height:44px}

  .s3-post-back{padding-block:14px}

  /* The kicker is a single mono line with ::before separators between its
     parts, so the category link cannot take padding without pushing the line
     apart. The hit box goes on ::after instead and nothing moves. */
  .s3-post-cat-link{position:relative}
  .s3-post-cat-link::after{content:''; position:absolute; left:-10px; right:-10px;
    top:50%; height:44px; transform:translateY(-50%)}
}

@media (prefers-reduced-motion:reduce){
  .s3-blog *,
  .s3-blog-post *{transition-duration:.01ms !important}
  .s3-progress-fill{will-change:auto}
}