/* ==========================================================================
   Blog article page (/blog/:slug). Loads after veris.css + doc.css and reuses the
   document-page layout: the bar with previous / next, a large title beside a details
   card and contents list, then each section with its number and heading on the left
   and the text on the right. On top of that: a reading column tuned for long text,
   a reading bar (current section, progress, time left, contents), share actions,
   "Up next" and related articles. Rendered by backend/routes/blog.js.
   ========================================================================== */

.bpage {
  --read: #CFCDC6;      /* body text: a step softer than --ink, a step brighter than --ink-2 */
  --hdr: 72px;          /* site header height; blog-read.js measures it */
  --bread-h: 52px;
}
html:has(.bpage) { scroll-padding-top: calc(var(--hdr) + var(--bread-h) + 20px); }

.kick i, .brel__meta i, .bnext__go i { display: inline-block; width: 3px; height: 3px; margin: 0 2px; border-radius: 50%; background: currentColor; opacity: .7; vertical-align: middle; }

/* ---- Title block ---- */
.bhero { grid-template-columns: minmax(0, 1fr) 360px; padding-bottom: clamp(40px, 5vw, 64px); }
.bhero .kick { margin: 0 0 22px; }
.bhero .mhero__t { max-width: 22ch; font-size: clamp(34px, 4.8vw, 60px); line-height: 1.03; letter-spacing: -.04em; }
.bhero .mhero__lead { max-width: 36em; font-size: clamp(17px, 1.6vw, 19.5px); }
.bhero .mspec > div { grid-template-columns: 104px minmax(0, 1fr); }

.has-motion .bhero .mhero__main > * { animation: brise 800ms var(--out) both; }
.has-motion .bhero .mhero__t { animation-delay: 60ms; }
.has-motion .bhero .mhero__lead { animation-delay: 120ms; }
.has-motion .bhero .bby { animation-delay: 180ms; }
.has-motion .bhero .mhero__side { animation: bfade 900ms var(--out) 200ms both; }
.has-motion .bcover { animation: bfade 1000ms var(--out) 260ms both; }
@keyframes brise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bfade { from { opacity: 0; } to { opacity: 1; } }

/* Byline + share */
.bby { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: clamp(28px, 4vw, 44px); padding-top: 24px; border-top: 1px solid var(--line); }
.bby__av { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--forest-3); color: var(--mint); font: 700 16px/1 var(--f-display); box-shadow: inset 0 0 0 1px rgba(46,255,213,.18); }
.bby__who { display: grid; gap: 3px; min-width: 0; }
.bby__who b { font: 600 15px/1.2 var(--f-body); color: var(--ink); }
.bby__who span { font-size: 13.5px; line-height: 1.2; color: var(--ink-3); }
.bby .bshare { margin-left: auto; }

.bshare { display: flex; align-items: center; gap: 8px; }
.bshare__b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 38px; height: 38px; padding: 0 11px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 13.5px/1 var(--f-body); text-decoration: none; cursor: pointer; transition: background-color 160ms var(--out), color 160ms var(--out), transform 160ms var(--out); }
.bshare__b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bshare__b svg .fill { fill: currentColor; stroke: none; }
.bshare__b[href] svg { width: 15px; height: 15px; }
.bshare__b:active { transform: scale(.95); }
.bshare__b.is-done { color: var(--mint); box-shadow: inset 0 0 0 1px rgba(46,255,213,.4); }
@media (hover: hover) and (pointer: fine) { .bshare__b:hover { background: var(--bg-3); color: var(--ink); } }

/* Contents in the title block: a disclosure, open on desktop and closed on phones */
.btoc summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: default; }
.btoc summary::-webkit-details-marker { display: none; }
.btoc summary svg { display: none; width: 16px; height: 16px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-3); transition: transform 220ms var(--out); }
.btoc__count { font: 500 12px/1 var(--f-mono); color: var(--ink-3); }
.btoc[open] summary svg { transform: rotate(180deg); }
.btoc a { padding: 6px 0; font-size: 14.5px; }

