/* ==========================================================================
   Dynamic Mockups — editorial surfaces
   --------------------------------------------------------------------------
   post-hero, article-body, post-grid, author-hero. The blog single, the blog
   index, the category archives, an author page and search results.

   Two things make this file different from the rest of the pool:

   1. `article-body` styles HTML nobody here wrote — 178 posts of block-editor
      output. Its rules are DESCENDANT, not `>`: the editor wraps content in
      `.wp-block-*` divs and a direct-child selector misses every paragraph
      inside one. The tag inventory was taken from the actual posts, not
      guessed (h2–h5, p, strong/em, a, figure/figcaption, img, video, ul/ol/li,
      table, blockquote, iframe embeds).

   2. `assets/css/custom_single_blog_post_style.css` still loads site-wide and
      styles BARE `p`, `h1`–`h6`, `a`, `blockquote`, `figure`, `ol`. Every rule
      here therefore carries at least a class, which beats it on specificity —
      but if a bare tag inside an article looks wrong, that file is the first
      place to look, not this one.

   Read every colour from a token. The token names are closed: check
   `grep -o '^\s*--dm-[a-z0-9-]*' assets/css/dm/tokens.css | sort -u` before
   using one — an undefined var() silently invalidates the whole declaration.
   ========================================================================== */

/* ==========================================================================
   post-hero
   ========================================================================== */
.dm-phero .dm-container { padding-block: 56px 8px; }

/* Nothing under the headline, so nothing to leave room for. */
.dm-phero--bare .dm-container { padding-block: 56px 0; }
.dm-phero--bare .dm-phero-inner { max-width: 900px; }

.dm-phero-inner { max-width: 800px; }

.dm-phero-title {
  margin: 12px 0 0;
  font-family: var(--dm-font-display);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--dm-tracking-display);
  color: var(--dm-ink);
  /* Headlines are editor-written and can run long; balance beats a one-word
     last line on a three-line headline. */
  text-wrap: balance;
}

.dm-phero-standfirst {
  margin: 20px 0 0;
  max-width: 62ch;
  font-size: var(--dm-text-body-lg);
  line-height: var(--dm-leading-body);
  color: var(--dm-text-secondary);
}

.dm-phero-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--dm-border-hairline);
  font-size: .875rem;
}

.dm-phero-author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--dm-ink);
  font-weight: 600;
  text-decoration: none;
}

.dm-phero-author:hover { color: var(--dm-accent-primary); }

.dm-phero-author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  /* An avatar on a light ground needs its own edge, or it floats. */
  box-shadow: inset 0 0 0 1px rgb(33 34 29 / .08);
}

.dm-phero-date,
.dm-phero-read { color: var(--dm-text-tertiary); }

.dm-phero-read {
  font-family: var(--dm-font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* The byline separators are drawn, not typed, so no stray bullet is left
   hanging when a post has no read time. */
.dm-phero-date::before,
.dm-phero-read::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 12px;
  vertical-align: 3px;
  border-radius: 50%;
  background: var(--dm-border-card);
}

.dm-phero-byline > :first-child::before { display: none; }

.dm-phero-figure {
  margin: 40px 0 0;
  overflow: hidden;
  border-radius: var(--dm-radius-card-inner);
}

/* `image_side`: copy left, asset in a narrower column beside it. A portrait
   asset — an ebook cover — at the full measure is enormous and pushes the
   headline and the form below the fold. */
.dm-phero-inner--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 48px;
  align-items: center;
  max-width: 1100px;
}

.dm-phero-inner--split .dm-phero-figure { margin: 0; }

.dm-phero-inner--split .dm-phero-figure img {
  /* No fixed ratio: a cover render is whatever shape it was exported at. */
  width: 100%;
  height: auto;
}

.dm-phero-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   article-body
   ========================================================================== */
.dm-abody .dm-container { padding-block: 40px 72px; }

.dm-abody-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
}

/* `align-items: start` is right for the article column, wrong for the rail:
   it sized the aside to its own content, so the sticky block inside had exactly
   its own height to move in — nothing. It scrolled away with the page and read
   as "not sticky". Stretching just this track gives the rail the article's
   height to travel down. */
.dm-abody-aside { align-self: stretch; }

.dm-abody-grid--solo { grid-template-columns: minmax(0, 1fr); }

