.blog-inline-link {
  color: color-mix(in oklab, var(--text-main), var(--brand-teal) 18%);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
  text-decoration-color: color-mix(in oklab, var(--text-main), var(--brand-teal) 35%);
  transition: color var(--ease), text-decoration-color var(--ease);
}

.blog-inline-link:hover,
.blog-inline-link:focus-visible {
  color: var(--brand-teal);
  text-decoration-color: var(--brand-teal);
}

.blog-hero {
  padding-block: clamp(var(--space-48), 7vw, var(--space-72));
}

.blog-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(var(--space-28), 4vw, var(--space-48));
  align-items: center;
}

.blog-hero__copy {
  max-width: 720px;
}

.blog-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.blog-hero__media {
  position: relative;
  padding: clamp(var(--space-16), 2vw, var(--space-20));
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in oklab, var(--brand-orange), white 80%);
  background:
    radial-gradient(circle at top right, color-mix(in oklab, var(--brand-orange), white 90%), transparent 24%),
    linear-gradient(180deg, color-mix(in oklab, var(--brand-teal), white 93%), var(--bg-white));
  box-shadow: var(--shadow-soft);
}

.blog-hero__photo {
  overflow: hidden;
  border-radius: calc(var(--radius-xl) - 10px);
  border: 1px solid color-mix(in oklab, var(--brand-teal), white 76%);
  background: color-mix(in oklab, var(--brand-teal), white 95%);
  aspect-ratio: 4 / 3;
}

.blog-hero__photo img,
.blog-card__media img,
.blog-featured__image img,
.post-cover img,
.related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-section {
  padding-block: clamp(var(--space-48), 6vw, var(--space-72));
}

.blog-featured {
  display: block;
}

.blog-featured__card,
.blog-card,
.post-cta,
.post-summary,
.post-toc,
.related-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-white);
  box-shadow: var(--shadow-card);
}

.blog-featured__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-16);
  background:
    radial-gradient(circle at top right, color-mix(in oklab, var(--brand-orange), white 91%), transparent 22%),
    linear-gradient(180deg, var(--bg-white), color-mix(in oklab, var(--bg-soft), white 38%));
}

.blog-featured__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-featured__meta,
.blog-card__meta,
.post-hero__meta,
.post-summary__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-14);
}

.blog-tag,
.post-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--brand-orange), white 74%);
  background: color-mix(in oklab, var(--brand-orange), white 93%);
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 800;
}

.blog-tag--teal,
.post-chip--teal {
  border-color: color-mix(in oklab, var(--brand-teal), white 74%);
  background: color-mix(in oklab, var(--brand-teal), white 92%);
}

.blog-featured__card p,
.blog-card p,
.post-summary p,
.post-cta p,
.related-card p {
  color: var(--text-muted);
  line-height: 1.65;
}

.blog-featured__card h2 {
  margin-bottom: var(--space-10);
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.08;
  max-width: 12ch;
}

.blog-featured__card p {
  max-width: 56ch;
}

.blog-featured__actions,
.blog-card__actions,
.post-hero__actions,
.related-card__actions {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-top: var(--space-20);
}

.blog-featured__image {
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 8px);
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: 260px;
  background: color-mix(in oklab, var(--brand-teal), white 95%);
}

.blog-featured__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.blog-featured__overlay-link:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: -2px;
}

.post-content li::marker,
.post-checklist li::marker,
.post-steps li::marker {
  color: var(--brand-orange);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-20);
}

.blog-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: color-mix(in oklab, var(--brand-orange), white 72%);
}

.blog-card__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.blog-card__overlay-link:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: -2px;
}

.blog-card__media {
  aspect-ratio: 16 / 10;
  background: color-mix(in oklab, var(--brand-teal), white 95%);
}

.blog-card__body {
  padding: var(--space-18);
}

.blog-card__body h3,
.related-card h3 {
  margin-bottom: var(--space-10);
}

.blog-card__body p + p {
  margin-top: var(--space-10);
}

.post-hero {
  padding-block: clamp(var(--space-40), 6vw, var(--space-64));
}

.post-hero__box {
  padding: clamp(var(--space-20), 4vw, var(--space-32));
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in oklab, var(--brand-orange), white 78%);
  background:
    radial-gradient(circle at top right, color-mix(in oklab, var(--brand-orange), white 90%), transparent 24%),
    linear-gradient(180deg, color-mix(in oklab, var(--brand-teal), white 95%), var(--bg-white));
  box-shadow: var(--shadow-soft);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-18);
  color: var(--text-soft);
  font-size: 0.9rem;
}