/* ---- Cover ---- */
.bcover { margin: 0 0 clamp(8px, 2vw, 24px); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.bcover img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; } /* covers are 2:1 with text: never crop them harder */

/* ---- Sections ---- */
.bsecs { border-top: 0; }
.bsec { grid-template-columns: 264px minmax(0, 1fr); padding: 52px 0 56px; }
.bsec .msec__h { top: calc(var(--hdr) + var(--bread-h) + 28px); font-size: clamp(21px, 2vw, 25px); line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; transition: color 300ms var(--out); }
.bsec--intro .msec__n { margin: 0; }
.bsec .msec__n { transition: color 300ms var(--out); }
.has-motion .bsec:not(.is-current):not(.bsec--intro) .msec__h { color: var(--ink-2); }
.has-motion .bsec:not(.is-current) .msec__n { color: var(--ink-3); }

/* ---- Reading column ---- */
.bprose { max-width: 680px; color: var(--read); font-size: 18px; line-height: 1.75; letter-spacing: -.003em; text-wrap: pretty; }
.bprose p { margin: 0 0 1.15em; }
.bsec--intro .bprose > p:first-of-type { font-size: 1.1em; line-height: 1.65; color: var(--ink); }
.bprose h1, .bprose h3, .bprose h4 { color: var(--ink); font-family: var(--f-display); letter-spacing: -.015em; text-wrap: balance; }
.bprose h1 { margin: 1.8em 0 .6em; font-size: 24px; line-height: 1.25; font-weight: 700; }
.bprose h3 { margin: 1.9em 0 .55em; font-size: 20.5px; line-height: 1.3; font-weight: 700; }
.bprose h4 { margin: 1.6em 0 .5em; font-size: 17.5px; line-height: 1.35; font-weight: 600; }
.bprose h3 strong, .bprose h4 strong, .bprose h1 strong { font-weight: inherit; }
.bprose ul, .bprose ol { margin: 0 0 1.25em; padding-left: 1.35em; }
.bprose li { margin: .45em 0; padding-left: .3em; }
.bprose li > p { margin: 0; }
.bprose li > p + p { margin-top: .5em; }
.bprose ol > li::marker { font: 500 .85em var(--f-mono); color: var(--mint); }
.bprose ul > li::marker { color: var(--ink-3); }
.bprose strong, .bprose b { color: var(--ink); font-weight: 600; }
.bprose u { text-decoration: none; }
.bprose a { word-break: break-word; }
.bprose hr { height: 1px; margin: 2.4em 0; border: 0; background: var(--line); }
.bprose blockquote { margin: 1.8em 0; padding: 4px 0 4px 24px; box-shadow: inset 2px 0 0 var(--mint); color: var(--ink); font: 500 clamp(18.5px, 1.8vw, 21px)/1.55 var(--f-display); letter-spacing: -.01em; }
.bprose blockquote p:last-child { margin-bottom: 0; }
.bprose img { display: block; width: 100%; height: auto; margin: 1.8em 0; border-radius: var(--r-md); background: var(--bg-2); box-shadow: 0 0 0 1px var(--line); }
.bprose figure { margin: 1.8em 0; }
.bprose figure img { margin: 0; }
.bprose figcaption { margin-top: 12px; font: 500 12.5px/1.5 var(--f-mono); letter-spacing: .01em; color: var(--ink-3); }
.bprose pre { position: relative; margin: 1.6em 0; padding: 18px 20px; overflow-x: auto; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 400 14px/1.65 var(--f-mono); color: var(--ink); tab-size: 2; }
.bprose pre code { padding: 0; background: none; font: inherit; }
.bprose .bcode { position: relative; }
.bprose .bcode pre { margin: 1.6em 0; padding-right: 76px; }
.bprose .bcode__copy { position: absolute; top: 10px; right: 10px; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--bg-3); color: var(--ink-2); font: 500 12px/1 var(--f-mono); cursor: pointer; transition: color 160ms var(--out), background-color 160ms var(--out); }
.bprose .bcode__copy.is-done { color: var(--mint); }
@media (hover: hover) and (pointer: fine) { .bprose .bcode__copy:hover { color: var(--ink); background: var(--bg-4); } }
.bprose .table-wrap { margin: 1.4em 0 1.8em; }
.bprose .callout { margin-bottom: 2em; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* FAQ */
.bfaq { margin-top: 8px; border-top: 1px solid var(--line); }
.bfaq__item { border-bottom: 1px solid var(--line); }
.bfaq__item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 0; list-style: none; cursor: pointer; color: var(--ink); font: 600 17.5px/1.4 var(--f-display); letter-spacing: -.01em; }
.bfaq__item summary::-webkit-details-marker { display: none; }
.bfaq__item summary svg { flex: none; width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 240ms var(--out), stroke 160ms; }
.bfaq__item[open] summary svg { transform: rotate(180deg); stroke: var(--mint); }
.bfaq__a { padding: 0 0 20px; }
.bfaq__a > :last-child { margin-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .bfaq__item summary:hover svg { stroke: var(--ink); } }

