.ox-blog-page [hidden],
.article-float[hidden] {
  display:none!important;
}

.ox-blog-page main {
  overflow-x:clip;
}

.ox-blog-page .site-search {
  display:none;
}

:where(.ox-blog-page) :is(h1,h2,h3,p,dl,figure) {
  margin:0;
}

.ox-blog-page :is(h1,h2,h3) {
  font-family:var(--font-heading);
  overflow-wrap:break-word;
}

.ox-blog-page :is(section,article,header,nav,div,a) {
  min-width:0;
}

.ox-blog-hero {
  padding-block:var(--hero-pad) var(--space-7);
  background:var(--paper);
  color:var(--ink);
}

.ox-blog-heading {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--space-3) var(--space-4);
}

.ox-blog-heading h1 {
  font-size:var(--text-section);
  line-height:var(--leading-title);
  font-weight:var(--weight-display);
  letter-spacing:-.035em;
}

.ox-blog-intro {
  margin-top:var(--space-3);
  max-width:68ch;
  color:var(--muted);
  font-size:var(--text-lead);
  line-height:var(--leading-body);
}

.ox-blog-count {
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:.4em .9em;
  width:fit-content;
  border-radius:var(--radius-pill);
  background:var(--soft);
  color:var(--ink);
  font-size:var(--text-sm);
  line-height:1;
}

#blg-article-count {
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:var(--weight-bold);
}

.ox-blog-index {
  padding-bottom:var(--space-8);
}

.blg-magazine {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  margin-bottom:var(--space-4);
}

.blog-grid.blg-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4);
  align-items:stretch;
}

.blog-card.blg-featured {
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  min-height:0;
  height:auto;
  padding:var(--space-4);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  overflow-wrap:break-word;
  transition:background-color var(--duration) var(--ease);
}

.blg-magazine>.blg-featured {
  grid-column:1/-1;
  align-self:start;
}

.blog-card.blg-featured:hover {
  background:var(--soft);
  color:var(--ink);
}

.blog-card.blg-featured:focus-visible,
.ox-blog-entry:focus-visible,
.article-cta-link:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:4px;
}

.blg-featured__media {
  position:static;
  display:block;
  width:100%;
  min-height:0;
  height:auto;
}

.blg-featured__img {
  display:block;
  width:0;
  height:0;
}

.blg-featured__shade {
  display:none;
}

.blg-featured__overlay {
  position:static;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-3);
  width:100%;
  height:auto;
  padding:0;
  background:var(--paper);
  color:var(--ink);
}

.blog-card:hover .blg-featured__overlay {
  background:var(--soft);
  color:var(--ink);
}

.blg-featured__pill {
  display:inline-flex;
  align-items:center;
  gap:.4em;
  width:fit-content;
  padding:.4em .9em;
  border-radius:var(--radius-pill);
  background:var(--soft);
  color:var(--ink);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  line-height:1.3;
}

.blg-featured__hl {
  position:static;
  width:100%;
  max-width:none;
  font-size:var(--text-card);
  font-weight:var(--weight-heavy);
  line-height:1.35;
  color:var(--ink);
}

.blg-featured__body {
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  width:100%;
  padding:0;
}

.blg-featured__excerpt {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:var(--space-3);
  font-size:1rem;
  line-height:1.6;
  color:var(--muted);
}

.blg-featured__meta {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  font-variant-numeric:tabular-nums;
}

.blg-featured__hint {
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  line-height:1.5;
  color:var(--muted);
}

.blg-featured.blg-compact {
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  min-height:0;
  height:100%;
}

.blg-featured.blg-compact .blg-featured__hl {
  font-size:var(--text-card);
  color:var(--ink);
}

.blg-featured.blg-compact .blg-featured__body {
  flex:1;
}

.blg-featured.blg-compact .blg-featured__meta {
  margin-top:auto;
}

.ox-blog-series-title {
  margin-block:var(--space-8) var(--space-4);
  font-size:var(--text-reading);
}