.breadcrumbs a {
  color: var(--text-soft);
}

.breadcrumbs a:hover {
  color: var(--brand-teal);
}

.post-cover {
  margin-top: var(--space-24);
  overflow: hidden;
  border-radius: calc(var(--radius-xl) - 10px);
  aspect-ratio: 16 / 8;
  border: 1px solid color-mix(in oklab, var(--brand-teal), white 76%);
  background: color-mix(in oklab, var(--brand-teal), white 95%);
}

.post-shell {
  padding-bottom: var(--space-72);
}

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: clamp(var(--space-24), 3vw, var(--space-36));
  align-items: start;
}

.post-content {
  min-width: 0;
}

.post-content > * + * {
  margin-top: var(--space-18);
}

.post-content h2 {
  margin-top: var(--space-40);
}

.post-content h3 {
  margin-top: var(--space-28);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.post-content p,
.post-content li {
  color: var(--text-muted);
  line-height: 1.8;
}

.post-content ul,
.post-content ol {
  display: grid;
  gap: var(--space-10);
  padding-left: 1.2rem;
}

.post-content blockquote {
  margin: var(--space-28) 0;
  padding: var(--space-20);
  border-left: 4px solid var(--brand-orange);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--brand-orange), white 94%);
  color: var(--text-main);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.5;
}

.post-note,
.post-summary {
  padding: var(--space-18);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklab, var(--brand-teal), white 74%);
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand-teal), white 94%), var(--bg-white));
}

.post-summary h2,
.post-note h2,
.post-toc h2,
.post-cta h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
}

.post-summary ul,
.post-checklist,
.post-steps {
  display: grid;
  gap: var(--space-10);
  margin-top: var(--space-14);
  padding-left: 1.2rem;
}

.post-sidebar {
  position: sticky;
  top: 110px;
  display: grid;
  gap: var(--space-16);
}

.post-toc,
.post-cta,
.related-card {
  padding: var(--space-18);
}

.related-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.related-card:hover,
.related-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: color-mix(in oklab, var(--brand-orange), white 72%);
}

.related-card__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.related-card__overlay-link:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: -2px;
}

.post-toc ul {
  display: grid;
  gap: var(--space-10);
  margin-top: var(--space-14);
}

.post-toc a {
  color: var(--text-muted);
}

.post-toc a:hover {
  color: var(--brand-teal);
}

.post-cta {
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand-orange), white 94%), var(--bg-white));
}

.post-cta__actions {
  display: grid;
  gap: var(--space-10);
  margin-top: var(--space-18);
}

.post-divider {
  margin-block: var(--space-36);
  border-top: 1px dashed color-mix(in oklab, var(--line-strong), var(--brand-orange) 18%);
}

.related-posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-18);
  margin-top: var(--space-24);
}

.related-card__image {
  overflow: hidden;
  margin-bottom: var(--space-16);
  border-radius: calc(var(--radius-lg) - 8px);
  aspect-ratio: 16 / 10;
}

.blog-cta-band {
  margin-top: var(--space-32);
  padding: clamp(var(--space-20), 4vw, var(--space-32));
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--brand-orange), white 78%);
  background:
    radial-gradient(circle at top right, color-mix(in oklab, var(--brand-orange), white 90%), transparent 24%),
    linear-gradient(180deg, color-mix(in oklab, var(--brand-teal), white 95%), var(--bg-white));
  box-shadow: var(--shadow-soft);
}

.blog-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-top: var(--space-20);
}

@media (max-width: 1080px) {
  .blog-hero__layout,
  .blog-featured,
  .blog-featured__card,
  .post-layout {
    grid-template-columns: 1fr;
  }

  .post-sidebar {
    position: static;
  }
}

@media (max-width: 820px) {
  .blog-grid,
  .related-posts {
    grid-template-columns: 1fr;
  }

  .blog-card__actions,
  .blog-featured__actions,
  .post-hero__actions,
  .blog-hero__actions,
  .blog-cta-band__actions {
    display: grid;
  }

  .blog-card__actions .button,
  .blog-featured__actions .button,
  .post-hero__actions .button,
  .blog-hero__actions .button,
  .blog-cta-band__actions .button,
  .post-cta__actions .button {
    width: 100%;
  }

  .post-cover {
    aspect-ratio: 5 / 4;
  }
}