/* ---- End of article ---- */
.bend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 40px 0 0; margin-left: calc(264px + clamp(24px, 5vw, 80px)); max-width: 680px; }
.bend__t { font: 600 16px/1.3 var(--f-display); color: var(--ink); }
.bcta { margin: 48px 0 0; padding: clamp(24px, 3vw, 32px); }
.bcta b { font-size: clamp(18px, 1.8vw, 21px); }
.bcta p { margin-top: 6px; }
.bcta__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* Up next */
.bnext { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(56px, 7vw, 96px); padding: clamp(24px, 3vw, 36px); border-radius: var(--r-xl); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: background-color 220ms var(--out), transform 200ms var(--out); }
.bnext:active { transform: scale(.99); }
.bnext__txt { display: grid; justify-items: start; gap: 14px; min-width: 0; }
.bnext__t { font: 700 clamp(25px, 3vw, 38px)/1.08 var(--f-display); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.bnext__p { max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bnext__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 600 14.5px/1 var(--f-body); color: var(--mint); }
.bnext__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--out); }
.bnext__img { display: block; aspect-ratio: 2 / 1; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-3); }
.bnext__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--out); }
@media (hover: hover) and (pointer: fine) {
  .bnext:hover { background: var(--bg-3); }
  .bnext:hover .bnext__go svg { transform: translateX(3px); }
  .bnext:hover .bnext__img img { transform: scale(1.03); }
}

/* Related */
.brel { margin: clamp(56px, 7vw, 88px) 0 clamp(72px, 8vw, 112px); padding-top: 28px; border-top: 1px solid var(--line-2); }
.brel .mlabel { margin-bottom: 24px; }
.brel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.brel__card { display: grid; align-content: start; gap: 12px; color: inherit; text-decoration: none; }
.brel__img { display: block; aspect-ratio: 2 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.brel__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--out); }
.brel__ph { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, var(--mint) 0 4px, transparent 5px), var(--forest); }
.brel__meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 500 12px/1 var(--f-mono); letter-spacing: .02em; color: var(--ink-3); }
.brel__card h3 { font: 700 18.5px/1.3 var(--f-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; transition: color 160ms var(--out); }
.brel__card:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .brel__card:hover h3 { color: var(--mint); }
  .brel__card:hover .brel__img img { transform: scale(1.03); }
}

.mbar__arrow.is-off { opacity: .3; }