.ox-blog-empty {
  padding:var(--space-5);
  border-radius:var(--radius-md);
  background:var(--soft);
  color:var(--ink);
}

.ox-blog-empty>.c-kicker {
  margin-bottom:var(--space-3);
}

.ox-blog-empty>h2 {
  font-size:var(--text-section);
  line-height:1.2;
}

.ox-blog-empty>p:not(.c-kicker) {
  margin-top:var(--space-2);
  line-height:1.6;
  color:var(--muted);
}

.ox-blog-entry-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4);
  align-items:stretch;
  margin-top:var(--space-4);
}

.ox-blog-entry {
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  height:100%;
  padding:var(--space-4);
  border-radius:var(--radius-md);
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
}

.ox-blog-entry h3 {
  font-size:var(--text-card);
  line-height:1.35;
}

.ox-blog-entry p {
  line-height:1.6;
  color:var(--muted);
}

.ox-blog-entry>span {
  margin-top:auto;
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
}

.ox-blog-entry:hover>span {
  text-decoration:underline;
  text-underline-offset:.2em;
}

.ox-blog-closing {
  padding-top:var(--space-5);
  padding-bottom:var(--space-close);
}

.ox-blog-closing-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-5);
  padding:var(--space-6);
  border-radius:var(--radius-md);
  background:var(--ink);
  color:var(--paper);
}

.ox-blog-closing-card h2 {
  max-width:none;
  color:var(--paper);
  font-size:var(--text-section);
  line-height:1.2;
}

.ox-blog-closing-card p {
  margin-top:var(--space-3);
  color:var(--code-ink);
  line-height:1.6;
}

.ox-blog-closing-actions {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--space-3);
}

.ox-blog-closing-actions .c-btn {
  white-space:normal;
  text-align:center;
}

.ox-blog-closing-card .c-btn-ghost {
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--line-on-dark);
}

.ox-article-reading {
  padding-top:var(--hero-pad);
  padding-bottom:var(--space-5);
}

.ox-article-reading>* {
  width:min(calc(100% - var(--gutter)*2),56rem);
  margin-inline:auto;
  padding-inline:0;
}

.crumb ol {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:0;
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}

.crumb li {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  min-width:0;
  white-space:nowrap;
}

.crumb li:last-child {
  flex:1 1 auto;
  overflow:hidden;
}

.crumb li+li::before {
  content:"/";
  flex:none;
  margin-inline:.6rem;
  color:var(--muted);
}

.crumb [aria-current="page"] {
  display:block;
  min-width:0;
  max-width:38ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.crumb {
  gap:0;
}

.ox-article-header h1 {
  max-width:none;
  font-size:var(--text-section);
  line-height:1.2;
  font-weight:var(--weight-display);
  letter-spacing:-.025em;
}

.ox-article-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2);
  margin-top:var(--space-4);
}

.blog-article-date,
.blog-article-lead {
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4em;
  width:fit-content;
  align-self:flex-start;
  padding:.4em .9em;
  border-radius:var(--radius-pill);
  background:var(--soft);
  color:var(--muted);
  font-size:var(--text-sm);
  line-height:1.5;
}

