/* /blog (templates/blog*.html), after the owner's chosen round 7 of the blog mockups (docs/brand/mockups/blog/round7,
   2026-11-03): the help's shell with the post's facts in a row across the top, its findings joined to the picture at
   its head, and an ending with the download and more to read; and the list of posts. It sits on home.css, bar.css and
   help.css, so the bar, the grid, the brackets, the buttons, the light, and the article's type (.art), callouts
   (.call), figures (.fig) and tables (.tbl) are the site's own. Sizes in --u, one pixel of the 1344-wide mockups. */

.bl .art { grid-column: auto; }
.bl-k { margin: 0; font: 400 calc(11.5 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bl-k b { font-weight: 400; color: var(--tally-hi); }
/* The site's flat, hatch-textured pane (the owner: never glass with light through). */
.pane { position: relative; border: 1px solid rgba(255, 255, 255, 0.09); background: var(--scan-half), var(--pane), rgba(10, 10, 12, 0.55); }
/* The head's light: a window-tall marker the pools hang from (mesh.js), so they are lit on arrival however long the post. */
.bl-glow { position: absolute; left: 0; right: 0; top: 0; height: 100vh; pointer-events: none; }

/* ------------------------------------------------------------------ the facts, across the top */
.bl-head { padding-bottom: calc(40 * var(--u)); }
.bl-ledger { width: calc(1228 * var(--u)); display: grid; grid-template-columns: repeat(4, calc(307 * var(--u))); margin: 1em 0 calc(46 * var(--u)) calc(58 * var(--u)); border-top: 1px solid var(--rule); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.bl-ledger > div { padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); }
.bl-ledger > div + div { border-left: 1px solid var(--line); }
.bl-ledger dt { font: 400 calc(10.5 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #6E727A; }
.bl-ledger dd { margin: calc(8 * var(--u)) 0 0; font: 450 calc(15 * var(--u))/1.3 var(--sans); color: #fff; }
.bl-ledger dd.is-tally { color: var(--tally-hi); }
.bl-head .art { padding-top: 0; }
.bl-head .art h1 { margin-top: 0; }

/* ------------------------------------------------------------------ the sidebar: the title, the contents, a way to try it */
.bl-side { top: calc(108 * var(--u)); padding-top: 0; padding-right: calc(40 * var(--u)); }
.bl-side .side__home { display: inline-flex; gap: 8px; }
/* The post's title, opened above the contents once the page's own has scrolled away (blog.js), while the reader is
   looking at the words, not the panel. */
.bl-side__t { display: grid; grid-template-rows: 0fr; margin: 0; opacity: 0; transition: grid-template-rows 420ms var(--ease-out), opacity 300ms var(--ease); }
.bl-side__t > span { overflow: hidden; }
.bl-side__t b { display: block; padding: calc(14 * var(--u)) 0 calc(4 * var(--u)); font: 600 calc(17 * var(--u))/1.3 var(--sans); letter-spacing: -0.012em; color: #fff; }
.bl-side.is-titled .bl-side__t { grid-template-rows: 1fr; opacity: 1; }
.bl-side.is-titled .bl-side__t + .bl-k { margin-top: calc(18 * var(--u)); }
html[data-motion="still"] .bl-side__t { transition: none; }
.bl-toc { list-style: none; margin: calc(14 * var(--u)) 0 0; padding: 0; counter-reset: t; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.bl-toc li { counter-increment: t; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.bl .bl-toc a { position: relative; display: flex; gap: calc(12 * var(--u)); padding: calc(11 * var(--u)) 0; text-decoration: none; font: 450 calc(14.5 * var(--u))/1.35 var(--sans); color: #A4A8AF; white-space: normal; transition: color 160ms var(--ease); }
.bl-toc a::before { content: counter(t, decimal-leading-zero); flex: none; padding-top: calc(3 * var(--u)); font: 400 calc(11 * var(--u))/1 var(--mono); color: #6E727A; }
.bl .bl-toc a:hover, .bl .bl-toc a.is-on { color: #fff; }
.bl .bl-toc a.is-on { font-weight: 550; }
.bl-toc a.is-on::before { color: var(--tally-hi); }
/* The section being read, marked on the grid's first line. */
.bl-side .bl-toc a.is-on::after { content: ""; position: absolute; left: calc(-58 * var(--u) - 1px); top: calc(50% - 9 * var(--u)); width: 3px; height: calc(18 * var(--u)); background: var(--tally); box-shadow: 0 0 10px rgba(250, 76, 51, 0.7); }
.bl-try { margin-top: calc(30 * var(--u)); padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u)); }
.bl-try > b { display: block; margin-top: calc(10 * var(--u)); font: 600 calc(17 * var(--u))/1.3 var(--sans); color: #fff; }
.bl-try p:not(.bl-k) { margin: calc(6 * var(--u)) 0 0; font: 450 calc(13.5 * var(--u))/1.5 var(--sans); color: #A9ADB4; }
/* The help's .side a (display: block) would take the button's centering. */
.bl-side .bl-try .button { display: inline-flex; align-items: center; justify-content: center; margin-top: calc(14 * var(--u)); height: calc(40 * var(--u)); width: 100%; font-size: calc(14 * var(--u)); }
.bl-side .bl-try .button svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); fill: currentColor; }
/* A window too short for the whole sidebar (blog.js): the contents tighten first, and the Try it card goes last. */
.bl-side.is-tight .bl-try { display: none; }
.bl-side.is-compact .bl-toc a { padding: calc(6 * var(--u)) 0; }

/* A post's bulleted lists: a small square in the tally, the color of the help's step numbers (the owner, 2026-11-03). */
.bl .art ul:not([class]) { padding-left: 0; }
.bl .art ul:not([class]) > li { position: relative; padding-left: calc(22 * var(--u)); }
.bl .art ul:not([class]) > li::before { content: ""; position: absolute; left: calc(2 * var(--u)); top: 0.72em; width: calc(6 * var(--u)); height: calc(6 * var(--u)); background: var(--tally); box-shadow: 0 0 8px rgba(250, 76, 51, 0.45); }

/* Another post, named in the words (blog-card): Keep reading's row, in a pane of its own. */
.art .bl-card { display: grid; grid-template-columns: 1fr auto; gap: calc(6 * var(--u)) calc(20 * var(--u)); margin-top: calc(16 * var(--u)); padding: calc(18 * var(--u)) calc(22 * var(--u)); text-decoration: none; white-space: normal; }
.bl-card small { grid-column: 1 / -1; font: 400 calc(11 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bl-card small b { font-weight: 400; color: var(--tally-hi); }
.bl-card span { font: 550 calc(19 * var(--u))/1.3 var(--sans); letter-spacing: -0.01em; color: #fff; }
.bl-card i { align-self: center; font-style: normal; color: #6E727A; transition: color 200ms var(--ease), transform 200ms var(--ease); }
.bl-card:hover i { color: var(--tally-hi); transform: translateX(4px); }
.bl-card:hover span { text-decoration: underline; text-decoration-color: var(--tally); text-underline-offset: 4px; }

/* ------------------------------------------------------------------ figures */
.fig--photo { padding: 0; }
.fig--photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.fig .bl-num { justify-self: start; margin-bottom: calc(14 * var(--u)); }
.fig figcaption b { font-weight: 550; color: #E7E9EC; }
.art > .fig--lead { margin-top: calc(30 * var(--u)); }

/* The findings joined to the picture, four across, in the picture's own bracketed frame. */
.finds__head { display: flex; justify-content: space-between; align-items: baseline; }
.finds dl { display: grid; margin: 0; }
.finds dt { font: 500 calc(30 * var(--u))/1 var(--mono); letter-spacing: -0.03em; color: #fff; }
.finds dt small { margin-left: 4px; font-size: 0.42em; letter-spacing: 0.04em; color: var(--muted); }
.finds dd { margin: calc(8 * var(--u)) 0 0; font: 450 calc(13 * var(--u))/1.45 var(--sans); color: #A9ADB4; }
.finds__how { margin: calc(16 * var(--u)) 0 0; font: 400 calc(11 * var(--u))/1.6 var(--mono); color: var(--muted); }
.finds__how b { font-weight: 400; color: #C9CCD1; }
.fig--lead > .finds { justify-self: stretch; border-top: 1px solid rgba(255, 255, 255, 0.09); background: rgba(0, 0, 0, 0.28); }
.finds--band { padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u)); }
.finds--band dl { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: calc(14 * var(--u)); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.finds--band dl > div { padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(2 * var(--u)) calc(16 * var(--u)); border-left: 1px solid rgba(255, 255, 255, 0.08); }
.finds--band dl > div:first-child { padding-left: 0; border-left: 0; }

/* What was sent and what the phone read back, patch by patch. */
.fig:has(.ramp, .strips, .chart) { grid-template-columns: minmax(0, 1fr); }
.ramp { display: grid; grid-template-columns: auto repeat(9, minmax(0, 1fr)); gap: calc(6 * var(--u)); width: 100%; font: 400 calc(11.5 * var(--u))/1 var(--mono); color: #C9CCD1; }
.ramp__lab { display: grid; align-content: end; gap: calc(9 * var(--u)); padding: 0 calc(8 * var(--u)) calc(1 * var(--u)) 0; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: calc(10 * var(--u)); }
.ramp__c { display: grid; gap: calc(9 * var(--u)); text-align: center; }
.ramp__c i { display: block; aspect-ratio: 1 / 1.15; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ramp__c span { color: var(--tally-hi); }
.ramp--dark { grid-template-columns: auto repeat(5, minmax(0, 1fr)) minmax(0, 4fr); margin-top: calc(18 * var(--u)); }
.ramp__ok { display: grid; align-content: center; padding-left: calc(14 * var(--u)); font: 450 calc(13 * var(--u))/1.45 var(--sans); color: #A9ADB4; text-align: left; }
.ramp__ok b { color: #fff; font-weight: 550; }

/* The chart: mean and largest error by bitrate, with the reference encode's line. */
.chart { width: 100%; height: auto; font-family: var(--mono); }
.chart text { fill: #9A9EA5; font-size: 11px; }
.chart .t-hi { fill: #fff; }

/* Forty-one dark codes in, thirty-five out: the shadow steps. */
.strips { width: 100%; }
.strip { display: grid; grid-template-columns: repeat(41, 1fr); height: calc(46 * var(--u)); width: 100%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.strip + .strip { margin-top: calc(6 * var(--u)); }
.strips__lab { display: flex; justify-content: space-between; margin: calc(14 * var(--u)) 0 calc(8 * var(--u)); font: 400 calc(11 * var(--u))/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.strips__lab b { font-weight: 400; color: #fff; }
.strips__lab:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ the end: the download, and more to read */
.bl-end { padding: calc(40 * var(--u)) 0 calc(120 * var(--u)); }
.bl-end__in { display: grid; grid-template-columns: calc(307 * var(--u)) calc(921 * var(--u)); padding-left: calc(58 * var(--u)); }
.bl-end__stack { grid-column: 2; display: grid; gap: calc(30 * var(--u)); max-width: calc(680 * var(--u)); }
/* The grid at the end: 58, 365 and 1286, so no line runs through the panel or the list. */
.bl-end > .lines::before { background-image: var(--g), var(--t), var(--t), var(--t), var(--g), var(--t), var(--t), var(--t);
  background-position: calc(58 * var(--u)) 0, calc(58 * var(--u) - 5px) 0, calc(58 * var(--u)) 0, calc(58 * var(--u)) 100%, calc(365 * var(--u)) 0, calc(365 * var(--u) - 5px) 0, calc(365 * var(--u)) 0, calc(365 * var(--u)) 100%;
  background-size: 1px 100%, 11px 1px, 1px 6px, 1px 6px, 1px 100%, 11px 1px, 1px 6px, 1px 6px; }
.bl-end > .lines::after { background-image: var(--g), var(--t), var(--t), var(--t); background-position: calc(1286 * var(--u)) 0, calc(1286 * var(--u) - 5px) 0, calc(1286 * var(--u)) 0, calc(1286 * var(--u)) 100%; background-size: 1px 100%, 11px 1px, 1px 6px, 1px 6px; }
.cta { padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(44 * var(--u)); }
.cta h2 { margin: calc(16 * var(--u)) 0 0; font: 600 calc(34 * var(--u))/1.1 var(--sans); letter-spacing: -0.028em; color: #fff; }
.cta__lede { margin: calc(14 * var(--u)) 0 0; max-width: calc(470 * var(--u)); font: 450 calc(16.5 * var(--u))/1.6 var(--sans); color: #B9BCC2; }
.cta__go { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin-top: calc(28 * var(--u)); }
.cta__fine { margin: calc(18 * var(--u)) 0 0; font: 400 calc(11.5 * var(--u))/1.5 var(--mono); color: var(--muted); }
.rel ol { list-style: none; margin: calc(18 * var(--u)) 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.rel li { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.rel a { display: grid; grid-template-columns: 1fr auto; gap: calc(4 * var(--u)) calc(20 * var(--u)); padding: calc(20 * var(--u)) 0; text-decoration: none; }
.rel small { grid-column: 1 / -1; font: 400 calc(11 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.rel small b { font-weight: 400; color: var(--tally-hi); }
.rel span { font: 550 calc(19 * var(--u))/1.3 var(--sans); letter-spacing: -0.01em; color: #fff; }
.rel i { align-self: center; font-style: normal; color: #6E727A; transition: color 200ms var(--ease), transform 200ms var(--ease); }
.rel a:hover i { color: var(--tally-hi); transform: translateX(4px); }
.rel a:hover span { text-decoration: underline; text-decoration-color: var(--tally); text-underline-offset: 4px; }

/* ------------------------------------------------------------------ /blog: the newest post large, then the rest */
.bl-ix { padding: calc(118 * var(--u)) 0 calc(60 * var(--u)); }
.bl-ix > .lines::before, .bl-ix > .lines::after { -webkit-mask-image: linear-gradient(to bottom, transparent calc(60 * var(--u)), #000 calc(200 * var(--u))); mask-image: linear-gradient(to bottom, transparent calc(60 * var(--u)), #000 calc(200 * var(--u))); }
.bl-ix > .lines::before { background-image: var(--g), var(--t), var(--t), var(--t); background-position: calc(58 * var(--u)) 0, calc(58 * var(--u) - 5px) 0, calc(58 * var(--u)) 0, calc(58 * var(--u)) 100%; background-size: 1px 100%, 11px 1px, 1px 6px, 1px 6px; }
.bl-ix > .lines::after { background-image: var(--g), var(--t), var(--t), var(--t); background-position: calc(1286 * var(--u)) 0, calc(1286 * var(--u) - 5px) 0, calc(1286 * var(--u)) 0, calc(1286 * var(--u)) 100%; background-size: 1px 100%, 11px 1px, 1px 6px, 1px 6px; }
.bl-ix__head { display: grid; grid-template-columns: calc(614 * var(--u)) calc(614 * var(--u)); padding-left: calc(58 * var(--u)); align-items: end; }
.bl-ix__head > div { padding-left: calc(16 * var(--u)); }
.bl-ix h1 { margin: calc(18 * var(--u)) 0 0; font: 600 calc(64 * var(--u))/1 var(--sans); letter-spacing: -0.045em; color: #F3F3F3; }
.bl-ix__head > p { margin: 0; padding: 0 calc(40 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u)); font: 450 calc(17 * var(--u))/1.6 var(--sans); color: #B9BCC2; }
.lead-post { width: calc(1228 * var(--u)); display: grid; grid-template-columns: calc(614 * var(--u)) calc(614 * var(--u)); margin: calc(40 * var(--u)) 0 0 calc(58 * var(--u)); text-decoration: none; }
.lead-post > img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 614 / 380; }
.lead-post__words { display: grid; align-content: end; padding: calc(34 * var(--u)) calc(40 * var(--u)) calc(36 * var(--u)); }
.lead-post__words h2 { margin: calc(14 * var(--u)) 0 0; font: 600 calc(36 * var(--u))/1.08 var(--sans); letter-spacing: -0.03em; color: #fff; }
.lead-post__words p:not(.bl-k) { margin: calc(14 * var(--u)) 0 0; font: 450 calc(16 * var(--u))/1.6 var(--sans); color: #A9ADB4; }
.lead-post:hover h2 { text-decoration: underline; text-decoration-color: var(--tally); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.byline { display: flex; align-items: center; flex-wrap: wrap; gap: calc(10 * var(--u)) calc(14 * var(--u)); margin-top: calc(22 * var(--u)); font: 400 calc(12 * var(--u))/1.4 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.byline__who { display: flex; align-items: center; gap: calc(12 * var(--u)); }
/* The author's photo, in the ring the mockup drew round their initials. */
.byline__av { flex: none; display: block; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); object-fit: cover; background: #0C0D10; }
.byline__who b { display: block; font: 550 calc(14.5 * var(--u))/1.3 var(--sans); letter-spacing: 0; color: #fff; }
.posts { list-style: none; margin: calc(54 * var(--u)) 0 0 calc(58 * var(--u)); padding: 0; width: calc(1228 * var(--u)); border-top: 1px solid var(--rule); }
.posts li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.posts a { display: grid; grid-template-columns: calc(307 * var(--u)) calc(614 * var(--u)) calc(307 * var(--u)); padding: 0; text-decoration: none; transition: background-color 200ms var(--ease); }
.posts a:hover { background: rgba(255, 255, 255, 0.025); }
.posts a > * { padding: calc(24 * var(--u)) calc(16 * var(--u)); }
/* The grid's columns drawn by the rows themselves, since the page's own lines would run through the titles. */
.posts a > * + * { border-left: 1px solid var(--line); }
.posts time, .posts .posts__k { font: 400 calc(11.5 * var(--u))/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.posts .posts__k b { font-weight: 400; color: var(--tally-hi); }
.posts h3 { margin: 0; font: 550 calc(22 * var(--u))/1.25 var(--sans); letter-spacing: -0.015em; color: #fff; }
.posts p { margin: calc(8 * var(--u)) 0 0; font: 450 calc(15 * var(--u))/1.55 var(--sans); color: #A4A8AF; }
.posts a:hover h3 { text-decoration: underline; text-decoration-color: var(--tally); text-underline-offset: 4px; }
.bl-ix__more { margin: calc(30 * var(--u)) 0 0 calc(74 * var(--u)); font: 400 calc(12 * var(--u))/1.6 var(--mono); color: var(--muted); }
.bl-ix__more a { color: #E7E9EC; white-space: nowrap; }

/* ------------------------------------------------------------------ a phone */
.bl-phone-toc { display: none; }
@media (max-width: 899px) {
  .bl .lines::before { background-image: var(--g), var(--g); background-size: 1px 100%; background-position: 20px 0, calc(100% - 20px) 0; }
  .bl .lines::after { display: none; }
  .bl-k { font-size: 11px; }

  /* The post: the contents fold into the top of the article, and the sidebar goes. */
  .bl-head { padding-top: 92px; }
  .bl-head .docs__in { padding: 0 20px; }
  .bl-side { display: none; }
  .bl-ledger { width: auto; grid-template-columns: 1fr 1fr; margin: 0 20px 26px; }
  .bl-ledger > div { padding: 12px 0 13px; }
  .bl-ledger > div + div { border-left: 0; }
  .bl-ledger > div:nth-child(even) { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.08); }
  .bl-ledger > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .bl-ledger dt { font-size: 10px; }
  .bl-ledger dd { font-size: 14.5px; }
  .bl-phone-toc { display: block; margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .bl-phone-toc summary { display: flex; justify-content: space-between; padding: 14px 0; list-style: none; font: 400 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #C9CCD1; }
  .bl-phone-toc summary::-webkit-details-marker { display: none; }
  .bl-phone-toc summary span { color: var(--muted); }

  .finds--band { padding: 18px 16px 16px; }
  .finds--band dl { grid-template-columns: 1fr 1fr; }
  .finds--band dl > div { padding: 14px 10px 14px 14px; }
  .finds--band dl > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .finds--band dl > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .finds dt { font-size: 28px; }
  .finds dd { font-size: 13px; }
  .finds__how { font-size: 11px; }
  .ramp { font-size: 9.5px; gap: 3px; grid-template-columns: repeat(9, 1fr); }
  .ramp__lab { display: none; }
  .ramp--dark { grid-template-columns: repeat(5, 1fr); }
  .ramp__ok { grid-column: 1 / -1; padding: 6px 0 0; font-size: 13px; }
  .strip { height: 34px; }
  .strips__lab { font-size: 10px; }
  .fig .bl-num { font-size: 10.5px; }

  .bl-end { padding: 24px 0 72px; }
  .bl-end__in { display: block; padding: 0 20px; }
  .bl-end__stack { display: block; }
  .cta { padding: 28px 22px 30px; }
  .cta h2 { font-size: 28px; }
  .cta__lede { font-size: 16px; }
  .cta__go { margin-top: 22px; }
  .cta__go .button { height: 46px; padding: 0 20px; font-size: 15px; gap: 9px; }
  .cta__go .button svg { width: 16px; height: 16px; }
  .cta__fine { font-size: 11.5px; }
  .rel { padding: 40px 0 0; }
  .rel span { font-size: 18px; }
  .rel small { font-size: 10.5px; }
  .rel a { padding: 16px 0; }
  .art .bl-card { padding: 16px 18px; }
  .bl-card span { font-size: 18px; }
  .bl-card small { font-size: 10.5px; }

  /* /blog. */
  .bl-ix { padding: 92px 0 40px; }
  .bl-ix__head { display: block; padding: 0 20px; }
  .bl-ix__head > div { padding: 0; }
  .bl-ix h1 { font-size: 48px; }
  .bl-ix__head > p { padding: 14px 0 0; font-size: 16.5px; }
  .lead-post { display: block; width: auto; margin: 26px 20px 0; }
  .lead-post__words { padding: 22px 20px 24px; }
  .lead-post__words h2 { font-size: 28px; }
  .lead-post__words p:not(.bl-k) { font-size: 15.5px; }
  .byline { margin-top: 20px; font-size: 11.5px; gap: 10px 12px; }
  .byline__av { width: 36px; height: 36px; }
  .byline__who b { font-size: 14.5px; }
  .posts { width: auto; margin: 36px 20px 0; }
  .posts a { display: block; padding: 20px 0; }
  .posts a > * { padding: 0; }
  .posts a > * + * { border-left: 0; }
  .posts time { display: inline; font-size: 11px; }
  .posts .posts__k { display: inline; margin-left: 10px; font-size: 11px; }
  .posts h3 { margin-top: 8px; font-size: 19px; }
  .posts p { font-size: 15px; }
  .bl-ix__more { margin: 24px 20px 0; font-size: 12px; }
}