/* ---- Reading bar: current section, progress, time left, contents ---- */
.bread { position: fixed; z-index: 999; top: var(--hdr); left: 0; right: 0; height: var(--bread-h); background: rgba(23,24,27,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 220ms var(--out), transform 260ms var(--out), visibility 0s linear 260ms; }
.bread.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bread__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.bread__btn { display: inline-flex; align-items: center; gap: 12px; min-width: 0; height: 36px; margin-left: -10px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: 500 14.5px/1 var(--f-body); text-align: left; cursor: pointer; transition: background-color 160ms var(--out); }
span.bread__btn { cursor: default; }
.bread__n { flex: none; font: 500 12px/1 var(--f-mono); letter-spacing: .04em; color: var(--mint); }
.bread__t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bread__btn svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--out); }
.bread__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.bread__left { flex: none; font: 500 12.5px/1 var(--f-mono); letter-spacing: .02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bread__track { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.bread__fill { display: block; height: 100%; background: var(--mint); transform-origin: left; transform: scaleX(0); }
.bread__panel { position: absolute; top: 100%; left: 0; right: 0; max-height: min(64vh, 520px); overflow-y: auto; overscroll-behavior: contain; background: var(--bg-2); box-shadow: 0 1px 0 var(--line), 0 32px 48px -24px rgba(0,0,0,.7); }
.bread__panel ol { list-style: none; margin: 0; padding: 10px 0 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.bread__panel a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 15px; line-height: 1.4; color: var(--ink-2); transition: color 160ms var(--out); }
.bread__panel a span { font: 500 12px/1.9 var(--f-mono); color: var(--ink-3); }
.bread__panel a.is-on { color: var(--ink); }
.bread__panel a.is-on span { color: var(--mint); }
.has-motion .bread__panel:not([hidden]) { animation: bdrop 260ms var(--out) both; }
@keyframes bdrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  .bread__btn:not(span):hover { background: var(--bg-3); }
  .bread__panel a:hover { color: var(--ink); }
}

/* ---- Tablet and phone ---- */
@media (max-width: 1100px) {
  .bsec { grid-template-columns: 220px minmax(0, 1fr); }
  .bend { margin-left: calc(220px + clamp(24px, 5vw, 80px)); }
}
@media (max-width: 960px) {
  .bhero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bhero .mhero__side > .mlabel, .bhero .mspec { display: none; } /* date, reading time and author are already in the title block */
  .btoc { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
  .btoc summary { margin: 0; padding: 15px 16px; cursor: pointer; }
  .btoc summary svg { display: block; }
  .btoc ol { padding: 0 16px 10px; }
  .bsec { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 40px 0 44px; }
  .bsec .msec__h { position: static; }
  .has-motion .bsec:not(.is-current):not(.bsec--intro) .msec__h { color: var(--ink); }
  .has-motion .bsec:not(.is-current) .msec__n { color: var(--mint); }
  .bend { margin-left: 0; }
  .bnext { grid-template-columns: minmax(0, 1fr); }
  .bnext__img { order: -1; }
  .brel__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bread__panel ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bpage { --bread-h: 48px; }
  .bprose { font-size: 17px; line-height: 1.72; }
  .bprose blockquote { padding-left: 18px; }
  .bprose pre { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); font-size: 13px; }
  .bprose .bcode__copy { right: 0; }
  .bcover { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; box-shadow: none; }
  .bby .bshare { margin-left: 0; width: 100%; }
  .bby .bshare__copy { flex: 1; }
  .bend { flex-direction: column; align-items: stretch; }
  .bend .bshare__copy { flex: 1; }
  .bcta__btns, .bcta__btns .btn { width: 100%; }
  .bnext { padding: 16px 16px 24px; border-radius: var(--r-lg); }
  .bnext__img { border-radius: var(--r-md); }
  .brel__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .brel__card { grid-template-columns: 136px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .brel__card:first-child { padding-top: 0; }
  .brel__img { grid-row: 1 / 3; border-radius: 10px; }
  .brel__meta { margin-top: 2px; }
  .brel__card h3 { font-size: 16.5px; }
  .bread__left { font-size: 12px; }
}