.blog-article-date {
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

.article-hero {
  margin-block:var(--space-4);
}

.article-hero img {
  display:block;
  width:100%;
  height:clamp(14rem,30vw,28rem);
  max-height:28rem;
  object-fit:cover;
  border-radius:var(--radius-md);
}

.blog-article-body {
  font-size:1rem;
  line-height:1.7;
  color:var(--ink);
  overflow-wrap:break-word;
}

.blog-article-body :is(p,ul,ol,dl,pre,blockquote,figure,.table-scroll) {
  max-width:100%;
  margin-block:0 var(--space-4);
}

.blog-article-body p {
  width:auto;
  max-width:none;
}

.blog-article-body :is(h2,h3) {
  margin-block:var(--space-6) var(--space-3);
  max-width:none;
  font-size:var(--text-reading);
  line-height:1.35;
  font-weight:var(--weight-heavy);
}

.blog-article-body [id] {
  scroll-margin-top:var(--sticky-offset);
}

.blog-article-body :is(ul,ol) {
  padding-inline-start:var(--space-4);
}

.blog-article-body li {
  padding-inline-start:var(--space-1);
  margin-block:var(--space-2);
}

.blog-article-body a:not(.c-btn) {
  color:var(--primary);
  text-underline-offset:.2em;
}

.blog-article-body a:not(.c-btn):hover {
  text-decoration-thickness:2px;
}

.blog-article-body dt {
  font-weight:var(--weight-bold);
}

.blog-article-body dd {
  margin:var(--space-2) 0 var(--space-3) var(--space-3);
  padding-inline-start:var(--space-3);
  border-inline-start:2px solid var(--line);
}

.blog-article-body pre {
  position:relative;
  overflow-x:auto;
  padding:var(--space-4);
  border-radius:var(--radius-md);
  background:var(--ink);
  color:var(--code-ink);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  line-height:var(--leading-code);
  white-space:pre;
}

.blog-article-body code {
  max-width:100%;
  overflow-wrap:anywhere;
  font-family:var(--font-mono);
}

.blog-article-body :not(pre)>code {
  padding:.1em .3em;
  border-radius:var(--radius-sm);
  background:var(--soft);
  color:var(--ink);
}

.blog-article-body pre>code {
  display:block;
  overflow-x:auto;
  white-space:pre;
  overflow-wrap:normal;
}

.blog-article-body blockquote {
  padding:var(--space-3) var(--space-4);
  border-inline-start:3px solid var(--primary);
  background:var(--soft);
  color:var(--ink);
}

.blog-article-body blockquote p:last-child {
  margin-bottom:0;
}

.blog-article-body .table-scroll {
  position:relative;
  overflow-x:auto;
  width:100%;
}

.blog-article-body table {
  display:table;
  width:100%;
  margin:0;
  border-collapse:collapse;
  background:var(--paper);
  color:var(--ink);
  font-size:1rem;
  font-variant-numeric:tabular-nums;
}

.blog-article-body :is(th,td) {
  padding:var(--space-3);
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  overflow-wrap:break-word;
  min-width:9rem;
}

.blog-article-body thead {
  background:var(--soft);
  color:var(--ink);
}

.blog-article-body th {
  font-weight:var(--weight-bold);
}

.blog-article-body img {
  display:block;
  max-width:100%;
  height:auto;
  border-radius:var(--radius-md);
}

.blog-article-body figcaption {
  margin-top:var(--space-2);
  text-align:center;
  font-size:var(--text-sm);
  color:var(--muted);
}

.blog-article-body mark {
  padding:.05em .15em;
  border-radius:var(--radius-sm);
  background:var(--yellow);
  color:var(--yellow-ink);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

.blog-article-body del {
  color:var(--muted);
}

.article-toc {
  padding:var(--space-4);
  border-inline-start:3px solid var(--primary);
  border-radius:var(--radius-md);
  background:var(--soft);
  color:var(--ink);
  margin-bottom:var(--space-5);
}

.article-toc .article-toc__title {
  margin-bottom:var(--space-3);
  font-family:var(--font-heading);
  font-weight:var(--weight-heavy);
  color:var(--ink);
}

.article-toc .article-toc__list {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-2);
  padding:0;
  margin:0;
  counter-reset:ox-toc;
  list-style:none;
}

.article-toc__list>li {
  position:relative;
  padding-inline-start:2rem;
  margin:0;
  counter-increment:ox-toc;
}

.article-toc__list>li::before {
  content:counter(ox-toc,decimal-leading-zero);
  position:absolute;
  inset-inline-start:0;
  color:var(--primary);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  line-height:2;
}

.article-toc .article-toc__sublist {
  margin:var(--space-2) 0 0;
  padding-inline-start:var(--space-3);
  list-style:disc;
}

.article-toc__sublist li {
  margin-block:var(--space-1);
}

.article-toc a:not(.c-btn) {
  color:var(--ink);
  text-decoration:none;
}

.article-toc a:not(.c-btn):hover {
  color:var(--primary);
  text-decoration:underline;
}

.article-faq__item {
  margin-block:var(--space-3);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--soft);
  color:var(--ink);
}