.dm-article {
  /* About 70 characters is what long-form wants; the grid column is wider than
     that on a large screen, so the measure is capped here rather than there. */
  max-width: 72ch;
  color: var(--dm-text-secondary);
  font-size: var(--dm-text-body-md);
  line-height: var(--dm-leading-body);
}

/* ez-toc emits TWO contents lists per post: one auto-inserted into the content
   and one from the [ez-toc] shortcode the template puts in the rail. Only the
   rail's is wanted, so the in-article copy is hidden — the stylesheet this
   replaced did exactly the same, for the same reason. */
.dm-article #ez-toc-container { display: none; }

/* ---- headings ---- */
.dm-article h2,
.dm-article h3,
.dm-article h4,
.dm-article h5 {
  color: var(--dm-ink);
  font-family: var(--dm-font-display);
  font-weight: 400;
  line-height: var(--dm-leading-display);
  letter-spacing: var(--dm-tracking-display);
  /* Scroll-to-anchor from the table of contents must clear the sticky header. */
  scroll-margin-top: calc(var(--dm-header-h) + 24px);
}

.dm-article h2 { margin: 48px 0 0; font-size: var(--dm-text-h3); }
.dm-article h3 { margin: 36px 0 0; font-size: var(--dm-text-h4); }

.dm-article h4,
.dm-article h5 {
  margin: 28px 0 0;
  font-family: var(--dm-font-body);
  font-weight: 600;
  font-size: var(--dm-text-body-lg);
}

.dm-article h5 { font-size: var(--dm-text-body-md); }
.dm-article > :first-child { margin-top: 0; }

/* ---- text ---- */
.dm-article p { margin: 16px 0 0; }
.dm-article strong { color: var(--dm-ink); font-weight: 600; }
.dm-article em { font-style: italic; }

.dm-article a {
  color: var(--dm-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.dm-article a:hover { color: var(--dm-accent-primary); }

/* ---- lists ---- */
.dm-article ul,
.dm-article ol {
  margin: 16px 0 0;
  padding-left: 24px;
}

.dm-article ul { list-style: disc; }
.dm-article ol { list-style: decimal; }
.dm-article li + li { margin-top: 8px; }
.dm-article li > ul,
.dm-article li > ol { margin-top: 8px; }

/* ---- media ---- */
.dm-article figure {
  margin: 32px 0 0;
}

.dm-article img,
.dm-article video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--dm-radius-card);
}

.dm-article figcaption {
  margin-top: 10px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--dm-text-tertiary);
}

/* An embed arrives as an iframe inside a wrapper of unknown class, so the
   aspect ratio is put on the iframe itself. */
.dm-article iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 32px 0 0;
  border: 0;
  border-radius: var(--dm-radius-card);
}

/* ---- quote ---- */
.dm-article blockquote {
  margin: 32px 0 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--dm-accent-primary);
  font-family: var(--dm-font-display);
  font-size: var(--dm-text-body-lg);
  line-height: 1.4;
  color: var(--dm-ink);
}

.dm-article blockquote p { margin-top: 8px; }
.dm-article blockquote > :first-child { margin-top: 0; }

/* ---- tables ----
   59 posts carry one, and the theme's global `table td/th` rules reach them, so
   every cell property is set rather than inherited. A wide table scrolls inside
   its own box; the page itself must never scroll sideways. */
.dm-article .wp-block-table,
.dm-article figure.wp-block-table {
  margin: 32px 0 0;
  overflow-x: auto;
}

.dm-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}

.dm-article table td,
.dm-article table th {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--dm-border-hairline);
  text-align: left;
  vertical-align: top;
}

.dm-article table th {
  color: var(--dm-ink);
  font-weight: 600;
  white-space: nowrap;
}

/* Editor tables usually have no thead — the first row is the header. Written
   as `tbody > tr:nth-child(1) > td` because a plugin ships
   `table tbody > tr:nth-child(2n+1) > td { border: none }` at (0,1,3). */
.dm-article table tbody > tr:nth-child(1) > td {
  color: var(--dm-ink);
  font-weight: 600;
  background: var(--dm-surface-card);
}

.dm-article table tbody > tr:nth-child(n) > td {
  border-bottom: 1px solid var(--dm-border-hairline);
}

