/* OCALLY · blog.css: the blog. A post is the long-form reading page every article shares (use-case.css); this adds
   its cover and hero, what a post writes in markdown (lists, tables, templates to copy, images), the author, the
   cards and the index. Every post wears a cover: a drawing from Kai's art kit (artifacts.css) on the tint of its area
   ([data-area] in base.css), the same panel the capability pages use, with the struck slip of the problem it fixes.
   A post's title shares the screen with its cover, so it takes --t-h2 (the role rule for a title beside a tool). */
[hidden] { display: none !important; }

/* ── the cover ── */
.bp-cover { width: 100%; }
.bp-cover__art { position: absolute; inset: 0; display: grid; place-items: center; }
.bp-cover__t { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 5px 8px; font: var(--t-tag); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--on-navy); background: var(--navy); }
.bp-cover__no { position: absolute; z-index: 2; right: 14px; bottom: 12px; font: var(--t-tag); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--navy); }
.bp-cover--hero { max-width: 560px; box-shadow: var(--lift-l) var(--navy); }
.bp-cover--hero .bp-cover__art > *, .bp-cover--feature .bp-cover__art > * { zoom: 1.4; }
.bp-cover--hero :is(.bp-cover__t, .bp-cover__no), .bp-cover--feature :is(.bp-cover__t, .bp-cover__no) { font: var(--t-label); letter-spacing: var(--ls-label); }
.bp-cover--hero .bp-cover__t, .bp-cover--feature .bp-cover__t { left: 16px; top: 16px; padding: 7px 10px; }
.bp-cover--hero .bp-cover__no, .bp-cover--feature .bp-cover__no { right: 18px; bottom: 16px; }
.bp-cover--hero .bp-cover__no { top: 20px; bottom: auto; }   /* Kai stands at the bottom corner */

/* a thumbnail cover: a cut-paper scene of the reader's frustration or the outcome, 16:9, with its caption on a paper
   label in the scene's empty side. The caption scales with the cover (container units), so a card and a hero read alike. */
.bp-cover--img { aspect-ratio: 16 / 9; container-type: inline-size; }
.bp-cover--img picture, .bp-cover--img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.bp-cover__say { position: absolute; z-index: 2; left: 4.5%; bottom: 8%; max-width: 46%; margin: 0; padding: .26em .42em .32em; background: var(--paper); border: 1.5px solid var(--navy); box-shadow: .1em .1em 0 var(--navy);
  font: 700 clamp(14px, 5.4cqw, 46px)/1.02 var(--display); letter-spacing: -.035em; color: var(--navy); text-wrap: balance; rotate: -2deg; }
.bp-cover__say em { font-style: normal; color: var(--orange); }
.bp-cover--say-right .bp-cover__say { left: auto; right: 4.5%; rotate: 2deg; }
.bp-cover--say-top .bp-cover__say { bottom: auto; top: 18%; }
.bp-cover--img .bp-cover__no { top: 12px; bottom: auto; padding: 5px 8px; background: var(--paper); border: 1px solid var(--navy); }
.bp-cover--img.bp-cover--hero .bp-cover__no, .bp-cover--img.bp-cover--feature .bp-cover__no { top: 16px; right: 16px; padding: 7px 10px; }
.bp-hero__art .bp-cover--img { max-width: none; }