.article-faq__q {
  padding:var(--space-3) var(--space-4);
  cursor:pointer;
  font-weight:var(--weight-bold);
  line-height:1.5;
  background:var(--soft);
  color:var(--ink);
}

.article-faq__a {
  margin-inline:var(--space-4);
  padding:var(--space-3) var(--space-3);
  border-top:1px solid var(--line);
  background:var(--soft);
  color:var(--ink);
}

.article-faq__a p:last-child {
  margin-bottom:0;
}

.article-further-reading {
  margin-block:var(--space-5);
}

.article-further-reading>h3 {
  margin-top:0;
}

.article-further-reading>ul {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-3);
  margin:0;
  padding:0;
  list-style:none;
}

.article-further-reading>ul>li {
  margin:0;
  padding:0;
}

.blog-article-body .article-cta-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-4);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  transition:transform var(--duration) var(--ease);
}

.blog-article-body .article-cta-link:hover {
  transform:translateY(-2px);
  background:var(--soft);
  color:var(--ink);
}

.article-mac-promo {
  margin-block:var(--space-5);
  padding:var(--space-4);
  border-radius:var(--radius-md);
  background:var(--ink);
  color:var(--paper);
}

.article-mac-promo h2 {
  margin:0 0 var(--space-3);
  color:var(--paper);
  font-size:var(--text-reading);
}

.article-mac-promo p {
  margin:0;
  color:var(--code-ink);
}

.ox-article-promo-actions {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-top:var(--space-3);
}

.article-mac-promo .c-btn,
.ox-blog-closing-card .c-btn {
  white-space:normal;
}

.article-float {
  position:fixed;
  inset-inline-end:var(--space-4);
  bottom:var(--space-4);
  z-index:var(--z-menu);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  width:min(calc(100vw - var(--gutter)*2),18rem);
  padding:var(--space-3);
  border-top:3px solid var(--primary);
  border-radius:var(--radius-md);
  background:var(--ink);
  color:var(--paper);
  box-shadow:var(--shadow-menu);
}

.article-float__top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
}

.article-float__top h2 {
  margin:0;
  min-width:0;
  font-family:var(--font-heading);
  font-size:1rem;
  line-height:1.4;
  color:var(--paper);
}

.article-float__close {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid var(--line-on-dark);
  border-radius:var(--radius-pill);
  background:var(--ink);
  color:var(--paper);
  font:inherit;
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
}

.article-float__close:hover {
  background:var(--line-on-dark);
  color:var(--paper);
}

.article-float__close:focus-visible {
  outline:2px solid var(--paper);
  outline-offset:3px;
}

.article-float .article-float__cta {
  width:100%;
  white-space:normal;
  text-align:center;
}

@media (max-width:900px) {
  .article-float {
    display:none!important;
  }
}

@media (max-width:42rem) {
  .blog-grid.blg-grid,
  .ox-blog-entry-grid,
  .ox-blog-closing-card {
    grid-template-columns:minmax(0,1fr);
  }

  .ox-blog-empty {
    padding:var(--space-4);
  }

  .ox-blog-closing-card {
    padding:var(--space-4);
  }

  .ox-blog-closing-actions {
    width:100%;
  }

  .ox-blog-heading h1,
  .ox-article-header h1 {
    font-size:clamp(1.875rem,7vw,2.5rem);
  }

  .blog-card.blg-featured {
    height:auto;
  }

  .article-toc,
  .article-mac-promo {
    padding:var(--space-4);
  }

  .article-hero img {
    height:14rem;
  }

  .blog-article-body :is(th,td) {
    padding:var(--space-3);
  }
}

@media (prefers-reduced-motion:reduce) {
  .blog-card.blg-featured,
  .blog-article-body .article-cta-link {
    transition:none;
  }

  .blog-article-body .article-cta-link:hover {
    transform:none;
  }
}