.dm-article table tbody > tr:last-child > td { border-bottom: 0; }

/* ==========================================================================
   article-body — the sticky rail
   --------------------------------------------------------------------------
   Holds plugin output (ez-toc, a CTA shortcode), so it styles by the ids and
   classes those plugins emit. If a plugin is deactivated the rail simply has
   less in it; nothing here assumes a child exists.
   ========================================================================== */
/* The rail scrolls with the article — a table of contents that long can pin
   itself over most of the viewport, and it is reference material you read once.
   Only the CTA below it stays. It needs a containing block taller than itself
   to travel in, which is what min-height gives it: the aside is stretched to
   the article's height (above), so the rail inherits that room. */
.dm-abody-sticky {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 100%;
}

.dm-abody-aside #ez-toc-container {
  padding: 20px;
  background: var(--dm-surface-card);
  border: 0;
  border-radius: var(--dm-radius-card);
  box-shadow: none;
  width: auto;
  float: none;
  /* A long article's contents list must not push the rail past the viewport. */
  max-height: calc(100vh - var(--dm-header-h) - 200px);
  overflow-y: auto;
}

.dm-abody-aside #ez-toc-container .ez-toc-title {
  margin-bottom: 12px;
  color: var(--dm-ink);
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The plugin ships a collapse toggle that is redundant in a sticky rail. */
.dm-abody-aside #ez-toc-container .ez-toc-title-toggle { display: none; }

.dm-abody-aside #ez-toc-container ul,
.dm-abody-aside #ez-toc-container ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-abody-aside #ez-toc-container li { margin: 0; }
.dm-abody-aside #ez-toc-container ul ul { padding-left: 12px; }

.dm-abody-aside #ez-toc-container a {
  display: block;
  padding: 5px 0;
  color: var(--dm-text-secondary);
  font-size: .8125rem;
  line-height: 1.45;
  text-decoration: none;
}

.dm-abody-aside #ez-toc-container a:hover { color: var(--dm-ink); }

.dm-abody-aside #ez-toc-container a.active,
.dm-abody-aside #ez-toc-container a.ez-toc-link-active {
  color: var(--dm-ink);
  font-weight: 600;
}

.dm-abody-after { margin-top: 56px; }

/* ==========================================================================
   article-body — the blocks the plugins put in it
   --------------------------------------------------------------------------
   `[BlogPostSideBarCTABlock]`, `[AfterBlogPostCTABlock]` and
   `[AfterBlogPostVideo]` are Post Snippets Pro snippets stored in the database
   (`wp_pspro_snippets`), so their markup is editor-owned and cannot be changed
   from here — only reskinned. That markup is stable and shared by all 178
   posts; if a snippet is edited in wp-admin these class names are what to keep.
   ========================================================================== */

/* The rail CTA. */
.dm-abody-aside .sidebar-cta {
  position: sticky;
  top: calc(var(--dm-header-h) + 24px);
  padding: 20px;
  border-radius: var(--dm-radius-card);
  background: var(--dm-ink);
  color: var(--dm-on-ink);
}

.dm-abody-aside .sidebar-cta-paragraph {
  margin: 0 0 16px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--dm-on-ink);
}

/* The snippet nests a div inside the anchor, so the button is drawn on the
   inner div and the anchor is only the hit area. */
.dm-abody-aside .sidebar-cta a { text-decoration: none; }

.dm-abody-aside .sidebar-cta-button,
.dm-abody-after .sidebar-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--dm-radius-button);
  background: var(--dm-accent-primary);
  color: #FFFFFF;
  font-size: .875rem;
  font-weight: 600;
  transition: filter var(--dm-dur-in) var(--dm-ease-press);
}

.dm-abody-aside .sidebar-cta a:hover .sidebar-cta-button,
.dm-abody-after a:hover .sidebar-cta-button { filter: brightness(1.08); }

.dm-abody-aside .sidebar-cta-text,
.dm-abody-after .sidebar-cta-text { color: inherit; }

/* The snippet's arrow is a dark SVG; on the accent fill it has to invert. */
.dm-abody-aside .sidebar-cta-arrow-icon,
.dm-abody-after .sidebar-cta-button .sidebar-cta-arrow-icon {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
}