/* ── a post: the hero ── */
.bp-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr); gap: var(--gap-cols); align-items: center; padding: clamp(36px, 6vh, 72px) var(--edge) clamp(64px, 10vh, 112px); background: var(--sky); }
.bp-hero .uc-crumbs { margin-bottom: clamp(24px, 4vh, 40px); }
.bp-slip { display: table; margin: 0 0 clamp(18px, 3vh, 26px); }
.bp-h1 { margin: 0; max-width: 14em; font: var(--t-h2); letter-spacing: var(--ls-h2); color: var(--navy); text-wrap: balance; }
.bp-hero__art { position: relative; justify-self: end; width: min(100%, 560px); }
.bp-hero__kai { position: absolute; z-index: 3; right: -10px; bottom: -20px; --kai-size: clamp(84px, 8vw, 128px); }
.bp-by { color: inherit; text-decoration: none; border-bottom: 1.5px solid var(--orange); }
.bp-by:hover { color: var(--navy); }
.bp-intro { padding-bottom: clamp(16px, 2.6vh, 28px); }
.bp-article h3 { margin: 32px 0 12px; font: var(--t-h5); letter-spacing: var(--ls-h5); color: var(--navy); text-wrap: balance; }
.bp-article :is(.bp-intro, .uc-sec) > :is(ul, ol) { margin: 0 0 22px; padding-left: 1.3em; }
.bp-article :is(.bp-intro, .uc-sec) > :is(ul, ol) li { margin: 0 0 8px; padding-left: 4px; font: var(--t-read); color: var(--body); }
.bp-article :is(.bp-intro, .uc-sec) > :is(ul, ol) li > p { margin: 0 0 8px; }
.bp-article :is(.bp-intro, .uc-sec) li::marker { color: var(--orange-ink); font-weight: 700; }
.bp-article :is(.bp-intro, .uc-sec) :is(p, li, td) > a:not([aria-label]) { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bp-article :is(.bp-intro, .uc-sec) :is(p, li, td) > a:not([aria-label]):hover { color: var(--orange-ink); }
.bp-article strong { font-weight: 600; color: var(--navy); }
/* a checklist: "- [ ] item" in markdown */
.bp-article li:has(.bp-check) { list-style: none; margin-left: -1.3em; }
.bp-check { display: inline-block; width: 18px; height: 18px; margin: 0 12px 0 0; vertical-align: -3px; border: var(--rule); background: #fff; }
.bp-check.is-on { background: var(--orange); }
.bp-article hr { margin: 36px 0; border: 0; border-top: var(--rule); }
.bp-article img { display: block; max-width: 100%; height: auto; margin: 28px 0 8px; border: var(--rule); }
.bp-cap { display: block; margin-bottom: 28px; font: var(--t-fine); color: var(--muted); }

/* a table: it scrolls sideways on a phone, never the page */
.bp-table { margin: 26px 0 32px; overflow-x: auto; border: var(--rule); background: #fff; }
.bp-table table { width: 100%; border-collapse: collapse; font: var(--t-small); }
.bp-table th { padding: 12px 14px; text-align: left; vertical-align: bottom; background: var(--tint, var(--sky)); font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--navy); border-bottom: var(--rule); }
.bp-table td { padding: 12px 14px; vertical-align: top; border-top: 1px solid var(--line); color: var(--body); }
.bp-table td:first-child { font-weight: 600; color: var(--navy); }
.bp-table tr:first-child td { border-top: 0; }

/* a template: words to copy, as they would be sent */
.bp-tpl { margin: 26px 0 32px; background: #fff; border: var(--rule); box-shadow: var(--lift) var(--navy); }
.bp-tpl figcaption { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; background: var(--tint, var(--sky)); border-bottom: var(--rule); }
.bp-tpl__k { flex: none; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--orange-ink); }
.bp-tpl__t { flex: 1; min-width: 0; font: var(--t-h6); letter-spacing: var(--ls-h6); color: var(--navy); }
.bp-tpl__copy { flex: none; height: 34px; padding: 0 14px; font: var(--t-ui-s); color: var(--navy); background: var(--paper); border: var(--rule); box-shadow: var(--lift-xs) var(--navy); cursor: pointer; }
.bp-tpl__copy:hover { background: var(--orange-tint); }
.bp-tpl pre { margin: 0; padding: 20px 22px; white-space: pre-wrap; tab-size: 3; overflow-wrap: anywhere; font: var(--t-body); color: var(--navy); }
.bp-article :is(p, li, td) > code { padding: 2px 6px; overflow-wrap: anywhere; background: var(--sky); border: 1px solid var(--line); font: var(--t-data); font-weight: 400; color: var(--navy); }
.bp-code { margin: 26px 0 32px; padding: 18px 20px; overflow-x: auto; background: var(--navy); color: var(--on-navy); font: var(--t-data); font-weight: 400; }

/* the box at the end, and who wrote it */
.bp-ocally__go { margin-top: 26px; }
.bp-author { display: grid; gap: 6px; margin-top: clamp(48px, 8vh, 88px); padding-top: 24px; border-top: var(--rule); }
.bp-article .bp-author__k { margin: 0; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.bp-article .bp-author p { margin: 0; }
.bp-article .bp-author__n { font: var(--t-h5); letter-spacing: var(--ls-h5); }
.bp-author__n a { color: var(--navy); text-decoration: none; }
.bp-author__n a:hover { color: var(--orange-ink); }
.bp-article .bp-author__r { font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--orange-ink); }
.bp-article .bp-author__b { max-width: 40em; margin-top: 6px; font: var(--t-card); color: var(--body); }

/* ── cards: the index and "Keep reading" (the capability hub's card: the cover, then the words) ── */
.bp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 6vh, 64px) var(--gap-cards); }
.bp-card { display: flex; flex-direction: column; color: var(--navy); text-decoration: none; }
.bp-card .bp-cover { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.bp-card:hover .bp-cover, .bp-card:focus-visible .bp-cover { transform: translate(-2px, -2px); box-shadow: var(--lift-l) var(--navy); }
.bp-card .bp-cover__art > * { zoom: 1.12; }
.bp-card__k { margin: 20px 0 0; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--orange-ink); }
.bp-card__h { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0; font: var(--t-h5); letter-spacing: var(--ls-h5); text-wrap: balance; }
.bp-card__h::after { content: "\2192"; flex: none; color: var(--orange); transition: transform .25s var(--ease); }
.bp-card:hover .bp-card__h::after { transform: translateX(4px); }
.bp-card__d { margin: 8px 0 0; font: var(--t-card); color: var(--body); }
.bp-card__m { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: auto 0 0; padding-top: 14px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.bp-more { padding: clamp(56px, 9vh, 96px) var(--edge) var(--sec-y); border-top: var(--rule); }
.bp-more__k, .bp-all__h { margin: 0 0 28px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }

/* the comparison hub's disclosure, in the masthead's side column, and the note that closes every comparison */
.bp-disclose p:not(.bp-areas__k) { margin: 0; padding-top: 14px; border-top: var(--rule); font: var(--t-body); color: var(--body); }
.bp-disclose a, .bp-author--note a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bp-author--note { padding: 22px 24px; background: var(--sky); border: var(--rule); }
.bp-areas.bp-disclose a { display: inline; padding: 0; border: 0; background: none; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }   /* a link in prose, not an area row */

/* the local preview index (never on the live site): a plain note that drafts are listed */
.bp-preview { margin: 0; padding: 12px var(--edge); background: var(--amber); font: var(--t-small); color: var(--navy); }

/* ── the index: a masthead, the areas as a table of contents, the latest post, every post ── */
.bp-mast { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 40px var(--gap-cols); align-items: end; padding: clamp(48px, 9vh, 112px) var(--edge) clamp(48px, 8vh, 88px); background: var(--sky); }
.bp-mast .uc-h1 { max-width: 11em; }
.bp-rss { color: var(--orange-ink); text-decoration: none; border-bottom: 1.5px solid currentColor; }
.bp-rss:hover { color: var(--navy); }
.bp-areas__k { margin: 0 0 14px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.bp-areas ul { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.bp-areas a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px; align-items: center; padding: 13px 10px 13px 4px; border-bottom: 1px solid var(--line); color: var(--navy); text-decoration: none; transition: background-color .15s linear; }
.bp-areas i { grid-row: 1 / 3; width: 22px; height: 22px; background: var(--tint); border: var(--rule); box-shadow: var(--lift-xs) var(--navy); }
.bp-areas b { font: var(--t-h6); letter-spacing: var(--ls-h6); }
.bp-areas span { grid-column: 2; font: var(--t-small); color: var(--muted); }
.bp-areas em { grid-column: 3; grid-row: 1 / 3; font: var(--t-label); font-style: normal; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.bp-areas a:hover, .bp-areas a[aria-current] { background: var(--tint); }
.bp-areas a[aria-current] em { color: var(--navy); }
.bp-areas a[aria-disabled] { pointer-events: none; }
.bp-areas a[aria-disabled] :is(b, i) { opacity: .5; }
.bp-lead { padding: clamp(64px, 10vh, 112px) var(--edge) 0; }
.bp-feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--gap-cols); align-items: center; color: var(--navy); text-decoration: none; }
.bp-feature__art { position: relative; }
.bp-feature .bp-cover { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.bp-feature:hover .bp-cover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--navy); }
.bp-feature__art .bp-slip { position: absolute; z-index: 3; right: clamp(16px, 3vw, 40px); top: -26px; margin: 0; rotate: 2deg; }
.bp-feature .bp-cover--feature { box-shadow: var(--lift-l) var(--navy); }
.bp-feature__k { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.bp-feature__k span { padding: 5px 8px; background: var(--orange); color: #fff; font: var(--t-tag); letter-spacing: var(--ls-tag); }
.bp-feature__h { margin: 18px 0 0; max-width: 15em; font: var(--t-h3); letter-spacing: var(--ls-h3); text-wrap: balance; }
.bp-feature__d { margin: var(--gap-lede) 0 0; max-width: 32em; font: var(--t-lead); color: var(--body); }
.bp-feature__brief { margin: 24px 0 0; padding: 18px 20px; max-width: 34em; background: #fff; border: var(--rule); border-left: 5px solid var(--orange); }
.bp-feature__bk { margin: 0 0 8px; font: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--orange-ink); }
.bp-feature__brief p:last-child { margin: 0; font: var(--t-card); color: var(--body); }
.bp-feature__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 28px 0 0; }
.bp-feature__go .bp-card__m { margin: 0; padding: 0; }
.bp-feature:hover .tlink { color: var(--orange-ink); }
.bp-all { padding: clamp(80px, 12vh, 128px) var(--edge) var(--sec-y); }
.bp-all__h { scroll-margin-top: calc(var(--bar) + 40px); }
.bp-all__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.bp-all__reset { padding: 0 0 4px; background: none; border: 0; border-bottom: 2px solid var(--orange); cursor: pointer; }

@media (max-width: 1100px) { .bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .bp-hero, .bp-mast, .bp-feature { grid-template-columns: 1fr; }
  .bp-hero__art { justify-self: start; }
  .bp-feature__art { margin-top: 24px; }
  .bp-cover--hero .bp-cover__art > *, .bp-cover--feature .bp-cover__art > * { zoom: 1.2; }
}
@media (max-width: 640px) {
  .bp-grid { grid-template-columns: 1fr; }
  .bp-tpl figcaption { flex-wrap: wrap; }
  .bp-cover--hero .bp-cover__art > *, .bp-cover--feature .bp-cover__art > * { zoom: 1.05; }
  .bp-hero__kai { --kai-size: 72px; right: 0; }
}