/**
 * Blog typography and WYSIWYG content styles.
 *
 * Repeatable content elements use .du-blog-* classes. The #du-blog-* selectors
 * are reserved for the single, unique regions rendered by single-post.php.
 */

.du-blog-post,
.du-blog-archive,
.du-blog-single,
.du-blog-content,
#du-blog-content {
  --du-blog-color-default: var(--text-default-default, #320000);
  --du-blog-color-muted: var(--text-neutral-tertiary, #796868);
  --du-blog-color-warning: var(--text-warning-on-warning, #aa5d01);
  --du-blog-color-positive: var(--text-positive-default, #01492d);
  --du-blog-link-color: var(--du-blog-color-warning);
  --du-blog-link-color-hover: var(--text-warning-on-warning-secondary, #82500a);
  --du-blog-divider-color: var(--du-blog-color-muted);
  --du-blog-space-related: var(--size-space-400, 16px);
  --du-blog-space-copy: var(--space-600, 24px);
  --du-blog-space-section: var(--size-space-800, 32px);
  --du-blog-space-group: var(--size-space-1100, 48px);
}

#du-blog-post,
.du-blog-post {
  color: var(--du-blog-color-default);
}

#du-blog-header,
.du-blog-header {
  min-width: 0;
}

#du-blog-title,
.du-blog-title {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--du-blog-text-color, var(--du-blog-color-default));
  font-family: var(--font-family-serif, "Lora", serif);
  font-size: 28px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 30px;
  letter-spacing: var(--static-headline-small-tracking, 0);
  text-align: center;
  text-transform: none;
}

.du-blog-eyebrow {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--du-blog-text-color, var(--du-blog-color-warning));
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 14px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.du-blog-content,
#du-blog-content {
  display: block;
  min-width: 0;
  color: var(--du-blog-text-color, var(--du-blog-color-default));
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

:where(.du-blog-content, #du-blog-content) :is(h1, h2),
.du-blog-heading-1,
.du-blog-heading-2 {
  color: var(--du-blog-text-color, var(--du-blog-color-default));
  font-family: var(--font-family-serif, "Lora", serif);
  font-size: 24px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.3;
  letter-spacing: var(--static-headline-small-tracking, 0);
  text-transform: none;
}

:where(.du-blog-content, #du-blog-content) h3,
.du-blog-heading-3 {
  color: var(--du-blog-text-color, var(--du-blog-color-default));
  font-family: var(--font-family-serif, "Lora", serif);
  font-size: 20px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.4;
  letter-spacing: var(--static-headline-small-tracking, 0);
  text-transform: none;
}

:where(.du-blog-content, #du-blog-content) h4,
.du-blog-heading-4 {
  color: var(--du-blog-text-color, var(--du-blog-color-default));
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 18px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

:where(.du-blog-content, #du-blog-content) h5,
.du-blog-heading-5 {
  color: var(--du-blog-text-color, var(--du-blog-color-muted));
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 18px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1;
  letter-spacing: 1px;
  text-transform: capitalize;
}

:where(.du-blog-content, #du-blog-content) h6,
.du-blog-heading-6 {
  color: var(--du-blog-text-color, var(--du-blog-color-warning));
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
}

:where(.du-blog-content, #du-blog-content) :is(h1, h2, h3, h4, h5, h6),
.du-blog-heading-1,
.du-blog-heading-2,
.du-blog-heading-3,
.du-blog-heading-4,
.du-blog-heading-5,
.du-blog-heading-6 {
  margin: 0;
  overflow-wrap: anywhere;
}

.du-blog-body-emphasized {
  margin: 0;
  color: var(--du-blog-text-color, var(--du-blog-color-muted));
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 18px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: 0;
}

.du-blog-body-emphasized-strong {
  margin: 0;
  color: var(--du-blog-text-color, var(--du-blog-color-default));
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 18px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.5;
  letter-spacing: 0;
}

.du-blog-body-strong {
  margin: 0;
  color: var(--du-blog-text-color, var(--du-blog-color-default));
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1;
  letter-spacing: 0;
}

.du-blog-source,
:where(.du-blog-content, #du-blog-content) blockquote cite {
  display: block;
  color: var(--du-blog-text-color, var(--du-blog-color-muted));
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-style: italic;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: 0;
}

.du-blog-source--small,
:where(.du-blog-content, #du-blog-content) :is(figcaption, .wp-caption-text) {
  display: block;
  color: var(--du-blog-text-color, var(--du-blog-color-muted));
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 14px;
  font-style: italic;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: 0.14px;
}

:where(.du-blog-content, #du-blog-content) p,
:where(.du-blog-content, #du-blog-content) address,
:where(.du-blog-content, #du-blog-content) dl,
:where(.du-blog-content, #du-blog-content) dd,
:where(.du-blog-content, #du-blog-content) figure,
:where(.du-blog-content, #du-blog-content) table,
:where(.du-blog-content, #du-blog-content) pre {
  margin: 0;
}

:where(.du-blog-content, #du-blog-content) p:empty {
  display: none;
}

:where(.du-blog-content, #du-blog-content) p.du-blog-editor-caret {
  display: none;
}

:where(.du-blog-content, #du-blog-content) :is(strong, b) {
  font-weight: var(--font-weight-bold, 700);
}

:where(.du-blog-content, #du-blog-content) :is(em, i) {
  font-style: italic;
}

:where(.du-blog-content, #du-blog-content) u {
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

:where(.du-blog-content, #du-blog-content) :is(s, del) {
  text-decoration-line: line-through;
}

:where(.du-blog-content, #du-blog-content) mark {
  padding-inline: 0.12em;
  background: var(--bg-warning-secondary, #ffe3ba);
  color: var(--du-blog-color-default);
}

:where(.du-blog-content, #du-blog-content) :is(sub, sup) {
  position: relative;
  font-size: 64.5%;
  line-height: 0;
  vertical-align: baseline;
}

:where(.du-blog-content, #du-blog-content) sup {
  inset-block-start: -0.5em;
}

:where(.du-blog-content, #du-blog-content) sub {
  inset-block-end: -0.25em;
}

:where(.du-blog-content, #du-blog-content) blockquote,
.du-blog-quote {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--du-blog-text-color, var(--du-blog-color-muted));
  font-family: var(--font-family-serif, "Lora", serif);
  font-size: 24px;
  font-style: italic;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.6;
  letter-spacing: 0;
}

:where(.du-blog-content, #du-blog-content) blockquote p {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

:where(.du-blog-content, #du-blog-content) blockquote cite {
  margin-block-start: var(--du-blog-space-related);
}

:where(.du-blog-content, #du-blog-content) :is(ul, ol) {
  margin: 0;
  padding-inline-start: 24px;
  list-style-position: outside;
}

:is(#du-blog-content, .du-blog-content) ul {
  list-style-type: disc;
}

:is(#du-blog-content, .du-blog-content) ol {
  list-style-type: decimal;
}

:is(#du-blog-content, .du-blog-content) li {
  margin: 0;
  padding-inline-start: 0;
  line-height: inherit;
}

:is(#du-blog-content, .du-blog-content) li + li {
  margin-block-start: 0;
}

:is(#du-blog-content, .du-blog-content) li > :is(ul, ol) {
  margin-block-start: var(--du-blog-space-related);
}

:where(.du-blog-content, #du-blog-content) dt {
  font-weight: var(--font-weight-bold, 700);
}

:where(.du-blog-content, #du-blog-content) dd + dt {
  margin-block-start: var(--du-blog-space-related);
}

:where(.du-blog-content, #du-blog-content) img,
:where(.du-blog-content, #du-blog-content) video,
:where(.du-blog-content, #du-blog-content) iframe {
  max-width: 100%;
  height: auto;
}

:where(.du-blog-content, #du-blog-content) img {
  display: block;
  border-radius: var(--radius-xs, 4px);
}

:where(.du-blog-content, #du-blog-content) figure {
  max-width: 100%;
}

/*
 * WordPress' Classic Editor can temporarily wrap a replaced image in legacy
 * figure.wp-caption markup. Keep that compatibility wrapper fluid so neither
 * an attachment's pixel width nor adding a caption can resize an approved
 * blog image layout.
 */
:where(.du-blog-content, #du-blog-content)
  :is(figure.wp-block-image, figure.wp-block-media-text__media)
  > :is(.wp-caption, .mceTemp),
:where(.du-blog-content, #du-blog-content)
  :is(figure.wp-block-image, figure.wp-block-media-text__media)
  > .mceTemp
  > .wp-caption {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
}

:where(.du-blog-content, #du-blog-content)
  :is(figure.wp-block-image, figure.wp-block-media-text__media)
  > :is(.wp-caption, .mceTemp)
  :is(img, a) {
  width: 100%;
  max-width: 100%;
}

/* The replacement caption is authoritative; hide a stale template caption. */
:where(.du-blog-content, #du-blog-content)
  :is(figure.wp-block-image, figure.wp-block-media-text__media):has(> .wp-caption)
  > figcaption,
:where(.du-blog-content, #du-blog-content)
  :is(figure.wp-block-image, figure.wp-block-media-text__media):has(
    > .mceTemp .wp-caption
  )
  > figcaption {
  display: none;
}

:where(.du-blog-content, #du-blog-content)
  :is(figcaption, .wp-caption-text, .wp-caption-dd) {
  margin-block-start: var(--space-200, 8px);
}

:where(.du-blog-content, #du-blog-content) table {
  display: table;
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  white-space: normal;
}

:where(.du-blog-content, #du-blog-content) :is(.wp-block-table, .du-blog-table) {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:where(.du-blog-content, #du-blog-content) :is(.wp-block-table, .du-blog-table) table {
  width: 100%;
  min-width: 100%;
}

:where(.du-blog-content, #du-blog-content) :is(th, td) {
  padding: 12px 16px;
  border: 1px solid currentcolor;
  text-align: start;
  white-space: normal;
}

:where(.du-blog-content, #du-blog-content) th {
  font-weight: var(--font-weight-bold, 700);
}

:where(.du-blog-content, #du-blog-content) pre {
  max-width: 100%;
  padding: var(--space-400, 16px);
  overflow-x: auto;
  background: var(--bg-default-secondary, #ffefce);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre;
}

:where(.du-blog-content, #du-blog-content) :not(pre) > code {
  padding: 0.1em 0.3em;
  background: var(--bg-default-secondary, #ffefce);
  font-size: 0.875em;
}

:where(.du-blog-content, #du-blog-content) abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
  cursor: help;
}

:where(.du-blog-content, #du-blog-content) :is(p, li, dd, figcaption, cite) a:not(.du-text-button, .du-blog-text-button),
.du-blog-inline-link {
  color: var(--du-blog-link-color);
  font: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  transition: color var(--duration-fast, 160ms) var(--ease-standard, ease);
}

:where(.du-blog-content, #du-blog-content) :is(p, li, dd, figcaption, cite) a:not(.du-text-button, .du-blog-text-button):hover,
:where(.du-blog-content, #du-blog-content) :is(p, li, dd, figcaption, cite) a:not(.du-text-button, .du-blog-text-button):focus-visible,
.du-blog-inline-link:hover,
.du-blog-inline-link:focus-visible {
  color: var(--du-blog-link-color-hover);
}

.du-blog-text-button {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--du-blog-link-color);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  cursor: pointer;
  transition: color var(--duration-fast, 160ms) var(--ease-standard, ease);
}

.du-blog-text-button:hover,
.du-blog-text-button:focus-visible {
  color: var(--du-blog-link-color-hover);
}

:where(.du-blog-content, #du-blog-content) a:focus-visible,
.du-blog-text-button:focus-visible {
  outline: 2px solid currentcolor !important;
  outline-offset: 3px;
}

:where(.du-blog-content, #du-blog-content) hr,
.du-blog-divider {
  display: block;
  width: 100%;
  height: 0.5px;
  margin-inline: 0;
  padding: 0;
  border: 0;
  background: currentcolor;
  color: var(--du-blog-divider-color);
  opacity: 1;
}

:is(#du-blog-content, .du-blog-content) > hr.wp-block-separator {
  height: 0.5px;
  border: 0;
  background: currentcolor;
}

.du-blog-divider--short,
:where(.du-blog-content, #du-blog-content) hr.is-style-short {
  width: 80px;
  margin-inline: auto;
}

.du-blog-divider--dotted,
:where(.du-blog-content, #du-blog-content) hr.is-style-dotted {
  height: 0.5px;
  background: repeating-linear-gradient(
    to right,
    currentcolor 0 1.4px,
    transparent 1.4px 2.8px
  );
  color: var(--du-blog-divider-color);
}

.du-blog-divider--align-left,
:where(.du-blog-content, #du-blog-content) hr[data-du-blog-divider-align="left"],
:where(.du-blog-content, #du-blog-content) hr.alignleft {
  margin-inline: 0 auto;
}

.du-blog-divider--align-center,
:where(.du-blog-content, #du-blog-content) hr[data-du-blog-divider-align="center"],
:where(.du-blog-content, #du-blog-content) hr.aligncenter {
  margin-inline: auto;
}

.du-blog-divider--align-right,
:where(.du-blog-content, #du-blog-content) hr[data-du-blog-divider-align="right"],
:where(.du-blog-content, #du-blog-content) hr.alignright {
  margin-inline: auto 0;
}

.du-blog-divider-color--default,
:where(.du-blog-content, #du-blog-content) hr[data-du-blog-divider-color="default"] {
  --du-blog-divider-color: var(--du-blog-color-default);
}

.du-blog-divider-color--muted,
:where(.du-blog-content, #du-blog-content) hr[data-du-blog-divider-color="muted"] {
  --du-blog-divider-color: var(--du-blog-color-muted);
}

.du-blog-divider-color--warning,
:where(.du-blog-content, #du-blog-content) hr[data-du-blog-divider-color="warning"] {
  --du-blog-divider-color: var(--du-blog-color-warning);
}

.du-blog-divider-color--positive,
:where(.du-blog-content, #du-blog-content) hr[data-du-blog-divider-color="positive"] {
  --du-blog-divider-color: var(--du-blog-color-positive);
}

:is(#du-blog-content, .du-blog-content) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

:is(#du-blog-content, .du-blog-content) > * + * {
  margin-block-start: var(--du-blog-space-group);
}

:is(#du-blog-content, .du-blog-content) >
  :is(h1, h2, h3, h4, h5, h6, .du-blog-heading-1, .du-blog-heading-2, .du-blog-heading-3, .du-blog-heading-4, .du-blog-heading-5, .du-blog-heading-6) +
  :is(p, ul, ol, blockquote, .du-blog-body-emphasized, .du-blog-body-emphasized-strong, .du-blog-body-strong) {
  margin-block-start: var(--du-blog-space-related);
}

:is(#du-blog-content, .du-blog-content) >
  :is(h1, h2, .du-blog-heading-1, .du-blog-heading-2) +
  :where(.du-blog-body-emphasized, .du-blog-body-emphasized-strong) {
  text-align: center;
}

:is(#du-blog-content, .du-blog-content) >
  :is(p, ul, ol, .du-blog-body-emphasized, .du-blog-body-emphasized-strong, .du-blog-body-strong) +
  :is(p, ul, ol, .du-blog-body-emphasized, .du-blog-body-emphasized-strong, .du-blog-body-strong) {
  margin-block-start: var(--du-blog-space-related);
}

:is(#du-blog-content, .du-blog-content) >
  :is(.du-blog-body-emphasized, .du-blog-body-emphasized-strong) +
  :is(p, ul, ol, .du-blog-body-strong) {
  margin-block-start: var(--du-blog-space-related);
}

:is(#du-blog-content, .du-blog-content) > .du-blog-eyebrow +
  :is(h1, h2, h3, h4, h5, h6, .du-blog-title, .du-blog-heading-1, .du-blog-heading-2, .du-blog-heading-3, .du-blog-heading-4, .du-blog-heading-5, .du-blog-heading-6) {
  margin-block-start: var(--du-blog-space-related);
}

:is(#du-blog-content, .du-blog-content) > :is(hr, .du-blog-divider),
:is(#du-blog-content, .du-blog-content) > :is(hr, .du-blog-divider) + * {
  margin-block-start: var(--du-blog-space-group);
}

:is(#du-blog-content, .du-blog-content) >
  :where(p, ul, ol, dl, table) +
  :is(h2, h3, h4, h5, h6, .du-blog-heading-2, .du-blog-heading-3, .du-blog-heading-4, .du-blog-heading-5, .du-blog-heading-6) {
  margin-block-start: var(--du-blog-space-group);
}

:is(#du-blog-content, .du-blog-content) >
  :where(p, ul, ol) +
  :is(h6, .du-blog-heading-6) {
  margin-block-start: var(--du-blog-space-group);
}

:is(#du-blog-content, .du-blog-content) >
  :is(h5, h6, .du-blog-heading-5, .du-blog-heading-6) +
  :is(ul, ol) {
  margin-block-start: var(--du-blog-space-related);
}

:is(#du-blog-content, .du-blog-content) >
  :is(ul, ol) +
  * {
  margin-block-start: var(--du-blog-space-group);
}

:is(#du-blog-content, .du-blog-content) >
  :where(figure, .wp-block-image, .wp-block-video, .wp-block-gallery, .wp-block-media-text) +
  :is(h2, h3, h4, h5, h6, .du-blog-heading-2, .du-blog-heading-3, .du-blog-heading-4, .du-blog-heading-5, .du-blog-heading-6),
:is(#du-blog-content, .du-blog-content) >
  :is(.du-blog-source, .du-blog-source--small) +
  :is(h2, h3, h4, h5, h6, .du-blog-heading-2, .du-blog-heading-3, .du-blog-heading-4, .du-blog-heading-5, .du-blog-heading-6),
:is(#du-blog-content, .du-blog-content) >
  :where(p, ul, ol) +
  :is(figure, .wp-block-image, .wp-block-video, .wp-block-gallery, .wp-block-media-text) {
  margin-block-start: var(--du-blog-space-group);
}

:is(#du-blog-content, .du-blog-content) >
  :is(h1, h2, h3, h4, h5, h6, .du-blog-heading-1, .du-blog-heading-2, .du-blog-heading-3, .du-blog-heading-4, .du-blog-heading-5, .du-blog-heading-6) +
  .wp-block-media-text,
:is(#du-blog-content, .du-blog-content) >
  .wp-block-media-text +
  .wp-block-media-text {
  margin-block-start: var(--du-blog-space-related);
}

:is(#du-blog-content, .du-blog-content) > .du-blog-spacer {
  display: block;
  width: 100%;
  margin-block: 0;
  padding: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
}

:is(#du-blog-content, .du-blog-content) > .du-blog-spacer--16 {
  height: 16px;
}

:is(#du-blog-content, .du-blog-content) > .du-blog-spacer--32 {
  height: 32px;
}

:is(#du-blog-content, .du-blog-content) > .du-blog-spacer--48 {
  height: 48px;
}

:is(#du-blog-content, .du-blog-content) > .du-blog-spacer + * {
  margin-block-start: 0;
}

.du-blog-align-left,
:where(.du-blog-content, #du-blog-content) .has-text-align-left {
  text-align: left;
}

.du-blog-align-center,
:where(.du-blog-content, #du-blog-content) .has-text-align-center {
  text-align: center;
}

.du-blog-align-right,
:where(.du-blog-content, #du-blog-content) .has-text-align-right {
  text-align: right;
}

.du-blog-align-justify,
:where(.du-blog-content, #du-blog-content) .has-text-align-justify {
  text-align: justify;
}

.du-blog-case-none {
  text-transform: none;
}

.du-blog-case-uppercase {
  text-transform: uppercase;
}

.du-blog-case-lowercase {
  text-transform: lowercase;
}

.du-blog-case-capitalize {
  text-transform: capitalize;
}

.du-blog-color--default {
  --du-blog-text-color: var(--du-blog-color-default);
  color: var(--du-blog-color-default);
}

.du-blog-color--muted {
  --du-blog-text-color: var(--du-blog-color-muted);
  color: var(--du-blog-color-muted);
}

.du-blog-color--warning {
  --du-blog-text-color: var(--du-blog-color-warning);
  color: var(--du-blog-color-warning);
}

.du-blog-color--positive {
  --du-blog-text-color: var(--du-blog-color-positive);
  color: var(--du-blog-color-positive);
}

/* Editor-selected colors apply to text styles; links retain their defined color. */
:is(#du-blog-content, .du-blog-content)
  :is(
    .du-blog-color--default,
    .du-blog-color--muted,
    .du-blog-color--warning,
    .du-blog-color--positive
  ) {
  color: var(--du-blog-text-color);
}

:is(#du-blog-content, .du-blog-content)
  :is(a.du-blog-inline-link, a.du-blog-text-button) {
  color: var(--du-blog-link-color);
}

:is(#du-blog-content, .du-blog-content)
  :is(a.du-blog-inline-link, a.du-blog-text-button):is(:hover, :focus-visible) {
  color: var(--du-blog-link-color-hover);
}

@media (min-width: 768px) {
  #du-blog-title,
  .du-blog-title {
    font-size: 40px;
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.3;
  }

  :where(.du-blog-content, #du-blog-content) :is(h1, h2),
  .du-blog-heading-1,
  .du-blog-heading-2 {
    font-size: 32px;
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.3;
  }

  :where(.du-blog-content, #du-blog-content) h3,
  .du-blog-heading-3 {
    font-size: 24px;
    line-height: 1.3;
  }
}

@media (min-width: 1200px) {
  #du-blog-title,
  .du-blog-title {
    font-size: 56px;
  }

}

/**
 * Single post composition.
 */

.du-site-main.du-blog-single {
  min-height: 0;
  padding-block: 0;
  overflow-x: clip;
  background: var(--bg-default, #fffbf5);
}

.du-blog-hero {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  background: var(--bg-default, #fffbf5);
  color: var(--du-blog-color-default);
}

.du-blog-hero__breadcrumbs {
  position: absolute;
  z-index: 1;
  inset: 12px 16px auto;
  min-width: 0;
  max-width: calc(100% - 32px);
}

.du-blog-hero__breadcrumbs .du-breadcrumbs__list {
  width: 100%;
}

.du-blog-hero__breadcrumbs .du-breadcrumbs__item:last-child {
  flex: 1 1 auto;
}

.du-blog-hero__breadcrumbs .du-breadcrumbs__current {
  display: inline;
}

.du-blog-hero__inner {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 814px;
  min-height: 0;
  margin-inline: auto;
  padding: 64px 16px 40px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  text-align: center;
}

.du-blog-hero__heading {
  display: flex;
  width: 100%;
  max-width: 691px;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.du-blog-hero__category {
  display: inline-block;
  color: var(--du-blog-color-warning);
  text-decoration: none;
}

.du-blog-hero__category:hover,
.du-blog-hero__category:focus-visible {
  color: var(--du-blog-link-color-hover);
  text-decoration: underline;
  text-underline-position: from-font;
}

.du-blog-hero__category:focus-visible,
.du-blog-share:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 3px;
}

.du-blog-hero__excerpt {
  width: 100%;
  max-width: 765px;
  color: var(--du-blog-color-muted);
  text-align: center;
}

.du-blog-hero__meta {
  display: flex;
  width: 100%;
  max-width: 456px;
  margin: 0;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: var(--du-blog-color-default);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}

.du-blog-hero__byline,
.du-blog-hero__published {
  width: 100%;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
}

.du-blog-hero__published {
  color: var(--text-default-tertiary, #9a8c8c);
}

.du-blog-share {
  box-sizing: border-box;
  display: inline-flex;
  width: 96px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  color: var(--du-blog-color-default);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  cursor: pointer;
  appearance: none;
}

.du-blog-share:hover {
  color: var(--du-blog-link-color-hover);
}

.du-blog-share__icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.du-blog-featured {
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 320 / 337;
  background: var(--bg-default-secondary, #ffefce);
}

.du-blog-featured__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#du-blog-post,
.du-blog-post {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
  padding-block: 48px 72px;
  border-radius: 64px 64px 0 0;
  background: var(--bg-default, #fffbf5);
}

#du-blog-post.du-blog-post--has-featured,
.du-blog-post.du-blog-post--has-featured {
  margin-block-start: -64px;
}

.du-blog-author {
  display: flex;
  width: min(calc(100% - 32px), 604px);
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.du-blog-author__name {
  margin: 0;
  color: var(--du-blog-color-default);
}

.du-blog-author__identity {
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--space-200, 8px);
}

.du-blog-author__avatar {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--radius-full, 9999px);
  background: #d9d9d9;
  object-fit: cover;
  object-position: center;
}

.du-blog-author__bio {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: var(--du-blog-color-default);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.du-blog-author__bio.is-expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.du-blog-author__bio p {
  margin: 0;
}

.du-blog-author__bio p + p {
  margin-block-start: 16px;
}

.du-blog-author__toggle[hidden] {
  display: none;
}

.du-blog-post__author-divider {
  width: min(calc(100% - 32px), 604px);
  margin: 48px auto;
}

.du-blog-content {
  width: 604px;
  max-width: 100%;
  margin-inline: auto;
}

:where(.du-blog-content, #du-blog-content) blockquote,
.du-blog-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

:where(.du-blog-content, #du-blog-content) blockquote::before,
.du-blog-quote::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin-block-end: 16px;
  flex: 0 0 40px;
  background: url("../images/blog/quote.svg") center / 37.2953px 33.2002px no-repeat;
}

:where(.du-blog-content, #du-blog-content) blockquote + p {
  margin-block-start: 16px;
  color: var(--du-blog-text-color, var(--du-blog-color-muted));
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-style: italic;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  text-align: center;
}

:where(.du-blog-content, #du-blog-content) > * + blockquote,
:where(.du-blog-content, #du-blog-content) > blockquote + :not(p),
:where(.du-blog-content, #du-blog-content) > blockquote + p + * {
  margin-block-start: var(--du-blog-space-group);
}

:where(.du-blog-content, #du-blog-content) :is(.wp-block-image, .wp-block-video) {
  width: 100%;
}

:where(.du-blog-content, #du-blog-content) :is(.wp-block-image, .wp-block-video) :is(img, video),
:where(.du-blog-content, #du-blog-content) > img {
  display: block;
  width: 100%;
  height: auto;
}

:where(.du-blog-content, #du-blog-content) :is(.alignwide, .alignfull) {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

:where(.du-blog-content, #du-blog-content) :is(.wp-block-embed__wrapper, .wp-block-video) iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

:where(.du-blog-content, #du-blog-content) .wp-block-media-text {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

:where(.du-blog-content, #du-blog-content) .wp-block-media-text.has-media-on-the-right {
  grid-template-columns: minmax(0, 1fr) 208px;
}

:where(.du-blog-content, #du-blog-content) .wp-block-media-text__media {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

:where(.du-blog-content, #du-blog-content) .wp-block-media-text__content {
  grid-column: 2;
  grid-row: 1;
}

:where(.du-blog-content, #du-blog-content)
  .wp-block-media-text.has-media-on-the-right
  .wp-block-media-text__media {
  grid-column: 2;
}

:where(.du-blog-content, #du-blog-content)
  .wp-block-media-text.has-media-on-the-right
  .wp-block-media-text__content {
  grid-column: 1;
}

:where(.du-blog-content, #du-blog-content) .wp-block-media-text__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

:where(.du-blog-content, #du-blog-content) .wp-block-media-text__content {
  min-width: 0;
  padding: 0;
}

:where(.du-blog-content, #du-blog-content) .wp-block-media-text__content > * {
  margin: 0;
}

:where(.du-blog-content, #du-blog-content) .wp-block-media-text__content > * + * {
  margin-block-start: var(--du-blog-space-related);
}

:where(.du-blog-content, #du-blog-content) .wp-block-columns {
  display: flex;
  margin: 0;
  gap: 24px;
}

:where(.du-blog-content, #du-blog-content) .wp-block-column {
  min-width: 0;
  flex: 1 1 0;
}

:where(.du-blog-content, #du-blog-content) .wp-block-column > * {
  margin-block: 0;
}

:where(.du-blog-content, #du-blog-content) .wp-block-column > * + * {
  margin-block-start: 16px;
}

:is(#du-blog-content, .du-blog-content) .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

:is(#du-blog-content, .du-blog-content) .wp-block-gallery.has-nested-images figure.wp-block-image {
  display: block;
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
}

/*
 * Classic Editor captions add a fixed-width legacy figure.wp-caption inside
 * each Gallery item. Normalize that extra wrapper so captions cannot change
 * the grid track or image width on either desktop or mobile.
 */
:is(#du-blog-content, .du-blog-content) .wp-block-gallery.has-nested-images figure.wp-block-image > .wp-caption {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
}

:is(#du-blog-content, .du-blog-content)
  .wp-block-gallery.has-nested-images
  figure.wp-block-image
  > .mceTemp,
:is(#du-blog-content, .du-blog-content)
  .wp-block-gallery.has-nested-images
  figure.wp-block-image
  > .mceTemp
  > .wp-caption {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
}

:is(#du-blog-content, .du-blog-content) .wp-block-gallery.has-nested-images figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  flex: none;
  object-fit: cover;
}

:is(#du-blog-content, .du-blog-content) .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
  height: auto;
  flex: none;
}

:is(#du-blog-content, .du-blog-content) .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
  content: none;
}

:is(#du-blog-content, .du-blog-content) .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  position: static;
  box-sizing: border-box;
  width: 100%;
  max-height: none;
  margin-block-start: var(--space-200, 8px);
  padding: 0;
  flex: none;
  overflow: visible;
  background: transparent;
  color: var(--du-blog-color-muted);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 14px;
  font-style: italic;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: 0.14px;
  text-align: start;
  text-shadow: none;
}

:where(.du-blog-content, #du-blog-content) :is(.wp-block-group__inner-container, .wp-block-cover__inner-container) > * {
  margin-block: 0;
}

:where(.du-blog-content, #du-blog-content) :is(.wp-block-group__inner-container, .wp-block-cover__inner-container) > * + * {
  margin-block-start: var(--du-blog-space-related);
}

:where(.du-blog-content, #du-blog-content) .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

:where(.du-blog-content, #du-blog-content) .wp-block-button__link {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--du-blog-link-color);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

:where(.du-blog-content, #du-blog-content) .wp-block-button__link:hover,
:where(.du-blog-content, #du-blog-content) .wp-block-button__link:focus-visible {
  color: var(--du-blog-link-color-hover);
}

.du-blog-tags {
  display: flex;
  width: min(calc(100% - 32px), 604px);
  margin: var(--du-blog-space-group) auto 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.du-blog-tags .du-tag {
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .du-blog-content {
    width: calc(100% - 32px);
    max-width: 604px;
  }

  #du-blog-post,
  .du-blog-post {
    padding-block-start: 56px;
  }

  .du-blog-post__author-divider {
    margin: 40px auto;
  }

  :where(.du-blog-content, #du-blog-content) > * +
    :is(figure, .wp-block-image, .wp-block-video, .wp-block-gallery, .wp-block-media-text) {
    margin-block-start: 40px;
  }

  :where(.du-blog-content, #du-blog-content) :is(.wp-block-table, .du-blog-table) table {
    min-width: 540px;
  }

  :where(.du-blog-content, #du-blog-content) .du-blog-table--columns-4 table {
    min-width: 680px;
  }

  :where(.du-blog-content, #du-blog-content) .wp-block-media-text,
  :where(.du-blog-content, #du-blog-content) .wp-block-media-text.has-media-on-the-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  :where(.du-blog-content, #du-blog-content) .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
    order: -1;
  }

  :where(.du-blog-content, #du-blog-content) .wp-block-media-text__media,
  :where(.du-blog-content, #du-blog-content) .wp-block-media-text__content {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }

  :where(.du-blog-content, #du-blog-content) .wp-block-columns {
    flex-direction: column;
    gap: 40px;
  }

  :is(#du-blog-content, .du-blog-content) .wp-block-gallery.has-nested-images {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (min-width: 768px) {
  .du-blog-author {
    gap: 0;
  }

  .du-blog-author__identity + .du-blog-author__bio {
    margin-block-start: var(--space-400, 16px);
  }

  .du-blog-author__bio + .du-blog-author__toggle {
    margin-block-start: var(--space-200, 8px);
  }

  .du-blog-hero {
    min-height: 0;
  }

  .du-blog-hero__breadcrumbs {
    inset-block-start: 24px;
    inset-inline: calc(
      ((100% - min(100%, var(--main-nav-desktop-width, 1280px))) / 2)
      + var(--main-nav-desktop-padding-x, 22px)
    );
  }

  .du-blog-hero__inner {
    min-height: 0;
    padding: 96px 24px 48px;
  }

  .du-blog-hero__heading {
    gap: 4px;
  }

  .du-blog-featured {
    aspect-ratio: 16 / 9;
  }

  #du-blog-post,
  .du-blog-post {
    padding-block: 72px 96px;
  }
}

@media (max-width: 767px) {
  .du-blog-hero__breadcrumbs {
    --breadcrumbs-gap: var(--space-100, 4px);
    --breadcrumbs-item-gap: var(--space-100, 4px);
    --breadcrumbs-icon-size: 8px;

    position: static;
    box-sizing: border-box;
    max-width: none;
    padding: var(--space-300, 12px) var(--space-400, 16px) 0;
  }

  .du-blog-hero__breadcrumbs .du-breadcrumbs__list {
    width: 100%;
    overflow: hidden;
    flex-wrap: nowrap;
    align-items: center;
  }

  .du-blog-hero__breadcrumbs .du-breadcrumbs__item {
    overflow: hidden;
    flex: 0 1 auto;
    max-width: 100%;
    white-space: nowrap;
  }

  .du-blog-hero__breadcrumbs .du-breadcrumbs__item:first-child,
  .du-blog-hero__breadcrumbs .du-breadcrumbs__item:nth-child(2) {
    flex: 0 0 auto;
  }

  .du-blog-hero__breadcrumbs .du-breadcrumbs__item:last-child {
    flex: 1 1 auto;
  }

  .du-blog-hero__breadcrumbs .du-breadcrumbs__current {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .du-blog-hero__inner {
    padding-top: var(--space-700, 32px);
  }
}

@media (min-width: 1200px) {
  .du-blog-hero {
    min-height: 0;
  }

  .du-blog-hero__inner {
    min-height: 0;
    padding: 96px 24px 48px;
  }

  .du-blog-featured {
    aspect-ratio: 1280 / 674;
  }

  #du-blog-post,
  .du-blog-post {
    padding-block-start: 96px;
  }
}

/* All Lora typography on a single blog post uses the approved medium weight. */
.du-blog-single :where(.du-blog-content, #du-blog-content) h2,
.du-blog-single .du-blog-heading-2,
.du-blog-single :where(.du-blog-content, #du-blog-content) blockquote,
.du-blog-single .du-blog-quote,
.du-blog-single .du-blog-related-classes .du-product-related__title,
.du-blog-single .du-blog-related-classes .du-product-related-card__title {
  font-weight: var(--font-weight-medium, 500);
}

/*
 * Blog-related classes.
 *
 * This retains the single-product related-carousel DOM and interaction model,
 * with card-content overrides from the blog Figma component.
 */
#du-blog-post.du-blog-post--has-related-classes,
.du-blog-post.du-blog-post--has-related-classes {
  padding-block-end: var(--Space-2400, 96px);
}

.du-blog-related-classes.du-product-related {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: var(--Space-2400, 96px) 0;
  background: var(--background-default-default, #fffbf5);
  color: var(--du-blog-color-default, #320000);
}

.du-blog-related-classes.du-product-related::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-block-start: 0.5px solid var(--du-blog-divider-color, #796868);
  content: "";
}

.du-blog-related-classes.du-product-related::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(calc(100% - 48px), 1232px);
  border-block-start: 1px solid var(--du-blog-divider-color, #796868);
  content: "";
  transform: translateX(-50%);
}

.du-blog-related-classes .du-product-related__inner {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--Space-600, 24px);
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.du-blog-related-classes .du-product-related__title {
  width: 100%;
  max-width: 844px;
  margin: 0;
  color: var(--du-blog-color-default, #320000);
  font-family: var(--font-family-serif, "Lora", serif);
  font-size: 36px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  margin-block-end: var(--Space-600, 24px);
}

.du-blog-related-classes .du-product-related__track {
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 0;
}

.du-blog-related-classes--few .du-product-related__track {
  display: flex;
  justify-content: center;
}

.du-blog-related-classes .du-product-related__track:focus-visible {
  outline: 2px solid var(--du-blog-color-warning, #aa5d01);
  outline-offset: 4px;
}

.du-blog-related-classes .du-product-related-card {
  width: 100%;
  min-height: 0;
  color: var(--du-blog-color-default, #320000);
}

.du-blog-related-classes--few .du-product-related-card {
  width: min(290px, 100%);
}

.du-blog-related-classes .du-product-related-card[hidden] {
  display: none;
}

.du-blog-related-classes .du-product-related-card__link {
  display: flex;
  width: 100%;
  min-height: 100%;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.du-blog-related-classes .du-product-related-card__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 497 / 373;
  border-radius: 4px;
  background: var(--background-default-default, #fffbf5);
}

.du-blog-related-classes .du-product-related-card__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100% !important;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
  transition: transform 180ms ease;
}

.du-blog-related-classes .du-product-related-card__link:hover .du-product-related-card__image,
.du-blog-related-classes .du-product-related-card__link:focus-visible .du-product-related-card__image {
  transform: scale(1.025);
}

.du-blog-related-classes .du-product-related-card__body {
  display: flex;
  width: 100%;
  padding: 16px 0 24px;
  flex-direction: column;
  align-items: flex-start;
}

.du-blog-related-classes .du-product-related-card__headline {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.du-blog-related-classes .du-product-related-card__eyebrow {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--du-blog-color-warning, #aa5d01);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 14px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.du-blog-related-classes .du-product-related-card__title {
  display: -webkit-box;
  width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--du-blog-color-default, #320000);
  font-family: var(--font-family-serif, "Lora", serif);
  font-size: 20px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.4;
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.du-blog-related-classes .du-product-related-card__description {
  display: -webkit-box;
  width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--du-blog-color-default, #320000);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.du-blog-related-classes__controls {
  display: flex;
  width: 100%;
  margin-block-start: var(--Space-800, 32px);
  align-items: center;
  justify-content: center;
  gap: var(--Space-100, 4px);
}

.du-blog-related-classes__controls[hidden] {
  display: none;
}

.du-blog-related-classes__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.du-blog-related-classes__control {
  box-sizing: border-box;
  display: inline-flex;
  height: 32px;
  padding: var(--Space-200, 8px);
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--du-blog-color-default, #320000);
  cursor: pointer;
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1;
}

.du-blog-related-classes__pages {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: var(--Space-100, 4px);
  list-style: none;
}

.du-blog-related-classes__pages li {
  display: flex;
  margin: 0;
}

.du-blog-related-classes__page,
.du-blog-related-classes__dots {
  box-sizing: border-box;
  display: inline-flex;
  width: 32px;
  height: 32px;
  padding: var(--Space-200, 8px);
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--du-blog-color-default, #320000);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1;
}

button.du-blog-related-classes__page {
  cursor: pointer;
}

.du-blog-related-classes__page:not(.is-active):hover,
.du-blog-related-classes__page:not(.is-active):focus-visible {
  background: var(--background-default-secondary, #ffefce);
}

.du-blog-related-classes__page:focus-visible {
  outline: 2px solid var(--du-blog-color-warning, #aa5d01);
  outline-offset: 2px;
}

.du-blog-related-classes__page.is-active {
  background: var(--bg-brand-default, #320000);
  color: var(--text-brand-on-brand, #ffe3ba);
}

.du-blog-related-classes__dots {
  font-weight: var(--font-weight-bold, 700);
}

.du-blog-related-classes__control-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.du-blog-related-classes__control-icon img {
  display: block;
  width: 5.6px;
  max-width: none;
  height: 9.6px;
  object-fit: fill;
}

.du-blog-related-classes__control:hover:not(:disabled),
.du-blog-related-classes__control:focus-visible {
  background: var(--background-default-secondary, #ffefce);
}

.du-blog-related-classes__control:focus-visible {
  outline: 2px solid var(--du-blog-color-warning, #aa5d01);
  outline-offset: 2px;
}

.du-blog-related-classes__control:disabled {
  cursor: default;
  opacity: 0.45;
}

.du-blog-related-classes .du-product-related__cta {
  box-sizing: border-box;
  display: inline-flex;
  min-height: 48px;
  margin-block-start: var(--Space-800, 32px);
  padding: 12px 24px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--du-blog-color-default, #320000);
  box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
  color: var(--background-warning-default, #ffe3ba);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
}

.du-blog-related-classes .du-product-related__cta:hover,
.du-blog-related-classes .du-product-related__cta:focus-visible {
  background: var(--background-warning-secondary, #ffa750);
  color: var(--du-blog-color-default, #320000);
}

@media (max-width: 767px) {
  .du-blog-related-classes.du-product-related {
    padding: var(--Space-2400, 96px) 0;
  }

  .du-blog-related-classes.du-product-related::after {
    width: calc(100% - 32px);
  }

  .du-blog-related-classes .du-product-related__inner {
    padding-inline: 16px;
  }

  .du-blog-related-classes .du-product-related__title {
    font-size: 28px;
  }

  .du-blog-related-classes .du-product-related__track,
  .du-blog-related-classes--few .du-product-related__track {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .du-blog-related-classes .du-product-related-card,
  .du-blog-related-classes--few .du-product-related-card {
    width: 100%;
  }

  .du-blog-related-classes__controls {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: center;
    justify-content: safe center;
    scrollbar-width: none;
  }

  .du-blog-related-classes__controls::-webkit-scrollbar {
    display: none;
  }

  .du-blog-related-classes__pages {
    min-width: 0;
    flex: 0 0 auto;
  }
}

/* Blog archive */
.du-blog-archive {
  overflow-x: hidden;
  background: var(--background-default-default, #fffbf5);
  color: var(--du-blog-color-default, #320000);
}

.du-blog-archive-hero {
  box-sizing: border-box;
  display: flex;
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  justify-content: center;
  padding-inline: 24px;
  background-color: var(--background-default-default, #fffbf5);
}

.du-blog-archive-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -8.5445vw;
  right: -1.3758%;
  bottom: 0;
  left: -1.3758%;
  background-image: var(--du-blog-archive-hero-image);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.6;
  transform: scaleX(-1);
  transform-origin: center;
  pointer-events: none;
}

.du-blog-archive-hero__inner {
  box-sizing: border-box;
  display: flex;
  position: relative;
  z-index: 1;
  width: min(100%, 765px);
  min-height: 0;
  margin: 0;
  padding: 96px 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
}

.du-blog-archive-hero__title {
  width: 100%;
  margin: 0;
  color: var(--du-blog-color-default, #320000);
  font-family: var(--font-family-serif, "Lora", serif);
  font-size: 56px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.3;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.du-blog-archive-hero__description {
  width: 100%;
  margin: 0;
  color: var(--du-blog-color-default, #320000);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 18px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: 0;
}

.du-blog-archive-hero__description > * {
  margin: 0;
}

.du-blog-archive-hero__description > * + * {
  margin-top: 16px;
}

.du-blog-archive-featured {
  position: relative;
  width: 100%;
  height: 674px;
  overflow: hidden;
  background: var(--background-brand-dark-chocolate, #320000);
  color: var(--text-brand-on-brand, #ffe3ba);
}

.du-blog-archive-featured__track,
.du-blog-archive-featured__slide,
.du-blog-archive-featured__link {
  position: absolute;
  inset: 0;
}

.du-blog-archive-featured__slide {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms ease;
}

.du-blog-archive-featured__slide.is-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.du-blog-archive-featured__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.du-blog-archive-featured__image {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  transition: transform 5500ms ease-out;
}

.du-blog-archive-featured__slide.is-active .du-blog-archive-featured__image {
  transform: scale(1.055);
}

.du-blog-archive-featured__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(50, 0, 0, 0.14) 0%, rgba(50, 0, 0, 0.02) 42%, rgba(50, 0, 0, 0.76) 100%),
    linear-gradient(90deg, rgba(50, 0, 0, 0.24) 0%, rgba(50, 0, 0, 0.02) 50%, rgba(50, 0, 0, 0.2) 100%);
}

.du-blog-archive-featured__content {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 64px;
  left: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-brand-on-brand, #ffe3ba);
  text-align: center;
}

.du-blog-archive-featured__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 18px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.du-blog-archive-featured__title {
  display: block;
  width: min(100%, 874px);
  margin: 0;
  font-family: var(--font-family-serif, "Lora", serif);
  font-size: 56px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.3;
  letter-spacing: 0;
  text-shadow: 0 16px 32px rgba(50, 0, 0, 0.4);
  overflow-wrap: anywhere;
}

.du-blog-archive-featured__cta {
  box-sizing: border-box;
  display: inline-flex;
  width: 181px;
  height: 48px;
  min-height: 48px;
  margin-top: 32px;
  padding: 12px 24px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 4px;
  background: #ffe3ba;
  box-shadow: 0 1px 4px rgba(50, 0, 0, 0.05), 0 1px 4px rgba(50, 0, 0, 0.15);
  color: #320000;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 1px;
  overflow: hidden;
  text-align: center;
  text-transform: capitalize;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}

.du-blog-archive-featured__link:hover .du-blog-archive-featured__cta,
.du-blog-archive-featured__link:focus-visible .du-blog-archive-featured__cta {
  background: var(--bg-brand-default-hover, #ffa750);
  color: var(--text-brand-default, #320000);
}

.du-blog-archive-featured__link:focus-visible {
  outline: 3px solid var(--background-warning-default, #ffe3ba);
  outline-offset: -5px;
}

.du-blog-archive-featured__control {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0 0 4px;
  border: 0;
  border-radius: 9999px;
  background: rgba(50, 0, 0, 0.32);
  color: var(--text-brand-on-brand, #ffe3ba);
  cursor: pointer;
  font-family: var(--font-family-serif, "Lora", serif);
  font-size: 42px;
  line-height: 1;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 160ms ease, background-color 160ms ease;
}

.du-blog-archive-featured:hover .du-blog-archive-featured__control,
.du-blog-archive-featured:focus-within .du-blog-archive-featured__control {
  opacity: 0.8;
}

.du-blog-archive-featured__control:hover,
.du-blog-archive-featured__control:focus-visible {
  background: rgba(50, 0, 0, 0.62);
  opacity: 1;
}

.du-blog-archive-featured__control--previous {
  left: 24px;
}

.du-blog-archive-featured__control--next {
  right: 24px;
}

.du-blog-archive-results {
  width: 100%;
  background: var(--background-default-default, #fffbf5);
}

.du-blog-archive-results__inner {
  box-sizing: border-box;
  width: min(100%, 1280px);
  margin-inline: auto;
  padding: var(--space-600, 24px) var(--space-600, 24px) 96px;
}

.du-blog-archive--featured-visible .du-blog-archive-results__inner {
  padding-top: var(--space-1100, 48px);
}

.du-blog-archive-results__content {
  min-height: 240px;
  opacity: 1;
  transition: opacity 160ms ease;
}

.du-blog-archive-results.is-loading .du-blog-archive-results__content {
  opacity: 0.45;
  pointer-events: none;
}

.du-blog-archive-categories {
  display: flex;
  width: 100%;
  min-height: 25px;
  margin: 0 0 var(--space-600, 24px);
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-600, 24px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.du-blog-archive-categories::-webkit-scrollbar {
  display: none;
}

.du-blog-archive-categories__item:first-child {
  margin-inline-start: auto;
}

.du-blog-archive-categories__item:last-child {
  margin-inline-end: auto;
}

.du-blog-archive-categories__item {
  position: relative;
  display: inline-flex;
  min-height: 25px;
  flex: 0 0 auto;
  align-items: flex-start;
  color: var(--du-blog-color-muted, #796868);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 18px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 18px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: capitalize;
  transition: color 160ms ease;
}

.du-blog-archive-categories__item:hover,
.du-blog-archive-categories__item:focus-visible,
.du-blog-archive-categories__item.is-active {
  color: var(--du-blog-color-default, #320000);
}

.du-blog-archive-categories__item.is-active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 9999px;
  background: var(--du-blog-color-default, #320000);
  content: "";
}

.du-blog-archive-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--space-1100, 48px);
  column-gap: var(--space-600, 24px);
}

.du-blog-archive-card {
  min-width: 0;
  min-height: 476px;
  margin: 0;
  overflow: hidden;
}

.du-blog-archive-card__link {
  display: flex;
  width: 100%;
  min-height: inherit;
  flex-direction: column;
  color: var(--du-blog-color-default, #320000);
  text-decoration: none;
}

.du-blog-archive-card__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 320 / 175;
  border-radius: 4px;
  background: var(--background-neutral-alternative, #f2e9e9);
}

.du-blog-archive-card__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 180ms ease;
}

.du-blog-archive-card__link:hover .du-blog-archive-card__image,
.du-blog-archive-card__link:focus-visible .du-blog-archive-card__image {
  transform: scale(1.025);
}

.du-blog-archive-card__link:focus-visible {
  outline: 2px solid var(--du-blog-color-warning, #aa5d01);
  outline-offset: 4px;
}

.du-blog-archive-card__content {
  box-sizing: border-box;
  display: flex;
  min-height: 146px;
  padding: 16px 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  overflow: hidden;
}

.du-blog-archive-card__eyebrow,
.du-blog-archive-card__title,
.du-blog-archive-card__excerpt {
  margin: 0;
}

.du-blog-archive-card__eyebrow {
  max-width: 100%;
  overflow: hidden;
  color: var(--du-blog-color-warning, #aa5d01);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 14px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.du-blog-archive-card__title {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  color: var(--du-blog-color-default, #320000);
  font-family: var(--font-family-serif, "Lora", serif);
  font-size: 20px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.4;
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.du-blog-archive-card__excerpt {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  color: var(--du-blog-color-default, #320000);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.du-blog-archive-pagination {
  display: flex;
  width: 100%;
  margin-top: 64px;
  align-items: center;
  justify-content: center;
  gap: var(--space-100, 4px);
}

.du-blog-archive-pagination .page-numbers {
  box-sizing: border-box;
}

.du-blog-archive-pagination ul.page-numbers {
  margin: 0;
  padding: 0;
  list-style: none;
}

.du-blog-archive-pagination ul.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-100, 4px);
}

.du-blog-archive-pagination li {
  display: flex;
  margin: 0;
}

.du-blog-archive-pagination ul a.page-numbers,
.du-blog-archive-pagination ul span.page-numbers {
  display: inline-flex;
  width: 32px;
  height: 32px;
  padding: var(--space-200, 8px) var(--space-300, 12px);
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text-default-default, #320000);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 16px;
  text-decoration: none;
}

.du-blog-archive-pagination a.page-numbers:hover,
.du-blog-archive-pagination a.page-numbers:focus-visible {
  background: var(--bg-default-secondary, #ffefce);
}

.du-blog-archive-pagination span.page-numbers.current {
  background: var(--bg-brand-default, #320000);
  color: var(--text-brand-on-brand, #ffe3ba);
}

.du-blog-archive-pagination__control {
  display: inline-flex;
  width: auto;
  height: 32px;
  margin: 0;
  padding: var(--space-200, 8px);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-100, 4px);
  border-radius: var(--radius-xs, 4px);
  color: var(--text-default-default, #320000);
  font-family: var(--font-family-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: var(--font-weight-regular, 400);
  line-height: 16px;
  text-decoration: none;
}

.du-blog-archive-pagination__control.is-disabled {
  color: var(--text-disabled-default);
  cursor: not-allowed;
  pointer-events: none;
}

.du-blog-archive-pagination__icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: currentcolor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 5.6px 9.6px;
  mask-size: 5.6px 9.6px;
}

.du-blog-archive-pagination__icon--previous {
  -webkit-mask-image: url("../images/blog/pagination-figma/2b4852d9ca225bcbf7d2461b6841191ccc408bbf.svg");
  mask-image: url("../images/blog/pagination-figma/2b4852d9ca225bcbf7d2461b6841191ccc408bbf.svg");
}

.du-blog-archive-pagination__icon--next {
  -webkit-mask-image: url("../images/blog/pagination-figma/7edc78b9e2a0f732a79db06bfc941b199ae3db9b.svg");
  mask-image: url("../images/blog/pagination-figma/7edc78b9e2a0f732a79db06bfc941b199ae3db9b.svg");
}

.du-blog-archive-pagination span.page-numbers.dots {
  font-weight: var(--font-weight-bold, 700);
}

.du-blog-archive-empty {
  padding-block: 96px;
  text-align: center;
}

.du-blog-archive-empty h2 {
  margin: 0 0 16px;
  font-family: var(--font-family-serif, "Lora", serif);
  font-size: 36px;
  line-height: 1.3;
}

.du-blog-archive-empty p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

/* Tag archive */
.du-tag-archive-hero {
  position: relative;
}

.du-tag-archive-hero__breadcrumbs {
  position: absolute;
  z-index: 2;
  top: var(--space-600, 24px);
  left: calc(
    ((100% - min(100%, var(--main-nav-desktop-width, 1280px))) / 2)
    + var(--main-nav-desktop-padding-x, 22px)
  );
}

.du-tag-archive-results__inner {
  padding-top: var(--space-600, 24px);
}

.du-tag-archive__actions {
  display: flex;
  width: 100%;
  margin-top: var(--space-1600, 64px);
  flex-direction: column;
  align-items: center;
  gap: var(--space-1100, 48px);
}

.du-tag-archive__actions .du-blog-archive-pagination {
  margin-top: 0;
}

.du-tag-archive__cta {
  width: auto;
  height: 48px;
  min-height: 48px;
  padding: var(--space-300, 12px) var(--space-600, 24px);
}

@media (prefers-reduced-motion: reduce) {
  .du-blog-archive-featured__slide,
  .du-blog-archive-featured__image {
    transition: none;
  }

  .du-blog-archive-featured__slide.is-active .du-blog-archive-featured__image {
    transform: scale(1.01);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .du-blog-archive-hero__title {
    font-size: clamp(40px, 5.5vw, 56px);
  }

  .du-blog-archive-featured {
    height: clamp(560px, 62vw, 674px);
  }

  .du-blog-archive-featured__title {
    font-size: clamp(40px, 5.5vw, 56px);
  }

  .du-blog-archive-grid {
    gap: 40px 24px;
  }
}

@media (max-width: 767px) {
  .du-blog-archive-hero {
    min-height: 0;
    padding-inline: 15px;
  }

  .du-blog-archive-hero::before {
    background-position: top center;
    background-size: 160% auto;
  }

  .du-blog-archive-hero__inner {
    min-height: 0;
    padding-block: 32px 48px;
    justify-content: flex-start;
    gap: 24px;
  }

  .du-blog-archive-hero__title {
    font-size: 28px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
  }

  .du-blog-archive-hero__description {
    font-size: 18px;
    line-height: 1.5;
  }

  .du-blog-archive-featured {
    height: 503px;
  }

  .du-blog-archive-featured__image {
    object-position: center;
  }

  .du-blog-archive-featured__shade {
    background:
      linear-gradient(180deg, rgba(50, 0, 0, 0.14) 0%, rgba(50, 0, 0, 0.02) 38%, rgba(50, 0, 0, 0.82) 100%),
      linear-gradient(90deg, rgba(50, 0, 0, 0.28) 0%, rgba(50, 0, 0, 0.02) 52%, rgba(50, 0, 0, 0.24) 100%);
  }

  .du-blog-archive-featured__content {
    right: 16px;
    bottom: 40px;
    left: 16px;
  }

  .du-blog-archive-featured__eyebrow {
    margin-bottom: 12px;
    font-size: 18px;
  }

  .du-blog-archive-featured__title {
    width: 288px;
    font-size: 32px;
    line-height: 1.3;
  }

  .du-blog-archive-featured__cta {
    margin-top: 12px;
  }

  .du-blog-archive-featured__control {
    top: auto;
    bottom: 46px;
    width: 36px;
    height: 36px;
    font-size: 34px;
    opacity: 0;
    transform: none;
  }

  .du-blog-archive-featured:focus-within .du-blog-archive-featured__control {
    opacity: 0.72;
  }

  .du-blog-archive-featured__control--previous {
    left: 8px;
  }

  .du-blog-archive-featured__control--next {
    right: 8px;
  }

  .du-blog-archive-results__inner {
    width: 100%;
    padding: var(--space-600, 24px) 16px 96px;
  }

  .du-blog-archive--featured-visible .du-blog-archive-results__inner {
    padding-top: var(--space-1100, 48px);
  }

  .du-blog-archive-categories {
    width: auto;
    margin: 0 calc(var(--space-400, 16px) * -1) var(--space-600, 24px);
    padding: 0 var(--space-400, 16px);
    justify-content: flex-start;
    gap: var(--space-600, 24px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .du-blog-archive-categories__item:first-child {
    margin-inline-start: 0;
  }

  .du-blog-archive-categories__item:last-child {
    margin-inline-end: 0;
  }

  .du-blog-archive-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    row-gap: var(--space-600, 24px);
    column-gap: 0;
  }

  .du-blog-archive-card {
    width: 100%;
    min-height: 0;
  }

  .du-blog-archive-card__link {
    min-height: 0;
  }

  .du-blog-archive-card__content {
    min-height: 0;
    padding: var(--space-400, 16px) 0 0;
  }

  .du-blog-archive-pagination {
    margin-top: 40px;
    overflow-x: auto;
    justify-content: center;
    justify-content: safe center;
    scrollbar-width: none;
  }

  .du-blog-archive-pagination::-webkit-scrollbar {
    display: none;
  }

  .du-blog-archive-pagination ul.page-numbers {
    min-width: 0;
    margin-inline: 0;
    flex: 0 0 auto;
  }

  .du-tag-archive-hero,
  .du-tag-archive-hero__inner {
    min-height: 0;
  }

  .du-tag-archive-hero {
    padding-right: var(--space-400, 16px);
    padding-left: 15px;
  }

  .du-tag-archive-hero::before {
    background-size: cover;
  }

  .du-tag-archive-hero__inner {
    width: 100%;
    padding-block: var(--space-800, 32px) var(--space-1100, 48px);
  }

  .du-tag-archive-hero__breadcrumbs {
    display: none;
  }

  .du-tag-archive-results__inner {
    padding: var(--space-600, 24px) var(--space-400, 16px) var(--space-2400, 96px);
  }

  .du-tag-archive__actions {
    margin-top: var(--space-1000, 40px);
    gap: var(--space-1000, 40px);
  }
}

@media (max-width: 1250px) {
  .du-main-nav + .du-blog-archive {
    margin-top: calc(var(--du-announcement-bar-offset) + var(--main-nav-mobile-height));
  }
}