/* The CTA under the article. */
.dm-abody-after .after-blog-post-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: 36px;
  border-radius: var(--dm-radius-card-inner);
  background: var(--dm-surface-card);
  box-shadow: var(--dm-card-inset);
}

.dm-abody-after .letter-heading {
  margin: 0;
  max-width: 24ch;
  font-family: var(--dm-font-display);
  font-size: var(--dm-text-h3);
  font-weight: 400;
  line-height: var(--dm-leading-display);
  letter-spacing: var(--dm-tracking-display);
  color: var(--dm-ink);
}

.dm-abody-after .letter-paragraph {
  margin: 10px 0 0;
  max-width: 46ch;
  font-size: var(--dm-text-body-md);
  line-height: var(--dm-leading-body);
  color: var(--dm-text-secondary);
}

.dm-abody-after .actions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.dm-abody-after .actions-wrapper a { text-decoration: none; }

.dm-abody-after .actions-wrapper > span {
  font-size: .75rem;
  color: var(--dm-text-tertiary);
}

/* The autoplaying video under the CTA. It is decorative and muted; the loop
   and the missing controls are the snippet's, not ours. */
.dm-abody-after .video-wrapper {
  margin-top: 32px;
  overflow: hidden;
  border-radius: var(--dm-radius-card-inner);
  background: var(--dm-surface-card);
}

.dm-abody-after .video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Forminator forms
   --------------------------------------------------------------------------
   Plugin markup, so styled by the classes Forminator emits. Three pages embed
   one: the investor newsletter, the resource ebook and the startup programme.
   The theme styles bare `input` and `button`, so both are reset here.
   ========================================================================== */
.dm-form-block { padding-block: 8px 72px; }

.dm-form-block .forminator-ui,
.dm-landing-embed .forminator-ui { max-width: 520px; }

.dm-form-block .forminator-row,
.dm-landing-embed .forminator-row { margin-bottom: 16px; }

.dm-form-block .forminator-input,
.dm-form-block .forminator-textarea,
.dm-landing-embed .forminator-input,
.dm-landing-embed .forminator-textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--dm-border-hairline);
  border-radius: var(--dm-radius-button);
  background: var(--dm-surface-white);
  box-shadow: none;
  color: var(--dm-ink);
  font-family: var(--dm-font-body);
  font-size: .9375rem;
}

.dm-form-block .forminator-textarea,
.dm-landing-embed .forminator-textarea {
  height: auto;
  min-height: 110px;
  padding: 12px 14px;
}

.dm-form-block .forminator-input:focus,
.dm-landing-embed .forminator-input:focus {
  outline: none;
  border-color: var(--dm-accent-primary);
}

.dm-form-block .forminator-label,
.dm-landing-embed .forminator-label {
  display: block;
  margin-bottom: 6px;
  color: var(--dm-ink);
  font-size: .8125rem;
  font-weight: 600;
}

.dm-form-block .forminator-button,
.dm-landing-embed .forminator-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--dm-radius-button);
  background: var(--dm-ink);
  color: var(--dm-on-ink);
  font-family: var(--dm-font-body);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dm-dur-in) var(--dm-ease-press);
}

.dm-form-block .forminator-button:hover,
.dm-landing-embed .forminator-button:hover { background: var(--dm-accent-primary); }

.dm-form-block .forminator-error-message,
.dm-landing-embed .forminator-error-message {
  margin-top: 6px;
  color: var(--dm-accent-primary);
  font-size: .8125rem;
}

/* ==========================================================================
   related posts (yarpp-template-dm-cards.php)
   ========================================================================== */
.dm-related { margin-top: 64px; }

.dm-related-title { margin: 0 0 28px; }

/* ==========================================================================
   the contents list on a plain page (page.php → prose)
   --------------------------------------------------------------------------
   The legal pages are 15,000px long and ez-toc auto-inserts a contents list at
   the top of them, which is genuinely useful there — so unlike the article's
   copy this one is styled rather than hidden. It sits inline, full measure,
   above the text.
   ========================================================================== */
.dm-prose-body #ez-toc-container {
  width: auto;
  float: none;
  margin: 0 0 40px;
  padding: 24px 28px;
  border: 0;
  border-radius: var(--dm-radius-card-inner);
  background: var(--dm-surface-card);
  box-shadow: none;
}

.dm-prose-body #ez-toc-container .ez-toc-title {
  margin: 0 0 14px;
  color: var(--dm-ink);
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The plugin's collapse control renders as a bare bordered "Toggle" button,
   because the theme styles bare <button>. Nothing here needs collapsing. */
.dm-prose-body #ez-toc-container .ez-toc-title-toggle { display: none; }

.dm-prose-body #ez-toc-container ul,
.dm-prose-body #ez-toc-container ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-prose-body #ez-toc-container ul ul { padding-left: 16px; }

.dm-prose-body #ez-toc-container a {
  display: block;
  padding: 4px 0;
  color: var(--dm-text-secondary);
  font-size: .875rem;
  line-height: 1.45;
  text-decoration: none;
}

.dm-prose-body #ez-toc-container a:hover {
  color: var(--dm-ink);
  text-decoration: underline;
}

/* ==========================================================================
   post-grid
   ========================================================================== */
.dm-pgrid .dm-container { padding-block: 8px 72px; }
.dm-pgrid-eyebrow { margin-bottom: 8px; }

/* The shared section head centres and narrows its lead; an archive heading is
   left-aligned and wants the full measure under it. */
.dm-pgrid .dm-sec-head { margin-bottom: 40px; }

.dm-pgrid .dm-lead {
  max-width: 62ch;
  margin-top: 12px;
}

.dm-pgrid-grid {
  display: grid;
  gap: 40px 28px;
}

.dm-pgrid-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dm-pgrid-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dm-post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dm-post-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.dm-post-card-media {
  display: block;
  overflow: hidden;
  border-radius: var(--dm-radius-card);
  background: var(--dm-surface-card);
}

/* A fixed ratio keeps the grid's rows aligned whatever the editor uploaded —
   but it has to be the ratio the images ACTUALLY are. The blog's featured
   images are 16:9 text graphics ("How to Win More Clients With PDF Lookbooks"
   set over an illustration), and cover-cropping them to 3:2 sliced the first
   word off every headline. Match the source and nothing is lost. */
.dm-post-card-media--16-9 { aspect-ratio: 16 / 9; }
.dm-post-card-media--3-2 { aspect-ratio: 3 / 2; }
.dm-post-card-media--square { aspect-ratio: 1; }

.dm-post-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dm-dur-in) var(--dm-ease-press);
}

.dm-post-card-link:hover .dm-post-card-media img { transform: scale(1.03); }

.dm-post-card-blank {
  display: block;
  width: 100%;
  height: 100%;
}

.dm-post-card-cat {
  display: block;
  margin-top: 16px;
  color: var(--dm-accent-primary);
  font-family: var(--dm-font-mono);
  font-size: var(--dm-text-label);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dm-post-card .dm-post-card-title {
  margin: 8px 0 0;
  color: var(--dm-ink);
  font-family: var(--dm-font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: var(--dm-tracking-display);
  /* YARPP's own stylesheet ships `.yarpp-related h3 { text-transform:
     capitalize }`, and the related-posts cards ARE h3s inside .yarpp-related —
     which rewrote every headline ("the Rules of eCommerce" became "The Rules Of
     ECommerce"). Reset it here rather than in the related block, because a card
     can land inside anything. Written as `.dm-post-card .dm-post-card-title`
     because that plugin rule is (0,1,1) and the class alone is (0,1,0). */
  text-transform: none;
}

.dm-post-card-link:hover .dm-post-card-title { color: var(--dm-accent-primary); }

.dm-post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  /* Pushed to the bottom so the meta lines up across a row of uneven titles. */
  margin: 12px 0 0;
  padding-top: 0;
  color: var(--dm-text-tertiary);
  font-size: .8125rem;
}

.dm-post-card-meta > span + time::before {
  content: "·";
  margin-right: 12px;
}

/* The CPT archive variant: an excerpt and a call to action instead of a
   byline. The card is still ONE link — the markup this replaced nested a
   <button> inside the <a>, a hit target inside a hit target — so the call to
   action is a span that only looks like a control. */
.dm-post-card-text {
  display: block;
  margin-top: 10px;
  color: var(--dm-text-secondary);
  font-size: .9375rem;
  line-height: var(--dm-leading-body);
}

.dm-post-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--dm-ink);
  font-size: .875rem;
  font-weight: 600;
}

.dm-post-card-cta svg { transition: transform var(--dm-dur-in) var(--dm-ease-press); }
.dm-post-card-link:hover .dm-post-card-cta { color: var(--dm-accent-primary); }
.dm-post-card-link:hover .dm-post-card-cta svg { transform: translateX(3px); }

/* An excerpt card ends on its call to action, so the cards in a row need equal
   height for those to line up. */
.dm-pgrid-grid > .dm-post-card:has(.dm-post-card-cta) { justify-content: flex-start; }

.dm-post-card:has(.dm-post-card-cta) .dm-post-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dm-post-card:has(.dm-post-card-cta) .dm-post-card-cta { margin-top: auto; padding-top: 16px; }

.dm-pgrid-empty {
  padding: 48px 0 0;
  text-align: center;
}

.dm-pgrid-empty p {
  margin: 0 0 20px;
  font-size: var(--dm-text-body-lg);
  color: var(--dm-text-secondary);
}

/* ==========================================================================
   pagination
   --------------------------------------------------------------------------
   paginate_links() emits bare <a>/<span>, which the theme's global control
   styles reach — so each state is declared here rather than left to inherit.
   ========================================================================== */
.dm-pager { margin-top: 56px; }

.dm-pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-pager li { margin: 0; }

.dm-pager a,
.dm-pager span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--dm-radius-button);
  color: var(--dm-text-secondary);
  font-family: var(--dm-font-mono);
  font-size: .875rem;
  text-decoration: none;
  justify-content: center;
}

.dm-pager a:hover {
  background: var(--dm-surface-card);
  color: var(--dm-ink);
}

.dm-pager .current {
  background: var(--dm-ink);
  color: var(--dm-on-ink);
  font-weight: 600;
}

.dm-pager .dots {
  min-width: 24px;
  padding: 0;
  color: var(--dm-text-tertiary);
}

.dm-pager .prev,
.dm-pager .next { color: var(--dm-ink); }

/* ==========================================================================
   author-hero
   ========================================================================== */
.dm-ahero .dm-container { padding-block: 56px 24px; }

.dm-ahero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 48px;
  align-items: center;
}

.dm-ahero-name {
  margin: 12px 0 0;
  font-family: var(--dm-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: var(--dm-tracking-display);
  color: var(--dm-ink);
}

.dm-ahero-meta {
  margin: 12px 0 0;
  color: var(--dm-text-tertiary);
  font-size: .9375rem;
}

.dm-ahero-bio {
  max-width: 62ch;
  margin-top: 20px;
  color: var(--dm-text-secondary);
  font-size: var(--dm-text-body-md);
  line-height: var(--dm-leading-body);
}

.dm-ahero-bio p { margin: 0 0 12px; }
.dm-ahero-bio p:last-child { margin-bottom: 0; }

.dm-ahero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0 0;
}

.dm-ahero-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--dm-ink);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
}

.dm-ahero-links a:hover { color: var(--dm-accent-primary); }

.dm-ahero-portrait {
  overflow: hidden;
  border-radius: var(--dm-radius-card-inner);
  background: var(--dm-surface-card);
  aspect-ratio: 1;
}

.dm-ahero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1023px) {
  /* The rail stops being a rail before the article gets narrow enough to hurt:
     the contents list goes above the piece rather than beside it. */
  .dm-abody-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dm-abody-sticky { position: static; }
  .dm-abody-aside { order: -1; }
  .dm-abody-aside #ez-toc-container { max-height: none; }
  .dm-pgrid-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-ahero-grid { grid-template-columns: minmax(0, 1fr) 160px; gap: 32px; }
}

@media (max-width: 1023px) {
  .dm-phero-inner--split {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .dm-phero-inner--split .dm-phero-figure { max-width: 280px; }
}

@media (max-width: 767px) {
  .dm-phero .dm-container { padding-block: 32px 8px; }
  .dm-pgrid-grid--3,
  .dm-pgrid-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .dm-ahero-grid { grid-template-columns: minmax(0, 1fr); }
  .dm-ahero-portrait { max-width: 160px; }
  .dm-article h2 { margin-top: 36px; }
  /* Arrow-only prev/next: the words do not fit next to five page numbers. */
  .dm-pager .dm-pager-word { display: none; }
}